Difference between revisions of "Team:Jilin China/CSS Details"

 
(226 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
text-decoration:none !important;
 
text-decoration:none !important;
 
}
 
}
 +
 +
h3{
 +
font-weight:100 !important;
 +
text-indent: 0 !important;
 +
}
 +
 +
 
.bodycontent .s2 > ul > li a, .bodycontent .s3 > ul > li a{
 
.bodycontent .s2 > ul > li a, .bodycontent .s3 > ul > li a{
 
color:#44C2F0;
 
color:#44C2F0;
Line 13: Line 20:
 
transition: color 0.3s ease;
 
transition: color 0.3s ease;
 
}
 
}
 +
.bodycontent .s2 > ul > li .bg_dark{
 +
color:white;
 +
background:black;
 +
}
 +
 +
 
.HP_Reflections{
 
.HP_Reflections{
 
padding:0;
 
padding:0;
Line 29: Line 42:
 
padding:1rem;
 
padding:1rem;
 
box-sizing:border-box;
 
box-sizing:border-box;
 +
text-align:left !important;
 
}
 
}
  
Line 64: Line 78:
 
opacity:0.5;
 
opacity:0.5;
 
}
 
}
−
 
+
.HP_Quote_text{
−
.details_button_background{
+
/*font-family: Trebuchet MS;*/
−
box-sizing: border-box;
+
font-style:Italic;
 +
background:rgba(0,0,0,0.05);
 +
display:block;
 +
text-indent:0;
 +
padding:4rem !important;
 +
box-sizing:border-box;
 +
position:relative;
 +
width:calc(100% - 2rem) !important;
 +
margin:3rem 1rem !important;
 +
border-left:6px solid #C0C0C0;
 
}
 
}
−
 
+
.bodycontent .s2 > ul > li > div > .definition{
−
.details_button{
+
font-size: 1.5rem !important;
−
border:3px solid black;
+
width:70% !important;
−
height:3.5rem !important;
+
display:block;
−
width:3.5rem !important;
+
background-color:rgba(0,0,0,0.05);
−
border-radius: 3.5rem;
+
font-family: Trebuchet MS !important;
−
transition: all 0.3s ease;
+
font-weight:bolder;
−
position: relative;
+
padding:3rem;
−
padding:0 !important;
+
z-index:2;
−
margin:0 auto !important;
+
margin:3rem auto !important;
−
box-sizing: border-box !important;
+
box-sizing:border-box;
−
}
+
position:relative;
−
.details_button:hover{
+
overflow:hidden;
−
width:12rem !important;
+
−
background:black;
+
 
}
 
}
−
.details_button svg{
+
.definition::after{
−
transform: translate(4.25px,4.25px);
+
content:"Def";
−
}
+
−
.details_button .vertical_line{
+
−
transition: all 0.4s ease;
+
−
d:path('M27.5,12,27.5,27.5,27.5,43');
+
−
 
+
−
}
+
−
.details_button:hover .vertical_line{
+
−
d:path('M27.5,12,42.94,27.5,27.5,43');
+
−
stroke:white;
+
−
}
+
−
.details_button h5{
+
−
padding:0 !important;
+
−
margin:0 !important;
+
−
color: black;
+
−
line-height: 3.5rem;
+
 
position:absolute;
 
position:absolute;
−
top:0;
+
bottom:0;
−
left:3rem;
+
right:0;
−
width:8.5rem !important;
+
z-index:1;
−
text-align: center;
+
font-size:10vw;
−
transition: all 0.3s ease;
+
color:rgba(0,0,0,0.1);
−
}
+
font-family: Trebuchet MS !important;
−
.details_button:hover h5{
+
−
color: white;
+
−
}
+
−
.details_button .horizon_line, .vertical_line {
+
−
fill: none;
+
−
stroke: #000;
+
−
stroke-width: 3.5px;
+
−
}
+
−
.details_button .horizon_line {
+
−
stroke-miterlimit: 10;
+
−
}
+
−
.details_button .vertical_line {
+
−
stroke-linejoin: round;
+
 
}
 
}
 +
  
 
