/* Theme palettes. The base is light; dark is applied either by the OS preference (theme = auto, the default) or forced by the theme toggle, which puts `light`/`dark` on (see web/src/theme.rs). Keep the two dark blocks in sync. */ :root { color-scheme: light; --bg: #f6f7f9; --panel: #ffffff; --text: #1a1d21; --muted: #6b7280; --accent: #3b82f6; --accent-hover: #2563eb; --accent-border: #1d4ed8; --danger: #ef4444; --danger-border: #dc2626; --border: #e5e7eb; --topbar-h: 48px; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } :root.dark { color-scheme: dark; --bg: #0f1115; --panel: #171a20; --text: #e5e7eb; --muted: #9ca3af; --accent: #60a5fa; --accent-hover: #3b82f6; --accent-border: #79b5fc; --danger: #f87171; --danger-border: #fa8b8b; --border: #2a2f3a; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { :root:not(.light) { color-scheme: dark; --bg: #0f1115; --panel: #171a20; --text: #e5e7eb; --muted: #9ca3af; --accent: #60a5fa; --accent-hover: #3b82f6; --accent-border: #79b5fc; --danger: #f87171; --danger-border: #fa8b8b; --border: #2a2f3a; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } } * { box-sizing: border-box; /* The design language is sharp: everything stays square. */ border-radius: 0; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; } .muted { color: var(--muted); } .card { background: var(--panel); border: 1px solid var(--border); padding: 24px; } .center-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; } .auth-card { width: 100%; max-width: 380px; } .auth-card h1 { margin: 0 0 8px; font-size: 22px; } .auth-logo { width: 44px; height: 44px; margin-bottom: 12px; } .auth-card p { margin: 0 0 20px; font-size: 13px; } .field { display: block; margin-bottom: 14px; } .field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; } input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 14px; } input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } /* Square checkboxes — native controls are rounded, the theme is sharp. */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; padding: 0; flex: none; border: 1px solid var(--border); background: var(--panel); cursor: pointer; position: relative; vertical-align: -3px; } input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent-border); } input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } button { font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 9px 14px; } button:hover { border-color: var(--muted); } button:disabled { opacity: 0.6; cursor: default; } .btn-primary { width: 100%; background: var(--accent); /* One step away from the fill, per theme (see palette above), so the button's edge reads the same as on neutral buttons. */ border-color: var(--accent-border); color: #fff; font-weight: 600; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-border); } .error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 0 0 10px; } /* layout (signed-in): full-width topbar, then sidebar + content below */ .layout { min-height: 100vh; display: flex; flex-direction: column; } .topbar { flex: none; position: sticky; top: 0; z-index: 130; height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--border); } .topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .icon-btn.nav-toggle { display: none; } .body-row { flex: 1; display: flex; align-items: stretch; } /* ---- sidebar ---- */ .sidebar { flex: none; width: 224px; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--border); position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; white-space: nowrap; color: inherit; text-decoration: none; cursor: pointer; } .brand:hover { opacity: 0.8; } .brand-name { overflow: hidden; text-overflow: ellipsis; } .logo { width: 26px; height: 26px; flex: none; display: block; } .nav { flex: 1; overflow-y: auto; padding: 14px 8px 16px; display: flex; flex-direction: column; gap: 20px; } .sidebar-user { padding: 0 10px 2px; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0 10px 6px; } /* Section header with a right-aligned action (the Files refresh). */ .nav-section-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; } .nav-section-head .nav-section-label { flex: 1; padding-bottom: 2px; } .nav-section-refresh { color: var(--muted); background: none; border-color: transparent; padding: 3px 5px; } .nav-section-refresh:hover { color: var(--text); border-color: var(--border); } .nav-tab { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; margin-bottom: 2px; padding: 8px 10px; text-align: left; background: none; border: none; color: var(--muted); font-size: 14px; } .nav-tab:hover { background: var(--bg); color: var(--text); } .nav-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; } .ic-tab { width: 18px; height: 18px; flex: none; } .nav-tab.active .icon { color: #fff; } .nav-tab-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-tab-note { flex: none; font-size: 10px; font-weight: 700; padding: 1px 5px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); } .nav-tab.active .nav-tab-note { background: rgb(255 255 255 / 18%); border-color: rgb(255 255 255 / 30%); color: #fff; } .nav-backdrop { display: none; } /* Sidebar footer: theme toggle, log out, and the project version. Sits at the bottom of the sidebar, below the manage section. */ .sidebar-footer { flex: none; border-top: 1px solid var(--border); padding: 8px; } .sidebar-footer .nav-tab { margin-bottom: 0; } .sidebar-action.logout { color: var(--danger); } .sidebar-action.logout:hover { color: var(--danger); } .sidebar-version { margin-top: 8px; padding: 0 10px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .badge { font-size: 11px; padding: 2px 8px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); } .content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 20px; } /* While a file is open the app is a fixed-height frame: the file view * (editor, image, …) scrolls inside, the page itself never grows. */ .layout.file-mode { height: 100vh; overflow: hidden; } .layout.file-mode .body-row { min-height: 0; } /* Narrow screens: the sidebar becomes an off-canvas drawer that only covers the content, below the (always visible) topbar. */ @media (max-width: 860px) { .sidebar { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; right: auto; height: auto; z-index: 120; transform: translateX(-100%); transition: transform 0.15s ease; } .sidebar.open { transform: translateX(0); box-shadow: 0 0 48px rgb(0 0 0 / 35%); } .nav-backdrop { display: block; position: fixed; top: var(--topbar-h); bottom: 0; left: 0; right: 0; z-index: 110; background: rgb(0 0 0 / 40%); } .icon-btn.nav-toggle { display: inline-flex; } .content { padding: 14px; } } /* ---- file browser ---- */ .browser { width: 100%; max-width: 1200px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; min-height: 0; } .icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; } .ic-folder { color: var(--accent); } .ic-muted { color: var(--muted); } .crumbs { display: flex; align-items: center; gap: 2px; padding: 6px 0 12px; font-size: 15px; flex-wrap: wrap; } .crumb { cursor: pointer; color: var(--muted); padding: 3px 6px; } .crumb:hover { color: var(--text); background: var(--panel); } .crumb.current { color: var(--text); font-weight: 600; cursor: default; background: none; } .crumb-sep { color: var(--muted); padding: 0 1px; } .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 12px; } .toolbar-right { display: flex; gap: 6px; } .icon-btn { padding: 7px 9px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); display: inline-flex; align-items: center; } .icon-btn:hover { border-color: var(--muted); } .icon-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .ic-btn { width: 18px; height: 18px; color: inherit; } .entries-area { flex: 1; min-height: 240px; } .center-note { text-align: center; padding: 48px 0; } /* Server-side listing cap notice, under the paging footer. */ .list-note { padding: 8px 14px 0; font-size: 12px; } .error-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--danger); font-size: 14px; } /* root tiles were replaced by the sidebar's folder tabs */ /* grid view */ .entries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .tile { background: var(--panel); border: 1px solid var(--border); padding: 16px 10px 12px; text-align: center; cursor: pointer; user-select: none; } .tile:hover { border-color: var(--muted); } .tile-icon { width: 42px; height: 42px; margin: 0 auto 10px; display: block; } .tile-name { font-size: 13px; line-height: 1.3; word-break: break-word; /* Uniform tile height: the name area always takes two lines and never overflows (the full name is in the title tooltip). */ min-height: calc(2 * 1.3em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* list view */ .entries-list { background: var(--panel); border: 1px solid var(--border); overflow: hidden; } .row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 90px 150px; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; user-select: none; } .row:last-child { border-bottom: none; } .row:hover { background: var(--bg); } .row-icon { width: 20px; height: 20px; } .row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-size, .row-date { font-size: 13px; text-align: right; } @media (max-width: 640px) { .row { grid-template-columns: 28px minmax(0, 1fr) 90px; } .row-date { display: none; } } /* context menu */ .ctx-menu { position: fixed; z-index: 100; min-width: 190px; background: var(--panel); border: 1px solid var(--border); padding: 5px; box-shadow: 0 8px 24px rgb(0 0 0 / 18%); } .ctx-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 14px; cursor: pointer; } .ic-ctx { width: 18px; height: 18px; flex: none; } .ctx-item:hover { background: var(--bg); } .ctx-item.disabled { opacity: 0.45; cursor: default; } .ctx-item.disabled:hover { background: none; } /* toolbar selection actions (top right) */ .sel-actions { display: flex; align-items: center; gap: 6px; position: relative; } .sel-actions .icon-btn:disabled { opacity: 0.45; cursor: default; } .sel-actions .icon-btn:disabled:hover { border-color: var(--border); color: var(--muted); } .sel-more-wrap { position: relative; } .sel-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 100; min-width: 190px; background: var(--panel); border: 1px solid var(--border); padding: 5px; box-shadow: 0 8px 24px rgb(0 0 0 / 18%); } .sel-more-menu.hidden { display: none; } /* selection actions in the top bar */ .topbar .sel-actions { min-height: 0; } .topbar .sel-actions .icon-btn { padding: 5px 7px; } /* selection highlight in the grid and list */ .tile.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); } .row.selected { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); box-shadow: inset 2px 0 0 var(--accent); } /* settings tabs (profile / server) */ .settings-tabs { display: flex; gap: 8px; } .settings-tab-btn { padding: 7px 14px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 13px; font-weight: 600; } .settings-tab-btn:hover { border-color: var(--muted); color: var(--text); } .settings-tab-btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); } /* toast */ .toast { position: fixed; bottom: 20px; right: 20px; z-index: 200; background: var(--panel); color: var(--text); border: 1px solid var(--border); padding: 11px 16px; font-size: 14px; box-shadow: 0 8px 24px rgb(0 0 0 / 18%); max-width: 320px; } .toast-error { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); border-color: var(--danger-border); color: var(--danger); } /* ---- modals ---- */ /* The shell is a native opened with showModal(): the browser puts it in the top layer and paints ::backdrop, so there is no overlay element to position and no z-index to keep in order. The reset below strips the UA's own box so the .modal card inside is the only thing that shows. */ .modal-host { padding: 0; border: none; background: none; /* The UA caps an open dialog's size; the card sets its own. */ max-width: none; max-height: none; /* Centre it in the inset-0 box, as the old flex overlay did. */ margin: auto; overflow: visible; } .modal-host::backdrop { background: rgb(0 0 0 / 45%); } .modal { width: 440px; max-width: calc(100vw - 32px); padding: 20px; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 12px 44px rgb(0 0 0 / 35%); } .modal.picker { width: 640px; } .modal-title { margin: 0 0 12px; font-size: 16px; } .modal-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .modal .input { width: 100%; box-sizing: border-box; margin-bottom: 16px; } .modal-label.error, .dialog-error { color: var(--danger); font-size: 13px; } .dialog-error { margin-top: 8px; } .modal-message { white-space: pre-line; font-size: 14px; margin: 0 0 8px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .btn-danger { background: var(--danger); /* A visible border (one step away from the fill, per theme) so the button's edge reads the same as on neutral buttons. */ border-color: var(--danger-border); color: #fff; } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, black); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .conflict-list { max-height: 200px; overflow-y: auto; margin: 8px 0; padding-left: 20px; font-size: 13px; } /* Folder picker: roots on the left, the selected root's tree on the right. */ .picker-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); border: 1px solid var(--border); height: 320px; } .picker-roots { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-right: 1px solid var(--border); background: var(--bg); min-height: 0; overflow-y: auto; } .picker-root { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 7px 8px; border: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; min-width: 0; } .picker-root:hover { background: var(--panel); } .picker-root.active { background: var(--accent); color: #fff; } .picker-root.ro .picker-root-name { opacity: 0.6; text-decoration: line-through dotted; } .picker-root-ic { width: 16px; height: 16px; flex: none; } .picker-root-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker-main { display: flex; flex-direction: column; min-width: 0; /* Grid items default to min-height:auto, which would let a long folder list stretch the dialog instead of scrolling. */ min-height: 0; } .picker-crumbs { padding: 8px 10px; font-size: 13px; border-bottom: 1px solid var(--border); flex: none; } .picker-entries { flex: 1; min-height: 0; overflow-y: auto; } .picker-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: 14px; user-select: none; } .picker-row:hover { background: var(--bg); } .picker-row .row-name { flex: 1; } /* A right-pointing chevron drawn with borders (no icon needed). */ .picker-chev { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); flex: none; } .picker-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 13px; } .picker-empty-ic { width: 32px; height: 32px; opacity: 0.5; } .picker-root.active .picker-root-ic { color: #fff; } @media (max-width: 640px) { .picker-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 380px; } .picker-roots { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); } } /* --------------------------------------------------------------------------- * Full-page file view (preview / editor / "no preview"). The top bar carries * the title + actions; the content area below is edge to edge. * ------------------------------------------------------------------------- */ .content.file-open { padding: 0; overflow: hidden; } /* The browser stays mounted (state, fetch callback) but hidden. */ .content.file-open .browser { display: none; } .file-view { flex: 1; min-height: 0; display: flex; flex-direction: column; } .file-title { display: flex; align-items: center; gap: 8px; min-width: 0; } .file-title-icon { width: 18px; height: 18px; flex: none; color: var(--muted); } .file-title-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-actions { display: flex; align-items: center; gap: 10px; flex: none; } .file-close, .file-download { border: none; background: transparent; color: var(--muted); padding: 6px 8px; } .file-close:hover, .file-download:hover { color: var(--text); background: var(--bg); } .preview-body { flex: 1; min-height: 0; overflow: auto; display: flex; background: var(--bg); } .preview-img { max-width: 100%; max-height: 100%; display: block; margin: auto; } .preview-pdf { width: 100%; height: 100%; border: none; background: #fff; } .preview-video { width: 100%; max-height: 100%; background: #000; } .preview-audio { display: flex; align-items: center; justify-content: center; width: 100%; padding: 24px; } .preview-audio audio { width: 100%; max-width: 480px; } /* CodeMirror (text editor) */ .cm-container { height: 100%; } .cm-container .cm-editor { height: 100%; } /* Load/save failure: dims the editor and shows the message in a card * (the top-bar Save button stays reachable to retry). */ .cm-error { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgb(0 0 0 / 45%); } .cm-error-card { position: relative; max-width: 440px; min-width: 200px; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 12px 44px rgb(0 0 0 / 35%); } .cm-error-close { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted); padding: 3px; } .cm-error-close:hover { color: var(--text); background: var(--bg); } .cm-error-close .ic-btn { width: 16px; height: 16px; } .cm-error-text { padding: 16px 40px 16px 20px; font-size: 14px; text-align: center; overflow-wrap: anywhere; } /* --------------------------------------------------------------------------- * Text editor (full page; title/save/close live in the top bar) * ------------------------------------------------------------------------- */ .file-editor { flex: 1; min-height: 0; display: flex; position: relative; background: var(--bg); } .file-editor .cm-container { width: 100%; height: 100%; } /* "No preview" fallback (binaries, archives). */ .file-nopreview { flex: 1; display: flex; align-items: center; justify-content: center; } .file-nopreview .btn-primary { width: auto; margin-top: 14px; } /* Conflict / discard dialogs render above the file view. */ .editor-sub-overlay { z-index: 101; background: rgb(0 0 0 / 25%); } /* --------------------------------------------------------------------------- * Download format dialog * ------------------------------------------------------------------------- */ .dl-formats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .dl-fmt { justify-content: flex-start; } /* --------------------------------------------------------------------------- * Item info dialog * ------------------------------------------------------------------------- */ .info-list { margin: 8px 0 16px; display: grid; grid-template-columns: 90px 1fr; row-gap: 8px; column-gap: 12px; } .info-list dt { color: var(--muted); } .info-list dd { margin: 0; word-break: break-word; } /* --------------------------------------------------------------------------- Shares (milestone 6) --------------------------------------------------------------------------- */ .share-modal { width: 480px; } .share-link-row { display: flex; gap: 8px; margin: 12px 0; } .share-link-input { flex: 1; font-family: ui-monospace, monospace; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); min-width: 0; } .share-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 14px; } .share-check input { width: 16px; height: 16px; } .share-expiry-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .share-expiry-row label { font-size: 13px; color: var(--muted); min-width: 52px; } .share-expiry-row select, .share-expiry-row input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; } .share-expiry-note { margin: 4px 0 0; font-size: 12.5px; } .btn-sm { padding: 5px 10px; font-size: 12.5px; } .icon-btn-sm { padding: 4px 6px; } /* "Your shares" manage view */ .shares-view { width: 100%; max-width: 960px; margin: 0 auto; } .view-header { margin-bottom: 16px; } .view-header .admin-section-title { margin-bottom: 0; } .view-hint { margin: 4px 0 0; font-size: 13px; max-width: 64ch; } .share-list { display: flex; flex-direction: column; gap: 10px; } .share-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); background: var(--panel); } .share-item-main { min-width: 0; } .share-item-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ic-row { width: 18px; height: 18px; flex: none; } .share-item-meta { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share-item-actions { display: flex; gap: 6px; flex-shrink: 0; } /* ------------------------------------------------------------------ */ /* Admin (milestone 7) */ /* ------------------------------------------------------------------ */ .admin-view { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 960px; margin: 0 auto; } .admin-section-title { margin: 0 0 14px; font-size: 15px; } .users-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .users-header .admin-section-title { margin-bottom: 0; } .users-header .btn-primary { width: auto; } .user-list { display: flex; flex-direction: column; gap: 10px; } .user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); } .user-row-main { min-width: 0; } .user-row-name { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; flex-wrap: wrap; } .ic-admin { width: 16px; height: 16px; flex: none; } .user-row-actions { display: flex; gap: 6px; flex-shrink: 0; } .badge-off { background: color-mix(in srgb, var(--danger) 15%, var(--panel)); border-color: var(--danger); color: var(--danger); } .setting-row { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--border); cursor: pointer; } .setting-row input { margin-left: auto; } .setting-label { display: block; font-weight: 600; font-size: 14px; } .setting-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; } /* Setting row whose control is a select, pushed to the right. */ .setting-row-select { cursor: default; } .setting-row-select > span { flex: 1; } .setting-row-select select { appearance: none; margin-left: auto; padding: 10px 42px 10px 12px; border: 1px solid var(--border); background-color: var(--panel); background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; color: var(--text); font: inherit; max-width: 190px; } /* User create/edit form */ .user-form { width: 520px; } .field-input { width: 100%; box-sizing: border-box; } .field-hint { font-size: 12px; margin: -2px 0 8px; } .check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 12px; cursor: pointer; } .form-error { color: var(--danger); font-size: 13px; margin: 4px 0 8px; } .roots-editor { display: flex; flex-direction: column; gap: 6px; } .root-draft { display: flex; align-items: center; gap: 8px; } .root-draft-path { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .root-draft-mode { width: auto; padding: 6px 8px; } .root-add { align-self: flex-start; margin-top: 4px; } /* ------------------------------------------------------------------ */ /* Empty state + keyboard focus (milestone 8) */ /* ------------------------------------------------------------------ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 64px 20px; text-align: center; } .empty-glyph { width: 52px; height: 52px; } .empty-state h3 { margin: 0; font-size: 16px; } /* Visible keyboard focus on selectable file/folder entries. The ring is inset (negative offset) so the scroll container never clips it. */ .tile:focus-visible, .row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ------------------------------------------------------------------ */ /* Search view (#/search) */ /* ------------------------------------------------------------------ */ .search-view { display: flex; flex-direction: column; gap: 14px; } /* Query bar ------------------------------------------------------ */ .query-bar { display: flex; align-items: stretch; gap: 8px; } .query-input { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); padding: 0 10px; min-width: 0; } .query-input .qi-icon { width: 18px; height: 18px; color: var(--muted); flex: none; } .query-input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; height: 38px; padding: 0; } .query-input input::placeholder { color: var(--muted); } /* Segmented Name / Content / Both control */ .seg { display: flex; border: 1px solid var(--border); background: var(--panel); } .seg button { appearance: none; border: none; border-right: 1px solid var(--border); background: transparent; color: var(--muted); font: inherit; font-size: 13px; padding: 0 14px; cursor: pointer; } .seg button:last-child { border-right: none; } .seg button:hover { background: var(--bg); } .seg button.on { background: var(--accent); color: #fff; } /* Start folder --------------------------------------------------- */ /* The folder a search starts in; opens the folder picker. */ .folder-pick { flex: none; display: flex; align-items: center; gap: 8px; max-width: 260px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; padding: 0 10px; cursor: pointer; } .folder-pick:hover { border-color: var(--muted); } .folder-pick .fp-icon { width: 16px; height: 16px; color: var(--muted); flex: none; } .folder-pick .fp-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms { position: relative; display: flex; } .ms-btn { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; padding: 0 10px; cursor: pointer; max-width: 180px; } .ms-btn:hover { background: var(--bg); } .ms-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Square caret drawn with borders (the icon set has no chevron). */ .ms-caret { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-1px, -1px); } .ms-backdrop { position: fixed; inset: 0; z-index: 40; } .ms-drop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 41; min-width: 200px; max-height: 280px; overflow: auto; background: var(--panel); border: 1px solid var(--border); padding: 4px 0; } .ms-opt { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 14px; cursor: pointer; user-select: none; } .ms-opt:hover { background: var(--bg); } .ms-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Run / stop ------------------------------------------------------- */ .btn-run { border: 1px solid var(--accent-border); background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 0 18px; cursor: pointer; } .btn-run:hover { background: var(--accent-hover); } .btn-stop { display: flex; align-items: center; gap: 6px; border: 1px solid var(--danger-border); background: var(--danger); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 0 14px; cursor: pointer; } .btn-stop:hover { opacity: 0.9; } .btn-stop .ic-stop { width: 14px; height: 14px; } /* Status line ------------------------------------------------------ */ .status-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .status-line .dot { width: 8px; height: 8px; background: var(--accent); animation: search-pulse 1s ease-in-out infinite; } @keyframes search-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .status-line .skip { opacity: 0.75; } /* Group labels ----------------------------------------------------- */ .group-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } /* Result group: a `display:flex` (or `none`, from the inline style) flex item of `.search-view` that re-establishes the column layout for its label/list/more-row children. */ .result-group { flex-direction: column; gap: 14px; } .group-label .gl-icon { width: 15px; height: 15px; } .group-label .n { font-weight: 400; text-transform: none; letter-spacing: 0; } .group-label .grow { flex: 1; } .collapse-all { appearance: none; border: 1px solid var(--border); background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; padding: 3px 10px; cursor: pointer; } .collapse-all:hover { background: var(--bg); color: var(--text); } /* Name-result rows --------------------------------------------------- */ .srow { display: grid; /* icon | name+dir | size | goto */ grid-template-columns: 28px minmax(0, 1fr) 90px 30px; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; user-select: none; } .srow:last-child { border-bottom: none; } .srow:hover { background: var(--bg); } .srow-icon { width: 20px; height: 20px; } .srow-main { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .srow-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Highlighted query hits (plain fragments render as bare spans). */ mark.hl-hit { background: color-mix(in srgb, var(--accent) 25%, transparent); color: inherit; } /* The directory-path line (the name line lives inside .srow-name). */ .srow-dir { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srow-dir mark.hl-hit { color: inherit; } .ssize { font-size: 13px; color: var(--muted); text-align: right; } /* Paging footer: position in the results on the left, the action on the right. Separated from the list by its own border so the button never reads as another result row. */ .page-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); } .page-foot .pf-count { font-variant-numeric: tabular-nums; } .page-foot .pf-more { appearance: none; padding: 5px 12px; border: 1px solid var(--border); background: var(--panel); font: inherit; font-weight: 500; color: var(--text); cursor: pointer; } .page-foot .pf-more:hover { border-color: var(--accent); color: var(--accent); } /* Content matches ----------------------------------------------------- */ .match-card { background: var(--panel); border: 1px solid var(--border); border-top: none; } /* The first card is the one right after the group label; `:first-of-type` cannot be used because the label is an earlier `div` sibling. */ .group-label + .match-card { border-top: 1px solid var(--border); } /* The header opens the file; the matched lines below are text to read. */ .match-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 14px; cursor: pointer; } .match-head:hover { background: var(--bg); } .match-head .mi { width: 18px; height: 18px; color: var(--muted); flex: none; } /* Takes the slack, so the count and the two buttons sit at the right edge. */ .mpath { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mpath b { font-weight: 600; } .mcount { flex: none; font-size: 12px; color: var(--muted); } /* "Show in folder", in both the name rows and the match-card headers. */ .goto-btn { appearance: none; flex: none; justify-self: end; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; background: transparent; cursor: pointer; } .goto-btn:hover { border-color: var(--border); } .goto-btn .goto-ic { width: 16px; height: 16px; color: var(--muted); } .goto-btn:hover .goto-ic { color: var(--accent); } .chev { appearance: none; border: 1px solid var(--border); background: transparent; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .chev:hover { background: var(--bg); } .chev .chev-down, .chev .chev-up { display: block; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); } .chev .chev-down { transform: rotate(45deg) translate(-1px, -1px); } .chev .chev-up { transform: rotate(-135deg) translate(-1px, -1px); } .match-lines { border-top: 1px solid var(--border); background: var(--bg); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } /* Matched lines are text to read, not a control: the card header is what opens the file, so no pointer cursor and no hover here. */ .mline { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 5px 14px; border-bottom: 1px solid var(--border); white-space: pre; user-select: text; } .mline:last-child { border-bottom: none; } .mline .ln { color: var(--muted); text-align: right; user-select: none; } .mline .tx { overflow: hidden; text-overflow: ellipsis; } .search-empty { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 14px; }