/* * JFiles shared application styles (Phase B — visual refresh). * * Color strategy: everything is expressed with Bulma 1.x CSS custom * properties (--bulma-*) so the whole UI follows the active theme * (light/dark, set via ; see the FOUC-prevention * script in base.html / auth-base.html). * * Theme mechanism (Bulma 1.x, per Context7 docs): the precompiled * bulma.min.css ships both theme blocks — [data-theme="dark"] on * flips --bulma-scheme-main / --bulma-text / --bulma-border / etc. so a * single token-driven stylesheet works in both modes with no overrides. */ /* ── Theme-rail tokens (documented exception) ───────────────────── * The navbar + sidebar keep an always-dark rail in BOTH themes * (Linear/Notion style). Bulma's named color tokens (--bulma-dark, * --bulma-grey-darker, ...) INVERT in dark mode, so they cannot express * "always dark". Instead we derive the surface from Bulma's own hue and * saturation (--bulma-scheme-h / --bulma-scheme-s) with a fixed * lightness, which is theme-independent. */ :root { --jfiles-rail-bg: hsl(var(--bulma-scheme-h) var(--bulma-scheme-s) 14%); --jfiles-rail-bg-hover: hsl(var(--bulma-scheme-h) var(--bulma-scheme-s) 21%); --jfiles-rail-bg-active: hsl(var(--bulma-scheme-h) var(--bulma-scheme-s) 28%); --jfiles-rail-text: hsl(var(--bulma-scheme-h) var(--bulma-scheme-s) 90%); --jfiles-rail-text-muted: hsl(var(--bulma-scheme-h) var(--bulma-scheme-s) 60%); --jfiles-rail-border: hsla(var(--bulma-scheme-h) var(--bulma-scheme-s) 90% / 0.12); } /* ── Global layout ──────────────────────────────────────────────── */ html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; } /* #main-content holds a single page
. It must NOT be display:flex, or that only child shrinks to intrinsic width instead of filling the viewport — which leaves the whole explorer centred and narrow. */ #main-content { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; width: 100%; } .navbar-dropdown { right: 0; left: auto; } /* ── Typography ─────────────────────────────────────────────────── */ h1, h2, h3, .title { letter-spacing: -0.015em; } .subtitle { letter-spacing: -0.005em; } /* ── Navbar (always-dark rail) ──────────────────────────────────── */ .app-navbar { background: var(--jfiles-rail-bg); border-bottom: 1px solid var(--jfiles-rail-border); } .app-navbar .navbar-brand .navbar-item, .app-navbar .navbar-link { color: var(--jfiles-rail-text); } .app-navbar .navbar-link::after { border-color: var(--jfiles-rail-text-muted); } .app-navbar .navbar-brand .navbar-item:hover, .app-navbar .navbar-link:hover, .app-navbar .navbar-item.has-dropdown.is-hoverable:hover .navbar-link { background: var(--jfiles-rail-bg-hover); color: var(--jfiles-rail-text); } .app-navbar .navbar-burger span { background: var(--jfiles-rail-text); } .app-navbar .navbar-burger:hover { background-color: var(--jfiles-rail-bg-hover); } .app-navbar .navbar-menu { background: var(--jfiles-rail-bg); } .app-navbar .navbar-dropdown { background: var(--bulma-scheme-main); border-top: 2px solid var(--bulma-link); border-radius: 0 0 var(--bulma-radius-large) var(--bulma-radius-large); box-shadow: var(--bulma-shadow); } .app-navbar .navbar-dropdown .navbar-item { color: var(--bulma-text); } .app-navbar .navbar-dropdown .navbar-item:hover { background-color: var(--bulma-scheme-main-ter); color: var(--bulma-text); } .app-navbar .navbar-divider { background-color: var(--bulma-border); } /* Theme toggle button inside the navbar rail */ .app-navbar .theme-toggle { background: transparent; border: none; color: var(--jfiles-rail-text-muted); border-radius: var(--bulma-radius); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .app-navbar .theme-toggle:hover { background: var(--jfiles-rail-bg-hover); color: var(--jfiles-rail-text); } /* ── Folder tree (left rail) ────────────────────────────────────── */ .folder-tree-list { padding: 0.25rem 0; } .folder-node { display: flex; align-items: center; padding: 0.3em 0.5em; border-radius: var(--bulma-radius); cursor: default; } .folder-node:hover { background-color: var(--jfiles-rail-bg-hover); } .folder-link { display: flex; align-items: center; gap: 0.4em; flex: 1; padding: 0.2em 0.4em; border-radius: var(--bulma-radius); color: var(--jfiles-rail-text-muted); text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.15s ease, color 0.15s ease; } .folder-link:hover { background-color: var(--jfiles-rail-bg-hover); color: var(--jfiles-rail-text); } .folder-link .icon { color: var(--jfiles-rail-text-muted); } .folder-link.is-active { background-color: var(--bulma-link); color: var(--bulma-link-invert); } .folder-link.is-active:hover { background-color: var(--bulma-link-active); color: var(--bulma-link-invert); } .folder-link.is-active .icon { color: var(--bulma-link-invert); } .expand-trigger { cursor: pointer; width: 1.5em; text-align: center; flex-shrink: 0; color: var(--jfiles-rail-text-muted); transition: transform 0.15s ease, color 0.15s ease; } .expand-trigger:hover { color: var(--jfiles-rail-text); } .tree-spacer { width: 1.5em; flex-shrink: 0; } .children-container { display: none; } li.is-expanded > .children-container { display: block; } .folder-name { overflow: hidden; text-overflow: ellipsis; } /* ── Sidebar (always-dark rail) ─────────────────────────────────── */ .sidebar { background: var(--jfiles-rail-bg); border-radius: 0; display: flex; flex-direction: column; overflow: hidden; } .sidebar-header { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.85rem; color: var(--jfiles-rail-text); border-bottom: 1px solid var(--jfiles-rail-border); display: flex; align-items: center; gap: 0.5rem; } .sidebar-header-title { display: flex; align-items: center; gap: 0.5rem; flex: 1; } .sidebar-header .new-folder-btn { background: var(--jfiles-rail-bg-hover); border: none; color: var(--jfiles-rail-text); border-radius: var(--bulma-radius); transition: background-color 0.15s ease; } .sidebar-header .new-folder-btn:hover { background: var(--jfiles-rail-bg-active); color: var(--jfiles-rail-text); } .sidebar-body { flex: 1; overflow-y: auto; padding: 0.5rem; } /* Recycle Bin entry at the bottom of the folder tree rail: a divider line separates it from the tree, styled with the same rail tokens as .folder-link. */ .sidebar-body .recycle-entry { border-top: 1px solid var(--jfiles-rail-border); border-radius: 0; margin-top: 0.5rem; padding-top: 0.5rem; } .sidebar-footer { border-top: 1px solid var(--jfiles-rail-border); padding: 0.75rem 1rem; color: var(--jfiles-rail-text-muted); } /* Mount-as-Drive button in the sidebar footer (always-dark rail, like the header's new-folder button): derived from rail tokens, not Bulma's theme-inverting named colors. */ .sidebar-footer .mount-drive-btn { background: var(--jfiles-rail-bg-hover); border: 1px solid var(--jfiles-rail-border); color: var(--jfiles-rail-text); border-radius: var(--bulma-radius); justify-content: flex-start; transition: background-color 0.15s ease, color 0.15s ease; } .sidebar-footer .mount-drive-btn:hover { background: var(--jfiles-rail-bg-active); color: var(--jfiles-rail-text); } /* ── Content area ───────────────────────────────────────────────── */ .content-area { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; } .content-area > .box { min-height: 0; } /* Mount-as-Drive tip banner: a slim, quiet strip above the file list. Uses Bulma theme tokens (--bulma-scheme-main / --bulma-border) so it matches the active light/dark theme with no per-theme overrides. */ .mount-tip { flex-wrap: wrap; gap: 0.25rem 0.75rem; padding: 0.5rem 0.75rem; margin-bottom: 0; } .mount-tip code { padding: 0 0.25rem; } /* ── Explorer toolbar (sticky inside the file-list box) ─────────── */ .explorer-toolbar { position: sticky; top: 0; z-index: 5; background: var(--bulma-scheme-main); border-bottom: 1px solid var(--bulma-border); padding: 0.75rem 0; margin: 0 0 0.75rem; } /* ── File list rows ─────────────────────────────────────────────── */ .folder-row, .file-row { transition: background-color 0.12s ease; } .folder-row:hover, .file-row:hover { background-color: var(--bulma-scheme-main-ter); } /* Folder row inline action buttons (rename / delete). Quiet by default, more visible on row hover, fully clear when the button itself is targeted. */ .folder-row-action { background: transparent; border: 1px solid transparent; color: var(--bulma-text-muted); border-radius: var(--bulma-radius); padding: 0.15rem 0.4rem; height: auto; line-height: 1; opacity: 0.45; transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease; } .folder-row:hover .folder-row-action { opacity: 0.8; } .folder-row-action:hover { opacity: 1; background: var(--bulma-scheme-main-ter); color: var(--bulma-text); } .folder-row-action.folder-delete-btn:hover { color: var(--bulma-danger); background: color-mix(in srgb, var(--bulma-danger) 10%, transparent); } .file-list-section { text-transform: uppercase; letter-spacing: 0.06em; } .file-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: var(--bulma-radius); vertical-align: middle; margin-right: 0.5rem; border: 1px solid var(--bulma-border); background-color: var(--bulma-scheme-main-bis); cursor: zoom-in; } /* ── Drop zone & page drop overlay ──────────────────────────────── */ .drop-zone { transition: border-color 0.2s, background-color 0.2s; } .drop-zone.drag-over { border-color: var(--bulma-link) !important; background-color: color-mix(in srgb, var(--bulma-link) 5%, var(--bulma-scheme-main)) !important; } .drop-overlay { display: none; position: absolute; inset: 0; background: color-mix(in srgb, var(--bulma-link) 8%, transparent); border: 2px dashed var(--bulma-link); border-radius: var(--bulma-radius-large); z-index: 10; align-items: center; justify-content: center; pointer-events: none; } .drop-zone.drag-over .drop-overlay { display: flex; } .drop-overlay-content { text-align: center; color: var(--bulma-link); } .drop-overlay-content i { font-size: 2rem; margin-bottom: 0.5rem; } #page-drop-overlay { position: fixed; inset: 0; z-index: 9998; background: color-mix(in srgb, var(--bulma-link) 12%, transparent); border: 3px dashed var(--bulma-link); align-items: center; justify-content: center; pointer-events: none; } #page-drop-overlay .drop-overlay-content i { font-size: 3rem; } #upload-progress-indicator.error { border-color: var(--bulma-danger); } #upload-progress-indicator.success { border-color: var(--bulma-success); } /* ── Image preview lightbox ─────────────────────────────────────── */ #lightbox-modal .modal-content { max-width: 90vw; width: auto; } #lightbox-modal .modal-background { background-color: hsla(var(--bulma-scheme-h) var(--bulma-scheme-s) 5% / 0.85); } #lightbox-image { display: block; max-width: 100%; max-height: 85vh; margin: 0 auto; border-radius: var(--bulma-radius-large); box-shadow: 0 12px 40px hsla(var(--bulma-scheme-h) var(--bulma-scheme-s) 5% / 0.5); background-color: var(--bulma-scheme-main); }