/* ip-opd-gateway design system — v0.4「現代 SaaS」方向(mockup B 拍板) token 一律走 custom properties;零外部依賴、無 web font(系統字 stack)。 v1.1 加暗色主題:html[data-theme=dark] 覆蓋整組 token, 主題由 inline script 依 localStorage / 系統偏好決定(防閃白)。 v1.13 品牌識別 + 可選配色(詳 docs/DEVLOG_2026-07-15_v1.13_ui-brand-accent.md): - 主色改藏青金(對齊事務所品牌),預設 = :root / [data-theme=dark] 的藏青。 - 使用者可選配色:html[data-accent=] 覆蓋一組主色 token(--acc / --acc-soft / --acc-deep / --btn-bg / --btn-hover / --btn-shadow / --focus-ring)。 深色版用 [data-theme=dark][data-accent=](雙屬性,特異度較高)覆蓋。 由 inline script 依 localStorage 早套用(同主題防閃色)。 - 新增一色只需:(1) 此檔加 [data-accent=X] 與 [data-theme=dark][data-accent=X] 兩塊;(2) webui.py 的 _ACCENTS 加一列 (key, 顯示名, 樣本色)。 - 語意色(綠=成功 .flash/.badge.ok、紅=危險 .alert/.danger)獨立於主色,不隨 accent 變。 - 標誌 .brand .mark-light/.mark-dark 為去背 PNG,切換規則須 scope 到 .brand, 否則被 .brand .mark 的特異度壓過(v1.13 曾因此雙標誌並存)。 */ :root{ --bg:#f6f7f9; --card:#fff; --line:#e7e9ee; --text:#1f2430; --muted:#767e8c; --acc:#2b4a86; --acc-soft:#eaeef7; --acc-deep:#1e2d4d; --btn-bg:#26406e; --btn-hover:#1e2d4d; --btn-shadow:0 2px 6px rgba(43,74,134,.28); --ok:#177245; --ok-soft:#e8f6ee; --ok-dot:#2eaf67; --danger:#c2453a; --danger-soft:#fdf0ee; --danger-hover:#f9e2df; --warn:#a05a12; --field-bg:#fff; --code-bg:#f1f2f5; --note-bg:#f1f2f6; --note-line:#cdd3e0; --flash-line:#bfe4cd; --alert-line:#f0c8c3; --badge-no-bg:#f2f3f6; --badge-no-fg:#8a92a2; --badge-no-dot:#c0c6d2; --topbar-bg:rgba(255,255,255,.88); --focus-ring:rgba(43,74,134,.16); --radius:14px; --radius-s:9px; --shadow:0 1px 3px rgba(31,36,48,.05),0 8px 24px rgba(31,36,48,.04); --nest-bg:#fff; --nest-line:#d7dbe4; --nest-shadow:0 1px 2px rgba(31,36,48,.05),0 6px 16px rgba(31,36,48,.07); --nest-shadow-h:0 2px 6px rgba(31,36,48,.08),0 12px 26px rgba(31,36,48,.13); color-scheme:light; } [data-theme=dark]{ --bg:#14161c; --card:#1c202a; --line:#2b303d; --text:#e4e7ee; --muted:#8d95a5; --acc:#93a7d8; --acc-soft:rgba(147,167,216,.15); --acc-deep:#b3c1e6; --btn-bg:#3a4f7d; --btn-hover:#4a608f; --btn-shadow:0 2px 6px rgba(0,0,0,.4); --ok:#5fc490; --ok-soft:rgba(46,175,103,.15); --ok-dot:#3dbb75; --danger:#e97a70; --danger-soft:rgba(201,80,68,.18); --danger-hover:rgba(201,80,68,.32); --warn:#dfa15b; --field-bg:#232733; --code-bg:#272c38; --note-bg:#20242e; --note-line:#3c4457; --flash-line:rgba(46,175,103,.35); --alert-line:rgba(233,122,112,.35); --badge-no-bg:#262a35; --badge-no-fg:#8a92a2; --badge-no-dot:#565e6e; --topbar-bg:rgba(20,22,28,.85); --focus-ring:rgba(147,167,216,.24); --shadow:0 1px 3px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35); --nest-bg:#242a37; --nest-line:#39404f; --nest-shadow:0 1px 3px rgba(0,0,0,.45),0 8px 20px rgba(0,0,0,.4); --nest-shadow-h:0 3px 8px rgba(0,0,0,.5),0 14px 30px rgba(0,0,0,.55); color-scheme:dark; } /* ── 使用者可選配色(accent)────────────────────────────────────────── 預設(不帶 data-accent 或 =navy)= 上面 :root/[data-theme=dark] 的藏青。 其餘配色各覆蓋一組主色 token;深色版用雙屬性選擇器提高特異度覆蓋。 語意色(綠=成功 / 紅=危險)不在此列,不隨主色變。 */ [data-accent=slate]{--acc:#3d6699;--acc-soft:#eaf0f6;--acc-deep:#2c4c73; --btn-bg:#3d6699;--btn-hover:#2c4c73;--btn-shadow:0 2px 6px rgba(61,102,153,.26); --focus-ring:rgba(61,102,153,.16)} [data-accent=indigo]{--acc:#4f63e7;--acc-soft:#eef0fd;--acc-deep:#3a49b5; --btn-bg:#4f63e7;--btn-hover:#3a49b5;--btn-shadow:0 2px 6px rgba(79,99,231,.28); --focus-ring:rgba(79,99,231,.16)} [data-accent=green]{--acc:#23514a;--acc-soft:#e7f0ee;--acc-deep:#173a34; --btn-bg:#23514a;--btn-hover:#173a34;--btn-shadow:0 2px 6px rgba(35,81,74,.26); --focus-ring:rgba(35,81,74,.16)} [data-theme=dark][data-accent=slate]{--acc:#7fa8d4;--acc-soft:rgba(127,168,212,.15); --acc-deep:#9dbde3;--btn-bg:#3f6394;--btn-hover:#4f76aa;--focus-ring:rgba(127,168,212,.24)} [data-theme=dark][data-accent=indigo]{--acc:#8b9af5;--acc-soft:rgba(139,154,245,.14); --acc-deep:#aab6f8;--btn-bg:#5265e0;--btn-hover:#6577ea;--focus-ring:rgba(139,154,245,.24)} [data-theme=dark][data-accent=green]{--acc:#6bb3a3;--acc-soft:rgba(107,179,163,.15); --acc-deep:#8fcabb;--btn-bg:#2f6b60;--btn-hover:#3d8375;--focus-ring:rgba(107,179,163,.24)} [data-accent=teal]{--acc:#0f766e;--acc-soft:#e6f2f0;--acc-deep:#0b5850; --btn-bg:#0f766e;--btn-hover:#0b5850;--btn-shadow:0 2px 6px rgba(15,118,110,.26); --focus-ring:rgba(15,118,110,.16)} [data-accent=plum]{--acc:#6b4a8f;--acc-soft:#f0ebf6;--acc-deep:#503571; --btn-bg:#6b4a8f;--btn-hover:#503571;--btn-shadow:0 2px 6px rgba(107,74,143,.26); --focus-ring:rgba(107,74,143,.16)} [data-accent=graphite]{--acc:#48566b;--acc-soft:#eef0f3;--acc-deep:#333c4c; --btn-bg:#48566b;--btn-hover:#333c4c;--btn-shadow:0 2px 6px rgba(72,86,107,.24); --focus-ring:rgba(72,86,107,.16)} [data-accent=amber]{--acc:#8a5a1f;--acc-soft:#f6efe2;--acc-deep:#6a4413; --btn-bg:#8a5a1f;--btn-hover:#6a4413;--btn-shadow:0 2px 6px rgba(138,90,31,.26); --focus-ring:rgba(138,90,31,.18)} [data-theme=dark][data-accent=teal]{--acc:#5cc4b8;--acc-soft:rgba(92,196,184,.15); --acc-deep:#82d6cc;--btn-bg:#1a7d72;--btn-hover:#25978a;--focus-ring:rgba(92,196,184,.24)} [data-theme=dark][data-accent=plum]{--acc:#b399d6;--acc-soft:rgba(179,153,214,.15); --acc-deep:#c9b6e6;--btn-bg:#5f4585;--btn-hover:#74599b;--focus-ring:rgba(179,153,214,.24)} [data-theme=dark][data-accent=graphite]{--acc:#9aa6b8;--acc-soft:rgba(154,166,184,.15); --acc-deep:#b6c0cf;--btn-bg:#4a586c;--btn-hover:#5b6a80;--focus-ring:rgba(154,166,184,.24)} [data-theme=dark][data-accent=amber]{--acc:#d9a24e;--acc-soft:rgba(217,162,78,.15); --acc-deep:#e6bd7a;--btn-bg:#7a531f;--btn-hover:#946627;--focus-ring:rgba(217,162,78,.24)} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text); font-family:"Segoe UI","Microsoft JhengHei","PingFang TC",system-ui,sans-serif; line-height:1.65;font-size:15.5px} .wrap{max-width:860px;margin:0 auto;padding:0 1.1rem} a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:3px} /* ── 頂部導覽 ── */ .topbar{position:sticky;top:0;background:var(--topbar-bg); backdrop-filter:blur(6px);border-bottom:1px solid var(--line);z-index:10} .topbar .bar{display:flex;align-items:center;gap:.7rem;padding:.65rem 1.1rem} .brand{display:flex;align-items:center;gap:.55rem;font-weight:650;color:var(--text)} .brand:hover{text-decoration:none} .brand .mark{width:1.55rem;height:1.55rem;flex:none;display:block} /* 標誌深淺兩版:去背 PNG,依主題只顯示對應色版本 (規則 scope 到 .brand,特異度才壓得過上面的 .brand .mark) */ .brand .mark-dark{display:none} [data-theme=dark] .brand .mark-light{display:none} [data-theme=dark] .brand .mark-dark{display:block} .topbar nav{margin-left:auto;display:flex;gap:.25rem;flex-wrap:wrap} .topbar nav a{padding:.3rem .8rem;border-radius:8px;color:var(--muted);font-size:.9rem} .topbar nav a:hover{background:var(--acc-soft);color:var(--acc);text-decoration:none} .theme-btn{background:none;border:0;box-shadow:none;margin:0;flex:none; padding:.32rem .5rem;border-radius:8px;color:var(--muted);cursor:pointer; display:flex;align-items:center;font-size:0} .theme-btn:hover{background:var(--acc-soft);color:var(--acc)} .theme-btn svg{width:1.05rem;height:1.05rem} .theme-btn .sun{display:none} [data-theme=dark] .theme-btn .sun{display:block} [data-theme=dark] .theme-btn .moon{display:none} /* 漢堡鈕:桌機隱藏,手機顯示(見 max-width:640 media) */ .burger{display:none;background:none;border:0;box-shadow:none;margin:0;flex:none; padding:.32rem .5rem;border-radius:8px;color:var(--muted);cursor:pointer; align-items:center;font-size:0} .burger:hover{background:var(--acc-soft);color:var(--acc)} .burger svg{width:1.3rem;height:1.3rem} /* 配色選單:一顆顯示目前主色的小圓點,點開挑配色 */ .accent-wrap{position:relative;flex:none} .accent-btn{background:none;border:0;box-shadow:none;margin:0;padding:.34rem .45rem; border-radius:8px;cursor:pointer;display:flex;align-items:center} .accent-btn:hover{background:var(--acc-soft)} .accent-btn .swatch{width:1.05rem;height:1.05rem;border-radius:50%;background:var(--acc); box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)} .accent-menu{position:absolute;right:0;top:calc(100% + .4rem);z-index:20; background:var(--card);border:1px solid var(--line);border-radius:12px; box-shadow:var(--shadow);padding:.35rem;min-width:9.5rem; opacity:0;transform:translateY(-6px);pointer-events:none;transition:.14s ease} .accent-menu.open{opacity:1;transform:none;pointer-events:auto} .accent-menu button{display:flex;align-items:center;gap:.55rem;width:100%; background:none;border:0;box-shadow:none;margin:0;padding:.5rem .6rem;border-radius:8px; font:inherit;font-size:.9rem;font-weight:550;color:var(--text);cursor:pointer;text-align:left} .accent-menu button:hover{background:var(--acc-soft);color:var(--acc)} .accent-menu button i{width:.95rem;height:.95rem;border-radius:50%;flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .accent-menu button.cur{color:var(--acc);font-weight:650} .accent-menu button.cur::after{content:"✓";margin-left:auto;font-size:.85rem} main.wrap{padding-top:1.6rem;padding-bottom:3rem} .foot{border-top:1px solid var(--line);color:var(--muted);font-size:.8rem; padding:1rem 0 2rem;text-align:center} /* ── 標題 ── */ h1{font-size:1.35rem;margin:0 0 1rem;text-wrap:balance} h2{font-size:1.13rem;margin:0 0 .35rem;font-weight:650} h3{font-size:.98rem;margin:1.2rem 0 .4rem;font-weight:650} /* ── 卡片 ── */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:1.25rem 1.4rem;margin:0 0 1.15rem;box-shadow:var(--shadow)} .card>h2:first-child{margin-top:0} /* ── 登入/註冊置中版 ── */ .auth{max-width:23.5rem;margin:2.2rem auto 0} .auth .card{padding:1.5rem 1.5rem 1.3rem} /* ── 表單 ── */ label{display:block;font-size:.82rem;color:var(--muted);font-weight:550; margin:.8rem 0 .3rem} input[type=text],input[type=password],input[type=email]{width:100%; border:1.5px solid var(--line);border-radius:var(--radius-s); padding:.58rem .8rem;font-size:.95rem;color:var(--text);background:var(--field-bg); font-family:inherit} input:focus{outline:none;border-color:var(--acc); box-shadow:0 0 0 3px var(--focus-ring)} button{background:var(--btn-bg);color:#fff;border:0;border-radius:var(--radius-s); padding:.6rem 1.4rem;font-size:.92rem;font-weight:600;margin-top:1rem; cursor:pointer;font-family:inherit;box-shadow:var(--btn-shadow)} button:hover{background:var(--btn-hover)} button.ghost{background:var(--field-bg);color:var(--muted); border:1.5px solid var(--line);box-shadow:none} button.ghost:hover{background:var(--bg)} button.mini{margin:0;padding:.28rem .8rem;font-size:.8rem;border-radius:7px; box-shadow:none} button.danger{background:var(--danger-soft);color:var(--danger);box-shadow:none} button.danger:hover{background:var(--danger-hover)} button:focus-visible,input:focus-visible{outline:2px solid var(--acc); outline-offset:2px} fieldset{border:1px solid var(--line);border-radius:12px;margin:1rem 0; padding:.9rem 1.1rem 1.1rem} legend{font-weight:600;padding:0 .5rem;font-size:.93rem} legend a{font-weight:400;font-size:.8rem;margin-left:.3rem} /* ── 各局服務卡(v1.14;一卡一服務、狀態驅動)────────────────────── 桌機 auto-fit 多欄、手機回單欄;pcard 為 flex 直向,動作區 margin-top:auto 貼齊底部故同列等高。已連線=實線浮起卡(--nest-*);未設定=虛線平面卡(邀請 連線)。滑鼠移入 / focus-within 邊框轉主色並上浮。憑證輸入以原生
(.pc-form)就地展開(零 JS);展開時 [open] 掉到卡片底部滿版(order/flex-basis)。 */ .pgrid{display:grid;gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))} .pcard{display:flex;flex-direction:column;background:var(--nest-bg); border:1px solid var(--nest-line);border-radius:13px;box-shadow:var(--nest-shadow); padding:1.05rem 1.15rem 1.15rem; transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease} .pcard:hover,.pcard:focus-within{border-color:var(--acc); box-shadow:var(--nest-shadow-h);transform:translateY(-2px)} .pcard.off{border-style:dashed;background:transparent;box-shadow:none} .pcard.off:hover,.pcard.off:focus-within{box-shadow:var(--nest-shadow)} .pc-head{display:flex;align-items:flex-start;gap:.6rem} .pc-icon{font-size:1.5rem;line-height:1.1;flex:none} .pc-name{display:flex;flex-direction:column;min-width:0;gap:.12rem} .pc-name b{font-size:1rem;font-weight:650;color:var(--acc-deep);line-height:1.25} .pc-office{font-size:.76rem;color:var(--muted)} .pc-head .badge{margin-left:auto;flex:none;margin-top:.15rem} .pc-desc{font-size:.85rem;color:var(--muted);margin:.7rem 0 0} .pc-actions{margin-top:auto;padding-top:.95rem;display:flex;align-items:center; gap:.5rem;flex-wrap:wrap} .pc-actions .pc-guide{margin-left:auto;font-size:.82rem;color:var(--muted)} .pc-actions .pc-guide:hover{color:var(--acc)} .pc-dc{margin:0}.pc-dc button{margin:0} /*
觸發鈕外觀 = 主要按鈕;展開時整段表單掉到卡片底部滿版 */ .pc-form{margin:0} .pc-form>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center; background:var(--btn-bg);color:#fff;border-radius:var(--radius-s); padding:.5rem 1.15rem;font-size:.88rem;font-weight:600;box-shadow:var(--btn-shadow)} .pc-form>summary::-webkit-details-marker{display:none} .pc-form>summary::marker{content:""} .pc-form>summary:hover{background:var(--btn-hover)} .pc-form[open]{flex-basis:100%;order:9} .pc-form[open]>summary{margin-bottom:.5rem} .pc-form form{width:100%} .pc-form label:first-of-type{margin-top:.1rem} .pc-form form>button{margin-top:.9rem} /* ── 狀態語彙 ── */ .badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.73rem; font-weight:600;padding:.13rem .6rem;border-radius:999px;vertical-align:middle} .badge::before{content:"";width:.42rem;height:.42rem;border-radius:50%} .badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.ok::before{background:var(--ok-dot)} .badge.no{background:var(--badge-no-bg);color:var(--badge-no-fg)} .badge.no::before{background:var(--badge-no-dot)} .muted{color:var(--muted);font-size:.88rem} .ok{color:var(--ok)} .warn{color:var(--warn)} .hint{font-size:.72rem;font-weight:600;color:var(--acc);background:var(--acc-soft); border-radius:999px;padding:.12rem .6rem;vertical-align:middle;margin-left:.4rem} /* ── tokenbox / flash / alert ── */ .tokenbox{display:flex;gap:.7rem;align-items:center;background:var(--acc-soft); border-radius:10px;padding:.65rem .9rem;margin:.6rem 0} .tokenbox code{font-family:Consolas,Menlo,monospace;font-size:.84rem; color:var(--acc-deep);word-break:break-all;flex:1;background:none;padding:0} code{background:var(--code-bg);border-radius:5px;padding:.1rem .4rem; font-family:Consolas,Menlo,monospace;font-size:.85em;word-break:break-all} .flash{background:var(--ok-soft);border:1px solid var(--flash-line); border-radius:11px;padding:.7rem 1rem;margin:0 0 1.1rem;font-size:.92rem} .alert{background:var(--danger-soft);border:1px solid var(--alert-line); color:var(--danger);border-radius:10px;padding:.55rem .9rem; margin:.6rem 0 .2rem;font-size:.9rem} /* ── 列表列 ── */ ul.rows{list-style:none;margin:.3rem 0;padding:0} ul.rows li{display:flex;align-items:center;gap:.6rem;padding:.55rem 0; border-top:1px solid var(--line);font-size:.92rem;flex-wrap:wrap} ul.rows li:first-child{border-top:0} ul.rows form{display:inline;margin-left:auto} ul.rows form button{margin:0} /* ── 表格 ── */ .tablewrap{overflow-x:auto} table{border-collapse:collapse;width:100%;font-size:.87rem;margin:.6rem 0} th,td{border-bottom:1px solid var(--line);padding:.5rem .6rem;text-align:left; white-space:nowrap} th{color:var(--muted);font-weight:600;font-size:.78rem} td{font-variant-numeric:tabular-nums} td.acts form{display:inline-block;margin:0} /* ── 後台統計卡 ── */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.8rem;margin:.8rem 0 1.2rem} .stat{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:.8rem 1rem;box-shadow:var(--shadow)} .stat .n{font-size:1.5rem;font-weight:650;font-variant-numeric:tabular-nums} .stat .l{font-size:.78rem;color:var(--muted)} /* ── 用量統計(v1.0.2;零依賴,純 CSS 長條)── */ .stat .n .den{font-size:.85rem;font-weight:550;color:var(--muted)} .spark{display:flex;gap:2px;align-items:flex-end;height:44px;margin:.4rem 0 .2rem} .spark i{flex:1;background:var(--acc);border-radius:2px 2px 0 0;min-width:3px} .spark i.z{background:var(--line);height:3px} .barrow{display:flex;align-items:center;gap:.6rem;margin:.32rem 0;font-size:.85rem} .barrow .bl{flex:none;width:9.5rem;color:var(--muted);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;font-family:Consolas,Menlo,monospace; font-size:.78rem} .barrow .bt{flex:1;background:var(--code-bg);border-radius:999px;height:.55rem; overflow:hidden} .barrow .bt b{display:block;height:100%;background:var(--acc);border-radius:999px} .barrow .bn{flex:none;width:3.2rem;text-align:right;font-size:.8rem; font-variant-numeric:tabular-nums} /* ── 教學長文 ── */ .prose{max-width:44rem} .prose h2{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--line); scroll-margin-top:4.5rem} .prose h2:first-of-type{border-top:0;margin-top:.6rem} .prose ol{padding-left:1.4rem} .prose ol li{margin:.35rem 0} .prose p.muted{background:var(--note-bg);border-left:3px solid var(--note-line); border-radius:0 9px 9px 0;padding:.6rem .9rem} .toc{display:flex;gap:.45rem;flex-wrap:wrap;margin:.8rem 0 0} .toc a{font-size:.82rem;background:var(--field-bg);border:1px solid var(--line); border-radius:999px;padding:.25rem .8rem;color:var(--muted)} .toc a:hover{border-color:var(--acc);color:var(--acc);text-decoration:none} @media (prefers-reduced-motion:reduce){*{transition:none!important}} @media (max-width:640px){ .card{padding:1rem 1rem} .topbar .bar{position:relative} .burger{display:flex} .theme-btn{margin-left:auto} /* nav 收合成右上下拉面板 */ .topbar nav{position:absolute;top:calc(100% + .35rem);left:1.1rem;right:1.1rem; margin:0;flex-direction:column;align-items:stretch;gap:.1rem;flex-wrap:nowrap; background:var(--card);border:1px solid var(--line);border-radius:12px; box-shadow:var(--shadow);padding:.4rem; transform:translateY(-8px);opacity:0;pointer-events:none;transition:.16s ease} .topbar nav.open{transform:none;opacity:1;pointer-events:auto} .topbar nav a{padding:.62rem .7rem;font-size:.95rem;color:var(--text);border-radius:9px} .topbar nav a:hover{background:var(--acc-soft);color:var(--acc)} }