:root{ /* Apple-ish (SF) Light default with automatic dark mode */ --bg: #f5f5f7; --bg2:#ffffff; --panel:#ffffff; --panel2:#fbfbfd; --line: rgba(0,0,0,.10); --line2: rgba(0,0,0,.06); --text:#1d1d1f; --muted:#6e6e73; --muted2:rgba(29,29,31,.55); --accent:#0071e3; --accent2:#34c759; --danger:#ff3b30; --r10:10px; --r12:12px; --r16:16px; /* Apple.com nutzt kaum Schatten – eher feine Linien */ --shadow: none; --shadow2: none; /* Grid sizing (Zoom) */ --tileMinW: 230px; --tileH: 270px; } /* Zoom presets (applied via ) */ body.zoom-sm{ --tileMinW: 200px; --tileH: 240px; } body.zoom-md{ --tileMinW: 230px; --tileH: 270px; } body.zoom-lg{ --tileMinW: 280px; --tileH: 320px; } /* System dark mode (only when user hasn't chosen a theme) */ @media (prefers-color-scheme: dark){ html:not([data-theme]){ --bg:#000000 !important; --bg2:#000000 !important; --panel:#1c1c1e !important; --panel2:#2c2c2e !important; --line: rgba(255,255,255,.14) !important; --line2: rgba(255,255,255,.10) !important; --text:#ffffff !important; --muted: rgba(235,235,245,.65) !important; --muted2: rgba(235,235,245,.45) !important; --accent:#0a84ff !important; --accent2:#34c759 !important; --danger:#ff453a !important; --shadow: none !important; --shadow2: none !important; } } /* Manual theme override (toggle in UI) */ html[data-theme="dark"]{ --bg:#000000 !important; --bg2:#000000 !important; --panel:#1c1c1e !important; --panel2:#2c2c2e !important; --line: rgba(255,255,255,.14) !important; --line2: rgba(255,255,255,.10) !important; --text:#ffffff !important; --muted: rgba(235,235,245,.65) !important; --muted2: rgba(235,235,245,.45) !important; --accent:#0a84ff !important; --accent2:#34c759 !important; --danger:#ff453a !important; --shadow: none !important; --shadow2: none !important; } *{box-sizing:border-box} html,body{height:100%} /* Background should stay fixed even if pages use an inner scroll container. Using a fixed ::before layer is more robust than background-attachment: fixed (which can be ignored in certain layout/overflow setups). */ body{ margin:0; background: none; color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial; } body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: var(--bg_pattern, none), linear-gradient(180deg, var(--bg), var(--bg2)); background-repeat: var(--bg_pattern_repeat, repeat), no-repeat; background-size: auto, cover; } a{color:inherit; text-decoration:none} /* ========================= Admin / Page sections ========================= */ .card{ max-width: 1500px; margin: 14px auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 22px; box-shadow: var(--shadow2); padding: 16px; } .sectionTitle{margin:0 0 10px 0; font-size:18px; font-weight:850; letter-spacing:.2px} .smallMuted, .muted{color: var(--muted); font-size:12px} .notice{ margin: 12px auto; max-width: 1500px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(52,199,89,.28); background: rgba(52,199,89,.10); font-size: 13px; font-weight: 650; } .tabs{display:flex; gap:10px; flex-wrap:wrap} .tab{ display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; border:1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 750; font-size: 13px; } .tab:hover{color: var(--text); box-shadow: var(--shadow2)} .badge{ display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); font-size: 12px; font-weight: 750; } .badge .ico{display:inline-block; vertical-align:middle; opacity:.9} .badge.green{border-color: rgba(52,199,89,.28); background: rgba(52,199,89,.10)} .table{width:100%; border-collapse: collapse} .table th, .table td{padding: 12px 12px; border-bottom: 1px solid var(--line2); vertical-align: top} .table th{font-size:12px; text-align:left; color: var(--muted); font-weight: 750; letter-spacing:.2px} .highlightRow{ outline: 2px solid rgba(52,199,89,.45); outline-offset: -2px; } .adminSplit{ display:grid; grid-template-columns: 1fr 420px; gap: 14px; align-items:start; } @media (max-width: 1100px){ .adminSplit{grid-template-columns: 1fr;} } .adminUserCard{ border: 1px solid var(--line2); background: var(--panel2); border-radius: 18px; padding: 12px; display:flex; flex-direction:column; gap:10px; } .adminUserTop{display:flex; align-items:center; justify-content:space-between; gap:10px} .adminUserName{font-weight:850} .adminInline{display:flex; gap:10px; flex-wrap:wrap; align-items:center} .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px} /* Tooltip (User tile hover) */ .tileTooltip{ position:absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 10px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(29,29,31,.92); color:#fff; box-shadow: var(--shadow); opacity: 0; transform: translateY(6px); pointer-events:none; transition: opacity .12s ease, transform .12s ease; } @media (prefers-color-scheme: light){ html:not([data-theme="dark"]) .tileTooltip{ background: rgba(255,255,255,.92); color: var(--text); } } .fileItem:hover .tileTooltip{opacity: 1; transform: translateY(0)} /* Fixed Tooltip (folgt der Maus, rechts-oben) */ .hoverTooltipFixed{ position: fixed; z-index: 9999; max-width: 340px; padding: 10px 10px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(29,29,31,.92); color: #fff; box-shadow: var(--shadow); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .12s ease, transform .12s ease; } .hoverTooltipFixed.isOpen{ opacity: 1; transform: translateY(0); } @media (prefers-color-scheme: light){ html:not([data-theme="dark"]) .hoverTooltipFixed{ background: rgba(255,255,255,.96); color: var(--text); } } /* ========================= Topbar ========================= */ header{ position: sticky; top: 0; z-index: 50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding: calc(14px * var(--uiScale, 1)) calc(18px * var(--uiScale, 1)); border-bottom: 1px solid var(--line2); /* Apple-website style: pure white header, no dark tint */ background: var(--panel); backdrop-filter: none; } .headerLeft{display:flex; align-items:center; gap:14px; min-width:0} .brand{display:flex; align-items:center; gap:10px} .brandLogo{height: calc(28px * var(--uiScale, 1)); width:auto; display:block} .headerTitle{min-width:0} .headerTitle strong{display:block; font-size:14px; font-weight:700; line-height:1.2} .breadcrumb{display:flex; gap:8px; flex-wrap:wrap; font-size:12px; color: var(--muted); margin-top:3px} .breadcrumb a{color: var(--muted); text-decoration:none} .breadcrumb a:hover{color: var(--text)} .headerActions{display:flex; gap:10px; align-items:center; flex-wrap:wrap} /* Header UI controls (Zoom + Theme) */ .headerUi{ display:flex; align-items:center; gap:10px; padding: 6px 10px; border: 1px solid var(--line); background: var(--panel2); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.06); backdrop-filter: blur(12px); } .headerUi .zoomControl{display:flex; align-items:center; gap:8px} .headerUi .zoomRange{width: 150px} .headerUi .zoomValue{font-size:12px; color: var(--muted); min-width:40px; text-align:right} .headerUi .themeControl{display:flex; align-items:center;} /* Mobile iPhone: header stacks and stays readable */ @media (max-width: 520px){ header{padding:12px 12px;gap:10px} .headerLeft{gap:10px} .brandLogo{height: calc(24px * var(--uiScale, 1))} .headerActions{width:100%;justify-content:flex-start} .breadcrumb{display:none} } /* ========================= Buttons (Apple-ish) ========================= */ .btn, button{ appearance:none; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 9px 12px; border-radius: 999px; cursor:pointer; font-weight: 650; font-size: 13px; display:inline-flex; align-items:center; gap:8px; transition: transform .10s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; } .small{font-size:12px; padding:7px 10px} .ghost{background: var(--panel2)} .btn:hover, button:hover{box-shadow: var(--shadow2)} .btn:active, button:active{transform: translateY(1px)} .btnPrimary{ border-color: rgba(0,113,227,.35); background: rgba(0,113,227,.10); color: var(--text); } @media (prefers-color-scheme: light){ html:not([data-theme="dark"]) .btnPrimary{ color: var(--accent); background: rgba(0,113,227,.10); } } .btn.danger, button.danger{ border-color: rgba(255,59,48,.35); background: rgba(255,59,48,.10); } /* Inputs */ input, select, textarea{ width:100%; border-radius: 12px; border:1px solid var(--line); background: var(--panel); color: var(--text); padding: 10px 12px; outline:none; } input:focus, select:focus, textarea:focus{ border-color: rgba(0,113,227,.55); box-shadow: 0 0 0 4px rgba(0,113,227,.16); } select{cursor:pointer} /* Layout */ section{max-width: 1500px; margin: 0 auto; padding: 18px} @media (max-width: 900px){ section{padding: 12px} } .createFolderSection h2{ margin: 6px 0 12px 0; font-size: 18px; letter-spacing: .2px; } .createFolderBar{ display:flex; gap:10px; align-items:center; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r16); padding: 12px; box-shadow: var(--shadow2); } .createFolderBar input{flex:1} .dndHelp{ margin-top: 12px; color: var(--muted); font-size: 13px; } /* ========================= File grid ========================= */ .fileGrid{ margin-top: 14px; display:grid; grid-template-columns: repeat(auto-fill, minmax(var(--tileMinW), 1fr)); gap: 14px; } .fileItem{ background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; overflow:hidden; color:inherit; position:relative; box-shadow: none; transition: border-color .12s ease, background .12s ease; height: var(--tileH); display:flex; flex-direction:column; } .fileItem:hover{ border-color: rgba(0,113,227,.22); } /* Drag & Drop highlight (Folder + Tiles) */ .fileItem.dropHover{ border-color: rgba(0,113,227,.55) !important; box-shadow: 0 0 0 4px rgba(0,113,227,.16); transform: translateY(-1px); } .filePreview{ flex: 1 1 auto; background: rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; overflow:hidden; } /* Ordner-Kacheln: großes Icon + Name darunter */ .folderPreview{ /* Blue outline folder on white background (better contrast than black-on-black) */ background: var(--panel); color: var(--accent); border: 1px solid var(--line); } .folderIcon{ display:flex; align-items:center; justify-content:center; } .folderName{ padding-top: 10px; text-align:center; font-size: 13px; font-weight: 800; } .filePreview img, .filePreview video{ width:100%; height:100%; object-fit:cover; display:block; } /* Wenn ein Vorschau-Video abgespielt wird, darf die Kachel auf die Video-Größe wachsen */ .fileItem.isPlaying{ height:auto; } .fileItem.isPlaying .filePreview video{ height:auto; object-fit:contain; } .filePreview audio{width: 92%} .filePlaceholder{color:#fff; font-weight:800; letter-spacing:1px; font-size:12px} .fileName{ padding: 12px 12px 0 12px; margin: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .fileActions{ padding: 12px; display:flex; flex-wrap:wrap; gap: 10px; } .downloadBtn, .reviewBtn, .copyLinkBtn, .deleteBtn{ border-radius: 999px; padding: 8px 10px; font-size: 12px; font-weight: 650; border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor:pointer; } .reviewBtn{ border-color: rgba(0,113,227,.28); background: rgba(0,113,227,.10); } .copyLinkBtn{ border-color: rgba(0,0,0,.10); } .deleteBtn{ border-color: rgba(255,59,48,.25); background: rgba(255,59,48,.10); } html[data-theme="dark"] .downloadBtn, html[data-theme="dark"] .reviewBtn, html[data-theme="dark"] .copyLinkBtn, html[data-theme="dark"] .deleteBtn{ background: rgba(255,255,255,.06); } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .downloadBtn, html:not([data-theme="light"]) .reviewBtn, html:not([data-theme="light"]) .copyLinkBtn, html:not([data-theme="light"]) .deleteBtn{ background: rgba(255,255,255,.06); } } .moveRow{padding: 0 12px 14px 12px} .moveLabel{display:block; font-size:12px; color: var(--muted); margin-bottom:6px} .moveSelect{width:100%} /* Folder tiles */ .folderTile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 8px; padding: 18px; text-align:center; } .folderGlyph{font-size: 40px; line-height:1} .folderTitle{font-weight: 780; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%} .folderHint{font-size: 12px; color: var(--muted); margin-top: 0} .rootTile .folderGlyph{filter: grayscale(.1)} /* Delete X in folder tiles (centered) */ .folderDeleteBtn, .adminFolderDeleteBtn{ position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.65); cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; line-height:1; } html[data-theme="dark"] .folderDeleteBtn, html[data-theme="dark"] .adminFolderDeleteBtn{ background: rgba(255,255,255,.10); } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .folderDeleteBtn, html:not([data-theme="light"]) .adminFolderDeleteBtn{ background: rgba(255,255,255,.10); } } /* Upload tile */ .uploadTile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 8px; padding: 18px; cursor:pointer; border-style: dashed; border-color: rgba(0,113,227,.35); background: linear-gradient(180deg, rgba(0,113,227,.07), transparent 55%), var(--panel); } .uploadPlusBtn{ border:0; background: transparent; box-shadow:none; padding:0; } .uploadPlus{ width: 54px; height: 54px; border-radius: 18px; display:flex; align-items:center; justify-content:center; font-size: 32px; font-weight: 700; color: var(--accent); background: rgba(0,113,227,.12); border: 1px solid rgba(0,113,227,.18); } .uploadTileText{font-weight: 750} .uploadTileSub{font-size: 12px; color: var(--muted)} /* Upload progress tile */ .uploadProgressTile{padding: 12px} .uploadTopRow{display:flex; justify-content:flex-end} .uploadCancelBtn{ width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); font-size: 18px; line-height: 0; } .uploadRingWrap{display:grid; place-items:center; margin-top: 6px} .ring{width: 54px; height: 54px} .ringTrack{fill:none; stroke: rgba(0,0,0,.10); stroke-width: 3} .ringProgress{fill:none; stroke: var(--accent); stroke-width: 3; stroke-linecap:round; transform: rotate(-90deg); transform-origin: 50% 50%} html[data-theme="dark"] .ringTrack{ stroke: rgba(255,255,255,.12); } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .ringTrack{ stroke: rgba(255,255,255,.12); } } .ringLabel{position:absolute; font-size: 12px; font-weight: 700} .uploadMeta{margin-top: 10px; text-align:center} .uploadState{font-weight: 700; font-size: 12px} .uploadSpeed{font-size: 12px; color: var(--muted); margin-top: 4px} .uploadFileName{margin-top: 10px; font-size: 12px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .uploadDone{border-color: rgba(52,199,89,.28)} .uploadError{border-color: rgba(255,59,48,.28)} /* Review badge */ .reviewBadgeRow{padding: 8px 12px 0 12px} .reviewBadge{ display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(0,113,227,.25); background: rgba(0,113,227,.10); font-size: 12px; font-weight: 750; color: var(--accent); } html[data-theme="dark"] .reviewBadge{ color: rgba(235,235,245,.85); } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .reviewBadge{ color: rgba(235,235,245,.85); } } /* ========================= Modal ========================= */ .modalBackdrop{ position: fixed; inset: 0; display:none; align-items:center; justify-content:center; padding: 16px; background: rgba(0,0,0,.35); z-index: 100; } .modalBackdrop.open{display:flex} .modalCard{ width: min(560px, 94vw); background: var(--panel); border: 1px solid var(--line2); border-radius: 22px; box-shadow: var(--shadow); overflow:hidden; } .modalHeader{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom: 1px solid var(--line2); } .modalHeader h3{margin:0; font-size: 16px; font-weight: 800} .modalClose{ width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); font-size: 20px; line-height: 0; } .modalBody{padding: 14px 16px} .modalFooter{ padding: 14px 16px; display:flex; gap:10px; justify-content:flex-end; border-top: 1px solid var(--line2); } .radioRow{ display:flex; gap:12px; align-items:flex-start; padding: 12px; border-radius: 16px; border: 1px solid var(--line2); background: var(--panel2); margin-bottom: 10px; } .radioRow input{width:auto; margin-top: 3px} .radioRow strong{display:block; font-size: 13px} .radioRow small{display:block; color: var(--muted); margin-top: 3px} .reviewPasswordWrap{margin-top: 12px} .fieldLabel{display:block; font-size:12px; font-weight:700; margin-bottom: 6px} .fieldHint{font-size:12px; color: var(--muted); margin-top: 6px; line-height:1.35} /* ========================= Toast ========================= */ .toast{ position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(10px); background: rgba(29,29,31,.92); color: #fff; padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow2); opacity: 0; pointer-events:none; transition: opacity .15s ease, transform .15s ease; font-size: 13px; font-weight: 650; } .toast.show{opacity: 1; transform: translateX(-50%) translateY(0)} /* ========================= Login ========================= */ .topLogoBar{display:flex; justify-content:center; padding: 28px 0 0 0} .login-box{ width: min(420px, 94vw); margin: 18px auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 22px; box-shadow: var(--shadow); padding: 18px; } .login-box h2{margin:0 0 12px 0; font-size:18px; font-weight:800} .login-box form{display:flex; flex-direction:column; gap:10px} .login-box p{margin:0; font-size:13px; color: var(--muted)} /* ========================= Admin – kleine UI-Polish ========================= */ .storageChart{display:flex; flex-direction:column; gap:10px; margin-top:14px} .storageRow{display:grid; grid-template-columns: minmax(180px, 260px) 1fr auto; gap:12px; align-items:center} .storageLabel{display:flex; flex-direction:column; gap:2px; min-width:0} .storageLabel b{font-size:13px} .storageLabel .smallMuted{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .storageBar{height:10px; border-radius:999px; background: rgba(0,0,0,.08); border: 1px solid var(--line2); overflow:hidden} .storageFill{height:100%; border-radius:999px; background: var(--accent)} .storageVal{font-size:12px; font-weight:650; white-space:nowrap} html[data-theme="dark"] .storageBar{background: rgba(255,255,255,.10);} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .storageBar{background: rgba(255,255,255,.10);} } /* ===== File Tools Bar ===== */ .fileToolsBar{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 6px; border:1px solid var(--line2); border-radius:16px; background: var(--panel2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin-bottom:10px; } .fileToolsLeft{display:flex; gap:10px; align-items:center; flex-wrap:wrap;} .fileSearch{ min-width:210px; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background: var(--panel); outline:none; font-size:13px; } .fileSelect{ padding:8px 10px; border-radius:12px; border:1px solid var(--line); background: var(--panel); font-size:13px; } .btnSmall{ padding:8px 10px; border-radius:12px; border:1px solid var(--line); background: var(--panel); cursor:pointer; font-size:13px; } .btnSmall:hover{filter:brightness(0.98)} .btnSmall.danger{border-color:rgba(220,50,50,.35);} .zoomControl{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:12px; background: var(--panel); } .zoomLabel{font-size:12px; font-weight:700; color: var(--muted)} .zoomRange{width:130px; accent-color: var(--accent)} .zoomValue{min-width:44px; text-align:right; font-size:12px; font-weight:750; color: var(--muted)} .themeControl{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:12px; background: var(--panel); } .themeLabel{font-size:12px; font-weight:700; color: var(--muted)} /* Apple-ish switch */ .switch{position:relative; display:inline-block; width:38px; height:22px;} .switch input{opacity:0; width:0; height:0;} .switch .slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.12); border:1px solid var(--line); transition: .18s; border-radius:999px; } .switch .slider:before{ position:absolute; content:""; height:18px; width:18px; left:1.5px; top:1.5px; background: var(--panel); border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.18); transition: .18s; } .switch input:checked + .slider{ background: rgba(0,113,227,.55); } .switch input:checked + .slider:before{ transform: translateX(16px); } html[data-theme="dark"] .fileToolsBar{ border-color: var(--line2); background: var(--panel2); } @media (prefers-color-scheme: dark){ html:not([data-theme]) .fileToolsBar{ border-color: rgba(255,255,255,.10); background: rgba(20,22,28,.62); } } html[data-theme="dark"] .fileSearch, html[data-theme="dark"] .fileSelect, html[data-theme="dark"] .btnSmall, html[data-theme="dark"] .zoomControl, html[data-theme="dark"] .themeControl{ background: var(--panel2); border-color: var(--line2); color: var(--text); } @media (prefers-color-scheme: dark){ html:not([data-theme]) .fileSearch, html:not([data-theme]) .fileSelect, html:not([data-theme]) .btnSmall, html:not([data-theme]) .zoomControl, html:not([data-theme]) .themeControl{ background: var(--panel2); border-color: rgba(255,255,255,.18); color: #fff; } } html[data-theme="dark"] .switch .slider{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.10); } .bulkBar{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.92); margin:10px 0 14px 0; } .bulkRight{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;} .selectOverlay{ position:absolute; top:10px; left:10px; width:34px; height:34px; display:none; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.88); border:1px solid var(--line); z-index:3; } .selectBox{width:18px; height:18px;} body.isSelecting .fileActions{pointer-events:none; opacity:.25} /* Stronger folder drop highlight */ .dropTarget.dropHover{ outline:3px solid rgba(20,110,255,.55); box-shadow:0 12px 30px rgba(20,110,255,.18); transform: translateY(-2px); } /* Video thumb */ .videoThumb{display:block; position:relative; width:100%; height:100%;} .videoThumb img{width:100%; height:100%; object-fit:cover; border-radius:14px;} .videoPlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff; text-shadow:0 6px 18px rgba(0,0,0,.45); } /* ========================== View Toggle + List View ========================== */ .viewToggle{ display:flex; gap:6px; padding:4px; border:1px solid var(--line2); border-radius:999px; background: var(--panel2); backdrop-filter: blur(8px); } .viewToggle .viewBtn{ border:0; background: transparent; padding:5px 9px; border-radius:999px; font-weight:650; cursor:pointer; color: var(--text); opacity:.7; font-size:12px; } .viewToggle .viewBtn.isActive{ background: rgba(0,0,0,.08); opacity:1; } body.isListView .zoomControl{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:12px; background: var(--panel); } .listView{ border:1px solid var(--line2); border-radius:16px; background: var(--panel); overflow:hidden; } .listHeader{ padding:10px 12px; border-bottom:1px solid var(--line2); } .listTableWrap{ overflow:auto; } .listTable{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; } .listTable th, .listTable td{ padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.06); text-align:left; vertical-align:middle; } .listTable th{ position:sticky; top:0; background: rgba(255,255,255,.92); z-index:1; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: rgba(0,0,0,.6); } .listTable .colSel{ width:34px; } .listTable .colSize{ white-space:nowrap; width:110px; } .listTable .colDate{ white-space:nowrap; width:180px; } .listTable .colReview{ width:80px; } .listTable .colActions{ width:260px; white-space:nowrap; } .btnTiny{ display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background: var(--panel); font-size:12px; font-weight:650; text-decoration:none; cursor:pointer; margin-right:6px; } .btnTiny.danger{ border-color: rgba(200,0,0,.25); color:#b00000; } /* In list view we only hide the *file* grid, folders should stay visible */ body.isListView #fileGrid{ display:none; } /* ========================== Inline expanded video (grid) ========================== */ .fileItem.isExpanded{ grid-column: span 2; height: auto !important; } @media (max-width: 640px){ .fileItem.isExpanded{ grid-column: span 1; } } .inlineVideoWrap{ margin-top:10px; position:relative; } .inlineVideoWrap .inlineVideo{ width:100%; max-height:520px; border-radius:14px; background: var(--panel2); } .inlineVideoWrap .inlineClose{ position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.55); color:#fff; font-size:18px; cursor:pointer; } /* ========================= Dark mode: make all surfaces + buttons truly black (header, toolbars, list panels, small controls) ========================= */ html[data-theme="dark"] header{ /* header should blend into the pure black background (iOS-like) */ background: var(--bg) !important; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); } @media (prefers-color-scheme: dark){ html:not([data-theme]) header{ background: var(--bg); color:#fff; border-bottom: 1px solid rgba(255,255,255,.08); } } html[data-theme="dark"] .headerUi{ background: rgba(0,0,0,.82); border-color: rgba(255,255,255,.18); box-shadow: none; } html[data-theme="dark"] .fileToolsBar{ background: rgba(0,0,0,.78); border-color: rgba(255,255,255,.18); } html[data-theme="dark"] .bulkBar, html[data-theme="dark"] .listView{ background: var(--panel2); border-color: rgba(255,255,255,.18); } html[data-theme="dark"] .btnTiny{ background: var(--panel2); color:#fff; border-color: rgba(255,255,255,.18); } html[data-theme="dark"] .btnTiny.danger{ color:#fff; } html[data-theme="dark"] .fileSearch, html[data-theme="dark"] .fileSelect, html[data-theme="dark"] .btnSmall, html[data-theme="dark"] .zoomControl, html[data-theme="dark"] .themeControl{ background: var(--panel2); color:#fff; border-color: rgba(255,255,255,.18); } html[data-theme="dark"] .folderDeleteBtn, html[data-theme="dark"] .adminFolderDeleteBtn{ background: var(--panel2); color:#fff; border-color: rgba(255,255,255,.18); } html[data-theme="dark"] .downloadBtn, html[data-theme="dark"] .reviewBtn, html[data-theme="dark"] .copyLinkBtn, html[data-theme="dark"] .deleteBtn{ background: var(--panel2); color:#fff; border-color: rgba(255,255,255,.18); } html[data-theme="dark"] .btnPrimary{ background: var(--panel2); color:#fff; border-color: rgba(255,255,255,.18); } html[data-theme="dark"] .btn.danger, html[data-theme="dark"] button.danger{ background: var(--panel2); color:#fff; border-color: rgba(255,59,48,.55); } /* Switch knob: avoid white "blob" in dark mode */ html[data-theme="dark"] .switch .slider{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); } html[data-theme="dark"] .switch .slider:before{ background: var(--panel2); border:1px solid rgba(255,255,255,.25); box-shadow:none; } @media (prefers-color-scheme: dark){ html:not([data-theme]) .headerUi{ background: rgba(0,0,0,.82); border-color: rgba(255,255,255,.18); box-shadow: none; } html:not([data-theme]) .fileToolsBar{ background: rgba(0,0,0,.78); border-color: rgba(255,255,255,.18); } html:not([data-theme]) .bulkBar, html:not([data-theme]) .listView{ background: var(--panel2); border-color: rgba(255,255,255,.18); } html:not([data-theme]) .btnTiny{ background: var(--panel2); color:#fff; border-color: rgba(255,255,255,.18); } html:not([data-theme]) .btnTiny.danger{ color:#fff; } html:not([data-theme]) .folderDeleteBtn, html:not([data-theme]) .adminFolderDeleteBtn{ background: var(--panel2); color:#fff; border-color: rgba(255,255,255,.18); } html:not([data-theme]) .downloadBtn, html:not([data-theme]) .reviewBtn, html:not([data-theme]) .copyLinkBtn, html:not([data-theme]) .deleteBtn{ background: var(--panel2); color:#fff; border-color: rgba(255,255,255,.18); } html:not([data-theme]) .btnPrimary{ background: var(--panel2); color:#fff; border-color: rgba(255,255,255,.18); } html:not([data-theme]) .btn.danger, html:not([data-theme]) button.danger{ background: var(--panel2); color:#fff; border-color: rgba(255,59,48,.55); } html:not([data-theme]) .switch .slider{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); } html:not([data-theme]) .switch .slider:before{ background: var(--panel2); border:1px solid rgba(255,255,255,.25); box-shadow:none; } } /* iOS-like dark polish */ .viewToggle .viewBtn.isActive{ background: var(--panel); border: 1px solid var(--line2); } .viewToggle .viewBtn{ transition: background .12s ease, opacity .12s ease; } /* List view: keep controls consistent */ body.isListView .zoomControl{ background: var(--panel2); border-color: var(--line2); } /* Smaller tool buttons slightly raised vs cards */ .btnSmall{ background: var(--panel2); } /* === Enhancements: info panel + load more + pagination === */ .pageHidden{ display:none !important; } .loadMoreWrap{ display:flex; justify-content:center; margin: 10px 0 24px; } .infoPanelBackdrop{ position:fixed; inset:0; background: rgba(0,0,0,.18); opacity:0; pointer-events:none; transition: opacity .18s ease; z-index: 90; } .infoPanelBackdrop.open{ opacity:1; pointer-events:auto; } .infoPanel{ position:fixed; top:0; right:0; width:min(420px, 92vw); height:100vh; background: var(--card); border-left: 1px solid var(--border); transform: translateX(102%); transition: transform .18s ease; z-index: 100; display:flex; flex-direction:column; box-shadow: 0 30px 80px rgba(0,0,0,.18); } .infoPanel.open{ transform: translateX(0); } .infoPanelHeader{ display:flex; align-items:center; justify-content:space-between; padding: 14px 14px; border-bottom: 1px solid var(--border); } .infoTitle{ font-weight:800; font-size: 16px; letter-spacing: .2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 320px; } .infoClose{ width:34px;height:34px; border-radius: 999px; border:1px solid var(--border); background: var(--glass); cursor:pointer; font-size: 20px; line-height: 30px; } .infoBody{ padding: 14px; overflow:auto; } .infoPreview{ margin-bottom: 12px; } .infoMeta{ display:grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0 14px; } .infoActions{ display:flex; flex-wrap:wrap; gap: 10px; }