/* ========================================================================== My Cloud Storage — stylesheet Hand-authored CSS, no build step. Two themes, one motion system. Layout: 1 tokens · 2 themes · 3 base · 4 motion · 5 buttons 6 header · 7 layout · 8 stats · 9 upload · 10 toolbar 11 file list · 12 grid · 13 share · 14 empty · 15 toasts 16 lightbox · 17 dialogs · 18 login · 19 media pages 20 responsive · 21 reduced motion ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens that don't change between themes -------------------------------------------------------------------------- */ :root { /* Radii */ --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px; /* Easing. --ease-out is expo.out: it covers most of the distance immediately, which is right for something travelling in from off-screen and wrong for a 2px hover lift, where it reads as a snap. Hover and other small state changes use --ease-hover (easeOutCubic): a gentle, even glide with no overshoot. Nothing that responds to the pointer springs. */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); /* entrances only */ --ease-hover: cubic-bezier(0.33, 1, 0.68, 1); /* every hover / state change */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric moves */ --ease-in: cubic-bezier(0.70, 0, 0.84, 0); /* exits */ --ease-soft: cubic-bezier(0.34, 1.16, 0.64, 1); /* barely-there settle */ /* Durations — exits are deliberately shorter than entrances */ --t-fast: 140ms; --t-mid: 240ms; --t-slow: 400ms; --t-exit: 170ms; --t-hover: 360ms; /* long enough to read as a glide, not a flick */ /* Layout */ --content-w: 1080px; --header-h: 64px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* The lightbox stays dark in both themes — a photo viewer should. */ --scrim-strong: rgba(9, 10, 13, 0.94); } /* -------------------------------------------------------------------------- 2. Themes data-theme is set on by an inline script before first paint, so there's never a flash of the wrong theme. -------------------------------------------------------------------------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #14161a; --bg-deep: #101216; --surface: #1e2127; --surface-2: #23272f; --surface-3: #2a2e37; --surface-4: #343943; --surface-hover: #262a32; --border: #2a2d33; --border-soft: rgba(255, 255, 255, 0.06); --border-strong: #3a3f49; --text: #e8e8e8; --text-dim: #a0a4ad; --text-faint: #7d8494; --accent: #4f7cff; --accent-2: #7aa2ff; --accent-hover: #3a63e0; --accent-ink: #9ab4ff; --accent-fg: #ffffff; --accent-soft: rgba(79, 124, 255, 0.14); --accent-line: rgba(79, 124, 255, 0.38); --accent-glow: rgba(79, 124, 255, 0.30); --danger: #ff6b6b; --danger-hover: #e85555; --danger-ink: #ff8080; --danger-fg: #17181c; --danger-soft: rgba(255, 107, 107, 0.14); --success: #3ddc97; --success-soft: rgba(61, 220, 151, 0.14); --video: #a78bfa; --video-soft: rgba(167, 139, 250, 0.14); --image: #38bdf8; --image-soft: rgba(56, 189, 248, 0.14); --doc: #fbbf24; --doc-soft: rgba(251, 191, 36, 0.14); --header-bg: rgba(20, 22, 26, 0.78); --scrim: rgba(8, 9, 12, 0.68); --glow: rgba(79, 124, 255, 0.13); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38); --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.58); --shadow-row: 0 4px 16px rgba(0, 0, 0, 0.30); } :root[data-theme="light"] { color-scheme: light; --bg: #f5f7fa; --bg-deep: #ffffff; --surface: #ffffff; --surface-2: #f2f4f8; --surface-3: #e7ebf1; --surface-4: #dbe1ea; --surface-hover: #fbfcfe; --border: #e1e6ee; --border-soft: rgba(15, 23, 42, 0.08); --border-strong: #c9d1de; --text: #11151c; --text-dim: #4b5464; --text-faint: #6b7484; --accent: #3a63e0; --accent-2: #4f7cff; --accent-hover: #2f52c4; --accent-ink: #2f5ae0; --accent-fg: #ffffff; --accent-soft: rgba(79, 124, 255, 0.11); --accent-line: rgba(79, 124, 255, 0.42); --accent-glow: rgba(58, 99, 224, 0.22); --danger: #d0343a; --danger-hover: #b62b31; --danger-ink: #c02b31; --danger-fg: #ffffff; --danger-soft: rgba(208, 52, 58, 0.10); --success: #0f7a55; --success-soft: rgba(15, 122, 85, 0.11); --video: #6d28d9; --video-soft: rgba(109, 40, 217, 0.10); --image: #0369a1; --image-soft: rgba(3, 105, 161, 0.10); --doc: #b45309; --doc-soft: rgba(180, 83, 9, 0.11); --header-bg: rgba(245, 247, 250, 0.80); --scrim: rgba(23, 30, 43, 0.42); --glow: rgba(79, 124, 255, 0.16); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10); --shadow-lg: 0 26px 64px rgba(15, 23, 42, 0.18); --shadow-row: 0 4px 14px rgba(15, 23, 42, 0.08); } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--t-mid) ease, color var(--t-mid) ease; } /* Ambient light behind the header. Static — decorative motion that never stops is a distraction, so it stays still. */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 440px; background: radial-gradient(900px 340px at 50% -130px, var(--glow), transparent 70%); pointer-events: none; z-index: 0; transition: background var(--t-mid) ease; } body > * { position: relative; z-index: 1; } h1, h2, h3 { line-height: 1.25; letter-spacing: -0.011em; font-weight: 650; } a { color: inherit; } input, select, button, textarea { font-family: inherit; font-size: inherit; } button { cursor: pointer; } /* Author display rules would beat the UA's [hidden] rule, and the templates lean on the hidden attribute throughout. */ [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } ::selection { background: var(--accent-line); color: var(--accent-fg); } * { scrollbar-color: var(--surface-4) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--r-full); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-hover) var(--ease-hover); } .icon-sm { width: 15px; height: 15px; } .icon-lg { width: 22px; height: 22px; } /* -------------------------------------------------------------------------- 4. Motion system -------------------------------------------------------------------------- */ @keyframes reveal-up { from { opacity: 0; transform: translateY(15px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: none; } } @keyframes pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(0.97); } } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes swap-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } /* ---- Card lighting ------------------------------------------------------- Two pseudo-layers on every interactive card, both animated purely by opacity so they composite on the GPU. Transitioning box-shadow directly repaints the card on every frame, which is what makes a hover feel gritty rather than smooth. ::before is a pool of light that follows the pointer (JS writes --mx/--my) ::after is the drop shadow, faded in rather than re-drawn Both sit at z-index -1, above the card's own background but under its content, which is why the cards set `isolation: isolate`. -------------------------------------------------------------------------- */ .file-list li::before, .stat::before, .dropzone::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient( 260px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 72% ); opacity: 0; pointer-events: none; transition: opacity var(--t-hover) var(--ease-hover); } .file-list li::after, .stat::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--shadow-row); opacity: 0; pointer-events: none; transition: opacity var(--t-hover) var(--ease-hover); } .file-list li:hover::before, .file-list li:hover::after, .stat:hover::before, .stat:hover::after, .dropzone:hover::before, .dropzone.is-dragover::before { opacity: 1; } /* A row mid-removal shouldn't keep glowing on the way out. */ .file-list li.is-removing::before, .file-list li.is-removing::after { opacity: 0; } /* Entrance stagger. `backwards` (not `both`) so the animation leaves no lingering transform behind to fight hover and exit states. */ .reveal { animation: reveal-up var(--t-slow) var(--ease-out) backwards; animation-delay: var(--d, 0ms); } /* Theme change and list re-ordering ride the View Transitions API where it exists; these keep the crossfade from double-animating. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 999; } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn-primary, .btn-secondary, .btn-danger, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover, .btn-ghost:hover { transform: translateY(-2px); } /* The press is the one place a quick response is right — you want the button to answer the finger immediately. Releasing eases back normally. */ .btn-primary:active, .btn-secondary:active, .btn-danger:active, .btn-ghost:active { transform: scale(0.975); transition-duration: 90ms; } .btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: 0 2px 10px var(--accent-glow); } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 6px 18px var(--accent-glow); } .btn-secondary { background: var(--surface-3); border-color: var(--border-soft); color: var(--text); } .btn-secondary:hover { background: var(--surface-4); } .btn-danger { background: var(--danger); color: var(--danger-fg); } .btn-danger:hover { background: var(--danger-hover); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text-dim); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } button:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* -------------------------------------------------------------------------- 6. Header -------------------------------------------------------------------------- */ header { position: sticky; top: 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: var(--header-h); padding: 12px 24px; background: var(--header-bg); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); border-bottom: 1px solid var(--border); transition: background var(--t-mid) ease, border-color var(--t-mid) ease; } .brand { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; color: var(--text); } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 4px 14px var(--accent-glow); transition: transform var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover); } a.brand:hover .brand-mark { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 22px var(--accent-glow); } .brand-text { min-width: 0; } .brand h1 { font-size: 16px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-sub { display: block; font-size: 11.5px; color: var(--text-faint); letter-spacing: 0.02em; } .header-actions { display: flex; align-items: center; gap: 10px; } .user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); font-size: 13px; color: var(--text-dim); transition: background var(--t-mid) ease, border-color var(--t-mid) ease; } .user-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; } header a.back-link, .back-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--text-dim); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: color var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover), background var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .back-link:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-1px); } .back-link:active { transform: scale(0.97); } .back-link:hover .icon { transform: translateX(-2px); } /* Theme switch */ .theme-toggle { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-dim); overflow: hidden; transition: background var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover), transform var(--t-mid) var(--ease-soft); } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); transform: scale(1.06); } .theme-toggle:active { transform: scale(0.94); transition-duration: 90ms; } .theme-toggle .icon { position: absolute; transition: transform var(--t-slow) var(--ease-soft), opacity var(--t-mid) ease; } /* Dark theme shows the moon; light theme shows the sun. They rotate past each other rather than popping. */ [data-theme="dark"] .theme-toggle .t-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); } [data-theme="dark"] .theme-toggle .t-moon { opacity: 1; transform: none; } [data-theme="light"] .theme-toggle .t-sun { opacity: 1; transform: none; } [data-theme="light"] .theme-toggle .t-moon { opacity: 0; transform: rotate(90deg) scale(0.4); } /* Motion switch shares the theme switch's shape; the icons swap the same way */ [data-motion="full"] .theme-toggle .m-off, [data-motion="reduced"] .theme-toggle .m-on { opacity: 0; transform: scale(0.4); } [data-motion="full"] .theme-toggle .m-on, [data-motion="reduced"] .theme-toggle .m-off { opacity: 1; transform: none; } [data-motion="reduced"] #motion-toggle { color: var(--text-faint); } .prefs { display: inline-flex; align-items: center; gap: 6px; } .prefs.is-floating { position: fixed; top: 18px; right: 18px; z-index: 60; } .prefs.is-floating .theme-toggle { box-shadow: var(--shadow-sm); } /* -------------------------------------------------------------------------- 7. Layout -------------------------------------------------------------------------- */ main { max-width: var(--content-w); margin: 0 auto; padding: 28px 24px 96px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 32px 0 14px; } main h2 { font-size: 13px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); } .count-pill { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 8. Stat cards -------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; } .stat { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); transition: transform var(--t-hover) var(--ease-hover), background var(--t-mid) ease, border-color var(--t-mid) ease; } .stat:hover { transform: translateY(-3px); border-color: var(--border-strong); } .stat:hover .stat-icon { transform: translateY(-2px) scale(1.06); } .stat-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); transition: transform var(--t-mid) var(--ease-soft); } .stat-icon.is-video { background: var(--video-soft); color: var(--video); } .stat-icon.is-image { background: var(--image-soft); color: var(--image); } .stat-icon.is-size { background: var(--success-soft); color: var(--success); } .stat-value { font-size: 17px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; } .stat-label { font-size: 11.5px; color: var(--text-faint); letter-spacing: 0.04em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 9. Upload / drop zone -------------------------------------------------------------------------- */ .upload-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 8px; transition: background var(--t-mid) ease, border-color var(--t-mid) ease; } .dropzone { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: transparent; text-align: center; cursor: pointer; transition: border-color var(--t-mid) ease, background var(--t-mid) ease, transform var(--t-hover) var(--ease-hover); } /* The pointer-tracked pool does the lighting here, so the flat tint goes. */ .dropzone:hover { border-color: var(--accent-line); } .dropzone.is-dragover { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); } .dropzone-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-ink); transition: transform var(--t-slow) var(--ease-soft), background var(--t-mid) ease; } .dropzone:hover .dropzone-icon { transform: translateY(-3px); } .dropzone.is-dragover .dropzone-icon { transform: translateY(-6px) scale(1.12); } .dropzone.is-dragover .dropzone-icon .icon { transform: translateY(2px); } .dropzone-title { font-size: 15px; font-weight: 600; } .dropzone-hint { font-size: 12.5px; color: var(--text-faint); } .dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ---- Upload queue: everything picked but not yet sent ---- */ .upload-queue { margin-top: 8px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); overflow: hidden; animation: pop-in var(--t-hover) var(--ease-hover); } .queue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; } .queue-summary { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .queue-actions { display: flex; gap: 8px; } .queue-list { list-style: none; max-height: 264px; overflow-y: auto; border-top: 1px solid var(--border-soft); } .queue-item { display: flex; align-items: center; gap: 12px; padding: 9px 14px; animation: pop-in var(--t-hover) var(--ease-hover); } .queue-item + .queue-item { border-top: 1px solid var(--border-soft); } .queue-item .stat-icon { width: 30px; height: 30px; border-radius: 8px; } .queue-item .stat-icon .icon { width: 15px; height: 15px; } .queue-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .queue-size { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .queue-remove { width: 28px; height: 28px; } .queue-remove:hover { background: var(--danger-soft); color: var(--danger-ink); } .progress-wrap { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 8px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); animation: pop-in var(--t-hover) var(--ease-hover); } .progress-info { flex: 1; min-width: 0; } .progress-label { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text-dim); margin-bottom: 7px; } .progress-label .progress-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .progress-track { height: 7px; background: var(--bg-deep); border-radius: var(--r-full); overflow: hidden; } .progress-bar { position: relative; height: 100%; width: 0%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent), var(--accent-2)); overflow: hidden; transition: width 0.2s var(--ease-out); } /* Infinite motion, but on a genuine loading indicator — which is the one place it belongs. */ .progress-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: shimmer 1.4s linear infinite; } /* Live rate and time remaining, under the bar */ .progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; min-height: 15px; } .progress-text { font-size: 13px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; } /* -------------------------------------------------------------------------- 10. Toolbar -------------------------------------------------------------------------- */ .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .search-field { position: relative; flex: 1; min-width: 200px; } .search-field .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; transition: color var(--t-hover) var(--ease-hover); } .search-field:focus-within .search-icon { color: var(--accent); } .search-field input { width: 100%; padding: 10px 78px 10px 38px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 14px; transition: border-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover), background var(--t-mid) ease; } .search-field input::placeholder { color: var(--text-faint); } .search-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 2px 7px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--bg-deep); color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; pointer-events: none; transition: opacity var(--t-hover) var(--ease-hover); } .search-field input:focus + .search-kbd, .search-field input:not(:placeholder-shown) + .search-kbd { opacity: 0; } .filter-chips { display: flex; gap: 6px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); } .chip { padding: 6px 13px; border: none; border-radius: var(--r-xs); background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 550; transition: background var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .chip:hover { color: var(--text); background: var(--surface-2); } .chip:active { transform: scale(0.95); transition-duration: 90ms; } .chip.is-active { background: var(--accent-soft); color: var(--accent-ink); } .sort-select { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-dim); font-size: 13.5px; transition: border-color var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), background var(--t-mid) ease; } .sort-select:hover { color: var(--text); border-color: var(--border-strong); } .view-toggle { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); } .view-btn { display: grid; place-items: center; width: 32px; height: 30px; border: none; border-radius: var(--r-xs); background: transparent; color: var(--text-faint); transition: background var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .view-btn:hover { color: var(--text); background: var(--surface-2); } .view-btn:active { transform: scale(0.94); transition-duration: 90ms; } .view-btn.is-active { background: var(--accent-soft); color: var(--accent-ink); } /* -------------------------------------------------------------------------- 11. File list -------------------------------------------------------------------------- */ .file-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .file-list li { position: relative; isolation: isolate; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); transition: border-color var(--t-hover) var(--ease-hover), background var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .file-list li:hover { border-color: var(--border-strong); background: var(--surface-hover); transform: translateY(-3px); } /* A hovered or focused row floats above its neighbours so its tooltips are never painted behind the next card. */ .file-list li:hover, .file-list li:focus-within, .file-list li.is-open { z-index: 30; } .file-list li.is-open { border-color: var(--accent-line); } .file-list li.is-hidden { display: none; } /* Rows arriving from a filter change ease in rather than snapping. */ .file-list li.just-in { animation: pop-in var(--t-hover) var(--ease-hover) backwards; } /* Freshly uploaded row, highlighted once on arrival */ .file-list li.is-new { border-color: var(--accent); animation: ring-pulse 1.5s var(--ease-out) 2; } .file-list li.is-removing { height: 0 !important; min-height: 0; opacity: 0; overflow: hidden; transform: translateX(30px); pointer-events: none; box-shadow: none; transition: height var(--t-mid) var(--ease-in), opacity var(--t-exit) ease-in, transform var(--t-mid) var(--ease-in); } .file-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-width: 0; } .file-thumb { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 10px; background: var(--surface-3); color: var(--text-dim); overflow: hidden; transition: transform var(--t-mid) var(--ease-soft); } li:hover .file-thumb { transform: scale(1.05); } .file-thumb .thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity var(--t-slow) ease; } .file-thumb.has-thumb .thumb-img { opacity: 1; } .file-thumb.has-thumb .icon { visibility: hidden; } .file-thumb.type-video { background: var(--video-soft); color: var(--video); } .file-thumb.type-image { background: var(--image-soft); color: var(--image); } .file-thumb.type-file { background: var(--doc-soft); color: var(--doc); } .file-link { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; text-decoration: none; color: var(--text); cursor: pointer; background: none; border: none; padding: 0; text-align: left; font: inherit; } .file-name { font-size: 14.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t-hover) var(--ease-hover); } .file-link:hover .file-name { color: var(--accent-ink); } .file-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .file-meta .dot::before { content: "·"; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-full); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; transition: background var(--t-mid) ease, color var(--t-mid) ease; } .badge.type-video { background: var(--video-soft); color: var(--video); } .badge.type-image { background: var(--image-soft); color: var(--image); } .badge.type-file { background: var(--doc-soft); color: var(--doc); } .badge-shared { display: none; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-full); background: var(--success-soft); color: var(--success); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } li.is-shared .badge-shared { display: inline-flex; animation: swap-in var(--t-hover) var(--ease-hover); } /* Action buttons: view / download / share / delete */ .file-actions { display: flex; align-items: center; gap: 2px; flex: none; } .action-btn { display: grid; place-items: center; width: 34px; height: 34px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-faint); text-decoration: none; transition: background var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .action-btn:hover { background: var(--surface-3); color: var(--text); } .action-btn:hover .icon { transform: scale(1.14); } .action-btn:active { transform: scale(0.93); transition-duration: 90ms; } .action-btn.act-view:hover { background: var(--accent-soft); color: var(--accent-ink); } .action-btn.act-download:hover { background: var(--success-soft); color: var(--success); } .action-btn.act-share:hover { background: var(--accent-soft); color: var(--accent-ink); } .action-btn.act-delete:hover { background: var(--danger-soft); color: var(--danger-ink); } /* Direction carries the meaning: download dips, delete lifts away. */ .action-btn.act-download:hover .icon { transform: translateY(2px) scale(1.08); } .action-btn.act-delete:hover .icon { transform: translateY(-2px) scale(1.08); } .action-btn.is-on { background: var(--accent-soft); color: var(--accent-ink); } /* Tooltips. These sit above everything in the row's stacking context and the row itself is lifted on hover, so they always land in front. */ .tip { position: relative; } .tip::after, .tip::before { position: absolute; left: 50%; opacity: 0; pointer-events: none; z-index: 200; transition: opacity var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .tip::after { content: attr(data-tip); bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px); padding: 5px 9px; border-radius: var(--r-xs); background: var(--surface-4); border: 1px solid var(--border-strong); color: var(--text); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; box-shadow: var(--shadow-md); } /* Little arrow pointing back down at the button */ .tip::before { content: ""; bottom: calc(100% + 4px); transform: translateX(-50%) translateY(4px) rotate(45deg); width: 8px; height: 8px; background: var(--surface-4); border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); } .tip:hover::after, .tip:hover::before, .tip:focus-visible::after, .tip:focus-visible::before { opacity: 1; transition-delay: 180ms; } .tip:hover::after, .tip:focus-visible::after { transform: translateX(-50%) translateY(0); } .tip:hover::before, .tip:focus-visible::before { transform: translateX(-50%) translateY(0) rotate(45deg); } /* -------------------------------------------------------------------------- 12. Grid view — same markup, different shape -------------------------------------------------------------------------- */ .file-list.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; } .file-list.is-grid li.is-hidden { display: none; } .file-list.is-grid .file-row { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; } .file-list.is-grid .file-thumb { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--r-sm); } .file-list.is-grid li:hover .file-thumb { transform: none; } .file-list.is-grid li:hover .thumb-img { transform: scale(1.05); } .file-list.is-grid .thumb-img { transition: opacity var(--t-slow) ease, transform 620ms var(--ease-hover); } .file-list.is-grid .file-thumb .icon { width: 30px; height: 30px; } .file-list.is-grid .file-actions { justify-content: space-between; padding-top: 2px; border-top: 1px solid var(--border-soft); } .file-list.is-grid .file-meta { font-size: 11.5px; } /* A card with its share panel open takes the whole row, so the link and its buttons aren't squeezed into one narrow column. */ .file-list.is-grid li.is-open { grid-column: 1 / -1; } /* -------------------------------------------------------------------------- 13. Share panel — expands on a grid row rather than snapping open -------------------------------------------------------------------------- */ .share-panel-wrap { display: grid; grid-template-rows: 0fr; overflow: hidden; visibility: hidden; border-radius: 0 0 var(--r-md) var(--r-md); /* The visibility delay has to match the collapse duration exactly, or the panel blinks out before it has finished closing. */ transition: grid-template-rows var(--t-hover) var(--ease-hover), visibility 0s linear var(--t-hover); } li.is-open .share-panel-wrap { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--t-hover) var(--ease-hover), visibility 0s linear 0s; } .share-panel { min-height: 0; overflow: hidden; padding: 14px; background: var(--surface-2); border-top: 1px solid var(--border-soft); } /* Contents fade in just behind the expansion, so it reads as one motion */ .share-panel > * { opacity: 0; transform: translateY(-5px); transition: opacity var(--t-mid) ease, transform var(--t-hover) var(--ease-hover); } li.is-open .share-panel > * { opacity: 1; transform: none; transition-delay: 110ms; } .share-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .share-create, .share-active { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .share-duration { padding: 9px 12px; background: var(--bg-deep); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13.5px; cursor: pointer; transition: border-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover); } .share-duration:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .share-link-input { flex: 1; min-width: 180px; padding: 9px 12px; background: var(--bg-deep); color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 12px; transition: border-color var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover); } .share-link-input:focus { outline: none; border-color: var(--accent); color: var(--text); } .share-active .btn-secondary, .share-active .btn-danger { padding: 9px 14px; font-size: 13px; } .share-note { margin-top: 10px; font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; } /* -------------------------------------------------------------------------- 14. Empty states -------------------------------------------------------------------------- */ .empty { color: var(--text-dim); font-size: 14px; } .empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-lg); text-align: center; animation: pop-in var(--t-slow) var(--ease-out); } .empty-state .empty-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-faint); } .empty-state h3 { font-size: 16px; } .empty-state p { font-size: 13.5px; color: var(--text-faint); max-width: 380px; } /* -------------------------------------------------------------------------- 15. Toasts -------------------------------------------------------------------------- */ .toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 40px)); } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--r-md); box-shadow: var(--shadow-md); font-size: 13.5px; animation: toast-in var(--t-slow) var(--ease-soft); } .toast.is-out { animation: toast-out var(--t-exit) var(--ease-in) forwards; } .toast.is-success { border-left-color: var(--success); } .toast.is-error { border-left-color: var(--danger); } .toast .toast-icon { flex: none; margin-top: 1px; color: var(--accent); } .toast.is-success .toast-icon { color: var(--success); } .toast.is-error .toast-icon { color: var(--danger); } @keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.95); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateX(24px) scale(0.97); } } .flash { padding: 11px 14px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-sm); font-size: 14px; } /* -------------------------------------------------------------------------- 16. Lightbox — stays dark in both themes -------------------------------------------------------------------------- */ .lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: var(--scrim-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); align-items: center; justify-content: center; animation: fade-in var(--t-mid) ease; } .lightbox.is-closing { animation: fade-out var(--t-exit) var(--ease-in) forwards; } .lightbox-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent); animation: reveal-down var(--t-slow) var(--ease-out) backwards 80ms; } @keyframes reveal-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } .lightbox-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lightbox-counter { font-size: 12.5px; color: rgba(255, 255, 255, 0.65); font-variant-numeric: tabular-nums; } .lightbox-actions { display: flex; gap: 4px; } .lightbox-btn { display: grid; place-items: center; width: 36px; height: 36px; border: none; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.09); color: #fff; text-decoration: none; transition: background var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .lightbox-btn:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } .lightbox-btn:active { transform: scale(0.94); transition-duration: 90ms; } .lightbox-btn:hover .icon { transform: scale(1.12); } .lightbox-btn.is-danger:hover { background: #ff6b6b; color: #17181c; } .lightbox img { max-width: 92vw; max-height: 82vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); animation: pop-in var(--t-slow) var(--ease-out); transition: opacity var(--t-hover) var(--ease-hover); } /* Cross-fade while the next photo decodes */ .lightbox img.is-swapping { opacity: 0; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: none; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.09); color: #fff; transition: background var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); } .lightbox-nav.prev { left: 20px; } .lightbox-nav.next { right: 20px; } .lightbox-nav.prev:hover { transform: translateY(-50%) translateX(-3px); } .lightbox-nav.next:hover { transform: translateY(-50%) translateX(3px); } /* -------------------------------------------------------------------------- 17. Modal dialogs -------------------------------------------------------------------------- */ .confirm-overlay { display: none; position: fixed; inset: 0; z-index: 1100; background: var(--scrim); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); align-items: center; justify-content: center; padding: 20px; animation: fade-in var(--t-hover) var(--ease-hover); } .confirm-overlay.is-closing { animation: fade-out var(--t-exit) var(--ease-in) forwards; } .confirm-box { width: 100%; max-width: 380px; padding: 24px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: pop-in var(--t-slow) var(--ease-soft); } .confirm-overlay.is-closing .confirm-box { animation: pop-out var(--t-exit) var(--ease-in) forwards; } .confirm-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger-ink); } .confirm-box h3 { font-size: 17px; margin-bottom: 6px; } .confirm-box p { font-size: 13.5px; color: var(--text-dim); margin-bottom: 20px; word-break: break-word; } .confirm-buttons { display: flex; gap: 10px; } .confirm-buttons > * { flex: 1; } .details-box { max-width: 420px; } .details-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .details-title { min-width: 0; font-size: 15px; font-weight: 600; word-break: break-word; } .details-list { list-style: none; margin-bottom: 20px; border: 1px solid var(--border-soft); border-radius: var(--r-sm); overflow: hidden; } .details-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 13px; font-size: 13px; background: var(--surface-2); } .details-list li + li { border-top: 1px solid var(--border-soft); } .details-list .k { color: var(--text-faint); } .details-list .v { color: var(--text); text-align: right; word-break: break-all; } /* ---- Share dialog (grid view) ---- The panel node is physically moved in here from its row, so the inline presentation has to be undone: no card background, no top border, and crucially no opacity-0, since the `li.is-open` ancestor it relied on for the fade-in is no longer above it in the tree. */ .share-modal-box { max-width: 460px; } #share-modal .details-title { flex: 1; } #share-modal .share-panel { padding: 0; background: transparent; border-top: none; overflow: visible; } #share-modal .share-panel > * { opacity: 1; transform: none; transition: none; } #share-modal .share-create, #share-modal .share-active { display: grid; gap: 8px; } #share-modal .share-link-input { min-width: 0; width: 100%; } #share-modal .share-duration { width: 100%; } #share-modal .btn-secondary, #share-modal .btn-danger, #share-modal .btn-primary { width: 100%; justify-content: center; } .modal-close { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-faint); transition: background var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .modal-close:hover { background: var(--surface-3); color: var(--text); } .modal-close:active { transform: scale(0.94); transition-duration: 90ms; } /* -------------------------------------------------------------------------- 18. Login page -------------------------------------------------------------------------- */ .auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; } .login-box { width: 100%; max-width: 380px; padding: 36px 32px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); text-align: center; animation: reveal-up var(--t-slow) var(--ease-out); transition: background var(--t-mid) ease, border-color var(--t-mid) ease; } .login-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px; border-radius: var(--r-md); background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 10px 26px var(--accent-glow); transition: transform var(--t-slow) var(--ease-soft); } .login-box:hover .login-mark { transform: translateY(-3px) scale(1.04); } .login-box h1 { font-size: 21px; margin-bottom: 6px; } .login-box .login-sub { font-size: 13.5px; color: var(--text-faint); margin-bottom: 26px; } .field { position: relative; margin-bottom: 12px; text-align: left; } .field .field-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; transition: color var(--t-hover) var(--ease-hover); } .field:focus-within .field-icon { color: var(--accent); } .login-box input { width: 100%; padding: 13px 14px 13px 40px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 14px; transition: border-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover), background var(--t-mid) ease; } .login-box input::placeholder { color: var(--text-faint); } .login-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field .toggle-pw { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border: none; border-radius: var(--r-xs); background: transparent; color: var(--text-faint); /* transform has to be listed here too, or the press below snaps. */ transition: color var(--t-hover) var(--ease-hover), background var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .field .toggle-pw:hover { color: var(--text); background: var(--surface-2); } .field .toggle-pw:active { transform: translateY(-50%) scale(0.94); transition-duration: 90ms; } .login-box button[type="submit"] { width: 100%; padding: 13px; margin-top: 6px; border: none; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-fg); font-size: 14.5px; font-weight: 650; box-shadow: 0 4px 16px var(--accent-glow); transition: background var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover); } .login-box button[type="submit"]:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 22px var(--accent-glow); } .login-box button[type="submit"]:active { transform: scale(0.98); } .error { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 16px; background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--r-sm); color: var(--danger-ink); font-size: 13px; text-align: left; animation: shake 0.4s var(--ease-out); } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } .auth-foot { margin-top: 22px; font-size: 12px; color: var(--text-faint); } /* -------------------------------------------------------------------------- 19. Watch / shared pages -------------------------------------------------------------------------- */ .watch-main { max-width: 940px; margin: 0 auto; padding: 26px 24px 80px; } .media-frame { background: #000; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); animation: reveal-up var(--t-slow) var(--ease-out); } .video-player { display: block; width: 100%; max-height: 74vh; background: #000; } .shared-image { display: block; width: 100%; height: auto; max-height: 74vh; object-fit: contain; background: #000; } .media-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); animation: reveal-up var(--t-slow) var(--ease-out) backwards 100ms; transition: background var(--t-mid) ease, border-color var(--t-mid) ease; } .media-info { min-width: 0; } .media-info .media-name { font-size: 14.5px; font-weight: 600; word-break: break-word; } .media-info .media-sub { font-size: 12.5px; color: var(--text-faint); } .media-actions { display: flex; gap: 8px; flex-wrap: wrap; } .download-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-fg); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 10px var(--accent-glow); transition: background var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover); } .download-link:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 20px var(--accent-glow); } .download-link:active { transform: scale(0.97); } .download-link:hover .icon { transform: translateY(2px); } .no-preview { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 24px; background: var(--surface-2); text-align: center; } .no-preview .empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--doc-soft); color: var(--doc); } .shared-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 26px; font-size: 12.5px; color: var(--text-faint); text-align: center; } /* -------------------------------------------------------------------------- 19b. Account page -------------------------------------------------------------------------- */ .account-main { max-width: 760px; margin: 0 auto; padding: 28px 24px 96px; } .panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden; transition: background var(--t-mid) ease, border-color var(--t-mid) ease; } .panel-head { display: flex; align-items: flex-start; gap: 13px; padding: 18px 20px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); } .panel-head > div { flex: 1; min-width: 0; } .panel-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); } .panel-icon.is-danger { background: var(--danger-soft); color: var(--danger-ink); } .panel-icon.is-success { background: var(--success-soft); color: var(--success); } .panel-title { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; } .panel-sub { margin-top: 2px; font-size: 12.5px; color: var(--text-faint); } .panel-body { padding: 20px; } /* ---- Avatar ---- */ .avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-soft); } .avatar-preview { position: relative; display: grid; place-items: center; width: 76px; height: 76px; flex: none; border-radius: var(--r-full); background: var(--accent-soft); border: 2px solid var(--border); overflow: hidden; transition: border-color var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-preview .avatar-initials { font-size: 24px; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.02em; } /* Picked but not saved yet — the ring makes that state obvious. */ .avatar-preview.is-new { border-color: var(--accent); animation: ring-pulse 1.5s var(--ease-out) 2; } .avatar-controls { flex: 1; min-width: 170px; } /* The file input is hidden, so its label is the button. */ label.btn-secondary { cursor: pointer; } .avatar-remove { flex: none; } /* ---- Forms ---- */ .form-field { margin-bottom: 16px; } .form-field > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--text-dim); } .form-field .field { margin-bottom: 0; } .form-field input[type="text"], .form-field input[type="password"] { width: 100%; padding: 12px 14px 12px 40px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 14px; transition: border-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover), background var(--t-mid) ease; } .form-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-field .toggle-pw { right: 6px; } .field-hint { margin-top: 7px; font-size: 12px; color: var(--text-faint); } .field-hint.is-good { color: var(--success); } .field-hint.is-bad { color: var(--danger-ink); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; } /* ---- Password strength ---- */ .strength { margin-top: 9px; } .strength-track { height: 5px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; } .strength-bar { height: 100%; width: 0%; border-radius: var(--r-full); background: var(--text-faint); transition: width var(--t-hover) var(--ease-hover), background var(--t-hover) var(--ease-hover); } .strength-bar.is-weak { background: var(--danger); } .strength-bar.is-ok { background: var(--doc); } .strength-bar.is-strong { background: var(--success); } .strength-label { display: block; margin-top: 6px; font-size: 12px; color: var(--text-faint); } /* ---- Disk usage ---- */ .disk-bar { height: 12px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; } .disk-fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width var(--t-slow) var(--ease-hover); } .disk-fill.is-warn { background: linear-gradient(90deg, #e08b1f, var(--doc)); } .disk-fill.is-critical { background: linear-gradient(90deg, var(--danger-hover), var(--danger)); } .disk-legend { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 11px; font-size: 12.5px; color: var(--text-faint); } .disk-legend b { color: var(--text); font-weight: 650; } .inline-warning { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; background: var(--doc-soft); border: 1px solid var(--doc); border-radius: var(--r-sm); color: var(--doc); font-size: 13px; } /* ---- Active share links ---- */ .share-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .share-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); transition: border-color var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .share-list li:hover { border-color: var(--border-strong); } .share-list li.is-removing { height: 0 !important; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; transform: translateX(30px); pointer-events: none; transition: height var(--t-mid) var(--ease-in), padding var(--t-mid) var(--ease-in), opacity var(--t-exit) ease-in, transform var(--t-mid) var(--ease-in); } .share-list .file-thumb { width: 38px; height: 38px; } .share-list-main { flex: 1; min-width: 150px; } .share-list .share-link-input { flex: 1 1 200px; } .badge-forever { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-full); background: var(--doc-soft); color: var(--doc); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .account-foot { margin-top: 22px; text-align: center; font-size: 12px; color: var(--text-faint); } /* Avatar in the header chip */ .user-chip { text-decoration: none; transition: background var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } a.user-chip:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-1px); } .user-avatar { overflow: hidden; flex: none; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -------------------------------------------------------------------------- 20. Responsive -------------------------------------------------------------------------- */ @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { header { padding: 10px 16px; } .brand-sub { display: none; } .user-chip span:last-child { display: none; } .user-chip { padding: 5px; } main, .watch-main { padding: 20px 14px 80px; } .toolbar { gap: 8px; } .search-field { flex: 1 1 100%; order: -1; } .filter-chips { flex: 1; overflow-x: auto; } .sort-select { flex: 1; } .file-row { flex-wrap: wrap; gap: 12px; } .file-link { flex: 1 1 auto; } .file-actions { flex: 1 0 100%; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border-soft); } /* 44px minimum touch target */ .action-btn { flex: 1; width: auto; height: 44px; } /* Tooltips are hover-only affordances; on touch they just get in the way */ .tip::after, .tip::before { display: none; } .file-list.is-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .file-list.is-grid .file-actions { flex: 1 0 100%; } .toast-stack { left: 14px; right: 14px; bottom: 14px; max-width: none; } .lightbox-nav.prev { left: 8px; } .lightbox-nav.next { right: 8px; } .theme-toggle { width: 40px; height: 40px; } .account-main { padding: 20px 14px 80px; } .panel-body { padding: 16px; } /* Two password fields side by side is unreadable on a phone */ .form-grid { grid-template-columns: 1fr; } .form-actions > .btn-primary { flex: 1; } .avatar-row { gap: 12px; } .avatar-remove { flex: 1 0 100%; } .share-list li { gap: 10px; } .share-list .share-link-input { flex: 1 0 100%; } .share-list .btn-secondary, .share-list .btn-danger { flex: 1; } } /* -------------------------------------------------------------------------- 21. Reduced motion Keyed on [data-motion="reduced"], which the inline head script sets from an explicit choice if there is one and from prefers-reduced-motion otherwise. Two reasons it isn't the media query directly: 1. It lets someone with "reduce motion" enabled system-wide still opt into animation here, from the button in the header. 2. The usual blanket `transition-duration: 0.01ms !important` on `*` is the wrong remedy. It doesn't remove the movement — it removes the *smoothing*, so a hover still zooms, just instantly. That is a worse experience than the animation it was meant to spare you. So instead: things simply don't move. Colour, shadow and opacity keep transitioning at full length, since those don't cause motion discomfort and without them the interface feels dead. -------------------------------------------------------------------------- */ :root[data-motion="reduced"] { scroll-behavior: auto; } [data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } /* Nothing lifts, scales or slides. Listed explicitly rather than with a blanket `*:hover` because several elements rely on a transform for their position — killing those would move them off-centre. */ [data-motion="reduced"] .btn-primary:hover, [data-motion="reduced"] .btn-secondary:hover, [data-motion="reduced"] .btn-danger:hover, [data-motion="reduced"] .btn-ghost:hover, [data-motion="reduced"] .btn-primary:active, [data-motion="reduced"] .btn-secondary:active, [data-motion="reduced"] .btn-danger:active, [data-motion="reduced"] .btn-ghost:active, [data-motion="reduced"] .back-link:hover, [data-motion="reduced"] .back-link:active, [data-motion="reduced"] .theme-toggle:hover, [data-motion="reduced"] .theme-toggle:active, [data-motion="reduced"] .chip:active, [data-motion="reduced"] .view-btn:active, [data-motion="reduced"] .stat:hover, [data-motion="reduced"] .file-list li:hover, [data-motion="reduced"] .action-btn:hover, [data-motion="reduced"] .action-btn:active, [data-motion="reduced"] .lightbox-btn:hover, [data-motion="reduced"] .lightbox-btn:active, [data-motion="reduced"] .login-box button[type="submit"]:hover, [data-motion="reduced"] .login-box button[type="submit"]:active, [data-motion="reduced"] .download-link:hover, [data-motion="reduced"] .download-link:active, [data-motion="reduced"] .empty-state { transform: none; } /* Icons and thumbnails hold still too. */ [data-motion="reduced"] .icon, [data-motion="reduced"] .file-thumb, [data-motion="reduced"] .thumb-img, [data-motion="reduced"] .stat-icon, [data-motion="reduced"] .dropzone-icon, [data-motion="reduced"] .brand-mark, [data-motion="reduced"] .login-mark { transform: none !important; } /* These two keep the transform that centres them — they just stop nudging. */ [data-motion="reduced"] .lightbox-nav:hover { transform: translateY(-50%); } [data-motion="reduced"] .field .toggle-pw:active { transform: translateY(-50%); } /* The pointer-tracked pool of light is motion by definition. */ [data-motion="reduced"] .file-list li::before, [data-motion="reduced"] .stat::before, [data-motion="reduced"] .dropzone::before { display: none; } /* The dropzone loses its tint along with the light, so give it back. */ [data-motion="reduced"] .dropzone:hover, [data-motion="reduced"] .dropzone.is-dragover { background: var(--accent-soft); }