/* ========================================================================== Aurora theme — WeTransfer-inspired visual language for DripFiles. Same DOM/IDs as the "modern" theme (front-end scripts untouched), only the visual layer changes. Design tokens below map to the admin-configurable colors (theme_color / theme_color_secondary / theme_color_text), emitted as CSS custom properties in the page . ========================================================================== */ /* bulma.purged.css is linked separately in the header to avoid CSS @import chains */ :root, :root[data-theme="light"] { --aurora-primary: #3e8ed0; /* Same colour as a bare channel list, so focus rings can be built with alpha. */ --aurora-primary-rgb: 62, 142, 208; --aurora-secondary: #8b5cf6; --aurora-text: #fff; --aurora-ink: #14171f; --aurora-muted: #6b7280; --aurora-border: #e5e7eb; --aurora-surface: #ffffff; --aurora-surface-2: #f5f6f8; --aurora-surface-3: #eef0f4; --aurora-sidebar-bg: rgba(255, 255, 255, .96); --aurora-sidebar-border: rgba(255, 255, 255, .7); --aurora-card-bg: #ffffff; --aurora-card-border: rgba(255, 255, 255, .76); --aurora-mobile-nav-bg: #ffffff; --aurora-body-mobile: #ffffff; --aurora-nav-item: #3e424c; --aurora-field-bg: #f1f2f6; --aurora-field-bg-hover: #e9ebf1; --aurora-field-bg-focus: #ffffff; --aurora-divider: #eceef2; --aurora-placeholder: #9aa0a6; --aurora-radius-lg: 28px; --aurora-radius-md: 18px; --aurora-shadow: 0 30px 80px -24px rgba(15, 23, 42, .38), 0 10px 30px -12px rgba(15, 23, 42, .18); color-scheme: light; } :root[data-theme="dark"] { /* Deeper base + clearer steps so card / fields / chrome don't mud into one grey */ --aurora-ink: #f5f7fb; --aurora-muted: #aab3c2; --aurora-border: #3d4658; --aurora-surface: #10141c; --aurora-surface-2: #1a2030; --aurora-surface-3: #2a3142; --aurora-sidebar-bg: rgba(12, 15, 22, .97); --aurora-sidebar-border: rgba(255, 255, 255, .14); --aurora-card-bg: #151a24; --aurora-card-border: rgba(255, 255, 255, .14); --aurora-mobile-nav-bg: #0c0f16; --aurora-body-mobile: #080a0f; --aurora-nav-item: #d4dae4; /* Fields lift off the card (light mode: grey → white on focus) */ --aurora-field-bg: #232a3a; --aurora-field-bg-hover: #2c3448; --aurora-field-bg-focus: #323b52; --aurora-divider: #2f3748; --aurora-placeholder: #8e97a8; --aurora-shadow: 0 30px 80px -20px rgba(0, 0, 0, .72), 0 12px 32px -10px rgba(0, 0, 0, .5); color-scheme: dark; } /* Slightly deepen primary buttons for WCAG AA white text (same brand hue; --aurora-primary-btn from critical CSS) */ .button.is-info { background-color: var(--aurora-primary-btn, color-mix(in srgb, var(--aurora-primary) 82%, #000 18%)) !important; color: #fff !important; } .button.is-info:hover, .button.is-info:focus { background-color: var(--aurora-primary-btn-hover, color-mix(in srgb, var(--aurora-primary) 76%, #000 24%)) !important; color: #fff !important; } body { width: 100%; height: 100%; margin: 0; padding: 0; color: var(--aurora-ink); font-family: 'Anton', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #0b0d12; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /* No background transition: it can inflate CLS when deferred CSS applies */ -webkit-backface-visibility: hidden; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 768px) { body { position: fixed; background-color: var(--aurora-body-mobile); overflow-y: scroll; } } /* Color-wash overlay on top of the (optional) admin background image/video, so Aurora always reads as a bold flat-color canvas even when no custom background has been configured. Sits above .background, below content. */ .background-overlay { position: fixed !important; left: 0; top: 0; width: 100% !important; height: 100% !important; z-index: 0 !important; pointer-events: none; background: linear-gradient(135deg, var(--aurora-primary) 0%, var(--aurora-secondary) 100%); opacity: .82; mix-blend-mode: normal; } @media (max-width: 768px) { .background-overlay { display: none; } } .main-logo { position: fixed; top: 16px; left: 16px; max-height: 34px; background: var(--aurora-surface); padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); z-index: 2; } @media (max-width: 768px) { .main-logo { display: none; } } .mobile-nav { display: none; font-size: 14px; } @media (max-width: 768px) { .mobile-nav { display: block; position: absolute; width: 100%; } } .mobile-nav .navbar-link, .mobile-nav .navbar-item { line-height: 15px; } /* Lightweight static upload CTA (replaces lord-icon on first paint) */ .df-upload-hero { display: flex; width: 120px; height: 120px; margin: 4px auto 10px; align-items: center; justify-content: center; color: var(--aurora-primary, #3e8ed0); background: rgba(var(--aurora-primary-rgb, 62, 142, 208), 0.12); border: 0; border-radius: 28px; font-size: 52px; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .df-upload-hero:hover, .df-upload-hero:focus { transform: translateY(-2px) scale(1.03); background: rgba(var(--aurora-primary-rgb, 62, 142, 208), 0.18); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); outline: none; } .df-upload-hero i { line-height: 1; } .df-terms-hero { width: 140px; height: 140px; margin: 10px auto 18px; font-size: 64px; border-radius: 36px; cursor: default; } .df-terms-hero:hover { transform: none; box-shadow: none; } .background { position: fixed !important; left: 0; top: 0; width: 100% !important; height: 100% !important; z-index: 0 !important; cursor: pointer; background: linear-gradient(135deg, var(--aurora-primary) 0%, var(--aurora-secondary) 100%); } @media (max-width: 768px) { .background { display: none; } } .background .vegas-timer { display: none; } .background .vegas-slide-inner { position: absolute; width: 100%; height: 100%; } .drop-overlay { pointer-events: none; display: none; position: fixed; z-index: 10; border-color: #FFF; border-style: dotted; border-radius: var(--aurora-radius-md); top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .drop-overlay p { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 600; color: #FFF; } .tabs:not(.core) { position: absolute; top: 16px; right: 16px; z-index: 5; } @media (max-width: 768px) { .tabs:not(.core) { display: none; } } .tabs:not(.core) li { font-size: 14px; } .tabs:not(.core) li a { background: var(--aurora-surface); color: var(--aurora-ink); font-weight: 600; padding: 11px 18px; border-radius: 999px !important; margin-left: 6px; box-shadow: 0 8px 20px rgba(15, 23, 42, .14); } .tabs:not(.core) li.is-active a { /* primary chip — stays readable in both themes (ink would invert badly in dark) */ background: var(--aurora-primary-btn, var(--aurora-ink)); color: #fff; } .tab-window { position: fixed; right: 0; top: 0; bottom: 0; width: 0; min-width: 0; max-width: 1150px; background: var(--aurora-surface); color: var(--aurora-ink); border-left: 1px solid var(--aurora-border); display: none; justify-content: center; z-index: 9; } .tab-window.active { display: flex; width: auto; min-width: 750px; z-index: 9; } @media (max-width: 768px) { /* Closed by default — never show the sheet without .active */ .tab-window { display: none !important; } /* Full-height sheet under the mobile nav; scroll lives inside the tab */ .tab-window.active { top: 58px; right: 0; bottom: 0; left: 0; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: auto; margin: 0 !important; display: flex !important; flex-direction: column; overflow: hidden; overscroll-behavior: none; z-index: 20; box-shadow: 0 -8px 40px rgba(15, 20, 35, .18); } /* IMPORTANT: do NOT use width:100% + horizontal margin on .tab — that is wider than the sheet and pushes file cards off the right edge. Use padding for inset; width fills the flex parent cleanly. */ .tab-window .tab, .tab-window .tab.large, .tab-window .tab.extra-large { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 56px 14px 28px; box-sizing: border-box; } .tab-window.active .tab.active { display: block; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } #tab-files .files-toolbar { margin-bottom: 12px; } #tab-files .files-toolbar-title { font-size: 14px; } /* File preview: single-column stack, never wider than the sheet content box */ .tab-window .tab .files { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 10px; box-sizing: border-box; overflow-x: hidden; } /* Grid on mobile is already a column; list mode keeps compact row thumbs */ #tab-files .files.is-list-view { gap: 8px; } .tab-window .tab .files .file, .tab-window .tab .files .file.is-image-file, .tab-window .tab .files .file.is-video, .tab-window .tab .files .file.is-image, .tab-window .tab .files .file.is-code-file, .tab-window .tab .files .file.is-pdf-file, .tab-window .tab .files .file.is-zip-file { display: block !important; flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } .tab-window .tab .files .file .file-content-block, .tab-window .tab .files .file .file-details { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .tab-window .tab .files .file img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 220px !important; object-fit: cover !important; } .tab-window .close-btn { z-index: 2; left: 12px; top: 12px; } .tab-window hr { top: 48px; } /* When any panel (file preview, contact, terms…) is open: pin the page behind it so scroll/bounce never hits the download/upload shell. */ body.page-panel-open { overflow: hidden !important; overscroll-behavior: none; touch-action: none; } body.page-panel-open:not(.df-page-download) { position: fixed !important; left: 0; right: 0; width: 100%; } /* Panel + viewer overlays must still receive vertical pans */ body.page-panel-open .tab-window, body.page-panel-open .tab-window *, body.page-panel-open #imageModal, body.page-panel-open #imageModal *, body.page-panel-open #videoModal, body.page-panel-open #videoModal *, body.page-panel-open #codeModal, body.page-panel-open #codeModal *, body.page-panel-open #pdfModal, body.page-panel-open #pdfModal *, body.page-panel-open #zipModal, body.page-panel-open #zipModal *, body.page-panel-open .df-info-panel, body.page-panel-open .df-info-panel * { touch-action: pan-y; } body.page-panel-open .upload-block, body.page-panel-open .upload-block .upload-block-inner { overscroll-behavior: none; } } .tab-window .close-btn { position: absolute; left: 24px; top: 19px; font-size: 20px; color: var(--aurora-primary); } .tab-window hr { position: absolute; width: 100%; top: 35px; background: var(--aurora-divider); height: 1px; } .tab-window .tab { display: none; width: 90%; min-width: 300px; margin: 80px 50px 50px 50px; overflow-y: auto; } .tab-window .tab.active { display: block; } .tab-window .tab.large { max-width: 900px; } .tab-window .tab.extra-large { max-width: 1000px; } .tab-window .tab h1 { font-size: 40px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 20px; } .tab-window .tab h2 { font-size: 25px; font-weight: 700; margin-bottom: 10px; } /* —— Legal / Terms document —— */ .tab-window .tab.df-legal-tab { overflow-y: auto; padding: 28px 28px 40px; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .df-legal { max-width: 42rem; margin: 0 auto; color: var(--aurora-ink); font-size: 14px; line-height: 1.65; } .df-legal-header { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--aurora-border); } .df-legal-kicker { margin: 0 0 6px; color: var(--aurora-primary, #3e8ed0); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .df-legal h1 { margin: 0 0 8px !important; color: var(--aurora-ink) !important; font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1.15 !important; } .df-legal-meta { margin: 0; color: var(--aurora-muted); font-size: 12px; } .df-legal-lead { margin: 0 0 20px; padding: 14px 16px; color: var(--aurora-ink); background: var(--aurora-surface-2); border: 1px solid var(--aurora-border); border-radius: 14px; } .df-legal-lead p { margin: 0; } .df-legal-toc { margin: 0 0 26px; padding: 14px 16px 12px; background: var(--aurora-surface); border: 1px solid var(--aurora-border); border-radius: 14px; } .df-legal-toc > p { margin: 0 0 8px; color: var(--aurora-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .df-legal-toc ol { margin: 0; padding: 0 0 0 1.15rem; } .df-legal-toc li { margin: 0 0 5px; } .df-legal-toc a { color: var(--aurora-primary, #3374ab); text-decoration: none; font-weight: 650; } .df-legal-toc a:hover { text-decoration: underline; } .df-legal section { margin: 0 0 22px; } .df-legal h2 { margin: 0 0 10px !important; color: var(--aurora-ink) !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: -.02em !important; line-height: 1.25 !important; } .df-legal p { margin: 0 0 10px; color: var(--aurora-nav-item); } .df-legal ul { margin: 0 0 12px; padding: 0 0 0 1.2rem; } .df-legal li { margin: 0 0 6px; color: var(--aurora-nav-item); } .df-legal a { color: var(--aurora-primary-btn, #3374ab); } .df-legal-footer { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--aurora-border); } .df-legal-footer p { margin: 0; color: var(--aurora-muted); font-size: 12px; line-height: 1.45; } @media (min-width: 769px) { .tab-window.active:has(#tab-terms.active) { width: min(640px, calc(100vw - 280px)); min-width: min(520px, calc(100vw - 280px)); } } @media (max-width: 768px) { .tab-window .tab.df-legal-tab { padding: 22px 18px 36px; } .df-legal h1 { font-size: 24px !important; } } /* Shared field language for every tab (contact, API keys, …). #tab-account carries its own id-scoped rules, so its panels are unaffected by these. */ .tab-window .tab .field { margin-bottom: 18px; max-width: 560px; } .tab-window .tab .label { margin-bottom: 6px; color: var(--aurora-muted); font-size: 12px; font-weight: 500; } .tab-window .tab .input, .tab-window .tab .textarea, .tab-window .tab select { width: 100%; height: auto; min-height: 46px; padding: 12px 14px; box-sizing: border-box; color: var(--aurora-ink); background-color: var(--aurora-field-bg); border: 1.5px solid transparent !important; border-radius: 12px !important; outline: none !important; box-shadow: none !important; font-family: inherit; font-size: 13px; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .tab-window .tab .input:hover, .tab-window .tab .textarea:hover, .tab-window .tab select:hover { background-color: var(--aurora-field-bg-hover); } .tab-window .tab .input:focus, .tab-window .tab .textarea:focus, .tab-window .tab select:focus { background-color: var(--aurora-field-bg-focus); border-color: var(--aurora-primary) !important; box-shadow: 0 0 0 3px rgba(var(--aurora-primary-rgb), .16) !important; } .tab-window .tab .textarea { min-height: 120px; line-height: 1.5; resize: vertical; } .tab-window .tab .input::placeholder, .tab-window .tab .textarea::placeholder { color: var(--aurora-placeholder); } .tab-window .tab .button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 12px !important; font-weight: 600; } .tab-window .tab .field.is-right { max-width: 560px; text-align: right; } @media (max-width: 768px) { .tab-window .tab { width: 100%; margin: 70px 25px 25px 25px; } .tab-window .tab.large { min-width: 300px; } .tab-window .tab h1 { font-size: 30px; } } .tab-window .tab-logo { position: absolute; bottom: 10px; right: 10px; max-width: 70px; } .upload-block { position: relative; display: flex; height: 100vh; align-items: center; justify-content: center; margin-left: 0; overflow-y: hidden; } @media (max-width: 768px) { .upload-block { height: 100%; margin: 0; flex-direction: column; padding-top: 53px; } } .upload-block .upload-block-inner { position: relative; display: flex; flex-direction: column; background: var(--aurora-card-bg); color: var(--aurora-ink); width: 400px; height: 540px; border-radius: var(--aurora-radius-lg); box-shadow: var(--aurora-shadow); } @media (max-width: 768px) { .upload-block .upload-block-inner { width: 100%; height: 100%; border-radius: 0; box-shadow: none; } } .upload-block.with-logo .upload-block-inner { height: 620px; } .upload-block .upload-block-logo { height: 90px; width: 100%; text-align: center; } .upload-block .upload-block-logo img { display: inline-block; height: 60px; margin: 15px 0; } .upload-block .upload-block-content { display: none; align-items: center; justify-content: center; flex-wrap: wrap; flex-grow: 1; width: 100%; height: 100%; -ms-overflow-style: none; scrollbar-width: thin; } .upload-block .upload-block-content ::-webkit-scrollbar { width: 3px; } .upload-block .upload-block-content.active { display: flex; } .upload-block .upload-block-content.start-top { align-items: start; } @media (max-width: 768px) { .upload-block .upload-block-content lord-icon { height: 120px !important; } } .upload-block .upload-block-content#upload > .button-block > button { width: 70%; } .upload-block .upload-block-content#upload > .button-block > button.options { width: 44px; min-width: 0; margin-left: 20px; } .upload-block .upload-block-content .inline-content { width: inherit; } .upload-block .upload-block-content .add-files { width: 300px; height: 300px; cursor: pointer; } .upload-block .upload-block-content span.description { display: block; width: 100%; text-align: center; padding: 0 16px; font-size: 16px; font-weight: 600; color: var(--aurora-ink); } .upload-block .upload-block-content span.folder-select { display: block; text-align: center; width: 100%; font-size: 13px; font-weight: 500; color: var(--aurora-muted); text-decoration: underline; padding-top: 6px; text-underline-position: under; text-underline-offset: 0.5px; } .upload-block .upload-block-content .button-block { background: var(--aurora-card-bg); height: auto; min-height: 92px; width: 100%; padding: 16px 16px 18px; box-sizing: border-box; border-top: 1px solid var(--aurora-border); border-bottom-left-radius: var(--aurora-radius-lg); border-bottom-right-radius: var(--aurora-radius-lg); margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 1; } /* Upload success: Share (native) + Copy sit side by side on mobile */ .upload-block .upload-block-content#upload-finished .upload-finished-actions { flex-wrap: wrap; } .upload-block .upload-block-content#upload-finished #share-url-btn { min-width: min(46%, 160px); gap: 8px; } .upload-block .upload-block-content#upload-finished #share-url-btn i { font-size: 16px; line-height: 1; } .upload-block .upload-block-content#upload-finished #copy-url-btn.is-light { background: var(--aurora-surface-3) !important; color: var(--aurora-ink) !important; box-shadow: none; } .upload-block .upload-block-content#download .df-share-page-url { display: none; } @media (max-width: 768px) { .upload-block .upload-block-content#download .df-share-page-url:not([hidden]) { display: inline-flex; } } /* Desktop: share sheet is uncommon — keep copy as the main action */ @media (min-width: 769px) { .upload-block .upload-block-content#upload-finished #share-url-btn { display: none !important; } .upload-block .upload-block-content#upload-finished #copy-url-btn.is-light { background: var(--aurora-primary-btn, var(--aurora-primary)) !important; color: #fff !important; } } .upload-block .upload-block-content .button-block button { min-width: 50%; height: 52px; font-weight: 700; font-size: 15px; letter-spacing: .1px; box-shadow: 0 12px 24px -10px rgba(15, 23, 42, .3); transition: transform .15s ease, box-shadow .15s ease; } .upload-block .upload-block-content .button-block button:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(15, 23, 42, .38); } .upload-block .upload-block-content .button-block button.options { width: 44px; min-width: 0; margin-left: 20px; } .upload-block .upload-block-content#download #download-form { max-width: 100%; height: 100%; } @media (max-width: 768px) { .upload-block .upload-block-content#download #download-form { width: 100%; } } .upload-block .upload-block-content#download #download-form form { display: flex; flex-direction: column; height: inherit; } .upload-block .upload-block-content#download .password-block { display: flex; flex-direction: column; justify-content: center; text-align: center; margin: 0 20px; flex-grow: 1; } .upload-block .upload-block-content#download .password-block h1 { font-size: 35px; } .upload-block .upload-block-content#download .password-block .field { width: 100%; } .upload-block .upload-block-content#download .block-icon { width: 60%; margin-top: 34px; } .upload-block .upload-block-content#download .block-icon.sm { width: 36%; margin-top: 18px; } /* Light/dark icon pair: head FOUC sets data-theme before paint */ :root[data-theme="dark"] .upload-block .upload-block-content#download .block-icon.df-icon-light { display: none !important; } :root[data-theme="dark"] .upload-block .upload-block-content#download .block-icon.df-icon-dark { display: block !important; /* beats [hidden] on the dark asset */ } .upload-block .upload-block-content#download .top { display: flex; flex-direction: column; justify-content: center; align-items: center; } .upload-block .upload-block-content#download .top h1 { font-size: 19px; font-weight: 700; max-width: 80%; text-align: center; margin-top: 22px; } .upload-block .upload-block-content#download .top .expire { font-size: 14px; color: var(--aurora-muted); } .upload-block .upload-block-content#download #download-started { display: none; flex-direction: column; height: 100%; } .upload-block .upload-block-content#download #download-started.active { display: flex; } .upload-block .upload-block-content#download #download-started .top { flex-grow: 1; } .upload-block .upload-block-content#download #download-started h1 { font-size: 18px; } .upload-block .upload-block-content#download .upload-attribution { display: inline-flex; flex: 0 0 auto; gap: 7px; margin: 12px auto 0; padding: 7px 11px; align-items: center; color: var(--aurora-primary-btn, var(--aurora-primary)); background: rgba(var(--aurora-primary-rgb, 62, 142, 208), .1); border: 1px solid rgba(var(--aurora-primary-rgb, 62, 142, 208), .22); border-radius: 999px; font-size: 12px; font-weight: 750; line-height: 1; } .upload-block .upload-block-content#download .upload-attribution i { font-size: 14px; } .upload-block .upload-block-content#download .upload-message { width: calc(100% - 40px); max-width: 100%; flex: 0 1 auto; min-height: 0; max-height: 140px; margin: 14px 20px 4px; padding: 12px 14px 13px; box-sizing: border-box; color: var(--aurora-ink); background: var(--aurora-surface-2); border: 1px solid var(--aurora-border); border-left: 3px solid var(--aurora-primary-btn, var(--aurora-primary)); border-radius: 12px; overflow-y: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } .upload-block .upload-block-content#download .upload-message-label { display: inline-flex; gap: 6px; margin: 0 0 6px; align-items: center; color: var(--aurora-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase; } .upload-block .upload-block-content#download .upload-message-label i { font-size: 13px; color: var(--aurora-primary-btn, var(--aurora-primary)); line-height: 1; } .upload-block .upload-block-content#download .upload-message-body { margin: 0; color: var(--aurora-ink); font-size: 13.5px; font-weight: 500; font-style: normal; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } :root[data-theme="dark"] .upload-block .upload-block-content#download .upload-message { background: #121722; border-color: rgba(255, 255, 255, .1); border-left-color: var(--aurora-primary-btn, var(--aurora-primary)); } /* Belt and braces for the in the head: if a WebKit build still auto-links a digit run inside a transfer message or a file name ("… 1080P 12000 3840X2160 …" reads as a phone number to it), keep it looking and behaving like the plain text it is. Scoped on purpose — a real tel: link elsewhere (custom pages) must keep working. */ .upload-message a[href^="tel:"], .tab .files .file .file-details a[href^="tel:"] { color: inherit; text-decoration: none; pointer-events: none; } .upload-block .upload-block-content#download .selected-files { max-height: 150px; overflow-y: auto; border-top: 1px solid var(--aurora-border); } @media (max-width: 768px) { .upload-block .upload-block-content#download .selected-files { max-height: none; } } .upload-block .upload-block-content#download .selected-files ul li:last-child { border-bottom: none; } .upload-block .upload-block-content#download .rounded-side-button { width: 44px; min-width: 44px; margin-right: 44px; } .upload-block .upload-block-content#download .rounded-side-button i { font-weight: 700; } .upload-block .upload-form { display: flex; flex-direction: column; flex-grow: 1; width: 100%; max-height: calc(100% - 84px); min-height: calc(100% - 84px); border-top-left-radius: var(--aurora-radius-lg); border-top-right-radius: var(--aurora-radius-lg); overflow-y: auto; } .upload-block .upload-form .select-first-files { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; border-bottom: 1px solid var(--aurora-border); min-height: 170px; padding: 12px 0; } .upload-block .upload-form .select-first-files .outside-container { margin-top: -15px; cursor: pointer; } @media (max-width: 768px) { .upload-block .upload-form .select-first-files .outside-container lord-icon { height: 100px !important; } } .upload-block .upload-form form input[type="file"], .upload-block .upload-form form .emailToInput { visibility: hidden; height: 0; width: 0; position: absolute; } .upload-block .upload-form form .input-group { width: auto; margin: 6px 20px; position: relative; } /* Soft filled fields that echo the pill radio-group track. appearance:none is what keeps the select from falling back to the native OS control. */ .upload-block .upload-form form .input-group input, .upload-block .upload-form form .input-group textarea, .upload-block .upload-form form .input-group select { margin: 0; padding: 0 14px; font-family: inherit; font-size: 13px; height: 46px; width: 100%; border: 1.5px solid transparent; border-radius: 12px; background-color: var(--aurora-field-bg); outline: none !important; color: var(--aurora-ink); box-shadow: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } /* iOS Safari zooms the page when focusing a field with font-size < 16px. Keep desktop at 13px; on mobile use 16px so focus does not zoom (message, email, password, etc. in the transfer form). */ @media (max-width: 768px) { .upload-block .upload-form form .input-group input, .upload-block .upload-form form .input-group textarea, .upload-block .upload-form form .input-group select, .upload-block .upload-form form .input-group input.input, .upload-block .upload-form form .input-group textarea.input, #transfer-message { font-size: 16px !important; } } .upload-block .upload-form form .input-group input:hover, .upload-block .upload-form form .input-group textarea:hover, .upload-block .upload-form form .input-group select:hover { background-color: var(--aurora-field-bg-hover); } .upload-block .upload-form form .input-group input:focus, .upload-block .upload-form form .input-group textarea:focus, .upload-block .upload-form form .input-group select:focus { background-color: var(--aurora-field-bg-focus); border-color: var(--aurora-primary); box-shadow: 0 0 0 3px rgba(var(--aurora-primary-rgb), .16); } .upload-block .upload-form form .input-group input[readonly], .upload-block .upload-form form .input-group input[readonly]:hover { background-color: var(--aurora-surface-2); color: var(--aurora-muted); cursor: default; } .upload-block .upload-form form .input-group select { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; } .upload-block .upload-form form .input-group select::-ms-expand { display: none; } .upload-block .upload-form form .input-group input::placeholder, .upload-block .upload-form form .input-group textarea::placeholder { color: var(--aurora-placeholder); } .upload-block .upload-form form .input-group span.label { display: block; font-size: 12px; font-weight: 600; color: var(--aurora-muted); margin-bottom: 6px; } .upload-block .upload-form form .input-group span.label[data-help] { cursor: pointer; } .upload-block .upload-form form .input-group textarea { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.5; resize: none; } .upload-block .upload-form form .input-group .char-count { display: block; margin-top: 4px; text-align: right; font-size: 11px; font-weight: 600; color: var(--aurora-muted); font-variant-numeric: tabular-nums; } .upload-block .upload-form form .input-group .char-count.is-full { color: #d64545; } .upload-block .upload-form form .input-group .recipients { margin-top: 5px; } .upload-block .upload-form form .input-group .recipients span { position: relative; display: inline-block; height: auto; margin-right: 5px; } .upload-block .upload-form form .input-group .recipients span .remove { display: none; position: absolute; width: 20px; text-align: center; right: 0; top: 0; background: var(--aurora-surface-3); font-weight: bold; cursor: pointer; } .upload-block .upload-form form .input-group .recipients :hover .remove { display: block; } .upload-block .upload-form form .input-group .recipients .tag:not(body).is-light { color: var(--aurora-ink); } .upload-block .upload-form form .advanced-options { position: relative; background: var(--aurora-surface-2); display: none; padding-top: 12px; } .upload-block .upload-form form .advanced-options .input-group { margin-bottom: 10px; } /* Nested panel: elevated surface for contrast against the tinted tray. */ .upload-block .upload-form form .advanced-options input, .upload-block .upload-form form .advanced-options textarea, .upload-block .upload-form form .advanced-options select { background-color: var(--aurora-surface); border-color: var(--aurora-border); color: var(--aurora-ink); opacity: 1; } .upload-block .upload-form form .advanced-options input:hover, .upload-block .upload-form form .advanced-options textarea:hover, .upload-block .upload-form form .advanced-options select:hover { background-color: var(--aurora-surface); border-color: var(--aurora-border); } .upload-block .upload-form form .advanced-options input:focus, .upload-block .upload-form form .advanced-options textarea:focus, .upload-block .upload-form form .advanced-options select:focus { border-color: var(--aurora-primary); } .upload-block .upload-form form .advanced-options input[readonly], .upload-block .upload-form form .advanced-options input[readonly]:hover { background-color: var(--aurora-surface-3); border-color: transparent; color: var(--aurora-muted); } .upload-block .upload-form form .advanced-options select[name="expire"]:hover { cursor: pointer; } .upload-block .upload-form form .advanced-options h1 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-left: 20px; padding-top: 10px; font-weight: 700; color: var(--aurora-muted); } .upload-block .upload-form .radio-group { width: auto; display: flex; align-content: stretch; flex-wrap: nowrap; font-size: 0.79em; background: var(--aurora-field-bg); border-radius: 999px; padding: 3px; } .upload-block .upload-form .radio-group .radio { display: inline-block; flex: 1; font-family: inherit; background: transparent; text-align: center; width: auto; padding: 7px 10px; margin: 0; border-radius: 999px !important; font-weight: 600; transition: background .15s ease, color .15s ease; } .upload-block .upload-form .radio-group .radio.selected { background: var(--aurora-primary); color: white; font-weight: 700; } /* Sits outside the flow so showing it never nudges the centred card sideways. 200px card half-width + 24px gap; the min() keeps it on screen on narrow desktops. */ .upload-block .upload-block-tooltip { display: none; position: absolute; top: 50%; left: min(calc(50% + 224px), calc(100% - 216px)); transform: translateY(-50%); justify-content: center; align-items: center; flex-wrap: wrap; padding: 12px; width: 200px; height: 270px; /* Always a dark floating panel (not --aurora-ink, which flips in dark mode) */ background: #14171f; color: #fff; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--aurora-radius-md); z-index: 1; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); } :root[data-theme="dark"] .upload-block .upload-block-tooltip { background: #0a0c12; border-color: rgba(255, 255, 255, .14); } .upload-block .upload-block-tooltip.active { display: flex; } .upload-block .upload-block-tooltip .content { display: none; text-align: center; } .upload-block .upload-block-tooltip .content img { width: 100px; height: auto; margin-bottom: 10px; } .upload-block .upload-block-tooltip .content p { display: block; font-size: 14px; } .upload-block .upload-block-tooltip .content.active { display: block; } @media (max-width: 768px) { .upload-block .upload-block-tooltip { position: static; transform: none; width: 100%; margin: 0; border-radius: 0; height: 80px; } .upload-block .upload-block-tooltip .content.active { display: flex; align-items: center; } .upload-block .upload-block-tooltip .content.active img { width: 50px; margin-right: 20px; } } /* Progress screen: always stack circle → stats (never side-by-side) */ .upload-block .upload-block-content#upload-progress { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; } .upload-block .upload-progress-bar { display: block; position: relative; flex: 0 0 auto; width: 250px; height: 250px; font-size: 45px; font-family: inherit; margin: 20px auto 0; } .upload-block .upload-progress-details { display: block; width: 100%; max-width: 320px; margin: 14px auto 0; padding: 0 16px; box-sizing: border-box; font-size: 13px; color: var(--aurora-muted); text-align: center; flex: 0 0 auto; } .upload-block .upload-progress-details span { display: block; width: 100%; text-align: center; margin-bottom: 5px; } @media (max-width: 768px) { .upload-block .upload-progress-details { width: 86%; max-width: none; } .upload-block .upload-progress-bar { width: 200px; height: 200px; font-size: 36px; } } /* Keep-alive / resume hints during long uploads (mobile-friendly) */ .upload-keep-status { display: block; width: 86%; max-width: 320px; margin: 10px auto 0; padding: 8px 12px; border-radius: 12px; text-align: center; font-size: 12px; font-weight: 650; line-height: 1.35; box-sizing: border-box; } .upload-keep-status[hidden] { display: none !important; } .upload-keep-status.is-info { color: #1e4d78; background: rgba(62, 142, 208, 0.12); } .upload-keep-status.is-warn { color: #7a4b00; background: rgba(245, 166, 35, 0.16); } .upload-keep-status.is-ok { color: #17633a; background: rgba(46, 160, 90, 0.12); } .upload-keep-tip { display: block; width: 86%; max-width: 320px; margin: 8px auto 4px; color: var(--aurora-muted, #6b7280); text-align: center; font-size: 11px; line-height: 1.4; } .upload-block .upload-finished-details, .upload-block .upload-verify-details { text-align: center; } .upload-block .upload-finished-details h1, .upload-block .upload-verify-details h1 { font-size: 30px; font-weight: 800; letter-spacing: -.01em; } @media (max-width: 768px) { .upload-block .upload-finished-details h1, .upload-block .upload-verify-details h1 { font-size: 24px; } .upload-block .upload-finished-details, .upload-block .upload-verify-details { width: 80%; } } .upload-block .upload-finished-details .upload-finished-message { display: none; } .upload-block .upload-finished-details .upload-finished-message.active { display: block; } .upload-block .upload-finished-details .upload-finished-message p { font-size: 14px; color: var(--aurora-muted); padding: 5px 20px 20px 20px; } @media (max-width: 768px) { .upload-block .upload-finished-details .upload-finished-message p { padding: 0 20px; } } /* Clicking the field copies it, so it is styled as a target: centred text, the same filled treatment as the form fields, and a pointer cursor. */ .upload-block .upload-finished-details .upload-finished-message input { width: 90%; height: 46px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 12px; background-color: var(--aurora-field-bg); color: var(--aurora-ink); box-shadow: none; font-size: 13px; text-align: center; text-overflow: ellipsis; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .upload-block .upload-finished-details .upload-finished-message input:hover { background-color: var(--aurora-field-bg-hover); border-color: var(--aurora-primary); } .upload-block .upload-finished-details .upload-finished-message .copy-hint { display: block; margin-top: 8px; height: 16px; color: var(--aurora-primary); font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .15s ease; } .upload-block .upload-finished-details .upload-finished-message .copy-hint.is-visible { opacity: 1; } .upload-block .upload-verify-details { padding: 0 20px; } .upload-block .upload-verify-details h1 { margin-bottom: 10px; } .upload-block .upload-verify-details p { margin-bottom: 20px; color: var(--aurora-muted); } .upload-block .upload-verify-details p span { font-weight: 700; color: var(--aurora-ink); } .upload-block .upload-verify-details input { margin-bottom: 30px; } .selected-files { display: none; background: var(--aurora-surface-2); color: var(--aurora-ink); border-top-left-radius: var(--aurora-radius-md); border-top-right-radius: var(--aurora-radius-md); padding: 6px 18px 6px 18px; } .selected-files.active { display: flex; flex-direction: column; flex-grow: 1; } @media (max-width: 768px) { .selected-files { border-radius: 0 !important; } } .selected-files ul { flex-grow: 1; list-style: none; padding-left: 0; } .selected-files ul li { position: relative; display: flex; justify-content: center; flex-wrap: wrap; height: 42px; padding: 0 10px; width: 100%; border-bottom: 1px solid var(--aurora-border); font-size: 12px; } .selected-files ul li span { display: block; width: 100%; text-align: left; } .selected-files ul li span.name { font-size: 13px; font-weight: 500; color: var(--aurora-ink); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .selected-files ul li span.size { font-size: 11px; color: var(--aurora-muted); } .selected-files ul li span.delete { position: absolute; display: none; right: 5px; top: 10px; cursor: pointer; color: var(--aurora-muted); } .selected-files ul li:hover span.delete { display: block; } .selected-files ul li:last-child input, .selected-files ul li:last-child textarea { border-bottom: none; } .selected-files .stats { display: flex; align-items: center; justify-content: center; margin: 6px 0; } .selected-files .stats span { display: block; font-size: 11px; font-weight: 500; color: var(--aurora-muted); flex-grow: 1; text-align: center; } .selected-files .add-buttons { display: flex; width: 100%; } .selected-files .add-buttons .button { flex-grow: 1; padding: 2px 2px; border-radius: 999px !important; } .selected-files .add-buttons .button:first-child { margin-right: 3px; } .selected-files .add-buttons .button:last-child { margin-left: 3px; } .selected-files.with-preview { margin-top: auto; justify-content: center; flex-grow: 0; } .selected-files.with-preview ~ .button-block { margin-top: 0; } @media (max-width: 768px) { /* Mobile download + file preview stats bar: Fill the card height, push the bar to the bottom of the flex column, and keep the report/download buttons BELOW it (not sticky-overlaid). */ .upload-block .upload-block-content#download #download-form { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; min-height: calc(100vh - 58px); min-height: calc(100dvh - 58px); } .upload-block .upload-block-content#download #download-form form { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 100%; height: auto; } /* Same treatment for the "download started" screen: without it `height: 100%` resolves against an indefinite parent, the block collapses to its content height and the (sticky) button bar lands on top of the heading, leaving the rest of the card empty. */ .upload-block .upload-block-content#download #download-started { width: 100%; flex: 1 1 auto; min-height: calc(100vh - 58px); min-height: calc(100dvh - 58px); height: auto; } .upload-block .upload-block-content#download #download-started .top { padding: 0 20px; } .upload-block .upload-block-content#download .selected-files.with-preview { position: static; width: 100%; bottom: auto; left: auto; right: auto; margin-top: auto; flex: 0 0 auto; z-index: auto; } /* Must beat later mobile rule: .upload-block .upload-block-content .button-block { position: sticky } so the stats bar sits above report/download, not under/over them. */ .upload-block .upload-block-content#download .selected-files.with-preview ~ .button-block { position: relative !important; bottom: auto !important; margin-top: 0 !important; flex: 0 0 auto; z-index: 2; } } .selected-files.with-preview .stats span:first-child { text-align: left; font-size: 11px; padding-left: 10px; } .selected-files.with-preview .stats span:last-child { text-align: right; font-size: 15px; padding-right: 10px; } .selected-files button { margin-top: 5px; } /* Login — centered card, matching the upload-block-inner visual language */ .login-block { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; background: transparent; width: auto; max-width: none; min-width: 0; } @media (max-width: 768px) { .login-block { position: relative; inset: unset; height: 100vh; height: 100dvh; width: 100%; } } .login-block form { display: block; width: 420px; max-width: 90vw; background: var(--aurora-card-bg); color: var(--aurora-ink); border: 1px solid var(--aurora-card-border); border-radius: var(--aurora-radius-lg); box-shadow: var(--aurora-shadow); padding: 48px 40px 40px 40px; box-sizing: border-box; } @media (max-width: 768px) { .login-block form { width: 100%; max-width: 100%; height: 100%; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; justify-content: center; } } .login-block form .logo { display: block; max-width: 220px; height: auto; margin: 0 auto 40px auto; } .login-block form .button { border-radius: 999px; margin-top: 25px; height: 50px; font-weight: 700; } .login-block form .field { margin-top: 15px; } .login-block form .label { font-weight: 600; font-size: 13px; color: var(--aurora-muted); } .ad-bottom { position: fixed; bottom: 0; left: calc(50% - 364px); width: 728px; height: 90px; } @media (max-width: 768px) { .ad-bottom { display: none; } } .ad-sidebar { position: fixed; right: 0; top: calc(50% - 300px); width: 160px; height: 600px; } @media (max-width: 768px) { .ad-sidebar { display: none; } } .mobile-ad-block { display: none; width: 100vw; overflow-x: hidden; } @media (max-width: 768px) { .mobile-ad-block { display: block; } } /* ---- File preview toolbar (grid / list) ---- */ #tab-files .files-toolbar { display: flex; gap: 12px; margin: 0 0 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; } #tab-files .files-toolbar-title { color: var(--aurora-ink); font-size: 15px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; } #tab-files .files-view-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--aurora-surface-2); border: 1px solid var(--aurora-border); border-radius: 10px; } #tab-files .files-view-btn { display: inline-flex; width: 36px; height: 32px; padding: 0; align-items: center; justify-content: center; color: var(--aurora-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; transition: background-color .15s ease, color .15s ease; } #tab-files .files-view-btn:hover, #tab-files .files-view-btn:focus { color: var(--aurora-ink); background: var(--aurora-surface-3); outline: 0; } #tab-files .files-view-btn.is-active, #tab-files .files-view-btn[aria-pressed="true"] { color: #fff; background: var(--aurora-primary-btn, var(--aurora-primary)); } .tab .files { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; gap: 12px; } /* List mode: compact rows */ #tab-files .files.is-list-view { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; } #tab-files .files.is-list-view .file { display: flex; flex-direction: row; align-items: center; flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; text-align: left; border-radius: 12px; } /* Outer download link (generic files) becomes a row */ #tab-files .files.is-list-view .file > a.download { display: flex; flex: 1 1 auto; min-width: 0; width: 100%; align-items: center; text-decoration: none; color: inherit; } #tab-files .files.is-list-view .file .file-content-block { flex: 0 0 56px; width: 56px; min-width: 56px; max-width: 56px; min-height: 56px; max-height: 56px; border-radius: 10px; margin: 8px 0 8px 8px; } #tab-files .files.is-list-view .file .file-content-block img { width: 100%; max-width: 100%; height: 100%; min-height: 0; max-height: 56px; object-fit: cover; } #tab-files .files.is-list-view .file .file-play-icon { font-size: 22px; } #tab-files .files.is-list-view .file .file-play-badge, #tab-files .files.is-list-view .file .file-code-badge { width: 22px; height: 22px; font-size: 10px; } #tab-files .files.is-list-view .file .file-code-snippet { display: none; } #tab-files .files.is-list-view .file .file-details { flex: 1 1 auto; min-width: 0; width: auto; max-width: none; margin: 0; padding: 10px 12px; background: transparent; border-radius: 0; } #tab-files .files.is-list-view .file .file-details .details { max-width: none; min-width: 0; } #tab-files .files.is-list-view .file .file-details .details .name { font-size: 13.5px; } #tab-files .files.is-list-view .file .file-details .download, #tab-files .files.is-list-view .file .file-details span.download { flex-shrink: 0; margin-left: 8px; } :root[data-theme="dark"] #tab-files .files-view-toggle { background: #121722; border-color: rgba(255, 255, 255, .1); } .tab .files .file { position: relative; display: block; border: 1px solid var(--aurora-border); border-radius: var(--aurora-radius-md); margin: 0; text-align: center; /* min-width:auto (default) was preventing shrink below image intrinsic width */ flex: 1 1 min(400px, 100%); width: min(400px, 100%); max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; background: var(--aurora-surface); } .tab .files .file .file-content-block { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 100%; min-width: 0; min-height: 150px; max-height: 250px; overflow: hidden; background: #0f1218; box-sizing: border-box; } .tab .files .file .file-content-block.is-playable { cursor: pointer; -webkit-tap-highlight-color: transparent; } .tab .files .file .file-content-block.is-playable:focus-visible { outline: 2px solid var(--aurora-primary-btn, #3374ab); outline-offset: 2px; } .tab .files .file .file-play-icon { font-size: 52px; color: #fff; opacity: .92; } .tab .files .file .file-play-badge { position: absolute; left: 50%; top: 50%; z-index: 2; display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; color: #fff; background: color-mix(in srgb, var(--aurora-primary-btn, #3374ab) 92%, #000 8%); border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transform: translate(-50%, -50%); pointer-events: none; font-size: 22px; } .tab .files .file .file-play-badge i { margin-left: 2px; } .tab .files .file a { text-decoration: none; color: var(--aurora-ink); } .tab .files .file img { display: block; width: auto; max-width: 100%; height: auto; max-height: 250px; padding: 0; object-fit: contain; } .tab .files .file .file-content-block.is-playable img, .tab .files .file .file-content-block.is-image img { width: 100%; max-width: 100%; height: 100%; min-height: 150px; max-height: 250px; object-fit: cover; } .tab .files .file .file-details { position: relative; display: flex; box-sizing: border-box; background: var(--aurora-surface-2); padding: 10px 10px 12px 10px; border-bottom-right-radius: var(--aurora-radius-md); border-bottom-left-radius: var(--aurora-radius-md); margin-bottom: -1px; text-align: left; width: 100%; max-width: 100%; min-width: 0; align-items: center; } .tab .files .file .file-details .details { max-width: 80%; flex: 1 1 auto; min-width: 0; } .tab .files .file .file-details .details .name { display: block; font-weight: 700; font-size: 14px; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab .files .file .file-details .details .size { display: block; font-size: 12px; color: var(--aurora-muted); } .tab .files .file .file-details .download { display: inline-flex; align-items: center; justify-content: center; color: var(--aurora-ink); margin: 0 4px 0 auto; font-size: 25px; flex-shrink: 0; } .tab .files .file .file-details .play { display: none; } .tab .files .file.is-video { overflow: hidden; } /* In-browser video player (Plyr) — adapts to landscape / portrait. Size clamps live on the SHELL (.video-modal) only. Children use 100% so when Plyr goes fullscreen it is no longer limited by 88vh/90vh portrait rules. */ .video-modal { position: relative; display: flex; flex-direction: column; width: min(960px, 92vw); max-height: min(90vh, 100dvh - 48px); margin: 0 auto; overflow: hidden; border-radius: 16px; background: #0b0d12; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); } .video-modal-head { flex: 0 0 auto; min-width: 0; } .video-modal-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #000; } .video-modal.is-portrait { width: min(420px, 92vw); max-height: min(88vh, 100dvh - 40px); } .video-modal .plyr, .video-modal video { width: 100%; max-height: 100%; border-radius: 0 0 16px 16px; background: #000; } /* Explicitly no absolute vh clamp on portrait children (was min(88vh, …) and that stuck through fullscreen, leaving a gap at the bottom). */ .video-modal.is-portrait .plyr, .video-modal.is-portrait video { max-height: 100%; height: auto; } .video-modal .plyr { --plyr-color-main: var(--aurora-primary-btn, #3374ab); --plyr-video-background: #0b0d12; --plyr-menu-background: rgba(20, 23, 31, .96); --plyr-menu-color: #fff; --plyr-control-radius: 10px; --plyr-video-control-color: #fff; --plyr-video-control-color-hover: #fff; --plyr-control-icon-size: 18px; } /* Fullscreen: fill the real viewport (native :fullscreen + Plyr fallback class) */ .video-modal .plyr:fullscreen, .video-modal .plyr:-webkit-full-screen, .video-modal .plyr.plyr--fullscreen-active, .video-modal .plyr.plyr--fullscreen-fallback, .video-modal.is-portrait .plyr:fullscreen, .video-modal.is-portrait .plyr:-webkit-full-screen, .video-modal.is-portrait .plyr.plyr--fullscreen-active, .video-modal.is-portrait .plyr.plyr--fullscreen-fallback, .plyr:fullscreen, .plyr:-webkit-full-screen, .plyr--fullscreen-active, .plyr--fullscreen-fallback { max-width: none !important; max-height: none !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; background: #000 !important; } .video-modal .plyr:fullscreen video, .video-modal .plyr:-webkit-full-screen video, .video-modal .plyr.plyr--fullscreen-active video, .video-modal .plyr.plyr--fullscreen-fallback video, .video-modal.is-portrait .plyr:fullscreen video, .video-modal.is-portrait .plyr:-webkit-full-screen video, .video-modal.is-portrait .plyr.plyr--fullscreen-active video, .video-modal.is-portrait .plyr.plyr--fullscreen-fallback video, .video-modal.is-portrait video:fullscreen, .video-modal.is-portrait video:-webkit-full-screen, .plyr:fullscreen video, .plyr:-webkit-full-screen video, .plyr--fullscreen-active video, .plyr--fullscreen-fallback video { max-width: none !important; max-height: none !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: contain; } /* Fallback mode is fixed to the viewport */ .plyr--fullscreen-fallback { position: fixed !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 10000000 !important; } /* Ensure control icons stay visible (SVG sprite + white fill) */ .video-modal .plyr__control svg, .video-modal .plyr__control .icon, .video-modal .plyr__controls svg { display: block; width: var(--plyr-control-icon-size, 18px); height: var(--plyr-control-icon-size, 18px); fill: currentColor; color: #fff; } .video-modal .plyr__control--overlaid { background: var(--plyr-color-main, #3374ab); color: #fff; opacity: 1; padding: 18px; } .video-modal .plyr__control--overlaid svg { width: 22px; height: 22px; } .video-modal .plyr__controls { opacity: 1; } /* Mobile: keep speaker/mute button, hide only the volume range slider */ #videoModal.is-mobile-ui .plyr__volume input[type="range"], #videoModal.is-mobile-ui input[data-plyr="volume"] { display: none !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important; } #videoModal.is-mobile-ui .plyr__volume { display: flex !important; align-items: center; max-width: none; min-width: 0; flex: 0 0 auto; overflow: visible; } #videoModal.is-mobile-ui .plyr__control[data-plyr="mute"] { display: inline-flex !important; } /* Desktop + tall/narrow video (9:16 etc.): the expanded volume range is often wider than the player itself. Collapse to mute only; expand the slider on hover / keyboard focus of the volume control. */ #videoModal.is-portrait:not(.is-mobile-ui) .plyr__volume { display: flex; align-items: center; max-width: 2.5rem; min-width: 0; flex: 0 0 auto; overflow: hidden; transition: max-width .22s ease; } #videoModal.is-portrait:not(.is-mobile-ui) .plyr__volume input[type="range"], #videoModal.is-portrait:not(.is-mobile-ui) input[data-plyr="volume"] { width: 0 !important; min-width: 0 !important; max-width: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; transition: opacity .18s ease, width .22s ease, min-width .22s ease, max-width .22s ease, margin .22s ease; } #videoModal.is-portrait:not(.is-mobile-ui) .plyr__volume:hover, #videoModal.is-portrait:not(.is-mobile-ui) .plyr__volume:focus-within { max-width: 7.5rem; overflow: visible; } #videoModal.is-portrait:not(.is-mobile-ui) .plyr__volume:hover input[type="range"], #videoModal.is-portrait:not(.is-mobile-ui) .plyr__volume:focus-within input[type="range"], #videoModal.is-portrait:not(.is-mobile-ui) .plyr__volume:hover input[data-plyr="volume"], #videoModal.is-portrait:not(.is-mobile-ui) .plyr__volume:focus-within input[data-plyr="volume"] { width: 60px !important; min-width: 52px !important; max-width: 70px !important; margin-left: 4px !important; margin-right: 4px !important; opacity: 1; pointer-events: auto; } /* Slightly tighter chrome on tall players so mute + time still fit */ #videoModal.is-portrait:not(.is-mobile-ui) .video-modal .plyr { --plyr-control-spacing: 8px; --plyr-control-icon-size: 16px; } #videoModal.is-portrait:not(.is-mobile-ui) .plyr__time { font-size: 12px; } #videoModal.modal { z-index: 100; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; } #videoModal .modal-content.video-modal { margin: auto; } #videoModal .modal-background { background: rgba(8, 10, 16, .78); } #videoModal .modal-close { z-index: 101; } body.df-video-open { overflow: hidden; } @media (max-width: 768px) { .video-modal { width: min(100vw - 16px, 100%); max-height: min(86dvh, 100dvh - 56px); border-radius: 12px; } .video-modal.is-portrait { width: min(100vw - 24px, 100%); max-height: min(86dvh, 100dvh - 56px); } /* Children follow the shell; do NOT re-apply absolute dvh clamps here */ .video-modal .plyr, .video-modal video, .video-modal.is-portrait .plyr, .video-modal.is-portrait video { max-height: 100%; border-radius: 0 0 12px 12px; } .video-modal .plyr { --plyr-control-icon-size: 20px; --plyr-control-spacing: 12px; } #videoModal.modal { padding: 8px; } #videoModal .modal-close { top: 8px; right: 8px; } } /* -------------------------------------------------------------------------- 2026 product shell -------------------------------------------------------------------------- */ html, body { min-height: 100%; } body { overflow: hidden; } .background-overlay { background: radial-gradient(circle at 72% 18%, rgba(255, 255, 255, .24), transparent 28%), radial-gradient(circle at 66% 82%, rgba(13, 18, 31, .22), transparent 38%), linear-gradient(125deg, var(--aurora-primary) 0%, var(--aurora-secondary) 100%); opacity: .76; } .product-sidebar { position: fixed; z-index: 6; top: 14px; bottom: 14px; left: 14px; display: flex; width: 224px; /* top/bottom already pin height — min-height:100vh overflowed when the viewport shrank (devtools docked). Allow the shell to scroll instead. */ min-height: 0; max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); padding: 18px 14px 16px; flex-direction: column; color: var(--aurora-ink); background: var(--aurora-sidebar-bg); border: 1px solid var(--aurora-sidebar-border); border-radius: 24px; box-shadow: 0 24px 65px rgba(14, 18, 32, .2); box-sizing: border-box; backdrop-filter: blur(18px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .product-brand { display: flex; min-height: 50px; padding: 5px 8px 17px; align-items: center; border-bottom: 1px solid var(--aurora-divider); } .product-brand img { display: block; width: 101px; height: 36px; max-width: 158px; max-height: 36px; object-fit: contain; } .product-nav { display: flex; gap: 7px; margin-top: 18px; flex: 1 1 auto; flex-direction: column; min-height: 0; } .product-nav-item { position: relative; display: grid; min-height: 48px; padding: 0 12px; grid-template-columns: 24px 1fr; column-gap: 10px; align-items: center; color: var(--aurora-nav-item); border-radius: 13px; font-size: 14px; font-weight: 650; text-decoration: none; transition: background-color .18s ease, color .18s ease, transform .18s ease; } .product-nav-item i { font-size: 19px; } .product-nav-item.is-active { color: #fff !important; background: var(--aurora-primary-btn, color-mix(in srgb, var(--aurora-primary) 82%, #000 18%)) !important; box-shadow: 0 9px 22px color-mix(in srgb, var(--aurora-primary-btn, var(--aurora-primary)) 28%, transparent); } .product-nav-item.is-active:hover { color: #fff !important; background: var(--aurora-primary-btn-hover, color-mix(in srgb, var(--aurora-primary) 76%, #000 24%)) !important; transform: translateY(-1px); } .product-nav-item.is-active span, .product-nav-item.is-active i { color: #fff !important; } .product-nav-item.is-disabled { color: var(--aurora-muted); cursor: not-allowed; opacity: .72; } .product-nav-item.is-disabled small { position: absolute; right: 10px; padding: 3px 6px; color: var(--aurora-muted); background: var(--aurora-surface-3); border-radius: 20px; font-size: 8px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; } .product-sidebar-footer { margin-top: auto; flex-shrink: 0; padding: 18px 8px 6px; border-top: 1px solid var(--aurora-divider); } .sidebar-language { display: block; margin: 0 0 12px; } .sidebar-language-label { display: block; margin: 0 0 5px 1px; color: var(--aurora-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; } .sidebar-language-control { position: relative; display: block; } /* Single clean select — no inset “control chrome” / dual icons */ .sidebar-language-select, .sidebar-language-control select { display: block; width: 100%; min-height: 38px; padding: 0 32px 0 12px; color: var(--aurora-ink); background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 11px 7px; border: 1px solid var(--aurora-border); border-radius: 10px; outline: 0; appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .sidebar-language-select:hover, .sidebar-language-control select:hover { border-color: color-mix(in srgb, var(--aurora-primary) 45%, var(--aurora-border)); background-color: var(--aurora-surface-2); } .sidebar-language-select:focus, .sidebar-language-control select:focus { border-color: var(--aurora-primary); background-color: var(--aurora-surface-2); box-shadow: 0 0 0 3px rgba(var(--aurora-primary-rgb), .16); } :root[data-theme="dark"] .sidebar-language-select, :root[data-theme="dark"] .sidebar-language-control select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23aab3c2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-color: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .12); } :root[data-theme="dark"] .sidebar-language-select:hover, :root[data-theme="dark"] .sidebar-language-control select:hover, :root[data-theme="dark"] .sidebar-language-select:focus, :root[data-theme="dark"] .sidebar-language-control select:focus { background-color: #1c2230; } .sidebar-telegram { display: flex; gap: 8px; min-height: 38px; margin: 0 0 12px; padding: 0 12px; align-items: center; justify-content: center; color: #fff; background: #229ed9; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1; text-decoration: none; } .sidebar-telegram i { font-size: 17px; line-height: 1; } .sidebar-telegram:hover, .sidebar-telegram:focus { color: #fff; background: #1c8ac0; } .sidebar-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 0 0 12px; align-items: center; text-align: center; } .sidebar-footer-link { display: inline-block; color: var(--aurora-muted); font-size: 11px; font-weight: 650; line-height: 1.3; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .sidebar-footer-link:hover, .sidebar-footer-link:focus { color: var(--aurora-primary-btn, #3374ab); } .desktop-language-action { display: none !important; } .privacy-note { display: flex; gap: 7px; align-items: center; color: var(--aurora-muted); font-size: 11px; font-weight: 550; } .main-logo { display: none; } .top-actions { position: fixed !important; z-index: 12 !important; top: 18px !important; right: 20px !important; padding: 4px 4px 10px; overflow: visible !important; transition: right .38s cubic-bezier(.22, 1, .36, 1); } .top-actions ul { padding: 0; overflow: visible !important; border: 0 !important; } .top-actions li a { min-height: 42px; padding: 0 17px !important; border: 1px solid rgba(255, 255, 255, .6) !important; background: rgba(255, 255, 255, .9) !important; color: #14171f !important; box-shadow: 0 7px 18px rgba(15, 18, 30, .13) !important; backdrop-filter: blur(12px); } :root[data-theme="dark"] .top-actions li a { border-color: rgba(255, 255, 255, .12) !important; background: rgba(22, 26, 34, .92) !important; color: var(--aurora-ink) !important; } .top-actions li a:hover { color: var(--aurora-primary) !important; background: var(--aurora-surface) !important; } .top-actions li.is-active a, .top-actions li.is-active a:hover { color: #fff !important; background: var(--aurora-primary-btn, #3374ab) !important; border-color: var(--aurora-primary-btn, #3374ab) !important; box-shadow: 0 8px 22px rgba(15, 18, 30, .2) !important; } .upload-block { position: relative; z-index: 2; padding: 82px 28px 28px 266px; box-sizing: border-box; } .upload-block::after { position: fixed; z-index: -1; right: clamp(42px, 7vw, 128px); bottom: clamp(36px, 8vh, 100px); width: min(37vw, 520px); color: rgba(255, 255, 255, .92); content: "Tus archivos, donde tienen que estar."; font-size: clamp(31px, 4.2vw, 68px); font-weight: 800; letter-spacing: -.055em; line-height: .98; text-shadow: 0 8px 35px rgba(12, 17, 30, .16); pointer-events: none; } .upload-block .upload-block-inner { width: 430px; height: min(680px, calc(100vh - 110px)); min-height: 560px; margin-right: min(34vw, 490px); border: 1px solid var(--aurora-card-border); border-radius: 26px; box-shadow: 0 32px 80px rgba(11, 15, 29, .28), 0 4px 14px rgba(11, 15, 29, .1); overflow: hidden; } .transfer-heading { padding: 26px 25px 5px; } .transfer-heading .transfer-kicker { display: block; margin-bottom: 7px; color: var(--aurora-primary); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .transfer-heading h1 { margin: 0; color: var(--aurora-ink); font-size: 25px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; } .transfer-heading p { margin: 6px 0 0; color: var(--aurora-muted); font-size: 12px; } .upload-block .upload-form .select-first-files { margin: 15px 20px 10px; min-height: 155px; flex-grow: 0; background: var(--aurora-surface-2); border: 1.5px dashed var(--aurora-border); border-radius: 18px; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; } .upload-block .upload-form .select-first-files:hover { background: color-mix(in srgb, var(--aurora-primary) 10%, var(--aurora-surface-2)); border-color: var(--aurora-primary); transform: translateY(-1px); } .upload-block .upload-form .select-first-files .outside-container { margin-top: -5px; } .upload-block .upload-form .select-first-files lord-icon { height: 82px !important; } .upload-block .upload-form form .input-group { margin-right: 25px; margin-left: 25px; } .upload-block .upload-form form .input-group input, .upload-block .upload-form form .input-group textarea, .upload-block .upload-form form .input-group select { font-size: 14px; } .upload-block .upload-block-content .button-block { min-height: 92px; padding: 16px 16px 18px; border-color: var(--aurora-border); } .upload-block .upload-block-content#upload > .button-block > #submit-upload { width: calc(100% - 106px); max-width: 300px; } .upload-block .upload-block-content .button-block button { height: 48px; border: 0; } .upload-block .upload-block-content .button-block button.options { margin-left: 10px; color: var(--aurora-nav-item) !important; background: var(--aurora-surface-3) !important; box-shadow: none; } .upload-block .upload-block-content .button-block button.options:hover { color: var(--aurora-primary) !important; background: var(--aurora-field-bg-hover) !important; } .tab-window.active { z-index: 9; box-shadow: -25px 0 70px rgba(15, 20, 35, .2); } @media (min-width: 769px) { /* Desktop side panel: keep display:flex always so transform can animate. (display:none ↔ flex kills CSS transitions.) Slides in from the right over the page — upload card stays put. */ .tab-window { display: flex !important; top: 0; right: 0; bottom: 0; left: auto; height: auto; width: min(520px, calc(100vw - 300px)); min-width: min(440px, calc(100vw - 300px)); max-width: calc(100vw - 300px); border: 0; border-left: 1px solid var(--aurora-border); border-radius: 24px 0 0 24px; overflow: hidden; background: var(--aurora-surface); box-shadow: none; opacity: 1; visibility: hidden; pointer-events: none; /* Parked off-screen — no transition on first paint / F5 (avoids “something hiding” flash) */ transform: translate3d(104%, 0, 0); transition: none; will-change: auto; backface-visibility: hidden; } .tab-window.active { display: flex !important; width: min(520px, calc(100vw - 300px)); min-width: min(440px, calc(100vw - 300px)); visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); box-shadow: -18px 0 48px rgba(15, 20, 35, .16); transition: none; } /* Enable slide animation only after first load (body.df-ready) */ body.df-ready .tab-window { will-change: transform; transition: transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .42s, box-shadow .42s cubic-bezier(.22, 1, .36, 1); } body.df-ready .tab-window.active { transition: transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s, box-shadow .42s cubic-bezier(.22, 1, .36, 1); } .tab-window .tab { width: 100%; min-width: 0; margin: 74px 24px 28px; } .tab-window .close-btn { z-index: 2; left: 25px; top: 21px; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: var(--aurora-surface-2); border: 1px solid var(--aurora-border); border-radius: 10px; } .tab-window hr { top: 53px; margin: 0; } /* Side panel slides over the page. Leave upload-block layout untouched (no scale, no padding-right, no margin override — that was shifting the card). */ body.page-panel-open .upload-block, body.page-panel-open .upload-block .upload-block-inner, body.page-panel-open .upload-block::after { transition: none !important; transform: none !important; } } @media (min-width: 769px) and (max-width: 1050px) { .tab-window, .tab-window.active { width: min(460px, calc(100vw - 266px)); min-width: min(400px, calc(100vw - 266px)); } } @media (max-width: 1180px) { .upload-block .upload-block-inner { margin-right: 0; } .upload-block::after { display: none; } } @media (max-width: 768px) { body { position: static; overflow-x: hidden; overflow-y: auto; background: var(--aurora-body-mobile); } /* Final download link: kill document rubber-band bounce on iOS/Android. The shell is fixed to the visible viewport; lists/messages may scroll inside. */ html:has(body.df-page-download) { height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; } body.df-page-download { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; height: 100dvh; overflow: hidden !important; overscroll-behavior: none; touch-action: manipulation; } body.df-page-download .upload-block { height: 100dvh; min-height: 0 !important; max-height: 100dvh; overflow: hidden; overscroll-behavior: none; } body.df-page-download .upload-block .upload-block-inner { height: calc(100dvh - 58px); min-height: 0 !important; max-height: calc(100dvh - 58px); overflow: hidden; overscroll-behavior: none; } body.df-page-download .upload-block .upload-block-content#download { min-height: 0; overflow: hidden; overscroll-behavior: none; } body.df-page-download .upload-block .upload-block-content#download #download-form, body.df-page-download .upload-block .upload-block-content#download #download-started { min-height: 0 !important; max-height: 100%; overflow: hidden; } body.df-page-download .upload-block .upload-block-content#download #download-form form { min-height: 0 !important; overflow: hidden; } /* Internal scroll only where content can grow (file list / long comment) */ body.df-page-download .upload-block .upload-block-content#download .selected-files, body.df-page-download .upload-block .upload-block-content#download .upload-message { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .product-sidebar, .top-actions { display: none !important; } .mobile-nav { position: fixed; z-index: 8; min-height: 58px; background: var(--aurora-mobile-nav-bg) !important; border-bottom: 1px solid var(--aurora-border); box-shadow: 0 6px 22px rgba(18, 22, 34, .08); } .mobile-nav .navbar-brand { min-height: 58px; align-items: center; } .mobile-nav .navbar-burger { color: var(--aurora-ink); } .mobile-nav .navbar-menu { background: var(--aurora-mobile-nav-bg); } .mobile-nav .navbar-item, .mobile-nav .navbar-link { color: var(--aurora-ink); } .mobile-account-shortcut.navbar-item { display: inline-flex; width: auto; min-height: 36px; gap: 7px; margin: 0 10px 0 2px; padding: 0 12px; align-items: center; color: #fff !important; background: var(--aurora-primary-btn, color-mix(in srgb, var(--aurora-primary) 82%, #000 18%)) !important; border: 0; border-radius: 999px; box-shadow: 0 6px 16px color-mix(in srgb, var(--aurora-primary) 22%, transparent); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 750; line-height: 1; } .mobile-account-shortcut.navbar-item:hover, .mobile-account-shortcut.navbar-item:focus { color: #fff !important; background: var(--aurora-primary-btn-hover, color-mix(in srgb, var(--aurora-primary) 76%, #000 24%)) !important; } .mobile-account-shortcut.navbar-item span, .mobile-account-shortcut.navbar-item i { color: #fff !important; } .mobile-account-shortcut i { font-size: 13px; } @media (max-width: 370px) { .mobile-account-shortcut span { display: none; } .mobile-account-shortcut.navbar-item { width: 36px; padding: 0; justify-content: center; } } /* iOS Safari resolves 100vh against the LARGE viewport (toolbars hidden), so a full-height card ends underneath the bottom browser bar and takes the sticky button bar with it — the "Accept" / "Download" buttons were unreachable. dvh tracks the visible area; the vh line stays as the fallback. */ .upload-block { min-height: 100vh; min-height: 100dvh; height: auto; padding: 58px 0 0; } .upload-block .upload-block-inner { width: 100%; min-height: calc(100vh - 58px); min-height: calc(100dvh - 58px); height: auto; margin: 0; border: 0; border-radius: 0; } .upload-block .upload-form { max-height: none; min-height: calc(100vh - 136px); min-height: calc(100dvh - 136px); } .transfer-heading { padding: 26px 22px 4px; } .transfer-heading h1 { font-size: 27px; } .upload-block .upload-form .select-first-files { margin: 18px 20px 12px; } .upload-block .upload-block-content .button-block { position: sticky; bottom: 0; min-height: 96px; padding: 18px 16px 20px; /* Clear the home indicator on notched iPhones */ padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 0; box-shadow: 0 -10px 30px rgba(22, 25, 36, .06); } /* Download preview bar: keep report/download under the stats bar (not sticky-covered) */ .upload-block .upload-block-content#download .selected-files.with-preview ~ .button-block { position: relative !important; bottom: auto !important; margin-top: 0 !important; } /* The watermark logo is pinned bottom-right of the panel and sits on top of the file cards once the list scrolls — desktop only. */ .tab-window .tab-logo { display: none; } /* Finger-sized hit areas in the file list */ .tab-window .close-btn { left: 16px; top: 12px; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; } .tab .files .file { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; margin: 0; } .tab .files .file .file-details .download { min-width: 44px; min-height: 44px; margin-right: 0; flex-shrink: 0; } } /* Narrow desktop (devtools docked to the side, small laptops) */ @media (min-width: 769px) and (max-width: 1100px) { .product-sidebar { width: 200px; left: 10px; top: 10px; bottom: 10px; max-height: calc(100dvh - 20px); border-radius: 18px; } .upload-block { padding-left: 230px; } } /* Short viewport (devtools docked bottom / short laptop screens) */ @media (max-height: 760px) and (min-width: 769px) { .product-sidebar { top: 8px; bottom: 8px; left: 8px; max-height: calc(100dvh - 16px); padding: 12px 10px 10px; border-radius: 16px; } .product-brand { min-height: 40px; padding: 2px 6px 10px; } .product-brand img { height: 30px; max-height: 30px; } .product-nav { margin-top: 10px; gap: 4px; } .product-nav-item { min-height: 40px; padding: 0 10px; font-size: 13px; } /* Coming-soon rows eat vertical space when the inspector is open */ .product-nav-item.is-disabled { display: none; } .product-sidebar-footer { padding: 10px 4px 2px; } .sidebar-telegram { min-height: 32px; margin-bottom: 8px; font-size: 11.5px; } .sidebar-language { margin-bottom: 8px; } .sidebar-language-label, .theme-switcher-label { display: none; } .sidebar-language-select, .sidebar-language-control select { min-height: 34px; font-size: 12px; } .theme-switcher { margin-bottom: 8px; } .theme-switcher-btn { min-height: 30px; font-size: 9px; } .sidebar-footer-links { margin-bottom: 6px; } .privacy-note { display: none; } .upload-block { padding-top: 70px; padding-bottom: 18px; } .upload-block .upload-block-inner { min-height: 0; height: calc(100vh - 88px); height: calc(100dvh - 88px); } .transfer-heading { padding-top: 18px; } .upload-block .upload-form .select-first-files { min-height: 120px; margin-top: 10px; } } @media (max-height: 560px) and (min-width: 769px) { .product-sidebar { padding: 8px 8px 8px; } .sidebar-telegram span { display: none; } .sidebar-telegram { width: 100%; min-height: 34px; } .theme-switcher-btn span { display: none; } .theme-switcher-btn { min-width: 0; } .upload-block .upload-block-inner { min-height: 0; height: calc(100dvh - 48px); } } /* -------------------------------------------------------------------------- Theme switcher (light / dark / auto) -------------------------------------------------------------------------- */ .theme-switcher { display: block; margin: 0 0 13px; } .theme-switcher-label { display: block; margin: 0 0 6px 2px; color: var(--aurora-muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .theme-switcher-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--aurora-surface-2); border-radius: 11px; } .theme-switcher-btn { display: inline-flex; gap: 4px; min-height: 34px; padding: 0 4px; align-items: center; justify-content: center; color: var(--aurora-nav-item); background: transparent; border: 0; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .theme-switcher-btn i { font-size: 13px; line-height: 1; } .theme-switcher-btn:hover, .theme-switcher-btn:focus { color: var(--aurora-ink); background: var(--aurora-surface-3); outline: 0; } .theme-switcher-btn.is-active, .theme-switcher-btn[aria-pressed="true"] { color: #fff !important; background: var(--aurora-primary-btn, #3374ab) !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--aurora-primary-btn, var(--aurora-primary)) 28%, transparent); } .theme-switcher-btn.is-active i, .theme-switcher-btn[aria-pressed="true"] i { color: #fff !important; } /* Sidebar: compact labels if tight */ .theme-switcher--sidebar .theme-switcher-btn span { max-width: 4.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Mobile top-bar theme menu */ .mobile-theme-menu { display: none; position: relative; align-items: center; margin-left: auto; } .mobile-theme-trigger { display: inline-flex; width: 36px; height: 36px; margin: 0 4px 0 0; padding: 0; align-items: center; justify-content: center; color: var(--aurora-ink); background: var(--aurora-surface-2); border: 1px solid var(--aurora-border); border-radius: 999px; cursor: pointer; font-size: 16px; line-height: 1; } .mobile-theme-trigger:hover, .mobile-theme-trigger:focus { background: var(--aurora-surface-3); outline: 0; } .mobile-theme-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 168px; padding: 6px; flex-direction: column; gap: 2px; background: var(--aurora-surface); border: 1px solid var(--aurora-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 18, 30, .18); } .mobile-theme-menu.is-open .mobile-theme-dropdown { display: flex; } .mobile-theme-dropdown .theme-switcher-btn { justify-content: flex-start; min-height: 40px; padding: 0 12px; gap: 10px; font-size: 13px; border-radius: 10px; } .mobile-theme-dropdown .theme-switcher-btn i { font-size: 16px; width: 1.1em; text-align: center; } .mobile-theme-menu-inline { display: none; width: 100%; padding: 12px 14px 18px !important; } .mobile-theme-menu-inline .theme-switcher { margin: 0; width: 100%; } @media (max-width: 768px) { .mobile-theme-menu { display: inline-flex; } .mobile-theme-menu-inline { display: block; } /* Burger menu sheet */ .mobile-nav.navbar.is-info { background: var(--aurora-mobile-nav-bg) !important; } .mobile-nav .navbar-menu.is-active { background: var(--aurora-mobile-nav-bg); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); } .mobile-nav .navbar-item:hover, .mobile-nav .navbar-item:focus { background: var(--aurora-surface-2); color: var(--aurora-ink); } } /* Dark-mode residual surfaces (file lists, tags, etc.) */ :root[data-theme="dark"] .tab .files .file { border-color: var(--aurora-border); } /* Upload/download file list tray — was hard-coded light #f7f7fb */ :root[data-theme="dark"] .selected-files, :root[data-theme="dark"] .upload-block .upload-form .selected-files, :root[data-theme="dark"] .upload-block .upload-block-content#download .selected-files { background: #0e121a; color: var(--aurora-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } :root[data-theme="dark"] .selected-files ul li { border-bottom-color: rgba(255, 255, 255, .1); } :root[data-theme="dark"] .selected-files ul li span.name { color: var(--aurora-ink); } :root[data-theme="dark"] .selected-files .add-buttons .button:not(.is-info) { color: var(--aurora-ink) !important; background: var(--aurora-surface-3) !important; border-color: transparent !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } :root[data-theme="dark"] .tag:not(body).is-light { background-color: var(--aurora-surface-3); color: var(--aurora-ink); } :root[data-theme="dark"] .upload-block .upload-form form .input-group .recipients .tag:not(body).is-light { background-color: var(--aurora-surface-3); } :root[data-theme="dark"] .tabs:not(.core) li a { box-shadow: 0 8px 20px rgba(0, 0, 0, .28); } :root[data-theme="dark"] .product-brand img, :root[data-theme="dark"] .mobile-nav .navbar-brand > a.navbar-item img { /* Keep brand logos readable on dark chrome when they are dark-on-transparent */ filter: none; } :root[data-theme="dark"] .button.is-light, :root[data-theme="dark"] .button:not(.is-info):not(.is-success):not(.is-danger):not(.is-warning) { background-color: var(--aurora-surface-3); color: var(--aurora-ink); border-color: transparent; } /* -------------------------------------------------------------------------- Dark mode — higher contrast hierarchy Card (base) < fields / dropzone (raised) < active chips; edges always readable -------------------------------------------------------------------------- */ :root[data-theme="dark"] .upload-block .upload-block-inner { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 36px 90px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .35); } /* Soft border on idle fields so they don't melt into the card */ :root[data-theme="dark"] .upload-block .upload-form form .input-group input, :root[data-theme="dark"] .upload-block .upload-form form .input-group textarea, :root[data-theme="dark"] .upload-block .upload-form form .input-group select, :root[data-theme="dark"] .tab-window .tab .input, :root[data-theme="dark"] .tab-window .tab .textarea, :root[data-theme="dark"] .tab-window .tab select, :root[data-theme="dark"] .upload-block .upload-finished-details .upload-finished-message input { border-color: rgba(255, 255, 255, .1) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } :root[data-theme="dark"] .upload-block .upload-form form .input-group input:hover, :root[data-theme="dark"] .upload-block .upload-form form .input-group textarea:hover, :root[data-theme="dark"] .upload-block .upload-form form .input-group select:hover, :root[data-theme="dark"] .tab-window .tab .input:hover, :root[data-theme="dark"] .tab-window .tab .textarea:hover, :root[data-theme="dark"] .tab-window .tab select:hover { border-color: rgba(255, 255, 255, .16) !important; } :root[data-theme="dark"] .upload-block .upload-form form .input-group input:focus, :root[data-theme="dark"] .upload-block .upload-form form .input-group textarea:focus, :root[data-theme="dark"] .upload-block .upload-form form .input-group select:focus, :root[data-theme="dark"] .tab-window .tab .input:focus, :root[data-theme="dark"] .tab-window .tab .textarea:focus, :root[data-theme="dark"] .tab-window .tab select:focus { border-color: var(--aurora-primary) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 3px rgba(var(--aurora-primary-rgb), .28) !important; } /* Dropzone: recessed tray vs card, stronger dashed edge */ :root[data-theme="dark"] .upload-block .upload-form .select-first-files { background: #0c0f16; border-color: #4a5568; border-style: dashed; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); } :root[data-theme="dark"] .upload-block .upload-form .select-first-files:hover { background: color-mix(in srgb, var(--aurora-primary) 12%, #0c0f16); border-color: var(--aurora-primary); } /* Radio share-type track */ :root[data-theme="dark"] .upload-block .upload-form .radio-group { background: #0e121a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } /* Options gear / secondary button */ :root[data-theme="dark"] .upload-block .upload-block-content .button-block button.options { color: var(--aurora-ink) !important; background: var(--aurora-surface-3) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } :root[data-theme="dark"] .upload-block .upload-block-content .button-block { border-top-color: rgba(255, 255, 255, .1); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); } /* Sidebar: clearer chrome vs colorful page bg */ :root[data-theme="dark"] .product-sidebar { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 70px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .product-nav-item:not(.is-active):not(.is-disabled):hover { background: rgba(255, 255, 255, .06); color: var(--aurora-ink); } :root[data-theme="dark"] .product-nav-item.is-disabled { opacity: .55; } :root[data-theme="dark"] .theme-switcher-seg { background: #0e121a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } :root[data-theme="dark"] .theme-switcher-btn:not(.is-active):not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .08); } /* Side panel + mobile bar edges */ :root[data-theme="dark"] .tab-window { box-shadow: -18px 0 48px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .mobile-nav { box-shadow: 0 8px 28px rgba(0, 0, 0, .4); border-bottom-color: rgba(255, 255, 255, .1) !important; } :root[data-theme="dark"] .mobile-theme-trigger { background: var(--aurora-surface-3); border-color: rgba(255, 255, 255, .14); color: var(--aurora-ink); } :root[data-theme="dark"] .mobile-theme-dropdown { box-shadow: 0 18px 48px rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .14); } /* Advanced options tray: darker recess */ :root[data-theme="dark"] .upload-block .upload-form form .advanced-options { background: #0e121a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); } :root[data-theme="dark"] .upload-block .upload-form form .advanced-options input, :root[data-theme="dark"] .upload-block .upload-form form .advanced-options textarea, :root[data-theme="dark"] .upload-block .upload-form form .advanced-options select { background-color: var(--aurora-field-bg); border-color: rgba(255, 255, 255, .1); } /* File cards in tabs */ :root[data-theme="dark"] .tab .files .file { border-color: rgba(255, 255, 255, .12); box-shadow: 0 8px 22px rgba(0, 0, 0, .28); } :root[data-theme="dark"] .tab .files .file .file-details { background: #1a2030; border-top: 1px solid rgba(255, 255, 255, .06); } /* Labels a touch brighter so form structure reads */ :root[data-theme="dark"] .upload-block .upload-form form .input-group span.label, :root[data-theme="dark"] .tab-window .tab .label { color: #b6bfce; font-weight: 650; } /* -------------------------------------------------------------------------- Dark mode — full sweep of remaining light hardcodes + Bulma defaults (bulma.purged ships html/body/button/navbar/tag as light-only) -------------------------------------------------------------------------- */ /* Base document (Bulma sets html{background:#fff} and body{color:#4a4a4a}) */ :root[data-theme="dark"] html { background-color: #0b0d12 !important; } :root[data-theme="dark"] body { color: var(--aurora-ink); } :root[data-theme="dark"] strong { color: var(--aurora-ink); } :root[data-theme="dark"] a:not(.button):not(.sidebar-telegram):not(.product-nav-item):not(.mobile-account-shortcut) { color: color-mix(in srgb, var(--aurora-primary) 80%, #fff 20%); } :root[data-theme="dark"] a:not(.button):not(.sidebar-telegram):not(.product-nav-item):hover { color: var(--aurora-primary); } :root[data-theme="dark"] hr { background-color: var(--aurora-divider); } /* Generic Bulma surfaces inside the product shell */ :root[data-theme="dark"] .box, :root[data-theme="dark"] .card, :root[data-theme="dark"] .message, :root[data-theme="dark"] .modal-card, :root[data-theme="dark"] .modal-card-head, :root[data-theme="dark"] .modal-card-body, :root[data-theme="dark"] .modal-card-foot, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .dropdown-content, :root[data-theme="dark"] .menu-list a { background-color: var(--aurora-surface) !important; color: var(--aurora-ink) !important; border-color: var(--aurora-border) !important; } :root[data-theme="dark"] .notification { background-color: var(--aurora-surface-2); color: var(--aurora-ink); } :root[data-theme="dark"] .notification.is-info, :root[data-theme="dark"] .notification.is-success, :root[data-theme="dark"] .notification.is-warning, :root[data-theme="dark"] .notification.is-danger { /* keep semantic tint; force readable text */ color: #fff; } /* Default buttons (not brand .is-info) — Bulma paints them white */ :root[data-theme="dark"] .button:not(.is-info):not(.is-success):not(.is-danger):not(.is-warning):not(.is-primary):not(.is-link):not(.is-dark) { background-color: var(--aurora-surface-3) !important; border-color: rgba(255, 255, 255, .12) !important; color: var(--aurora-ink) !important; } :root[data-theme="dark"] .button:not(.is-info):not(.is-success):not(.is-danger):not(.is-warning):not(.is-primary):not(.is-link):not(.is-dark):hover { background-color: var(--aurora-field-bg-hover) !important; border-color: rgba(255, 255, 255, .18) !important; color: var(--aurora-ink) !important; } :root[data-theme="dark"] .button.is-light { background-color: var(--aurora-surface-3) !important; color: var(--aurora-ink) !important; border-color: transparent !important; } /* Form controls Bulma paints light */ :root[data-theme="dark"] .input, :root[data-theme="dark"] .textarea, :root[data-theme="dark"] .select select, :root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background-color: var(--aurora-field-bg) !important; color: var(--aurora-ink) !important; border-color: rgba(255, 255, 255, .1) !important; } :root[data-theme="dark"] .input::placeholder, :root[data-theme="dark"] .textarea::placeholder, :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--aurora-placeholder) !important; } :root[data-theme="dark"] .input:focus, :root[data-theme="dark"] .textarea:focus, :root[data-theme="dark"] .select select:focus, :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { background-color: var(--aurora-field-bg-focus) !important; border-color: var(--aurora-primary) !important; color: var(--aurora-ink) !important; } :root[data-theme="dark"] .label, :root[data-theme="dark"] .help { color: var(--aurora-muted) !important; } /* Tags (recipient chips etc.) */ :root[data-theme="dark"] .tag:not(body), :root[data-theme="dark"] .tag:not(body).is-light { background-color: var(--aurora-surface-3) !important; color: var(--aurora-ink) !important; } /* Mobile navbar — Bulma is-info + white menu sheet */ :root[data-theme="dark"] .mobile-nav.navbar.is-info { background-color: var(--aurora-mobile-nav-bg) !important; } :root[data-theme="dark"] .mobile-nav .navbar-menu, :root[data-theme="dark"] .mobile-nav .navbar-menu.is-active { background-color: var(--aurora-mobile-nav-bg) !important; } :root[data-theme="dark"] .mobile-nav .navbar-item, :root[data-theme="dark"] .mobile-nav .navbar-link, :root[data-theme="dark"] .mobile-nav .navbar-burger { color: var(--aurora-ink) !important; } :root[data-theme="dark"] .mobile-nav .navbar-item:hover, :root[data-theme="dark"] .mobile-nav .navbar-item:focus, :root[data-theme="dark"] .mobile-nav a.navbar-item:hover { background-color: var(--aurora-surface-2) !important; color: var(--aurora-ink) !important; } :root[data-theme="dark"] .mobile-nav .navbar-burger span { background-color: var(--aurora-ink) !important; } /* Tables */ :root[data-theme="dark"] table, :root[data-theme="dark"] .table { background-color: transparent !important; color: var(--aurora-ink) !important; } :root[data-theme="dark"] .table td, :root[data-theme="dark"] .table th, :root[data-theme="dark"] table td, :root[data-theme="dark"] table th { border-color: var(--aurora-border) !important; color: var(--aurora-ink) !important; } :root[data-theme="dark"] .table th, :root[data-theme="dark"] table th { color: var(--aurora-muted) !important; } :root[data-theme="dark"] .table.is-striped tbody tr:not(.is-selected):nth-child(even), :root[data-theme="dark"] .table tbody tr:hover { background-color: var(--aurora-surface-2) !important; } /* Title / subtitle in panels */ :root[data-theme="dark"] .title, :root[data-theme="dark"] .subtitle, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { color: var(--aurora-ink); } /* Progress / keep-status stay semantic; only ensure ink on card around them */ :root[data-theme="dark"] .upload-keep-status.is-info { color: #9ec9ef; background: rgba(62, 142, 208, 0.18); } :root[data-theme="dark"] .upload-keep-status.is-warn { color: #f0c674; background: rgba(245, 166, 35, 0.2); } :root[data-theme="dark"] .upload-keep-status.is-ok { color: #7dcea0; background: rgba(46, 160, 90, 0.18); } /* Select chevron: light grey stroke is fine; dark gets a lighter stroke via filter */ :root[data-theme="dark"] .upload-block .upload-form form .input-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23aab3c2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Code blocks if any */ :root[data-theme="dark"] code, :root[data-theme="dark"] pre { background-color: var(--aurora-surface-2) !important; color: var(--aurora-ink) !important; } /* Premium / account tab cards that still hardcode white in account.css — catch-all for any leftover #fff panels under the account scope */ :root[data-theme="dark"] #tab-account [style*="background: #fff"], :root[data-theme="dark"] #tab-account [style*="background:#fff"], :root[data-theme="dark"] #tab-account [style*="background: white"] { background: var(--aurora-surface) !important; } .df-video-preview-bar { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; min-height: 38px; padding: 8px 14px; border-top: 1px solid rgba(148, 163, 184, .12); border-bottom: 1px solid rgba(148, 163, 184, .12); background: #111827; color: #aeb8c7; font-size: 12px; line-height: 1.35; text-align: center; } .df-video-preview-bar.is-preview { color: #b7e7ef; background: #0c2028; } .df-video-preview-bar.is-original { color: #cbd5e1; } .df-video-preview-bar.is-error { color: #fecaca; background: #291317; } .df-video-preview-bar.is-loading::before { width: 13px; height: 13px; flex: 0 0 auto; content: ""; border: 2px solid rgba(148, 163, 184, .35); border-top-color: #67e8f9; border-radius: 50%; animation: df-video-spin .8s linear infinite; } @keyframes df-video-spin { to { transform: rotate(360deg); } } .df-player-media-settings { margin-top: 5px; padding: 7px; border-top: 1px solid rgba(148, 163, 184, .25); } .df-player-media-settings label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 4px; color: inherit; font-size: 13px; } .df-player-media-settings select { max-width: 170px; padding: 5px 26px 5px 8px; border: 1px solid rgba(148, 163, 184, .45); border-radius: 6px; outline: 0; background: #202631; color: #fff; font: inherit; } .df-player-media-settings select:focus { border-color: #67e8f9; box-shadow: 0 0 0 2px rgba(34, 211, 238, .18); } @media(max-width:768px) { .df-video-preview-bar { min-height: 34px; padding: 7px 10px; font-size: 11px; } .df-player-media-settings select { max-width: 145px; } } /* Mobile home: two deliberate, full-screen sections with a smooth return CTA. */ .mobile-home-flow { position: relative; } .home-seo-inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; } .home-seo-kicker { display: block; margin-bottom: 10px; color: var(--aurora-primary); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .home-seo-copy .df-highlight { color: var(--aurora-primary); font-style: normal; } .home-seo-copy [data-df-count] { display: inline-block; min-width: 2ch; text-align: right; } .df-landing-fx { display: none; } .home-seo-features div > i { display: inline-flex; width: 38px; height: 38px; margin-bottom: 12px; align-items: center; justify-content: center; color: var(--aurora-primary); background: rgba(var(--aurora-primary-rgb), .12); border-radius: 12px; font-size: 18px; } .mobile-upload-fab { display: none; } @media (max-width: 768px) { html:has(body.df-page-upload), body.df-page-upload { width: 100%; height: 100%; height: 100dvh; overflow: hidden !important; overscroll-behavior: none; } body.df-page-upload { position: fixed; inset: 0; } body.df-page-upload .mobile-home-flow { position: fixed; z-index: 1; inset: 0; width: 100%; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } body.df-page-upload .mobile-snap-section { width: 100%; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; } body.df-page-upload .mobile-upload-section { height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; max-height: 100dvh; padding: 58px 0 0; overflow: hidden; } body.df-page-upload .mobile-upload-section .upload-block-inner { height: calc(100vh - 58px); height: calc(100dvh - 58px); min-height: 0 !important; max-height: calc(100dvh - 58px); overflow: hidden; } body.df-page-upload .mobile-upload-section .upload-block-content { min-height: 0; overflow: hidden; } body.df-page-upload .mobile-upload-section .upload-form { min-height: 0; max-height: calc(100% - 96px); overflow-y: auto; -webkit-overflow-scrolling: touch; } body.df-page-upload .mobile-discover-section { position: relative; display: flex; max-width: none; margin: 0; padding: calc(58px + clamp(22px, 6vh, 54px)) 22px calc(102px + env(safe-area-inset-bottom, 0px)); align-items: center; color: #f8fafc; text-align: left; background: radial-gradient(circle at 86% 14%, rgba(103, 232, 249, .22), transparent 28%), radial-gradient(circle at 12% 90%, rgba(139, 92, 246, .3), transparent 34%), linear-gradient(155deg, #07111f 0%, #111d35 55%, #1e1743 100%); overflow-x: hidden; overflow-y: auto; } body.df-page-upload .mobile-discover-section::before { position: absolute; top: 16%; right: -70px; width: 190px; height: 190px; content: ""; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255, 255, 255, .025), 0 0 0 68px rgba(255, 255, 255, .018); pointer-events: none; animation: df-ring-float 14s ease-in-out infinite alternate; } body.df-page-upload .df-landing-fx { position: absolute; z-index: 0; inset: 0; display: block; overflow: hidden; pointer-events: none; } body.df-page-upload .df-orb { position: absolute; display: block; border-radius: 50%; will-change: transform; animation: df-orb-drift 26s ease-in-out infinite alternate; } body.df-page-upload .df-orb-1 { top: -120px; left: -110px; width: 300px; height: 300px; background: radial-gradient(circle at 38% 38%, rgba(103, 232, 249, .32), transparent 68%); } body.df-page-upload .df-orb-2 { right: -140px; bottom: -80px; width: 360px; height: 360px; background: radial-gradient(circle at 60% 40%, rgba(139, 92, 246, .38), transparent 66%); animation-duration: 31s; animation-delay: -9s; } body.df-page-upload .df-orb-3 { top: 32%; right: 2%; width: 150px; height: 150px; background: radial-gradient(circle at 45% 45%, rgba(244, 114, 182, .22), transparent 70%); animation-duration: 22s; animation-delay: -15s; } body.df-page-upload .df-stars { position: absolute; inset: 0; display: block; background-image: radial-gradient(1.5px 1.5px at 18% 22%, rgba(255, 255, 255, .75), transparent 100%), radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, .6), transparent 100%), radial-gradient(1.5px 1.5px at 86% 40%, rgba(255, 255, 255, .5), transparent 100%), radial-gradient(1px 1px at 8% 56%, rgba(255, 255, 255, .55), transparent 100%), radial-gradient(1.5px 1.5px at 46% 8%, rgba(255, 255, 255, .45), transparent 100%), radial-gradient(1px 1px at 64% 76%, rgba(255, 255, 255, .4), transparent 100%), radial-gradient(1px 1px at 30% 88%, rgba(255, 255, 255, .45), transparent 100%); animation: df-twinkle 6s ease-in-out infinite alternate; } body.df-page-upload .home-seo-inner { width: 100%; max-width: 480px; } body.df-page-upload .home-seo-kicker { margin-bottom: 12px; color: #67e8f9; font-size: 10px; } body.df-page-upload .home-seo-copy h2 { max-width: 330px; margin: 0 0 14px; color: #fff; font-size: clamp(34px, 10vw, 48px); letter-spacing: -.055em; line-height: .98; } body.df-page-upload .home-seo-copy h2 .df-highlight { display: inline-block; color: #8bd8f4; background: linear-gradient(90deg, #67e8f9 0%, #818cf8 30%, #c084fc 55%, #67e8f9 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: df-gradient-pan 8s linear infinite; } body.df-page-upload .home-seo-copy p { max-width: 360px; margin: 0 0 clamp(22px, 5vh, 34px); color: #b8c4d8; font-size: 15px; line-height: 1.55; } /* Staged reveal: hidden state only applies once JS tags the section (df-reveal-ready). */ body.df-page-upload .df-reveal-ready [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .25, 1); } body.df-page-upload .df-reveal-ready [data-reveal="2"] { transition-delay: .06s; } body.df-page-upload .df-reveal-ready [data-reveal="3"] { transition-delay: .12s; } body.df-page-upload .df-reveal-ready [data-reveal="4"] { transition-delay: .18s; } body.df-page-upload .df-reveal-ready [data-reveal="5"] { transition-delay: .26s; } body.df-page-upload .df-reveal-ready [data-reveal="6"] { transition-delay: .34s; } body.df-page-upload .df-reveal-ready.is-revealed [data-reveal] { opacity: 1; transform: translate3d(0, 0, 0); } body.df-page-upload .home-seo-features { display: grid; grid-template-columns: 1fr; gap: 10px; text-align: left; } body.df-page-upload .home-seo-features div { display: grid; min-height: 68px; padding: 13px 15px; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; color: #fff; background: linear-gradient(165deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .045) 100%); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045); backdrop-filter: blur(12px); transition: transform .22s ease; } body.df-page-upload .home-seo-features div:active { transform: scale(.97); } body.df-page-upload .home-seo-features div > i { width: 40px; height: 40px; margin: 0; grid-row: 1 / 3; color: #67e8f9; background: rgba(103, 232, 249, .12); border-radius: 13px; font-size: 18px; } body.df-page-upload .home-seo-features div:nth-child(1) > i { box-shadow: 0 0 18px rgba(103, 232, 249, .2); } body.df-page-upload .home-seo-features div:nth-child(2) > i { color: #a5b4fc; background: rgba(129, 140, 248, .16); box-shadow: 0 0 18px rgba(129, 140, 248, .22); } body.df-page-upload .home-seo-features div:nth-child(3) > i { color: #f9a8d4; background: rgba(244, 114, 182, .14); box-shadow: 0 0 18px rgba(244, 114, 182, .2); } body.df-page-upload .home-seo-features strong { grid-column: 2; align-self: end; color: #fff; font-size: 15px; line-height: 1.2; } body.df-page-upload .home-seo-features span { margin: 3px 0 0; grid-column: 2; align-self: start; color: #9facbf; font-size: 12px; } .mobile-upload-fab { position: fixed; z-index: 7; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: inline-flex; min-height: 52px; gap: 9px; padding: 0 20px; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; box-shadow: 0 18px 38px rgba(59, 92, 235, .42); opacity: 0; transform: translate3d(0, 18px, 0) scale(.94); pointer-events: none; font: inherit; font-size: 14px; font-weight: 800; transition: opacity .28s ease, transform .42s cubic-bezier(.2, .8, .2, 1); } .mobile-upload-fab.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); pointer-events: auto; } .mobile-upload-fab:hover, .mobile-upload-fab:focus-visible { color: #fff; background: linear-gradient(135deg, #22a8ec 0%, #5457e8 100%); outline: 3px solid rgba(103, 232, 249, .35); outline-offset: 3px; } body.page-panel-open .mobile-upload-fab, body:has(.tab-window.active) .mobile-upload-fab { opacity: 0; pointer-events: none; } } @media (max-width: 768px) and (max-height: 620px) { body.df-page-upload .mobile-discover-section { align-items: flex-start; padding-top: 76px; } body.df-page-upload .home-seo-copy h2 { font-size: 32px; } body.df-page-upload .home-seo-copy p { margin-bottom: 18px; } } @media (prefers-reduced-motion: reduce) { body.df-page-upload .mobile-home-flow { scroll-behavior: auto; } .mobile-upload-fab { transition: none; } body.df-page-upload .df-orb, body.df-page-upload .df-stars, body.df-page-upload .mobile-discover-section::before, body.df-page-upload .home-seo-copy h2 .df-highlight { animation: none; } body.df-page-upload .df-reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; } } @keyframes df-orb-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(34px, -26px, 0) scale(1.14); } 100% { transform: translate3d(-26px, 30px, 0) scale(.94); } } @keyframes df-ring-float { from { transform: translate3d(0, -10px, 0); } to { transform: translate3d(0, 16px, 0); } } @keyframes df-twinkle { from { opacity: .3; } to { opacity: .85; } } /* background-size 200% + shift of 200% = exactly one tile, ends match -> seamless loop */ @keyframes df-gradient-pan { from { background-position: 0% 0; } to { background-position: 200% 0; } } /* DripFiles CLI discovery card. */ .home-cli-card { display: flex; gap: 16px; margin-top: 16px; padding: 18px 20px; align-items: center; color: var(--aurora-ink, #1d2433); text-align: left; background: var(--aurora-surface-2, rgba(255, 255, 255, .82)); border: 1px solid var(--aurora-border, rgba(30, 41, 59, .12)); border-radius: 18px; box-shadow: 0 14px 34px rgba(15, 23, 42, .08); } .home-cli-icon { display: inline-flex; width: 46px; height: 46px; flex: 0 0 46px; align-items: center; justify-content: center; color: #67e8f9; background: linear-gradient(145deg, #111827 0%, #1e293b 100%); border: 1px solid rgba(103, 232, 249, .24); border-radius: 14px; box-shadow: 0 10px 24px rgba(15, 23, 42, .2); font-size: 21px; } .home-cli-copy { min-width: 210px; flex: 1 1 300px; } .home-cli-copy strong, .home-cli-copy span, .home-cli-copy small { display: block; } .home-cli-copy strong { color: var(--aurora-ink, #1d2433); font-size: 17px; line-height: 1.2; } .home-cli-copy span { margin-top: 4px; color: var(--aurora-muted, #5a6270); font-size: 13px; line-height: 1.4; } .home-cli-copy small { margin-top: 5px; color: var(--aurora-muted, #697181); font-size: 11px; line-height: 1.35; } .home-cli-command { display: block; max-width: 255px; padding: 10px 12px; flex: 0 1 255px; color: #d1fae5; background: #101827; border: 1px solid rgba(148, 163, 184, .22); border-radius: 10px; overflow-x: auto; white-space: nowrap; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.4; scrollbar-width: thin; } .home-cli-actions { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; } .home-cli-link { display: inline-flex; min-height: 40px; padding: 0 14px; align-items: center; justify-content: center; color: var(--aurora-primary-btn, #3374ab) !important; background: transparent; border: 1px solid var(--aurora-border, rgba(30, 41, 59, .15)); border-radius: 999px; font-size: 12px; font-weight: 800; text-decoration: none; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; } .home-cli-link.is-primary { color: #fff !important; background: var(--aurora-primary-btn, #3374ab); border-color: transparent; } .home-cli-link.is-icon { width: 40px; padding: 0; font-size: 21px; } .home-cli-link:hover, .home-cli-link:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(51, 116, 171, .2); } .home-cli-link.is-primary:hover, .home-cli-link.is-primary:focus-visible { color: #fff !important; background: var(--aurora-primary-hover, #28618f); } @media (max-width: 768px) { body.df-page-upload .df-reveal-ready [data-reveal="7"] { transition-delay: .42s; } body.df-page-upload .home-cli-card { display: grid; gap: 10px 12px; margin-top: 12px; padding: 13px 15px; grid-template-columns: 40px minmax(0, 1fr); color: #fff; background: linear-gradient(165deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .045) 100%); border-color: rgba(255, 255, 255, .12); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045); backdrop-filter: blur(12px); } body.df-page-upload .home-cli-icon { width: 40px; height: 40px; align-self: start; flex-basis: 40px; border-radius: 13px; font-size: 18px; } body.df-page-upload .home-cli-copy { min-width: 0; } body.df-page-upload .home-cli-copy strong { color: #fff; font-size: 15px; } body.df-page-upload .home-cli-copy span { color: #b8c4d8; font-size: 12px; } body.df-page-upload .home-cli-copy small { display: none; } body.df-page-upload .home-cli-command { width: 100%; max-width: none; grid-column: 1 / -1; font-size: 11.5px; } body.df-page-upload .home-cli-actions { width: 100%; grid-column: 1 / -1; } body.df-page-upload .home-cli-link.is-primary { flex: 1 1 auto; } } /* CLI shortcut in the desktop product sidebar. */ .sidebar-cli { display: flex; gap: 8px; min-height: 38px; margin: 0 0 12px; padding: 0 12px; align-items: center; justify-content: center; color: #fff !important; background: linear-gradient(135deg, #111827 0%, #27364f 100%); border: 1px solid rgba(103, 232, 249, .18); border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1; text-decoration: none; } .sidebar-cli i { color: #67e8f9; font-size: 16px; line-height: 1; } .sidebar-cli:hover, .sidebar-cli:focus-visible { color: #fff !important; background: linear-gradient(135deg, #172033 0%, #31425f 100%); border-color: rgba(103, 232, 249, .4); } @media (max-height: 760px) and (min-width: 769px) { .sidebar-cli { min-height: 32px; margin-bottom: 8px; font-size: 11.5px; } } @media (max-height: 560px) and (min-width: 769px) { .sidebar-cli span { display: none; } .sidebar-cli { width: 100%; min-height: 34px; } }