MediaWiki:Common.css：修訂間差異

2026年10月17日 (六) 18:23的最新修訂

/* ============================================================================
   《餘燼守衛》資料庫 —— 正式主題「熔爐餘燼 / FORGE EMBER」
   ----------------------------------------------------------------------------
   為什麼走暗色：本作是「在黑暗裡用砲塔守住一盞火源」的塔防 roguelite，
   官方商店主視覺就是深色場景裡的一團火。前一站（吸血鬼爬行者）用的是
   羊皮紙／石壁亮色，兩站必須一眼看得出不同，故本站在暗底上做「爐渣＋餘燼橘」。

   取色與出處：
     底      #14100E  爐渣底（主視覺暗部）——不用純黑，保留褐調溫度
     面板    #1C1714  面板（暗部稍提亮）
     面板2   #261F1A  表頭／圖片底
     線      #3D332A  磚縫
     正文    #F2E9DC  火光打亮的牆面
     次級    #B4A392  陰影裡的石面
     強調    #F2733A  餘燼橘（主視覺火焰外圍）—— 連結與重點
     強調2   #7FB2D9  霜藍（寒霜火焰）—— 次要互動色
     註記    #E3B341  金幣／警示（朱批感）
     危險    #D8503C  首領紅

   對比度（WCAG 實測）：正文/底 14.9、正文/面板 15.1、次級/面板 8.2、
   註記/面板2 6.6、強調/面板 6.2、強調2/面板 7.3 —— 全部 ≥ AA。

   設計取意（三處有出處）：
     ① 首頁 hero 頂部 3px 餘燼橘線：對應主視覺裡火源的光暈邊
     ② 小圓角 4px＋磚縫細線：迷宮格線的直角感（不學大圓角卡片）
     ③ 條目圖與一覽縮圖一律墊面板2：暗底上看像素圖不會糊邊
   ============================================================================ */
:root{
  --vc-bg:#14100E;
  --vc-panel:#1C1714;
  --vc-panel2:#261F1A;
  --vc-line:#3D332A;
  --vc-ink:#F2E9DC;
  --vc-ink2:#B4A392;
  --vc-accent:#F2733A;
  --vc-accent2:#7FB2D9;
  --vc-note:#E3B341;
  --vc-notebg:#2A2116;
  --vc-danger:#D8503C;
  --vc-radius:4px;
  --vc-display:"Noto Serif CJK TC","Source Han Serif TC","Songti TC","STSong",Georgia,serif;
}

/* ---- MediaWiki 1.43 Codex 設計 token —— 皮膚（Vector 2022）把頁面底色寫死在
   `@media screen` 且載入順序在 Common.css 之前，只覆蓋選擇器會輸掉（實測底色仍是 #FFF）。
   直接覆蓋 token 最乾淨；`html:root` 權重高於皮膚的 `html`，不受載入順序影響。 */
html:root{
  --background-color-base:var(--vc-bg);
  --background-color-neutral:var(--vc-panel2);
  --background-color-neutral-subtle:var(--vc-panel);
  --background-color-interactive:var(--vc-panel2);
  --background-color-interactive-subtle:var(--vc-panel);
  --background-color-disabled:#33291F;
  --border-color-base:var(--vc-line);
  --border-color-subtle:var(--vc-line);
  --border-color-muted:#4A3E33;
  --color-base:var(--vc-ink);
  --color-emphasized:#FFF6E9;
  --color-subtle:var(--vc-ink2);
  --color-progressive:var(--vc-accent);
  --border-color-progressive:var(--vc-accent);
  --background-color-progressive:var(--vc-accent);
  --background-color-progressive-subtle:#3A2317;
  --color-progressive--hover:var(--vc-accent2);
  --color-visited:#C98A6A;
  --color-destructive:var(--vc-danger);
  --color-inverted:var(--vc-panel);
}

body{background:var(--vc-bg);color:var(--vc-ink);
  font-family:"Noto Sans CJK TC","PingFang TC","Microsoft JhengHei","Hiragino Sans TC",system-ui,sans-serif}
