/* ========================================================== APP CSS (GLOBAL) ---------------------------------------------------------- Purpose: - Global base styles used across the application Notes: - Keep other pages stable; /fm has additional styling in /assets/css/filemanager.css ========================================================== */ /* ========================================================== THEME TOKENS (DARK DEFAULTS) ========================================================== */ :root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; --bg: #0b0c10; --surface: #121522; --surface-2: #111319; --border: #202431; --border-2: #21263a; --text: #eaeaea; --muted: #9aa3ba; --link: #9fd3ff; --radius: 14px; --radius-sm: 10px; --shadow: 0 8px 24px rgba(0,0,0,0.35); /* Controls */ --control-bg: #0f1220; --control-border: #2b3350; --control-text: #ffffff; --btn-bg: #1b2a46; --btn-border: #2b416d; --btn-text: #ffffff; /* Theme Toggle colors (your Option 1 uses these) */ --toggle-on: #0099ff; --toggle-off: #f0f0f0; --toggle-dur: 0.6s; } /* ========================================================== LIGHT THEME OVERRIDES - Applied when ========================================================== */ :root[data-theme="light"] { --bg: #f6f7fb; --surface: #ffffff; --surface-2: #ffffff; --border: #dde2ee; --border-2: #e6eaf4; --text: #0f172a; --muted: #475569; --link: #0b5bd3; --shadow: 0 10px 26px rgba(15, 23, 42, 0.12); --control-bg: #ffffff; --control-border: #c7d0e6; --control-text: #0f172a; --btn-bg: #eef2ff; --btn-border: #c7d0e6; --btn-text: #0f172a; --toggle-on: #0099ff; --toggle-off: #f0f0f0; } /* ========================================================== BASE ========================================================== */ body { margin: 0; background: var(--bg); color: var(--text); } a { color: var(--link); text-decoration: none; } /* ========================================================== LAYOUT ========================================================== */ .container { max-width: 980px; margin: 24px auto; padding: 0 14px; } /* /fm uses a full-height shell, so container differs */ .fm-container { max-width: none; margin: 0; padding: 0; min-height: calc(100vh - 58px); } /* ========================================================== TOP BAR ========================================================== */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .brand { font-weight: 700; letter-spacing: 0.5px; } /* Make nav stable and aligned (prevents ugly wrap/collapse) */ .topnav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .topnav a { margin-left: 0; /* we use gap now */ } /* ========================================================== CARDS / SURFACES ========================================================== */ .card { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 16px; margin-top: 14px; box-shadow: var(--shadow); } /* ========================================================== FORMS ========================================================== */ label { display: block; margin-top: 10px; color: #b9c0d1; font-size: 0.92rem; } :root[data-theme="light"] label { color: #334155; } input, button { width: 100%; padding: 10px 12px; margin-top: 6px; border-radius: var(--radius-sm); border: 1px solid var(--control-border); background: var(--control-bg); color: var(--control-text); } button, .btn { display: inline-block; width: auto; padding: 10px 14px; background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--btn-text); cursor: pointer; } button:disabled { opacity: 0.6; cursor: not-allowed; } /* ========================================================== ROW HELPERS ========================================================== */ .row { display: flex; gap: 10px; align-items: center; margin-top: 10px; } .row input { flex: 1; } /* ========================================================== TABLES ========================================================== */ .table { width: 100%; border-collapse: collapse; margin-top: 12px; } .table th, .table td { border-bottom: 1px solid #242a3d; padding: 10px 8px; text-align: left; font-size: 0.95rem; } :root[data-theme="light"] .table th, :root[data-theme="light"] .table td { border-bottom: 1px solid var(--border); } /* ========================================================== UTILITIES ========================================================== */ .muted { color: var(--muted); } .linkbtn { background: transparent; border: none; color: var(--link); cursor: pointer; padding: 0; } /* ========================================================== FOOTER ========================================================== */ .footer { padding: 20px; text-align: center; color: #8892ad; } :root[data-theme="light"] .footer { color: #64748b; } /* ========================================================== THEME TOGGLE (YOUR OPTION 1, SCALED + SCOPED) - Keep plastic design intact - Fix header alignment (NO margin:auto) ========================================================== */ .theme-toggle-wrap { display: inline-flex; align-items: center; gap: 10px; margin-left: 14px; user-select: none; } .theme-icon { font-size: 16px; line-height: 1; } .theme-toggle-label { font-size: 0.85rem; color: var(--muted); white-space: nowrap; } @media (max-width: 640px) { .theme-toggle-label { display: none; } } /* hide checkbox but keep accessible */ .theme-toggle-input { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Focus ring for accessibility */ .theme-toggle-input:focus-visible + .toy-toggle { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6em; } /* Make it topbar-friendly (scales whole component) */ .toy-toggle.toy-toggle--sm { font-size: 3.2px; /* scales the entire component */ width: 20em; height: 12em; } /* --------------------------- YOUR ORIGINAL OPTION 1 CSS --------------------------- */ .toy-toggle { background: radial-gradient(at top left,#fff 10%,#fff0 20%), radial-gradient(at top right,#fff 20%,#e4e4e4 35%); border-radius: 6em; box-shadow: 0 0 0.25em #0002, 0 3em 1.5em 0.5em #0002; cursor: pointer; display: block; font-size: 12px; position: relative; /* ✅ IMPORTANT FIX: do NOT center in header */ margin: 0; width: 20em; height: 12em; -webkit-tap-highlight-color: transparent; } .toy-toggle span { display: block; position: absolute; } .toy-toggle > span { top: 50%; left: 50%; } .toy-toggle > span:not(.handle) { transform: translate(-50%,-50%); } .border1 { background: var(--toggle-off); border-radius: 5.5em; box-shadow: 0 0 0.2em 0.1em var(--toggle-off); width: 19em; height: 11em; } .border2 { background: linear-gradient(0deg,#fff 33%,#ccc 45%); border-radius: 4.75em; box-shadow: 0 0 0.2em 0.3em var(--toggle-off) inset; width: 16.5em; height: 9.5em; } .border3, .handle { background: linear-gradient(90deg, var(--toggle-on) 50%, var(--toggle-off) 0); } .border3 { background-position: 75% 0; background-size: 200% 100%; border-radius: 4.25em; box-shadow: 0 0 0.1em 0.1em #ddd inset, 0 1.5em 1.5em 1em #0004 inset, 0 0 0 4.25em #0002 inset; width: 15.5em; height: 8.5em; transition: background-position var(--toggle-dur) ease-in-out; } .handle { border-radius: 50%; box-shadow: 0 0 0.5em 0 #0007; width: 8.5em; height: 8.5em; transform: translate(-90%,-50%); transition: transform var(--toggle-dur) ease-in-out; z-index: 0; } .handle:before { background: radial-gradient(2em 1.5em at 50% 35%,#fff6 15%,#fff0), radial-gradient(1.5em 2.5em at 75% 40%,#fff6 15%,#fff0), radial-gradient(100% 100% at 50% 33%,#0000 25%,#0003 50%); border-radius: 50%; box-shadow: 0 0 0.3em 0.1em #0003 inset; content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; } .handle-off, .handle-on { width: 50%; height: 100%; transition: transform calc(var(--toggle-dur)/2); z-index: 2; } .handle-off { background: var(--toggle-off); border-radius: 100% 0 0 100% / 50% 50% 50% 50%; right: 50%; transform-origin: 100% 50%; transition-delay: calc(var(--toggle-dur)/2); transition-timing-function: ease-out; } .handle-on { background: var(--toggle-on); border-radius: 0 100% 100% 0 / 50% 50% 50% 50%; left: 50%; transform: scaleX(0); transform-origin: 0 50%; transition-timing-function: ease-in; } /* ON state (scoped to our input class) */ .theme-toggle-input:checked + .toy-toggle .border3 { background-position: 25% 0; } .theme-toggle-input:checked + .toy-toggle .handle { transform: translate(-10%,-50%); } .theme-toggle-input:checked + .toy-toggle .handle-off { transform: scaleX(0); transition-delay: 0s; transition-timing-function: ease-in; } .theme-toggle-input:checked + .toy-toggle .handle-on { transform: scaleX(1); transition-delay: calc(var(--toggle-dur)/2); transition-timing-function: ease-out; } /* ========================================================== FILE MANAGER (GLOBAL LIGHT THEME CONTRAST PATCH) ---------------------------------------------------------- Problem: - In light theme, some FM panels still use dark backgrounds (set in filemanager.css), but text tokens flip to dark. Fix: - Force readable text on FM dark surfaces in light theme. - Scoped to .fm-* so other pages stay stable. ========================================================== */ :root[data-theme="light"] .fm-sidebar, :root[data-theme="light"] .fm-right, :root[data-theme="light"] .fm-toolbar, :root[data-theme="light"] .fm-surface, :root[data-theme="light"] .fm-dropzone { color: #f1f5f9; } :root[data-theme="light"] .fm-sidebar a, :root[data-theme="light"] .fm-right a, :root[data-theme="light"] .fm-toolbar a { color: #cfe6ff; } :root[data-theme="light"] .fm-muted, :root[data-theme="light"] .fm-tree-loading, :root[data-theme="light"] .fm-sidebar-title, :root[data-theme="light"] .fm-right-title { color: rgba(241,245,249,0.72); } :root[data-theme="light"] .fm-tab, :root[data-theme="light"] .fm-btn, :root[data-theme="light"] .fm-btn-ghost, :root[data-theme="light"] .fm-iconbtn, :root[data-theme="light"] .fm-search { color: #f1f5f9; } /* ========================================================== PATCH v2.0.1 — GLOBAL MOBILE + FM THEME GUARDRAILS ---------------------------------------------------------- Purpose: - Keep theme toggle/nav usable on small screens - Establish FM-safe light-theme inheritance from core tokens ========================================================== */ :root { --fm-safe-text-on-dark: #f1f5f9; --fm-safe-muted-on-dark: rgba(241,245,249,0.74); --fm-safe-link-on-dark: #cfe6ff; } :root[data-theme="light"] .fm-app { color: var(--text); } :root[data-theme="light"] .fm-sidebar, :root[data-theme="light"] .fm-right, :root[data-theme="light"] .fm-toolbar, :root[data-theme="light"] .fm-surface, :root[data-theme="light"] .fm-dropzone, :root[data-theme="light"] .fm-feature-surface { color: var(--text); } :root[data-theme="light"] .fm-sidebar a, :root[data-theme="light"] .fm-right a, :root[data-theme="light"] .fm-toolbar a, :root[data-theme="light"] .fm-actions a { color: var(--link); } @media (max-width: 900px) { .topbar { padding: 12px 14px; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .topnav { width: 100%; justify-content: flex-end; } } @media (max-width: 640px) { .topbar { padding: 10px 12px; } .brand { font-size: 1.05rem; } .topnav { gap: 10px; justify-content: space-between; } .theme-toggle-wrap { margin-left: 0; order: 2; } } @media (max-width: 520px) { .topnav { gap: 8px 12px; justify-content: flex-start; } .topnav a, .topnav .linkbtn { font-size: 0.95rem; } .toy-toggle.toy-toggle--sm { font-size: 2.8px; } } /* ========================================================== PATCH v2.0.2 — FM LIGHT THEME GUARDRAIL ---------------------------------------------------------- Keep app-level FM overrides token-based instead of forcing pale text on light backgrounds. ========================================================== */ :root[data-theme="light"] .fm-app, :root[data-theme="light"] .fm-app .fm-sidebar, :root[data-theme="light"] .fm-app .fm-right, :root[data-theme="light"] .fm-app .fm-toolbar, :root[data-theme="light"] .fm-app .fm-surface, :root[data-theme="light"] .fm-app .fm-feature-surface, :root[data-theme="light"] .fm-app .fm-dropzone { color: var(--text); } :root[data-theme="light"] .fm-app .fm-muted, :root[data-theme="light"] .fm-app .fm-tree-loading, :root[data-theme="light"] .fm-app .fm-sidebar-title, :root[data-theme="light"] .fm-app .fm-right-title, :root[data-theme="light"] .fm-app .fm-breadcrumb, :root[data-theme="light"] .fm-app .fm-k, :root[data-theme="light"] .fm-app .fm-pill, :root[data-theme="light"] .fm-app .fm-search::placeholder { color: var(--muted); } :root[data-theme="light"] .fm-app .fm-tab, :root[data-theme="light"] .fm-app .fm-btn, :root[data-theme="light"] .fm-app .fm-btn-ghost, :root[data-theme="light"] .fm-app .fm-iconbtn, :root[data-theme="light"] .fm-app .fm-search, :root[data-theme="light"] .fm-app .fm-sidenav-item, :root[data-theme="light"] .fm-app .fm-table, :root[data-theme="light"] .fm-app .fm-table th, :root[data-theme="light"] .fm-app .fm-table td { color: var(--text); }