/* ════════════════════════════════════════════════════════════════ Dio Finance OS — 深色冷色莫蘭迪 × 玻璃擬態 支援深色 / 亮色雙主題，透過 切換 ════════════════════════════════════════════════════════════════ */ /* Chart.js 的 canvas 預設用JS設定固定像素寬度，窄螢幕下若容器更窄會直接溢出版面 */ canvas { max-width: 100%; } :root { --bg-base: #0a0d10; --bg-elevated: #11151a; --bg-card: rgba(22, 28, 34, 0.65); --bg-card-hover: rgba(28, 35, 42, 0.75); --border-subtle: rgba(148, 163, 165, 0.12); --border-strong: rgba(148, 163, 165, 0.22); --accent-sage: #7a9b8e; --accent-sage-dim: rgba(122, 155, 142, 0.14); --accent-slate: #6b8299; --accent-slate-dim: rgba(107, 130, 153, 0.14); --accent-dust: #a89a8c; --positive: #7fb097; --positive-dim: rgba(127, 176, 151, 0.14); --negative: #c97f7f; --negative-dim: rgba(201, 127, 127, 0.14); --warning: #c9a876; --warning-dim: rgba(201, 168, 118, 0.14); --text-primary: #e4e8e6; --text-secondary: #9aa6a3; --text-muted: #687370; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; } /* 亮色主題 */ [data-theme="light"] { --bg-base: #e9edf0; --bg-elevated: #ffffff; --bg-card: rgba(255, 255, 255, 0.9); --bg-card-hover: rgba(255, 255, 255, 1); --border-subtle: rgba(100, 120, 130, 0.16); --border-strong: rgba(100, 120, 130, 0.32); --accent-sage: #4d8070; --accent-sage-dim: rgba(77, 128, 112, 0.12); --accent-slate: #3d6480; --accent-slate-dim: rgba(61, 100, 128, 0.12); --positive: #3a7d5a; --positive-dim: rgba(58, 125, 90, 0.1); --negative: #b84f4f; --negative-dim: rgba(184, 79, 79, 0.1); --warning: #946a20; --warning-dim: rgba(148, 106, 32, 0.1); --text-primary: #1a2228; --text-secondary: #4a5f6a; --text-muted: #8a9aa4; } [data-theme="light"] body { background-image: radial-gradient(ellipse 900px 700px at 10% 0%, rgba(77,128,112,0.07), transparent), radial-gradient(ellipse 900px 700px at 90% 100%, rgba(61,100,128,0.07), transparent); } [data-theme="light"] .sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.07); } [data-theme="light"] .glass-card, [data-theme="light"] .kpi-card { box-shadow: 0 3px 14px rgba(30,40,50,0.08); } [data-theme="light"] .kpi-card:hover, [data-theme="light"] .glass-card:hover { box-shadow: 0 6px 20px rgba(30,40,50,0.1); } /* 主題切換按鈕 */ .theme-toggle { width: 34px; height: 34px; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: all 0.15s; } .theme-toggle:hover { border-color: var(--accent-sage); color: var(--accent-sage); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg-base); background-image: radial-gradient(ellipse 800px 600px at 10% 0%, rgba(122, 155, 142, 0.05), transparent), radial-gradient(ellipse 800px 600px at 90% 100%, rgba(107, 130, 153, 0.05), transparent); color: var(--text-primary); font-family: 'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif; font-size: 14px; line-height: 1.6; min-height: 100vh; } a { color: inherit; text-decoration: none; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } /* ── 整體版面：側邊欄 + 主內容 ────────────────────────────────────── */ .app-shell { display: flex; min-height: 100vh; overflow-x: hidden; } .sidebar { width: 220px; flex-shrink: 0; background: var(--bg-elevated); border-right: 1px solid var(--border-subtle); padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 8px 12px 24px; margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); } .sidebar-brand-icon { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--accent-sage), var(--accent-slate)); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .sidebar-brand-text { display: flex; flex-direction: column; } .sidebar-brand-text .name { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; } .sidebar-brand-text .sub { font-size: 10px; color: var(--text-muted); } .nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; font-weight: 500; transition: all 0.15s ease; } .nav-link:hover { background: var(--bg-card-hover); color: var(--text-primary); } .nav-link.active { background: var(--accent-sage-dim); color: var(--accent-sage); font-weight: 700; } .nav-link .icon { width: 16px; text-align: center; flex-shrink: 0; } .sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-subtle); } .main-content { flex: 1; min-width: 0; /* 關鍵修正：flex child 預設 min-width:auto，不加這個會撐爆手機螢幕 */ padding: 28px 32px; max-width: 1400px; overflow-x: hidden; /* 防止任何子元素橫向溢出 */ } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .page-title { font-size: 20px; font-weight: 700; } .page-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 4px; } /* ── 玻璃擬態卡片 ──────────────────────────────────────────────── */ .glass-card { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 22px 24px; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; } .kpi-card { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 19px 21px; display: flex; flex-direction: column; gap: 9px; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .kpi-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } /* ── 空白狀態（無資料時的提示區塊）─────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 44px 20px; color: var(--text-muted); font-size: 12.5px; line-height: 1.7; border: 1.5px dashed var(--border-subtle); border-radius: var(--radius-md); background: var(--accent-sage-dim); } .empty-state .empty-icon { font-size: 26px; opacity: 0.55; } .kpi-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .kpi-value { font-size: 24px; font-weight: 700; line-height: 1.1; } .kpi-sub { font-size: 11px; } .kpi-sub.positive { color: var(--positive); } .kpi-sub.negative { color: var(--negative); } .kpi-sub.neutral { color: var(--text-muted); } .content-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .content-grid-main-side { display: grid; grid-template-columns: 1fr 340px; gap: 16px; } /* ── 表格 ──────────────────────────────────────────────────────── */ .data-table-wrap { overflow-x: auto; } table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; } table.data-table thead th { text-align: left; padding: 8px 12px; color: var(--text-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--border-subtle); } table.data-table tbody td { padding: 11px 12px; border-bottom: 1px solid rgba(148, 163, 165, 0.06); } table.data-table tbody tr { transition: background 0.12s ease; } table.data-table tbody tr:hover { background: rgba(122, 155, 142, 0.04); } .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; } .tag.positive { background: var(--positive-dim); color: var(--positive); } .tag.negative { background: var(--negative-dim); color: var(--negative); } .tag.neutral { background: rgba(148, 163, 165, 0.12); color: var(--text-secondary); } .tag.sage { background: var(--accent-sage-dim); color: var(--accent-sage); } .tag.slate { background: var(--accent-slate-dim); color: var(--accent-slate); } /* ── 按鈕 ──────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); border: none; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .btn-primary { background: var(--accent-sage); color: #0a0d10; } .btn-primary:hover { background: #8bac9e; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); } .btn-ghost:hover { color: var(--text-primary); border-color: var(--accent-sage); } .btn-danger { background: var(--negative-dim); color: var(--negative); } .btn-danger:hover { background: rgba(201, 127, 127, 0.25); } .btn-icon { width: 30px; height: 30px; padding: 0; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; } .btn-icon:hover { color: var(--text-primary); border-color: var(--border-strong); } .btn-icon.danger:hover { color: var(--negative); border-color: var(--negative); } /* ── 表單 ──────────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 11.5px; color: var(--text-secondary); font-weight: 600; } .form-field input, .form-field select, .form-field textarea { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: none; transition: border-color 0.15s ease; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent-sage); } .form-field-checkbox { display: flex; align-items: center; gap: 8px; flex-direction: row; } .form-field-checkbox input { width: 16px; height: 16px; accent-color: var(--accent-sage); } .modal-overlay { position: fixed; inset: 0; background: rgba(5, 7, 9, 0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 100; } .modal-overlay.open { display: flex; } .modal-box { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 24px 28px; width: 600px; max-width: 92vw; max-height: 86vh; overflow-y: auto; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .modal-title { font-size: 16px; font-weight: 700; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .search-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; } .search-bar input[type="text"] { flex: 1; max-width: 280px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 14px; color: var(--text-primary); font-size: 13px; outline: none; } .search-bar select { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text-primary); font-size: 13px; } /* ── 進度條（財務目標用） ──────────────────────────────────────── */ .progress-track { height: 6px; border-radius: 3px; background: var(--border-subtle); overflow: hidden; } .progress-fill { height: 100%; border-radius: 3px; background: var(--accent-sage); transition: width 0.5s ease; } /* ── 登入頁 ────────────────────────────────────────────────────── */ .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-card { width: 380px; background: var(--bg-card); backdrop-filter: blur(20px); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 40px 36px; } .login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; } .login-brand-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--accent-sage), var(--accent-slate)); display: flex; align-items: center; justify-content: center; font-size: 24px; } .login-brand .name { font-size: 18px; font-weight: 700; } .login-brand .sub { font-size: 11px; color: var(--text-muted); } .login-error { background: var(--negative-dim); color: var(--negative); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px; } .login-form { display: flex; flex-direction: column; gap: 14px; } .login-form .btn-primary { width: 100%; justify-content: center; padding: 11px; margin-top: 6px; } /* ── 響應式系統 ──────────────────────────────────────────────────── 三層斷點策略，而非單一斷點硬擠： - 桌面 (>1024px)：完整側邊欄，文字標籤可見 - 平板 (601-1024px)：側邊欄收窄成純圖示模式，不佔用內容寬度 - 手機 (≤600px)：側邊欄變成漢堡選單觸發的滑出式抽屜，不擠壓主內容 每層都各自處理 KPI 卡片密度、表格呈現、Modal 尺寸，而不是只縮放單一斷點。 ──────────────────────────────────────────────────────────────── */ /* 手機版漢堡選單按鈕，預設在桌面/平板隱藏 */ .mobile-menu-trigger { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 18px; cursor: pointer; flex-shrink: 0; } .mobile-topbar { display: none; } /* 抽屜背景遮罩，手機版開啟選單時鋪在內容上方、側邊欄下方 */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(5, 7, 9, 0.55); z-index: 90; } .sidebar-overlay.open { display: block; } /* ── 平板：601px-1024px，側邊欄收成純圖示，不擠主內容 ───────────────── */ @media (max-width: 1024px) and (min-width: 601px) { .sidebar { width: 72px; padding: 20px 10px; } .sidebar-brand { padding: 4px 0 20px; justify-content: center; } .sidebar-brand-text { display: none; } .nav-link { justify-content: center; padding: 11px 8px; } .nav-link span.label-text { display: none; } .nav-link .icon { width: auto; font-size: 16px; } .main-content { padding: 24px 22px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .content-grid-main-side { grid-template-columns: 1fr; } .dashboard-main-grid { grid-template-columns: 1fr !important; } } /* ── 手機：≤600px，側邊欄變成滑出抽屜，主內容全寬 ──────────────────── */ @media (max-width: 600px) { .app-shell { flex-direction: column; } /* 手機頂部固定列：漢堡按鈕 + 系統名稱，取代原本被壓縮到看不懂的橫向側邊欄 */ .mobile-topbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 80; } .mobile-menu-trigger { display: flex; } .mobile-topbar-title { font-size: 14px; font-weight: 700; } /* 側邊欄本身變成固定定位的滑出抽屜，預設藏在畫面左側外面 */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; max-width: 78vw; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 95; overflow-y: auto; flex-direction: column; } .sidebar.open { transform: translateX(0); } .sidebar-brand { border-bottom: 1px solid var(--border-subtle); } .nav-link span.label-text { display: inline; } .nav-link { padding: 12px 12px; white-space: normal; } .main-content { padding: 16px 14px; } .page-header { flex-direction: column; align-items: flex-start; gap: 10px; } .page-header > div:last-child { width: 100%; } .page-header .btn { width: 100%; justify-content: center; } /* KPI 卡片在手機改成單欄堆疊，2 欄在 320-375px 窄機種上數字會被擠斷行 */ .kpi-grid { grid-template-columns: 1fr; gap: 10px; } .kpi-card { padding: 16px 18px; } .kpi-value { font-size: 21px; } .content-grid-2, .content-grid-main-side { grid-template-columns: 1fr; gap: 12px; } /* 資產/負債圓餅圖：桌面版並排2欄，手機上窄欄位會把canvas擠爆，改成單欄堆疊 */ .chart-duo-grid { grid-template-columns: 1fr !important; } /* 表格：在手機上，超過 4 欄的表格幾乎不可能維持可讀性， 改用區塊式卡片排列取代逐欄排列，但仍保留原始 結構以維持語意， 用 CSS 把 thead 隱藏、每個 td 用 data-label 顯示對應欄位名稱。 哪些表格要套用這個堆疊模式，由模板端明確加上 .stack-on-mobile class 決定 （例如資產、負債、流水這類欄位少的表格適合；信貸攤還明細這種逐期數列資料， 堆疊反而比保留原始橫向表格更難對照期數，所以不加這個 class， 讓它走下面 .data-table-wrap 預設的橫向滑動）。 */ .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data-table.stack-on-mobile thead { display: none; } table.data-table.stack-on-mobile tbody tr { display: block; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-bottom: 10px; padding: 4px 0; background: rgba(255,255,255,0.015); } table.data-table.stack-on-mobile tbody td { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid rgba(148, 163, 165, 0.05); text-align: right; white-space: normal; } table.data-table.stack-on-mobile tbody td:last-child { border-bottom: none; } table.data-table.stack-on-mobile tbody td::before { content: attr(data-label); color: var(--text-muted); font-size: 11px; font-weight: 600; text-align: left; flex-shrink: 0; margin-right: 12px; } /* 操作按鈕欄（編輯/刪除圖示）沒有對應的標籤文字可顯示， 用 .col-actions 標記這一欄，改成置中排列按鈕，不顯示 ::before 標籤 */ table.data-table.stack-on-mobile tbody td.col-actions { justify-content: center; gap: 8px; } table.data-table.stack-on-mobile tbody td.col-actions::before { content: none; } .form-grid { grid-template-columns: 1fr; gap: 12px; } .modal-box { width: 92vw; padding: 18px; max-height: 88vh; } .modal-actions { flex-direction: column-reverse; gap: 8px; } .modal-actions .btn { width: 100%; justify-content: center; } .search-bar { flex-wrap: wrap; } .search-bar input[type="text"] { max-width: 100%; flex: 1 1 100%; } .login-card { width: 100%; padding: 32px 24px; } } /* 極窄手機 (≤375px，如 iPhone SE)：再收緊間距，避免內距吃掉太多可用寬度 */ @media (max-width: 375px) { .main-content { padding: 12px 10px; } .kpi-card, .glass-card { padding: 14px 14px; } .page-title { font-size: 17px; } } /* ── FAB 快速記帳浮動按鈕 ──────────────────────────────────────── */ .fab-btn { position: fixed; bottom: 28px; right: 24px; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-sage), var(--accent-slate)); color: #fff; font-size: 28px; font-weight: 300; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(122, 155, 142, 0.45); display: flex; align-items: center; justify-content: center; z-index: 60; transition: transform 0.15s ease, box-shadow 0.15s ease; line-height: 1; } .fab-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(122, 155, 142, 0.6); } .fab-btn:active { transform: scale(0.96); } /* 快速記帳分類 tag 按鈕 */ .quick-cat { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--card-border); background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.12s; font-family: inherit; } .quick-cat.selected { background: var(--accent-sage-dim); border-color: var(--accent-sage); color: var(--accent-sage); } .quick-cat:hover:not(.selected) { border-color: var(--border-strong); color: var(--text-primary); } @media (max-width: 600px) { .fab-btn { bottom: 80px; right: 16px; width: 50px; height: 50px; font-size: 26px; } }