/* * fd_dark.css — Dark theme overrides for FluxDrop * Include in index.html AFTER tailwindcss.css * Applied via [data-theme="dark"] on element. * * Strategy: * 1. CSS variable definitions at :root / [data-theme="dark"] * 2. Class-level overrides (.card, .btn, inputs, etc.) * 3. fd_addons.js MutationObserver patches the remaining * inline-style elements at runtime. */ /* ── CSS variables ─────────────────────────────────────────────────────────── */ :root { --fd-bg: #f0f9ff; --fd-surface: #ffffff; --fd-surface2: #f8fafc; --fd-surface3: #f1f5f9; --fd-border: #e2e8f0; --fd-text: #1e293b; --fd-text2: #374151; --fd-muted: #64748b; --fd-muted2: #94a3b8; --fd-accent: #3b82f6; --fd-accent-dark: #2563eb; --fd-accent-bg: #eff6ff; --fd-accent-border:#bfdbfe; --fd-danger: #dc2626; --fd-input-bg: #ffffff; /* Skeleton shimmer — light mode */ --fd-skel-base: #e2e8f0; --fd-skel-shine: #f1f5f9; } [data-theme="dark"] { --fd-bg: #0d1520; --fd-surface: #1a2535; --fd-surface2: #131f2e; --fd-surface3: #1e2d3d; --fd-border: #2d3f52; --fd-text: #e2e8f0; --fd-text2: #cbd5e1; --fd-muted: #94a3b8; --fd-muted2: #64748b; --fd-accent: #60a5fa; --fd-accent-dark: #3b82f6; --fd-accent-bg: #1e3a5f; --fd-accent-border:#2563eb; --fd-danger: #ef4444; --fd-input-bg: #0d1520; /* Skeleton shimmer — dark mode (matches the dark surface palette) */ --fd-skel-base: #1e2d3d; --fd-skel-shine: #2d3f52; } /* ── Mobile: hide the Modified column to give Name room ───────────────────── The ⋮ action button needs only ~44 px; on narrow screens the mtime column can crowd it to the left making it appear to overlap the time text. We hide mtime below 600 px where the table otherwise overflows. */ @media (max-width: 600px) { .fd-col-mtime { display: none !important; } } /* ── Body ──────────────────────────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: var(--fd-bg) !important; color: var(--fd-text); } /* ── Cards ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .card { background-color: var(--fd-surface) !important; color: var(--fd-text) !important; box-shadow: 0 10px 20px rgba(0,0,0,0.4) !important; } /* ── Buttons ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] .btn { background-color: var(--fd-accent) !important; } [data-theme="dark"] .btn:hover { background-color: var(--fd-accent-dark) !important; } /* ── Modals ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .modal-content { background-color: var(--fd-surface) !important; color: var(--fd-text) !important; } [data-theme="dark"] .modal-overlay { background-color: rgba(0,0,0,0.7) !important; } /* ── Inputs & Selects ───────────────────────────────────────────────────────── */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--fd-input-bg) !important; color: var(--fd-text) !important; border-color: var(--fd-border) !important; } [data-theme="dark"] input::placeholder { color: var(--fd-muted) !important; } /* ── Tailwind utility overrides for dark mode ──────────────────────────────── */ [data-theme="dark"] .text-blue-800 { color: #93c5fd !important; } [data-theme="dark"] .text-gray-600 { color: var(--fd-muted) !important; } [data-theme="dark"] .text-black { color: var(--fd-text) !important; } [data-theme="dark"] .bg-gray-200, [data-theme="dark"] .bg-gray-300 { background-color: var(--fd-surface3) !important; color: var(--fd-text) !important; } [data-theme="dark"] .bg-yellow-300 { background-color: #713f12 !important; color: #fef08a !important; } [data-theme="dark"] .border { border-color: var(--fd-border) !important; } [data-theme="dark"] .border-rounded { border-color: var(--fd-border) !important; } /* ── File browser breadcrumb / path bar ────────────────────────────────────── */ [data-theme="dark"] #path-breadcrumb { color: var(--fd-muted) !important; } /* ── Preview modal (already dark-ish but needs fixes) ──────────────────────── */ [data-theme="dark"] #preview-modal .preview-modal-content { background: #0a1628 !important; } /* ── Profile menu item ──────────────────────────────────────────────────────── */ [data-theme="dark"] .profile-menu-item { color: var(--fd-text) !important; } [data-theme="dark"] .profile-menu-item:hover { background-color: var(--fd-surface3) !important; } /* ── Tooltip ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .fd-tooltip-icon { background-color: var(--fd-surface3) !important; color: var(--fd-accent) !important; } /* ── Footer ──────────────────────────────────────────────────────────────────── */ [data-theme="dark"] #fluxdrop-footer { color: var(--fd-muted2) !important; } [data-theme="dark"] #fluxdrop-footer a { color: var(--fd-muted2) !important; } /* ── Style-fallback banner ──────────────────────────────────────────────────── */ [data-theme="dark"] #fd-style-fallback { display: none !important; } /* ── Noscript banner: no change needed (always shown) ──────────────────────── */ /* ── Scrollbar (Webkit/Blink) ────────────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--fd-surface2); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--fd-border); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--fd-muted2); } /* ── fd_addons.js dark overlay helper class ─────────────────────────────────── */ /* Applied by MutationObserver to inline-styled elements */ [data-theme="dark"] [data-fd-dark="surface"] { background: var(--fd-surface) !important; color: var(--fd-text) !important; } [data-theme="dark"] [data-fd-dark="surface2"] { background: var(--fd-surface2) !important; color: var(--fd-text) !important; } [data-theme="dark"] [data-fd-dark="surface3"] { background: var(--fd-surface3) !important; } [data-theme="dark"] [data-fd-dark="accent"] { background: var(--fd-accent-bg) !important; color: var(--fd-text) !important; border-color: var(--fd-accent-border) !important; } [data-theme="dark"] [data-fd-dark="input"] { background: var(--fd-input-bg) !important; color: var(--fd-text) !important; border-color: var(--fd-border) !important; } [data-theme="dark"] [data-fd-dark="hr"] { border-color: var(--fd-border) !important; } [data-theme="dark"] [data-fd-dark="text"] { color: var(--fd-text) !important; } [data-theme="dark"] [data-fd-dark="muted"] { color: var(--fd-muted) !important; } [data-theme="dark"] [data-fd-dark="header"] { background: linear-gradient(135deg,#1e3a5f,#2d4a7a) !important; } /* ── Dark mode theme toggle button (added by fd_addons.js) ─────────────────── */ #fd-theme-toggle { cursor: pointer; padding: 4px 10px; border-radius: 6px; font-size: 13px; border: 1px solid var(--fd-border); background: var(--fd-surface2); color: var(--fd-text); transition: background 0.2s, color 0.2s; white-space: nowrap; } #fd-theme-toggle:hover { background: var(--fd-surface3); } /* ── Debug bar ──────────────────────────────────────────────────────────────── */ #fd-debug-bar { position: fixed; bottom: 30px; left: 0; right: 0; height: 22px; line-height: 22px; background: rgba(15,23,42,0.92); color: #94a3b8; font-size: 11px; font-family: ui-monospace, monospace; padding: 0 10px; /* NOTE: intentionally the CSS maximum — NEVER lower this value. * The debug bar must always render above every modal and overlay. */ z-index: 2147483647; /* CSS max int */ display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; border-top: 1px solid #1e293b; pointer-events: none; } #fd-debug-bar .fd-db-label { color: #475569; flex-shrink: 0; pointer-events: none; } #fd-debug-bar .fd-db-text { flex: 1; overflow: hidden; text-overflow: ellipsis; } #fd-debug-bar .fd-db-clear { pointer-events: auto; cursor: pointer; color: #475569; flex-shrink: 0; padding: 0 4px; border-radius: 3px; } #fd-debug-bar .fd-db-clear:hover { color: #94a3b8; } #fd-debug-bar .fd-db-ok { color: #22c55e; } #fd-debug-bar .fd-db-err { color: #ef4444; } #fd-debug-bar .fd-db-warn { color: #f59e0b; } #fd-debug-bar .fd-db-in { color: #60a5fa; } /* ── Space analyzer modal ────────────────────────────────────────────────────── */ .fd-sa-bar-wrap { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--fd-border); font-size: 12px; } .fd-sa-bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--fd-surface3); overflow: hidden; min-width: 60px; } .fd-sa-bar-fill { height: 100%; border-radius: 4px; background: var(--fd-accent); transition: width 0.35s ease; } .fd-sa-name { flex: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fd-text); font-size: 12px; cursor: default; } .fd-sa-size { width: 68px; text-align: right; color: var(--fd-muted); font-size: 11px; flex-shrink: 0; } .fd-sa-type { width: 42px; font-size: 10px; color: var(--fd-muted2); text-align: center; flex-shrink: 0; } /* ── Spinner keyframe (used by fd_addons.js loading spinner injection) ──────── */ @keyframes fd-spin { to { transform: rotate(360deg); } } /* ── Mobile responsiveness ──────────────────────────────────────────────────── */ /* Page-level padding reduction */ @media (max-width: 600px) { body { padding-top: 0.75rem !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; } /* Header: stack vertically on very small screens */ body > header { flex-wrap: wrap; gap: 8px; margin-bottom: 0.75rem; } body > header h1 { font-size: 1.5rem; } /* Card: less padding on mobile */ .card { padding: 1rem !important; border-radius: 1rem !important; } /* Modal content: full-width */ .modal-content { width: 96% !important; padding: 1.25rem !important; } /* Preview modal: full screen on mobile */ #preview-modal .preview-modal-content { width: 100vw !important; max-width: 100vw !important; border-radius: 0 !important; max-height: 100dvh !important; } /* File list rows: stack name + actions */ .fd-file-row { flex-wrap: wrap; row-gap: 4px; } .fd-file-row .fd-file-actions { flex-wrap: wrap; } /* Profile menu panel: near full width */ #profile-menu-panel { min-width: unset !important; width: calc(100vw - 1.5rem) !important; } #profile-menu-modal { padding: 60px 0.75rem 0 0 !important; justify-content: flex-end !important; } /* Auth controls: smaller buttons */ #auth-controls .btn { padding: 0.5rem 0.85rem !important; font-size: 13px !important; } /* Upload form: stack on mobile */ #upload-form { flex-direction: column !important; align-items: stretch !important; } #upload-form input[type="file"] { width: 100% !important; max-width: 100% !important; } #upload-form .btn { width: 100% !important; } #upload-form label { align-self: flex-start; } /* Space analyzer modal */ .fd-sa-name { max-width: 130px; } } /* Slightly more breathing room on medium screens (tablets) */ @media (max-width: 768px) { .card { padding: 1.25rem !important; } /* File browser toolbar wraps neatly */ #app-root .card > div:first-child { row-gap: 8px; } } /* ── Markdown list markers ───────────────────────────────────────────────────── */ /* * Ensures

elements inside _mdToHtml output always show their bullet/number * even when Tailwind's preflight resets list-style to none. */ .fd-md-body ul, .fd-md-body ol { list-style: revert; padding-left: 1.6em; margin: 0.4em 0; } .fd-md-body li { list-style: revert; margin-bottom: 0.25em; } /* ── File row hover — properly themed for both modes ────────────────────────── */ /* Light mode: subtle blue-grey hover (replaces old hardcoded #f8fafc inline style) */ .fd-file-row { cursor: default; } .fd-file-row:hover { background: #e8f0fe !important; } /* Dark mode: clearly visible surface3 hover */ [data-theme="dark"] .fd-file-row:hover { background: var(--fd-surface3) !important; } /* ── Table dividers darker in dark mode ──────────────────────────────────────── */ [data-theme="dark"] tr.border-t { border-top-color: var(--fd-border) !important; } [data-theme="dark"] thead tr { border-bottom-color: var(--fd-border) !important; } /* ── File-name text colours use CSS vars — dark mode inherits automatically ─── */ /* File names: var(--fd-text) is set on the button inline, but override here too */ [data-theme="dark"] .fd-entry-name { color: var(--fd-text) !important; } /* Folder names keep the accent colour in dark mode */ [data-theme="dark"] .open-btn.fd-entry-name { color: var(--fd-accent) !important; } /* ── Trash row hover ─────────────────────────────────────────────────────────── */ .trash-row:hover { background: #e8f0fe !important; } [data-theme="dark"] .trash-row:hover { background: var(--fd-surface3) !important; } /* ── Mobile: hide mtime column and desktop action buttons ────────────────────── */ @media (max-width: 600px) { .fd-col-mtime { display: none !important; } .fd-actions-desktop { display: none !important; } .fd-more-btn { display: inline-block !important; } } /* Desktop: keep action buttons, also show "⋮" as a compact context-menu shortcut */ @media (min-width: 601px) { .fd-actions-desktop { display: inline-flex !important; gap: 3px; align-items: center; } .fd-more-btn { display: inline-block; margin-left: 4px; } } /* ════════════════════════════════════════════════════════════════════════════ * Round 2 additions * ════════════════════════════════════════════════════════════════════════════ */ /* ── Dark-mode flash prevention: html background matches --fd-bg ─────────── */ /* (Actual early-apply is done by inline