/* =========================================================================== BeigeCloud — warm theme for File Browser 2.63 Light + Dark (beige in both) · phone → desktop · iOS-friendly upload Served at /static/custom.css, linked at the end of . Verified against the real DOM of this build: login card = #login form (NOT .card) login submit = input.button.button--block (has .button, not .input) listing = #listing.file-icons.(list|mosaic|mosaic gallery) row = .item[data-dir][data-type][aria-selected] dialogs = .card.floating > .card-title/.card-content/.card-action Theme class is set by the app on : exactly "light" or "dark". ========================================================================= */ /* ============================ LIGHT (default) ========================== */ :root, :root.light { --blue: #96683b; /* accent: readable on cream AND under white text */ --dark-blue: #7d5530; --brand: #a97c50; /* decorative caramel */ --on-accent: #fffaf3; --icon-blue: #96683b; --icon-green: #6f7f4f; --icon-orange: #bf7733; --icon-red: #ac5a45; --icon-yellow: #c2933c; --icon-violet: #8e6b81; --background: #f6f1e7; --surfacePrimary: #fffdf9; --surfaceSecondary: #efe6d6; --item-selected: #ecdcc0; --hover: #f3ebdd; --textPrimary: #372e26; --textSecondary: #776a5b; --borderPrimary: #e0d4bf; --borderSecondary: #ebe1d0; --divider: rgba(55,46,38,.10); --dividerPrimary: rgba(55,46,38,.10); --dividerSecondary: rgba(55,46,38,.06); --action: #776a5b; --moon-grey: #f3ebdd; --glass: rgba(255,253,249,.78); --ring: rgba(150,104,59,.26); --shadow-1: 0 1px 2px rgba(74,56,34,.07), 0 1px 3px rgba(74,56,34,.05); --shadow-2: 0 2px 6px rgba(74,56,34,.09), 0 8px 20px rgba(74,56,34,.09); --shadow-3: 0 10px 34px rgba(74,56,34,.17), 0 2px 8px rgba(74,56,34,.10); --aurora-1: #fdf6e8; --aurora-2: #ecd9b8; --aurora-3: #f8f0df; --aurora-4: #efe2c8; --r-lg: 20px; --r-md: 14px; --r-sm: 10px; --ease: cubic-bezier(.2,.7,.3,1); --font: -apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',sans-serif; color-scheme: light; } /* ============================== DARK =================================== */ :root.dark { --blue: #e0b482; /* warm sand — beige identity survives the dark */ --dark-blue: #eec99a; --brand: #e0b482; --on-accent: #2a1f14; --icon-blue: #e0b482; --icon-green: #a9bd88; --icon-orange: #dda368; --icon-red: #d78d76; --icon-yellow: #e3c274; --icon-violet: #c2a3b7; --background: #14100b; --surfacePrimary: #272019; --surfaceSecondary: #342b21; --item-selected: #463929; --hover: #342b21; --textPrimary: #f3ebdf; --textSecondary: #b3a491; --borderPrimary: #40352a; --borderSecondary: #2f261e; --divider: rgba(243,235,223,.10); --dividerPrimary: rgba(243,235,223,.10); --dividerSecondary: rgba(243,235,223,.06); --action: #b3a491; --moon-grey: #2f261e; --glass: rgba(42,34,26,.90); --ring: rgba(224,180,130,.28); --shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.32); --shadow-2: 0 2px 8px rgba(0,0,0,.48), 0 10px 24px rgba(0,0,0,.38); --shadow-3: 0 14px 40px rgba(0,0,0,.58), 0 2px 10px rgba(0,0,0,.40); --aurora-1: #4a3520; --aurora-2: #33241a; --aurora-3: #100d09; --aurora-4: #1d1710; color-scheme: dark; } /* =============================== BASE ================================== */ html, body, input, button, textarea, select, .message, .card, .dashboard, #listing, .item, header, nav, #dropdown, .card-title, .card-content { font-family: var(--font) !important; } html, body { background: var(--background); } body { color: var(--textPrimary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: none; /* no white rubber-band on iOS */ } main { background: transparent !important; } /* boot splash must not flash white in dark mode */ #loading { background: var(--background) !important; } #loading .spinner > div { background: var(--blue) !important; } :focus-visible { outline: 2px solid var(--blue) !important; outline-offset: 2px; border-radius: 8px; } ::selection { background: var(--item-selected); color: var(--textPrimary); } /* ============================== HEADER ================================= */ header { background: var(--glass) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--borderSecondary) !important; box-shadow: none !important; } header title, header .topbar-title { font-weight: 650 !important; letter-spacing: -.015em; color: var(--textPrimary) !important; } header img { height: 2.1em !important; } .action { border-radius: 999px !important; color: var(--action) !important; transition: background .18s var(--ease), transform .12s var(--ease); } .action:hover { background: var(--hover) !important; } .action:active { transform: scale(.93); } .action i, .action .material-icons { color: var(--action) !important; } .action .counter { background: var(--blue) !important; color: var(--on-accent) !important; border: 2px solid var(--surfacePrimary) !important; font-weight: 600; } /* search — soft pill that lifts on focus */ #search #input { background: var(--surfaceSecondary) !important; border: 1px solid transparent !important; border-radius: 999px !important; color: var(--textPrimary) !important; transition: background .18s var(--ease), box-shadow .18s var(--ease); } #search #input:hover { background: var(--surfacePrimary) !important; box-shadow: var(--shadow-1) !important; } #search.active #input { border-radius: var(--r-lg) !important; background: var(--surfacePrimary) !important; box-shadow: var(--shadow-3) !important; border-color: var(--borderSecondary) !important; } #search #result { background: var(--surfacePrimary) !important; color: var(--textPrimary) !important; } /* ============================== SIDEBAR ================================ */ nav { background: var(--surfacePrimary) !important; border-right: 1px solid var(--borderSecondary) !important; padding-top: .5em; } nav ul li { border-radius: 0 999px 999px 0 !important; margin: 2px 12px 2px 0 !important; padding: .62em 1em !important; transition: background .18s var(--ease), color .18s var(--ease); } nav ul li:hover { background: var(--hover) !important; } nav ul li.active { background: var(--item-selected) !important; color: var(--blue) !important; font-weight: 600 !important; } nav ul li.active i, nav ul li.active .material-icons { color: var(--blue) !important; } nav ul li.active::before { background: transparent !important; } nav .credits { color: var(--textSecondary) !important; opacity: .8; } /* usage meter */ #nav .progress, .progress { background: var(--surfaceSecondary) !important; border-radius: 999px !important; } #nav .progress > div, .progress > div { background: var(--blue) !important; border-radius: 999px !important; } /* ============================== BUTTONS ================================ */ .button { border-radius: 999px !important; font-weight: 560 !important; letter-spacing: .005em; box-shadow: none !important; transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease); } .button:active { transform: scale(.97); } .button--flat { color: var(--blue) !important; background: transparent !important; } .button--flat:hover { background: var(--item-selected) !important; } .button--blue { background: var(--blue) !important; color: var(--on-accent) !important; } .button--blue:hover { background: var(--dark-blue) !important; box-shadow: var(--shadow-2) !important; } .button--grey { background: var(--surfaceSecondary) !important; color: var(--textPrimary) !important; } .button--grey:hover { background: var(--hover) !important; } .button--red { background: var(--icon-red) !important; color: #fff !important; } .button--red:hover { filter: brightness(.94); } /* ========================== INPUTS / SELECTS =========================== */ .input, input.input, textarea.input, select { background: var(--surfacePrimary) !important; color: var(--textPrimary) !important; border: 1px solid var(--borderPrimary) !important; border-radius: var(--r-sm) !important; font-size: 16px !important; /* stops iOS zoom-on-focus */ transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .input:focus, input.input:focus, textarea.input:focus, select:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--ring) !important; outline: none !important; } ::placeholder { color: var(--textSecondary) !important; opacity: .75; } /* the theme / language pickers in Settings read as real controls */ select { appearance: none; -webkit-appearance: none; padding: .7em 2.4em .7em .9em !important; background-image: linear-gradient(45deg, transparent 50%, var(--action) 50%), linear-gradient(135deg, var(--action) 50%, transparent 50%) !important; background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px) !important; background-size: 6px 6px, 6px 6px !important; background-repeat: no-repeat !important; cursor: pointer; } /* ========================== CARDS / DIALOGS ============================ */ .card, .card.floating { border-radius: var(--r-lg) !important; background: var(--surfacePrimary) !important; box-shadow: var(--shadow-3) !important; border: 1px solid var(--borderSecondary) !important; } .card-title, .card > h2, .card > h3 { font-weight: 650 !important; letter-spacing: -.015em; color: var(--textPrimary) !important; } .card-content { color: var(--textPrimary) !important; } .card-content p, .card-content li { color: var(--textSecondary) !important; } .card-action { border-top: 1px solid var(--dividerSecondary) !important; } .card-content code, .shell, pre { background: var(--surfaceSecondary) !important; border-radius: var(--r-sm) !important; color: var(--textPrimary) !important; } .overlay { background: rgba(30,22,14,.44) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } #dropdown { background: var(--surfacePrimary) !important; border: 1px solid var(--borderSecondary) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-3) !important; overflow: hidden; } #dropdown .action { border-radius: 0 !important; color: var(--textPrimary) !important; } #dropdown .action:hover { background: var(--hover) !important; } #dropdown .action i { color: var(--action) !important; text-shadow: none !important; } /* =========================== FILE LISTING ============================== */ #listing .item { border-radius: var(--r-md) !important; border: 1px solid var(--borderSecondary) !important; background: var(--surfacePrimary) !important; box-shadow: none !important; transition: box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } #listing .item .name { font-weight: 500 !important; letter-spacing: -.005em; } #listing .item:hover { background: var(--hover) !important; box-shadow: var(--shadow-2) !important; border-color: transparent !important; } #listing.mosaic .item:hover { transform: translateY(-2px); } #listing .item[aria-selected="true"] { background: var(--item-selected) !important; border-color: var(--blue) !important; box-shadow: var(--shadow-1) !important; } /* folders read as folders, files by kind */ #listing .item[data-dir="true"] i { color: var(--blue) !important; } #listing .item[data-type="image"] i { color: var(--icon-green) !important; } #listing .item[data-type="video"] i { color: var(--icon-red) !important; } #listing .item[data-type="audio"] i { color: var(--icon-violet) !important; } #listing .item[data-type="pdf"] i, #listing .item[data-type="text"] i { color: var(--icon-orange) !important; } /* list-mode header row stays quiet */ #listing .item.header { background: transparent !important; border: none !important; box-shadow: none !important; } #listing .item.header:hover { transform: none; box-shadow: none !important; background: transparent !important; } #listing .item.header p, #listing .item.header span { color: var(--textSecondary) !important; font-weight: 600 !important; letter-spacing: .02em; font-size: .82em; text-transform: uppercase; } #listing.mosaic .item { padding: .75em !important; } #listing.mosaic .item img { border-radius: var(--r-sm); } /* photo tiles */ #listing.mosaic.gallery .item { padding: 0 !important; overflow: hidden; } #listing.mosaic.gallery .item img { border-radius: 0; object-fit: cover; transition: transform .4s var(--ease); } #listing.mosaic.gallery .item:hover img { transform: scale(1.06); } #listing.mosaic.gallery .item[data-type="image"] div:last-of-type { background: linear-gradient(transparent, rgba(0,0,0,.68)) !important; color: #fff !important; font-weight: 500; } /* drop target */ #listing.dragging, .item.dragover { outline: 2px dashed var(--blue) !important; outline-offset: -6px; background: var(--item-selected) !important; } /* floating selection pill */ #file-selection { background: var(--glass) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--borderSecondary) !important; border-radius: 999px !important; box-shadow: var(--shadow-3) !important; bottom: calc(1em + env(safe-area-inset-bottom)) !important; } #file-selection .action { color: var(--textPrimary) !important; } /* previewer */ #previewer, .preview { background: var(--background) !important; } #previewer header { background: var(--glass) !important; } /* ========================= PROGRESS / SCROLLBARS ======================= */ #progress > div { background: var(--blue) !important; } * { scrollbar-color: var(--borderPrimary) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--borderPrimary); border-radius: 999px; border: 3px solid var(--background); } ::-webkit-scrollbar-thumb:hover { background: var(--textSecondary); } /* ============================ LOGIN PAGE =============================== The card is `#login form`. The submit is `.button.button--block` and must NOT inherit the text-field styling, so fields are matched by `.input`. */ #login { background: radial-gradient(1200px 680px at 12% -12%, var(--aurora-1) 0%, transparent 62%), radial-gradient(1000px 600px at 100% 104%, var(--aurora-2) 0%, transparent 58%), linear-gradient(150deg, var(--aurora-3) 0%, var(--aurora-4) 100%) !important; /* cover the whole viewport: no stray body-coloured strips at the edges */ position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; min-height: 0 !important; display: flex !important; align-items: center; justify-content: center; overflow-y: auto; isolation: isolate; padding: 24px max(24px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom)) !important; } /* warm halo behind the card so it lifts off the background */ #login::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(760px, 130vw); aspect-ratio: 1; background: radial-gradient(circle, var(--aurora-1) 0%, transparent 65%); opacity: .85; pointer-events: none; } #login form { background: var(--glass) !important; /* hairline top highlight — the edge that makes it read as a real surface */ box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.06) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--borderSecondary) !important; border-radius: 24px !important; padding: 40px 34px calc(34px + env(safe-area-inset-bottom)) !important; width: min(400px, calc(100vw - 32px)) !important; flex: 0 0 auto; margin: auto !important; animation: bc-rise .5s var(--ease) both; } @keyframes bc-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } } #login form > img { width: 68px !important; height: 68px !important; margin: 0 auto .55em !important; display: block; border-radius: 18px; box-shadow: var(--shadow-2); } #login form > h1 { font-weight: 700 !important; font-size: 1.6rem !important; letter-spacing: -.025em; text-align: center; color: var(--textPrimary) !important; margin: 0 0 1.4em !important; } #login .input { width: 100%; display: block; padding: 14px 16px !important; margin-bottom: 12px !important; background: var(--surfacePrimary) !important; } #login .button { width: 100%; display: block; margin-top: 6px !important; padding: 14px 18px !important; font-size: 1rem !important; font-weight: 600 !important; background: var(--blue) !important; color: var(--on-accent) !important; border: none !important; cursor: pointer; box-shadow: 0 6px 18px var(--ring) !important; } #login .button:hover { background: var(--dark-blue) !important; } #login .wrong { background: var(--icon-red) !important; color: #fff !important; border-radius: var(--r-sm) !important; padding: .8em 1em !important; animation: bc-shake .34s var(--ease); } @keyframes bc-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } /* ====================================================================== RESPONSIVE — phone → large desktop ====================================================================== */ @media (min-width: 1600px) { #listing.mosaic .item { width: calc(16.66% - 1em) !important; } } @media (min-width: 1200px) and (max-width: 1599px) { #listing.mosaic .item { width: calc(20% - 1em) !important; } } @media (min-width: 901px) and (max-width: 1199px) { #listing.mosaic .item { width: calc(25% - 1em) !important; } } @media (min-width: 737px) and (max-width: 900px) { #listing.mosaic .item { width: calc(33.33% - 1em) !important; } } /* ============================== PHONE ================================== */ @media (max-width: 736px) { /* The editor owns the right-hand action slot; avoid covering Save. */ body.bc-editor-route #bc-theme-toggle { display: none !important; } header { padding: .5em .6em !important; } header title { font-size: 1.08em !important; } header img { height: 1.9em !important; } #search { max-width: none !important; } /* off-canvas sidebar as an elevated sheet with big rows */ nav { background: var(--surfacePrimary) !important; border-right: none !important; border-radius: 0 20px 20px 0 !important; box-shadow: var(--shadow-3) !important; padding-bottom: calc(1em + env(safe-area-inset-bottom)) !important; } nav ul li { padding: .92em 1.1em !important; margin: 3px 10px 3px 0 !important; font-size: 1.02em !important; } /* two comfortable columns */ #listing.mosaic .item { width: calc(50% - 1em) !important; padding: .8em !important; } #listing.list .item { padding: .62em .45em !important; } #listing .item .name { font-size: .98em !important; } /* clear the floating upload button */ main { padding-bottom: calc(6.5em + env(safe-area-inset-bottom)) !important; } /* Dialogs: only soften them. Filebrowser positions .card.floating itself (centred via transform); overriding top/left/transform here reliably breaks the real layout, so position is deliberately left untouched. */ .card.floating { border-radius: 20px !important; padding-bottom: calc(.5em + env(safe-area-inset-bottom)) !important; } /* 44px minimum tap targets */ .action { min-width: 44px; min-height: 44px; } #dropdown .action { min-height: 52px; font-size: 1.02em; } /* ---- upload as a thumb-reachable FAB (the iPhone win) ---- */ #upload-button { position: fixed !important; right: calc(16px + env(safe-area-inset-right)) !important; bottom: calc(20px + env(safe-area-inset-bottom)) !important; z-index: 1500 !important; display: flex !important; align-items: center; justify-content: center; width: 60px !important; height: 60px !important; padding: 0 !important; margin: 0 !important; border-radius: 999px !important; background: var(--blue) !important; box-shadow: 0 8px 22px rgba(74,56,34,.36) !important; } #upload-button i { color: var(--on-accent) !important; font-size: 28px !important; } #upload-button span:not(.counter) { display: none !important; } #upload-button:active { transform: scale(.92); } /* …but inside the overflow menu it is an ordinary row again */ #dropdown #upload-button { position: static !important; width: 100% !important; height: auto !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: .4em !important; } #dropdown #upload-button i { color: var(--action) !important; font-size: 1.5em !important; } #dropdown #upload-button span:not(.counter) { display: inline-block !important; } /* Lift the selection pill above the FAB — vertical offset only, so the app keeps control of its own horizontal centring. */ #file-selection { bottom: calc(94px + env(safe-area-inset-bottom)) !important; } #login form { padding: 32px 24px calc(26px + env(safe-area-inset-bottom)) !important; border-radius: 22px !important; } } /* Manual light/dark/system control injected by beigecloud-app.js. */ #bc-theme-toggle { position: relative; width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; background: transparent; color: var(--action); cursor: pointer; transition: background .18s var(--ease), transform .15s var(--ease); } #bc-theme-toggle:hover { background: var(--hover); } #bc-theme-toggle:active { transform: scale(.92); } #bc-theme-toggle .material-icons { font-size: 23px; } /* ============================= FILE NOTES ============================= */ .bc-note-button { position: absolute; top: 8px; right: 8px; z-index: 4; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; color: var(--textSecondary); background: color-mix(in srgb, var(--surfacePrimary) 82%, transparent); opacity: 0; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .16s var(--ease), transform .16s var(--ease), background .16s var(--ease); } .bc-note-svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } #listing .item:hover .bc-note-button, .bc-note-button:focus-visible, .bc-note-button.has-note { opacity: 1; } .bc-note-button:hover { color: var(--blue); background: var(--item-selected); } .bc-note-button:active { transform: scale(.9); } .bc-note-button.has-note { color: var(--on-accent); background: var(--blue); box-shadow: 0 5px 14px var(--ring); } #bc-notes-modal[hidden] { display: none !important; } #bc-notes-modal { position: fixed; inset: 0; z-index: 100000; } .bc-notes-backdrop { position: absolute; inset: 0; background: rgba(20,14,9,.48); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .bc-notes-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(560px, calc(100vw - 32px)); max-height: min(680px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; color: var(--textPrimary); background: var(--surfacePrimary); border: 1px solid var(--borderSecondary); border-radius: 26px; box-shadow: var(--shadow-3); animation: bc-rise .22s var(--ease) both; } .bc-notes-head { position: static !important; min-height: 0 !important; display: flex !important; justify-content: space-between; align-items: flex-start; padding: 22px 22px 12px !important; background: transparent !important; border: 0 !important; } .bc-notes-head h2 { margin: 3px 0 0; font-size: 1.22rem; line-height: 1.25; overflow-wrap: anywhere; } .bc-notes-kicker { color: var(--blue); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .bc-notes-close { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; margin: -8px -8px 0 12px; border: 0; border-radius: 14px; color: var(--textSecondary); background: transparent; cursor: pointer; } .bc-notes-close:hover { background: var(--hover); color: var(--textPrimary); } .bc-notes-body { padding: 8px 22px 18px; } #bc-notes-text { box-sizing: border-box; width: 100%; min-height: 220px; resize: vertical; padding: 16px; font: 500 16px/1.55 var(--font); color: var(--textPrimary); background: var(--background); border: 1px solid var(--borderPrimary); border-radius: 16px; outline: none; } #bc-notes-text:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring); } .bc-notes-hint { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; color: var(--textSecondary); font-size: .76rem; } .bc-notes-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; border-top: 1px solid var(--dividerSecondary); } .bc-notes-actions button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 14px; font: 650 .92rem var(--font); cursor: pointer; } .bc-notes-delete { color: var(--icon-red); background: transparent; } .bc-notes-delete:hover { background: color-mix(in srgb, var(--icon-red) 10%, transparent); } .bc-notes-save { color: var(--on-accent); background: var(--blue); box-shadow: 0 6px 16px var(--ring); } .bc-notes-save:disabled { opacity: .55; cursor: wait; } body.bc-modal-open { overflow: hidden !important; } #bc-toast { position: fixed; z-index: 100001; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 18px); padding: 12px 18px; color: var(--surfacePrimary); background: var(--textPrimary); border-radius: 999px; box-shadow: var(--shadow-3); font-size: .88rem; font-weight: 650; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); } #bc-toast.show { opacity: 1; transform: translate(-50%,0); } #bc-note-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: min(420px, 60vh); overflow: auto; padding: 8px; color: var(--textPrimary); background: var(--surfacePrimary); border: 1px solid var(--borderSecondary); border-radius: 18px; box-shadow: var(--shadow-3); z-index: 100001; } #bc-note-results[hidden] { display: none !important; } .bc-note-results-title { padding: 8px 10px 6px; color: var(--textSecondary); font-size: .74rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } .bc-note-result { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; padding: 11px 10px; border: 0; border-radius: 12px; text-align: left; color: var(--textPrimary); background: transparent; cursor: pointer; } .bc-note-result:hover { background: var(--hover); } .bc-note-result-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--blue); background: var(--item-selected); border-radius: 11px; } .bc-note-result-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .bc-note-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--textPrimary); } .bc-note-result-copy > span { color: var(--textSecondary); font-size: .8rem; line-height: 1.35; } #listing .item.bc-search-reveal { border-color: var(--blue) !important; background: var(--item-selected) !important; box-shadow: 0 0 0 4px var(--ring), var(--shadow-3) !important; animation: bc-reveal-pulse 1.15s var(--ease) 2; } @keyframes bc-reveal-pulse { 50% { transform: translateY(-3px) scale(1.018); box-shadow: 0 0 0 8px transparent, var(--shadow-3); } } @media (max-width: 736px) { #bc-theme-toggle { position: fixed; right: max(8px, env(safe-area-inset-right)); top: max(9px, env(safe-area-inset-top)); z-index: 1400; } header .menu-button { position: fixed !important; left: max(8px, env(safe-area-inset-left)) !important; top: max(9px, env(safe-area-inset-top)) !important; margin: 0 !important; } header .search-button { position: fixed !important; right: calc(max(8px, env(safe-area-inset-right)) + 52px) !important; top: max(9px, env(safe-area-inset-top)) !important; margin: 0 !important; } /* Vue leaves this empty 2px shell mounted when nothing is selected. */ #file-selection:empty { display: none !important; } body:not(.bc-files-route) #dropdown { display: none !important; } body:not(.bc-files-route) #bc-note-results { display: none !important; } body:not(.bc-files-route) { padding-bottom: env(safe-area-inset-bottom) !important; } .bc-note-button { opacity: .32; width: 40px; height: 40px; top: 6px; right: 6px; } .bc-note-button.has-note { opacity: 1; } .bc-note-button:not(.has-note) { background: transparent; } #listing.mosaic .item div:last-of-type { padding-right: 16px; } .bc-notes-sheet { left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); transform: none; width: auto; max-height: calc(100dvh - 24px - env(safe-area-inset-top)); border-radius: 24px; animation-name: bc-sheet-up; } @keyframes bc-sheet-up { from { opacity: 0; transform: translateY(20px); } } .bc-notes-head { padding: 20px 18px 10px !important; } .bc-notes-body { padding: 8px 18px 14px; } #bc-notes-text { min-height: 180px; max-height: 42vh; } .bc-notes-actions { padding: 12px 18px 16px; } .bc-notes-actions button { flex: 1; padding-inline: 10px; } #bc-toast { bottom: calc(92px + env(safe-area-inset-bottom)); white-space: nowrap; } #bc-note-results { position: fixed; left: 8px; right: 8px; top: calc(66px + env(safe-area-inset-top)); max-height: calc(100dvh - 86px - env(safe-area-inset-top)); } } @media (max-width: 450px) { #listing.mosaic .item { width: calc(50% - .8em) !important; } header title { max-width: 42vw; } } /* notches / rounded display corners */ @supports (padding: max(0px)) { header { padding-left: max(.6em, env(safe-area-inset-left)) !important; padding-right: max(.6em, env(safe-area-inset-right)) !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } #listing.mosaic .item:hover { transform: none; } #listing.mosaic.gallery .item:hover img { transform: none; } } /* ====================================================================== BEIGECLOUD POLISH 2026 — app shell, responsive grid and mobile dock ====================================================================== */ /* Keep the interface quick and self-contained even if Google Fonts is slow. */ html, body { min-height: 100%; } body { letter-spacing: -.006em; } /* A calm, premium canvas instead of a flat block of colour. */ main { background: radial-gradient(900px 520px at 82% -18%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 68%), var(--background) !important; } /* Desktop app bar */ @media (min-width: 737px) { header { min-height: 68px !important; padding: 10px 18px !important; } header img { width: 42px !important; height: 42px !important; padding: 0 !important; border-radius: 12px; box-shadow: 0 6px 18px var(--ring); } #search { max-width: 520px !important; } #search #input { min-height: 46px; padding-inline: 12px !important; } nav { box-shadow: inset -1px 0 var(--borderSecondary); } /* More useful information density on large screens. */ #listing { padding: 20px 28px 36px !important; } #listing.mosaic { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px !important; margin: 0 !important; } #listing.mosaic > h2, #listing.mosaic > .header { grid-column: 1 / -1; } #listing.mosaic .item { width: auto !important; min-width: 0; margin: 0 !important; min-height: 116px; padding: 18px !important; } #listing.mosaic.gallery .item { min-height: 210px; } } /* Modern cards with a subtle top highlight. */ #listing .item { position: relative; overflow: hidden; isolation: isolate; } #listing .item::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(145deg, rgba(255,255,255,.055), transparent 46%); } #listing .item[data-dir="true"] i { filter: drop-shadow(0 7px 9px color-mix(in srgb, var(--blue) 24%, transparent)); } /* Gallery previews feel like a photo application. */ #listing.mosaic.gallery { grid-auto-flow: dense; } #listing.mosaic.gallery .item { aspect-ratio: 4 / 3; border-radius: 18px !important; background: var(--surfaceSecondary) !important; } #listing.mosaic.gallery .item div:first-of-type { height: 100% !important; } #listing.mosaic.gallery .item div:last-of-type { width: 100% !important; left: 0; right: 0; bottom: 0 !important; padding: 42px 14px 13px !important; } /* Filebrowser wraps all entries in one anonymous section; flatten only that section so the responsive grid can place each card independently. */ #listing.mosaic > h2 + div { display: contents !important; } /* Better responsive settings screens. */ .settings .card, .dashboard .card { min-width: 0; } @media (min-width: 1000px) { .dashboard .row { gap: 18px; align-items: stretch; } .dashboard .row > .card { flex: 1 1 0; } } /* ======================= NATIVE-LIKE PHONE UI ======================== */ @media (max-width: 736px) { body { padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important; background: var(--background) !important; } main { min-height: 100dvh; padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; } header { min-height: 58px; padding-top: max(7px, env(safe-area-inset-top)) !important; border-bottom-color: var(--dividerSecondary) !important; } /* Compact two-column library; one column on very narrow devices. */ #listing { padding: 10px 12px 18px !important; margin: 0 !important; } #listing.mosaic { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; padding-top: 12px !important; } #listing.mosaic > h2, #listing.mosaic > .header { grid-column: 1 / -1; } #listing.mosaic .item.header { display: none !important; } #listing.mosaic > h2 { font-size: 1rem !important; margin: 8px 2px -2px !important; } #listing.mosaic .item { width: auto !important; min-width: 0; min-height: 132px; margin: 0 !important; padding: 14px 15px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 8px !important; border-radius: 18px !important; touch-action: manipulation; } #listing.mosaic .item div:first-of-type { width: 100% !important; height: 46px !important; display: flex !important; align-items: center !important; } #listing.mosaic .item div:last-of-type { min-width: 0; width: 100% !important; padding-right: 0 !important; } #listing.mosaic .item i { font-size: 44px !important; } #listing .item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem !important; font-weight: 600 !important; } #listing .item .modified, #listing .item .size { font-size: .78rem !important; color: var(--textSecondary) !important; } /* Turn Filebrowser's hidden overflow menu into an always-visible app dock. */ #more { display: none !important; } #dropdown { position: fixed !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; z-index: 5000 !important; display: flex !important; align-items: center; justify-content: space-around; width: auto !important; min-height: 66px; padding: 7px 8px !important; border-radius: 23px !important; transform: none !important; transform-origin: center !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; background: var(--glass) !important; -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: 0 14px 45px rgba(18,12,7,.32), inset 0 1px rgba(255,255,255,.08) !important; } #dropdown > div { display: contents !important; } #dropdown .action { position: static !important; display: flex !important; flex: 0 0 48px; width: 48px !important; height: 48px !important; min-width: 48px; min-height: 48px; margin: 0 !important; padding: 0 !important; align-items: center; justify-content: center; border-radius: 16px !important; background: transparent !important; box-shadow: none !important; } #dropdown .action i { font-size: 24px !important; color: var(--textSecondary) !important; } #dropdown .action span:not(.counter) { display: none !important; } #dropdown #upload-button { position: static !important; flex-basis: 58px; width: 58px !important; height: 58px !important; margin-top: -23px !important; border-radius: 19px !important; background: linear-gradient(145deg, var(--dark-blue), var(--blue)) !important; border: 4px solid var(--background) !important; box-shadow: 0 10px 24px var(--ring), inset 0 1px rgba(255,255,255,.24) !important; } #dropdown #upload-button i { color: var(--on-accent) !important; font-size: 28px !important; } #dropdown #upload-button span:not(.counter) { display: none !important; } #dropdown #upload-button:active { transform: translateY(2px) scale(.94); } /* Download is only meaningful after selecting files; avoid a dead-looking dock. */ #dropdown .action[aria-disabled="true"] { opacity: .34; } /* Mobile gallery: full-width cinematic cards. */ #listing.mosaic.gallery { grid-template-columns: 1fr !important; } #listing.mosaic.gallery .item { width: 100% !important; min-height: 0; aspect-ratio: 4 / 3; } /* Settings become a clean single-column sheet. */ .dashboard { padding: 12px !important; } .dashboard .row { display: block !important; } .dashboard .card { width: 100% !important; margin: 0 0 12px !important; border-radius: 20px !important; } .dashboard #tabs, #tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #tabs::-webkit-scrollbar { display: none; } #login form { width: min(390px, calc(100vw - 28px)) !important; padding: 30px 22px calc(24px + env(safe-area-inset-bottom)) !important; } } @media (max-width: 359px) { #listing.mosaic { grid-template-columns: 1fr; } #dropdown { left: 6px !important; right: 6px !important; } #dropdown .action { flex-basis: 44px; width: 44px !important; } } /* `color-mix()` is enhancement only; older Safari gets clean fallbacks. */ @supports not (color: color-mix(in srgb, white, black)) { main { background: var(--background) !important; } #listing .item[data-dir="true"] i { filter: none; } }