Khác biệt giữa các bản “Bản mẫu:Biến đổi khí hậu/styles.css”
(Không hiển thị 111 phiên bản của cùng người dùng ở giữa) | |||
Dòng 1: | Dòng 1: | ||
− | .mw-indicators { padding: | + | #content { padding:0;margin:0;border:none;box-shadow:none } |
+ | .mw-indicators { padding: 48px 40px } | ||
+ | #sidebar-button, .mw-portlet li::before { background-color:#9e499e } | ||
+ | .mw-portlet h3 { border-bottom-color:#9e499e } | ||
+ | #contentSub { background:#f0f0f5;padding-left:20px } | ||
.page-title { | .page-title { | ||
− | padding: | + | padding: 40px; |
border: none; | border: none; | ||
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Endangered_arctic_-_starving_polar_bear.jpg/640px-Endangered_arctic_-_starving_polar_bear.jpg); | background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Endangered_arctic_-_starving_polar_bear.jpg/640px-Endangered_arctic_-_starving_polar_bear.jpg); | ||
background-size: cover; | background-size: cover; | ||
− | height: | + | height: 250px; |
color: white; | color: white; | ||
font-size: 32px; | font-size: 32px; | ||
background-position: left; | background-position: left; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | @media (min-width: 1581px) { | ||
+ | .page-title { padding: 40px calc(50% - 750px) } | ||
+ | .mw-indicators { padding: 48px calc(50% - 750px) 0 0 } | ||
} | } | ||
.page-title::before { | .page-title::before { | ||
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
− | top: | + | width: calc(100% - 80px); |
− | left: | + | border-top: 1px solid; |
− | height: 1px; | + | max-width:1500px; |
− | width: calc(100% - | + | } |
− | background: | + | .page-title::after { |
+ | content: ''; | ||
+ | position: absolute; | ||
+ | top: 173px; | ||
+ | height: 200px; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | background: linear-gradient(0,rgba(240,240,245,1),rgba(240,240,245,0)); | ||
+ | } | ||
+ | #mw-content-text { font-weight:300;text-align:justify } | ||
+ | .toc { | ||
+ | background-image: linear-gradient(110deg,#9e499e 10%,#ed4aed 60%,#964cf0); | ||
+ | background-clip: text; | ||
+ | -webkit-background-clip: text; /* chrome */ | ||
+ | color: transparent; | ||
+ | border:none; | ||
+ | box-shadow:none; | ||
+ | margin:0; | ||
+ | padding:20px 0; | ||
+ | letter-spacing: 2px; | ||
+ | line-height:1.5; | ||
+ | font-weight:400; | ||
+ | } | ||
+ | .toc a { color:inherit !important } | ||
+ | .toc ul, .toc ul ul { list-style-type:none;margin:0;padding:0;display:inline } | ||
+ | .toc li { display:inline } | ||
+ | .toc .toclevel-3, .toctitle { display: none } | ||
+ | .top a, .mid a { border:2px solid; border-image:linear-gradient(0.25turn,#9e499e 35%,#ed4aed 70%,#964cf0) 1;border-bottom-width:2px;border-top-width:0;border-right-width:0;border-left-width:0;color:inherit !important} | ||
+ | .top sup a, .mid sup a, .top .toc a, a.mw-tmh-play, a.image, a.internal, a.oo-ui-buttonElement-button { border:none; } | ||
+ | .top a.new, .mid a.new { border-bottom-width:1px } | ||
+ | .top { font-size:large;padding:10px 40px 20px;max-width:1500px;margin-left:auto;margin-right:auto; } | ||
+ | .top1 { background:#f0f0f5 } | ||
+ | .top .mw-gallery-slideshow, .top .mw-gallery-slideshow .mw-gallery-slideshow-buttons, .top .oo-ui-layout.oo-ui-panelLayout p { margin:0;padding:0 } | ||
+ | h2 { max-width:1500px;margin-left:auto;margin-right:auto;padding:20px 40px 0;color:#9e499e;border:none } | ||
+ | #contentSub a, h2 a { color:#ed4aed } | ||
+ | @media (max-width: 600px) { | ||
+ | .mid, .top { padding:10px } | ||
+ | } | ||
+ | @media (min-width: 601px) { | ||
+ | .mid { | ||
+ | column-count: 2; | ||
+ | padding: 5px 40px 20px; | ||
+ | column-gap: 40px; | ||
+ | max-width: 1500px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | } | ||
+ | .mid .thumb { break-inside:avoid;margin:0 0 20px;padding:0 } | ||
+ | .mid .thumbinner { width:calc(100% - 40px) !important;text-align:center } | ||
+ | .mid .thumbinner img { width:100%;height:auto;max-width:450px } | ||
+ | .mid p { margin: 0 0 20px } | ||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .mid { | ||
+ | column-count: 3; | ||
+ | } | ||
+ | } | ||
+ | .mid2 { background:#f0f0f5;padding-bottom:20px } | ||
+ | .mid2 h2 { text-align:right;padding-top:40px } | ||
+ | .mw-body h2::after { border:none } | ||
+ | h2::before { content:'';border-top:1px solid;display:block;margin-bottom:10px } | ||
+ | .B { | ||
+ | font-weight:bold; | ||
+ | padding:0 10px 0 0; | ||
+ | line-height:1; | ||
+ | font-size:54px; | ||
+ | color:#9e499e; | ||
+ | float:left; | ||
} | } | ||
+ | .color { color:#9e499e } |
Bản hiện tại lúc 18:44, ngày 9 tháng 6 năm 2021
#content { padding:0;margin:0;border:none;box-shadow:none }
.mw-indicators { padding: 48px 40px }
#sidebar-button, .mw-portlet li::before { background-color:#9e499e }
.mw-portlet h3 { border-bottom-color:#9e499e }
#contentSub { background:#f0f0f5;padding-left:20px }
.page-title {
padding: 40px;
border: none;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Endangered_arctic_-_starving_polar_bear.jpg/640px-Endangered_arctic_-_starving_polar_bear.jpg);
background-size: cover;
height: 250px;
color: white;
font-size: 32px;
background-position: left;
font-weight: 300;
}
@media (min-width: 1581px) {
.page-title { padding: 40px calc(50% - 750px) }
.mw-indicators { padding: 48px calc(50% - 750px) 0 0 }
}
.page-title::before {
content: '';
position: absolute;
width: calc(100% - 80px);
border-top: 1px solid;
max-width:1500px;
}
.page-title::after {
content: '';
position: absolute;
top: 173px;
height: 200px;
left: 0;
width: 100%;
background: linear-gradient(0,rgba(240,240,245,1),rgba(240,240,245,0));
}
#mw-content-text { font-weight:300;text-align:justify }
.toc {
background-image: linear-gradient(110deg,#9e499e 10%,#ed4aed 60%,#964cf0);
background-clip: text;
-webkit-background-clip: text; /* chrome */
color: transparent;
border:none;
box-shadow:none;
margin:0;
padding:20px 0;
letter-spacing: 2px;
line-height:1.5;
font-weight:400;
}
.toc a { color:inherit !important }
.toc ul, .toc ul ul { list-style-type:none;margin:0;padding:0;display:inline }
.toc li { display:inline }
.toc .toclevel-3, .toctitle { display: none }
.top a, .mid a { border:2px solid; border-image:linear-gradient(0.25turn,#9e499e 35%,#ed4aed 70%,#964cf0) 1;border-bottom-width:2px;border-top-width:0;border-right-width:0;border-left-width:0;color:inherit !important}
.top sup a, .mid sup a, .top .toc a, a.mw-tmh-play, a.image, a.internal, a.oo-ui-buttonElement-button { border:none; }
.top a.new, .mid a.new { border-bottom-width:1px }
.top { font-size:large;padding:10px 40px 20px;max-width:1500px;margin-left:auto;margin-right:auto; }
.top1 { background:#f0f0f5 }
.top .mw-gallery-slideshow, .top .mw-gallery-slideshow .mw-gallery-slideshow-buttons, .top .oo-ui-layout.oo-ui-panelLayout p { margin:0;padding:0 }
h2 { max-width:1500px;margin-left:auto;margin-right:auto;padding:20px 40px 0;color:#9e499e;border:none }
#contentSub a, h2 a { color:#ed4aed }
@media (max-width: 600px) {
.mid, .top { padding:10px }
}
@media (min-width: 601px) {
.mid {
column-count: 2;
padding: 5px 40px 20px;
column-gap: 40px;
max-width: 1500px;
margin-left:auto;
margin-right:auto;
}
.mid .thumb { break-inside:avoid;margin:0 0 20px;padding:0 }
.mid .thumbinner { width:calc(100% - 40px) !important;text-align:center }
.mid .thumbinner img { width:100%;height:auto;max-width:450px }
.mid p { margin: 0 0 20px }
}
@media (min-width: 1200px) {
.mid {
column-count: 3;
}
}
.mid2 { background:#f0f0f5;padding-bottom:20px }
.mid2 h2 { text-align:right;padding-top:40px }
.mw-body h2::after { border:none }
h2::before { content:'';border-top:1px solid;display:block;margin-bottom:10px }
.B {
font-weight:bold;
padding:0 10px 0 0;
line-height:1;
font-size:54px;
color:#9e499e;
float:left;
}
.color { color:#9e499e }