/* ====================================================================== STVC NewFileManager — Microsoft Metro / Modern UI theme Flat surfaces, no rounded corners, no drop shadows, no gradients. Solid accent blocks, Segoe UI typography, generous whitespace, uppercase section headings, tile-based navigation. ====================================================================== */ :root { color-scheme: light; /* Metro accent palette (Windows 8 / Modern UI tile colors). */ --bg: #ffffff; --bg-alt: #f2f2f2; --fg: #1b1b1b; --muted: #5a5a5a; --border: #d4d4d4; --row: #ffffff; --row-alt: #f6f6f6; --accent: #0078d7; /* Windows blue */ --accent-hover: #005a9e; --accent-fg: #ffffff; --tile-blue: #0078d7; --tile-teal: #008272; --tile-green: #107c10; --tile-orange: #d83b01; --tile-red: #e81123; --tile-purple: #5c2d91; --tile-magenta: #b4009e; --tile-dark: #2d2d30; --status-ok: #107c10; --status-warn: #ca5010; --status-bad: #c50f1f; } /* Explicit dark theme: applied when is set by the theme toggle. Light is the default; OS preference is NOT auto-applied so the user's choice always wins. */ html[data-theme="dark"] { color-scheme: dark; --bg: #1b1b1b; --bg-alt: #252525; --fg: #f3f3f3; --muted: #b0b0b0; --border: #3a3a3a; --row: #1f1f1f; --row-alt: #262626; --accent: #4cc2ff; --accent-hover: #76d3ff; --accent-fg: #1b1b1b; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); /* Metro typography stack: Segoe UI Light/Semilight/Regular */ font: 14px/1.45 "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100vh; display: flex; flex-direction: column; } /* Headings — Metro favours light/semilight weights, large sizes, sharp baselines and short uppercase eyebrows. */ h1, h2, h3, h4 { font-weight: 200; letter-spacing: -0.01em; margin: 0 0 12px; } h1 { font-size: clamp(26px, 4.2vw, 42px); line-height: 1.1; } h2 { font-size: clamp(20px, 2.8vw, 28px); } h3 { font-size: clamp(17px, 2vw, 20px); font-weight: 300; } h4 { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } /* Media defaults: never overflow their container. */ img, svg, video, canvas { max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .12s; } a:hover { color: var(--accent-hover); border-bottom-color: currentColor; } hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; } /* ---------- Top bar ---------- */ .topbar { display: flex; align-items: stretch; justify-content: space-between; background: var(--accent); color: var(--accent-fg); padding: 0 24px; min-height: 48px; border: 0; } .topbar .brand { font-weight: 300; font-size: 20px; letter-spacing: -0.01em; color: var(--accent-fg); border: 0; padding: 12px 0; text-transform: lowercase; } .topbar .brand:hover { color: var(--accent-fg); border: 0; opacity: .85; } .topbar nav { display: flex; gap: 0; align-items: stretch; margin-left: auto; } .topbar nav a, .topbar nav .who, .topbar nav form { display: flex; align-items: center; color: var(--accent-fg); border: 0; padding: 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; transition: background-color .12s; } .topbar nav a:hover { background: rgba(0,0,0,.18); border: 0; color: var(--accent-fg); } .topbar nav .who { font-weight: 400; text-transform: none; opacity: .8; letter-spacing: 0; } .topbar nav form.inline { padding: 0; } .topbar nav form.inline button.link { background: transparent; color: var(--accent-fg); padding: 0 16px; height: 100%; min-height: 48px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; border: 0; cursor: pointer; } .topbar nav form.inline button.link:hover { background: rgba(0,0,0,.18); } main { max-width: 1200px; width: 100%; margin: 0 auto; padding: 32px 28px; flex: 1; } footer { padding: 16px 24px; color: var(--muted); border-top: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } /* ---------- Surfaces / panels (no rounded corners, no shadow) ---------- */ .card { background: var(--row); border: 1px solid var(--border); border-radius: 0; padding: 24px; margin-bottom: 24px; } .card h2:first-child, .card h3:first-child { margin-top: 0; } /* ---------- Buttons (flat, square, uppercase) ---------- */ button, .btn { background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); border-radius: 0; padding: 8px 18px; font: inherit; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; } button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } button.secondary, .btn.secondary { background: transparent; color: var(--fg); border: 1px solid var(--fg); } button.secondary:hover, .btn.secondary:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } button.danger, .btn.danger { background: transparent; color: var(--status-bad); border: 1px solid var(--status-bad); } button.danger:hover { background: var(--status-bad); color: #fff; } button.link { background: transparent; color: var(--accent); border: 0; padding: 0; text-transform: none; letter-spacing: 0; font-weight: 400; } button.link:hover { background: transparent; color: var(--accent-hover); text-decoration: underline; } button:disabled, .btn:disabled { opacity: 0.4; cursor: not-allowed; } form.inline { display: inline; } /* ---------- Inputs ---------- */ input[type=text], input[type=password], input[type=email], input[type=number], input[type=datetime-local], input[type=search], select, textarea { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 0; padding: 8px 10px; font: inherit; transition: border-color .12s; min-width: 0; } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } input[type=checkbox], input[type=radio] { accent-color: var(--accent); } .field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; } .field label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .field .hint { text-transform: none; letter-spacing: 0; font-size: 11px; opacity: 0.8; margin-left: 6px; font-weight: 400; } .field textarea { font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px 10px; } /* ---------- Status / badges ---------- */ .badge { display: inline-block; padding: 3px 10px; background: var(--tile-dark); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 0; } .badge.ok { background: var(--status-ok); } .badge.warn { background: var(--status-warn); } .badge.bad { background: var(--status-bad); } .error { color: var(--status-bad); margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--status-bad); background: var(--row-alt); } .notice { color: var(--muted); margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--row-alt); } /* ---------- Files toolbar ---------- */ .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; } .toolbar .btn, .toolbar button { margin: 0; } .files-card { position: relative; } .files-card.drag-active { outline: 2px dashed var(--accent); outline-offset: -8px; } .files-card.drag-active::after { content: "DROP TO UPLOAD"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-weight: 700; letter-spacing: 0.18em; font-size: 18px; pointer-events: none; border: 0; } .files-table-wrap { overflow-x: auto; } /* ---------- Tables (Metro lists: flat rows, square corners) ---------- */ table.files { width: 100%; border-collapse: collapse; } table.files th, table.files td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } table.files th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); border-bottom: 2px solid var(--fg); } table.files tbody tr { transition: background-color .1s; cursor: default; } table.files tbody tr:hover { background: var(--row-alt); } table.files tbody tr.dragging { opacity: 0.45; } table.files tbody tr.drop-into, .breadcrumb a.drop-into { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: 2px solid var(--accent); outline-offset: -2px; } table.files .actions { white-space: nowrap; text-align: right; } table.files .actions button + button { margin-left: 10px; } table.files .col-size { width: 110px; } table.files .col-mod { width: 180px; } table.files .col-sel { width: 32px; padding-left: 12px; padding-right: 0; } table.files tbody tr.selected { background: color-mix(in srgb, var(--accent) 14%, transparent); } table.files tbody tr.selected:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } /* ---------- Bulk action bar ---------- */ .bulk-bar { align-items: center; background: var(--row-alt); border-left: 3px solid var(--accent); padding: 8px 12px; margin-top: -8px; } .bulk-bar .bulk-count { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-right: 8px; } /* ---------- Modal (text editor) ---------- */ .modal-backdrop[hidden] { display: none !important; } .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: stretch; justify-content: center; padding: 24px; z-index: 1000; } .modal { background: var(--bg); color: var(--fg); border: 1px solid var(--border); width: min(1100px, 100%); display: flex; flex-direction: column; } .modal-head, .modal-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--row-alt); } .modal-foot { border-top: 1px solid var(--border); border-bottom: 0; justify-content: flex-end; } .modal-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; } .modal-sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .modal-close { margin-left: auto; } .editor-modal textarea { flex: 1; width: 100%; min-height: 50vh; border: 0; outline: 0; background: var(--bg); color: var(--fg); font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.45; padding: 14px 16px; resize: none; tab-size: 4; } /* ---- Share modal ---------------------------------------------------- */ .share-modal { width: min(560px, 100%); } .share-modal .modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .share-modal .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); } .share-modal .tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; color: var(--fg); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .share-modal .tab.active { border-bottom-color: var(--accent); color: var(--accent); } .share-modal .tab-pane .field { margin-bottom: 8px; } .share-modal .hint { color: var(--muted); font-size: 12px; } .share-modal .share-result { background: var(--row-alt); padding: 8px 12px; border: 1px solid var(--border); } .share-modal .share-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .share-modal .share-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; word-break: break-all; } .share-modal .share-links code { background: var(--bg); border: 1px solid var(--border); padding: 1px 6px; } /* QRCoder's SvgQRCode emits no viewBox, so the SVG cannot be scaled by CSS without clipping/empty space. The wrapper therefore shrink-wraps to the SVG's intrinsic size and scrolls if the card is ever narrower. */ .totp-qr { display: inline-block; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: 4px; margin: 8px 0; line-height: 0; max-width: 100%; overflow: auto; } .totp-qr svg { display: block; width: auto; height: auto; } @media (max-width: 600px) { .modal-backdrop { padding: 0; } .modal { width: 100%; height: 100%; } } /* ---------- Breadcrumb ---------- */ .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: 13px; } .breadcrumb a, .breadcrumb span { color: var(--muted); border: 0; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .breadcrumb a:hover { color: var(--accent); border: 0; } .breadcrumb .sep { opacity: .5; } /* ---------- Drop zone ---------- */ .dropzone { border: 2px dashed var(--border); border-radius: 0; padding: 32px; text-align: center; color: var(--muted); margin-top: 20px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 600; transition: border-color .12s, color .12s, background-color .12s; } .dropzone.drag { border-color: var(--accent); color: var(--accent); background: var(--row-alt); } /* ---------- Tiles (Metro live-tile aesthetic for landing actions) ---------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 16px 0; } .tile { display: flex; flex-direction: column; justify-content: space-between; background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 0; padding: 16px; min-height: 110px; text-decoration: none; transition: transform .08s ease-out, opacity .12s; } .tile:hover { opacity: .92; border: 0; color: var(--accent-fg); } .tile:active { transform: scale(.98); } .tile .tile-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .tile .tile-value { font-size: 32px; font-weight: 200; line-height: 1; margin-bottom: 8px; } .tile.t-teal { background: var(--tile-teal); } .tile.t-green { background: var(--tile-green); } .tile.t-orange { background: var(--tile-orange); } .tile.t-red { background: var(--tile-red); } .tile.t-purple { background: var(--tile-purple); } .tile.t-magenta { background: var(--tile-magenta); } .tile.t-dark { background: var(--tile-dark); } /* ---------- QR & code ---------- */ .qr { background: #fff; padding: 16px; display: inline-block; border: 1px solid var(--border); } code, pre { background: var(--row-alt); padding: 2px 6px; border-radius: 0; font-family: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } pre { padding: 12px 16px; overflow-x: auto; border-left: 3px solid var(--accent); } /* ---------- Compact responsive nav ---------- Applied up to 1110px so the compact "phone-style" layout covers the full tablet / small-laptop range and there's no awkward gap between the desktop topbar and the mobile one. */ @media (max-width: 1110px) { .topbar { flex-wrap: wrap; padding: 0 12px; } .topbar nav { flex-wrap: wrap; } .topbar nav a, .topbar nav form.inline button.link { padding: 0 10px; font-size: 11px; } main { padding: 20px 14px; } h1 { font-size: 32px; } .card { padding: 16px; } .toolbar .btn, .toolbar button { width: 100%; text-align: center; } } /* On phones, drop the size & modified columns and let the name wrap. Actions stay visible on the right of the same row. */ @media (max-width: 600px) { table.files .col-size, table.files .col-mod { display: none; } table.files th, table.files td { padding: 12px 8px; } table.files .actions button { padding: 8px 6px; } } /* ---------- Theme toggle (in top bar) ---------- */ .theme-toggle { background: transparent; color: var(--accent-fg); border: 1px solid rgba(255,255,255,.4); border-radius: 0; margin: 8px 0 8px 8px; padding: 0 12px; height: 32px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; align-self: center; display: inline-flex; align-items: center; gap: 6px; transition: background-color .12s, border-color .12s; } .theme-toggle:hover { background: rgba(0,0,0,.18); border-color: var(--accent-fg); } .theme-toggle .ico { font-size: 13px; line-height: 1; } .theme-toggle .lbl { display: inline; } @media (max-width: 1110px) { .theme-toggle .lbl { display: none; } } /* ============================================================ Responsive / mobile refinements Goal: keep the Metro look but stay usable down to ~360px wide. ============================================================ */ /* Tablets and small laptops: tighten paddings and wrap toolbars. */ @media (max-width: 960px) { main { max-width: 100%; padding: 24px 18px; } .tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } /* Phones / small laptops: stack things, full-width controls, larger tap targets. Bumped from 720px to 1110px so half-screen browser windows on a 1080p monitor get the same comfortable layout as a tablet. */ @media (max-width: 1110px) { /* Top bar: let the nav scroll horizontally instead of wrapping awkwardly. */ .topbar { padding: 0 8px; } .topbar nav { margin-left: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .topbar nav::-webkit-scrollbar { display: none; } .topbar nav a, .topbar nav form.inline button.link { white-space: nowrap; min-height: 44px; } .topbar nav .who { display: none; } h1 { font-size: 26px; } h2 { font-size: 20px; } .card { padding: 14px; margin-bottom: 16px; } .field input, .field select, .field textarea { width: 100%; font-size: 16px; /* prevents iOS zoom on focus */ } .toolbar { gap: 6px; } .toolbar > * { flex: 1 1 calc(50% - 6px); } .toolbar .btn, .toolbar button { width: 100%; min-height: 40px; padding: 10px 12px; text-align: center; } .bulk-bar { flex-wrap: wrap; gap: 6px; padding: 10px; } .bulk-bar .bulk-count { width: 100%; margin: 0 0 4px; } .bulk-bar > button { flex: 1 1 calc(50% - 6px); min-height: 40px; } .breadcrumb { font-size: 12px; gap: 4px; } .modal-backdrop { padding: 0; } .modal { width: 100%; max-height: 100vh; height: auto; } .modal-head, .modal-foot { padding: 10px 12px; flex-wrap: wrap; } .modal-foot button { flex: 1 1 auto; min-height: 40px; } .share-modal, .editor-modal { width: 100%; } .editor-modal textarea { min-height: 60vh; } .totp-qr { padding: 6px; } } /* Phones: reshape file/admin tables as stacked cards with optional data-label prefixes on metadata cells. NOTE: only applied to tables that opt in via a `.col-sel` column (the file browser). Other tables (admin lists, peers, migration inbox) keep their normal layout and rely on the horizontal-scroll fallback below — their first column is the title, not a checkbox, so the grid transform would mangle them. */ @media (max-width: 600px) { .files-card .files-table-wrap { overflow-x: visible; } .files-card table.files, .files-card table.files thead, .files-card table.files tbody, .files-card table.files tr, .files-card table.files td { display: block; width: 100%; } .files-card table.files thead { display: none; } .files-card table.files tr { border-bottom: 1px solid var(--border); padding: 10px 6px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 4px; align-items: center; } .files-card table.files td { padding: 2px 0; border-bottom: 0; word-break: break-word; } .files-card table.files td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 90px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 700; margin-right: 6px; } .files-card table.files .col-sel { grid-column: 1; padding: 0; min-width: 24px; } .files-card table.files tr > td:nth-child(2) { grid-column: 2; font-weight: 600; } .files-card table.files tr > td:nth-child(n+3) { grid-column: 1 / -1; } .files-card table.files .actions { text-align: left; white-space: normal; } .files-card table.files .actions button, .files-card table.files .actions .btn, .files-card table.files .actions a { display: inline-block; min-height: 36px; padding: 8px 10px; margin: 4px 6px 0 0; } .files-card table.files .actions button + button { margin-left: 0; } .files-card table.files .actions details.inline-edit { display: block; margin-top: 6px; } .files-card table.files .actions details.inline-edit .edit-form { padding: 8px 0; } } /* Generic tables: horizontal scroll fallback on phones. Also applied to .files tables that did NOT opt into the card layout (admin lists on the Federation/Users/Shares pages). */ @media (max-width: 600px) { table:not(.files), .card:not(.files-card) table.files { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Word-break long ids/codes/urls so they don't force horizontal scroll. */ code { word-break: break-all; } } /* Touch devices: enforce ≥40px hit-area on interactive elements. */ @media (pointer: coarse) { button, .btn, input[type=submit], select { min-height: 40px; } button.link { min-height: 0; padding: 4px 0; } } /* Ultra-narrow phones (<=360px). Trim padding, allow tiles to be single-column, and let the top bar use minimal horizontal padding. */ @media (max-width: 360px) { main { padding: 14px 10px; } .card { padding: 12px; } .topbar { padding: 0 4px; } .topbar nav a, .topbar nav form.inline button.link { padding: 0 8px; font-size: 10.5px; } .tiles { grid-template-columns: 1fr; } .toolbar > * { flex: 1 1 100%; } h1 { font-size: 22px; } } /* Wide desktops & ultrawide monitors: let content use more of the screen and scale tiles up so the dashboard doesn't feel sparse. */ @media (min-width: 1600px) { main { max-width: 1500px; padding: 40px 32px; } .tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } } @media (min-width: 2200px) { main { max-width: 1800px; } } /* Landscape phones / very short viewports: shorten huge headings and give modals more room to breathe. */ @media (max-height: 480px) and (orientation: landscape) { h1 { font-size: 22px; margin-bottom: 8px; } .card { padding: 12px 16px; margin-bottom: 12px; } .modal-backdrop { padding: 0; } .editor-modal textarea { min-height: 70vh; } } /* Reduced motion: disable hover/transform transitions for users who ask. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } .tile:active { transform: none; } } /* ---------- Storage quota banner (start page) -------------------------- */ .quota-card { padding: 14px 18px; } .quota-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .quota-title { font-size: 1.05rem; } .quota-numbers { color: inherit; opacity: .9; font-variant-numeric: tabular-nums; } .quota-free, .quota-used, .quota-max { font-weight: 600; } .quota-sep { opacity: .55; margin: 0 4px; } .quota-pct { opacity: .65; margin-left: 6px; font-size: .9em; } .quota-bar { margin-top: 10px; height: 10px; width: 100%; background: rgba(127, 127, 127, .18); border-radius: 6px; overflow: hidden; } .quota-bar-fill { height: 100%; background: var(--accent); transition: width .3s ease; } .quota-bar-fill.warn { background: #d6a700; } .quota-bar-fill.danger { background: #c43c3c; } /* ---------- Upload progress modal ---------- */ .upload-modal { max-width: 540px; } .upload-line { margin: 8px 0 0; font-variant-numeric: tabular-nums; } .upload-current { color: inherit; opacity: .8; font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bulk-modal { max-width: 760px; } .bulk-details { margin-top: 12px; } .bulk-details summary { cursor: pointer; opacity: .8; } .bulk-table { margin-top: 8px; font-size: .92em; } .bulk-table td, .bulk-table th { padding: 4px 8px; }