模板:Infobox/styles.css
出自幻跡百科
更多操作
/*
* BenWiki 通用 Infobox 樣式
*
* 適用於由「模組:Infobox」透過 Capiunto
* 產生的所有 BenWiki 資訊欄。
*
* 色彩直接使用 MediaWiki / Citizen semantic tokens。
*
* TemplateStyles 限制：
* - 不宣告 CSS custom properties。
* - var() 只用於接受單一 color 的屬性。
* - 不使用 border-color: var(...) 這類寫法。
*
* 領域專用呈現放在各自 TemplateStyles。
*
* 架構說明：模組:Infobox/doc
*/
/* ==========================================================
* Card
* ========================================================== */
.mw-capiunto-infobox.benwiki-infobox {
float: right;
width: 21.5rem;
max-width: 100%;
margin:
0
0
1.5rem
1.75rem;
color:
var(--color-base);
background-color:
var(--background-color-neutral-subtle);
border-width: 1px;
border-style: solid;
border-top-color:
var(--border-color-base);
border-right-color:
var(--border-color-base);
border-bottom-color:
var(--border-color-base);
border-left-color:
var(--border-color-base);
border-top-width: 3px;
border-top-color:
var(--color-progressive);
border-collapse: separate;
border-spacing: 0;
border-radius: 0.75rem;
overflow: hidden;
font-size: 0.96rem;
line-height: 1.45;
}
/* ==========================================================
* Title
*
* 使用 Capiunto top cell，而不是 table caption。
* 因此標題屬於 Infobox card 本體。
* ========================================================== */
.mw-capiunto-infobox.benwiki-infobox
.benwiki-infobox__title {
padding:
0.9rem
1rem
0.8rem;
color:
var(--color-emphasized);
background-color:
var(--background-color-neutral-subtle);
font-size: 1.18rem;
font-weight: 700;
line-height: 1.3;
text-align: center;
overflow-wrap: anywhere;
}
/* ==========================================================
* Generic rows
* ========================================================== */
.mw-capiunto-infobox.benwiki-infobox
.mw-capiunto-infobox-label,
.mw-capiunto-infobox.benwiki-infobox
.benwiki-infobox__row-data {
padding:
0.7rem
0.95rem;
vertical-align: top;
border-top-width: 1px;
border-top-style: solid;
border-top-color:
var(--border-color-subtle);
}
.mw-capiunto-infobox.benwiki-infobox
.mw-capiunto-infobox-label {
width: 38%;
color:
var(--color-emphasized);
font-weight: 600;
line-height: 1.4;
text-align: left;
overflow-wrap: anywhere;
}
.mw-capiunto-infobox.benwiki-infobox
.benwiki-infobox__row-data {
min-width: 0;
color:
var(--color-base);
line-height: 1.45;
overflow-wrap: anywhere;
}
/* ==========================================================
* Image stage
*
* 不強制固定比例、不裁切圖片。
* 橫圖、直圖、小圖、透明圖都以 contain 原則呈現。
* ========================================================== */
.mw-capiunto-infobox.benwiki-infobox
.benwiki-infobox__image
td {
padding: 0.75rem;
background-color:
var(--background-color-neutral);
text-align: center;
}
.mw-capiunto-infobox.benwiki-infobox
.benwiki-infobox__image
td > span,
.mw-capiunto-infobox.benwiki-infobox
.benwiki-infobox__image
td > span > a {
display: inline-block;
max-width: 100%;
}
.mw-capiunto-infobox.benwiki-infobox
.benwiki-infobox__image
img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 18rem;
margin:
0
auto;
border-radius: 0.5rem;
object-fit: contain;
}
.mw-capiunto-infobox.benwiki-infobox
.benwiki-infobox__image
td > br {
display: none;
}
.mw-capiunto-infobox.benwiki-infobox
.benwiki-infobox__image
td > div {
padding:
0.55rem
0.35rem
0;
color:
var(--color-subtle);
font-size: 0.85rem;
line-height: 1.4;
overflow-wrap: anywhere;
}
/* ==========================================================
* Collection heading
* ========================================================== */
.mw-capiunto-infobox.benwiki-infobox
.mw-capiunto-infobox-header {
padding:
0.56rem
0.78rem;
color:
var(--color-emphasized);
background-color:
var(--background-color-neutral);
border-top-width: 1px;
border-top-style: solid;
border-top-color:
var(--border-color-subtle);
text-align: left;
}
.benwiki-infobox-collection-heading {
display: flex;
flex-wrap: wrap;
align-items: center;
gap:
0.35rem
0.5rem;
min-width: 0;
}
.benwiki-infobox-collection-heading__label {
flex:
1
1
auto;
min-width: 5rem;
color:
var(--color-emphasized);
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
.benwiki-infobox-collection-heading__summary {
flex:
0
0
auto;
padding:
0.1rem
0.42rem;
color:
var(--color-subtle);
background-color:
var(--background-color-interactive);
border-radius: 999px;
font-size: 0.76rem;
font-weight: 600;
line-height: 1.35;
white-space: nowrap;
}
.benwiki-infobox-collection-heading__summary:empty,
.benwiki-infobox-collection-heading__action:empty {
display: none;
}
.benwiki-infobox-collection-heading__action {
flex:
0
0
auto;
}
/* ==========================================================
* Collection toggle
* ========================================================== */
.benwiki-infobox-collection-toggle {
padding:
0.18rem
0.42rem;
color:
var(--color-progressive);
background-color:
transparent;
border-width: 0;
border-style: none;
border-radius: 0.35rem;
font-family: inherit;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.35;
cursor: pointer;
}
.benwiki-infobox-collection-toggle[hidden] {
display: none;
}
.benwiki-infobox-collection-toggle:hover {
color:
var(--color-progressive--hover);
background-color:
var(--background-color-interactive);
}
/* ==========================================================
* Collection content
* ========================================================== */
.mw-capiunto-infobox.benwiki-infobox
.benwiki-infobox__collection {
padding: 0;
color:
var(--color-base);
background-color:
var(--background-color-neutral-subtle);
text-align: left;
}
.benwiki-infobox-collection-content {
min-width: 0;
}
/* ==========================================================
* Generic page-local custom fields
* ========================================================== */
.benwiki-infobox-custom-field {
display: grid;
grid-template-columns:
minmax(5.75rem, 0.85fr)
minmax(0, 1.25fr);
gap: 0.75rem;
padding:
0.68rem
0.95rem;
}
.benwiki-infobox-custom-field
+ .benwiki-infobox-custom-field {
border-top-width: 1px;
border-top-style: solid;
border-top-color:
var(--border-color-subtle);
}
.benwiki-infobox-custom-field__label {
min-width: 0;
color:
var(--color-emphasized);
font-weight: 600;
line-height: 1.4;
overflow-wrap: anywhere;
}
.benwiki-infobox-custom-field__value {
min-width: 0;
color:
var(--color-base);
line-height: 1.45;
overflow-wrap: anywhere;
}
/* ==========================================================
* Links
* ========================================================== */
.mw-capiunto-infobox.benwiki-infobox
a {
overflow-wrap: anywhere;
}
/* ==========================================================
* Responsive
* ========================================================== */
@media (max-width: 720px) {
.mw-capiunto-infobox.benwiki-infobox {
float: none;
width: 100%;
max-width: none;
margin:
0
0
1.25rem;
}
}
@media (max-width: 420px) {
.benwiki-infobox-custom-field {
grid-template-columns:
minmax(0, 1fr);
gap: 0.2rem;
}
.benwiki-infobox-collection-heading__label {
flex-basis: 100%;
}
.benwiki-infobox-collection-heading__summary {
margin-right: auto;
}
}