Difference between revisions of "Team:XMU-China/css/font"
Cyclohexane (Talk | contribs) |
Cyclohexane (Talk | contribs) |
||
| Line 4: | Line 4: | ||
box-shadow: 0px 3px 10px #24366D; | box-shadow: 0px 3px 10px #24366D; | ||
} | } | ||
| − | |||
.description_banner { | .description_banner { | ||
margin: 0 25vw; | margin: 0 25vw; | ||
| Line 14: | Line 13: | ||
text-align: center; | text-align: center; | ||
background-image: url(https://static.igem.org/mediawiki/2018/c/c0/T--XMU-China--description_headline.png); | background-image: url(https://static.igem.org/mediawiki/2018/c/c0/T--XMU-China--description_headline.png); | ||
| − | |||
} | } | ||
| − | |||
.description_banner>.word { | .description_banner>.word { | ||
font-size: 3vw; | font-size: 3vw; | ||
| Line 24: | Line 21: | ||
font-weight: bolder; | font-weight: bolder; | ||
font-family: "Arial"; | font-family: "Arial"; | ||
| − | |||
} | } | ||
| − | |||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.description_banner>.word { | .description_banner>.word { | ||
font-size: 5vw; | font-size: 5vw; | ||
| − | |||
} | } | ||
| − | |||
.description_banner { | .description_banner { | ||
width: 90VW; | width: 90VW; | ||
margin: 5rem 5vw 0; | margin: 5rem 5vw 0; | ||
} | } | ||
| − | |||
.description_banner>.word { | .description_banner>.word { | ||
padding: 8vw 0vw; | padding: 8vw 0vw; | ||
} | } | ||
} | } | ||
| − | |||
@media screen and (min-width: 768px) and (max-width: 89.9375rem) { | @media screen and (min-width: 768px) and (max-width: 89.9375rem) { | ||
.description_banner { | .description_banner { | ||
| Line 48: | Line 39: | ||
margin: 6rem 20vw 0; | margin: 6rem 20vw 0; | ||
} | } | ||
| − | |||
.description_banner>.word { | .description_banner>.word { | ||
padding: 5vw 0vw; | padding: 5vw 0vw; | ||
} | } | ||
} | } | ||
| − | |||
@media screen and (min-width: 90rem) {} | @media screen and (min-width: 90rem) {} | ||
| − | |||
.main { | .main { | ||
margin: 0 15vw 5rem; | margin: 0 15vw 5rem; | ||
| Line 61: | Line 49: | ||
text-align: left; | text-align: left; | ||
} | } | ||
| − | |||
.headline { | .headline { | ||
font-size: 2vw; | font-size: 2vw; | ||
| Line 68: | Line 55: | ||
padding-top: 5rem; | padding-top: 5rem; | ||
} | } | ||
| − | |||
.main p { | .main p { | ||
color: #000; | color: #000; | ||
| Line 78: | Line 64: | ||
margin-bottom: 0.8vw; | margin-bottom: 0.8vw; | ||
} | } | ||
| − | |||
.main h1, | .main h1, | ||
.main h2, | .main h2, | ||
.main h3 { | .main h3 { | ||
font-family: "Microsoft YaHei"; | font-family: "Microsoft YaHei"; | ||
| − | |||
} | } | ||
| − | |||
.main h1 { | .main h1 { | ||
margin: 0.8vw 0 0.3vw; | margin: 0.8vw 0 0.3vw; | ||
} | } | ||
| − | |||
.main h2 { | .main h2 { | ||
font-size: 1.2rem; | font-size: 1.2rem; | ||
font-weight: bolder; | font-weight: bolder; | ||
} | } | ||
| − | |||
.main h3 { | .main h3 { | ||
font-size: 1.1rem; | font-size: 1.1rem; | ||
| − | |||
} | } | ||
| − | |||
.main h4 { | .main h4 { | ||
font-size: 1.05rem; | font-size: 1.05rem; | ||
| − | |||
} | } | ||
| − | |||
.F1>img { | .F1>img { | ||
width: 60vw; | width: 60vw; | ||
margin: 1vw 5vw 0; | margin: 1vw 5vw 0; | ||
} | } | ||
| − | |||
.F2>img { | .F2>img { | ||
width: 50vw; | width: 50vw; | ||
margin: 1vw 10vw 0; | margin: 1vw 10vw 0; | ||
} | } | ||
| − | |||
.F3>img { | .F3>img { | ||
width: 40vw; | width: 40vw; | ||
margin: 1vw 15vw 0; | margin: 1vw 15vw 0; | ||
} | } | ||
| − | |||
.F4>img { | .F4>img { | ||
width: 30vw; | width: 30vw; | ||
margin: 1vw 20vw 0; | margin: 1vw 20vw 0; | ||
} | } | ||
| − | |||
.F25>img { | .F25>img { | ||
width: 25vw; | width: 25vw; | ||
margin: 1vw 22.5vw 0; | margin: 1vw 22.5vw 0; | ||
| − | |||
} | } | ||
| − | |||
.F6>img { | .F6>img { | ||
width: 40vw; | width: 40vw; | ||
margin: 1vw 15vw 0; | margin: 1vw 15vw 0; | ||
} | } | ||
| − | |||
.F7>img { | .F7>img { | ||
width: 15vw; | width: 15vw; | ||
margin: 1vw 27.5vw 0; | margin: 1vw 27.5vw 0; | ||
} | } | ||
| − | |||
.F8>img { | .F8>img { | ||
width: 10vw; | width: 10vw; | ||
margin: 1vw 30vw 0; | margin: 1vw 30vw 0; | ||
} | } | ||
| − | |||
.F1, | .F1, | ||
.F2, | .F2, | ||
| Line 158: | Line 126: | ||
margin-bottom: 0 !important; | margin-bottom: 0 !important; | ||
} | } | ||
| − | |||
.Figure_word { | .Figure_word { | ||
font-size: 0.9rem !important; | font-size: 0.9rem !important; | ||
| Line 164: | Line 131: | ||
text-indent: 0 !important; | text-indent: 0 !important; | ||
} | } | ||
| − | |||
.reference { | .reference { | ||
text-indent: 0 !important; | text-indent: 0 !important; | ||
} | } | ||
| − | |||
.main .indent { | .main .indent { | ||
text-indent: 2.4rem !important; | text-indent: 2.4rem !important; | ||
} | } | ||
| − | + | tbody { | |
| − | + | width: auto; | |
| − | + | overflow: auto; | |
| + | } | ||
| + | .table th, | ||
| + | .table td, | ||
.table { | .table { | ||
| − | + | padding: 0.5vw 1vw !important; | |
border-collapse: collapse !important; | border-collapse: collapse !important; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
border: 2px solid #1d2087 !important; | border: 2px solid #1d2087 !important; | ||
color: #1d2087 !important; | color: #1d2087 !important; | ||
background-color: white !important; | background-color: white !important; | ||
| + | text-align: center !important; | ||
| + | vertical-align: middle !important; | ||
} | } | ||
| − | + | .table td:nth-child(6), | |
| − | .table td { | + | .table td:nth-child(7), |
| − | + | .table th{ | |
| − | + | white-space: nowrap; | |
| − | + | } | |
| − | + | .table td:nth-child(4){ | |
| + | padding: 0.5vw 0.3vw!important; | ||
} | } | ||
| − | |||
.space { | .space { | ||
white-space: normal; | white-space: normal; | ||
} | } | ||
| − | |||
.reference+p, | .reference+p, | ||
.headline+p, | .headline+p, | ||
h3+p { | h3+p { | ||
| − | text-indent: 0!important; | + | text-indent: 0 !important; |
} | } | ||
| − | |||
.slideBox p { | .slideBox p { | ||
text-indent: 0 !important; | text-indent: 0 !important; | ||
text-align: left !important; | text-align: left !important; | ||
| − | |||
} | } | ||
| − | |||
@media screen and (max-width: 769px) { | @media screen and (max-width: 769px) { | ||
.headline { | .headline { | ||
| Line 220: | Line 178: | ||
padding: 0; | padding: 0; | ||
} | } | ||
| − | |||
.main p { | .main p { | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
| Line 228: | Line 185: | ||
; | ; | ||
} | } | ||
| − | |||
.F1>img { | .F1>img { | ||
width: 85vw; | width: 85vw; | ||
margin: 1vw 0vw; | margin: 1vw 0vw; | ||
} | } | ||
| − | |||
.F2>img { | .F2>img { | ||
width: 95vw; | width: 95vw; | ||
margin: 1vw -5vw; | margin: 1vw -5vw; | ||
} | } | ||
| − | |||
.F3>img { | .F3>img { | ||
width: 85vw; | width: 85vw; | ||
margin: 1vw 0vw; | margin: 1vw 0vw; | ||
} | } | ||
| − | |||
.F4>img { | .F4>img { | ||
width: 50vw; | width: 50vw; | ||
| Line 249: | Line 202: | ||
/*SPE*/ | /*SPE*/ | ||
} | } | ||
| − | |||
.F6>img { | .F6>img { | ||
width: 85vw; | width: 85vw; | ||
margin: 1vw 0vw; | margin: 1vw 0vw; | ||
| − | |||
} | } | ||
| − | |||
.F7>img { | .F7>img { | ||
width: 40vw; | width: 40vw; | ||
margin-left: 15vw; | margin-left: 15vw; | ||
| − | |||
} | } | ||
| − | |||
.F8>img { | .F8>img { | ||
width: 20vw; | width: 20vw; | ||
margin: 1vw 32.5vw; | margin: 1vw 32.5vw; | ||
| − | |||
} | } | ||
| − | |||
.F25>img { | .F25>img { | ||
width: 40vw; | width: 40vw; | ||
margin: 1vw 22.5vw; | margin: 1vw 22.5vw; | ||
| − | |||
} | } | ||
| − | |||
| − | |||
.main { | .main { | ||
width: 85vw; | width: 85vw; | ||
margin: 0 7.5vw 5rem; | margin: 0 7.5vw 5rem; | ||
} | } | ||
| − | |||
.main h1 { | .main h1 { | ||
font-size: 1.15rem; | font-size: 1.15rem; | ||
| Line 286: | Line 228: | ||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
| − | |||
.main h2 { | .main h2 { | ||
margin: 0; | margin: 0; | ||
| Line 293: | Line 234: | ||
font-weight: normal; | font-weight: normal; | ||
} | } | ||
| − | |||
.table { | .table { | ||
zoom: 0.7; | zoom: 0.7; | ||
-webkit-transform-origin: top left; | -webkit-transform-origin: top left; | ||
-webkit-transform: scale(1); | -webkit-transform: scale(1); | ||
| − | |||
} | } | ||
} | } | ||
| − | |||
@media screen and (min-width: 769px) and (max-width: 89.9375rem) { | @media screen and (min-width: 769px) and (max-width: 89.9375rem) { | ||
.headline { | .headline { | ||
| Line 307: | Line 245: | ||
margin-bottom: 1vw; | margin-bottom: 1vw; | ||
} | } | ||
| − | |||
.main p {} | .main p {} | ||
| − | + | .table_container { | |
| + | overflow-x: scroll !important; | ||
| + | width: 75vw; | ||
| + | } | ||
| + | .table th, | ||
| + | .table td, | ||
.table { | .table { | ||
| − | + | padding: 2px 2px !important; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | @media screen and (max-width: 769px) { | |
| − | @media screen and (max-width: | + | .table_container { |
| − | + | overflow-x: scroll !important; | |
| − | + | width: 85vw; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | width: | + | |
| − | + | ||
| − | + | ||
} | } | ||
| − | .table th,.table td | + | .table th, |
| − | + | .table td, | |
| − | + | ||
| − | + | ||
.table { | .table { | ||
| − | + | padding: 5px 5px !important; | |
} | } | ||
| − | |||
} | } | ||
| − | + | @media screen and (max-width: 45rem) { | |
| − | @media screen and (max-width: | + | .table th, |
| + | .table td, | ||
.table { | .table { | ||
| − | + | padding: 9px 8px !important; | |
| − | - | + | white-space: nowrap; |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
} | } | ||
| − | |||
| − | |||
| − | |||
.click_here:after, | .click_here:after, | ||
td a:after, | td a:after, | ||
| − | .notebook .slideBox p>a:after{ | + | .notebook .slideBox p>a:after { |
content: "\f0a5"; | content: "\f0a5"; | ||
font-family: fontawesome; | font-family: fontawesome; | ||
color: #1d2087 !important; | color: #1d2087 !important; | ||
} | } | ||
| − | |||
.click_here span, | .click_here span, | ||
.click_here, | .click_here, | ||
Revision as of 11:25, 13 October 2018
.header {
-moz-box-shadow: 0px 3px 10px #24366D; -webkit-box-shadow: 0px 3px 10px #24366D; box-shadow: 0px 3px 10px #24366D;
} .description_banner {
margin: 0 25vw; position: relative; width: 50vw; margin-top: 6rem; background-size: 100%; background-repeat: no-repeat; text-align: center; background-image: url();
} .description_banner>.word {
font-size: 3vw; padding: 4vw 0vw; line-height: 3vw; color: white; font-weight: bolder; font-family: "Arial";
} @media screen and (max-width: 768px) {
.description_banner>.word {
font-size: 5vw;
}
.description_banner {
width: 90VW;
margin: 5rem 5vw 0;
}
.description_banner>.word {
padding: 8vw 0vw;
}
} @media screen and (min-width: 768px) and (max-width: 89.9375rem) {
.description_banner {
width: 60vw;
margin: 6rem 20vw 0;
}
.description_banner>.word {
padding: 5vw 0vw;
}
} @media screen and (min-width: 90rem) {} .main {
margin: 0 15vw 5rem; width: 70vw; text-align: left;
} .headline {
font-size: 2vw; color: #1d2087; margin-bottom: 1vw; padding-top: 5rem;
} .main p {
color: #000; font-size: 1.2rem; text-indent: 2.4rem; font-weight: normal; font-family: Arial, Helvetica, sans-serif; line-height: 2rem; margin-bottom: 0.8vw;
} .main h1, .main h2, .main h3 {
font-family: "Microsoft YaHei";
} .main h1 {
margin: 0.8vw 0 0.3vw;
} .main h2 {
font-size: 1.2rem; font-weight: bolder;
} .main h3 {
font-size: 1.1rem;
} .main h4 {
font-size: 1.05rem;
} .F1>img {
width: 60vw; margin: 1vw 5vw 0;
} .F2>img {
width: 50vw; margin: 1vw 10vw 0;
} .F3>img {
width: 40vw; margin: 1vw 15vw 0;
} .F4>img {
width: 30vw; margin: 1vw 20vw 0;
} .F25>img {
width: 25vw; margin: 1vw 22.5vw 0;
} .F6>img {
width: 40vw; margin: 1vw 15vw 0;
} .F7>img {
width: 15vw; margin: 1vw 27.5vw 0;
} .F8>img {
width: 10vw; margin: 1vw 30vw 0;
} .F1, .F2, .F25, .F3, .F4, .F5, .F6, .F7, .F8 {
text-indent: 0 !important; margin-bottom: 0 !important;
} .Figure_word {
font-size: 0.9rem !important; text-align: center !important; text-indent: 0 !important;
} .reference {
text-indent: 0 !important;
} .main .indent {
text-indent: 2.4rem !important;
} tbody {
width: auto; overflow: auto;
} .table th, .table td, .table {
padding: 0.5vw 1vw !important; border-collapse: collapse !important; border: 2px solid #1d2087 !important; color: #1d2087 !important; background-color: white !important; text-align: center !important; vertical-align: middle !important;
} .table td:nth-child(6), .table td:nth-child(7), .table th{
white-space: nowrap;
} .table td:nth-child(4){
padding: 0.5vw 0.3vw!important;
} .space {
white-space: normal;
} .reference+p, .headline+p, h3+p {
text-indent: 0 !important;
} .slideBox p {
text-indent: 0 !important; text-align: left !important;
} @media screen and (max-width: 769px) {
.headline {
font-size: 1.4rem;
margin: 1rem 0 2vw;
padding: 0;
}
.main p {
font-size: 0.9rem;
text-indent: 1.8rem;
line-height: 1.5rem;
word-wrap: break-word;
;
}
.F1>img {
width: 85vw;
margin: 1vw 0vw;
}
.F2>img {
width: 95vw;
margin: 1vw -5vw;
}
.F3>img {
width: 85vw;
margin: 1vw 0vw;
}
.F4>img {
width: 50vw;
margin: 1vw 17.5vw;
/*SPE*/
}
.F6>img {
width: 85vw;
margin: 1vw 0vw;
}
.F7>img {
width: 40vw;
margin-left: 15vw;
}
.F8>img {
width: 20vw;
margin: 1vw 32.5vw;
}
.F25>img {
width: 40vw;
margin: 1vw 22.5vw;
}
.main {
width: 85vw;
margin: 0 7.5vw 5rem;
}
.main h1 {
font-size: 1.15rem;
margin: 0.8vw 0 0;
font-weight: bold;
white-space: nowrap;
}
.main h2 {
margin: 0;
padding: 0;
font-size: 1.1rem;
font-weight: normal;
}
.table {
zoom: 0.7;
-webkit-transform-origin: top left;
-webkit-transform: scale(1);
}
} @media screen and (min-width: 769px) and (max-width: 89.9375rem) {
.headline {
font-size: 1.6rem;
margin-bottom: 1vw;
}
.main p {}
.table_container {
overflow-x: scroll !important;
width: 75vw;
}
.table th,
.table td,
.table {
padding: 2px 2px !important;
}
} @media screen and (max-width: 769px) {
.table_container {
overflow-x: scroll !important;
width: 85vw;
}
.table th,
.table td,
.table {
padding: 5px 5px !important;
}
} @media screen and (max-width: 45rem) {
.table th,
.table td,
.table {
padding: 9px 8px !important;
white-space: nowrap;
}
} .click_here:after, td a:after, .notebook .slideBox p>a:after {
content: "\f0a5"; font-family: fontawesome; color: #1d2087 !important;
} .click_here span, .click_here, .notebook .slideBox p>a {
color: #1d2087 !important;
}