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

 
(192 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{
 +
/*font-family: Trebuchet MS;*/
 +
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{
 +
font-size: 1.5rem !important;
 +
width:70% !important;
 +
display:block;
 +
background-color:rgba(0,0,0,0.05);
 +
font-family: Trebuchet MS !important;
 +
font-weight:bolder;
 +
padding:3rem;
 +
z-index:2;
 +
margin:3rem auto !important;
 +
box-sizing:border-box;
 +
position:relative;
 +
overflow:hidden;
 +
}
 +
.definition::after{
 +
content:"Def";
 +
position:absolute;
 +
bottom:0;
 +
right:0;
 +
z-index:1;
 +
font-size:10vw;
 +
color:rgba(0,0,0,0.1);
 +
font-family: Trebuchet MS !important;
 +
}
  
  
Line 70: Line 120:
 
.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 82: Line 132:
 
margin:0 0 0 calc(42.5vw - 11rem) !important;
 
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 91: Line 153:
 
}
 
}
 
.s1 .title_con{
 
.s1 .title_con{
−
left:5rem;
+
left:7.5vw;
 
bottom:15vh;
 
bottom:15vh;
 
position: fixed;
 
position: fixed;
Line 98: 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 127: 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 140: 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 203: 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 218: Line 293:
 
width:100%;
 
width:100%;
 
}
 
}
−
.bodycontent .s2 > ul > li > span{
+
.bodycontent .s2 > ul > li > span {
 
display: block;
 
display: block;
 
width:100%;
 
width:100%;
−
height:7rem;
+
height:4rem;
−
overflow:hidden;
+
overflow:hidden;
 
}
 
}
−
.bodycontent .s2 > ul > li > span:after{
+
.bodycontent .s2 > ul > li > span >:not(.details_button_background){
−
height:7rem;
+
opacity:0;
−
background: (linear-gradient(to bottom,rgba(255,255,255,0),rgba(0,0,0,1)));
+
transition: all 0.3s ease;
−
position:absolute;
+
 
}
 
}
 
.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 245: 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 276: 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 298: 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 305: 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 318: 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 340: 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 352: 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;
−
.details_button_background{
+
−
box-sizing: border-box;
+
−
}
+
−
.details_button_button{
+
−
position:absolute;
+
−
z-index:99;
+
−
height: 4rem;
+
−
width: 12rem;
+
−
margin:0 0 0 calc(42.5vw - 6rem);
+
−
opacity:0;
+
−
cursor:pointer;
+
−
}
+
−
.details_button_button:checked ~ .li_fold{
+
−
height:auto !important;
+
−
}
+
−
.details_button{
+
−
border:3px solid black;
+
−
height:3.5rem !important;
+
−
width:3.5rem !important;
+
−
border-radius: 3.5rem;
+
−
transition: all 0.3s ease;
+
−
position: relative;
+
 
padding:0 !important;
 
padding:0 !important;
−
margin:0 0 0 calc(42.5vw - 6rem);
 
−
box-sizing: border-box;
 
 
}
 
}
−
.details_button_button:hover ~ .li_fold > .details_button_background > .details_button, .details_button_button:checked ~ .li_fold > .details_button_background > .details_button{
+
.bodycontent section .figure{
−
width:12rem !important;
+
color:gray;
−
background:black;
+
font-size: 0.9rem !important;
 +
font-family: Arial !important;
 +
font-weight: normal;
 +
width:auto !important;
 +
line-height:0.9rem !important;
 +
text-align:center !important;
 
}
 
}
−
.details_button svg{
 
−
transform: translate(2.25px,2.25px);
 
−
}
 
−
.li_fold .details_button svg{
 
−
transform: translate(2.25px,2.25px) rotate(90deg);
 
−
}
 
−
.details_button .vertical_line{
 
−
transition: all 0.4s ease;
 
−
d:path('M27.5,12,27.5,27.5,27.5,43');
 
  
−
}
 
−
.details_button_button:hover ~ .li_fold > .details_button_background > .details_button .vertical_line, .details_button_button:checked ~ .li_fold > .details_button_background > .details_button .vertical_line{
 
−
d:path('M27.5,12,42.94,27.5,27.5,43');
 
−
stroke:white;
 
−
}
 
−
.details_button h5{
 
−
transform: translate(-3px,-3px);
 
−
padding:0 !important;
 
−
margin:0 !important;
 
−
color: black;
 
−
line-height: 3.5rem !important;
 
−
position:absolute;
 
−
top:0;
 
−
left:3rem;
 
−
width:8.5rem !important;
 
−
text-align: center;
 
−
transition: all 0.3s ease;
 
−
font-size:1.1rem !important;
 
−
}
 
−
.details_button_button:hover ~ .li_fold > .details_button_background > .details_button h5 , .details_button_button:checked ~ .li_fold > .details_button_background > .details_button 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;
 
−
}
 
 
}
 
}
  
Line 441: 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 489: 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 508: 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 549: 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 562: 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 574: 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 593: 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 604: Line 722:
 
}
 
}
 
100%{
 
100%{
−
transform:rotate(7deg);
+
transform:rotate(10deg);
 
}
 
}
 
}
 
}
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 19:24, 17 October 2018