body a{color:var(--vc-accent)}
body a:visited{color:#C98A6A}
body a:hover{color:var(--vc-accent2)}
body a.new{color:var(--vc-note)}
::selection{background:#F2733A33}
:focus-visible{outline:2px solid var(--vc-accent);outline-offset:1px}
input,select,textarea{accent-color:var(--vc-accent)}
.cdx-radio__input,.cdx-checkbox__input{accent-color:var(--vc-accent)}
.mw-parser-output a.external::after{filter:invert(.85) sepia(1) saturate(4) hue-rotate(340deg)}

.mw-page-container{background:var(--vc-bg)}
.vector-header,.vector-sticky-header{background:var(--vc-panel)!important;border-bottom:1px solid var(--vc-line)}
.vector-search-box-input{background:var(--vc-panel2);border:1px solid var(--vc-line);
  border-radius:var(--vc-radius);color:var(--vc-ink)}
.vector-search-box-input::placeholder{color:var(--vc-ink2)}
.vector-toc,.vector-pinnable-element,.vector-settings{background:transparent}
.vector-toc .vector-toc-link,.vector-menu-content a{color:var(--vc-accent)}
#footer{border-top:1px solid var(--vc-line);background:var(--vc-panel2);color:var(--vc-ink2)}
#footer a{color:var(--vc-ink2)}

h1.firstHeading,h2,h3{font-family:var(--vc-display);font-weight:700;letter-spacing:.01em}
h2{border-bottom:1px solid var(--vc-line);padding-bottom:.22em}
.vector-header .mw-logo-wordmark,.vector-header .mw-logo-tagline{color:var(--vc-ink)}
.vector-toc .vector-toc-numb{color:var(--vc-ink2)}
hr{border:0;border-top:1px solid var(--vc-line)}

/* 首頁 hero：頂部餘燼橘光縫（對應主視覺火源光暈） */
.vc-hero{background:var(--vc-panel);border:1px solid var(--vc-line);
  border-radius:var(--vc-radius);padding:22px 24px;margin:0 0 18px}
.vc-hero-title{font-family:var(--vc-display);font-size:1.7em;font-weight:700;letter-spacing:.02em}
.vc-hero-sub{color:var(--vc-ink2);margin-top:6px;line-height:1.6}
.vc-hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.vc-stat{background:var(--vc-panel2);border:1px solid var(--vc-line);border-radius:var(--vc-radius);
  padding:8px 14px;min-width:84px;text-align:center}
.vc-stat a{display:block;color:inherit;text-decoration:none}
.vc-stat b{display:block;font-size:1.25em;font-family:var(--vc-display)}
.vc-stat span{font-size:.82em;color:var(--vc-ink2)}
.vc-stat:hover{background:var(--vc-panel);border-color:var(--vc-accent)}
.vc-stat:hover b,.vc-stat:hover span{color:var(--vc-accent)}
.vc-stat a:focus-visible{outline:2px solid var(--vc-accent);outline-offset:2px}

/* 一覽表 */
table.vc-list{border-collapse:collapse;width:100%;background:var(--vc-panel);
  border:1px solid var(--vc-line);font-size:.94em}
table.vc-list th{background:var(--vc-panel2);text-align:left;padding:7px 10px;
  border-bottom:1px solid var(--vc-line);font-weight:600}
table.vc-list td{padding:6px 10px;border-bottom:1px solid var(--vc-line);vertical-align:top}
table.vc-list tr:hover td{background:#221B16}

/* 一覽表的「圖」欄（只有圖齊的類別才開，見 gen_pages.py 的 THUMB_MIN_COVER） */
table.vc-list--thumb th:first-child,table.vc-list--thumb td:first-child{
  width:64px;text-align:center;padding:4px 6px;vertical-align:middle}
table.vc-list--thumb td:first-child img{image-rendering:pixelated;
  border-radius:3px;background:var(--vc-panel2);padding:2px;border:1px solid var(--vc-line)}

/* 鍵值表／語言對照表 */
table.vc-kv,table.vc-lang{border-collapse:collapse;background:var(--vc-panel);
  border:1px solid var(--vc-line);font-size:.94em;margin:.4em 0}
table.vc-kv th,table.vc-lang th{background:var(--vc-panel2);text-align:left;
  padding:6px 10px;border:1px solid var(--vc-line);white-space:nowrap}
table.vc-kv td,table.vc-lang td{padding:6px 10px;border:1px solid var(--vc-line)}
code{background:var(--vc-panel2);border:1px solid var(--vc-line);border-radius:2px;padding:0 4px;
  font-size:.9em;color:var(--vc-note)}

/* 資訊框 */
table.vc-infobox{float:right;clear:right;width:280px;margin:0 0 14px 18px;
  border:1px solid var(--vc-line);background:var(--vc-panel);font-size:.92em;
  border-radius:var(--vc-radius)}
table.vc-infobox th{width:38%;background:var(--vc-panel2);text-align:left;padding:6px 9px;
  border-bottom:1px solid var(--vc-line);font-weight:600}
table.vc-infobox td{padding:6px 9px;border-bottom:1px solid var(--vc-line)}
table.vc-infobox td img{background:var(--vc-panel2);border:1px solid var(--vc-line);
  border-radius:var(--vc-radius);padding:3px;display:block;margin:0 auto;max-width:100%;height:auto}
.vc-infobox-title{background:var(--vc-panel2);font-family:var(--vc-display);font-weight:700;
  padding:8px 9px;text-align:center;border-bottom:1px solid var(--vc-line)}
.vc-dim{color:var(--vc-ink2)}

/* 首頁磁貼 */
table.vc-tiles{border-collapse:separate;border-spacing:10px;width:100%}
table.vc-tiles td{border:0;padding:0;vertical-align:top;width:50%}
div.vc-tile{background:var(--vc-panel);border:1px solid var(--vc-line);border-radius:var(--vc-radius);
  padding:12px 14px;font-size:1.02em}
div.vc-tile small{color:var(--vc-ink2)}
/* 單數卡片：最後一格橫跨兩欄，做成低調的說明列（不帶圖位） */
div.vc-tile--wide{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:var(--vc-panel2)}
div.vc-tile-art{display:flex;align-items:center;justify-content:center;height:104px;margin:-2px 0 10px;
  background:var(--vc-panel2);border:1px solid var(--vc-line);border-radius:var(--vc-radius);overflow:hidden}
/* ⚠ 幾何必須寫在 <a> 上：MediaWiki 把圖包在 <a class="mw-file-description">，flex 項目是那個 <a>，
   只給 img 寫 width:100% 會拿 <a> 的內容寬度（=原圖尺寸），大圖會被 overflow:hidden 裁掉。 */
div.vc-tile-art > span,div.vc-thumb > span{display:block;width:100%;height:100%;min-width:0}
div.vc-tile-art > span > a,div.vc-thumb > span > a{display:block;width:100%;height:100%}
div.vc-tile-art img,div.vc-thumb img{display:block;width:100%;height:100%;object-fit:contain;
  image-rendering:pixelated}
/* 無官方貼圖的類別：純 CSS 線稿佔位（不用 emoji、不拿近似圖頂替） */
div.vc-tile-art--none::after{content:"";width:46px;height:36px;border:2px solid var(--vc-ink2);
  border-radius:2px;opacity:.45;
  background:
    linear-gradient(var(--vc-ink2),var(--vc-ink2)) 7px 9px/26px 2px no-repeat,
    linear-gradient(var(--vc-ink2),var(--vc-ink2)) 7px 16px/26px 2px no-repeat,
    linear-gradient(var(--vc-ink2),var(--vc-ink2)) 7px 23px/15px 2px no-repeat}

div.vc-thumb{display:flex;align-items:center;justify-content:center;width:104px;height:104px;
  background:var(--vc-panel2);border:1px solid var(--vc-line);border-radius:var(--vc-radius);overflow:hidden}
span.vc-dim{color:var(--vc-ink2);opacity:.5}

/* 缺官方繁中／需人工確認的說明塊：像檔案上的朱批 */
.vc-note{border-left:3px solid var(--vc-note);background:var(--vc-notebg);color:var(--vc-note);
  padding:8px 12px;font-size:.92em;margin:.4em 0;border-radius:0 var(--vc-radius) var(--vc-radius) 0}

.vc-hero-art{margin:0 0 14px;border:1px solid var(--vc-line);border-top:3px solid var(--vc-accent);
  border-radius:var(--vc-radius);overflow:hidden}
.vc-hero-art img{display:block;width:100%;height:auto}
table.vc-gallery{border-collapse:separate;border-spacing:8px;width:100%;margin:4px 0 0}
table.vc-gallery td{border:0;padding:0;width:25%;vertical-align:top}
table.vc-gallery img{display:block;width:100%;height:auto;border-radius:var(--vc-radius);
  border:1px solid var(--vc-line)}
.vc-credit{color:var(--vc-ink2);font-size:.82em;line-height:1.65}

/* ----------------------------------------------------------------------------
   MediaWiki 原生元件補丁（Vector 2022 / Codex）
   深色主題下這些元件仍是預設淺色，會在頁面上留下「白方塊」——
   本地靜態預覽不含這些元件，所以只有打開線上站才看得見。
   ---------------------------------------------------------------------------- */
/* 頁尾「Powered by MediaWiki」徽章：Codex 預設白底按鈕 → 在深色底上像一個空方框 */
#footer .cdx-button,.mw-footer .cdx-button{background:transparent;border-color:var(--vc-line);
  color:var(--vc-ink2)}
#footer .cdx-button:hover,.mw-footer .cdx-button:hover{background:var(--vc-panel2)}
/* 徽章內的 SVG/PNG 是深色線稿 → 反相後才能在深底上看清 */
#footer .cdx-button img,#footer .cdx-button svg,
.mw-footer .cdx-button img,.mw-footer .cdx-button svg{filter:invert(1) opacity(.75)}
/* 搜尋框與主選單按鈕（Codex）同樣吃淺色預設 */
.vector-header .cdx-text-input__input{background:var(--vc-panel);color:var(--vc-ink);
  border-color:var(--vc-line)}
.vector-header .cdx-button{color:var(--vc-ink)}