模板:UI/styles.css
出自幻跡百科
更多操作
/*
* BenWiki 通用 UI primitive 樣式
*
* 供任何內容類型共用的排版骨架：
* - Hero（圖片欄＋內容欄＋橫跨全寬的 footer）
* - Tabs（模組:UI/Tabs 輸出）
* - 卡片網格（模板:UI/卡片網格）
* - 分類連結群組（模板:UI/分類連結群組）
* - 標籤列（模板:UI/標籤列）
*
* 本檔案只處理「排版骨架」與 Citizen semantic token 顏色，
* 不含任何領域專屬的強調色／視覺風格；領域專屬視覺放在各自的
* TemplateStyles（例如 模板:裏番/styles.css）。
*
* TemplateStyles 限制：
* - 不宣告 CSS custom properties。
* - var() 只用於接受單一 color 的屬性（border-color 等 shorthand 不行，
* 一律拆成 border-top-color / border-right-color / border-bottom-color /
* border-left-color 四個 longhand）。
* - 連結一律使用 wikitext 連結語法（[url text] / [[Page|text]]）產生，
* 不直接在模板原始碼中寫 <a href="...">（Sanitizer 不允許）。
* - 標題文字一律用 <div> 呈現、不用 <h1>-<h6>：MediaWiki 會把任何
* <h1>-<h6> 標籤當成正式章節標題塞進整頁目次，同一頁重複出現多筆
* （例如卡片網格裡的每張卡片）就會把目次塞爆，因此一律改用 <div>
* 搭配 CSS 呈現標題感。
*/
/* ==========================================================
* Hero
*
* 兩列 grid：第一列是圖片欄＋內容欄，第二列是橫跨全寬的 footer
* （通常放 tabs nav、標籤列這類「屬於整個 Hero、不屬於單一欄位」的東西）。
* ========================================================== */
.benwiki-ui-hero {
display: grid;
grid-template-columns:
minmax(0, 3fr)
minmax(300px, 2fr);
grid-template-rows: auto auto;
gap: 1.5rem;
overflow: hidden;
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-radius: 1rem;
background-color: var(--background-color-neutral-subtle);
}
.benwiki-ui-hero__poster {
min-width: 0;
grid-column: 1;
grid-row: 1;
}
.benwiki-ui-hero__poster img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.benwiki-ui-hero__content {
min-width: 0;
padding: 1.5rem 1.5rem 0 0;
grid-column: 2;
grid-row: 1;
}
.benwiki-ui-hero__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 0 1.5rem 1.5rem;
grid-column: 1 / -1;
grid-row: 2;
}
@media ( max-width: 780px ) {
.benwiki-ui-hero {
grid-template-columns: minmax( 0, 1fr );
grid-template-rows: auto auto auto;
}
.benwiki-ui-hero__poster {
grid-row: auto;
}
.benwiki-ui-hero__content {
grid-column: 1;
grid-row: auto;
padding: 0 1.25rem;
}
.benwiki-ui-hero__footer {
grid-row: auto;
padding: 1.25rem;
}
}
/* ==========================================================
* Tabs
* ========================================================== */
.benwiki-ui-tabs__nav {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.9rem;
margin-bottom: 0.9rem;
}
.benwiki-ui-tabs__nav:empty {
display: none;
}
.benwiki-ui-tab-button {
padding: 0.4rem 0.85rem;
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-radius: 999px;
color: var(--color-subtle);
background-color: var(--background-color-neutral-subtle);
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
}
.benwiki-ui-tab-button:hover {
color: var(--color-emphasized);
}
.benwiki-ui-tab-button[aria-selected="true"] {
color: var(--color-inverted-fixed);
background-color: var(--background-color-progressive);
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
.benwiki-ui-tabs__panel[hidden] {
display: none;
}
/* ==========================================================
* Card grid
*
* 卡片內容常來自 SMW deferred query。deferred query 解析完成後，
* 實際結果會被包在好幾層 SMW 自己產生的容器裡（.smw-deferred-query、
* #deferred-output、內部再包一層 .mw-parser-output），卡片因此變成
* grid 的孫層或曾孫層而不是直接子層——CSS Grid 只認直接子層，所以
* 這裡用「後代選擇器」（不限定巢狀深度）把這些容器全部設成
* display:contents，讓它們在版面上「消失」，卡片才能真正參與 grid。
* ========================================================== */
.benwiki-ui-card-grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
gap: 1rem;
}
.benwiki-ui-card-grid--narrow {
grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
}
.benwiki-ui-card-grid--wide {
grid-template-columns: repeat( auto-fit, minmax( 380px, 1fr ) );
}
.benwiki-ui-card-grid .smw-deferred-query,
.benwiki-ui-card-grid [id="deferred-output"],
.benwiki-ui-card-grid .smw-deferred-query .mw-parser-output {
display: contents;
}
.benwiki-ui-card-grid [id="deferred-control"] {
display: none;
}
/* ==========================================================
* Categorized link group
*
* 每一列（.benwiki-ui-link-group__row）可能被一個 <a>（wikitext
* [網址 ...] 語法產生）包住，也可能沒有連結、單純是展示用的 <div>——
* 兩種情況下 .list 的直接子元素巢狀深度不同（有連結時是
* .list > a > .row，沒連結時是 .list > .row），所以分隔線改用
* .list > * + *（無論子元素是 a 還是 div 都適用），不掛在 .row 自己的
* :last-child 上。連結顏色／hover 效果同理，一律以 .list 為基準用
* 「a.external」比對，不假設 <a> 是 .row 的子層。
* ========================================================== */
.benwiki-ui-link-group {
min-width: 0;
overflow: hidden;
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-radius: 0.75rem;
background-color: var(--background-color-neutral-subtle);
}
.benwiki-ui-link-group__heading {
padding: 0.75rem 1rem;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border-color-subtle);
}
.benwiki-ui-link-group__heading-text {
color: var(--color-emphasized);
font-size: 1rem;
font-weight: 700;
}
.benwiki-ui-link-group__list {
min-width: 0;
}
.benwiki-ui-link-group__list > * + * {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--border-color-subtle);
}
.benwiki-ui-link-group__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.65rem 1rem;
}
.benwiki-ui-link-group__copy {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.benwiki-ui-link-group__list a.external {
display: block;
color: inherit;
text-decoration: none;
}
.benwiki-ui-link-group__list a.external:hover .benwiki-ui-link-group__row {
background-color: var(--background-color-neutral);
}
.benwiki-ui-link-group__type {
min-width: 0;
color: var(--color-subtle);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.benwiki-ui-link-group__name {
min-width: 0;
color: var(--color-base);
font-weight: 600;
}
.benwiki-ui-link-group__arrow {
flex: 0 0 auto;
color: var(--color-progressive);
font-size: 0.85rem;
}
/* ==========================================================
* Tag list
* ========================================================== */
.benwiki-ui-tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.benwiki-ui-tag-list__item {
display: inline-flex;
padding: 0.28rem 0.6rem;
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-radius: 999px;
color: var(--color-subtle);
font-size: 0.72rem;
font-weight: 600;
}