“Common.css”的版本间差异
来自pcdiy_dev
Carrotgeball(讨论 | 贡献) (创建页面,内容为“→这里放置的CSS将应用于所有皮肤: .mw-editsection{ display:none; } #toc{ display:none; }”) |
Carrotgeball(讨论 | 贡献) |
||
第5行: | 第5行: | ||
#toc{ | #toc{ | ||
display:none; | display:none; | ||
+ | } | ||
+ | |||
+ | /* https://drrr.wiki/MediaWiki:Common.css */ | ||
+ | /* http://nicolasgallagher.com/micro-clearfix-hack/ */ | ||
+ | .clearfix:before, | ||
+ | .clearfix:after { | ||
+ | display: table; | ||
+ | content: ""; | ||
+ | } | ||
+ | |||
+ | .clearfix:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .col { | ||
+ | float: left; | ||
+ | box-sizing: border-box; | ||
+ | padding: .6rem; | ||
+ | } | ||
+ | |||
+ | .col-3 { | ||
+ | width: 25%; | ||
+ | } | ||
+ | |||
+ | .col-4 { | ||
+ | width: 33.3333%; | ||
+ | width: calc(100% / 3); | ||
+ | } | ||
+ | |||
+ | .col-6 { | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .col-12 { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .col.gray { background: #f1f1f1; } | ||
+ | .col.yellow { background: #FDF5EB; } | ||
+ | .col.blue { background: #EBF8FD; } | ||
+ | |||
+ | @media (max-width: 800px) { | ||
+ | .col-3 { | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .col-4, | ||
+ | .col-6 { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .multi-col-list { } | ||
+ | |||
+ | @media (min-width: 481px) { | ||
+ | .multi-col-list ul { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .multi-col-list li { | ||
+ | display: inline-block; | ||
+ | width: 49%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (min-width: 801px) { | ||
+ | .multi-col-list ul { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .multi-col-list li { | ||
+ | display: inline-block; | ||
+ | width: 19%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | @media (min-width: 1001px) { | ||
+ | .multi-col-list ul { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .multi-col-list li { | ||
+ | display: inline-block; | ||
+ | width: 15%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .column { } | ||
+ | |||
+ | .column-2 { column-count: 2; } | ||
+ | .column-3 { column-count: 3; } | ||
+ | .column-4 { column-count: 4; } | ||
+ | .column-5 { column-count: 5; } | ||
+ | .column-6 { column-count: 6; } | ||
+ | |||
+ | @media (max-width: 800px) { | ||
+ | .column-2 { column-count: 1; } | ||
+ | .column-3 { column-count: 2; } | ||
+ | .column-4 { column-count: 2; } | ||
+ | .column-5 { column-count: 3; } | ||
+ | .column-6 { column-count: 4; } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 500px) { | ||
+ | .column-2 { column-count: 1; } | ||
+ | .column-3 { column-count: 1; } | ||
+ | .column-4 { column-count: 2; } | ||
+ | .column-5 { column-count: 2; } | ||
+ | .column-6 { column-count: 2; } | ||
} | } |
2022年6月23日 (四) 15:35的版本
/* 这里放置的CSS将应用于所有皮肤 */
.mw-editsection{
display:none;
}
#toc{
display:none;
}
/* https://drrr.wiki/MediaWiki:Common.css */
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.col {
float: left;
box-sizing: border-box;
padding: .6rem;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.3333%;
width: calc(100% / 3);
}
.col-6 {
width: 50%;
}
.col-12 {
width: 100%;
}
.col.gray { background: #f1f1f1; }
.col.yellow { background: #FDF5EB; }
.col.blue { background: #EBF8FD; }
@media (max-width: 800px) {
.col-3 {
width: 50%;
}
.col-4,
.col-6 {
width: 100%;
}
}
.multi-col-list { }
@media (min-width: 481px) {
.multi-col-list ul {
margin: 0;
}
.multi-col-list li {
display: inline-block;
width: 49%;
}
}
@media (min-width: 801px) {
.multi-col-list ul {
margin: 0;
}
.multi-col-list li {
display: inline-block;
width: 19%;
}
}
@media (min-width: 1001px) {
.multi-col-list ul {
margin: 0;
}
.multi-col-list li {
display: inline-block;
width: 15%;
}
}
.column { }
.column-2 { column-count: 2; }
.column-3 { column-count: 3; }
.column-4 { column-count: 4; }
.column-5 { column-count: 5; }
.column-6 { column-count: 6; }
@media (max-width: 800px) {
.column-2 { column-count: 1; }
.column-3 { column-count: 2; }
.column-4 { column-count: 2; }
.column-5 { column-count: 3; }
.column-6 { column-count: 4; }
}
@media (max-width: 500px) {
.column-2 { column-count: 1; }
.column-3 { column-count: 1; }
.column-4 { column-count: 2; }
.column-5 { column-count: 2; }
.column-6 { column-count: 2; }
}