@media screen and (min-width:1080px){
 
@media screen and (min-width:1080px){
 
.bodycontent .s2 > ul > li{
 
.bodycontent .s2 > ul > li{
 
background: white;
 
background: white;
−
padding: 7.5vw 0 7.5vw 0 !important;
+
padding: 3.5vw 0 3.5vw 0 !important;
 
margin-bottom: 2rem;
 
margin-bottom: 2rem;
 
}
 
}
−
.bodycontent .s2 > ul > li > div, .bodycontent .s2 > ul > li > span > div{
+
.bodycontent .s2 > ul > li:not(.full-width) > div, .bodycontent .s2 > ul > li > span > div{
 
padding: 0 calc(10rem + 9.5vw) 0 7.5vw !important;
 
padding: 0 calc(10rem + 9.5vw) 0 7.5vw !important;
 
box-sizing: border-box;
 
box-sizing: border-box;
Line 135: Line 129:
 
width:100%;
 
width:100%;
 
}
 
}
 +
.details_button{
 +
margin:0 0 0 calc(42.5vw - 11rem) !important;
 +
}
 +
}
 +
.pdfs{
 +
width:100%;
 +
height:50rem;
 +
padding:
 +
}
 +
.pdfs object {
 +
width:100%;
 +
height:100%;
 +
object-fit:cover;
 +
overflow:auto;
 +
min-height: 100%
 
}
 
}
 
@media screen and (min-width:680px){
 
@media screen and (min-width:680px){
Line 144: Line 153:
 
}
 
}
 
.s1 .title_con{
 
.s1 .title_con{
−
left:5rem;
+
left:7.5vw;
 
bottom:15vh;
 
bottom:15vh;
 
position: fixed;
 
position: fixed;
Line 151: Line 160:
 
.s1_simplified{
 
.s1_simplified{
 
width: 100%;
 
width: 100%;
−
height: 14rem !important;
+
height:auto;
 
padding-bottom: 5rem;
 
padding-bottom: 5rem;
 
}
 
}
 
.s1_simplified .title_con{
 
.s1_simplified .title_con{
−
left:5rem;
+
left:7.5vw;
 
bottom:auto;
 
bottom:auto;
 
position: relative;
 
position: relative;
Line 180: Line 189:
 
color: black;
 
color: black;
 
font-size: 6vw !important;
 
font-size: 6vw !important;
−
line-height:8vw !important;
+
line-height:1 !important;
−
font-weight: bold;
+
font-weight: bold !important;
−
z-index: 0;
+
 
float:left;
 
float:left;
 +
z-index: 0;
 
border-right: 8px black solid !important;
 
border-right: 8px black solid !important;
 
text-shadow: 0 0 1rem rgba(0,0,0,0.1);
 
text-shadow: 0 0 1rem rgba(0,0,0,0.1);
Line 193: Line 202:
 
line-height:1 !important;
 
line-height:1 !important;
 
color: rgba(255,255,255,0.8) !important;
 
color: rgba(255,255,255,0.8) !important;
 +
}
 +
.s1_simplified p span{
 +
font-size: 5vw !important;
 +
line-height:1 !important;
 +
color: rgba(0,0,0,0.8) !important;
 
}
 
}
 
.s1 table{
 
.s1 table{
Line 256: Line 270:
 
padding: 0;
 
padding: 0;
 
margin: 0 auto 0.5rem ;
 
margin: 0 auto 0.5rem ;
 +
}
 +
.bodycontent .s2 > ul > li.full-width .full-left{
 +
width:60%;
 +
float:left;
 +
}
 +
.bodycontent .s2 > ul > li.full-width .full-right{
 +
width:60%;
 +
float:right;
 
}
 
}
 
.bodycontent .s2 > ul > li{
 
.bodycontent .s2 > ul > li{
 
background: white;
 
background: white;
−
padding: 7.5vw 0 7.5vw 0;
+
padding: 3.5vw 0 3.5vw 0;
 
margin: 0;
 
margin: 0;
 
}
 
}
Line 271: Line 293:
 
width:100%;
 
width:100%;
 
}
 
}
−
.bodycontent .s2 > ul > li > span{
+
.bodycontent .s2 > ul > li > span {
−
height:3rem;
+
display: block;
 +
width:100%;
 +
height:4rem;
 +
overflow:hidden;
 
}
 
}
−
.bodycontent .s2 > ul > li > span:after{
+
.bodycontent .s2 > ul > li > span >:not(.details_button_background){
−
height:3rem;
+
opacity:0;
−
background: (linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1)));
+
transition: all 0.3s ease;
 
}
 
}
 
