/* [name]深色[/name] [iconbgcolor]#1E1F22[/iconbgcolor] AICL 2026 擴展配色：深色（design C3） 內容分三段：一、重設 :root 代號；二、補蓋原廠寫死的顏色與 *bgcolor 變數；三、帖子內文。 本檔不經原廠編譯，{XXX} 風格變數寫法在此無效。 */ /* 一、代號段（任務 2.3；需求 2.5、13.4） * 原廠在登入且 cookie extstyle 指向本資料夾時，於 common.css 等之後輸出本檔（source/class/class_template.php:383）， * 所以同權重的 :root 會蓋過 common/extend_common.css 的淺色代號；原樣連結、不經編譯，改完不必更新緩存。 * 對比（WCAG 相對亮度）：--text 對 --bg／--card／--card-2 為 14.46／13.42／12.03，--sub 為 8.11／7.53／6.75，皆 ≥4.5。 * --on-accent 不在此重設（設計 C2：有色或深色底上的白字，深淺都白）。 * 品牌黃 --yel 不變，上面的字 --yel-text 仍是深字（對比 9.17）。 */ :root { --bg: #17181B; --card: #1E1F22; --card-2: #26282C; --hover: #2D3035; --line: #34373D; --line-2: #454950; --line-3: #5F656E; --text: #E6E8EB; --sub: #A9B0B9; --yel-hover: #FFCB4D; --yel-soft: #3A3121; --orange: #F0883E; --link: #58A6FF; --focus: #58A6FF; --focus-ring: rgba(88, 166, 255, .3); --danger: #FF7B72; --dark: #3A3F47; --dark-hover: #474D56; --shadow: rgba(0, 0, 0, .5); color-scheme: dark; } /* 二、補蓋原廠寫死的顏色與 *bgcolor 變數（任務 2.3 只做頁面畫布；彈窗、選單、表格等歸任務 2.4，家園與 DIY 歸 2.5） * 頁面畫布：原廠 common.css 的 body 底色是風格變數 {BGCOLOR}，編譯後是寫死的 #F5F6F8（*bgcolor 變數照 C1 保持 hex）， * 深色時要跟著 --bg。個人空間的會員裝扮樣式（static/space/<主題>/style.css）在本檔之後載入，照原樣蓋過（需求 17.5 不設例外）。 */ body { background-color: var(--bg); } /* ---- 任務 2.4：彈窗、選單、表格、分頁、提示、編輯器（需求 2.5、13.4；設計 C3 第二部分） ---- * 先查原廠機制：原廠沒有深色版的元件樣式；名稱不以 bgcolor 結尾的風格變數已指向代號（C1），編譯後自動跟著深色， * 例如 .m_c .o 的 {COMMONBG}、.p_pop 的邊框；任務 2.2 在 common/extend_common.css 已把彈窗 .m_c、選單 .p_pop、 * 分頁 .pg／.pgbtn、提示 .alert_*／.nfl .f_c、名片 .card、小提示 .tip 換成代號，這些深色時自動跟著走，本段不重寫。 * 本段只補兩類（依原廠樣式檔逐條查出，附出處）： * (1) *bgcolor 風格變數：照設計 C1 保持 hex（會被 setcssbackground() 包成 background，cache_styles.php:80-101）， * 原廠用到的地方逐一以選擇器改成代號；新外框不輸出的原廠頁首 #hd／#nv／#scbar 用到的不補（任務 3.2）。 * (2) 本任務範圍（彈窗、選單、表格、分頁、提示、編輯器、快速回覆、主題操作鈕、進度條）裡原廠寫死的淺色。 * 載入順序：本檔在 common.css 與頁面 module 段之後、版主頁的 forum_moderator.css 之前（原廠 loadcss）， * 所以蓋 forum_moderator.css 的規則前面加 body 提高權重。 */ /* (1) *bgcolor 變數 */ /* sidebgcolor：版主面板等左欄底（common.css:692 .ct2_a/.ct3_a 用 linear-gradient 畫成欄底） */ .ct2_a, .ct3_a { background-image: linear-gradient(0deg, var(--card-2), var(--card-2)); } /* titlebgcolor：論壇首頁分區標題（common.css:753）、分類格標題（module.css:101） */ .fl .bm_h, #category_grid h4 { background: var(--card-2); } /* dropmenubgcolor：草稿箱下拉（module.css:275-276；一般選單 .p_pop 已由 extend_common 換掉） */ #draftlist.a, #draftlist_menu { background: var(--card); } /* menubgcolor（#24292F，壓在深底上看不見）：當字色、圖示色、邊框用的地方（common.css:103、132、964，module.css:207、1947-1949） */ :focus { outline-color: var(--focus); } .fc-p { color: var(--text); } .appl li a i:before { color: var(--sub); } /* 原廠 common.css:424（.ftid a:focus）、:432（.er:focus） */ .ftid a:focus, .er:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); } .er:focus { background-color: var(--card); } #scform_srchtxt { border-color: var(--line-3); } #scform_submit { background: var(--dark); color: var(--on-accent); } #scform_tb .a { color: var(--text); } /* 原廠 module.css:1946 選中分頁字色 #333 */ #scform_tb .a::before { border-bottom-color: var(--line-3); } /* (2) 原廠寫死的淺色 */ /* 彈窗：版主操作視窗底部按鈕列（forum_moderator.css:34 #EEE）、彈窗內的錯誤回報條（common.css:1246 #FFE）、 * 私訊彈窗（common.css .pm .flb #CCC、.pmd #F0F0F0、.pmm .pmd #FEF5E7、.pmfl strong #000）、 * 版塊選擇清單（移動主題、轉帖等，common.css:573-579 .pbl 的 #CCC 框、#F3F3F3／#EEE 選中底；module.css .bdl 的 #F5F9FB） */ body .tm_c .o { background: var(--card-2); } #returnmessage4 { background: var(--yel-soft); } .pm .flb { background: var(--card-2); } .pmd { background-color: var(--card-2); } .pmm .pmd { background-color: var(--yel-soft); } .pmfl strong { color: var(--text); } .pbl, .pbl li { border-color: var(--line); } .pbl a:hover { background-color: var(--hover); } .pbl .highlightlink { color: var(--link); } .pbls a, .pbls a:hover { background-color: var(--hover); color: var(--text); } .bdl, .bdl dt, .bdl dd.bdl_a a { background-color: var(--card-2); } .bdl dl.a { background-color: var(--card); } /* 選單：表情選單的預覽框與翻頁連結（common.css:1032-1034）、編輯器插入分隔線／背景的選單（common.css:1172 .hrbox、.postbgbox） */ .sl_pv { border-color: var(--line); background: var(--card-2); } .sllt_p a { color: var(--link); } .hrbox input, .postbgbox input { background: var(--card); } /* 版主操作選單：列表勾選主題後浮出的 #mdly（forum_moderator.css:8-18：#FFF／#E8EFF5 兩段底、#06C 連結、#555 收合鈕； * 縮小後是 {NOTICETEXT} 橘底白字）。帖子內頁的 .pg_viewthread #mdly 原廠拿掉底色，權重較高，不受影響 */ body #mdly { background: var(--card); background: linear-gradient(0deg, var(--card) 68%, var(--card-2) 68%); box-shadow: 0 8px 24px var(--shadow); } body #mdly a { color: var(--link); } body #mdly .cp { color: var(--sub); } body #mdly.cpd #mdct { color: var(--bg); } body #toolbardiv { background: var(--card-2); } /* 原廠 forum_moderator.css:58 */ /* 表格：列表「有新主題」列（module.css .newthread、#checknewline 的 #FFFAF3／#FFFFEB 與 #666 字）、 * 交易與統計表頭（module.css .tdats .h th 淺灰漸層）、積分表（.tfx 的 #FFF2DF／#FAEDDA） */ .newthread tr th, .newthread tr td, #checknewline tr td, #checknewline tr th { background: var(--yel-soft); } #checknewline tr td, #checknewline tr th { color: var(--sub); } .tdats .h th { background: var(--card-2); } .tfx th, .tfx td { background: var(--yel-soft); } .tfx .alt, .tfx .alt th, .tfx .alt td { background: var(--card-2); } /* 列表標記：在 extend_common 換成代號的色塊，白字壓在深色模式的代號上對比不足（--sub 2.19、--orange 2.53） * → 分類數量徽章改用較深的 --line-3 底（白字 5.9；原廠 module.css:788 字是 #FFF !important）， * 推薦、熱度標記保留橘底、字改深色（--bg 對 --orange 7.1） */ body .ttp .num { background: var(--line-3); } body .trecic, body .theatlevel { color: var(--bg); } /* 分頁：自動載入下一頁鈕（module.css #autopbn:hover #fff）、下一頁鈕按下（common.css .pgbtn a:active #EEE） */ #autopbn:hover, .pgbtn a:active { background: var(--hover); } /* 提示：列表與內頁的提示條（common.css:279-282 .ntc_l 的 #FEFEE9、#CCC 關閉鈕）、帖子內的提示（module.css .psth、.cm .psth、 * 評分 .rate dt strong、.ratl .xw1 .xi1、.icon_ring 的 #FFF4DD）、無權限附件（.attach_nopermission #FFFFEE）、 * 帖子列表被隱藏主題提示（#hiddenthread #FFFAF3）、錯誤輸入框（common.css:431 .er 的 #FDF4F4） */ .ntc_l { background: var(--yel-soft); } .ntc_l .d { background: var(--line-3); } .psth, .cm .psth, .rate dt strong, .ratl .xw1 .xi1, .icon_ring { background-color: var(--yel-soft); } .attach_nopermission { background-color: var(--yel-soft); } #hiddenthread { background: var(--yel-soft); } .er { border-color: var(--danger); background-color: var(--card); } /* 發帖編輯器（editor.css:6-29、104）：外框 #999／#CCC、工具列分隔 #DDD／#FEFEFE、字體大小下拉 a.dp 的 #FFF 底、底列 #999 字、 * 右上「全部功能／簡單」切換鈕的淺色漸層圖（card_btn.png）。editor.css 由 common/editor.htm:1 在本檔之後載入，所以加 body */ body .edt { border-color: var(--line-2); } body .edt .bar, body .edt .cst { border-bottom-color: var(--line); } body .edt .bbar { border-top-color: var(--line); } body .edt .bbar, body .edt .bbar a { color: var(--sub); } body .edt .btn { border-right-color: var(--line); } body .edt .b1r, body .edt .b2r { border-right-color: var(--line); border-left-color: transparent; } body .edt .b2r a.dp { background-color: var(--card); } body #e_simple, body #e_fullswitcher { border-color: var(--line-2); border-radius: var(--radius-s); background: var(--card); } /* 快速回覆列（module.css:182-193 #vfastpost：#E5EDF2 底、#C5D5E2 框、按鈕 #E4ECF1 底與 #7576A1 字 !important） * 與帖子內頁主題操作鈕（收藏、轉播、分享、淘帖、支持、反對，module.css:951 #p_btn a 的 #E6EDF2 底；只換底色，保留各鈕的圖示）。 * 按鈕字色原廠用 !important，這裡同樣要 !important 才蓋得過 */ #vfastpost { background: var(--card-2); } #vfastpost #vf_m input { border-color: var(--line-2); background: var(--card); color: var(--text); } #vfastpost #vf_b button { border-color: var(--line-2); background: var(--hover); color: var(--text) !important; } #vfastpost #vf_b button:hover { border-color: var(--line-3); background: var(--line); } #p_btn a { background-color: var(--card-2); } #p_btn a:hover { background-color: var(--hover); } /* 進度條（module.css:172-175）：帖子內頁的升級進度 .pbg2（#FFF 底）、投票與任務的 .pbg（#EEE 底、#CCC 框）； * 上傳附件的進度框（common.css:1477-1482 .progressContainer 與它加上的 red/green/blue 狀態、#555 檔名）。 * 狀態色只限 .progressContainer 底下（.red／.green／.blue 是通用類名，不動其他地方的用法） */ .pbg { border-color: var(--line); background: var(--card-2); } .pbg2 { background: var(--line-2); } .progressContainer { border-color: var(--line); background-color: var(--card-2); } .progressContainer.red { border-color: var(--danger); background-color: var(--card-2); } .progressContainer.green, .progressContainer.blue { border-color: var(--line-2); background-color: var(--card-2); } .progressName { color: var(--text); } .progressWrapper table { background: var(--card); } /* ---- 任務 2.5：家園各頁、搜尋結果頁與 DIY 模塊樣式（需求 2.5、13.4；設計 C3 第二部分） ---- * 先查原廠機制：原廠沒有深色版；已用風格變數（名稱不以 bgcolor 結尾，C1 已指向代號）或已由 common/extend_common.css 換成代號的規則， * 深色時自動跟著走，本段不重寫（例如家園列表 .xld／.bm、設定中心 .tfm、排行 .rnk、統計 .tdats .h th（2.4 已補）、DIY 標題列 * .frame-title、相冊封面 .mla .c、記錄列表 IP、用戶組標題（extend_common.css））。本段只補 theme_dark.e2e.js § 2.5 在深色下量到、來源是寫死淺色或代號誤用的規則，逐條附出處。 * 載入順序：本檔在 common.css 與頁面 module 段之後。 */ /* 消息與提醒頁（站上 template/default 的 static/css/pm-modern.css，space_notice.htm:11、space_pm.htm:11、spacecp_pm.htm:11 載入）： * extend_common.css §原廠元件「消息」段把 --pm-accent 設成 --dark。pm-modern.css 同一個 --pm-accent 既當字色（例如 :220 選中頁籤、:111、:133） * 又當白字按鈕的底色；深色時 --dark 當字壓在 --card 上看不見，而沒有一個顏色能同時當淺字與白字的底（對比各要 ≥4.5）。 * → 深色時字色用 --text，白字的底色那幾條（:247、:423、:592、:689、:1020、:1454、:1542）改回 --dark（白字 --on-accent 對 --dark ≥4.5）。 * 頁籤群組名 h2.mt（:66）的底色由 extend_common.css §骨架位置、字色由「消息」段處理，不重寫。 */ body .pm-modern { --pm-accent: var(--text); } body .pm-modern ul.tb li.o a, body .pm-modern .pm_op .pn, body .pm-modern #pm_ul dl.pm-msg-mine .pm-bubble, body .pm-modern .pm-chat-bubble-mine, body .pm-modern .pm-chat-send-btn { background: var(--dark); } body .pm-modern button.pn, body .pm-modern .pg strong { background: var(--dark) !important; } /* DIY 模塊：框架、標題列已用風格變數或代號（common.css:1493 .frame {WRAPBORDERCOLOR}／{WRAPBG}；.frame-title 與標籤框架選中頁籤 * common.css:1540 .frame-tab .tb .a a 的 #FFF 由 extend_common.css §原廠元件「區塊」段換成代號），深色自動跟著走，本檔不寫。 * 模塊內容自帶的