/* ═══════════════════════════════════════════════════════════ * WiFiFlow Dashboard 樣式表 * ═══════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── * 1. 全域變數 & 色票 * ───────────────────────────────────────────── */ :root { /* 基本色票(淺色版,Phase 3 保留) */ --bg: #F1EEE7; --surface: #FFFFFF; --surface-2: #FAF8F3; --ink: #131313; --ink-2: #3F3F3F; --muted: #8A8A85; --line: #ECE8DE; /* 薄荷綠系 */ --mint: #CFECD9; --mint-strong: #7FC99A; --mint-l1: #E4EFDE; --mint-l2: #B5DEC4; --mint-l3: #7FC99A; --mint-l4: #3C7F58; /* 其他彩色 */ --coral: #F6CFCB; --coral-strong: #E89B94; --sand: #F3E2C7; --sand-strong: #D9B877; --sky: #CDE4F5; --sky-strong: #7FB1DC; --rain-blue: #4A90E2; --lilac: #E3DCF2; --lilac-strong: #9B89C9; /* Phase 3:accent 變數(語意色,雙主題共用) */ --accent-green: #22C55E; --accent-amber: #F59E0B; --accent-red: #EF4444; --accent-blue: #3B82F6; --accent-cyan: #06B6D4; --accent-magenta: #D946EF; /* Phase 3B:語意化雙主題變數 * 淺色版填回原本的寫死值 → 視覺 100% 不變 * 深色版會在下方 [data-theme="dark"] 蓋掉 */ --ink-inverse: #ffffff; /* 在 var(--ink) 區塊上的對比文字 */ --card-shadow: 0 1px 0 rgba(20,20,20,0.02), 0 12px 32px -18px rgba(20,20,20,0.12); /* .card / .hero-flow-card 共用 */ --card-tint: #FAFAF5; /* 卡片上一階淺色(hero-kpi-side / hero-flow-card 漸層底) */ --card-tint-2: #F1EEE7; /* 兩階(flow-canvas 漸層底,= 原本 --bg) */ --overlay-glass: rgba(255,255,255,0.7); /* 玻璃感 pill */ --btn-primary-bg: var(--ink); /* CTA 主按鈕背景 */ --btn-primary-fg: #ffffff; /* CTA 主按鈕文字 */ --slider-accent: #131313; /* range input accent-color */ --hero-num-color: var(--ink); /* hero 大數字文字色 */ /* 提醒/標籤的 bg + text 變體 */ --accent-mint-bg: var(--mint); --accent-mint-text: #2f6b44; --accent-lilac-bg: var(--lilac); --accent-lilac-text: #4b3f73; --accent-green-text: #3B6D11; /* hero「今日累積」標題色 */ --accent-amber-text: #854F0B; /* hero「平均停留」標題色 */ /* Phase 3I (P1+P2):「熱度」配色家族 — 同時供 .flow-zone / .flow-dot / * .legend-dot / .timeline-bar-item 用。淺色版填回 Phase 2B 原本寫死值 * (#E24B4A / #EF9F27 / #639922),視覺零變動;深色版下方 [data-theme="dark"] * 換成更螢光的版本,跟 Phase 3E 點群配色一致。 * *-rgb 給 rgba() 用(熱區光暈漸層的透明度需要可調) */ --heat-hot: #E24B4A; --heat-warm: #EF9F27; --heat-cool: #639922; --heat-hot-rgb: 226, 75, 74; --heat-warm-rgb: 239, 159, 39; --heat-cool-rgb: 99, 153, 34; } /* Phase 3:深色主題覆寫(只在時生效) */ [data-theme="dark"] { /* 2026-05 readability tweak: - bg 從純黑 #0a0b0d → #0F1116(less harsh,跟 surface 對比降低,長時間看不刺眼) - surface / surface-2 兩階差距加大 → 卡片層次清楚(原本 #131519 / #1a1d22 才差 7,現在差 13) - muted 從 #9094A0 → #A8ADBA(次級文字 contrast 從 4.5 提到 6.4,KPI 副標 / 表頭明顯易讀) - line 從 #25282e → #2E3239(border 從幾乎隱形變成可見,卡片邊界清楚) */ --bg: #0F1116; --surface: #1A1D22; --surface-2: #22262D; --ink: #E8EAEE; --ink-2: #C8CCD3; --muted: #A8ADBA; --line: #2E3239; /* 深色版 accent 偏螢光,讓在黑底上更有 OPS 儀表感 */ --accent-green: #1BD17E; --accent-amber: #F5A524; --accent-red: #F04438; --accent-blue: #3B9DFF; --accent-cyan: #22D3EE; --accent-magenta: #E879F9; /* Phase 3B:深色語意化變數 */ --ink-inverse: #0F1116; /* 在亮 ink 上用近黑文字 */ --card-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 12px 32px -10px rgba(0,0,0,0.45); --card-tint: #22262D; /* = surface-2,當作上一階(跟著 bump) */ --card-tint-2: #14161B; /* 比 bg 略深一點,當作漸層另一端 */ --overlay-glass: rgba(26,30,36,0.72); /* 暗色玻璃 */ --btn-primary-bg: var(--accent-blue); /* 暗底用螢光藍 CTA 對比比白底 ink 更搶眼 */ --btn-primary-fg: #ffffff; --slider-accent: var(--accent-blue); --hero-num-color: #F4F5F6; /* 微微偏冷白,大數字上深色背景更乾淨 */ --accent-mint-bg: rgba(27,209,126,0.16); --accent-mint-text: var(--accent-green); --accent-lilac-bg: rgba(232,121,249,0.16); --accent-lilac-text: var(--accent-magenta); --accent-green-text: var(--accent-green); --accent-amber-text: var(--accent-amber); /* Phase 3I (P1+P2):深色版熱度配色 — 螢光紅 / 螢光橘 / 螢光綠 * 跟 Phase 3E 已寫死的點群顏色完全一致(現在統一從這裡走), * 時間軸色條、平面圖點群、圖例 dot 共用同一組數值 */ --heat-hot: #FF4D6D; --heat-warm: #FFB020; --heat-cool: #1BD17E; --heat-hot-rgb: 255, 77, 109; --heat-warm-rgb: 255, 176, 32; --heat-cool-rgb: 27, 209, 126; } /* ───────────────────────────────────────────── * 2. 基本元素 * ───────────────────────────────────────────── */ html, body { font-family: 'Plus Jakarta Sans', 'Noto Sans TC', system-ui, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } .mono { font-family: 'JetBrains Mono', monospace; } /* ───────────────────────────────────────────── * 3. 卡片 & 容器 * ───────────────────────────────────────────── */ .card { background: var(--surface); border-radius: 22px; box-shadow: var(--card-shadow); } .soft-card { background: var(--surface-2); border-radius: 18px; } .kpi-big { background: var(--ink); color: var(--ink-inverse); /* dark mode: ink 變淺 → 文字要跟著反相 */ border-radius: 22px; padding: 28px; position: relative; overflow: hidden; } .kpi-big .wifi-bg { position: absolute; right: -30px; top: -30px; opacity: .06; } .kpi-mega { background: var(--surface); border-radius: 22px; padding: 24px; box-shadow: var(--card-shadow); position: relative; overflow: hidden; } .kpi-mega .bg-accent { position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 999px; opacity: .35; } /* ───────────────────────────────────────────── * 4. 導航 & 選單 * ───────────────────────────────────────────── */ .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; color: #6F6F6A; font-weight: 500; font-size: 14px; transition: all .2s ease; cursor: pointer; } .nav-item:hover { background: #F5F2EA; color: var(--ink); } .nav-item.active { background: var(--ink); color: var(--ink-inverse); } .breadcrumb { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; font-size: 14px; color: var(--muted); font-weight: 500; } .breadcrumb b { color: var(--ink); font-weight: 700; } /* ───────────────────────────────────────────── * 5. 小元件 (chip、pill、dot) * ───────────────────────────────────────────── */ .chip-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; } /* 營業時段 pill:掛在頁面標題旁,標示「09:00-21:00 進行中/已結束」 */ .biz-hours-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; background: rgba(59,130,246,0.10); border: 1px solid rgba(59,130,246,0.30); color: var(--accent-blue); white-space: nowrap; } .biz-hours-pill .biz-pip { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-blue); box-shadow: 0 0 6px var(--accent-blue); } .biz-hours-pill.is-closed { background: rgba(120,120,120,0.10); border-color: rgba(120,120,120,0.30); color: var(--muted); } .biz-hours-pill.is-closed .biz-pip { background: var(--muted); box-shadow: none; } /* Delta indicator */ .delta-up { color: #2f8b55; background: #E4EFDE; } .delta-down { color: #9c3c36; background: #FBE4E2; } .delta-flat { color: var(--muted); background: var(--bg); } /* Live pulse dot */ .live-dot { width: 8px; height: 8px; border-radius: 999px; background: #22c55e; position: relative; } .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; background: rgba(34,197,94,0.35); animation: pulse 1.8s ease-out infinite; } @keyframes pulse { 0% { transform: scale(0.6); opacity: .8; } 80%, 100% { transform: scale(1.8); opacity: 0; } } /* ───────────────────────────────────────────── * 6. Tab * ───────────────────────────────────────────── */ .tab { padding: 8px 2px; font-size: 14px; color: var(--muted); font-weight: 500; cursor: pointer; position: relative; } .tab.active { color: var(--ink); font-weight: 700; } .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--ink); border-radius: 2px; } /* ───────────────────────────────────────────── * 7. 表單元件 * ───────────────────────────────────────────── */ .toggle { width: 36px; height: 20px; background: var(--ink); border-radius: 999px; position: relative; cursor: pointer; } .toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 999px; } .form-group label { display: block; font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; } .select-mock { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .select-mock:hover { border-color: var(--ink); } /* ───────────────────────────────────────────── * 8. 特殊視覺元件 * ───────────────────────────────────────────── */ /* 熱力圖 7x12(09:00–21:00 營業窗) * 每個 row = [日期 label] + [.heat-7x24 12 格] 並排,結構性對齊, * 不再依賴外層兩欄 flex stretch 算出來的高度匹配(會在 mobile 飄掉)。 */ .heat-row { display: flex; align-items: center; gap: 8px; } .heat-row-label { flex-shrink: 0; width: 44px; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--muted); line-height: 1; } .heat-7x24 { flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; min-width: 0; /* flex item 內 grid 才不會撐爆 */ } .heat-7x24 div { aspect-ratio: 2 / 1; /* 12 格佔滿寬,寬高 2:1 才不會太巨 */ border-radius: 3px; } /* X 軸時刻 label 對齊 cells 起點:label 寬 44 + gap 8 = 52px */ .heat-x-axis { padding-left: 52px; } /* 手機更窄 label / 更小字 */ @media (max-width: 480px) { .heat-row-label { width: 36px; font-size: 12px; } .heat-row { gap: 6px; } .heat-x-axis { padding-left: 42px; } } /* 停留時間環形圖(薄荷色漸層) */ .donut-xl-gradient { width: 260px; aspect-ratio: 1; border-radius: 999px; background: conic-gradient( var(--mint-l1) 0 35%, var(--mint-l2) 35% 63%, var(--mint-l3) 63% 85%, var(--mint-l4) 85% 100% ); position: relative; } .donut-xl-gradient::before { content: ""; position: absolute; inset: 44px; border-radius: 999px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.06) inset; } /* 側邊裝飾球 */ .decor-blob-1 { position: absolute; width: 180px; height: 180px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #DDEAD4, #CFECD9 60%, transparent 70%); filter: blur(2px); right: -40px; bottom: -40px; opacity: .8; z-index: 0; } /* 天氣圖示 */ .weather-icon { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; } /* Info icon with popover */ .info-icon { width: 16px; height: 16px; border-radius: 999px; background: var(--ink-2); /* 黑底,對比強,不會跟卡片淺底融合 */ color: var(--ink-inverse); /* dark mode 反相,避免「淺底淺字」 */ display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; cursor: help; position: relative; vertical-align: middle; line-height: 1; margin-left: 4px; /* 跟標題文字保持距離 */ flex-shrink: 0; /* 在 flex 容器內不被壓縮 */ } .info-icon:hover { background: var(--ink); } /* ───────────────────────────────────────────── * Loading skeleton — KPI 卡 / 大數字資料還沒進來時用,避免「0 跳到真實值」感 * 用法:HTML 上加 .is-loading class,JS 拿到資料後 classList.remove('is-loading') * 文字本身會被透明化,背景跑微弱 shimmer,看得出「正在載入」 * ───────────────────────────────────────────── */ .is-loading { position: relative; color: transparent !important; background: linear-gradient( 90deg, var(--surface-2) 0%, var(--line) 50%, var(--surface-2) 100% ); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 6px; user-select: none; } .is-loading::before, .is-loading::after { color: transparent !important; } /* 不漏 unit / 子元素文字 */ @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } [data-theme="dark"] .is-loading { background: linear-gradient( 90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100% ); background-size: 200% 100%; } .info-icon .popover { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--ink-inverse); /* popover bg 在 dark mode 是淺色,文字要反相 */ padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; /* 短句保持單行(width:max-content),長句撞到 max-width 才換行; max-width 隨 viewport 收斂,避免 RWD 窄寬時跑出畫面 */ white-space: normal; width: max-content; max-width: min(240px, calc(100vw - 32px)); line-height: 1.45; text-align: center; opacity: 0; pointer-events: none; transition: opacity .15s; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.3); z-index: 10; } .info-icon .popover::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); } .info-icon:hover .popover { opacity: 1; } /* 訊號強度(電量條狀) */ .signal-bars { display: inline-flex; align-items: flex-end; gap: 2px; } .signal-bars span { display: block; width: 3px; background: var(--line); border-radius: 1px; } .signal-bars span:nth-child(1) { height: 4px; } .signal-bars span:nth-child(2) { height: 7px; } .signal-bars span:nth-child(3) { height: 10px; } .signal-bars span:nth-child(4) { height: 13px; } .signal-bars.b4 span:nth-child(-n+4) { background: var(--mint-strong); } .signal-bars.b3 span:nth-child(-n+3) { background: var(--mint-strong); } .signal-bars.b2 span:nth-child(-n+2) { background: var(--sand-strong); } .signal-bars.b1 span:nth-child(-n+1) { background: var(--coral-strong); } /* WiFi 覆蓋範圍脈動 */ @keyframes ringPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.1; } } .wifi-coverage-ring { animation: ringPulse 3s ease-in-out infinite; } /* ───────────────────────────────────────────── * 9. 頁面切換動畫 * ───────────────────────────────────────────── */ .page { display: none; animation: fadeIn .3s ease; } .page.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ───────────────────────────────────────────── * Phase 1 bug-fix:HTML5 [hidden] 屬性 vs Tailwind .flex 同 specificity * .flex 後載入 → 把 [hidden] 蓋掉 → setAttribute('hidden') 失效 * 全域加 !important 讓 hidden 屬性能正常隱藏帶 .flex 的元素 * ───────────────────────────────────────────── */ [hidden] { display: none !important; } /* ═══════════════════════════════════════════════════════════ * Phase 3A:頂部 tab bar + 隱藏左側 sidebar * - 原 .sidebar (給了 .app-sidebar 標記) 整個 hidden,DOM 保留方便復原 * - .app-main 改占 12 欄 * - 頂部新加一條 .topbar 統一導覽 * ═══════════════════════════════════════════════════════════ */ .app-sidebar { display: none !important; } .app-main { grid-column: 1 / -1 !important; } .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); } .topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: 0.02em; white-space: nowrap; } .topbar .brand .brand-icon { color: var(--accent-blue); flex-shrink: 0; width: 24px; height: 24px; object-fit: contain; display: block; } .topbar .brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); animation: pulse 1.8s ease-in-out infinite; } /* ───────────────────────────────────────────── * location-switcher:topbar 上的場域 dropdown(取代舊 .floor-switcher segmented) * 結構: * .location-switcher * .location-btn (顯示「文化大學 / 303 教室 ▾」) * .location-menu (展開的選項列表) * ───────────────────────────────────────────── */ .location-switcher { position: relative; display: inline-flex; } .location-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 6px 12px; font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } .location-btn:hover { background: var(--surface-2); color: var(--ink); } .location-switcher.open .location-btn { background: var(--surface-2); border-color: var(--line); color: var(--ink); } .location-btn .location-school { color: var(--muted); font-weight: 500; } .location-btn .location-sep { color: var(--muted); opacity: 0.5; } .location-btn .location-label { color: var(--ink); font-weight: 700; } .location-btn .location-caret { color: var(--muted); transition: transform 0.18s ease; } .location-switcher.open .location-btn .location-caret { transform: rotate(180deg); } .location-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.18); z-index: 50; } [data-theme="dark"] .location-menu { box-shadow: 0 16px 40px -8px rgba(0,0,0,0.6); } .location-menu li { list-style: none; } .location-option { width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--ink-2); font: inherit; transition: background 0.12s, border-color 0.12s; } .location-option:hover { background: var(--surface-2); color: var(--ink); } .location-option.active { background: var(--surface-2); border-color: var(--accent-blue); color: var(--ink); } .location-option .opt-title { font-size: 14px; font-weight: 700; } .location-option .opt-meta { font-size: 14px; color: var(--muted); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; } /* ───────────────────────────────────────────── * topbar 日期下拉(新):.topbar-date / .topbar-date-btn / .topbar-date-popup * 樣式跟 .date-btn / .date-popup 對齊,但定位在 topbar 內部,popup 改 right:0 * ───────────────────────────────────────────── */ .topbar-date { position: relative; display: inline-flex; } .topbar-date-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; color: var(--ink); font-family: 'JetBrains Mono', monospace; cursor: pointer; transition: border-color 0.15s, background 0.15s; white-space: nowrap; } .topbar-date-btn:hover { border-color: var(--ink-2); background: var(--surface-2); } .topbar-date.open .topbar-date-btn { border-color: var(--ink); } .topbar-date-btn svg:first-of-type { color: var(--muted); flex-shrink: 0; } .topbar-date-btn svg:last-of-type { color: var(--muted); transition: transform 0.18s ease; } .topbar-date.open .topbar-date-btn svg:last-of-type { transform: rotate(180deg); } .topbar-date-popup { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); z-index: 60; max-height: 460px; overflow-y: auto; } [data-theme="dark"] .topbar-date-popup { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65); } /* ───────────────────────────────────────────── * sub-tab-bar:第 2 列 6 個 tab(總覽 / 停留分析 / 天氣 / AI / 設備 / 支援) * sticky 跟在 .topbar 下方;裡面用 .top-tab(共用 topbar 樣式) * 過寬時(超過視窗)允許橫向捲動,避免擠斷行 * ───────────────────────────────────────────── */ .sub-tab-bar { position: sticky; top: 56px; /* topbar 高度 */ z-index: 35; background: var(--surface); border-bottom: 1px solid var(--line); } .sub-tab-bar-inner { display: flex; align-items: center; gap: 4px; padding: 6px 24px; overflow-x: auto; scrollbar-width: none; } .sub-tab-bar-inner::-webkit-scrollbar { display: none; } .sub-tab-bar-inner .top-tab { font-size: 14px; padding: 8px 16px; border-radius: 8px; } .sub-tab-bar-inner .top-tab.active { background: var(--ink); color: var(--ink-inverse); font-weight: 700; } [data-theme="dark"] .sub-tab-bar-inner .top-tab.active { background: var(--surface-2); color: var(--ink); } /* ───────────────────────────────────────────── * signal-notice-bar:全域訊號精度說明 * 跟在 sub-tab-bar 下方,所有 tab 共用一個。 * 用 sand 色系做柔和警示,跟 fallbackBanner 同色階但稍淡 * ───────────────────────────────────────────── */ .signal-notice-bar { background: linear-gradient(90deg, var(--sand) 0%, #FAEFD9 100%); border-bottom: 1px solid var(--sand-strong); color: #7a4e1a; } .signal-notice-inner { max-width: 1440px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; } .signal-notice-ico { flex-shrink: 0; } .signal-notice-text { font-weight: 500; } .signal-notice-text b { font-weight: 700; } [data-theme="dark"] .signal-notice-bar { background: linear-gradient(90deg, rgba(217, 184, 119, 0.18) 0%, rgba(243, 226, 199, 0.10) 100%); border-bottom-color: rgba(217, 184, 119, 0.35); color: #E8C892; } @media (max-width: 768px) { .signal-notice-inner { padding: 7px 14px; font-size: 12px; line-height: 1.35; align-items: flex-start; } .signal-notice-ico { margin-top: 1px; } } .top-tabs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; } .top-tab { background: transparent; border: none; color: var(--muted); font: inherit; font-weight: 500; font-size: 14px; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .top-tab:hover { color: var(--ink); background: var(--surface-2); } .top-tab.active { color: var(--ink); background: var(--surface-2); font-weight: 700; } [data-theme="dark"] .top-tab.active { background: var(--bg); color: var(--ink); } .top-tab-dropdown { position: relative; margin-left: 4px; } .top-tab-dropdown > button { background: transparent; border: none; color: var(--muted); font: inherit; font-weight: 500; font-size: 14px; padding: 8px 14px; border-radius: 8px; cursor: pointer; } .top-tab-dropdown > button:hover { color: var(--ink); background: var(--surface-2); } .top-tab-dropdown ul { position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px; list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px -10px rgba(0,0,0,0.18); display: none; z-index: 50; } .top-tab-dropdown:hover ul, .top-tab-dropdown:focus-within ul { display: block; } .top-tab-dropdown li { padding: 8px 12px; font-size: 14px; color: var(--ink-2); border-radius: 6px; cursor: pointer; } .top-tab-dropdown li:hover { background: var(--surface-2); color: var(--ink); } .topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 14px; color: var(--muted); font-family: 'JetBrains Mono', monospace; white-space: nowrap; } /* topbar 上的 1F / 303 切換 — segmented control,跟 reference 樣式一致 */ .floor-switcher { display: inline-flex; background: var(--surface-2); padding: 3px; border-radius: 8px; border: 1px solid var(--line); gap: 2px; } .floor-btn { background: transparent; border: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .floor-btn:hover { color: var(--ink); } .floor-btn.active { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,0.04); } [data-theme="dark"] .floor-btn.active { background: var(--bg); } .topbar-right .topbar-site b { color: var(--ink); font-weight: 600; } .topbar-right .topbar-clock { color: var(--ink); font-variant-numeric: tabular-nums; } /* 2026-05 大改版:頭像 dropdown(.account-menu)取代純 icon 帳號鈕 * 結構: * .account-menu(wrap,position:relative) * button.account-menu-trigger(34x34 圓鈕,顯示首字母) * div.account-menu-popup(absolute,240px 寬下拉) * hover 預覽 + click 鎖定;mobile (≤768px) 隱藏走 drawer */ .account-menu { position: relative; display: inline-flex; } .topbar-account-btn { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; padding: 0; transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s; } .topbar-account-btn:hover, .account-menu.open .topbar-account-btn { color: var(--ink); border-color: var(--ink); background: var(--surface-2); } .topbar-account-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } .topbar-account-btn svg { display: block; } [data-theme="dark"] .topbar-account-btn { background: var(--surface-2); } /* 統一頭像配色 — mint gradient + 白字 * 兩處(topbar 觸發鈕 + popup 頂部)用同一支 .av-circle mixin 風格,看起來一致 * 中文字(訪/王)直接顯示,英數字會被 JS 轉大寫(R/W) */ .account-menu-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--mint-l3) 0%, var(--mint-l4) 100%); letter-spacing: 0; line-height: 1; } [data-theme="dark"] .account-menu-avatar { background: linear-gradient(135deg, var(--mint-strong) 0%, var(--mint-l4) 100%); } /* popup */ .account-menu-popup { position: absolute; top: calc(100% + 8px); right: 0; width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.20); padding: 6px; z-index: 60; font-size: 14px; color: var(--ink); } [data-theme="dark"] .account-menu-popup { box-shadow: 0 16px 40px -8px rgba(0,0,0,0.65); } .am-header { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px; background: linear-gradient(135deg, rgba(127,201,154,0.18) 0%, rgba(127,201,154,0.06) 100%); border-radius: 10px; margin-bottom: 4px; } [data-theme="dark"] .am-header { background: linear-gradient(135deg, rgba(27,209,126,0.14) 0%, rgba(27,209,126,0.05) 100%); } .am-header-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--mint-l3) 0%, var(--mint-l4) 100%); flex-shrink: 0; line-height: 1; } [data-theme="dark"] .am-header-avatar { background: linear-gradient(135deg, var(--mint-strong) 0%, var(--mint-l4) 100%); } .am-header-info { flex: 1; min-width: 0; } .am-header-name { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.2; } .am-header-email { font-size: 14px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .am-header-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; background: rgba(245,158,11,0.20); color: var(--accent-amber); font-size: 14px; font-weight: 700; flex-shrink: 0; } .am-section { display: flex; flex-direction: column; } .am-divider { height: 1px; background: var(--line); margin: 4px 4px; } .am-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: transparent; border: none; font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer; text-align: left; transition: background 0.12s, color 0.12s; width: 100%; } .am-row:hover { background: var(--surface-2); color: var(--ink); } .am-row.danger { color: var(--accent-red); } .am-row.danger:hover { background: rgba(239,68,68,0.10); color: var(--accent-red); } .am-row-icon { color: var(--muted); flex-shrink: 0; } .am-row:hover .am-row-icon { color: var(--ink-2); } .am-row.danger .am-row-icon { color: var(--accent-red); } .am-row-label { flex: 1; font-weight: 600; } .am-row-meta { font-size: 14px; color: var(--muted); font-family: 'JetBrains Mono', monospace; } .am-row-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent-red); color: #fff; font-size: 14px; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .theme-toggle { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background 0.15s, border-color 0.15s, color 0.15s; } .theme-toggle:hover { border-color: var(--ink); background: var(--surface-2); } .theme-toggle:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } .theme-toggle svg { display: block; } /* Phase 3H:依目前主題顯示對應圖示 */ [data-theme="light"] .theme-toggle .theme-icon-sun { display: none; } [data-theme="light"] .theme-toggle .theme-icon-moon { display: block; } [data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; color: var(--accent-amber); } /* ───────────────────────────────────────────── * 通知中心 (小鈴鐺按鈕、彈出清單與 Toast) * ───────────────────────────────────────────── */ .notification-menu { position: relative; display: inline-flex; } .notification-toggle { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; } .notification-toggle:hover { border-color: var(--ink); background: var(--surface-2); } .notification-toggle:active { transform: scale(0.96); } .notification-toggle:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } .notification-toggle svg { display: block; } .notification-dot { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--accent-red); color: #fff; font-size: 10px; font-weight: 800; font-family: 'JetBrains Mono', monospace; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4); animation: notifyPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes notifyPop { from { transform: scale(0); } to { transform: scale(1); } } .notification-popup { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.22); padding: 0; z-index: 60; font-size: 14px; color: var(--ink); overflow: hidden; animation: fadeInDown 0.18s ease-out; } [data-theme="dark"] .notification-popup { box-shadow: 0 16px 40px -8px rgba(0,0,0,0.7); } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .np-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; box-sizing: border-box; background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; color: var(--ink); } .np-header-actions { display: flex; gap: 10px; align-items: center; } .np-action-btn { font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; font-weight: 500; } .np-action-btn:hover { color: var(--ink); text-decoration: underline; } .np-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; overflow-x: hidden; } .np-item { padding: 12px 14px; box-sizing: border-box; width: 100%; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; transition: background 0.15s; text-decoration: none; color: inherit; } .np-item:last-child { border-bottom: none; } .np-item:hover { background: var(--surface-2); } .np-item.unread { background: rgba(59, 130, 246, 0.04); } [data-theme="dark"] .np-item.unread { background: rgba(59, 130, 246, 0.08); } .np-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 14px; } .np-icon.crowd { background: rgba(239, 68, 68, 0.12); color: var(--accent-red); } .np-icon.offline { background: rgba(245, 158, 11, 0.12); color: var(--accent-amber); } .np-icon.ai { background: rgba(16, 185, 129, 0.12); color: var(--accent-green); } .np-content { flex: 1; min-width: 0; } .np-title-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; } .np-title { font-weight: 700; font-size: 13px; color: var(--ink); } .np-time { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; } .np-desc { font-size: 13px; color: var(--muted); line-height: 1.4; word-break: break-word; white-space: normal; } .np-empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 500; } /* 浮動通知 Toast */ .notify-toast-container { position: fixed; top: 72px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .notify-toast { width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.25); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; pointer-events: auto; overflow: hidden; position: relative; animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } [data-theme="dark"] .notify-toast { box-shadow: 0 12px 32px -8px rgba(0,0,0,0.75); } .notify-toast.hide { animation: toastSlideOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(100%) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toastSlideOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(100%) scale(0.95); } } .notify-toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--accent-blue); width: 100%; animation: toastProgress 5s linear forwards; } @keyframes toastProgress { from { width: 100%; } to { width: 0%; } } /* ───────────────────────────────────────────── * RWD topbar: * ≥ 1024px(desktop) — 全部展開,hamburger 隱藏 * 768-1024px(tablet) — 收 .top-tabs,顯示 hamburger;右邊保留 floor / account / clock / theme * < 768px(mobile) — 連 floor-switcher / account 也收進 drawer,只剩 hamburger / brand / clock / theme * Drawer 從右側滑入,backdrop 半透黑遮蓋 * ───────────────────────────────────────────── */ /* Hamburger button (default hidden on desktop) */ .topbar-burger { display: none; background: transparent; border: 1px solid var(--line); border-radius: 10px; width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; flex-shrink: 0; transition: border-color 0.15s, background 0.15s; } .topbar-burger:hover { border-color: var(--ink); background: var(--surface-2); } /* Tablet: ≤ 900px — 把 sub-tab-bar 收掉,改用 hamburger + drawer sub-tab-bar 本身有 overflow-x:auto,900-1100 之間自然橫向 scroll,不額外處理 */ @media (max-width: 900px) { .topbar { gap: 10px; padding: 0 14px; } .topbar-burger { display: inline-flex; } .sub-tab-bar { display: none; } /* tablet 把 location dropdown 文字壓縮一些 */ .location-btn .location-school, .location-btn .location-sep { display: none; } } /* Mobile: ≤ 768px — 連 location / account 都收;date 改塞進 drawer 只剩 hamburger + brand + clock + theme 留在 topbar */ @media (max-width: 768px) { .topbar .brand span { font-size: 14px; } .topbar-right .floor-switcher, .location-switcher, .topbar-right .topbar-date, .account-menu, .topbar-account-btn { display: none; } .topbar-right { gap: 8px; } .topbar-right .topbar-clock { font-size: 14px; } /* 行動版 sub-tab-bar 完全藏起來,走 drawer */ .sub-tab-bar { display: none; } } /* Drawer 內塞 .topbar-date 時:button 撐滿寬,popup 改 inline / 滿版, 不再 absolute,讓它直接展開推下面 nav,符合 mobile 抽屜直覺 */ .topbar-drawer__panel .topbar-date { display: block; position: relative; width: 100%; } .topbar-drawer__panel .topbar-date-btn { width: 100%; justify-content: space-between; } .topbar-drawer__panel .topbar-date-popup { position: relative; top: auto; right: auto; left: auto; width: 100%; max-width: 100%; margin-top: 8px; box-shadow: none; max-height: none; } /* hover-open 對 touch 不友善:改用 hover 媒體查詢只在「真有 hover 能力」的 device 開啟 */ @media (hover: none) { .account-menu { /* hover 失效時純 click */ } } /* ───── Drawer ───── */ .topbar-drawer { position: fixed; inset: 0; z-index: 100; /* 預設 hidden 由 [hidden] attr 控,此處不額外 display:none(避免 transition 沒生效) */ } .topbar-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); opacity: 0; transition: opacity 0.22s ease; } .topbar-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 32px -8px rgba(0,0,0,0.18); display: flex; flex-direction: column; padding: 18px 18px 24px; gap: 16px; transform: translateX(100%); transition: transform 0.24s ease; overflow-y: auto; } .topbar-drawer.open .topbar-drawer__backdrop { opacity: 1; } .topbar-drawer.open .topbar-drawer__panel { transform: translateX(0); } .topbar-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .topbar-drawer__close { background: transparent; border: 1px solid var(--line); border-radius: 10px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; transition: border-color 0.15s; } .topbar-drawer__close:hover { border-color: var(--ink); } .topbar-drawer__section { display: flex; flex-direction: column; gap: 8px; } .topbar-drawer__section-title { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; } .topbar-drawer__floor { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; } .topbar-drawer__floor .floor-btn { flex: 1; } /* 兩顆均分寬度 */ .topbar-drawer__nav { display: flex; flex-direction: column; gap: 2px; } .drawer-nav-item { background: transparent; border: none; border-radius: 10px; padding: 11px 14px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s; font-family: inherit; } .drawer-nav-item:hover { background: var(--surface-2); color: var(--ink); } .drawer-nav-item.active { background: var(--ink); color: var(--ink-inverse); font-weight: 700; } [data-theme="dark"] .drawer-nav-item.active { background: var(--surface-2); color: var(--ink); } /* ───────────────────────────────────────────── * @media print:列印 / 匯出 PDF 時隱藏 chrome,只印 active page 內容 * ───────────────────────────────────────────── */ @media print { /* 強制還原深色模式變數，確保列印/PDF 永遠是淺色 */ :root, [data-theme="dark"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f5f5f5; --ink: #111111; --ink-2: #222222; --muted: #555555; --line: #cccccc; } /* 隱藏 chrome:topbar / sub-tab-bar / drawer / 各類 banner / 按鈕 */ .topbar, .sub-tab-bar, .signal-notice-bar, .topbar-drawer, #fallbackBanner, .app-sidebar, .ai-mode-banner, .ai-btn-regen, .ai-action-btn, .ai-mb-btn, .ai-custom-card, .topbar-burger, #actionToast, #aiSnapshotCard { display: none !important; } body { background: #fff !important; color: #000 !important; } .max-w-\[1440px\] { max-width: none !important; padding: 0 !important; } .page { display: none !important; } .page.active { display: block !important; } /* 快照標示：平時隱藏，列印時有文字才顯示 */ .ai-print-snapshot-note:not(:empty) { display: block !important; font-size: 13px; color: #555; margin-top: -4px; margin-bottom: 8px; } .ai-print-snapshot-note:empty { display: none !important; } /* 卡片陰影 / 邊框印起來會浪費墨水,簡化 */ .card, .ai-summary-card, .ai-story-section, .ai-finding-card, .ai-tomorrow-card, .dash-card { box-shadow: none !important; border-color: #ddd !important; page-break-inside: avoid; } /* 連結不印 url */ a[href]::after { content: '' !important; } } /* ── 全站頁腳:版權 + 合規宣告(index 走正常流,在 app-shell 之後)── */ .site-footer { text-align: center; font-size: 12px; color: var(--muted); padding: 16px 16px 24px; line-height: 1.5; } @media (max-width: 600px) { .site-footer { font-size: 11px; padding: 12px 12px 18px; } }