.bodycontent .s2 .paragraph_banner{
 
.bodycontent .s2 .paragraph_banner{
 
height:30rem;
 
height:30rem;
−
margin:5rem 0;
+
margin:5rem 0 !important;
 
}
 
}
 
.bodycontent .s2 .paragraph_banner div{
 
.bodycontent .s2 .paragraph_banner div{
Line 294: Line 319:
 
.bodycontent .s2 h2{
 
.bodycontent .s2 h2{
 
box-sizing: border-box;
 
box-sizing: border-box;
−
padding: 1rem 0 1rem 0 !important;
+
padding: 1rem 4rem 1rem 2rem !important;
 
font-size: 2rem !important;
 
font-size: 2rem !important;
 
margin: 2rem 1rem !important;
 
margin: 2rem 1rem !important;
−
border-bottom: 0px solid #CFCFCF;
+
border-left: 6px solid;
 
line-height: 3rem;
 
line-height: 3rem;
 +
position: relative;
 +
}
 +
.bodycontent .s2 h2:before {
 +
content:"";
 +
position: absolute;
 +
top:0;
 +
right:0;
 +
width:3rem;
 +
height:100%;
 +
animation: IconSpin 1s ease infinite alternate;
 
}
 
}
 
.bodycontent .s2 h3{
 
.bodycontent .s2 h3{
 
box-sizing: border-box;
 
box-sizing: border-box;
−
padding: 1rem 1rem 0 1rem !important;
+
margin: 1rem 1rem 0 1rem !important;
 
font-size: 1.5rem !important;
 
font-size: 1.5rem !important;
 
line-height: 2rem;
 
line-height: 2rem;
 
color:#595959;
 
color:#595959;
−
text-indent: 2rem !important;
+
padding-left:1rem;
 +
border-left: 6px solid #595959;
 
}
 
}
 
.bodycontent .s2 p:first-of-type:first-letter{
 
.bodycontent .s2 p:first-of-type:first-letter{
Line 325: Line 361:
 
box-sizing: border-box;
 
box-sizing: border-box;
 
clear: both;
 
clear: both;
−
text-indent: 2rem !important;
+
/*text-indent: 2rem !important;*/
 
line-height: 1.9rem !important;
 
line-height: 1.9rem !important;
 
column-count: 1;
 
column-count: 1;
−
column-gap: 1.5rem;
+
column-gap: 2rem;
 
padding: 1rem;
 
padding: 1rem;
 
font-size: 1.1rem !important;
 
font-size: 1.1rem !important;
Line 347: Line 383:
 
float:right;
 
float:right;
 
width:100%;
 
width:100%;
 +
font-family: Trebuchet MS;
 +
}
 +
.bodycontent .s2 .tables{
 +
font-size:1.3rem !important;
 +
padding: 4rem 0 1rem;
 +
margin: 0 1rem;
 +
border-bottom:2px solid #CCCCCC;
 +
font-weight:100;
 +
width:calc(100% - 2rem);
 
font-family: Trebuchet MS;
 
font-family: Trebuchet MS;
 
}
 
}
Line 354: Line 399:
 
}
 
}
 
.bodycontent .s2 table{
 
.bodycontent .s2 table{
−
margin: 1rem auto;
+
margin: 1rem auto !important;
−
width: calc(100% - 12vw);
+
width: calc(100% - 2rem) !important;
−
width: -webkit-calc(100% - 12vw);
+
−
width: -moz-calc(100% - 12vw);
+
 
border-collapse: separate;
 
border-collapse: separate;
 
border-spacing: 0;
 
border-spacing: 0;
 +
font-family: Trebuchet MS !important;
 
}
 
}
 
.bodycontent .s2 table caption{
 
.bodycontent .s2 table caption{
Line 367: Line 411:
 
}
 
}
 
