/* ========================================================= HCEduToolHub Layout 樣式 - Light / Dark 主題變數 - 夜空背景（星雲 + 星星 + 閃爍） - Navbar / Footer 共用樣式 ========================================================= */ /* === 1. 全站顏色變數（Light 模式預設） ================== */ :root { /* 主色：連結、hover 底線用 */ --color-primary: #2563eb; /* 文字 / 背景 / 邊框 */ --color-text-main: #111827; --color-text-muted: #6b7280; --color-border: #e5e7eb; --color-bg: #f3f4f6; --color-footer-bg: #f3f4f6; /* Navbar（淺色毛玻璃） */ --color-nav-bg: rgba(255, 255, 255, 0.85); --color-nav-border: rgba(148, 163, 184, 0.45); --color-nav-text: #111827; /* 按鈕顏色 */ --btn-primary-bg: #3b82f6; --btn-primary-hover: #2563eb; --btn-primary-text: #ffffff; --btn-outline-bg: transparent; --btn-outline-border: #3b82f6; --btn-outline-text: #3b82f6; --btn-outline-hover-bg: #3b82f6; --btn-outline-hover-text: #ffffff; --btn-danger-bg: rgba(239, 68, 68, 0.1); --btn-danger-text: #dc2626; --btn-danger-hover-bg: rgba(239, 68, 68, 0.2); } /* === 2. Dark 模式下的顏色覆寫 ========================== */ /* 套用位置： */ :root[data-theme="dark"] { --color-primary: #38bdf8; /* 夜間模式文字：全面偏白 */ --color-text-main: #ffffff; --color-text-muted: #d1d5db; --color-nav-text: #ffffff; --color-border: rgba(148,163,184,0.25); --color-bg: #0b1120; --color-footer-bg: #0f172a; /* Navbar 深色毛玻璃 */ --color-nav-bg: rgba(15, 23, 42, 0.75); --color-nav-border: rgba(148, 163, 184, 0.25); /* 深色模式按鈕顏色（更明顯） */ --btn-primary-bg: #3b82f6; --btn-primary-hover: #60a5fa; --btn-primary-text: #ffffff; --btn-outline-bg: rgba(59, 130, 246, 0.15); --btn-outline-border: #60a5fa; --btn-outline-text: #60a5fa; --btn-outline-hover-bg: #3b82f6; --btn-outline-hover-text: #ffffff; --btn-danger-bg: rgba(239, 68, 68, 0.2); --btn-danger-text: #f87171; --btn-danger-hover-bg: rgba(239, 68, 68, 0.35); } /* === 3. body 基本字型 / 背景（Light 模式用） ============ */ body { margin: 0; font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif; color: var(--color-text-main); background-color: var(--color-bg); } /* === 4. 主內容外框 ==================================== */ .page-wrapper { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; position: relative; /* 原本不動，z-index: 1; 只要不是 portal/fixed 方案就不會有大問題 */ } /* === 5. Navbar（含毛玻璃與位置） ====================== */ .main-nav { background: var(--color-nav-bg); border-bottom: 1px solid var(--color-nav-border); position: sticky; top: 0; z-index: 9000; /* 提高 z-index */ backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); overflow: visible; /* 改成 visible，讓通知下拉選單不被裁掉 */ } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; position: relative; z-index: 2; /* 確保內容在星空上 */ background: transparent; /* 讓毛玻璃顏色來自 .main-nav */ } /* === 6. 左側品牌區（中文 + 英文） ==================== */ .nav-brand { text-decoration: none; color: var(--color-nav-text); display: flex; flex-direction: column; line-height: 1.15; } .brand-line-zh { font-size: 1.45rem; font-weight: 800; } .brand-line-en { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.05em; opacity: 0.9; } /* === 7. 右側主選單 ================================ */ .nav-links { display: flex; align-items: center; gap: 1.5rem; color: var(--color-text-muted); } .nav-link { text-decoration: none; font-size: 1.15rem; font-weight: 500; color: var(--color-text-muted); position: relative; padding-bottom: 0.2rem; } /* 底線 hover 動畫 */ .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: var(--color-primary); transition: width 0.2s ease; } .nav-link:hover, .nav-link:focus { color: var(--color-primary); } .nav-link:hover::after, .nav-link:focus::after { width: 100%; } /* === 8. 主題切換按鈕（右上角小月亮） ================= */ .theme-toggle { border-radius: 999px; border: 1px solid var(--color-border); padding: 0.2rem 0.65rem; background: rgba(255, 255, 255, 0.7); font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } /* Dark 模式下，切換鈕也變成深色小膠囊 */ :root[data-theme="dark"] .theme-toggle { background: rgba(15, 23, 42, 0.9); } .theme-toggle:hover { transform: translateY(-1px); border-color: var(--color-primary); } /* === 8.5. 使用者登入資訊區 ========================= */ .nav-user { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; } .nav-user-info { display: flex; align-items: center; gap: 0.5rem; } .nav-user-school { font-size: 0.8rem; color: var(--color-text-muted); background: rgba(59, 130, 246, 0.1); padding: 0.2rem 0.5rem; border-radius: 4px; white-space: nowrap; } :root[data-theme="dark"] .nav-user-school { background: rgba(56, 189, 248, 0.15); color: #93c5fd; } .nav-user-name { font-weight: 600; color: var(--color-nav-text); text-decoration: none; transition: color 0.2s ease; } .nav-user-name:hover { color: var(--color-primary); } .nav-link-logout { font-size: 0.85rem; padding: 0.25rem 0.75rem; background: rgba(239, 68, 68, 0.1); border-radius: 6px; color: #dc2626 !important; transition: background 0.2s ease; } .nav-link-logout:hover { background: rgba(239, 68, 68, 0.2); } :root[data-theme="dark"] .nav-link-logout { background: rgba(239, 68, 68, 0.15); color: #f87171 !important; } /* === 9. Footer 區塊 ================================ */ .site-footer { background: var(--color-footer-bg); border-top: 1px solid var(--color-border); margin-top: 3rem; padding: 2rem 1.5rem; } .site-footer .footer-inner { max-width: 1200px; margin: 0 auto; text-align: center; line-height: 1.6; font-size: 0.9rem; color: var(--color-text-muted); background: transparent; } /* === 10. RWD 簡易調整 =============================== */ @media (max-width: 768px) { .nav-inner, .page-wrapper, .site-footer { padding-left: 1rem; padding-right: 1rem; } } /* ========================================================= 10.5 全站按鈕深色模式修復 ========================================================= */ /* 主要按鈕 - Primary */ .btn-primary, .btn-submit, .btn-save, .btn-comment-submit { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; border: none !important; } .btn-primary:hover, .btn-submit:hover, .btn-save:hover, .btn-comment-submit:hover { background: var(--btn-primary-hover) !important; } /* 外框按鈕 - Outline */ .btn-outline, .og-btn-outline, .btn-outline-primary, .btn-outline-secondary { background: var(--btn-outline-bg) !important; border: 1.5px solid var(--btn-outline-border) !important; color: var(--btn-outline-text) !important; } .btn-outline:hover, .og-btn-outline:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover { background: var(--btn-outline-hover-bg) !important; color: var(--btn-outline-hover-text) !important; } /* 危險按鈕 - Danger */ .btn-danger, .og-btn-danger { background: var(--btn-danger-bg) !important; color: var(--btn-danger-text) !important; border: 1px solid var(--btn-danger-text) !important; } .btn-danger:hover, .og-btn-danger:hover { background: var(--btn-danger-hover-bg) !important; } /* 互動按鈕（讚、收藏、追蹤） */ :root[data-theme="dark"] .og-btn-interact { background: rgba(30, 41, 59, 0.9) !important; border: 1px solid rgba(71, 85, 105, 0.6) !important; color: #e2e8f0 !important; } :root[data-theme="dark"] .og-btn-interact:hover { background: rgba(51, 65, 85, 0.9) !important; border-color: #60a5fa !important; color: #60a5fa !important; } :root[data-theme="dark"] .og-btn-interact.is-active { background: rgba(59, 130, 246, 0.25) !important; border-color: #60a5fa !important; color: #60a5fa !important; } /* 複製按鈕 */ :root[data-theme="dark"] .og-copy { background: rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; border: 1px solid rgba(59, 130, 246, 0.4) !important; } :root[data-theme="dark"] .og-copy:hover { background: #3b82f6 !important; color: #fff !important; } /* 分頁連結 */ :root[data-theme="dark"] .page-link { background: rgba(30, 41, 59, 0.8) !important; border-color: rgba(71, 85, 105, 0.5) !important; color: #60a5fa !important; } :root[data-theme="dark"] .page-link:hover { background: #3b82f6 !important; color: #fff !important; } /* Tab 項目 */ :root[data-theme="dark"] .tab-item { color: #94a3b8 !important; } :root[data-theme="dark"] .tab-item:hover { background: rgba(51, 65, 85, 0.6) !important; color: #e2e8f0 !important; } :root[data-theme="dark"] .tab-item.active { background: #3b82f6 !important; color: #fff !important; } /* 載入更多按鈕 */ :root[data-theme="dark"] .btn-load-more { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid rgba(71, 85, 105, 0.5) !important; color: #e2e8f0 !important; } :root[data-theme="dark"] .btn-load-more:hover { background: rgba(51, 65, 85, 0.9) !important; border-color: #60a5fa !important; } /* 分享按鈕 */ :root[data-theme="dark"] .btn-copy-url { background: #3b82f6 !important; color: #fff !important; } /* 回到頂部按鈕 */ :root[data-theme="dark"] .og-back-to-top { background: rgba(30, 41, 59, 0.95) !important; border: 1px solid rgba(71, 85, 105, 0.5) !important; color: #e2e8f0 !important; } :root[data-theme="dark"] .og-back-to-top:hover { background: #3b82f6 !important; color: #fff !important; } /* 作者操作按鈕 */ :root[data-theme="dark"] .og-author-actions .og-btn-outline { background: rgba(30, 41, 59, 0.8) !important; } /* 追蹤按鈕 */ :root[data-theme="dark"] .btn-follow { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; } :root[data-theme="dark"] .btn-follow.is-following { background: transparent !important; border-color: #60a5fa !important; color: #60a5fa !important; } :root[data-theme="dark"] .btn-follow.is-following:hover { background: rgba(239, 68, 68, 0.15) !important; border-color: #f87171 !important; color: #f87171 !important; } /* ========================================================= 11. Dark 模式專屬：夜空背景 & 星星（銀河版） - body：星雲底 + 兩層星星（閃爍錯開） - navbar：超密集星空（兩層星星）+ 淡淡銀河星塵帶（斜向） ========================================================= */ /* ---------- 11-1. body 夜空底（星雲 + 深藍漸層） ---------- */ :root[data-theme="dark"] body { position: relative; overflow-x: hidden; background-color: #020617; background-image: radial-gradient(820px 560px at 18% 5%, rgba(56, 189, 248, 0.18) 0, transparent 62%), radial-gradient(980px 680px at 86% 12%, rgba(129, 140, 248, 0.16) 0, transparent 64%), linear-gradient(180deg, #020617 0%, #020617 45%, #020617 100%); background-repeat: no-repeat; background-attachment: fixed; } /* ---------- 11-2. body 星星第 1 層（亮、稍大、密） ---------- */ :root[data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; mix-blend-mode: screen; /* 這層負責「看得見的星星」 */ background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.92) 0, transparent 58%), radial-gradient(1.3px 1.3px at 72% 36%, rgba(226,232,240,0.88) 0, transparent 58%), radial-gradient(1.2px 1.2px at 35% 78%, rgba(191,219,254,0.85) 0, transparent 58%), radial-gradient(1.4px 1.4px at 52% 22%, rgba(248,250,252,0.90) 0, transparent 58%); /* ★ 不同尺寸 + 不同位移 → 破除規律格子感 */ background-size: 110px 110px, 130px 130px, 95px 95px, 150px 150px; background-position: 0 0, 23px 11px, -17px 29px, 41px -19px; background-repeat: repeat; opacity: 0.42; filter: blur(0.2px); animation: hceduTwinkleA 6.8s ease-in-out infinite alternate; } /* ---------- 11-3. body 星星第 2 層（細、碎、節奏不同） ---------- */ :root[data-theme="dark"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; mix-blend-mode: screen; /* 這層負責「星塵碎光」，用來讓畫面更自然 */ background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.45) 0, transparent 60%), radial-gradient(1px 1px at 82% 62%, rgba(191,219,254,0.42) 0, transparent 60%), radial-gradient(0.9px 0.9px at 55% 15%, rgba(248,250,252,0.40) 0, transparent 60%); background-size: 70px 70px, 88px 88px, 76px 76px; background-position: 9px 17px, -21px 5px, 31px -13px; background-repeat: repeat; opacity: 0.22; filter: blur(0.35px); animation: hceduTwinkleB 9.6s ease-in-out infinite alternate; } /* ---------- 11-4. 讓內容層永遠在星空上（避免「下面又不見」） ---------- */ :root[data-theme="dark"] header { position: relative; z-index: 12000; /* ★ header 提到最上層，通知下拉才不會被 page 內容蓋住 */ } :root[data-theme="dark"] .page-wrapper, :root[data-theme="dark"] .site-footer { position: relative; z-index: 1; /* 仍然要 > 星空 (z=0) */ } /* footer 若有實心背景會蓋星星 → 改半透明面板 */ :root[data-theme="dark"] .site-footer { background: rgba(15, 23, 42, 0.70); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ========================================================= 11-5. Navbar：超密集星空 + 銀河星塵帶（斜向） ========================================================= */ /* main-nav 本身是 sticky，仍然可以當定位容器 */ :root[data-theme="dark"] .main-nav { overflow: visible; /* ★ 改成 visible，讓通知下拉選單不被裁掉 */ } /* nav 內容永遠在最上 */ :root[data-theme="dark"] .nav-inner { position: relative; z-index: 2; } /* Navbar 星空層（兩層星星 + 一層銀河帶） */ :root[data-theme="dark"] .main-nav::before, :root[data-theme="dark"] .main-nav::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: screen; } /* 第 1 層：非常密、亮（主星群） */ :root[data-theme="dark"] .main-nav::before { background-image: radial-gradient(1.6px 1.6px at 10% 20%, rgba(255,255,255,0.98) 0, transparent 58%), radial-gradient(1.4px 1.4px at 60% 35%, rgba(231,242,255,0.92) 0, transparent 58%), radial-gradient(1.2px 1.2px at 30% 80%, rgba(248,250,252,0.92) 0, transparent 58%); /* ★ 小尺寸 + 位移 → 超密且不規律 */ background-size: 52px 52px, 67px 67px, 79px 79px; background-position: 0 0, 19px 11px, -13px 23px; background-repeat: repeat; opacity: 0.95; filter: blur(0.12px); animation: hceduNavTwinkleA 4.3s ease-in-out infinite alternate; } /* 第 2 層：更碎的星塵 + 銀河帶（斜向大光帶） */ :root[data-theme="dark"] .main-nav::after { background-image: /* 星塵碎光（小顆、很密） */ radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.58) 0, transparent 60%), radial-gradient(1px 1px at 80% 60%, rgba(191,219,254,0.52) 0, transparent 60%), radial-gradient(0.9px 0.9px at 55% 15%, rgba(248,250,252,0.48) 0, transparent 60%), /* ★ 銀河帶：斜向淡淡星塵光暈（重點！） */ linear-gradient(115deg, rgba(255,255,255,0.00) 0%, rgba(180,210,255,0.08) 18%, rgba(255,255,255,0.12) 34%, rgba(160,230,255,0.10) 46%, rgba(255,255,255,0.06) 62%, rgba(255,255,255,0.00) 80% ); /* 前三層 repeat 的星塵 */ background-size: 44px 44px, 62px 62px, 54px 54px, 100% 100%; background-position: 9px 17px, -21px 5px, 31px -13px, center; background-repeat: repeat, repeat, repeat, no-repeat; opacity: 0.70; filter: blur(0.35px); animation: hceduNavTwinkleB 6.9s ease-in-out infinite alternate; } /* ========================================================= 11-6. 閃爍動畫（錯開頻率） ========================================================= */ @keyframes hceduTwinkleA { 0% { opacity: 0.30; } 45% { opacity: 0.52; } 100% { opacity: 0.38; } } @keyframes hceduTwinkleB { 0% { opacity: 0.14; } 40% { opacity: 0.28; } 100% { opacity: 0.20; } } @keyframes hceduNavTwinkleA { 0% { opacity: 0.70; } 50% { opacity: 1.00; } 100% { opacity: 0.82; } } @keyframes hceduNavTwinkleB { 0% { opacity: 0.40; } 35% { opacity: 0.72; } 100% { opacity: 0.52; } } /* ✅ 修正：深色模式 nav-inner 不要蓋住 main-nav 的星空圖層 */ :root[data-theme="dark"] .nav-inner { background: transparent !important; } /* ✅ 讓 navbar 永遠在全站最上層（直接壓過所有內容/特效層） */ .main-nav { z-index: 999999 !important; } /* ✅ navbar 星空層不要蓋到互動（避免蓋住鈴鐺/下拉） */ :root[data-theme="dark"] .main-nav::before, :root[data-theme="dark"] .main-nav::after { z-index: 0 !important; } /* ✅ nav 內容層一定在星空之上 */ .nav-inner { z-index: 2 !important; }