/* ========================================================================== 返佣系統 — 介面設計系統 / Rebate System design layer 蓋喺 Bootstrap 上面。主題：黃金交易嘅財務控制台 —— 深色導航列 + 淺色工作區，金色只留畀同「錢」直接有關嘅數字，其餘一律中性灰藍。 ========================================================================== */ :root{ /* 中性色帶少少藍偏移，唔用純灰（純灰睇落似冇揀過）*/ --ground:#F1F4F7; --surface:#FFFFFF; --surface-2:#F7F9FB; --line:#DFE5EC; --line-soft:#EDF1F5; --ink:#0F1721; --ink-2:#41505F; --ink-3:#7A8899; --nav:#131C26; --nav-ink:#C7D2DE; --nav-ink-hi:#FFFFFF; /* 金色 = 錢。全個系統只有同金額有關嘅嘢先用 */ --gold:#A67C00; --gold-soft:#FBF4E0; --gold-line:#E8D399; --pay:#1B7A52; --pay-soft:#E6F4ED; --retain:#5C6B7C; --retain-soft:#EEF1F5; --danger:#B4322A; --danger-soft:#FBECEA; --info:#1F5C8B; --info-soft:#E8F1F8; /* 按鈕前景／背景要獨立，唔可以直接用 --ink（深色模式會翻轉變白底白字）*/ --btn-bg:#16202B; --btn-fg:#FFFFFF; --r:3px; /* 圓角克制 —— 控制台唔係手機 app */ --shadow:0 1px 2px rgba(15,23,33,.05), 0 1px 3px rgba(15,23,33,.04); --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Segoe UI",sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } @media (prefers-color-scheme: dark){ :root{ --ground:#0D1319; --surface:#151D26; --surface-2:#1A232D; --line:#28323E; --line-soft:#1F2832; --ink:#E6EBF1; --ink-2:#A9B6C4; --ink-3:#8C9BAE; /* 舊值 #78879A 對比只有 4.33 */ --nav:#0A1016; --nav-ink:#9FB0C2; --nav-ink-hi:#FFFFFF; --gold:#E0B44A; --gold-soft:#241D0C; --gold-line:#5C4A1E; --pay:#4FB587; --pay-soft:#10241B; --retain:#8C9BAB; --retain-soft:#1C242E; --danger:#E4685E; --danger-soft:#2A1613; --info:#8CBEE6; --info-soft:#111D28; /* 舊值 #6FA8D6 喺卡底上只有 3.78 */ --btn-bg:#E6EBF1; --btn-fg:#0D1319; --shadow:0 1px 2px rgba(0,0,0,.3); } } /* ---------- 基礎 ---------- */ /* Bootstrap 每版都寫死，佢嘅 .bg-light 優先級高過 body，所以一定要連 class 一齊寫，否則深色模式會出現「淺色底 + 深色卡」嘅撈亂效果。*/ body, body.bg-light{ background:var(--ground)!important; color:var(--ink); font-family:var(--sans); font-size:15px; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5{color:var(--ink); letter-spacing:-.01em; font-weight:650} h4{font-size:1.32rem; margin-bottom:1rem!important} a{color:var(--info); text-decoration:none} a:hover{text-decoration:underline} code,.mono{font-family:var(--mono)} hr{border-color:var(--line)} /* 全部數字對齊 —— 金額系統嘅基本要求 */ .num,td.text-end,th.text-end,.kpi,table td:last-child{font-variant-numeric:tabular-nums} /* 同 token 對齊嘅 Bootstrap 工具類 */ .bg-white,.bg-body,.bg-body-tertiary{background:var(--surface)!important} .table-light > *{background:var(--surface-2)!important; color:var(--ink-2)!important} .border{border-color:var(--line)!important} .text-body{color:var(--ink)!important} /* ---------- 導航列 ---------- */ .navbar{ background:var(--nav)!important; border-bottom:1px solid rgba(255,255,255,.06); padding:.4rem 0; margin-bottom:1.75rem!important; box-shadow:0 1px 0 rgba(15,23,33,.06); } .navbar-brand{ color:var(--nav-ink-hi)!important; font-weight:600; font-size:.95rem; letter-spacing:.02em; padding-right:1.25rem; margin-right:.5rem; border-right:1px solid rgba(255,255,255,.1); } .navbar .nav-link{ color:var(--nav-ink)!important; font-size:.855rem; padding:.3rem .6rem!important; border-radius:var(--r); position:relative; white-space:nowrap; } .navbar .nav-link:hover{color:var(--nav-ink-hi)!important; background:rgba(255,255,255,.06); text-decoration:none} .navbar .nav-link.active{ color:var(--nav-ink-hi)!important; background:rgba(255,255,255,.09); font-weight:600; } .navbar .nav-link.active::after{ content:''; position:absolute; left:.6rem; right:.6rem; bottom:-.42rem; height:2px; background:var(--gold); border-radius:2px; } .navbar .nav-link.disabled{color:rgba(199,210,222,.38)!important} .navbar .badge{font-weight:500; font-size:.62rem; letter-spacing:.04em; opacity:.7} .navbar-text{font-size:.8rem} .navbar .btn-outline-light{ border-color:rgba(255,255,255,.22); color:var(--nav-ink); font-size:.8rem; padding:.2rem .6rem; } .navbar .btn-outline-light:hover{background:rgba(255,255,255,.1); color:#fff} /* 語言切換 */ .navbar .btn-group .btn{font-size:.72rem; padding:.18rem .5rem} /* ---------- 卡片 ---------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); } .card-header{ background:transparent; border-bottom:1px solid var(--line-soft); font-size:.78rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); padding:.7rem 1rem; } .card-body{padding:1rem} /* ---------- KPI 數字磚 ---------- */ /* 儀表板上面嗰行大數字：加一條頂邊 accent，數字放大、標籤縮細 */ .card .card-body > .text-muted.small:first-child{ font-size:.7rem!important; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)!important; font-weight:600; margin-bottom:.35rem; } .kpi, .card-body > div[style*="font-size:1.6rem"], .card-body > div[style*="font-size:1.7rem"], .card-body > div[style*="font-size:1.8rem"]{ font-size:1.75rem!important; font-weight:640!important; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--ink); } /* Bootstrap 嘅語意色喺深色模式下太暗（.text-primary 係 #0d6efd，喺卡底上得 3.78）。原本只喺 .card-body > div[style*="font-size"] 呢條窄選擇器改咗，所以表格入面嘅 .text-primary 一直漏網。改成全域對應返自己嘅 token。 */ .text-primary{color:var(--info)!important} .text-success{color:var(--pay)!important} .text-danger {color:var(--danger)!important} .text-warning{color:var(--gold)!important} .text-info {color:var(--info)!important} .card-body > div[style*="font-size"].text-primary{color:var(--info)!important} .card-body > div[style*="font-size"].text-success,.kpi.text-success{color:var(--pay)!important} .card-body > div[style*="font-size"].text-warning,.kpi.text-warning{color:var(--gold)!important} .kpi.text-primary{color:var(--info)!important} /* ---------- 表格 ---------- ⚠️ Bootstrap 5.3 唔係用 .table{color} 去上色，係用 .table > :not(caption) > * > * { color: var(--bs-table-color) } 呢條選擇器比 .table 更specific，所以淨係寫 .table{color:...} 完全冇作用 —— 深色模式下 --bs-table-color 仍然解成黑色，變成黑字深底、對比 1.24（等於睇唔到）。一定要改 --bs-table-* 變數本身，同埋喺同一條選擇器度明寫 color。 */ .table{ color:var(--ink); margin-bottom:0; font-size:.875rem; --bs-table-color:var(--ink); --bs-table-color-type:var(--ink); --bs-table-color-state:var(--ink); --bs-table-bg:transparent; --bs-table-accent-bg:transparent; --bs-table-striped-color:var(--ink); --bs-table-hover-color:var(--ink); --bs-table-active-color:var(--ink); --bs-table-border-color:var(--line-soft); } .table > :not(caption) > * > *{ color:var(--ink); background:transparent; border-bottom-color:var(--line-soft); } /* 靜音文字喺表格入面照樣要行得通 */ .table .text-muted{color:var(--ink-3)!important} .table thead th{ background:var(--surface-2)!important; color:var(--ink-2); font-size:.7rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--line)!important; padding:.55rem .75rem; white-space:nowrap; } .table tbody td{padding:.5rem .75rem; vertical-align:middle} .table tbody tr:hover > *{background:var(--surface-2)!important} .table tfoot td{ background:var(--surface-2)!important; border-top:1px solid var(--line)!important; font-weight:650; } .table-sm tbody td{padding:.42rem .7rem} /* 表頭黐頂，長表好用 */ .table-responsive{max-height:none} .table thead th{position:sticky; top:0; z-index:2} /* ---------- 徽章 ---------- */ .badge{ font-weight:600; font-size:.7rem; letter-spacing:.02em; padding:.28em .55em; border-radius:var(--r); } .badge.bg-success{background:var(--pay-soft)!important; color:var(--pay)!important} .badge.bg-secondary{background:var(--retain-soft)!important; color:var(--retain)!important} .badge.bg-warning{background:var(--gold-soft)!important; color:var(--gold)!important} .badge.bg-primary{background:var(--info-soft)!important; color:var(--info)!important} .badge.bg-danger{background:var(--danger-soft)!important; color:var(--danger)!important} .badge.bg-info{background:var(--info-soft)!important; color:var(--info)!important} .badge.bg-light{background:var(--surface-2)!important; color:var(--ink-2)!important; border:1px solid var(--line-soft)} /* ---------- 提示條 ---------- */ /* 左邊一條粗色帶，比起整塊填色更似控制台 */ .alert{ border:1px solid var(--line); border-left-width:3px; border-radius:var(--r); padding:.7rem .95rem; font-size:.875rem; box-shadow:none; } .alert-success{background:var(--pay-soft); border-color:var(--line); border-left-color:var(--pay); color:var(--ink)} .alert-danger {background:var(--danger-soft); border-color:var(--line); border-left-color:var(--danger); color:var(--ink)} .alert-warning{background:var(--gold-soft); border-color:var(--line); border-left-color:var(--gold); color:var(--ink)} .alert-info {background:var(--info-soft); border-color:var(--line); border-left-color:var(--info); color:var(--ink)} .alert-secondary{background:var(--surface-2); border-left-color:var(--retain); color:var(--ink)} /* ---------- 表單 ---------- */ .form-label{font-size:.78rem; font-weight:600; color:var(--ink-2); margin-bottom:.28rem} .form-control,.form-select{ background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:var(--r); font-size:.875rem; padding:.4rem .6rem; } .form-control:focus,.form-select:focus{ border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 15%,transparent); background:var(--surface); color:var(--ink); } .form-control::placeholder{color:var(--ink-3)} .form-check-input:checked{background-color:var(--gold); border-color:var(--gold)} .form-check-label{font-size:.85rem} /* ---------- 按鈕 ---------- */ .btn{border-radius:var(--r); font-size:.85rem; font-weight:600; padding:.4rem .85rem} .btn-sm{font-size:.78rem; padding:.28rem .6rem} .btn-primary{background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg)} .btn-primary:hover{background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg); filter:brightness(1.18)} .btn-success{background:var(--pay); border-color:var(--pay); color:#fff} .btn-warning{background:var(--gold); border-color:var(--gold); color:#fff} .btn-warning:hover{background:#8C6900; border-color:#8C6900; color:#fff} .btn-outline-primary{color:var(--info); border-color:var(--line)} .btn-outline-primary:hover{background:var(--info); border-color:var(--info); color:#fff} .btn-outline-secondary{color:var(--ink-2); border-color:var(--line)} .btn-outline-secondary:hover{background:var(--surface-2); color:var(--ink); border-color:var(--ink-3)} .btn-outline-success{color:var(--pay); border-color:var(--line)} .btn-outline-success:hover{background:var(--pay); border-color:var(--pay)} .btn-outline-danger{color:var(--danger); border-color:var(--line)} .btn-outline-danger:hover{background:var(--danger); border-color:var(--danger)} .btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px; box-shadow:none} /* ---------- 進度條 ---------- */ .progress{background:var(--line-soft); border-radius:99px; overflow:hidden} .progress-bar{background:var(--info)} .progress-bar.bg-warning{background:var(--gold)!important} /* ---------- 登入頁 ---------- */ /* 唔好淨係一個白盒喺中間 —— 加返個品牌感 */ body > .container.py-5{padding-top:5rem!important} .login-brand{text-align:center; margin-bottom:1.5rem} .login-brand .mark{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r); background:var(--nav); color:var(--gold); font-weight:700; font-size:1.1rem; margin-bottom:.75rem; font-family:var(--mono); } .login-brand h5{margin:0; font-size:1.05rem; letter-spacing:-.01em} .login-brand .sub{font-size:.8rem; color:var(--ink-3); margin-top:.2rem} /* ---------- 首頁 ---------- */ a.card:hover{border-color:var(--gold); box-shadow:0 2px 8px rgba(166,124,0,.12)} a.card{transition:border-color .12s ease, box-shadow .12s ease} /* ---------- 推薦樹 ---------- */ .node-row{ border-color:var(--line)!important; background:var(--surface)!important; border-radius:var(--r)!important; font-size:.85rem; } .gen-badge{ background:var(--surface-2)!important; color:var(--ink-2)!important; border:1px solid var(--line-soft); font-family:var(--mono); font-size:.66rem!important; } .ref-tree ul{border-left-color:var(--line)!important} /* ---------- 細節 ---------- */ .text-muted{color:var(--ink-3)!important} .small,small{font-size:.8rem} .container{max-width:1140px} @media (max-width:576px){ body{font-size:14px} .card-body{padding:.85rem} .table{font-size:.82rem} } @media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} } /* ---------- 推薦樹：國籍章（後台）---------- */ .ctry{ font-family:var(--mono); font-size:.66rem; font-weight:650; letter-spacing:.05em; padding:.1rem .35rem; margin-left:.3rem; border-radius:var(--r); background:var(--info-soft); color:var(--info); } .ctry-x{background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger); cursor:help} /* ---------- 頭像（後台）---------- */ .av{ display:inline-flex; align-items:center; justify-content:center; flex:none; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:var(--surface-2); font-weight:650; color:#fff; line-height:1; font-family:var(--mono); user-select:none; } .av img{width:100%; height:100%; object-fit:cover; display:block} .av-ph{background:linear-gradient(150deg, hsl(var(--av-h) 55% 42%), hsl(calc(var(--av-h) + 42) 58% 32%)); border-color:transparent} .av-xs{width:24px;height:24px;font-size:.7rem} .av-sm{width:32px;height:32px;font-size:.85rem} .av-md{width:48px;height:48px;font-size:1.15rem} .av-lg{width:80px;height:80px;font-size:1.9rem} /* ---------- 語言切換（7 語用下拉）---------- */ .lang-pick{width:auto; min-width:98px; display:inline-block} .navbar .lang-pick{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:var(--nav-ink); font-size:.78rem; padding:.2rem 1.6rem .2rem .5rem; } .navbar .lang-pick option{background:var(--nav); color:var(--nav-ink-hi)} .lang-fallback a{margin-right:.4rem; font-size:.78rem}