/* ========================= Theme Tokens（Dark/Light）切換方式：目的：把顏色集中管理，2.1 先試切換，後續 2.2 / 3.x 直接沿用 ========================= */ :root{ /* typography */ --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "PingFang TC", "Microsoft JhengHei", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* layout tokens */ --radius: 16px; --shadow: 0 12px 40px rgba(0,0,0,0.35); /* motion */ --theme-trans: 160ms ease; } /* 預設：dark（你目前的 UI 視覺） */ html[data-theme="dark"]{ --bg: #070b14; --panel: rgba(255,255,255,0.04); --panel2: rgba(255,255,255,0.06); --line: rgba(255,255,255,0.10); --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.62); --primary: #4f8cff; --primary2: rgba(79,140,255,0.18); --danger: #ff4f70; --danger2: rgba(255,79,112,0.18); --pos: #72f3a6; --neg: #ff5b70; /* Topbar / Drawer */ --topbar-bg: rgba(7, 11, 20, 0.65); --nav-text: rgba(255,255,255,0.85); --brand-border: rgba(255,255,255,0.14); /* 背景漸層（頁面底圖） */ --bg-grad1: rgba(79,140,255,0.12); --bg-grad2: rgba(255,79,112,0.10); --bg-grad3: rgba(114,243,166,0.08); } /* Light（CFO 友善、白底清楚格線） */ html[data-theme="light"]{ /* Page background (報表底色：淡灰，不要霧白) */ --bg: #f3f4f6; /* Surfaces（卡片/表格底：要夠白） */ --panel: #ffffff; --panel2: #f9fafb; /* Gridlines（Light 的線條要清楚） */ --line: #e5e7eb; /* Text */ --text: #111827; --muted: #6b7280; /* Brand */ --primary: #2563eb; --primary2: rgba(37,99,235,0.12); --danger: #e11d48; --danger2: rgba(225,29,72,0.10); /* Status */ --pos: #0f9d58; --neg: #dc2626; /* Topbar / Drawer */ --topbar-bg: rgba(255,255,255,0.92); --nav-text: rgba(17,24,39,0.88); --brand-border: rgba(17,24,39,0.16); /* 背景漸層（Light 版幾乎關掉玻璃感） */ --bg-grad1: rgba(37,99,235,0.04); --bg-grad2: rgba(225,29,72,0.02); --bg-grad3: rgba(15,157,88,0.02); } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: var(--font); color: var(--text); background: radial-gradient(1200px 600px at 20% 10%, var(--bg-grad1), transparent 60%), radial-gradient(900px 500px at 80% 10%, var(--bg-grad2), transparent 60%), radial-gradient(900px 700px at 60% 90%, var(--bg-grad3), transparent 60%), var(--bg); transition: background var(--theme-trans), color var(--theme-trans); } a{ color: var(--primary); text-decoration:none; } a:hover{ text-decoration:underline; } .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .small{ font-size:12px; } .muted{ color: var(--muted); } .mono{ font-family: var(--mono); } .pos{ color: var(--pos); } .neg{ color: var(--neg); } /* ---------- layout ---------- */ .container{ max-width: 1280px; margin: 0 auto; padding: 18px 18px 40px; } /* ✅ trades full width */ .container-wide{ max-width: none; padding-left: 16px; padding-right: 16px; } /* ---------- topbar ---------- */ .topbar{ position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); background: var(--topbar-bg); border-bottom: 1px solid var(--line); } .topbar-inner{ max-width: 1280px; margin: 0 auto; padding: 12px 18px; display:flex; align-items:center; justify-content:space-between; gap: 14px; } .brand{ display:flex; align-items:center; gap:10px; } .brand-badge{ width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, rgba(79,140,255,0.35), rgba(255,79,112,0.25)); border: 1px solid var(--brand-border); box-shadow: 0 10px 26px rgba(0,0,0,0.25); } .brand-title{ font-weight: 700; letter-spacing: 0.3px; } .nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .nav a{ padding: 7px 10px; border-radius: 12px; color: var(--nav-text); border: 1px solid transparent; } .nav a:hover{ background: var(--panel2); border-color: var(--line); text-decoration:none; } /* ---------- cards ---------- */ .card{ background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 14px; margin-top: 14px; } /* ✅ full width card */ .card-wide{ width: 100%; } .card-title{ font-size: 16px; font-weight: 700; letter-spacing: 0.2px; } /* ---------- buttons ---------- */ .btn{ appearance:none; border: 1px solid var(--brand-border); background: var(--panel2); color: rgba(255,255,255,0.92); border-radius: 14px; padding: 8px 12px; font-size: 13px; cursor:pointer; transition: transform .06s ease, background .12s ease, border-color .12s ease; user-select:none; } .btn:hover{ background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); } .btn:active{ transform: translateY(1px); } .btn.primary{ background: var(--primary2); border-color: rgba(79,140,255,0.42); } .btn.primary:hover{ background: rgba(79,140,255,0.24); border-color: rgba(79,140,255,0.55); } .btn.danger{ background: var(--danger2); border-color: rgba(255,79,112,0.45); } .btn.danger:hover{ background: rgba(255,79,112,0.26); border-color: rgba(255,79,112,0.60); } .iconbtn{ width: 34px; height: 34px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor:pointer; transition: background var(--theme-trans), border-color var(--theme-trans), color var(--theme-trans); } .iconbtn:hover{ background: var(--panel); border-color: var(--line); } /* ---------- inputs ---------- */ input, select, textarea{ width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); padding: 9px 10px; outline: none; font-size: 13px; transition: background var(--theme-trans), border-color var(--theme-trans), color var(--theme-trans); } input::placeholder, textarea::placeholder{ color: var(--muted); opacity: .55; } input:focus, select:focus, textarea:focus{ border-color: rgba(79,140,255,0.55); box-shadow: 0 0 0 3px rgba(79,140,255,0.15); } /* ---------- forms ---------- */ .formgrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; margin-top: 12px; } .formgrid label{ display:flex; flex-direction: column; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.78); } /* ---------- table ---------- */ .table-wrap{ overflow:auto; border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; background: rgba(0,0,0,0.10); max-height: 72vh; } /* ✅ even wider feel (no extra padding loss) */ .table-wrap-wide{ width: 100%; } table{ width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1450px; /* allow horizontal scroll */ } thead th{ position: sticky; top: 0; background: rgba(10,16,30,0.95); backdrop-filter: blur(10px); z-index: 3; text-align: left; padding: 10px 10px; font-size: 12px; color: rgba(255,255,255,0.86); border-bottom: 1px solid rgba(255,255,255,0.10); white-space: nowrap; } tbody td{ padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 13px; color: rgba(255,255,255,0.88); vertical-align: middle; white-space: nowrap; } tbody tr:hover td{ background: rgba(255,255,255,0.03); } tbody td.mono{ font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1px; } thead th:first-child{ border-top-left-radius: 14px; } thead th:last-child{ border-top-right-radius: 14px; } /* ---------- Excel-like header UI ---------- */ .th-wrap{ display:flex; align-items:center; justify-content: space-between; gap:10px; } .th-label{ user-select:none; cursor:pointer; color: rgba(255,255,255,0.88); } .filter-btn{ width: 28px; height: 28px; border-radius: 10px; border: 1px solid var(--brand-border); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.72); cursor:pointer; display:flex; align-items:center; justify-content:center; line-height: 1; } .filter-btn:hover{ background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.20); } .filter-btn.active{ border-color: rgba(79,140,255,0.55); background: rgba(79,140,255,0.18); color: rgba(255,255,255,0.92); } /* ---------- popover ---------- */ .filter-popover{ position: absolute; width: 320px; border-radius: 16px; border: 1px solid var(--brand-border); background: rgba(12, 16, 28, 0.92); backdrop-filter: blur(14px); box-shadow: 0 18px 60px rgba(0,0,0,0.55); padding: 12px; z-index: 500; } .fp-title{ font-weight: 700; font-size: 13px; margin-bottom: 10px; color: rgba(255,255,255,0.90); } .fp-input{ border-radius: 12px; border: 1px solid var(--brand-border); background: var(--panel2); color: rgba(255,255,255,0.92); padding: 9px 10px; font-size: 13px; outline: none; } .fp-range{ display:flex; gap:10px; } .fp-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top: 12px; } .fp-muted{ color: rgba(255,255,255,0.60); font-size: 12px; } /* actions column buttons tighter */ tbody td .btn{ padding: 6px 10px; border-radius: 12px; font-size: 12px; } /* ---------- modal ---------- */ .modal{ position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; padding: 18px; background: rgba(0,0,0,0.55); z-index: 200; } .modal.hidden{ display:none; } /* ===================================================== Utilities ===================================================== */ .hidden{ display:none !important; } /* ✅ for collapsible panels / popovers across pages */ .modal-card{ width: 100%; max-width: 920px; border-radius: 18px; border: 1px solid var(--brand-border); background: rgba(12, 16, 28, 0.92); backdrop-filter: blur(14px); box-shadow: 0 18px 60px rgba(0,0,0,0.55); padding: 14px 14px 12px; } .modal-h{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.10); } .modal-title{ font-weight: 800; letter-spacing: 0.2px; } .modal-f{ display:flex; align-items:center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.10); margin-top: 12px; } /* ---------- responsive ---------- */ @media (max-width: 900px){ .formgrid{ grid-template-columns: 1fr; } .topbar-inner{ flex-direction: column; align-items: flex-start; } } /* subtle scrollbar */ .table-wrap::-webkit-scrollbar{ height: 10px; width: 10px; } .table-wrap::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border-radius: 999px; } .table-wrap::-webkit-scrollbar-track{ background: rgba(255,255,255,0.04); } /* ========================= App Shell + Drawer ========================= */ :root{ --drawer-w: 260px; --drawer-w-collapsed: 72px; } /* shell layout */ .app-shell{ display:flex; min-height: calc(100vh - 64px); /* topbar height */ } .app-content{ flex:1; min-width: 0; padding-left: 0; } /* topbar tweak (if you already have .topbar, keep yours; this just补強) */ .topbar{ position: sticky; top: 0; z-index: 50; height: 64px; display:flex; align-items:center; justify-content:space-between; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(6,10,18,.88); backdrop-filter: blur(10px); } .topbar-left{ display:flex; align-items:center; gap:12px; } .topbar-right{ display:flex; align-items:center; gap:10px; } .iconbtn-lg{ width: 42px; height: 42px; border-radius: 12px; font-size: 18px; } /* drawer */ .drawer{ width: var(--drawer-w); flex: 0 0 var(--drawer-w); border-right: 1px solid rgba(255,255,255,.08); background: rgba(10,14,22,.62); backdrop-filter: blur(12px); position: sticky; top: 64px; /* under topbar */ height: calc(100vh - 64px); overflow: hidden; } .drawer-inner{ height: 100%; padding: 14px 12px; overflow:auto; } .drawer-sec{ margin-bottom: 18px; } .drawer-sec-title{ font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.55); margin: 6px 10px 10px; text-transform: uppercase; } .drawer-item{ display:flex; align-items:center; gap:10px; padding: 10px 12px; margin: 6px 6px; border-radius: 12px; color: rgba(255,255,255,.86); text-decoration: none; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); } .drawer-item:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); } .drawer-item.active{ background: linear-gradient(180deg, rgba(59,130,246,.22), rgba(59,130,246,.10)); border-color: rgba(59,130,246,.28); color: rgba(255,255,255,.95); } .drawer-dot{ width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.25); } .drawer-item.active .drawer-dot{ background: rgba(59,130,246,.9); } /* drawer: section title with actions */ .drawer-sec-title-row{ display:flex; align-items:center; justify-content:space-between; } .icon-btn{ width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: rgba(255,255,255,.86); cursor:pointer; display:flex; align-items:center; justify-content:center; } .icon-btn:hover{ background: rgba(255,255,255,.07); } .icon-btn.active{ border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.16); } /* report sheets list */ .report-sheets{ display:flex; flex-direction:column; gap: 6px; } .sheet-item{ position: relative; } .sheet-actions{ margin-left:auto; display:flex; gap: 6px; align-items:center; } .mini-btn{ width: 34px; height: 32px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: rgba(255,255,255,.80); cursor: pointer; display:flex; align-items:center; justify-content:center; } .mini-btn:hover{ background: rgba(255,255,255,.07); } .mini-btn.del{ border-color: rgba(244,63,94,.28); } .sheet-rename-input{ flex: 1; min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(59,130,246,.28); color: rgba(255,255,255,.95); border-radius: 10px; padding: 6px 10px; outline: none; } .drawer-add{ margin: 10px 6px 6px; padding: 12px 12px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.16); background: rgba(255,255,255,.02); color: rgba(255,255,255,.86); cursor:pointer; } .drawer-add:hover{ background: rgba(255,255,255,.05); } /* drawer resizer */ .drawer-resizer{ position:absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: ew-resize; } .no-select{ user-select:none; } /* desktop collapsed */ body.drawer-collapsed .drawer{ width: var(--drawer-w-collapsed); flex-basis: var(--drawer-w-collapsed); } body.drawer-collapsed .drawer-text, body.drawer-collapsed .drawer-sec-title, body.drawer-collapsed .drawer-add, body.drawer-collapsed .sheet-actions, body.drawer-collapsed .drawer-resizer{ display:none !important; } body.drawer-collapsed .drawer-item{ justify-content:center; } .drawer-foot{ padding: 10px; opacity: .7; } /* overlay for small screens */ .drawer-overlay{ display:none; position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); } /* responsive: drawer becomes off-canvas */ @media (max-width: 1100px){ .drawer{ position: fixed; top: 64px; left: 0; z-index: 70; transform: translateX(-110%); transition: transform .18s ease; } body.drawer-open .drawer{ transform: translateX(0); } .drawer-overlay{ display:none; } body.drawer-open .drawer-overlay{ display:block; } } .fxcell-pos{ background: rgba(114,243,166,0.12); } .fxcell-neg{ background: rgba(255,91,112,0.12); } .fxcell-na { color: rgba(255,255,255,0.38); } .fx-matrix table{ min-width: 1100px; } .fx-matrix td, .fx-matrix th{ text-align: right; } .fx-matrix th.sticky-col{ position: sticky; left: 0; z-index: 2; background: rgba(10,16,30,0.95); } .fx-matrix td.sticky-col{ position: sticky; left: 0; z-index: 1; background: rgba(0,0,0,0.18); } /* ---------- FX Trend (new) ---------- */ .kpi-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } @media (max-width: 1100px){ .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kpi-card{ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 12px 12px 10px; } .kpi-title{ font-size: 12px; color: rgba(255,255,255,0.70); } .kpi-value{ font-size: 22px; font-weight: 800; letter-spacing: 0.2px; margin-top: 4px; } .kpi-sub{ font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 4px; } .chart-box{ margin-top: 12px; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; overflow: hidden; background: rgba(0,0,0,0.10); } .chart-box .chart{ width: 100%; min-height: 560px; } /* ===================================================================== Page Custom Styles ===================================================================== 2.1.輸入外匯原始部位明細 (fx_raw_positions_v2.html) - 會看到的按鈕/文字：「匯入部位資料（CSV / Excel）」「定義部位名稱（Account → Position Name）」「+ 新增單筆」「下載 CSV」「刷新」 - 這一頁專屬：部位名稱 Mapping Modal、badge 樣式、表頭次標 ===================================================================== */ .page-fx-raw .th-sub{ display:block; font-size:11px; opacity:.72; margin-top:2px; font-weight:500; white-space:nowrap; } /* 「Rule」狀態標籤：default / mapping / manual */ .page-fx-raw .badge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:12px; line-height:16px; border:1px solid rgba(255,255,255,.14); opacity:.95; } .page-fx-raw .badge.default{ background:rgba(255,255,255,.04); } .page-fx-raw .badge.mapping{ background:rgba(66,153,225,.12); border-color:rgba(66,153,225,.35); } .page-fx-raw .badge.manual{ background:rgba(236,201,75,.10); border-color:rgba(236,201,75,.35); } /* 「部位名稱定義（Account → Position Name）」彈窗：左右雙欄布局 */ .page-fx-raw .map-modal-card{ width:min(1240px,96vw); max-width:1240px; max-height:calc(100vh - 80px); overflow:hidden; display:flex; flex-direction:column; } .page-fx-raw .map-tabs{ display:flex; gap:8px; margin-top:10px; margin-bottom:8px; } /* Tabs：建立/套用｜規則總覽 */ .page-fx-raw .map-tab{ padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); cursor:pointer; font-weight:700; font-size:13px; color:rgba(255,255,255,.86); } .page-fx-raw .map-tab:hover{ background:rgba(255,255,255,.06); } .page-fx-raw .map-tab.active{ background:rgba(66,153,225,.22); border-color:rgba(66,153,225,.55); box-shadow:0 0 0 1px rgba(66,153,225,.18) inset; } .page-fx-raw .map-body{ flex:1; overflow:hidden; display:flex; flex-direction:column; } .page-fx-raw .map-pane{ flex:1; overflow:hidden; } .page-fx-raw .map-grid{ display:flex; gap:12px; height:100%; } .page-fx-raw .map-left{ flex:1; min-width:520px; display:flex; flex-direction:column; overflow:hidden; } .page-fx-raw .map-left .table-wrap{ flex:1; overflow:auto; border:1px solid rgba(255,255,255,.08); border-radius:12px; } .page-fx-raw .map-right{ width:380px; min-width:320px; flex-shrink:0; } .page-fx-raw .map-right .card{ position:sticky; top:0; } /* Mapping 清單表格（左側）：讓文字可以省略號、欄寬可調 */ .page-fx-raw #mapPool table{ table-layout:fixed; } .page-fx-raw .map-table{ width:100%; border-collapse:collapse; table-layout:fixed; } .page-fx-raw .map-table th, .page-fx-raw .map-table td{ padding:4px 8px; /* 更緊密 */ font-size:12.5px; vertical-align:top; min-width:0; /* 允許縮到更小 */ } .page-fx-raw .map-table td .ellipsis{ display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 欄寬：保留重要欄位可讀性（避免全部被縮成 20px） */ .page-fx-raw #mapPool .map-table th:nth-child(1), .page-fx-raw #mapPool .map-table td:nth-child(1){ width:44px; } /* 勾選 */ .page-fx-raw #mapPool .map-table th:nth-child(2), .page-fx-raw #mapPool .map-table td:nth-child(2){ width:160px; } /* Account */ .page-fx-raw #mapPool .map-table th:nth-child(5), .page-fx-raw #mapPool .map-table td:nth-child(5){ width:120px; } /* Rule */ .page-fx-raw #mapPool .map-table th:nth-child(6), .page-fx-raw #mapPool .map-table td:nth-child(6){ width:90px; text-align:right; } /* 影響筆數 */ .page-fx-raw .map-kpi{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; } .page-fx-raw .map-kpi .pill{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); border-radius:999px; padding:4px 10px; font-size:12px; } .page-fx-raw .map-note{ border-left:3px solid rgba(66,153,225,.45); padding-left:10px; } /* 共用：hidden */ .page-fx-raw .hidden{ display:none!important; } /* Resizable columns：表頭右邊緣可拖拉 */ .page-fx-raw .map-table th{ position:relative; } .page-fx-raw .col-resizer{ position:absolute; top:0; right:-2px; width:6px; height:100%; cursor:col-resize; user-select:none; } .page-fx-raw .col-resizer:hover{ background:rgba(255,255,255,.10); } .page-fx-raw .col-resizer:active{ background:rgba(66,153,225,.25); } /* ===================================================================== 2.2.輸入外匯避險交易明細 (trades.html) - 會看到的按鈕/文字：「上傳 CSV」「下載 CSV」「+ 新增交易」「刷新」 - 這一頁專屬：Filter Popover（Excel 風格漏斗）更像 panel ===================================================================== */ /* 讓交易頁的 select/input 更像「表單控件」一致高度 */ .page-trades .modal-card select, .page-trades .modal-card input, .page-trades .filter-popover select, .page-trades .filter-popover input{ height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.20); color:rgba(255,255,255,.92); padding:0 12px; outline:none; } .page-trades .modal-card select:focus, .page-trades .modal-card input:focus, .page-trades .filter-popover select:focus, .page-trades .filter-popover input:focus{ border-color:rgba(120,180,255,.55); } /* 原生 select 的下拉箭頭（仍是 native select） */ .page-trades .modal-card select, .page-trades .filter-popover select{ appearance:none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%), linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:34px; } /* 交易頁：避免 popover 被表格 sticky header 蓋住 */ .page-trades .filter-popover{ z-index:20000; } /* Filter Popover：做成像「Excel/面板」的容器 */ .page-trades .fp-panel{ border-radius:16px; border:1px solid rgba(255,255,255,.16); background:rgba(12,16,26,.98); box-shadow:0 24px 80px rgba(0,0,0,.55); overflow:hidden; backdrop-filter: blur(10px); width:320px; } .page-trades .fp-head{ padding:10px 12px 8px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:8px; } .page-trades .fp-title{ font-size:13px; font-weight:900; opacity:.92; display:flex; align-items:center; justify-content:space-between; gap:10px; } .page-trades .fp-search{ width:100%; height:36px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.20); color:rgba(255,255,255,.92); padding:0 12px; outline:none; } .page-trades .fp-search:focus{ border-color:rgba(120,180,255,.55); } .page-trades .fp-list{ max-height:320px; overflow:auto; padding:8px; } .page-trades .fp-item{ display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:12px; cursor:pointer; user-select:none; font-size:14px; } .page-trades .fp-item:hover{ background:rgba(255,255,255,.06); } .page-trades .fp-check{ width:18px; height:18px; border-radius:6px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.20); display:inline-flex; align-items:center; justify-content:center; font-size:12px; opacity:.85; flex:0 0 auto; } .page-trades .fp-item[data-checked="1"] .fp-check{ border-color:rgba(255,90,140,.9); background:rgba(255,90,140,.22); box-shadow:0 0 0 3px rgba(255,90,140,.10); } .page-trades .fp-item[data-checked="1"] .fp-check::before{ content:"✓"; color:rgba(255,255,255,.95); font-weight:900; transform: translateY(-0.5px); } .page-trades .fp-foot{ display:flex; gap:10px; justify-content:flex-end; align-items:center; padding:10px 10px; border-top:1px solid rgba(255,255,255,.08); } .page-trades .fp-mini{ margin-right:auto; font-size:12px; opacity:.75; padding:6px 8px; } /* ===================================================================== Drawer（左側選單）客製化樣式 - 對應畫面：左側「參考資料 / 輸入原始資料 / 報表」清單 - 來源：drawer.html 內原本的