/* ProComm AI 客服後台 —— 設計系統 v2（2026-10-07 大執） * * 根據真人哋嘅 UI 拆出嚟嘅數字（見 ~/procomm-events-research/DESIGN-NOTES.md）： * shadcn/ui：sidebar 224px、topbar 56px、main padding 24、卡 padding 24、 * gap 16、radius 8、KPI 數 28–30/700、近乎無彩色、冇陰影 * Plausible：KPI 帶趨勢、大圖、Top 清單、顏色只佔 5% 面積 * Linear：灰階分層、低對比 1px 邊、每頁一個主 CTA * Luma：公開頁兩欄 + sticky 報名卡、主色只喺 CTA * * 原則： * 1. 白卡 + 1px 淺灰邊 + 留白，**唔用陰影**分層（sticky 卡例外） * 2. 主色（深綠）只出現喺：主 CTA、active nav、狀態 pill 一種 * 3. 字級：12 label／13 meta／14 次要／15 正文／17 卡題／20 區塊／28 KPI * 4. 所有數值用 4/8px 網格；表格數字 tabular-nums * 5. 對比度：正文 ≥4.5:1、非文字（邊框／active／focus）≥3:1 * * ⚠️ 呢個檔案取代舊版 portal.css。舊 selector 名（card／btn／chip／ev-*…）全部保留， * 所以 24 個 template 唔使改都可以食到新樣。改色之前用 scripts/contrast_check.py 重算。 */ /* ── 1. Tokens ─────────────────────────────────────────────────────── */ :root { /* 中性 */ --bg: #f6f8fb; /* 2026-10-09 大執：客戶品牌藍系 */ --bg-2: #eef1f6; --card: #ffffff; --line: #e4e9f0; --line-2: #cfd8e3; --line-in: #98a6b8; /* form control 邊界（非文字 3:1） */ --ink: #0f1c33; /* 深藏青（procomm.hk 實測） */ --ink-2: #3f4d63; --muted: #667489; --muted-2: #8a97a8; --hover: #fbfcfe; /* 品牌（主色只做 CTA／active／一個狀態） */ --brand: #116dff; /* 客戶品牌藍（procomm.hk） */ --brand-ink: #0a4fb8; /* 深藍：品牌淺底上嘅文字／hover 底 */ --brand-soft: #eaf2ff; --brand-line: #c3dcff; /* 語意 */ --ok: #0e7a5f; --ok-soft: #e6f5ef; --ok-line: #b8e0d2; --warn: #8a5a00; --warn-soft: #fdf3e2; --warn-line: #efd9ae; --danger: #b42318; --danger-soft: #fdeceb; --danger-line: #f3c8c3; --info: #0a4c8c; --info-soft: #eaf2ff; --info-line: #c3dcff; /* 尺寸 */ --r-1: 10px; --r-2: 14px; --r-3: 18px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sidebar-w: 240px; --topbar-h: 60px; --shell-max: 1220px; --shadow-pop: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -16px rgba(16, 24, 40, .18); /* 舊變數名 alias（舊 template／CSS 有引用，保留免爆） */ --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--muted); --page: var(--bg); --card-soft: var(--hover); --brand-text: #0a4fb8; --brand-deep: var(--brand-ink); --brand-ring: rgba(17, 109, 255, .18); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Roboto, Arial, sans-serif; --input-line: var(--line-in); --side-text: var(--ink-2); --side-muted: var(--muted); --ink-soft: var(--bg-2); } /* ── 2. Base ───────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Noto Sans HK", "PingFang HK", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; font-size: 15px; line-height: 1.6; } a { color: var(--brand-text, #17663f); } h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.01em; } h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; } :focus-visible { outline: 2px solid #12604a; outline-offset: 2px; border-radius: 6px; } code { background: var(--bg-2); border-radius: 5px; padding: 1px 5px; font-size: 13px; } img { max-width: 100%; } .muted { color: var(--muted); } .small { font-size: 13px; } .tight { line-height: 1.35; } .num { font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sub { font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 2px; } .meta { font-size: 13px; color: var(--muted); } .divider { height: 1px; background: var(--line); margin: var(--sp-4) 0; } /* ── 3. Shell ──────────────────────────────────────────────────────── */ .layout { display: flex; min-height: 100vh; align-items: stretch; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: #fcfcfb; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5) var(--sp-3) var(--sp-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--sp-2); } .brand .glyph { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .brandtext { display: grid; line-height: 1.25; } .brandtext b { font-size: 13.5px; } .brandtext span { font-size: 11.5px; color: var(--muted); } .nav { display: flex; flex-direction: column; gap: 1px; } .nav .group-label { font-size: 11.5px; font-weight: 600; color: var(--muted-2); padding: var(--sp-4) var(--sp-2) var(--sp-1); letter-spacing: .02em; } .nav a { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border-radius: var(--r-1); font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; } .nav a:hover { background: var(--bg-2); color: var(--ink); } .nav a.active { background: var(--card); color: var(--brand-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); } .nav a.active svg { color: var(--brand); } .nav a svg { color: var(--muted-2); } .nav .count { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--bg-2); border-radius: var(--r-pill); padding: 1px 7px; } .nav a.active .count { background: var(--brand-soft); color: var(--brand-ink); } .who { margin-top: auto; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); padding: var(--sp-3) var(--sp-2) 0; } .whotext { display: grid; line-height: 1.25; min-width: 0; } .whotext b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .whotext span { font-size: 11.5px; color: var(--muted); } .avatar { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .avatar.small { width: 24px; height: 24px; font-size: 11.5px; } .logout { margin-left: auto; color: var(--muted); display: flex; padding: 6px; border-radius: 6px; } .logout:hover { background: var(--bg-2); color: var(--ink); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-6); background: rgba(247, 248, 247, .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .crumb { font-size: 13px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; } .crumb b, .crumb strong { color: var(--ink); font-weight: 600; } .crumb a { color: var(--muted); text-decoration: none; } .crumb a:hover { color: var(--ink); text-decoration: underline; } .topright { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; } .shell { width: 100%; max-width: var(--shell-max); padding: var(--sp-6); } .sitefooter { margin-top: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); font-size: 12px; color: var(--muted-2); } /* ── 4. Page head ──────────────────────────────────────────────────── */ .pagehead { margin-bottom: var(--sp-5); } .pagehead h1 { font-size: 22px; } .pagehead .lead { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); max-width: 72ch; } .pagehead + .actions { margin-top: calc(-1 * var(--sp-3)); } /* ── 5. Buttons ────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-1); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; border: 1px solid transparent; background: var(--brand); color: #fff; cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--brand-ink); } .btn.ghost { background: var(--card); color: var(--ink-2); border-color: var(--line-2); } .btn.ghost:hover { background: var(--bg-2); color: var(--ink); } .btn.danger { background: var(--danger); } .btn.danger:hover { background: #851e14; } .btn.warn { background: #b45309; } .btn.warn:hover { background: #92400e; } .btn.ok { background: var(--ok); } .btn.small { height: 30px; padding: 0 10px; font-size: 12.5px; } .btn.lg { height: 44px; padding: 0 20px; font-size: 15px; } .btn[disabled], .btn.disabled { background: var(--bg-2); color: var(--muted-2); border-color: var(--line); cursor: not-allowed; } .actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .actions .small { flex-basis: 100%; } /* ── 6. Cards & blocks ─────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-5); margin-bottom: var(--sp-4); } .card > h2, .card > h3 { margin-bottom: var(--sp-3); } .card > h2:first-child, .card > h3:first-child { margin-top: 0; } .card p { margin: 0 0 var(--sp-3); } .card p:last-child { margin-bottom: 0; } .card.soft { background: #fcfdfc; } .stats { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: var(--sp-4); } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-4); display: grid; gap: 2px; } .stat b { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat span { font-size: 12.5px; color: var(--muted); } .stat.review b { color: var(--info); } .stat.good b { color: var(--ok); } .stat.busy b { color: var(--warn); } .stat.alert b { color: var(--danger); } .stat a { text-decoration: none; color: inherit; } /* KPI 卡（可撳、帶趨勢；抄 Plausible／shadcn） */ .kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: var(--sp-6); } .kpi { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2); padding: 20px 20px 16px; text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s; } .kpi:hover { border-color: var(--line-2); background: var(--hover); } .kpi .label { font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.3; } .kpi .value { font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi .foot { font-size: 12px; color: var(--muted-2); line-height: 1.35; margin-top: 6px; } .kpi .trend { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 1px 6px; background: var(--bg-2); } .kpi .trend.up { color: var(--ok); background: var(--ok-soft); } .kpi .trend.down { color: var(--danger); background: var(--danger-soft); } .kpi.primary { border-color: var(--brand-line); background: var(--brand-soft); border-left: 3px solid var(--brand); padding-left: 17px; } .kpi.primary:hover { background: #e0ede5; } .kpi.primary .value { color: var(--brand-ink); } .facts { display: grid; gap: var(--sp-4) var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .fact { display: flex; gap: 11px; margin: 0; } .fact .ico { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--r-1); border: 1px solid var(--line); background: #fcfdfc; color: var(--ink-2); display: flex; align-items: center; justify-content: center; } .fact dt { font-size: 12.5px; color: var(--muted); font-weight: 500; } .fact dd { margin: 1px 0 0; font-size: 14.5px; font-weight: 600; } .fact dd span { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); } .kvs { display: grid; gap: 8px; font-size: 13.5px; } .kvs > div { display: flex; justify-content: space-between; gap: var(--sp-3); } .kvs span:first-child { color: var(--muted); } .kvs span:last-child { font-weight: 600; text-align: right; } .note { background: #fcfdfc; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 0 var(--r-1) var(--r-1) 0; padding: var(--sp-3) var(--sp-4); font-size: 13.5px; } .banner, .ev-demo { background: #fcfdfc; border: 1px solid var(--line); border-radius: var(--r-1); padding: var(--sp-3) var(--sp-4); font-size: 13.5px; color: var(--ink-2); margin-bottom: var(--sp-4); } .banner.warn, .ev-demo.warn { background: #fffdf5; border-color: var(--warn-line); color: var(--warn); } .alert { border-radius: var(--r-1); padding: var(--sp-3) var(--sp-4); font-size: 13.5px; margin-bottom: var(--sp-4); border: 1px solid; } .alert.info { background: var(--info-soft); border-color: var(--info-line); color: var(--info); } .alert.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); } .alert.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } .alert.err { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); } .flash { display: flex; align-items: flex-start; gap: 9px; margin-bottom: var(--sp-4); border-radius: var(--r-1); padding: 11px var(--sp-4); font-size: 13.5px; background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--ok); } .flash.error, .flash.err { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); } .flash.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } .empty { border: 1px dashed var(--line-2); border-radius: var(--r-2); padding: var(--sp-6); text-align: center; color: var(--muted); font-size: 13.5px; background: #fcfdfc; } .countwarn { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); border-radius: var(--r-1); padding: 10px var(--sp-3); font-size: 12.5px; display: grid; gap: 2px; } .countwarn b { font-size: 13px; } /* ── 7. Chips / badges ─────────────────────────────────────────────── */ .chip, .badge, .ev-chip, .ev-status, .ev-tag, .tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; font-size: 11.5px; font-weight: 600; line-height: 1; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-2); border: 1px solid transparent; white-space: nowrap; } .chip .dot, .ev-chip .dot, .ev-chip2 .dot, .ev-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip.primary, .badge.primary, .ev-chip.primary { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); } .chip.pending, .ev-chip.pending, .ev-status.review, .ev-tag.review { background: var(--info-soft); color: var(--info); } .badge.pending { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); } .chip.ok, .badge.ok, .ev-chip.accepted, .ev-chip2.accepted, .ev-status.open { background: var(--ok-soft); color: var(--ok); } .chip.busy, .ev-chip.waitlisted { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); } .chip.danger, .badge.danger, .ev-chip.declined, .ev-status.alert, .ev-tag.alert { background: var(--danger-soft); color: var(--danger); } .ev-chip.withdrawn, .ev-chip2.withdrawn, .ev-status.closed { background: var(--bg-2); color: var(--muted); } .ev-status.draft { background: #f6f4ef; color: #6b5b3e; } .ev-dot { background: var(--danger); color: #fff; border-radius: var(--r-pill); padding: 0 6px; font-size: 11px; margin-left: 4px; } /* ── 8. Forms ──────────────────────────────────────────────────────── */ label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 5px; } label .req { color: #a1281c; } input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=search], select, textarea { width: 100%; padding: 9px 11px; font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line-in); border-radius: var(--r-1); } input::placeholder, textarea::placeholder { color: var(--muted-2); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } textarea { min-height: 84px; resize: vertical; } .field { margin-bottom: var(--sp-4); } .field > label { margin-bottom: 5px; } .hint { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; } .f { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 5px; } .row2, .two { display: grid; gap: var(--sp-4); } @media (min-width: 640px) { .row2, .two { grid-template-columns: 1fr 1fr; } } fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); } fieldset + fieldset { border-top: 1px solid var(--line); padding-top: var(--sp-5); } legend { font-size: 13px; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: var(--sp-3); } .check, .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin-bottom: 10px; } .check input, .consent input { width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--brand); } .check label, .consent label { margin: 0; font-weight: 500; } .consent { background: #fcfdfc; border: 1px solid var(--line); border-radius: var(--r-1); padding: var(--sp-3) var(--sp-4); } .filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); } .filters select, .filters input { width: auto; min-width: 150px; } .searchbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); } .searchbar input[type=search], .searchbar input[type=text] { max-width: 320px; } .searchbar .mag { color: var(--muted); } /* ── 9. Tables ─────────────────────────────────────────────────────── */ .tablewrap, .ev-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--card); } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted-2); letter-spacing: .02em; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); white-space: nowrap; } td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background .1s ease; } tbody tr:hover td { background: var(--hover); } /* 等緊同事嘅行：3px 暖色帶（用 inset shadow，唔破壞 table layout） */ tbody tr.is-waiting td { background: var(--warn-soft); } tbody tr.is-waiting td:first-child { box-shadow: inset 3px 0 0 0 var(--warn); } tbody tr.is-waiting:hover td { background: #faecd0; } td.msg-preview { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-2); } td.who a { color: var(--ink); font-weight: 600; text-decoration: none; } td.who a:hover { text-decoration: underline; text-underline-offset: 2px; } td.who, .who { font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .when { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .num, td.num { font-variant-numeric: tabular-nums; } .pager { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); } .pager .info { font-size: 13px; color: var(--muted); margin-right: auto; } /* ── 10. Tabs / segmented ──────────────────────────────────────────── */ .ev-tabs, .ev-seg { display: inline-flex; gap: 2px; background: var(--bg-2); border-radius: var(--r-pill); padding: 3px; margin-bottom: var(--sp-4); max-width: 100%; overflow-x: auto; } .ev-tabs a, .ev-seg a { font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap; } .ev-tabs a:hover, .ev-seg a:hover { background: rgba(255, 255, 255, .7); } .ev-tabs a.active, .ev-seg a.active { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .ev-tabs .c, .ev-seg .c { color: var(--muted); margin-left: 2px; } /* ── 11. 公開頁／活動模組（保留 ev- 前綴）───────────────────────────── */ .ev-headbar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); flex-wrap: wrap; } .ev-attn { background: #fffdf5; border: 1px solid var(--warn-line); border-radius: var(--r-2); padding: var(--sp-4); margin-bottom: var(--sp-4); } .ev-attn-h { font-size: 12.5px; font-weight: 700; color: var(--warn); margin-bottom: 8px; } .ev-attn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; } .ev-attn-name { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; } .ev-attn-name:hover { text-decoration: underline; } .ev-list { display: grid; gap: var(--sp-3); } .ev-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); } @media (min-width: 900px) { .ev-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sp-5); } } .ev-titleline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ev-name { font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; } .ev-name:hover { text-decoration: underline; } .ev-meta { font-size: 12.5px; color: var(--muted); margin: 7px 0 0; } .ev-prog { position: relative; height: 6px; background: var(--bg-2); border-radius: var(--r-pill); margin-top: 12px; max-width: 340px; } .ev-prog i { position: absolute; inset: 0 auto 0 0; background: var(--brand); border-radius: var(--r-pill); } .ev-prog span { position: absolute; left: 0; top: 10px; font-size: 12px; color: var(--muted); } .ev-rowside { display: grid; gap: var(--sp-3); } .ev-kpis { display: flex; gap: var(--sp-5); } .ev-kpi { font-size: 12px; color: var(--muted); display: grid; gap: 1px; } .ev-kpi b { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .ev-kpi.total b { color: var(--brand-ink); } .ev-rowactions { display: flex; gap: 8px; flex-wrap: wrap; } .ev-rowactions .btn { height: 32px; padding: 0 12px; font-size: 12.5px; } .ev-two { display: grid; gap: var(--sp-4); } /* 總覽頁專用兩欄：等寬、唔拉齊高度（2026-10-07 Opus 審美 pass） */ .dash-two { display: grid; gap: var(--sp-4); align-items: start; } @media (min-width: 801px) { .dash-two { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .ev-two { grid-template-columns: 2fr 1fr; align-items: start; } } .ev-note { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-4); } .ev-note summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600; } /* 月曆 */ .ev-calwrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2); overflow-x: auto; } .ev-cal { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; } .ev-cal th { text-align: center; font-size: 12px; color: var(--muted); padding: 10px 4px; background: #fcfdfc; border-bottom: 1px solid var(--line); } .ev-cal td { height: 96px; vertical-align: top; padding: 6px; border: 1px solid var(--line); } .ev-cal td.is_weekend, .ev-cal td.weekend { background: #fcfcfb; } .ev-cal td.today, .ev-cal td .tagtoday { box-shadow: inset 0 0 0 2px var(--brand); border-radius: 6px; } .ev-cal .dnum { font-size: 12px; color: var(--muted); font-weight: 600; } .ev-calchip { display: block; font-size: 11.5px; font-weight: 600; border-radius: 5px; padding: 2px 5px; margin-top: 3px; background: var(--bg-2); color: var(--ink-2); border-left: 3px solid var(--muted-2); overflow: hidden; text-overflow: ellipsis; } .ev-calchip.signup_open { background: var(--info-soft); border-left-color: var(--info); color: var(--info); } .ev-calchip.signup_close, .ev-calchip.deadline { background: var(--danger-soft); border-left-color: var(--danger); color: var(--danger); } .ev-calchip.briefing { background: var(--warn-soft); border-left-color: var(--warn); color: var(--warn); } .ev-calchip.competition { background: var(--ok-soft); border-left-color: var(--ok); color: var(--ok); } .ev-calchip.result { background: #efe9fa; border-left-color: #6d4bb5; color: #4c3391; } .ev-calchip.other { background: var(--bg-2); color: var(--ink-2); } .ev-timeline { display: grid; gap: 10px; } .ev-timeline > div { display: flex; gap: 10px; align-items: flex-start; } .ev-datelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ev-datelist li { display: flex; gap: 12px; align-items: flex-start; } .ev-datepill { flex: 0 0 auto; width: 52px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-1); padding: 4px 0; font-size: 12px; color: var(--muted); background: #fcfdfc; } .ev-datepill b { display: block; font-size: 16px; color: var(--ink); } .ev-datepill.today { border-color: var(--brand-line); background: var(--brand-soft); } .ev-kv { font-size: 13px; } .ev-stack { display: flex; flex-direction: column; } .ev-stack > * { order: 0; } .listnote { display: none; } /* 報名審批密集表 */ .ev-appsbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: space-between; position: sticky; top: var(--topbar-h); z-index: 6; background: var(--bg); padding: 6px 0 var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-3); } .ev-search { display: flex; align-items: center; gap: 6px; margin-left: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-1); padding: 2px 4px 2px 10px; } .ev-search .mag { color: var(--muted); } .ev-search input[type=search] { border: none; background: transparent; width: 210px; height: 32px; padding: 6px 0; font-size: 13px; } .ev-search input[type=search]:focus { box-shadow: none; } .ev-bulkbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: var(--r-2); padding: 8px var(--sp-4); margin-bottom: var(--sp-3); font-size: 13px; } .ev-bulkbar input[type=text] { width: 220px; height: 30px; padding: 0 10px; font-size: 13px; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; } .ev-bulkbar input[type=text]::placeholder { color: rgba(255, 255, 255, .45); } .ev-bulkbar input[type=text]:focus { border-color: #fff; box-shadow: none; } .ev-bulkbar button { height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid transparent; background: #fff; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .ev-bulkbar button.danger { background: var(--danger); color: #fff; } .ev-bulkbar button.warn { background: #d97706; color: #2b1600; } .ev-bulkbar button.ghost { background: rgba(255, 255, 255, .12); color: #fff; } .ev-bulkbar .hint { font-size: 11.5px; color: rgba(255, 255, 255, .55); margin-left: auto; } table.ev-table2 { font-size: 13.5px; } table.ev-table2 thead th { position: sticky; top: calc(var(--topbar-h) + 46px); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line-2); } table.ev-table2 tbody td { padding: 7px 12px; line-height: 1.35; } table.ev-table2 .sub { font-size: 11.5px; } table.ev-table2 td.school > a { font-weight: 600; color: var(--ink); text-decoration: none; } table.ev-table2 td.school > a:hover { text-decoration: underline; } table.ev-table2 td.go a { color: var(--muted); text-decoration: none; font-size: 15px; } table.ev-table2 tbody tr:hover td.go a { color: var(--brand); } .ev-res { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; margin-right: 4px; border: 1px solid transparent; } .ev-res.on { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); } .ev-res.off { background: transparent; color: var(--muted-2); border-color: var(--line); opacity: .45; } .ev-res::before { content: "✓"; font-size: 10.5px; margin-right: 3px; opacity: .85; } .ev-res.off::before { content: "–"; opacity: .6; } /* ── 12. 對話 ──────────────────────────────────────────────────────── */ .thread { display: grid; gap: var(--sp-3); } .msg { max-width: 78%; border-radius: var(--r-2); padding: 10px var(--sp-4); font-size: 14px; } .msg .meta { font-size: 11.5px; color: var(--muted-2); margin-top: 4px; } .msg.user { background: var(--card); border: 1px solid var(--line); justify-self: start; } .msg.assistant { background: var(--brand-soft); border: 1px solid var(--brand-line); justify-self: end; } .msg.staff { background: var(--info-soft); border: 1px solid var(--info-line); justify-self: end; } .attach { margin-top: 8px; } .attach-thumb { max-width: 240px; max-height: 240px; border-radius: var(--r-1); border: 1px solid var(--line); display: block; } .attach-link { font-size: 12.5px; } /* ── 13. 知識庫 ────────────────────────────────────────────────────── */ .entry { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-4); background: var(--card); margin-bottom: var(--sp-3); } .entry .topic { font-weight: 700; font-size: 14.5px; } .entry.review { border-color: var(--warn-line); border-left: 3px solid var(--warn); background: var(--warn-soft); padding: 12px 16px 12px 14px; } .entry.review + .entry.review { margin-top: 8px; } .entry.review .chip.pending { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); } .entry.pending { border-color: var(--warn-line); background: #fffdf8; } .suggestions { display: grid; gap: var(--sp-3); } .addnew { border-top: 1px dashed var(--line-2); margin-top: var(--sp-4); padding-top: var(--sp-4); } /* ── 14. 登入頁 ────────────────────────────────────────────────────── */ .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: var(--bg); } .login-shell .card { width: 100%; max-width: 380px; margin: 0; box-shadow: var(--shadow-pop); } /* ── 15. 響應式 ────────────────────────────────────────────────────── */ @media (max-width: 900px) { .layout { flex-direction: column; } .sidebar { width: 100%; flex: none; height: auto; position: static; overflow: visible; padding: var(--sp-3) var(--sp-3) var(--sp-2); gap: var(--sp-3); border-right: none; border-bottom: 1px solid var(--line); } .brandtext span { display: none; } .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; } .nav .group-label { display: none; } .nav a { white-space: nowrap; } .nav a span:not(.count) { display: inline; } .who { margin-top: 0; border-top: none; padding: 0 var(--sp-2); } .whotext { display: none; } .topbar { padding: 0 var(--sp-4); height: 52px; } .shell { padding: var(--sp-4); } .sitefooter { padding: var(--sp-4); } .ev-appsbar { top: 52px; } table.ev-table2 thead th { top: 98px; } .msg { max-width: 90%; } } @media print { .sidebar, .topbar, .sitefooter, .ev-bulkbar { display: none; } .shell { padding: 0; max-width: none; } } /* ── 16. 相容層：舊 template 用嘅原始 markup（唔想改晒 24 個 template）──── 目標：任何冇 class 嘅