.bodycontent section table td,th{
 
.bodycontent section table td,th{
−
border-right: 1px solid #d4d8da;
+
border: 2px solid #d4d8da !important;
−
border-bottom: 1px solid #d4d8da;
+
 
padding: 0.5rem;
 
padding: 0.5rem;
 
box-sizing: border-box;
 
box-sizing: border-box;
 
text-align: center;
 
text-align: center;
 +
background:white !important;
 
}
 
}
 
.bodycontent table tr:first-child th{
 
.bodycontent table tr:first-child th{
Line 389: Line 433:
 
line-height:1.7rem;
 
line-height:1.7rem;
 
}
 
}
 +
 +
.subway_stops{
 +
width:100%;
 +
}
 +
.subway_stops > ul{
 +
paddding:0 !important;
 +
margin:3vw 0 !important;
 +
}
 +
.subway_stops > ul li{
 +
width:33.33%;
 +
height:14rem !important;
 +
float:left;
 +
padding:2rem 1rem;
 +
box-sizing:border-box;
 +
transition: all 0.3s ease;
 +
}
 +
.subway_stops ul li:nth-of-type(odd){
 +
background:rgba(0,0,0,0.02);
 +
}
 +
.subway_stops ul li:hover{
 +
background:rgba(0,0,0,0.1);
 +
}
 +
.bodycontent .s2 > ul > li > div > .subway_stops > ul > li > a > p{
 +
font-weight:100 !important;
 +
color:#999999 !important;
 +
float:right;
 +
margin-top:-2rem !important;
 +
width:calc(100% - 4rem) !important;
 +
font-size:0.9vw !important;
 +
}
 +
.subway_stops ul li h4{
 +
color:#070707 !important;
 +
}
 +
.subway_stops ul li h4:first-letter{
 +
float: left;
 +
font-size: 4.5rem;
 +
line-height: 4.5rem;
 +
padding:0 0.5rem;
 +
color: #BBBBBB;
 +
}
 +
 
.bodycontent .reference ul li{
 
.bodycontent .reference ul li{
−
list-style: decimal;
+
list-style: none;
−
padding: 1rem 1rem 0 1rem;
+
padding: 0.3rem 1rem 0 0;
 
box-sizing: border-box;
 
box-sizing: border-box;
 +
text-align: justify;
 +
font-family:Times New Roman;
 
}
 
}
 
.triangle{
 
.triangle{
Line 401: Line 488:
 
padding: 0;
 
padding: 0;
 
}
 
}
−
.figure{
+
.bodycontent section .figure:first-letter{
−
color:rgba(0,20,86,1.00);
+
color:gray !important;
−
font-style: italic;
+
font-size: 0.9rem !important;
−
font-size: 1rem;
+
font-family: Arial !important;
 
font-weight: normal;
 
font-weight: normal;
−
text-align: center;
+
margin: 0 auto;
−
margin: 0;
+
width:auto !important;
 +
line-height: 0.9rem !important;
 +
float:none !important;
 +
padding:0 !important;
 
}
 
}
 +
.bodycontent section .figure{
 +
color:gray;
 +
font-size: 0.9rem !important;
 +
font-family: Arial !important;
 +
font-weight: normal;
 +
width:auto !important;
 +
line-height:0.9rem !important;
 +
text-align:center !important;
 +
}
 +
 
}
 
}
  
Line 415: Line 515:
 
.s1{
 
.s1{
 
width: 100%;
 
width: 100%;
−
height: 30%;
+
height: 40%;
 
background-size: cover;
 
background-size: cover;
−
 
 
margin-top: calc(4rem - 1px);
 
margin-top: calc(4rem - 1px);
 
animation: fadeIn 0.5s ease;
 
animation: fadeIn 0.5s ease;
 
position:relative;
 
position:relative;
−
margin-bottom: calc(24vw + 1rem);
+
margin-bottom: calc(28vw + 1rem);
 
}
 
}
 
.s1 p{
 
.s1 p{
 
position: absolute;
 
position: absolute;
−
bottom: -24vw;
+
bottom: -28vw;
−
margin: 0 0 0 1rem !important;
+
margin: 0 !important;
−
padding: 0 1rem !important;
+
padding: 0 1.5rem !important;
 
color:black;
 
color:black;
 
font-size: 10vw !important;
 
font-size: 10vw !important;
Line 463: Line 562:
 
}
 
}
 
