1,133
次編輯
小 (调整) |
小 (完成) |
||
(未顯示同一使用者於中間所作的 7 次修訂) | |||
第1行: | 第1行: | ||
. | .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 { | ||
display: | display: inline-block; | ||
padding: 1px 5px; | |||
margin: 0 5px; | |||
} | |||
.infotable img+span.label, | |||
.infotable .floatnone+span.label { | |||
margin-top: 5px; | |||
} | |||
.infotable b { | |||
filter: brightness(120%); | |||
} | |||
/* 媒体查询 */ | |||
@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; | |||
} | } |
次編輯