copilot-swe-agent[bot]
feat: TMDB access token, robots.txt, refreshThumbnails, bot fixes, FA icons, SEO meta, sidebar credit, Android file picker fix
79bb8f3 unverified | /* ========================================================= | |
| TG Drive – Modern UI v3 | |
| Glassmorphism · Dark/Light · Grid/List · Skeleton Loaders | |
| ========================================================= */ | |
| /* ── CSS Variables ── */ | |
| :root { | |
| --font: 'Inter', 'Roboto', sans-serif; | |
| /* Backgrounds */ | |
| --bg-app: #f0f2fb; | |
| --bg-sidebar: #ffffff; | |
| --bg-surface: #ffffff; | |
| --bg-hover: rgba(99, 102, 241, 0.07); | |
| --bg-active: rgba(99, 102, 241, 0.14); | |
| --bg-input: #eef0f9; | |
| --bg-overlay: rgba(0, 0, 0, 0.45); | |
| /* Accents */ | |
| --accent: #6366f1; | |
| --accent-2: #ec4899; | |
| --accent-grad: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); | |
| --sidebar-grad: linear-gradient(160deg, #4f46e5 0%, #7c3aed 100%); | |
| /* Text */ | |
| --text-primary: #1e1b4b; | |
| --text-secondary: #6b7280; | |
| --text-muted: #9ca3af; | |
| --text-on-accent: #ffffff; | |
| /* Borders & Shadows */ | |
| --border: rgba(0, 0, 0, 0.08); | |
| --border-strong: rgba(0, 0, 0, 0.16); | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); | |
| --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.10); | |
| --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.14); | |
| --shadow-acc: 0 6px 24px rgba(99, 102, 241, 0.28); | |
| /* Glass */ | |
| --glass-bg: rgba(255, 255, 255, 0.72); | |
| --glass-border: rgba(255, 255, 255, 0.55); | |
| /* Skeleton */ | |
| --sk-base: #e5e7f4; | |
| --sk-shine: #f5f5ff; | |
| /* Layout */ | |
| --sidebar-w: 260px; | |
| --header-h: 64px; | |
| --radius-sm: 8px; | |
| --radius-md: 14px; | |
| --radius-lg: 22px; | |
| --radius-xl: 32px; | |
| --transition: 0.25s ease; | |
| --shimmer-w: 400px; | |
| } | |
| body.dark-mode { | |
| --bg-app: #070714; | |
| --bg-sidebar: #0e0e20; | |
| --bg-surface: #12122a; | |
| --bg-hover: rgba(99, 102, 241, 0.12); | |
| --bg-active: rgba(99, 102, 241, 0.22); | |
| --bg-input: #1a1a35; | |
| --bg-overlay: rgba(0, 0, 0, 0.60); | |
| --text-primary: #e2e1f5; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| --border: rgba(255, 255, 255, 0.07); | |
| --border-strong: rgba(255, 255, 255, 0.14); | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); | |
| --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45); | |
| --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); | |
| --shadow-acc: 0 6px 24px rgba(99, 102, 241, 0.40); | |
| --glass-bg: rgba(18, 18, 42, 0.80); | |
| --glass-border: rgba(255, 255, 255, 0.07); | |
| --sk-base: #181830; | |
| --sk-shine: #21213d; | |
| } | |
| /* ── Reset ── */ | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: var(--font); | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| /* ── Body & Container ── */ | |
| body { | |
| background: var(--bg-app); | |
| color: var(--text-primary); | |
| transition: background var(--transition), color var(--transition); | |
| overflow: hidden; | |
| } | |
| .container { | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: var(--sidebar-w) 1fr; | |
| transition: grid-template-columns var(--transition); | |
| overflow: hidden; | |
| } | |
| .container.sidebar-collapsed { | |
| grid-template-columns: 0px 1fr; | |
| } | |
| .container.sidebar-collapsed .sidebar { | |
| padding: 0; | |
| overflow: hidden; | |
| width: 0; | |
| border: none; | |
| } | |
| /* ── Top Progress Bar ── */ | |
| #top-progress-bar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 3px; | |
| width: 0%; | |
| background: var(--accent-grad); | |
| z-index: 9999; | |
| opacity: 0; | |
| border-radius: 0 3px 3px 0; | |
| pointer-events: none; | |
| } | |
| /* ── Rotate Utility ── */ | |
| .rotate-90 { transform: rotate(90deg); } | |
| /* ========================================================= | |
| SIDEBAR | |
| ========================================================= */ | |
| .sidebar { | |
| width: var(--sidebar-w); | |
| height: 100vh; | |
| background: var(--bg-sidebar); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| padding: 0; | |
| overflow: hidden; | |
| transition: width var(--transition), padding var(--transition), border var(--transition); | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .sidebar-header { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| padding: 20px 20px 16px; | |
| background: var(--sidebar-grad); | |
| flex-shrink: 0; | |
| } | |
| .sidebar-header img { | |
| width: 32px; | |
| height: 32px; | |
| margin-right: 10px; | |
| filter: brightness(10); | |
| flex-shrink: 0; | |
| } | |
| .sidebar-header span { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: #fff; | |
| letter-spacing: -0.01em; | |
| } | |
| /* New Button */ | |
| .new-button { | |
| margin: 16px 20px 0; | |
| width: calc(100% - 40px); | |
| padding: 11px 18px; | |
| background: var(--bg-surface); | |
| border: 1.5px solid var(--border-strong); | |
| border-radius: var(--radius-lg); | |
| display: flex; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| box-shadow: var(--shadow-sm); | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| flex-shrink: 0; | |
| } | |
| .new-button:hover { | |
| background: var(--bg-hover); | |
| border-color: var(--accent); | |
| box-shadow: var(--shadow-acc); | |
| transform: translateY(-1px); | |
| } | |
| .new-button img { | |
| width: 20px; | |
| height: 20px; | |
| margin-right: 10px; | |
| } | |
| /* New Upload Dropdown */ | |
| .new-upload { | |
| position: fixed; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid var(--glass-border); | |
| padding: 6px 0; | |
| box-shadow: var(--shadow-md); | |
| border-radius: var(--radius-md); | |
| width: 220px; | |
| top: 40px; | |
| left: 20px; | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.2s, top 0.2s; | |
| } | |
| .new-upload div { | |
| padding: 10px 18px; | |
| display: flex; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: background var(--transition); | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| gap: 10px; | |
| } | |
| .new-upload div:hover { background: var(--bg-hover); } | |
| .new-upload div img { | |
| height: 18px; | |
| width: 18px; | |
| flex-shrink: 0; | |
| } | |
| .new-upload hr { | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| margin: 4px 0; | |
| } | |
| /* Sidebar Menu */ | |
| .sidebar-menu { | |
| margin-top: 12px; | |
| width: 100%; | |
| padding: 0 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| flex-shrink: 0; | |
| } | |
| .sidebar-menu a { | |
| width: 100%; | |
| padding: 10px 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| text-decoration: none; | |
| border-radius: var(--radius-md); | |
| transition: all var(--transition); | |
| } | |
| .sidebar-menu .selected-item { | |
| background: var(--bg-active); | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .sidebar-menu .unselected-item:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .sidebar-menu a img { | |
| width: 18px; | |
| height: 18px; | |
| flex-shrink: 0; | |
| } | |
| /* ========================================================= | |
| BG BLUR OVERLAY | |
| ========================================================= */ | |
| .bg-blur { | |
| position: fixed; | |
| background: var(--bg-overlay); | |
| height: 100dvh; | |
| width: 100dvw; | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| backdrop-filter: blur(4px); | |
| -webkit-backdrop-filter: blur(4px); | |
| } | |
| /* ========================================================= | |
| MOBILE OVERLAY | |
| ========================================================= */ | |
| .mobile-overlay { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.55); | |
| z-index: 1000; | |
| } | |
| .mobile-overlay.active { display: block; } | |
| /* ========================================================= | |
| MODAL CARDS (Folder Dialog, Rename, URL, Password, Upload) | |
| ========================================================= */ | |
| .modal-card { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| padding: 28px 28px 22px; | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: center; | |
| flex-direction: column; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(24px); | |
| -webkit-backdrop-filter: blur(24px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| z-index: -1; | |
| opacity: 0; | |
| box-shadow: var(--shadow-lg); | |
| transition: opacity 0.25s ease; | |
| width: min(90vw, 420px); | |
| } | |
| .modal-title { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 18px; | |
| letter-spacing: -0.02em; | |
| } | |
| .modal-card input[type="text"], | |
| .modal-card input[type="password"] { | |
| width: 100%; | |
| padding: 11px 16px; | |
| border: 1.5px solid var(--border-strong); | |
| border-radius: var(--radius-sm); | |
| outline: none; | |
| font-size: 0.9rem; | |
| font-weight: 400; | |
| color: var(--text-primary); | |
| background: var(--bg-input); | |
| margin-bottom: 16px; | |
| transition: border-color var(--transition), box-shadow var(--transition); | |
| } | |
| .modal-card input[type="text"]:focus, | |
| .modal-card input[type="password"]:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); | |
| } | |
| .modal-actions { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| margin-top: 4px; | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| border: none; | |
| border-radius: var(--radius-lg); | |
| padding: 9px 20px; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| } | |
| .btn-ghost:hover { | |
| background: var(--bg-hover); | |
| color: var(--accent); | |
| } | |
| .btn-primary { | |
| background: var(--accent-grad); | |
| border: none; | |
| border-radius: var(--radius-lg); | |
| padding: 9px 22px; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: #fff; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| box-shadow: var(--shadow-acc); | |
| } | |
| .btn-primary:hover { | |
| filter: brightness(1.1); | |
| transform: translateY(-1px); | |
| box-shadow: 0 8px 28px rgba(99, 102, 241, 0.4); | |
| } | |
| /* Single-threaded toggle row */ | |
| #single-threaded-div { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| margin: 4px 0 14px; | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| #single-threaded-div input { width: auto; margin: 0; accent-color: var(--accent); } | |
| #single-threaded-div img { height: 15px; width: 15px; } | |
| #single-threaded-div a { height: 15px; width: 15px; display: flex; } | |
| /* File Uploader specific */ | |
| .file-uploader-modal { width: min(90vw, 500px); } | |
| .upload-head { | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 14px; | |
| } | |
| .upload-info { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 5px; | |
| width: 100%; | |
| max-height: 40px; | |
| overflow: hidden; | |
| } | |
| .progress-track { | |
| width: 100%; | |
| background: var(--bg-input); | |
| border-radius: 99px; | |
| overflow: hidden; | |
| margin-top: 18px; | |
| height: 8px; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: var(--accent-grad); | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| border-radius: 99px; | |
| } | |
| /* ========================================================= | |
| MORE OPTIONS DROPDOWN | |
| ========================================================= */ | |
| .more-options { | |
| position: absolute; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid var(--glass-border); | |
| padding: 5px 0; | |
| box-shadow: var(--shadow-md); | |
| border-radius: var(--radius-md); | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.18s ease; | |
| width: 160px; | |
| transform: translateX(-50%); | |
| } | |
| .more-options div { | |
| width: 100%; | |
| padding: 9px 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| cursor: pointer; | |
| transition: background var(--transition); | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| .more-options div:hover { background: var(--bg-hover); } | |
| .more-options div img { | |
| height: 17px; | |
| width: 17px; | |
| flex-shrink: 0; | |
| } | |
| .more-options hr { | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| margin: 3px 0; | |
| } | |
| /* ========================================================= | |
| MAIN CONTENT | |
| ========================================================= */ | |
| .main-content { | |
| width: 100%; | |
| height: 100vh; | |
| padding: 16px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| background: var(--bg-app); | |
| overflow: hidden; | |
| transition: background var(--transition); | |
| } | |
| /* ── Header ── */ | |
| .header { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-shrink: 0; | |
| height: var(--header-h); | |
| } | |
| .icon-btn { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| flex-shrink: 0; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .icon-btn svg { fill: var(--text-secondary); transition: fill var(--transition); } | |
| .icon-btn:hover { background: var(--bg-hover); border-color: var(--accent); } | |
| .icon-btn:hover svg { fill: var(--accent); } | |
| .search-bar { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| background: var(--bg-surface); | |
| border: 1.5px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 10px 18px; | |
| gap: 12px; | |
| box-shadow: var(--shadow-sm); | |
| transition: all var(--transition); | |
| } | |
| .search-bar img { | |
| width: 18px; | |
| height: 18px; | |
| flex-shrink: 0; | |
| opacity: 0.5; | |
| } | |
| #search-form { flex: 1; } | |
| .search-bar input { | |
| width: 100%; | |
| border: none; | |
| outline: none; | |
| background: transparent; | |
| font-size: 0.9rem; | |
| font-weight: 400; | |
| color: var(--text-primary); | |
| user-select: text; | |
| -webkit-user-select: text; | |
| } | |
| .search-bar input::placeholder { color: var(--text-muted); } | |
| .search-bar:focus-within { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12), var(--shadow-sm); | |
| } | |
| /* ── Toolbar ── */ | |
| .toolbar { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-shrink: 0; | |
| padding: 0 4px; | |
| } | |
| .toolbar-left, .toolbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .sort-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 6px 12px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .sort-label { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| } | |
| .sort-select { | |
| border: none; | |
| outline: none; | |
| background: transparent; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| padding-right: 4px; | |
| } | |
| .sort-dir-btn { | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2px; | |
| border-radius: 4px; | |
| transition: all var(--transition); | |
| } | |
| .sort-dir-btn svg { fill: var(--text-secondary); transition: transform 0.25s ease, fill var(--transition); } | |
| .sort-dir-btn:hover svg { fill: var(--accent); } | |
| .sort-dir-btn.sort-desc svg { transform: rotate(180deg); } | |
| .view-group { | |
| display: flex; | |
| align-items: center; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 4px; | |
| gap: 2px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .view-btn { | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| padding: 6px 8px; | |
| border-radius: 9px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition); | |
| } | |
| .view-btn svg { fill: var(--text-muted); } | |
| .view-btn:hover { background: var(--bg-hover); } | |
| .view-btn:hover svg { fill: var(--accent); } | |
| .view-btn.active { | |
| background: var(--accent-grad); | |
| box-shadow: var(--shadow-acc); | |
| } | |
| .view-btn.active svg { fill: #fff; } | |
| /* ========================================================= | |
| DIRECTORY CONTAINER | |
| ========================================================= */ | |
| .directory-container { | |
| flex: 1; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| box-shadow: var(--shadow-sm); | |
| transition: background var(--transition), border-color var(--transition); | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border-strong) transparent; | |
| } | |
| .directory-container::-webkit-scrollbar { width: 6px; } | |
| .directory-container::-webkit-scrollbar-thumb { | |
| background: var(--border-strong); | |
| border-radius: 3px; | |
| } | |
| /* ── List View ── */ | |
| .list-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .list-table thead th { | |
| text-align: left; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border); | |
| position: sticky; | |
| top: 0; | |
| background: var(--bg-surface); | |
| z-index: 2; | |
| } | |
| .list-table thead th:first-child { padding-left: 20px; } | |
| .more-col { width: 48px; } | |
| .date-col { white-space: nowrap; } | |
| .list-table .body-tr { | |
| transition: background var(--transition); | |
| cursor: pointer; | |
| } | |
| .list-table .body-tr:hover { background: var(--bg-hover); } | |
| .list-table td { | |
| text-align: left; | |
| font-size: 0.875rem; | |
| font-weight: 400; | |
| color: var(--text-primary); | |
| border-bottom: 1px solid var(--border); | |
| height: 52px; | |
| padding: 0 16px; | |
| } | |
| .list-table td:first-child { padding-left: 20px; } | |
| .list-table .body-tr:last-child td { border-bottom: none; } | |
| .td-align { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| height: 100%; | |
| } | |
| .item-icon { | |
| width: 22px; | |
| height: 22px; | |
| flex-shrink: 0; | |
| } | |
| /* File type color tints for list icons */ | |
| .file-icon-img.type-image { filter: hue-rotate(200deg) saturate(2); } | |
| .file-icon-img.type-video { filter: hue-rotate(320deg) saturate(2); } | |
| .file-icon-img.type-audio { filter: hue-rotate(100deg) saturate(2); } | |
| .file-icon-img.type-pdf { filter: hue-rotate(340deg) saturate(3); } | |
| .file-icon-img.type-archive { filter: hue-rotate(30deg) saturate(2); } | |
| .file-icon-img.type-code { filter: hue-rotate(180deg) saturate(2); } | |
| .file-icon-img.type-doc { filter: hue-rotate(220deg) saturate(2); } | |
| .date-text { | |
| color: var(--text-secondary); | |
| font-size: 0.825rem; | |
| } | |
| /* More Button */ | |
| .more-btn { | |
| padding: 6px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| background: transparent; | |
| border: none; | |
| flex-shrink: 0; | |
| } | |
| .more-btn img { width: 14px; height: 14px; } | |
| .more-btn:hover { background: var(--bg-active); } | |
| /* ── Grid View ── */ | |
| .grid-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); | |
| gap: 14px; | |
| padding: 16px; | |
| } | |
| .grid-card { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| } | |
| .grid-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-md); | |
| border-color: rgba(99, 102, 241, 0.3); | |
| } | |
| .card-thumb { | |
| width: 100%; | |
| aspect-ratio: 4 / 3; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| gap: 4px; | |
| flex-shrink: 0; | |
| } | |
| .folder-thumb { background: linear-gradient(135deg, #f59e0b, #d97706); } | |
| .card-thumb.type-image { background: linear-gradient(135deg, #ec4899, #8b5cf6); } | |
| .card-thumb.type-video { background: linear-gradient(135deg, #ef4444, #f97316); } | |
| .card-thumb.type-audio { background: linear-gradient(135deg, #10b981, #06b6d4); } | |
| .card-thumb.type-pdf { background: linear-gradient(135deg, #ef4444, #dc2626); } | |
| .card-thumb.type-archive { background: linear-gradient(135deg, #f97316, #ea580c); } | |
| .card-thumb.type-code { background: linear-gradient(135deg, #3b82f6, #6366f1); } | |
| .card-thumb.type-doc { background: linear-gradient(135deg, #2563eb, #1d4ed8); } | |
| .card-thumb.type-other { background: linear-gradient(135deg, #6b7280, #4b5563); } | |
| .card-icon-img { | |
| width: 44px; | |
| height: 44px; | |
| filter: brightness(10) saturate(0); | |
| } | |
| .card-file-emoji { | |
| font-size: 32px; | |
| line-height: 1; | |
| } | |
| .card-ext { | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| color: rgba(255,255,255,0.85); | |
| background: rgba(0,0,0,0.25); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| } | |
| .card-body { | |
| padding: 10px 12px 10px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| flex: 1; | |
| } | |
| .card-name { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| line-height: 1.3; | |
| } | |
| .card-meta { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .card-more-btn { | |
| position: absolute; | |
| top: 6px; | |
| right: 6px; | |
| width: 28px; | |
| height: 28px; | |
| padding: 0; | |
| background: rgba(0, 0, 0, 0.35); | |
| border: none; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: opacity var(--transition), background var(--transition); | |
| } | |
| .card-more-btn img { | |
| width: 13px; | |
| height: 13px; | |
| filter: brightness(10) saturate(0); | |
| } | |
| .grid-card:hover .card-more-btn { opacity: 1; } | |
| .card-more-btn:hover { background: rgba(0, 0, 0, 0.55); } | |
| /* ========================================================= | |
| SKELETON LOADERS | |
| ========================================================= */ | |
| @keyframes shimmer { | |
| 0% { background-position: calc(-1 * var(--shimmer-w)) 0; } | |
| 100% { background-position: calc(var(--shimmer-w) + 100%) 0; } | |
| } | |
| .skeleton-pulse { | |
| background: linear-gradient( | |
| 90deg, | |
| var(--sk-base) 25%, | |
| var(--sk-shine) 50%, | |
| var(--sk-base) 75% | |
| ); | |
| background-size: var(--shimmer-w) 100%; | |
| animation: shimmer 1.5s ease-in-out infinite; | |
| border-radius: 6px; | |
| } | |
| /* Skeleton List */ | |
| .skeleton-list { padding: 8px 0; } | |
| .sk-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 14px 20px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .sk-icon { width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; } | |
| .sk-name { height: 14px; border-radius: 6px; flex: 1; max-width: 260px; } | |
| .sk-size { height: 12px; border-radius: 5px; width: 60px; } | |
| .sk-date { height: 12px; border-radius: 5px; width: 80px; } | |
| .sk-btn { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; } | |
| /* Skeleton Grid */ | |
| .skeleton-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); | |
| gap: 14px; | |
| padding: 16px; | |
| } | |
| .sk-card { | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| } | |
| .sk-thumb { height: 116px; border-radius: 0; } | |
| .sk-card-name { height: 12px; margin: 12px 12px 5px; border-radius: 5px; } | |
| .sk-card-meta { height: 10px; margin: 0 12px 14px; width: 70%; border-radius: 4px; } | |
| /* ========================================================= | |
| MOBILE FAB | |
| ========================================================= */ | |
| .fab-btn { | |
| display: none; | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 50%; | |
| background: var(--accent-grad); | |
| border: none; | |
| box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45); | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| z-index: 500; | |
| transition: transform var(--transition), box-shadow var(--transition); | |
| } | |
| .fab-btn svg { fill: #fff; } | |
| .fab-btn:hover { | |
| transform: scale(1.08); | |
| box-shadow: 0 10px 32px rgba(99, 102, 241, 0.55); | |
| } | |
| /* ========================================================= | |
| DARK MODE – icon & image adjustments | |
| ========================================================= */ | |
| body.dark-mode img:not(.sidebar-header img):not(.card-icon-img):not([src*="tgdrive"]) { | |
| filter: invert(0.85); | |
| } | |
| body.dark-mode .sidebar-header img { filter: brightness(10); } | |
| body.dark-mode .card-icon-img { | |
| filter: brightness(10) saturate(0); | |
| } | |
| body.dark-mode svg:not(.keep-color) { fill: var(--text-primary); } | |
| body.dark-mode .view-btn.active svg, | |
| body.dark-mode .fab-btn svg, | |
| body.dark-mode .card-more-btn img { filter: none; } | |
| /* ========================================================= | |
| RESPONSIVE | |
| ========================================================= */ | |
| @media (max-width: 900px) { | |
| :root { --sidebar-w: 220px; } | |
| } | |
| @media (max-width: 768px) { | |
| :root { --sidebar-w: 260px; } | |
| .container { grid-template-columns: 1fr; } | |
| .sidebar { | |
| position: fixed; | |
| left: -280px; | |
| top: 0; | |
| height: 100%; | |
| z-index: 1001; | |
| transition: left 0.3s ease; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .sidebar.active { left: 0; } | |
| .main-content { | |
| width: 100%; | |
| padding: 12px 12px; | |
| } | |
| .header { gap: 8px; } | |
| #file-search { font-size: 16px; /* prevents iOS zoom */ } | |
| .date-col { display: none; } | |
| .grid-container { | |
| grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); | |
| gap: 10px; | |
| padding: 12px; | |
| } | |
| .fab-btn { display: flex; } | |
| .toolbar { flex-wrap: wrap; gap: 8px; } | |
| } | |
| @media (max-width: 480px) { | |
| .grid-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .sort-label { display: none; } | |
| } | |
| /* ========================================================= | |
| CARD THUMBNAIL IMAGE | |
| ========================================================= */ | |
| .card-thumb-img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| /* ========================================================= | |
| TMDB PANEL | |
| ========================================================= */ | |
| .tmdb-panel { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| width: min(520px, 100vw); | |
| height: 100dvh; | |
| background: var(--bg-surface); | |
| border-left: 1px solid var(--border); | |
| box-shadow: var(--shadow-lg); | |
| z-index: 1100; | |
| display: flex; | |
| flex-direction: column; | |
| transform: translateX(100%); | |
| transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); | |
| overflow: hidden; | |
| } | |
| .tmdb-panel.open { transform: translateX(0); } | |
| .tmdb-panel-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 18px 20px 14px; | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| background: var(--sidebar-grad); | |
| color: #fff; | |
| } | |
| .tmdb-panel-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| color: #fff; | |
| } | |
| .tmdb-panel-title svg { fill: #fff; } | |
| .tmdb-panel-header .icon-btn { | |
| background: rgba(255,255,255,0.15); | |
| border-color: rgba(255,255,255,0.2); | |
| } | |
| .tmdb-panel-header .icon-btn svg { fill: #fff; } | |
| .tmdb-search-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| background: var(--bg-app); | |
| } | |
| .tmdb-search-bar svg { flex-shrink: 0; fill: var(--text-muted); } | |
| .tmdb-search-bar input { | |
| flex: 1; | |
| border: 1.5px solid var(--border-strong); | |
| border-radius: var(--radius-md); | |
| padding: 9px 14px; | |
| font-size: 0.9rem; | |
| background: var(--bg-input); | |
| color: var(--text-primary); | |
| outline: none; | |
| transition: border-color var(--transition); | |
| } | |
| .tmdb-search-bar input:focus { border-color: var(--accent); } | |
| .tmdb-tabs { | |
| display: flex; | |
| gap: 4px; | |
| padding: 10px 14px 8px; | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .tmdb-tabs::-webkit-scrollbar { display: none; } | |
| .tmdb-tab { | |
| background: transparent; | |
| border: 1.5px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 6px 14px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| white-space: nowrap; | |
| } | |
| .tmdb-tab:hover { border-color: var(--accent); color: var(--accent); } | |
| .tmdb-tab.active { | |
| background: var(--accent-grad); | |
| border-color: transparent; | |
| color: #fff; | |
| } | |
| .tmdb-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 14px; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border-strong) transparent; | |
| } | |
| .tmdb-content::-webkit-scrollbar { width: 5px; } | |
| .tmdb-content::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } | |
| .tmdb-loader { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| padding: 60px 0; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| .tmdb-spinner { | |
| width: 36px; | |
| height: 36px; | |
| border: 3px solid var(--border); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: tmdb-spin 0.8s linear infinite; | |
| } | |
| @keyframes tmdb-spin { to { transform: rotate(360deg); } } | |
| .tmdb-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); | |
| gap: 12px; | |
| } | |
| .tmdb-card { | |
| background: var(--bg-app); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: transform var(--transition), box-shadow var(--transition); | |
| } | |
| .tmdb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } | |
| .tmdb-card-poster { | |
| width: 100%; | |
| aspect-ratio: 2 / 3; | |
| object-fit: cover; | |
| display: block; | |
| background: var(--bg-input); | |
| } | |
| .tmdb-card-poster-placeholder { | |
| width: 100%; | |
| aspect-ratio: 2 / 3; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #6366f1, #ec4899); | |
| font-size: 2.5rem; | |
| } | |
| .tmdb-card-body { padding: 8px 10px 10px; } | |
| .tmdb-card-title { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| margin-bottom: 3px; | |
| } | |
| .tmdb-card-meta { font-size: 0.7rem; color: var(--text-muted); } | |
| .tmdb-rating { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 3px; | |
| font-size: 0.7rem; | |
| color: #f59e0b; | |
| font-weight: 700; | |
| } | |
| /* ========================================================= | |
| TMDB DETAIL MODAL | |
| ========================================================= */ | |
| .tmdb-detail-modal { | |
| position: fixed; | |
| inset: 0; | |
| background: var(--bg-overlay); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| z-index: 1200; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.25s ease; | |
| } | |
| .tmdb-detail-modal.open { opacity: 1; pointer-events: all; } | |
| .tmdb-detail-close { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| width: 40px; | |
| height: 40px; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| z-index: 10; | |
| transition: all var(--transition); | |
| } | |
| .tmdb-detail-close:hover { background: var(--bg-hover); } | |
| .tmdb-detail-close svg { fill: var(--text-primary); } | |
| .tmdb-detail-content { | |
| background: var(--bg-surface); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-lg); | |
| width: min(820px, 96vw); | |
| max-height: 90dvh; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: row; | |
| position: relative; | |
| scrollbar-width: thin; | |
| } | |
| .tmdb-detail-poster { | |
| width: 240px; | |
| flex-shrink: 0; | |
| border-radius: var(--radius-lg) 0 0 var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .tmdb-detail-poster img { width: 100%; height: 100%; object-fit: cover; display: block; } | |
| .tmdb-detail-poster-placeholder { | |
| width: 100%; | |
| height: 100%; | |
| min-height: 360px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #6366f1, #ec4899); | |
| font-size: 4rem; | |
| } | |
| .tmdb-detail-info { flex: 1; padding: 28px 28px 24px; overflow: hidden; } | |
| .tmdb-detail-tagline { | |
| font-size: 0.85rem; | |
| color: var(--accent); | |
| font-style: italic; | |
| font-weight: 500; | |
| margin-bottom: 6px; | |
| } | |
| .tmdb-detail-title { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| color: var(--text-primary); | |
| line-height: 1.2; | |
| margin-bottom: 8px; | |
| letter-spacing: -0.02em; | |
| } | |
| .tmdb-detail-meta-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| align-items: center; | |
| margin-bottom: 14px; | |
| font-size: 0.83rem; | |
| color: var(--text-secondary); | |
| } | |
| .tmdb-badge { | |
| background: var(--bg-hover); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 3px 10px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .tmdb-badge-rating { | |
| background: linear-gradient(135deg,#f59e0b,#ef4444); | |
| color: #fff; | |
| border: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .tmdb-detail-overview { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| line-height: 1.7; | |
| margin-bottom: 18px; | |
| } | |
| .tmdb-genre-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin-bottom: 18px; | |
| } | |
| .tmdb-genre-tag { | |
| background: var(--bg-active); | |
| color: var(--accent); | |
| border-radius: 20px; | |
| padding: 3px 12px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .tmdb-cast-row { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| margin-bottom: 18px; | |
| line-height: 1.5; | |
| } | |
| .tmdb-cast-row strong { color: var(--text-secondary); } | |
| .tmdb-trailer-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: #ef4444; | |
| color: #fff; | |
| border: none; | |
| border-radius: var(--radius-lg); | |
| padding: 10px 22px; | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| text-decoration: none; | |
| } | |
| .tmdb-trailer-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } | |
| .tmdb-trailer-iframe-wrap { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.92); | |
| z-index: 1400; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .tmdb-trailer-iframe-wrap iframe { | |
| width: min(900px, 96vw); | |
| height: min(506px, 54vw); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| } | |
| .tmdb-trailer-close-btn { | |
| background: rgba(255,255,255,0.12); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| color: #fff; | |
| border-radius: var(--radius-lg); | |
| padding: 8px 22px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background var(--transition); | |
| } | |
| .tmdb-trailer-close-btn:hover { background: rgba(255,255,255,0.22); } | |
| .tmdb-no-results { | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| padding: 50px 20px; | |
| } | |
| /* Touch: always show more-btn, better tap targets */ | |
| @media (hover: none) { | |
| .card-more-btn { opacity: 1 ; } | |
| .grid-card:hover { transform: none; box-shadow: var(--shadow-sm); } | |
| } | |
| /* Mobile TMDB adjustments */ | |
| @media (max-width: 768px) { | |
| .card-more-btn { opacity: 1 ; } | |
| .more-btn { min-width: 36px; min-height: 36px; } | |
| .list-table td { height: 56px; } | |
| .tmdb-panel { | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| border-radius: 0; | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| .tmdb-grid { grid-template-columns: repeat(2, 1fr) ; } | |
| .tmdb-detail-modal { border-radius: 0; } | |
| .tmdb-detail-content { flex-direction: column; width: 100%; max-height: 100dvh; border-radius: 0; } | |
| .tmdb-detail-poster { width: 100%; max-width: 200px; margin: 0 auto; border-radius: 0; } | |
| .tmdb-detail-poster-placeholder { min-height: 200px; } | |
| } | |
| /* ========================================================= | |
| TOUCH OPTIMIZATIONS – prevent double-tap zoom on buttons | |
| ========================================================= */ | |
| button, a, .new-button, .more-btn, .card-more-btn, | |
| .view-btn, .sort-dir-btn, .fab-btn, .icon-btn, | |
| .sidebar-menu a, .grid-card, .body-tr, | |
| .tmdb-tab, .tmdb-card, .tmdb-trailer-btn, .tmdb-detail-close, .tmdb-trailer-close-btn { | |
| touch-action: manipulation; | |
| } | |
| /* ========================================================= | |
| SIDEBAR CREDIT | |
| ========================================================= */ | |
| .sidebar-credit { | |
| margin-top: auto; | |
| padding: 14px 16px; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .sidebar-credit a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| .sidebar-credit a:hover { text-decoration: underline; } | |
| .sidebar-credit .fa-heart { color: #ec4899; } | |