.bodycontent section > ul > li > div{
 
.bodycontent section > ul > li > div{
−
padding: 0 2rem;
+
padding: 0 1.5rem;
 
}
 
}
 
.bodycontent section h2{
 
.bodycontent section h2{
−
height: 2.5rem;
+
height: 2.8rem;
−
line-height: 2.5rem;
+
line-height: 2.8rem;
−
font-size:1.3rem;
+
font-weight:100 !important;
 +
font-size:1.5rem;
 
padding: 0;
 
padding: 0;
−
margin: 1rem 0 1rem 0 !important;
+
margin: 3rem 0 1rem 0 !important;
 
text-align: left;
 
text-align: left;
 
}
 
}
Line 482: Line 582:
 
.bodycontent section p{
 
.bodycontent section p{
 
margin: 0;
 
margin: 0;
−
/*text-align:left !important;*/
+
text-align:left !important;
 
font-size: 1rem !important;
 
font-size: 1rem !important;
−
text-indent: 1.5rem;
+
text-indent: 0;
−
line-height: 1.5rem;
+
line-height: 1.7rem;
 +
font-weight:100 !important;
 
padding: 0 0 1rem 0;
 
padding: 0 0 1rem 0;
 +
color:#404040;
 
}
 
}
 
.bodycontent section table{
 
.bodycontent section table{
Line 523: Line 625:
 
}
 
}
 
.bodycontent .s2 .paragraph_banner{
 
.bodycontent .s2 .paragraph_banner{
−
height:10rem;
+
height:12rem;
−
margin:1rem 0;
+
margin:3rem 0;
 
}
 
}
 
.bodycontent .s2 .paragraph_banner div{
 
.bodycontent .s2 .paragraph_banner div{
Line 536: Line 638:
 
height:100%;
 
height:100%;
 
}
 
}
 +
 +
.subway_stops{
 +
width:100%;
 +
}
 +
.subway_stops > ul{
 +
paddding:0 !important;
 +
margin:3vw 0 !important;
 +
list-style:none;
 +
}
 +
.subway_stops > ul li{
 +
width:100%;
 +
height:14rem !important;
 +
float:left;
 +
padding:2rem 1rem;
 +
box-sizing:border-box;
 +
transition: all 0.3s ease;
 +
list-style:none !important;
 +
}
 +
.subway_stops ul li:nth-of-type(odd){
 +
background:rgba(0,0,0,0.02);
 +
}
 +
.subway_stops ul li:hover{
 +
background:rgba(0,0,0,0.1);
 +
 +
}
 +
.subway_stops ul li a p{
 +
font-weight:100 !important;
 +
color:#999999 !important;
 +
float:right;
 +
margin-top:-2rem !important;
 +
width:calc(100% - 6rem) !important;
 +
font-size:0.9rem !important;
 +
}
 +
.subway_stops ul li h4{
 +
color:#070707 !important;
 +
}
 +
.subway_stops ul li h4:first-letter{
 +
float: left;
 +
font-size: 4.5rem;
 +
line-height: 4.5rem;
 +
padding:0 0.5rem;
 +
color: #BBBBBB;
 +
}         
 +
 
.bodycontent .reference ul li{
 
.bodycontent .reference ul li{
 
font-size: 0.7rem;
 
font-size: 0.7rem;
Line 548: Line 694:
 
.figure{
 
.figure{
 
color:rgba(0,20,86,1.00);
 
color:rgba(0,20,86,1.00);
−
font-style: italic;
 
 
font-size: 0.9rem;
 
font-size: 0.9rem;
 
font-weight: normal;
 
font-weight: normal;
−
text-align: center;
+
margin: 0 auto;
−
margin: 0;
+
 
}
 
}
 
.bodycontent .s2 p .figures{
 
.bodycontent .s2 p .figures{
Line 567: Line 711:
 
float: left;
 
float: left;
 
}
 
}
−
.bodycontent .s2 p .figures .figure{
+
.bodycontent .s2 p .figures .figure_in{
 
float:right;
 
float:right;
 
width: 100%;
 
width: 100%;
Line 578: Line 722:
 
}
 
}
 
100%{
 
100%{
−
transform:rotate(7deg);
+
transform:rotate(10deg);
 
}
 
}
 
}
 
}
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 19:24, 17 October 2018