/* Web-Ragic-Database theme system (light/dark) Usage: theme.js sets . */ :root{ color-scheme: light; --bg: #efefef; --text: #222; --muted: #666; --card-bg: #fff; --card-shadow: 0 2px 12px rgba(0,0,0,0.08); --border: #ddd; --border-soft: #eee; --input-bg: #fff; --input-border: #ccc; --table-bg: #fff; --table-head-bg: #f5f5f5; --row-border: #eee; --subcard-bg: #fafafa; --link: #0b5bd3; --link-text: #111; --link-hover-bg: #f8f8f8; --btn-bg: #fff; --btn-border: #ddd; --btn-hover-bg: #f6f6f6; --code-bg: #f6f6f6; /* customer-supplied material (料號 8xxxx...) */ --cust-supplied-text: #7a4d2b; /* coffee tone */ } html[data-theme="dark"]{ color-scheme: dark; --bg: #0f1115; --text: #e7eaf0; --muted: #a8b0c2; --card-bg: #171a21; --card-shadow: 0 6px 22px rgba(0,0,0,0.35); --border: #2a2f3a; --border-soft: #232836; --input-bg: #141823; --input-border: #343b4a; --table-bg: #171a21; --table-head-bg: #1f2430; --row-border: #232836; --subcard-bg: #121520; --link: #8ab4ff; --link-text: #e7eaf0; --link-hover-bg: #1f2430; --btn-bg: #141823; --btn-border: #343b4a; --btn-hover-bg: #1f2430; --code-bg: #111521; /* customer-supplied material (料號 8xxxx...) */ --cust-supplied-text: #d6b08a; /* readable warm tone on dark */ } /* Global overrides (use !important because existing pages have inline CSS). */ body{ background: var(--bg) !important; color: var(--text) !important; } .muted{ color: var(--muted) !important; } .card{ background: var(--card-bg) !important; box-shadow: var(--card-shadow) !important; } /* common controls */ select, input, textarea{ background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--input-border) !important; } /* placeholder should stay readable in dark mode */ input::placeholder, textarea::placeholder{ color: color-mix(in srgb, var(--muted) 85%, transparent) !important; opacity: 1 !important; } button{ background: var(--btn-bg) !important; color: var(--text) !important; border-color: var(--btn-border) !important; } button:hover{ background: var(--btn-hover-bg) !important; } /* primary action buttons (login, etc.) */ #btn, button.primary{ background: var(--link) !important; border-color: var(--link) !important; color: #fff !important; } #btn:hover, button.primary:hover{ filter: brightness(1.05); } /* links */ a{ color: var(--link) !important; } a.link{ background: var(--card-bg) !important; border-color: var(--border) !important; color: var(--link-text) !important; } a.link:hover{ background: var(--link-hover-bg) !important; } .chip{ background: var(--card-bg) !important; border-color: var(--border) !important; color: var(--link-text) !important; } .chip:hover{ background: var(--btn-hover-bg) !important; } /* tables */ .ps-table, .detailTable{ background: var(--table-bg) !important; } .ps-table th, .detailTable th{ background: var(--table-head-bg) !important; border-bottom-color: var(--border) !important; } .ps-table td, .detailTable td{ border-bottom-color: var(--row-border) !important; } /* audit-order-center uses plain ,
, */ table{ color: var(--text) !important; } th{ background: var(--table-head-bg) !important; color: var(--muted) !important; border-bottom-color: var(--border) !important; } td{ border-bottom-color: var(--row-border) !important; } /* audit-order-center detail row highlighting */ tr.rowOk{ background: var(--table-bg) !important; } tr.rowBad{ background: color-mix(in srgb, #ff4d4d 10%, var(--table-bg)) !important; } /* ETA page order rows */ .so-row{ background: color-mix(in srgb, var(--link) 18%, var(--table-bg)) !important; } .so-row.alt{ background: color-mix(in srgb, var(--link) 12%, var(--table-bg)) !important; } .so-row.not-started{ background: color-mix(in srgb, #ff4d4d 12%, var(--table-bg)) !important; } /* status badge */ .badge{ background: color-mix(in srgb, var(--muted) 22%, transparent) !important; color: var(--text) !important; } .subCard{ background: var(--subcard-bg) !important; border-color: var(--border-soft) !important; } pre, code{ background: var(--code-bg) !important; color: var(--text) !important; } /* Customer-supplied material rows (料號以 8 開頭) Apply to whole row but preserve explicit shortage highlight (.shortNum). */ tr.wrdb-cust-supplied td:not(.shortNum){ color: var(--cust-supplied-text) !important; font-weight: 700; } /* KPI cards (audit-order-center) */ .kpi{ background: var(--subcard-bg) !important; border-color: var(--border-soft) !important; } .kpi .k{ color: var(--muted) !important; } /* audit-order-center flags */ .flag{ background: var(--btn-bg) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="dark"] .bad{ background: rgba(255, 120, 120, 0.12) !important; border-color: rgba(255, 120, 120, 0.55) !important; } html[data-theme="dark"] .warn{ background: rgba(255, 210, 120, 0.14) !important; border-color: rgba(255, 210, 120, 0.55) !important; } html[data-theme="dark"] .good{ background: rgba(120, 255, 170, 0.10) !important; border-color: rgba(120, 255, 170, 0.45) !important; } /* audit-order-center calendar */ .calDow{ color: var(--muted) !important; } .calDay{ background: var(--btn-bg) !important; border-color: var(--border-soft) !important; color: var(--text) !important; } .calDay:hover{ background: var(--btn-hover-bg) !important; } .calDay.muted{ color: color-mix(in srgb, var(--muted) 60%, transparent) !important; } .calDay.disabled{ opacity: 0.45 !important; } .calDay.start, .calDay.end{ background: var(--link) !important; border-color: var(--link) !important; color: #fff !important; } .calDay.inRange{ background: color-mix(in srgb, var(--link) 18%, transparent) !important; border-color: color-mix(in srgb, var(--link) 35%, var(--border)) !important; } /* override common inline light borders used in audit page */ [style*="border:1px solid #eee"], [style*="border: 1px solid #eee"], [style*="border:1px solid #ddd"], [style*="border: 1px solid #ddd"]{ border-color: var(--border) !important; } /* theme toggle button */ #wrdb-theme-toggle{ position: fixed; right: 12px; bottom: 12px; z-index: 9999; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text); border-radius: 999px; padding: 8px 10px; font-size: 12px; font-weight: 800; cursor: pointer; opacity: 0.92; } #wrdb-theme-toggle:hover{ background: var(--btn-hover-bg); opacity: 1; } /* sync status floating badge */ #wrdb-sync-badge{ overflow: hidden; backdrop-filter: blur(8px); } #wrdb-sync-badge:hover{ opacity: 1 !important; transform: translateY(-1px); } #wrdb-sync-text{ overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px){ #wrdb-sync-badge{ left: 10px !important; bottom: 58px !important; padding: 8px 9px !important; max-width: calc(100vw - 20px) !important; font-size: 11px !important; } #wrdb-sync-text{ max-width: 110px; } }