/* =================================================================== AniWorld Downloader — Design System Dark / Light theme via [data-theme] on =================================================================== */ /* ===== CSS Variables ===== */ :root, [data-theme="dark"] { --bg-base: #0d0d14; --bg-surface: #13131e; --bg-elevated: #1a1a28; --bg-hover: #22223a; --brand-color: #7c3aed; --bg-card: #16162a; --sidebar-bg: #0f0f1a; --sidebar-border: rgba(255,255,255,0.06); --accent: #7c3aed; --accent-hover: #6d28d9; --accent-soft: rgba(124,58,237,0.15); --accent-glow: rgba(124,58,237,0.35); --text-primary: #f0f0f8; --text-secondary: #9191b0; --text-muted: #55556a; --text-link: #8b8bff; --text-link-hover:#a0a0ff; --border: rgba(255,255,255,0.07); --border-focus: rgba(124,58,237,0.6); --input-bg: #1e1e30; --input-border: rgba(255,255,255,0.1); --badge-bg: #ef4444; --badge-text: #fff; --success: #22c55e; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-modal: 0 24px 64px rgba(0,0,0,0.8); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --sidebar-width: 240px; --topbar-height: 56px; --transition: 0.18s ease; --transition-slow:0.3s ease; color-scheme: dark; } [data-theme="light"] { --bg-base: #f4f4f8; --bg-surface: #ffffff; --bg-elevated: #f8f8fc; --bg-hover: #ececf6; --bg-card: #ffffff; --brand-color: #7c3aed; --sidebar-bg: #ffffff; --sidebar-border: rgba(0,0,0,0.08); --accent: #7c3aed; --accent-hover: #6d28d9; --accent-soft: rgba(124,58,237,0.08); --accent-glow: rgba(124,58,237,0.2); --text-primary: #18181f; --text-secondary: #5c5c78; --text-muted: #9999b0; --text-link: #6d28d9; --text-link-hover:#5b21b6; --border: rgba(0,0,0,0.08); --border-focus: rgba(124,58,237,0.5); --input-bg: #f0f0f8; --input-border: rgba(0,0,0,0.12); --badge-bg: #ef4444; --badge-text: #fff; --success: #16a34a; --warning: #d97706; --error: #dc2626; --info: #2563eb; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.1); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-modal: 0 24px 64px rgba(0,0,0,0.25); color-scheme: light; } /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg-base); color: var(--text-primary); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--text-link); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--text-link-hover); } ::selection { background: var(--accent-soft); color: var(--text-primary); } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* Scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* =================================================================== LAYOUT — Sidebar + Main =================================================================== */ /* Sidebar */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; z-index: 200; transition: transform var(--transition-slow); overflow-y: auto; overflow-x: hidden; } /* Sidebar Header */ .sidebar-header { padding: 20px 16px 12px; border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0; } .sidebar-brand { display: flex; align-items: center; gap: 10px; color: var(--text-primary); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; text-decoration: none; transition: opacity var(--transition); } .sidebar-brand:hover { opacity: 0.8; color: var(--text-primary); } .sidebar-brand-icon { width: 28px; height: 28px; color: var(--brand-color); flex-shrink: 0; } .sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.2; } .sidebar-brand-text small { font-size: 0.68rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0; } /* Sidebar Nav */ .sidebar-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; } .sidebar-category { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 14px 12px 4px; pointer-events: none; user-select: none; } .sidebar-category:first-child { padding-top: 4px; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; transition: background var(--transition), color var(--transition); position: relative; text-decoration: none; width: 100%; text-align: left; } .sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; } .sidebar-link:hover { background: var(--bg-hover); color: var(--text-primary); border-radius: var(--radius-md); } .sidebar-link.active { background: var(--accent-soft); color: var(--accent); } .sidebar-link.active svg { color: var(--accent); } .sidebar-link.active::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } /* Queue button in sidebar */ .sidebar-queue-btn { margin-top: 4px; } /* Sidebar Footer */ .sidebar-footer { padding: 12px 10px 16px; border-top: 1px solid var(--sidebar-border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } .sidebar-user { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--bg-elevated); font-size: 0.85rem; } .sidebar-user svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; } .sidebar-username { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; } .sidebar-logout { display: flex; align-items: center; color: var(--text-muted); transition: color var(--transition); padding: 2px; } .sidebar-logout svg { width: 15px; height: 15px; } .sidebar-logout:hover { color: var(--error); } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; width: 100%; transition: background var(--transition), color var(--transition); } .theme-toggle:hover { background: var(--bg-hover); color: var(--text-primary); } .theme-toggle svg { width: 16px; height: 16px; } .theme-icon-dark, .theme-icon-light { display: flex; align-items: center; gap: 8px; } [data-theme="dark"] .theme-icon-light { display: none; } [data-theme="light"] .theme-icon-dark { display: none; } [data-theme="light"] .theme-icon-light { display: flex; } /* ===== Appearance Popup ===== */ .appearance-popup { position: fixed; width: 248px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px; z-index: 500; display: none; flex-direction: column; gap: 14px; } .appearance-popup.open { display: flex; } .appearance-popup-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .appearance-theme-row { display: flex; gap: 6px; } .appearance-theme-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 0; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .appearance-theme-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .appearance-theme-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .appearance-theme-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .accent-presets { display: flex; gap: 6px; flex-wrap: wrap; } .accent-preset { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.12s, border-color 0.12s; flex-shrink: 0; } .accent-preset:hover { transform: scale(1.15); } .accent-preset.active { border-color: var(--text-primary); } .accent-hex-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .accent-hex-input { flex: 1; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); font-size: 0.82rem; font-family: monospace; outline: none; transition: border-color var(--transition); } .accent-hex-input:focus { border-color: var(--border-focus); } .accent-color-swatch { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; padding: 0; overflow: hidden; flex-shrink: 0; } .accent-color-swatch input[type="color"] { width: 200%; height: 200%; margin: -50%; border: none; cursor: pointer; padding: 0; } .appearance-reset { width: 100%; padding: 6px 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; transition: background var(--transition), color var(--transition); } .appearance-reset:hover { background: var(--bg-hover); color: var(--text-primary); } .appearance-popup-wrap { } /* Mobile top bar */ .mobile-topbar { display: none; position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-height); background: var(--sidebar-bg); border-bottom: 1px solid var(--sidebar-border); align-items: center; padding: 0 16px; z-index: 190; } .mobile-brand { flex: 1; text-align: center; font-size: 1rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .mobile-brand:hover { color: var(--text-primary); opacity: 0.8; } /* Hamburger */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 4px; border-radius: var(--radius-sm); transition: background var(--transition); } .hamburger:hover { background: var(--bg-hover); } .hamburger span { display: block; height: 2px; background: var(--text-secondary); border-radius: 2px; transition: transform var(--transition), opacity var(--transition), width var(--transition); transform-origin: center; } .hamburger span:nth-child(1) { width: 20px; } .hamburger span:nth-child(2) { width: 14px; } .hamburger span:nth-child(3) { width: 20px; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 20px; } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 20px; } /* Mobile queue button */ .mobile-queue-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--text-secondary); position: relative; transition: background var(--transition), color var(--transition); } .mobile-queue-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .mobile-queue-btn svg { width: 20px; height: 20px; } /* Sidebar backdrop */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 190; backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--transition-slow); } .sidebar-backdrop.visible { display: block; opacity: 1; } /* Main content area */ .main-content { margin-left: var(--sidebar-width); min-height: 100vh; background: var(--bg-base); transition: margin-left var(--transition-slow); } /* =================================================================== QUEUE BADGE =================================================================== */ .update-badge { background: var(--accent, #e05c5c); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 2px 5px; border-radius: 99px; line-height: 1.4; margin-left: auto; } .queue-badge, .seerr-badge { background: var(--badge-bg); color: var(--badge-text); font-size: 0.68rem; font-weight: 700; padding: 2px 6px; border-radius: 99px; line-height: 1.4; margin-left: auto; } /* =================================================================== RESPONSIVE — Mobile =================================================================== */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-modal); } .sidebar-backdrop { display: block; opacity: 0; pointer-events: none; } .sidebar-backdrop.visible { opacity: 1; pointer-events: auto; } .mobile-topbar { display: flex; } .main-content { margin-left: 0; padding-top: var(--topbar-height); } } /* =================================================================== TYPOGRAPHY =================================================================== */ h1 { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1.2; } h2 { font-size: 1.35rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; } h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); } h4 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); } /* =================================================================== CONTAINER / LAYOUT HELPERS =================================================================== */ .container { max-width: 1200px; margin: 0 auto; padding: 32px 32px; } @media (max-width: 640px) { .container { padding: 24px 16px; } } /* =================================================================== SEARCH BAR =================================================================== */ .search-bar { max-width: 720px; margin: 0 auto; } /* =================================================================== FORM ELEMENTS =================================================================== */ input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], select, textarea { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); border-radius: var(--radius-md); padding: 10px 14px; font-size: 0.9rem; font-family: inherit; width: 100%; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-soft); } input::placeholder, textarea::placeholder { color: var(--text-muted); } select option { background: var(--bg-elevated); color: var(--text-primary); } label { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); display: block; margin-bottom: 6px; } /* =================================================================== BUTTONS =================================================================== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition); border: none; line-height: 1.4; white-space: nowrap; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 4px 16px var(--accent-glow); } .btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--bg-hover); } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); } .btn-danger { background: rgba(239,68,68,0.15); color: var(--error); } .btn-danger:hover:not(:disabled) { background: var(--error); color: #fff; } .btn-sm { padding: 6px 13px; font-size: 0.82rem; } .btn-lg { padding: 12px 24px; font-size: 0.95rem; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; flex-shrink: 0; border-radius: var(--radius); background: var(--bg-elevated, var(--bg-hover)); border: 1px solid var(--border) !important; color: var(--text-secondary) !important; cursor: pointer; overflow: hidden; transition: background var(--transition), color var(--transition); } .btn-icon:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } .btn-icon svg { width: 15px !important; height: 15px !important; flex-shrink: 0; display: block; stroke: currentColor; fill: none; overflow: visible; } /* =================================================================== CARDS =================================================================== */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-sm); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .card-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); } /* Series / media cards */ .series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } @media (max-width: 480px) { .series-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } } .series-card { background: var(--bg-card); 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); position: relative; } .series-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(124,58,237,0.3); } .series-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: var(--bg-elevated); } .series-card-info { padding: 10px 12px; } .series-card-title { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .series-card-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; } /* =================================================================== SEARCH INPUT (index page) =================================================================== */ .search-wrap { position: relative; margin-bottom: 32px; } .search-input-wrap { position: relative; display: flex; align-items: center; } .search-input-wrap .search-icon { position: absolute; left: 14px; color: var(--text-muted); width: 18px; height: 18px; pointer-events: none; flex-shrink: 0; } .search-input-wrap input { padding-left: 44px; padding-right: 50px; height: 48px; font-size: 0.95rem; border-radius: var(--radius-lg); } .search-clear-btn { position: absolute; right: 14px; color: var(--text-muted); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 99px; transition: background var(--transition), color var(--transition); } .search-clear-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .search-clear-btn svg { width: 14px; height: 14px; } /* =================================================================== RESULTS / LISTS =================================================================== */ .results-list { display: flex; flex-direction: column; gap: 2px; max-width: 720px; margin: 0 auto; } .result-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition); border: 1px solid transparent; } .result-item:hover { background: var(--bg-elevated); border-color: var(--border); } .result-item-thumb { width: 44px; height: 62px; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg-elevated); flex-shrink: 0; } .result-item-body { flex: 1; min-width: 0; } .result-item-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .result-item-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .result-item-arrow { color: var(--text-muted); flex-shrink: 0; } .result-item-arrow svg { width: 16px; height: 16px; } /* =================================================================== TABS =================================================================== */ .tabs { display: flex; gap: 2px; background: var(--bg-elevated); padding: 4px; border-radius: var(--radius-md); width: fit-content; } .tab { padding: 7px 16px; border-radius: calc(var(--radius-md) - 2px); font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background var(--transition), color var(--transition); } .tab:hover { color: var(--text-primary); } .tab.active { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); } /* =================================================================== BADGE / PILL =================================================================== */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 0.74rem; font-weight: 600; line-height: 1.4; } .badge-accent { background: var(--accent-soft); color: var(--accent); } .badge-success { background: rgba(34,197,94,0.12); color: var(--success); } .badge-warning { background: rgba(245,158,11,0.12); color: var(--warning); } .badge-error { background: rgba(239,68,68,0.12); color: var(--error); } .badge-neutral { background: var(--bg-elevated); color: var(--text-secondary); } /* =================================================================== PROGRESS BAR =================================================================== */ .progress-wrap { background: var(--bg-elevated); border-radius: 99px; overflow: hidden; height: 6px; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), #a855f7); border-radius: 99px; transition: width 0.3s ease; } /* =================================================================== MODALS (Queue, Captcha, Download) =================================================================== */ .queue-overlay, .captcha-overlay, .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: none; overflow-y: auto; z-index: 1000; /* centre content whether opened with display:block or display:flex */ padding: 20px 16px; } /* When JS uses style.display="block", grid centres the modal */ .queue-overlay[style*="block"], .captcha-overlay[style*="block"], .modal-overlay[style*="block"] { display: grid !important; place-items: center; } .queue-modal, .captcha-modal { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); width: 100%; max-width: 560px; max-height: calc(100vh - 80px); margin: 0 auto; overflow: hidden; display: flex; flex-direction: column; animation: modal-in 0.2s ease; } @keyframes modal-in { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Shared modal header */ .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-title { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); } .modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--text-muted); transition: background var(--transition), color var(--transition); } .modal-close:hover { background: var(--bg-hover); color: var(--text-primary); } .modal-close svg { width: 18px; height: 18px; } .modal-header-actions { display: flex; align-items: center; gap: 8px; } .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-size: 0.78rem; padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; } .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover, rgba(255,255,255,0.2)); } /* Queue filter toolbar */ .queue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .queue-filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .queue-filter-tab { padding: 4px 11px; border-radius: 20px; border: 1px solid transparent; background: transparent; color: var(--text-muted); font-size: 0.77rem; font-weight: 500; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .queue-filter-tab:hover { background: var(--bg-hover); color: var(--text-primary); } .queue-filter-tab.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .qf-count { display: inline-block; background: rgba(255,255,255,0.10); border-radius: 10px; padding: 0 5px; font-size: 0.70rem; font-weight: 600; min-width: 16px; text-align: center; } .queue-filter-tab.active .qf-count { background: rgba(124,58,237,0.20); } /* Pause button in toolbar */ .queue-pause-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 0.77rem; font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background var(--transition), color var(--transition), border-color var(--transition); } .queue-pause-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .queue-pause-btn--paused { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); color: #22c55e; } .queue-pause-btn--paused:hover { background: rgba(34,197,94,0.22); color: #4ade80; border-color: rgba(74,222,128,0.5); } /* Queue list */ .queue-list { padding: 12px 16px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; } /* Queue item */ .queue-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; } .queue-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .queue-item-title { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; flex: 1; min-width: 0; } .queue-item-status { flex-shrink: 0; font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; } .queue-item-status.status-downloading { background: var(--accent-soft); color: var(--accent); } .queue-item-status.status-waiting { background: var(--bg-hover); color: var(--text-muted); } .queue-item-status.status-done { background: rgba(34,197,94,0.12); color: var(--success); } .queue-item-status.status-error { background: rgba(239,68,68,0.12); color: var(--error); } .queue-item-meta { font-size: 0.78rem; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .queue-item-progress .progress-wrap { height: 5px; } .queue-item-cancel { margin-top: 10px; font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; transition: color var(--transition); padding: 0; } .queue-item-cancel:hover { color: var(--error); } /* Captcha */ .captcha-hint { padding: 14px 24px 8px; font-size: 0.88rem; color: var(--text-secondary); flex-shrink: 0; } .captcha-img-wrap { padding: 0 16px 16px; overflow-y: auto; flex: 1; } .captcha-screenshot { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); display: block; } /* =================================================================== DOWNLOAD MODAL (series detail) =================================================================== */ .download-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 900; padding: 16px; } .download-overlay.open { display: flex; } .download-modal { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); width: 100%; max-width: 600px; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; animation: modal-in 0.2s ease; } .download-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; } .download-modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; } /* =================================================================== TABLE =================================================================== */ .table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); } table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } thead tr { border-bottom: 1px solid var(--border); } thead th { padding: 11px 16px; text-align: left; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } tbody tr { border-bottom: 1px solid var(--border); transition: background var(--transition); } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--bg-hover); } tbody td { padding: 11px 16px; color: var(--text-primary); vertical-align: middle; } /* =================================================================== STATS PAGE =================================================================== */ /* Container is now a simple flex-column — inner sections manage their own layout */ .stats-grid { display: flex; flex-direction: column; gap: 28px; } /* Row of KPI cards */ .stats-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } /* Main (top) KPI row — cards slightly bigger */ .stats-kpi-main .stat-card { padding: 22px 24px; } .stats-kpi-main .stat-value { font-size: 2.2rem; } /* Named section block */ .stats-section { display: flex; flex-direction: column; gap: 14px; } .stats-section-title { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin: 0; } /* Individual KPI card */ .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--kpi-color, var(--border)); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; transition: box-shadow var(--transition); } .stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .stat-value { font-size: 2rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1.1; } .stat-label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); } .stat-sub { font-size: 0.73rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; } /* Legacy aliases (old code used stat-card-* names) */ .stat-card-label { font-size: 0.78rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .stat-card-value { font-size: 2rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1; } .stat-card-sub { font-size: 0.8rem; color: var(--text-secondary); } /* =================================================================== SETTINGS PAGE =================================================================== */ /* ===== Service Pills / Tabs ===== */ .service-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .service-pill { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); user-select: none; } .service-pill svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; } .service-pill:hover { background: var(--bg-hover); color: var(--text-primary); } .service-pill.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .service-panel { display: none; } .service-panel.active { display: block; } .service-wip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 24px; color: var(--text-muted); text-align: center; } .service-wip svg { width: 36px; height: 36px; stroke: var(--text-muted); opacity: 0.5; } .service-wip p { margin: 0; font-size: 0.9rem; } /* Push/notif prefs section — grayed out when service not configured */ .push-prefs-disabled { opacity: 0.45; pointer-events: none; user-select: none; } /* Notification page: inline text inputs */ .notif-input { flex: 1; min-width: 0; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input, var(--bg-hover)); color: var(--text-primary); font-size: 0.875rem; outline: none; transition: border-color var(--transition); } .notif-input:focus { border-color: var(--accent); } /* Notification status badges */ .notif-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 0.78rem; font-weight: 500; white-space: nowrap; } .notif-badge-ok { background: rgba(87,242,135,.15); color: #57F287; } .notif-badge-warn { background: rgba(254,231,92,.12); color: #b8a200; } /* Admin shield badge in section headers */ .settings-section-header svg { vertical-align: -2px; } .settings-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; } .settings-section-header { padding: 16px 24px; border-bottom: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border); transition: background var(--transition); } .settings-row:last-child { border-bottom: none; } .settings-row:hover { background: var(--bg-hover); } .settings-row-left { flex: 1; min-width: 0; } .settings-row-label { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); } .settings-row-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .settings-row-right { flex-shrink: 0; } /* Toggle switch */ .toggle { position: relative; width: 42px; height: 24px; display: inline-block; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--bg-hover); border-radius: 99px; cursor: pointer; transition: background var(--transition); } .toggle-slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 4px; top: 4px; background: #fff; border-radius: 50%; transition: transform var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .toggle input:checked + .toggle-slider { background: var(--accent); } .toggle input:checked + .toggle-slider::before { transform: translateX(18px); } /* =================================================================== LIBRARY PAGE =================================================================== */ .library-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .library-filter { display: flex; gap: 8px; flex-wrap: wrap; } /* =================================================================== FAVOURITES =================================================================== */ .favourites-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); } .favourites-empty svg { width: 48px; height: 48px; margin: 0 auto 16px; display: block; opacity: 0.4; } /* =================================================================== AUTOSYNC =================================================================== */ .autosync-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: flex; align-items: center; gap: 14px; transition: border-color var(--transition); } .autosync-item:hover { border-color: rgba(124,58,237,0.3); } .autosync-item-thumb { width: 48px; height: 68px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-elevated); flex-shrink: 0; } .autosync-item-body { flex: 1; min-width: 0; } .autosync-item-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .autosync-item-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .autosync-item-actions { display: flex; gap: 8px; flex-shrink: 0; } /* =================================================================== TOAST =================================================================== */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary); padding: 12px 20px; border-radius: var(--radius-lg); font-size: 0.88rem; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 2000; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; white-space: nowrap; max-width: calc(100vw - 32px); text-overflow: ellipsis; overflow: hidden; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.toast-success { border-left: 3px solid var(--success); } .toast.toast-error { border-left: 3px solid var(--error); } .toast.toast-warning { border-left: 3px solid var(--warning); } /* =================================================================== SPINNER / LOADING =================================================================== */ .spinner-circle { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } .loading-state { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px 0; color: var(--text-muted); font-size: 0.9rem; } /* =================================================================== EMPTY STATE =================================================================== */ .empty-state { text-align: center; padding: 64px 24px; } .empty-state-icon { width: 56px; height: 56px; margin: 0 auto 20px; color: var(--text-muted); opacity: 0.5; } .empty-state-title { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .empty-state-desc { font-size: 0.88rem; color: var(--text-muted); max-width: 380px; margin: 0 auto 20px; } /* =================================================================== ALERTS / MESSAGES =================================================================== */ .alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); font-size: 0.88rem; border: 1px solid transparent; } .alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } .alert-success { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.2); color: var(--success); } .alert-error { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); color: var(--error); } .alert-warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: var(--warning); } .alert-info { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.2); color: var(--info); } /* =================================================================== DIVIDER =================================================================== */ .divider { height: 1px; background: var(--border); margin: 20px 0; } /* =================================================================== HERO / PAGE HEADER =================================================================== */ .page-header { margin-bottom: 32px; } .page-header h1 { margin-bottom: 6px; } .page-header p { color: var(--text-secondary); font-size: 0.9rem; } /* =================================================================== SERIES DETAIL / HERO BANNER =================================================================== */ .series-hero { position: relative; min-height: 280px; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 32px; display: flex; align-items: flex-end; background: var(--bg-elevated); } .series-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.35); } .series-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%); } .series-hero-content { position: relative; padding: 24px; display: flex; gap: 20px; align-items: flex-end; z-index: 1; } .series-hero-poster { width: 100px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); flex-shrink: 0; } .series-hero-info { flex: 1; min-width: 0; } .series-hero-title { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; } .series-hero-meta { font-size: 0.82rem; color: rgba(255,255,255,0.65); display: flex; gap: 12px; flex-wrap: wrap; } .series-hero-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } /* =================================================================== EPISODE LIST =================================================================== */ .episode-list { display: flex; flex-direction: column; gap: 4px; } .episode-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition); border: 1px solid transparent; } .episode-item:hover { background: var(--bg-elevated); border-color: var(--border); } .episode-item.selected { background: var(--accent-soft); border-color: rgba(124,58,237,0.3); } .episode-num { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); width: 24px; text-align: center; flex-shrink: 0; } .episode-title { flex: 1; font-size: 0.88rem; color: var(--text-primary); min-width: 0; } .episode-title small { display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 400; } .episode-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color var(--transition), background var(--transition); } .episode-item.selected .episode-check { background: var(--accent); border-color: var(--accent); } /* =================================================================== PROVIDER SELECTOR =================================================================== */ .provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .provider-card { padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition), background var(--transition); font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); text-align: center; background: var(--bg-card); } .provider-card:hover { border-color: rgba(124,58,237,0.4); color: var(--text-primary); background: var(--bg-hover); } .provider-card.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* =================================================================== LANGUAGE CHIPS =================================================================== */ .lang-chips { display: flex; flex-wrap: wrap; gap: 8px; } .lang-chip { padding: 6px 14px; border: 2px solid var(--border); border-radius: 99px; font-size: 0.82rem; font-weight: 500; cursor: pointer; color: var(--text-secondary); background: var(--bg-card); transition: all var(--transition); } .lang-chip:hover { border-color: rgba(124,58,237,0.4); color: var(--text-primary); } .lang-chip.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* =================================================================== SECTION TITLES =================================================================== */ .section-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* =================================================================== SCROLLBAR in sidebar =================================================================== */ .sidebar::-webkit-scrollbar { width: 3px; } .sidebar::-webkit-scrollbar-thumb { background: var(--bg-hover); } /* =================================================================== UTILITY CLASSES =================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-4 { gap: 16px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .text-sm { font-size: 0.85rem; } .text-muted { color: var(--text-muted); } .text-primary { color: var(--text-primary); } .font-semibold { font-weight: 600; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* =================================================================== LEGACY COMPAT — keep any existing class names that pages use =================================================================== */ /* top-bar kept as hidden for pages that might still reference it */ .top-bar { display: none; } /* Old close button style */ button.close { float: right; font-size: 1.4rem; background: none; border: none; color: var(--text-muted); cursor: pointer; line-height: 1; transition: color var(--transition); } button.close:hover { color: var(--text-primary); } /* Old modal title */ .queue-modal-title, .captcha-modal-title { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; } /* Old top-bar styles — no-op since .top-bar is hidden */ .top-bar-brand, .top-bar-link, .top-bar-user, .top-bar-hamburger { display: none; } /* =================================================================== INDEX PAGE — Hero, Search, Browse, Modal =================================================================== */ /* Page hero */ .site-hero { text-align: center; padding: 40px 0 20px; } .site-hero h1 { font-size: 2rem; margin-bottom: 8px; } .hero-sub { color: var(--text-muted); font-size: 0.95rem; } /* Site switch (AniWorld / S.TO toggle) */ .site-switch { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; } .site-label { font-size: 0.88rem; font-weight: 500; color: var(--text-muted); transition: color var(--transition); cursor: default; } .site-label.active { color: var(--accent); font-weight: 600; } /* Toggle switch (site & settings) */ .switch { position: relative; width: 44px; height: 24px; display: inline-block; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; inset: 0; background: var(--bg-hover); border-radius: 99px; cursor: pointer; transition: background var(--transition); } .slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 4px; top: 4px; background: #fff; border-radius: 50%; transition: transform var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .switch input:checked + .slider { background: var(--accent); } .switch input:checked + .slider::before { transform: translateX(20px); } /* Search bar (index page style — input + buttons inline) */ .search-bar { display: flex; gap: 8px; max-width: 720px; margin: 0 auto 28px; } .search-bar input { flex: 1; height: 46px; border-radius: var(--radius-md); padding: 0 16px; font-size: 0.95rem; } .search-bar button, .search-bar #searchBtn { height: 46px; padding: 0 22px; border-radius: var(--radius-md); background: var(--accent); color: #fff; font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: background var(--transition); white-space: nowrap; } .search-bar button:hover, .search-bar #searchBtn:hover { background: var(--accent-hover); } .btn-random { height: 46px; padding: 0 18px; border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; font-family: inherit; cursor: pointer; border: 1px solid var(--border); transition: background var(--transition), color var(--transition); white-space: nowrap; } .btn-random:hover { background: var(--bg-hover); color: var(--text-primary); } /* Spinner (text-based loading indicator) — shown/hidden via JS style.display */ .spinner { text-align: center; color: var(--text-muted); font-size: 0.88rem; padding: 24px 0; display: none; } /* Results */ .results { margin: 0 0 24px; } .results-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-bottom: 32px; } @media (max-width: 480px) { .results-poster-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } } .results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } /* Browse grid */ .browse-section { margin-bottom: 40px; } .browse-heading-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; } .browse-heading { flex: 1; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; } .browse-heading::after { content: ""; flex: 1; height: 1px; background: var(--border); } .browse-scroll-btns { display: flex; gap: 5px; flex-shrink: 0; } .browse-scroll-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); flex-shrink: 0; } .browse-scroll-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: rgba(124,58,237,0.3); } .browse-grid { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .browse-grid::-webkit-scrollbar { height: 4px; } .browse-grid::-webkit-scrollbar-track { background: transparent; } .browse-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } @media (max-width: 480px) { .browse-grid { gap: 10px; } .browse-card { width: 110px !important; } } /* =================================================================== INDEX MODAL (Series detail / Download modal) =================================================================== */ .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); display: none; overflow-y: auto; overflow-x: hidden; z-index: 900; padding: 32px 16px; } .overlay[style*="block"] { display: grid !important; place-items: start center; overflow-y: auto; } .modal { position: relative; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); width: 100%; max-width: 680px; margin: 0 auto; padding: 24px; animation: modal-in 0.2s ease; } .modal > .close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 1.3rem; line-height: 1; color: var(--text-muted); background: transparent; border: none; cursor: pointer; transition: background var(--transition), color var(--transition); z-index: 1; } .modal > .close:hover { background: var(--bg-hover); color: var(--text-primary); } .modal .modal-header { display: flex; gap: 18px; margin-bottom: 20px; padding: 0; border: none; } .modal .modal-header img { width: 90px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; background: var(--bg-card); box-shadow: var(--shadow-md); } .modal-meta { flex: 1; min-width: 0; } .modal-meta h2 { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.02em; } .genres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .genres span, .genre-tag { background: var(--bg-hover); color: var(--text-secondary); font-size: 0.74rem; font-weight: 500; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border); } .year { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; } .desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; max-height: 80px; overflow-y: auto; } /* Controls row (language/provider/path selects) */ .controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .controls select { flex: 1; min-width: 120px; height: 40px; font-size: 0.85rem; border-radius: var(--radius-md); padding: 0 12px; } /* Language availability banner */ .lang-avail-banner { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; } .lang-avail-pill { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; } .lang-avail-full { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); color: var(--success); } .lang-avail-partial { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.35); color: var(--warning); } .lang-avail-none { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: var(--error); } /* Episodes header */ .episodes-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .episodes-header h3 { font-size: 1rem; font-weight: 600; color: var(--text-primary); } .select-all-label { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; } .select-all-label input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } /* Season accordion */ .season-accordion { margin-bottom: 12px; } .season-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; transition: background var(--transition); user-select: none; } .season-header:hover { background: var(--bg-hover); } .season-episodes { padding: 4px 0; margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; } .episode-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition); font-size: 0.86rem; color: var(--text-secondary); } .episode-row:hover { background: var(--bg-elevated); color: var(--text-primary); } .episode-row.selected { background: var(--accent-soft); color: var(--accent); } .episode-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } /* Status bar */ .status-bar { padding: 8px 4px; font-size: 0.82rem; color: var(--text-muted); min-height: 28px; } /* Modal actions (download buttons) */ .modal-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); } .btn-download-selected, .btn-download-all, .btn-download-all-langs { flex: 1; min-width: 140px; padding: 11px 18px; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: background var(--transition), box-shadow var(--transition); text-align: center; } .btn-download-selected { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); } .btn-download-selected:hover { background: var(--bg-hover); } .btn-download-all { background: var(--accent); color: #fff; } .btn-download-all:hover { background: var(--accent-hover); box-shadow: 0 4px 14px var(--accent-glow); } .btn-download-all-langs { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); } .btn-download-all-langs:hover { background: var(--bg-hover); color: var(--text-primary); } /* =================================================================== SETTINGS PAGE (extended) =================================================================== */ .settings-container { max-width: 860px; margin: 0 auto; padding: 32px; } .settings-container h1 { margin-bottom: 28px; } .settings-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; } .settings-section h2 { padding: 16px 22px; border-bottom: 1px solid var(--border); font-size: 0.95rem; font-weight: 600; color: var(--text-primary); } .settings-subtitle { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 22px 4px; } .settings-row { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--border); } .settings-row:last-child { border-bottom: none; } .settings-row input[type="text"], .settings-row input[type="password"] { flex: 1; height: 40px; } .settings-row button { height: 40px; padding: 0 18px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--transition); white-space: nowrap; } .settings-row button:hover { background: var(--accent-hover); } .settings-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px; } .settings-field-label { font-size: 0.78rem; font-weight: 500; color: var(--text-muted); } .settings-hint { padding: 8px 22px 14px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; } /* ---- API endpoints table ---- */ .api-endpoints-table { width: 100%; border-collapse: collapse; font-size: 0.81rem; } .api-endpoints-table td { padding: 5px 12px 5px 0; vertical-align: middle; color: var(--text-secondary); white-space: nowrap; } .api-endpoints-table td:last-child { white-space: normal; color: var(--text-muted); width: 100%; } .api-endpoints-table code { font-size: 0.8rem; } .api-endpoints-table tr:not(:last-child) td { border-bottom: 1px solid var(--border); } /* ── Settings pages: reduziertes Padding auf kleinen Bildschirmen ── */ @media (max-width: 640px) { .settings-container { padding: 12px; } .settings-section h2 { padding: 12px 14px; } .settings-subtitle { padding: 10px 14px 4px; } .settings-hint { padding: 6px 14px 12px; } } .api-param { font-size: 0.75rem; color: var(--text-muted); opacity: 0.8; } /* ---- DNS test panel ---- */ .dns-test-panel { margin: 0 22px 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 0.84rem; } .dns-test-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--bg-card); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); } .dns-test-rerun { font-size: 0.78rem; padding: 3px 10px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; color: var(--text-secondary); } .dns-test-rerun:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .dns-test-rerun:disabled { opacity: 0.5; cursor: not-allowed; } .dns-test-block { padding: 10px 14px; border-bottom: 1px solid var(--border); } .dns-test-block:last-child { border-bottom: none; } .dns-test-block-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px; } .dns-test-status-row { line-height: 1.5; } .dns-test-site-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; } .dns-test-site-name { font-weight: 600; color: var(--text-secondary); min-width: 90px; flex-shrink: 0; } .dns-test-site-result { flex: 1; } .dns-test-ok { color: var(--success, #4caf50); } .dns-test-warn { color: var(--warning, #ff9800); } .dns-test-fail { color: var(--error, #f44336); } .dns-test-idle { color: var(--text-muted); } .dns-test-loading { color: var(--text-muted); font-style: italic; } .dns-test-err-btn { margin-left: 8px; font-size: 0.72rem; padding: 1px 7px; border-radius: 4px; border: 1px solid currentColor; background: transparent; cursor: pointer; color: inherit; opacity: 0.75; vertical-align: middle; } .dns-test-err-btn:hover { opacity: 1; } .dns-test-err-detail { margin-top: 4px; font-size: 0.75rem; font-family: monospace; color: var(--text-muted); word-break: break-all; white-space: pre-wrap; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px; } .settings-checkbox-row { display: flex; align-items: center; gap: 10px; padding: 12px 22px 4px; cursor: pointer; font-size: 0.88rem; color: var(--text-secondary); } .settings-checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); } .settings-notice { background: rgba(59,130,246,0.07); border: 1px solid rgba(59,130,246,0.2); border-radius: var(--radius-md); padding: 14px 18px; font-size: 0.85rem; color: var(--info); margin-bottom: 24px; line-height: 1.5; } .settings-notice code { font-family: monospace; background: rgba(59,130,246,0.1); padding: 2px 6px; border-radius: 4px; } .sync-select { width: auto; min-width: 130px; } .add-user-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 22px 16px; } .add-user-row input, .add-user-row select { flex: 1; min-width: 120px; height: 40px; } .add-user-row button { height: 40px; padding: 0 18px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--transition); } .add-user-row button:hover { background: var(--accent-hover); } .user-table { margin: 0; } .user-table th { padding: 10px 22px; } .user-table td { padding: 10px 22px; font-size: 0.85rem; } .modal-btn-row { display: flex; gap: 10px; justify-content: flex-end; padding-top: 14px; } .modal-info-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; } /* =================================================================== LIBRARY PAGE =================================================================== */ .library-container { max-width: 1100px; margin: 0 auto; padding: 32px; } .library-list { display: flex; flex-direction: column; gap: 10px; } .library-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 18px; display: flex; align-items: center; gap: 14px; transition: border-color var(--transition), background var(--transition); } .library-item:hover { border-color: rgba(124,58,237,0.3); background: var(--bg-hover); } .library-item-thumb { width: 48px; height: 68px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-elevated); flex-shrink: 0; } .library-item-body { flex: 1; min-width: 0; } .library-item-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .library-item-meta { font-size: 0.78rem; color: var(--text-muted); } .library-item-actions { display: flex; gap: 8px; flex-shrink: 0; } /* =================================================================== AUTOSYNC PAGE =================================================================== */ .autosync-container { max-width: 900px; margin: 0 auto; padding: 32px; } .autosync-intro { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; } /* =================================================================== STATS PAGE =================================================================== */ .page-container { max-width: 1100px; margin: 0 auto; padding: 32px; } .page-title { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.03em; margin-bottom: 6px; } .page-subtitle { font-size: 0.9rem; color: var(--text-muted); } .stats-loading { padding: 60px 0; text-align: center; color: var(--text-muted); font-size: 0.9rem; } /* Stats grid items injected by stats.js */ .stat-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 6px; } .stat-item .stat-label { font-size: 0.78rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .stat-item .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1; } /* =================================================================== AUTH / LOGIN PAGE =================================================================== */ .auth-container { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: var(--bg-base); } .auth-container h1 { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; text-align: center; } .auth-container h2 { font-size: 1rem; font-weight: 400; color: var(--text-muted); margin-bottom: 28px; text-align: center; } .auth-container form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; } .auth-container form input { height: 46px; font-size: 0.95rem; } .auth-container form button[type="submit"] { height: 46px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--transition), box-shadow var(--transition); margin-top: 4px; } .auth-container form button[type="submit"]:hover { background: var(--accent-hover); box-shadow: 0 4px 14px var(--accent-glow); } .auth-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: var(--error); border-radius: var(--radius-md); padding: 10px 16px; font-size: 0.85rem; max-width: 360px; width: 100%; text-align: center; margin-bottom: 8px; } .auth-info { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); color: var(--info); border-radius: var(--radius-md); padding: 10px 16px; font-size: 0.85rem; max-width: 360px; width: 100%; text-align: center; margin-bottom: 8px; } .auth-divider { display: flex; align-items: center; gap: 12px; max-width: 360px; width: 100%; margin: 4px 0; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-divider span { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; } .sso-button { display: block; width: 100%; max-width: 360px; text-align: center; padding: 12px 20px; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary); font-size: 0.9rem; font-weight: 500; transition: background var(--transition), border-color var(--transition); } .sso-button:hover { background: var(--bg-hover); border-color: rgba(124,58,237,0.3); color: var(--text-primary); } /* =================================================================== QUEUE EMPTY STATE =================================================================== */ .queue-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 0.88rem; } /* =================================================================== FAVOURITES PAGE =================================================================== */ .favourites-container { max-width: 1100px; margin: 0 auto; padding: 32px; } /* =================================================================== SETUP PAGE =================================================================== */ .setup-container { max-width: 560px; margin: 60px auto; padding: 24px; text-align: center; } /* =================================================================== MEDIA CARD (browse grid / results — generated by JS) =================================================================== */ .media-card { background: var(--bg-card); 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); position: relative; } .media-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(124,58,237,0.3); } .media-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--bg-elevated); display: block; } .media-card-title { padding: 9px 10px 10px; font-size: 0.78rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } /* Result item (search result list) */ .result-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition); border: 1px solid transparent; } .result-row:hover { background: var(--bg-elevated); border-color: var(--border); } .result-row img { width: 40px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-elevated); flex-shrink: 0; } .result-row-title { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); } /* =================================================================== BROWSE CARDS (renderBrowseCards in app.js → div.browse-card) =================================================================== */ .browse-card { flex-shrink: 0; width: 140px; scroll-snap-align: start; background: var(--bg-card); 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); position: relative; } .browse-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(124,58,237,0.3); } .browse-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--bg-elevated); display: block; } .browse-info { padding: 9px 10px 11px; } .browse-title { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; margin-bottom: 3px; } .browse-genre { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Downloaded badge on cards */ .downloaded-badge { position: absolute; top: 7px; right: 7px; background: var(--success); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; line-height: 1.5; } /* text set via JS textContent */ /* =================================================================== SEARCH RESULT CARDS (renderResults in app.js → div.card) =================================================================== */ .results .card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition), border-color var(--transition); margin-bottom: 4px; position: relative; } .results .card:hover { background: var(--bg-hover); border-color: rgba(124,58,237,0.25); } .results .card img { width: 42px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg-elevated); flex-shrink: 0; } .results .card .info { flex: 1; min-width: 0; } .results .card .title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .result-source-pill { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; border: 1px solid currentColor; letter-spacing: 0.04em; opacity: 0.85; } .result-source-pill.provider-aniworld { color: var(--accent); } .result-source-pill.provider-sto { color: var(--info); } .result-source-pill.provider-filmpalast { color: #e8914a; } /* =================================================================== FAVOURITES LIST + RESULT CARDS (renderFavourites → div.result-card) =================================================================== */ .fav-list { display: flex; flex-direction: column; gap: 8px; } .result-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--transition), background var(--transition); min-width: 0; } .result-card:hover { border-color: rgba(124,58,237,0.3); background: var(--bg-hover); } .result-poster-wrap { flex-shrink: 0; width: 52px; height: 74px; background: var(--bg-elevated); border-radius: var(--radius-sm); overflow: hidden; } .result-poster { width: 100%; height: 100%; object-fit: cover; display: block; } .result-info { flex: 1; min-width: 0; } .result-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .result-meta { font-size: 0.76rem; color: var(--text-muted); } .result-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } @media (max-width: 480px) { .result-card { flex-wrap: wrap; } .result-actions { width: 100%; justify-content: flex-end; } } /* =================================================================== EPISODE ITEMS (buildAccordion in app.js → div.episode-item) =================================================================== */ .episode-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 12px; border-radius: var(--radius-sm); transition: background var(--transition); font-size: 0.84rem; color: var(--text-secondary); min-width: 0; overflow: hidden; } .episode-item:hover { background: var(--bg-elevated); } .episode-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; margin-top: 2px; } .ep-num { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); min-width: 30px; flex-shrink: 0; } .ep-title { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.4; } .ep-downloaded { color: var(--success); font-size: 0.8rem; flex-shrink: 0; } .ep-langs { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .ep-lang-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; opacity: 0.85; display: inline-block; vertical-align: middle; } /* Season styles */ .season-section { margin-bottom: 6px; } .season-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; user-select: none; transition: background var(--transition); } .season-header:hover { background: var(--bg-hover); } .season-label { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .season-arrow { font-size: 0.7rem; color: var(--text-muted); transition: transform var(--transition); display: inline-block; } .season-header.expanded .season-arrow { transform: rotate(90deg); } .season-downloaded { color: var(--success); font-size: 0.8rem; } .season-all-label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; } .season-all-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); } .season-body { display: none; padding: 4px 0; } .season-body.expanded { display: block; } /* =================================================================== QUEUE ITEMS (renderQueue in queue.js) =================================================================== */ .queue-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; } .queue-item-active { border-color: rgba(124,58,237,0.35); } .queue-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .queue-item-title { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; flex: 1; min-width: 0; } .queue-item-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .queue-item-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } /* Queue status badges */ .queue-status { font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap; } .queue-status-running { background: var(--accent-soft); color: var(--accent); } .queue-status-queued { background: var(--bg-hover); color: var(--text-muted); } .queue-status-paused { background: rgba(34,197,94,0.10); color: #22c55e; } .queue-status-completed { background: rgba(34,197,94,0.12); color: var(--success); } .queue-status-failed { background: rgba(239,68,68,0.12); color: var(--error); } .queue-status-cancelled { background: var(--bg-hover); color: var(--text-muted); } .queue-status-cancelling { background: rgba(245,158,11,0.12); color: var(--warning); } .queue-status-captcha { background: rgba(245,158,11,0.15); color: var(--warning); } /* Meta pills */ .queue-meta-pill { background: var(--bg-hover); color: var(--text-muted); font-size: 0.72rem; padding: 3px 8px; border-radius: 99px; white-space: nowrap; } .queue-user { background: var(--accent-soft); color: var(--accent); } .queue-path { background: rgba(34,197,94,0.1); color: var(--success); } /* Queue progress */ .queue-progress { display: flex; flex-direction: column; gap: 4px; } .queue-progress-bar { background: var(--bg-hover); border-radius: 99px; height: 5px; overflow: hidden; } /* Episode-level bar (download / ffmpeg phase) — slightly slimmer */ .queue-progress-bar--episode { height: 3px; margin-top: 2px; } .queue-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #a855f7); border-radius: 99px; transition: width 0.4s ease; } /* Download phase: blue */ .queue-progress-fill--download { background: linear-gradient(90deg, #2563eb, #38bdf8); } /* FFmpeg phase: orange */ .queue-progress-fill--ffmpeg { background: linear-gradient(90deg, #d97706, #fbbf24); } .queue-progress-footer { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-muted); } .queue-progress-pct { font-weight: 600; color: var(--text-secondary); } .queue-progress-phase { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.01em; } .queue-progress-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; min-height: 22px; } .queue-progress-pill { display: inline-block; font-size: 0.70rem; padding: 2px 7px; } .queue-progress-pill--eta { color: var(--text-secondary); } /* Queue action buttons — full definitions further below in the "improved" block */ /* Queue errors */ .queue-errors { font-size: 0.78rem; color: var(--error); cursor: pointer; padding: 4px 0; user-select: none; } .queue-errors-toggle { margin-left: 4px; display: inline-block; transition: transform var(--transition); } .queue-errors.expanded .queue-errors-toggle { transform: rotate(90deg); } .queue-error-details { display: none; margin-top: 4px; } .queue-error-details.expanded { display: block; } .queue-error-detail { font-size: 0.76rem; color: var(--text-muted); padding: 3px 0; border-top: 1px solid var(--border); word-break: break-all; } /* =================================================================== AUTOSYNC TABLE — horizontal scroll wrapper =================================================================== */ /* Autosync card grid */ .autosync-table-wrap { /* No overflow needed — cards wrap naturally */ } .sync-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .sync-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color var(--transition), box-shadow var(--transition); } .sync-card:hover { border-color: var(--border-focus); box-shadow: 0 2px 12px rgba(0,0,0,0.15); } .sync-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .sync-card-title { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; flex: 1; min-width: 0; /* Allow wrapping so full title is visible */ overflow-wrap: break-word; word-break: break-word; } .sync-card-pills { display: flex; flex-wrap: wrap; gap: 5px; } .sync-card-stats { display: flex; flex-direction: column; gap: 4px; } .sync-stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.8rem; } .sync-stat-label { color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .sync-stat-value { color: var(--text-secondary); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sync-stat-new { color: var(--success, #4ade80); font-weight: 600; } .sync-stat-neutral { color: var(--text-muted); } .sync-card-actions { display: flex; gap: 6px; margin-top: 2px; } .sync-card-btn { flex: 1; justify-content: center; font-size: 0.78rem; white-space: nowrap; } .sync-card-btn-sync { color: var(--accent) !important; border-color: rgba(99,102,241,0.3) !important; } .sync-card-btn-sync:hover:not(:disabled) { background: rgba(99,102,241,0.1) !important; border-color: rgba(99,102,241,0.5) !important; } /* Autosync running spinner */ .sync-spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid rgba(124,58,237,0.3); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin-right: 6px; vertical-align: middle; } /* =================================================================== QUEUE — improved action buttons & layout =================================================================== */ /* Give queue items a clear visual split between content and actions */ .queue-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 0; /* neutralise legacy rule */ } .queue-item-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; padding-top: 1px; } /* Move buttons: arrow icons, square touch target */ .queue-move { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; font-size: 0.8rem; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), color var(--transition); } .queue-move:hover:not(:disabled) { background: var(--bg-surface); color: var(--text-primary); border-color: rgba(124,58,237,0.4); } .queue-move:disabled { opacity: 0.35; cursor: not-allowed; } /* Remove button: X, subtle red on hover */ .queue-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; font-size: 1rem; line-height: 1; background: transparent; color: var(--text-muted); border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .queue-remove:hover { background: rgba(239,68,68,0.1); color: var(--error); border-color: rgba(239,68,68,0.3); } /* Cancel button: pill-shaped, warm red tint */ .queue-cancel { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; font-size: 0.78rem; font-weight: 500; font-family: inherit; background: rgba(239,68,68,0.08); color: var(--error); border: 1px solid rgba(239,68,68,0.25); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), border-color var(--transition); white-space: nowrap; } .queue-cancel:hover { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.5); } /* Captcha solve button */ .queue-captcha-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; font-size: 0.78rem; font-weight: 500; font-family: inherit; background: rgba(245,158,11,0.1); color: var(--warning); border: 1px solid rgba(245,158,11,0.3); border-radius: var(--radius-sm); cursor: pointer; margin-right: 4px; transition: background var(--transition); } .queue-captcha-btn:hover { background: rgba(245,158,11,0.2); } /* Restart button: green-accent pill */ .queue-restart { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; font-size: 0.78rem; font-weight: 500; font-family: inherit; background: rgba(34,197,94,0.08); color: var(--success, #22c55e); border: 1px solid rgba(34,197,94,0.25); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), border-color var(--transition); white-space: nowrap; } .queue-restart:hover { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.5); } /* Auto-Sync source badge in queue items */ .queue-sync-badge { display: inline-flex; align-items: center; padding: 1px 7px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); border-radius: 4px; vertical-align: middle; margin-right: 4px; white-space: nowrap; } /* Queue modal list — ensure it scrolls independently */ .queue-modal .queue-list { overflow-y: auto; flex: 1; min-height: 0; /* critical for flex children to scroll */ padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; } /* Empty queue message */ .queue-empty { text-align: center; padding: 36px 20px; color: var(--text-muted); font-size: 0.88rem; } /* =================================================================== LIBRARY / MEDIATHEK — File Explorer =================================================================== */ /* Toolbar */ .lib-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .lib-toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .lib-search-row { margin-bottom: 12px; } .lib-search-input { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.82rem; font-family: inherit; padding: 6px 10px; width: 100%; box-sizing: border-box; outline: none; transition: border-color var(--transition); } .lib-search-input:focus { border-color: var(--accent); } .lib-search-input::placeholder { color: var(--text-muted); } .lib-search-input::-webkit-search-cancel-button { cursor: pointer; } .lib-search-loc-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 4px 4px; } .lib-search-loc-label:first-child { padding-top: 4px; } .lib-last-scanned { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; } .lib-scan-badge { display: none; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(124,58,237,0.25); border-radius: 99px; padding: 3px 10px; } .lib-scan-spinner { width: 10px; height: 10px; border: 2px solid rgba(124,58,237,0.3); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } /* Watcher status indicator */ .lib-watcher-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: var(--bg-secondary); border: 1px solid var(--border); cursor: default; font-size: 0.78rem; } .lib-watcher-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: background 0.3s; } .lib-watcher-on { background: var(--success, #22c55e); box-shadow: 0 0 6px rgba(34, 197, 94, 0.45); } .lib-watcher-off { background: var(--text-muted); } .lib-watcher-starting { background: var(--warning, #f59e0b); animation: pulse 1.2s ease-in-out infinite; } .lib-watcher-label { color: var(--text-muted); white-space: nowrap; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Explorer list */ #libList { display: flex; flex-direction: column; gap: 12px; } .lib-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; } /* Location block */ .lib-location { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } /* Row shared layout */ .lib-location-header, .lib-lang-header, .lib-title-row, .lib-season-row, .lib-episode-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; padding: 11px 14px; transition: background var(--transition); } .lib-location-header { background: var(--bg-surface); border-bottom: 1px solid var(--border); padding: 13px 16px; } .lib-location-header:hover { background: var(--bg-hover); } .lib-lang-section, .lib-title-section, .lib-season-section { border-top: 1px solid var(--border); } .lib-lang-section:first-child, .lib-title-section:first-child { border-top: none; } .lib-lang-header { padding-left: 28px; } .lib-lang-header:hover { background: var(--bg-hover); } .lib-title-row { padding-left: 32px; } .lib-title-row:hover { background: var(--bg-hover); } .lib-season-row { padding-left: 52px; } .lib-season-row:hover { background: var(--bg-hover); } .lib-episode-row { padding-left: 72px; cursor: default; border-top: 1px solid rgba(255,255,255,0.03); } .lib-episode-row:hover { background: var(--bg-hover); } /* Row sides */ .lib-row-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .lib-row-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Arrow */ .lib-arrow { width: 14px; height: 14px; fill: none; stroke: var(--text-muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform var(--transition); } .lib-arrow-open { transform: rotate(90deg); } /* Icons */ .lib-icon { width: 16px; height: 16px; fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .lib-icon-folder-root { stroke: var(--accent); } .lib-icon-folder { stroke: #f59e0b; } .lib-icon-season { stroke: #60a5fa; } .lib-icon-video { stroke: #34d399; } .lib-icon-file { stroke: var(--text-muted); } /* Names */ .lib-location-name { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); } .lib-lang-name { font-weight: 500; font-size: 0.88rem; color: var(--text-primary); } .lib-title-name { font-weight: 600; font-size: 0.87rem; color: var(--text-primary); display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .lib-ep-num { font-family: monospace; font-size: 0.78rem; color: var(--accent); font-weight: 700; flex-shrink: 0; } .lib-ep-file { font-size: 0.78rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; display: inline-block; } /* Badges */ .lib-badge { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: var(--bg-hover); border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px; white-space: nowrap; } .lib-badge-size { color: var(--text-secondary); } .lib-summary-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border); } .lib-summary-pill--film { color: #e8914a; border-color: #e8914a44; background: #e8914a11; } .lib-movie-flat-row { padding-left: 22px; border-bottom: 1px solid var(--border); } .lib-movie-flat-row:last-child { border-bottom: none; } .lib-icon-film { width: 16px; height: 16px; stroke: #e8914a; fill: none; stroke-width: 1.5; flex-shrink: 0; } .lib-movie-pill { font-size: 0.68rem; font-weight: 700; color: #e8914a; background: rgba(232, 145, 74, 0.12); border: 1px solid rgba(232, 145, 74, 0.35); border-radius: 99px; padding: 1px 7px; margin-left: 7px; white-space: nowrap; vertical-align: middle; letter-spacing: 0.03em; } /* Collapsible body */ .lib-body { display: none; } .lib-expanded { display: block; } /* Action buttons (appear on hover) */ .lib-actions { display: none; align-items: center; gap: 3px; } .lib-hoverable:hover .lib-actions { display: inline-flex; } .lib-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: background var(--transition), border-color var(--transition); } .lib-action-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lib-btn-rename { color: var(--text-muted); } .lib-btn-rename:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border); } .lib-btn-move { color: var(--text-muted); } .lib-btn-move:hover { background: rgba(99,102,241,0.1); color: #818cf8; border-color: rgba(99,102,241,0.3); } .lib-btn-delete { color: var(--text-muted); } .lib-btn-delete:hover { background: rgba(239,68,68,0.1); color: var(--error); border-color: rgba(239,68,68,0.25); } /* Inline rename input */ .lib-inline-input { background: var(--bg-surface); border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--text-primary); font-size: inherit; font-family: inherit; padding: 2px 6px; width: 220px; outline: none; } .lib-inline-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border); background: transparent; cursor: pointer; font-size: 0.8rem; margin-left: 4px; padding: 0; line-height: 1; } .lib-inline-confirm { color: var(--success); border-color: rgba(34,197,94,0.4); } .lib-inline-confirm:hover { background: rgba(34,197,94,0.1); } .lib-inline-cancel { color: var(--error); border-color: rgba(239,68,68,0.3); } .lib-inline-cancel:hover { background: rgba(239,68,68,0.1); } /* Library sort buttons */ .lib-sort-group { display: flex; gap: 2px; } .lib-sort-btn { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.75rem; font-family: inherit; padding: 4px 9px; cursor: pointer; transition: background var(--transition), color var(--transition); white-space: nowrap; } .lib-sort-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .lib-sort-btn.active { background: var(--accent-soft); border-color: rgba(124,58,237,0.35); color: var(--accent); font-weight: 600; } /* Queue: skip + per-episode retry */ .queue-ep-retry { background: none; border: 1px solid rgba(124,58,237,0.3); border-radius: var(--radius-sm); color: var(--accent); font-size: 0.82rem; font-family: inherit; padding: 2px 7px; cursor: pointer; transition: background var(--transition); } .queue-ep-retry:hover { background: var(--accent-soft); } /* Sync error display */ .sync-error-row { background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 6px; font-size: 0.78rem; color: var(--error); word-break: break-word; line-height: 1.45; } .sync-error-row strong { color: var(--error); margin-right: 4px; } /* Confirm modal */ .confirm-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); padding: 24px 24px 20px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .confirm-modal-msg { margin: 0; font-size: 0.92rem; color: var(--text-primary); line-height: 1.5; } .confirm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; } /* Move modal */ .lib-move-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); padding: 28px 28px 24px; width: min(420px, 90vw); display: flex; flex-direction: column; gap: 18px; } .lib-move-modal h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; } .lib-move-subtitle { font-size: 0.85rem; color: var(--text-secondary); } .lib-move-subtitle strong { color: var(--text-primary); } .lib-move-modal select { width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.88rem; font-family: inherit; padding: 8px 10px; outline: none; cursor: pointer; } .lib-move-modal select:focus { border-color: var(--accent); } .lib-move-actions { display: flex; gap: 8px; justify-content: flex-end; } @media (max-width: 600px) { .lib-title-row { padding-left: 20px; } .lib-season-row { padding-left: 36px; } .lib-episode-row { padding-left: 48px; } .lib-ep-file { max-width: 180px; } } /* =================================================================== Seerr Page =================================================================== */ .seerr-container { max-width: 1100px; margin: 0 auto; padding: 32px; } .seerr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; } .seerr-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; gap: 14px; padding: 14px; transition: border-color var(--transition); } .seerr-card:hover { border-color: rgba(124,58,237,0.35); } .seerr-card-poster { width: 72px; min-width: 72px; height: 108px; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg-elevated); } .seerr-card-poster-placeholder { background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; } .seerr-card-body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; } .seerr-card-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .seerr-card-meta { font-size: 0.78rem; color: var(--text-muted); } .seerr-card-overview { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .seerr-card-req-meta { font-size: 0.74rem; color: var(--text-muted); } .seerr-card-actions { margin-top: 4px; } @media (max-width: 600px) { .seerr-grid { grid-template-columns: 1fr; } } .seerr-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .seerr-card-meta { font-size: 0.78rem; color: var(--text-muted); } .seerr-status-pill { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; } .seerr-status-pending { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.35); color: var(--warning); } .seerr-status-approved { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.35); color: var(--accent); } .seerr-status-declined { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: var(--error); } .seerr-status-available { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.35); color: var(--success); } .seerr-status-processing { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.35); color: var(--info); } .seerr-sentinel { grid-column: 1 / -1; display: flex; justify-content: center; padding: 20px 0 8px; color: var(--text-muted); font-size: 0.85rem; } /* Seerr search modal */ .seerr-search-tabs { display: flex; gap: 6px; margin-bottom: 12px; } .seerr-tab { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.82rem; font-family: inherit; padding: 5px 14px; cursor: pointer; transition: background var(--transition), color var(--transition); } .seerr-tab:hover { background: var(--bg-hover); color: var(--text-primary); } .seerr-tab.active { background: var(--accent-soft); border-color: rgba(124,58,237,0.35); color: var(--accent); font-weight: 600; } .seerr-search-results { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .seerr-search-result { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition); border: 1px solid transparent; } .seerr-search-result:hover { background: var(--bg-hover); border-color: var(--border); } .seerr-search-poster { width: 36px; min-width: 36px; height: 54px; border-radius: 4px; object-fit: cover; background: var(--bg-elevated); } .seerr-search-title { font-size: 0.88rem; color: var(--text-primary); flex: 1; min-width: 0; } .seerr-source-pill { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(124,58,237,0.2); letter-spacing: 0.02em; } /* Browse provider blocks */ .browse-provider-block { margin-bottom: 8px; } .browse-provider-header { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 4px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .browse-provider-header::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .browse-provider-aniworld { color: var(--brand-color); } .browse-provider-aniworld::before { background: var(--brand-color); } .browse-provider-sto { color: var(--info); } .browse-provider-sto::before { background: var(--info); } .browse-provider-filmpalast { color: #e8914a; } .browse-provider-filmpalast::before { background: #e8914a; } /* Search results with provider sections */ .results-provider-section { margin-bottom: 24px; } .results-provider-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 4px 8px; display: flex; align-items: center; gap: 8px; } .results-provider-label::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .provider-aniworld { color: var(--accent); } .provider-aniworld::before { background: var(--accent); } .provider-sto { color: var(--info); } .provider-sto::before { background: var(--info); } .provider-filmpalast { color: #e8914a; } .provider-filmpalast::before { background: #e8914a; } .results-grid { display: flex; flex-wrap: wrap; gap: 12px; } /* =================================================================== MOBILE RESPONSIVE FIXES =================================================================== */ /* ── Mediathek Toolbar ── */ @media (max-width: 640px) { .lib-toolbar { align-items: flex-start; } .lib-toolbar-right { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 6px; } /* push "last scanned" timestamp to its own line at the end */ .lib-last-scanned { width: 100%; order: 10; text-align: right; } } /* ── Mediathek Series / Badges ── */ @media (max-width: 600px) { .lib-badge { font-size: 0.68rem; padding: 1px 5px; } /* hide the size badge on title rows so the series name has room */ .lib-title-row .lib-badge-size { display: none; } } /* ── Settings: API-Key input row ── */ .api-key-input-row { display: flex; gap: 8px; align-items: center; } .api-key-btn-group { display: contents; /* buttons appear directly in the flex row on desktop */ } @media (max-width: 640px) { .api-key-input-row { flex-wrap: wrap; } .api-key-input-row input { flex: 1 1 100%; /* full width, own line */ min-width: 0; } .api-key-btn-group { display: flex; /* buttons sit side-by-side on their own line */ gap: 6px; width: 100%; } .api-key-btn-group button { flex: 1; min-width: 0; font-size: 0.75rem; padding: 0 6px; height: 36px; } .api-endpoints-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .api-param { display: none; } } /* ── Settings: Benutzerverwaltung table scroll ── */ .user-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Tighter cell padding so all columns fit on desktop too */ .user-table th { padding: 10px 14px; } .user-table td { padding: 10px 14px; } @media (max-width: 640px) { .user-table { min-width: 560px; } .user-table th, .user-table td { padding: 8px 10px; white-space: nowrap; font-size: 0.8rem; } } /* ── Seerr: Ablehnen (Reject) button ── */ .btn-reject { display: inline-flex; align-items: center; justify-content: center; background: rgba(239,68,68,0.1); color: var(--error, #ef4444); border: 1px solid rgba(239,68,68,0.35); border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; font-family: inherit; padding: 8px 18px; cursor: pointer; transition: background /* =================================================================== CINEINFO — Browse-Karten, Modal, Integrationsseite =================================================================== */ /* ── Auto-Sync Badge ────────────────────────────────────────────── */ .sync-badge { position: absolute; top: 7px; right: 7px; background: var(--info); color: #fff; font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; line-height: 1.6; letter-spacing: .03em; pointer-events: none; box-shadow: 0 1px 6px rgba(59,130,246,.4); } /* text set via JS textContent */ /* ── Karte: Provider-Badge (nur Text, kein "Marker"-Look) ───────── */ .browse-tmdb-meta { margin-top: 5px; } .tmdb-badge { display: block; font-size: 0.62rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; line-height: 1.5; } /* border + text colour overridden inline by JS brand colour */ .tmdb-badge-provider {} .tmdb-badge-fsk {} /* ── Modal: Poster-Spalte ───────────────────────────────────────── */ .modal-poster-col { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; } /* ── FSK-Pill (gleiche Basis wie .lang-avail-pill) ─────────────── */ .tmdb-fsk-badge { font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; text-align: center; width: 100%; box-sizing: border-box; letter-spacing: .02em; } /* Offizielle FSK-Farben */ .tmdb-fsk-0 { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #e0e0e0; } .tmdb-fsk-6 { background: rgba(234,179,8,.13); border-color: rgba(234,179,8,.4); color: #fbbf24; } /* gelb */ .tmdb-fsk-12 { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.38); color: #4ade80; } /* grün */ .tmdb-fsk-16 { background: rgba(59,130,246,.13); border-color: rgba(59,130,246,.4); color: #60a5fa; } /* blau */ .tmdb-fsk-18 { background: rgba(239,68,68,.13); border-color: rgba(239,68,68,.4); color: #f87171; } /* rot */ .tmdb-fsk-xx { background: rgba(148,163,184,.1); border-color: rgba(148,163,184,.3); color: #94a3b8; } /* unbekannt */ [data-theme="light"] .tmdb-fsk-0 { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.2); color: #374151; } [data-theme="light"] .tmdb-fsk-6 { background: rgba(202,138,4,.1); border-color: rgba(202,138,4,.35); color: #b45309; } [data-theme="light"] .tmdb-fsk-12 { background: rgba(22,163,74,.09); border-color: rgba(22,163,74,.3); color: #15803d; } [data-theme="light"] .tmdb-fsk-16 { background: rgba(37,99,235,.09); border-color: rgba(37,99,235,.3); color: #1d4ed8; } [data-theme="light"] .tmdb-fsk-18 { background: rgba(220,38,38,.09); border-color: rgba(220,38,38,.3); color: #dc2626; } /* ── Modal: Streaming-Anbieter ──────────────────────────────────── */ .tmdb-providers { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 10px; } /* Same base as .lang-avail-pill */ .tmdb-provider-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 99px; border: 1px solid rgba(148,163,184,.3); background: var(--bg-elevated); color: var(--text-secondary); white-space: nowrap; line-height: 1.4; transition: filter .15s, border-color .15s; /* brand colour overridden inline */ } .tmdb-provider-pill:hover { filter: brightness(1.1); } .tmdb-provider-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; /* background set inline */ } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 600px) { .tmdb-provider-pill { font-size: 0.7rem; padding: 2px 8px 2px 6px; } .tmdb-fsk-badge { font-size: 0.68rem; padding: 2px 8px; } .tmdb-badge { font-size: 0.58rem; padding: 1px 6px; } } /* ================================================================= AUTOSYNC PAGE — RESPONSIVE ≤ 640 px ================================================================= */ @media (max-width: 640px) { .autosync-container { padding: 12px; } /* Header: stack title + buttons */ .autosync-container .page-header { flex-direction: column; align-items: flex-start; gap: 10px; } .autosync-container .page-header > div:last-child { width: 100%; } .autosync-container .page-header > div:last-child button, .autosync-container .page-header > div:last-child label.btn { flex: 1; justify-content: center; min-width: 0; } /* Import label: gleiche Höhe wie Export-Button */ .autosync-container label.btn { height: 40px; display: inline-flex; align-items: center; box-sizing: border-box; } /* Batch toolbar */ #batchToolbar { flex-wrap: wrap; padding: 10px 12px; } #batchToolbar button { flex: 1; min-width: 80px; font-size: 0.78rem; } #batchToolbar select { flex: 1; min-width: 100px; } /* Sync cards: single column */ .sync-card-grid { grid-template-columns: 1fr !important; } } /* Autosync header buttons (Export / Import) — identical height & style */ .autosync-hdr-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; box-sizing: border-box; cursor: pointer; white-space: nowrap; } .autosync-import-lbl { cursor: pointer; } /* ── Autosync card checkbox ── */ .sync-card-cb-wrap { display: flex; align-items: flex-start; padding-top: 2px; cursor: pointer; flex-shrink: 0; } .sync-card-cb-wrap input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent, #6366f1); cursor: pointer; }