User:盐棋/Sandbox.css:修订间差异
小 (适配etr) |
小 (居中) |
||
第27行: | 第27行: | ||
padding: 1px 5px 1px 5px; | padding: 1px 5px 1px 5px; | ||
margin: 0 5px 0 5px; | margin: 0 5px 0 5px; | ||
} | |||
.text-pst, | |||
.text-prs, | |||
.text-ftr, | |||
.text-byd, | |||
.text-etr { | |||
filter: brightness(120%); | |||
font-weight: bold; | |||
} | } | ||
第62行: | 第71行: | ||
grid-area: figure; | grid-area: figure; | ||
padding: 9px 5px; | padding: 9px 5px; | ||
} | } | ||
第80行: | 第83行: | ||
.infotable.colorless .bg-c { | .infotable.colorless .bg-c { | ||
background-color: #f4d2f8; | background-color: #f4d2f8; | ||
} | |||
.central { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.fd-c{ | |||
flex-direction: column; | |||
} | } | ||
2024年3月13日 (三) 03:58的版本
.infotable {
max-width: 100%;
display: grid;
grid-template-columns: auto min-content;
margin: 1em 0 2em;
font-size: small;
line-height: 1.5em;
text-align: center;
background-color: #f8f8f8;
overflow: auto hidden;
position: relative;
}
.infotable,
.infotable>*,
.infotable .main>* {
outline: 1px solid #eee;
box-sizing: border-box;
overflow-wrap: break-word;
}
.infotable .main>* {
padding: 5px;
}
.infotable span.label {
padding: 1px 5px 1px 5px;
margin: 0 5px 0 5px;
}
.text-pst,
.text-prs,
.text-ftr,
.text-byd,
.text-etr {
filter: brightness(120%);
font-weight: bold;
}
/* 媒体查询 */
@media (min-width: 720px) {
.infotable {
grid-template-areas:
"header header"
"main figure";
}
}
@media (max-width: 720px) {
.infotable {
grid-template-areas:
"header"
"figure"
"main";
}
}
/* 设置 grid area */
.infotable .header {
grid-area: header;
padding: 7px 10px;
height: auto !important;
}
.infotable .main {
grid-area: main;
display: grid;
}
.infotable .figure {
grid-area: figure;
padding: 9px 5px;
}
.infotable.light .bg-c {
background-color: lightskyblue;
}
.infotable.conflict .bg-c {
background-color: #b99afd;
}
.infotable.colorless .bg-c {
background-color: #f4d2f8;
}
.central {
display: flex;
justify-content: center;
align-items: center;
}
.fd-c{
flex-direction: column;
}
.fs-m {
font-size: medium;
}
.fs-l {
font-size: large;
}
.repeat-1 {
grid-template-columns: 1fr repeat(1, 2fr);
}
.repeat-3 {
grid-template-columns: 1fr repeat(3, 2fr);
}
.repeat-4 {
grid-template-columns: 1fr repeat(4, 2fr);
}
.repeat-5 {
grid-template-columns: 1fr repeat(5, 2fr);
}
.gc-1 {
grid-column: 1/-1;
}
.gc-2 {
grid-column: 2/-1;
}
.gc-s2 {
grid-column: span 2;
}
.gc-s3 {
grid-column: span 3;
}
.gc-s4 {
grid-column: span 4;
}
.gc-s5 {
grid-column: span 5;
}
.gr-s2 {
grid-row: span 2;
}