/* * wb-theme.css — Widget Base Theme * ───────────────────────────────────────────────────────────────────────────── * 設計原則： * · 所有變數前綴 --wb- ，不與 Bootstrap 5 的 --bs- 衝突 * · 所有 class 前綴 .wb- ，不與 Bootstrap 任何 class 重疊 * · 深色 / 淺色主題由 html[data-theme] 或元素自身的 [data-theme] 控制 * · 各 JS widget（login.js / announcements.js）讀取這些變數， * 搭配 Bootstrap 5 的結構 class（d-flex、gap-2 等）使用 * * 用法： * ← 全站深色 * ← 全站淺色 * ← 單一元件覆寫 * * 主題切換： * document.documentElement.dataset.theme = 'light'; * document.cookie = 'theme=light;path=/;max-age=31536000'; * ───────────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════════ 1. CSS 自訂屬性 — 深色（預設） ══════════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { /* ── 調色盤 ────────────────────────────────────────────────────────────── */ --wb-shell: #c6c7bd; /* 主文字 */ --wb-stone: #7090A8; /* 次要文字、label */ --wb-sky: #04b5a3; --wb-lav: #C3A5E5; --wb-special: #C8DD5A; --wb-warn: #F08080; --wb-safe: #81E6D9; --wb-yellow: #D4B440; --wb-info: #90CDF4; --wb-orange: #f69653; --wb-pink: #FFB3D9; --wb-salmon: #E5C3B3; /* ── 背景層 ────────────────────────────────────────────────────────────── */ --wb-bg: #0c0d0c; --wb-card-bg: #111310; --wb-input-bg: #171917; --wb-th-bg: #191b19; /* ── 框線 ──────────────────────────────────────────────────────────────── */ --wb-border: #1e201e; --wb-border-mid: #2a2c2a; /* ── Hover ─────────────────────────────────────────────────────────────── */ --wb-row-hover: #0e100e; /* ── 各色的暗底（用於 badge / button 背景） ────────────────────────────── */ --wb-sky-dim: #091e1e; --wb-lav-dim: #140e22; --wb-special-dim: #0e1202; --wb-warn-dim: #160808; --wb-safe-dim: #061612; --wb-yellow-dim: #161204; --wb-info-dim: #081220; --wb-orange-dim: #160c04; --wb-pink-dim: #140a0e; --wb-salmon-dim: #160e0a; /* ── 主題切換按鈕 ──────────────────────────────────────────────────────── */ --wb-toggle-label: '☀️ 淺色'; } /* ══════════════════════════════════════════════════════════════════════════════ 2. CSS 自訂屬性 — 淺色 ══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --wb-shell: #1a1d17; --wb-stone: #4a5e68; --wb-sky: #016860; --wb-lav: #5a3a9a; --wb-special: #4a6a00; --wb-warn: #b02828; --wb-safe: #156055; --wb-yellow: #7a5808; --wb-info: #1e4890; --wb-orange: #9a4008; --wb-pink: #903860; --wb-salmon: #8a4838; --wb-bg: #e6e8e2; --wb-card-bg: #f2f3ee; --wb-input-bg: #fafaf7; --wb-th-bg: #d8dbd2; --wb-border: #b8bbb0; --wb-border-mid: #757970; --wb-row-hover: #c8e8e4; --wb-sky-dim: #b8e0da; --wb-lav-dim: #d4c4f0; --wb-special-dim: #d8ecaa; --wb-warn-dim: #f8d0d0; --wb-safe-dim: #b8e0d8; --wb-yellow-dim: #eed8a0; --wb-info-dim: #c4d8f4; --wb-orange-dim: #f8d8c0; --wb-pink-dim: #f8cce0; --wb-salmon-dim: #f8d8cc; --wb-toggle-label: '🌙 深色'; } /* ══════════════════════════════════════════════════════════════════════════════ 3. 全站過渡（切換主題時平滑） ══════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { transition: background-color .22s ease, border-color .22s ease, color .12s ease; } /* 避免影響動畫元素 */ .wb-reaction-btn, .wb-skeleton-pulse { transition: none; } /* ══════════════════════════════════════════════════════════════════════════════ 4. 主題切換按鈕 — .wb-theme-toggle Bootstrap 沒有對應的語意類別 ══════════════════════════════════════════════════════════════════════════════ */ .wb-theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--wb-border-mid); background: transparent; color: var(--wb-stone); font-size: .78rem; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s !important; } .wb-theme-toggle:hover { border-color: var(--wb-stone); color: var(--wb-shell); } /* ══════════════════════════════════════════════════════════════════════════════ 5. 語意 Badge — .wb-badge-* Bootstrap 的 .badge 控制形狀，.wb-badge-* 只加語意色 組合用法：文字 ══════════════════════════════════════════════════════════════════════════════ */ .wb-badge-sky { background: var(--wb-sky-dim) !important; color: var(--wb-sky) !important; border: 1px solid var(--wb-sky); } .wb-badge-lav { background: var(--wb-lav-dim) !important; color: var(--wb-lav) !important; border: 1px solid var(--wb-lav); } .wb-badge-special { background: var(--wb-special-dim) !important; color: var(--wb-special) !important; border: 1px solid var(--wb-special); } .wb-badge-warn { background: var(--wb-warn-dim) !important; color: var(--wb-warn) !important; border: 1px solid var(--wb-warn); } .wb-badge-safe { background: var(--wb-safe-dim) !important; color: var(--wb-safe) !important; border: 1px solid var(--wb-safe); } .wb-badge-yellow { background: var(--wb-yellow-dim) !important; color: var(--wb-yellow) !important; border: 1px solid var(--wb-yellow); } .wb-badge-info { background: var(--wb-info-dim) !important; color: var(--wb-info) !important; border: 1px solid var(--wb-info); } .wb-badge-orange { background: var(--wb-orange-dim) !important; color: var(--wb-orange) !important; border: 1px solid var(--wb-orange); } .wb-badge-pink { background: var(--wb-pink-dim) !important; color: var(--wb-pink) !important; border: 1px solid var(--wb-pink); } .wb-badge-stone { background: var(--wb-border-mid) !important; color: var(--wb-stone) !important; border: 1px solid var(--wb-border-mid); } /* ══════════════════════════════════════════════════════════════════════════════ 6. 語意按鈕 — .wb-btn-* Bootstrap 沒有我們的語意色（sky / special / lav 等），補上。 組合用法： ══════════════════════════════════════════════════════════════════════════════ */ .wb-btn-sky { background: var(--wb-sky-dim) !important; color: var(--wb-sky) !important; border-color: var(--wb-sky) !important; } .wb-btn-lav { background: var(--wb-lav-dim) !important; color: var(--wb-lav) !important; border-color: var(--wb-lav) !important; } .wb-btn-special { background: var(--wb-special-dim) !important; color: var(--wb-special) !important; border-color: var(--wb-special) !important; } .wb-btn-warn { background: var(--wb-warn-dim) !important; color: var(--wb-warn) !important; border-color: var(--wb-warn) !important; } .wb-btn-safe { background: var(--wb-safe-dim) !important; color: var(--wb-safe) !important; border-color: var(--wb-safe) !important; } .wb-btn-yellow { background: var(--wb-yellow-dim) !important; color: var(--wb-yellow) !important; border-color: var(--wb-yellow) !important; } .wb-btn-info { background: var(--wb-info-dim) !important; color: var(--wb-info) !important; border-color: var(--wb-info) !important; } .wb-btn-orange { background: var(--wb-orange-dim) !important; color: var(--wb-orange) !important; border-color: var(--wb-orange) !important; } .wb-btn-stone { background: var(--wb-th-bg) !important; color: var(--wb-shell) !important; border-color: var(--wb-border-mid) !important; } /* hover：Bootstrap 的 .btn:hover 已有 opacity 處理，這裡只補 transform */ .wb-btn-sky:hover, .wb-btn-lav:hover, .wb-btn-special:hover, .wb-btn-warn:hover, .wb-btn-safe:hover, .wb-btn-yellow:hover, .wb-btn-info:hover, .wb-btn-orange:hover, .wb-btn-stone:hover { transform: translateY(-1px); transition: transform .1s !important; } /* ══════════════════════════════════════════════════════════════════════════════ 7. 互動按鈕 — .wb-reaction-btn Bootstrap 沒有此元件 ══════════════════════════════════════════════════════════════════════════════ */ .wb-reaction-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: 20px; border: 1px solid var(--wb-border-mid); background: var(--wb-th-bg); color: var(--wb-shell); font-size: .84rem; font-weight: 500; cursor: pointer; user-select: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s !important; } .wb-reaction-btn:hover:not(:disabled) { background: var(--wb-border-mid); transform: translateY(-1px); } .wb-reaction-btn:active:not(:disabled) { transform: translateY(0); } .wb-reaction-btn:disabled { opacity: .5; cursor: default; } .wb-reaction-btn.active { background: var(--wb-sky-dim); border-color: var(--wb-sky); color: var(--wb-sky); } .wb-reaction-btn.active .wb-reaction-count { color: var(--wb-sky); } .wb-reaction-count { font-size: .72rem; font-weight: 700; min-width: 16px; text-align: center; color: var(--wb-stone); background: var(--wb-bg); border-radius: 10px; padding: 0 5px; } /* ══════════════════════════════════════════════════════════════════════════════ 8. 載入骨架 — .wb-skeleton Bootstrap 沒有此元件（Placeholder 樣式不同） ══════════════════════════════════════════════════════════════════════════════ */ .wb-skeleton { border-radius: 6px; background: linear-gradient( 90deg, var(--wb-border) 25%, var(--wb-border-mid) 50%, var(--wb-border) 75% ); background-size: 200% 100%; animation: wb-shimmer 1.4s infinite; } @keyframes wb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ══════════════════════════════════════════════════════════════════════════════ 9. 文字色彩輔助 — .wb-text-* Bootstrap 的 .text-* 用 --bs- 變數，我們補語意色版本 ══════════════════════════════════════════════════════════════════════════════ */ .wb-text-sky { color: var(--wb-sky) !important; } .wb-text-lav { color: var(--wb-lav) !important; } .wb-text-special { color: var(--wb-special) !important; } .wb-text-warn { color: var(--wb-warn) !important; } .wb-text-safe { color: var(--wb-safe) !important; } .wb-text-stone { color: var(--wb-stone) !important; } .wb-text-shell { color: var(--wb-shell) !important; } .wb-text-yellow { color: var(--wb-yellow) !important; } .wb-text-info { color: var(--wb-info) !important; } .wb-text-orange { color: var(--wb-orange) !important; } /* ══════════════════════════════════════════════════════════════════════════════ 10. 背景色輔助 — .wb-bg-* ══════════════════════════════════════════════════════════════════════════════ */ .wb-bg-card { background: var(--wb-card-bg) !important; } .wb-bg-input { background: var(--wb-input-bg) !important; } .wb-bg-region { background: var(--wb-th-bg) !important; } /* ══════════════════════════════════════════════════════════════════════════════ 11. 框線輔助 — .wb-border-* ══════════════════════════════════════════════════════════════════════════════ */ .wb-border { border-color: var(--wb-border) !important; } .wb-border-mid { border-color: var(--wb-border-mid) !important; } .wb-border-sky { border-color: var(--wb-sky) !important; }