/* * BookScanner admin — matches the mobile app: deep green gradient background, translucent * "glass" green cards with large radii, bright green gradient primary actions, pill filters. * Built on Bootstrap 5.3 dark mode (data-bs-theme="dark" on ). */ :root, [data-bs-theme="dark"] { --bs-app-bg-deep: #020c07; --bs-app-bg: #03140c; --bs-app-bg-top: #073a22; --bs-app-surface: rgba(14, 46, 31, 0.72); --bs-app-surface-strong: rgba(18, 58, 39, 0.88); --bs-app-surface-soft: rgba(255, 255, 255, 0.05); --bs-app-border: rgba(74, 222, 128, 0.14); --bs-app-border-strong: rgba(74, 222, 128, 0.32); --bs-app-green: #22c55e; --bs-app-green-bright: #4ade80; --bs-app-green-soft: #86efac; --bs-app-green-ink: #052e16; --bs-app-text: #f1f7f3; --bs-app-muted: #9fb5a8; --bs-app-danger: #ff6b86; --bs-app-warning: #fcd34d; --bs-app-radius: 20px; --bs-app-radius-sm: 14px; --bs-body-bg: var(--bs-app-bg); --bs-body-color: var(--bs-app-text); --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--bs-app-muted); --bs-tertiary-color: var(--bs-app-muted); --bs-border-color: var(--bs-app-border); --bs-border-color-translucent: var(--bs-app-border); --bs-secondary-bg: rgba(10, 36, 24, 0.9); --bs-tertiary-bg: rgba(10, 36, 24, 0.7); --bs-primary: var(--bs-app-green); --bs-primary-rgb: 34, 197, 94; --bs-link-color: var(--bs-app-green-bright); --bs-link-color-rgb: 74, 222, 128; --bs-link-hover-color: var(--bs-app-green-soft); --bs-link-hover-color-rgb: 134, 239, 172; --bs-code-color: var(--bs-app-green-soft); --bs-danger-rgb: 255, 107, 134; --bs-focus-ring-color: rgba(74, 222, 128, 0.35); --bs-body-font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html { background: var(--bs-app-bg-deep); } body { min-height: 100vh; display: flex; flex-direction: column; color: var(--bs-app-text); background: radial-gradient(900px 420px at 85% -120px, rgba(34, 197, 94, 0.28), transparent 70%), radial-gradient(700px 360px at -10% 0, rgba(16, 122, 70, 0.30), transparent 70%), linear-gradient(180deg, var(--bs-app-bg-top) 0, var(--bs-app-bg) 380px, var(--bs-app-bg-deep) 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } main { flex: 1; } h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { color: #fff; font-weight: 700; letter-spacing: -0.01em; } /* ---------- Navigation ---------- */ .app-navbar { background: rgba(3, 22, 13, 0.72); border-bottom: 1px solid var(--bs-app-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 1020; } .app-navbar .navbar-brand { font-weight: 700; } .app-navbar .nav-link { color: var(--bs-app-muted); border-radius: 999px; padding: 0.4rem 0.9rem !important; margin-right: 0.15rem; transition: background 0.15s, color 0.15s; } .app-navbar .nav-link:hover { color: #fff; background: var(--bs-app-surface-soft); } .app-navbar .nav-link.active { color: var(--bs-app-green-ink); background: var(--bs-app-green-bright); font-weight: 600; } .navbar-brand-mark { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 0.25rem; margin-right: 0.5rem; background: linear-gradient(135deg, var(--bs-app-green-bright), var(--bs-app-green)); box-shadow: 0 0 12px rgba(74, 222, 128, 0.6); } /* ---------- Cards (glass) ---------- */ .card { --bs-card-bg: var(--bs-app-surface); --bs-card-border-color: var(--bs-app-border); --bs-card-border-radius: var(--bs-app-radius); --bs-card-inner-border-radius: calc(var(--bs-app-radius) - 1px); --bs-card-cap-bg: transparent; --bs-card-color: var(--bs-app-text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); overflow: hidden; } .card-header { font-weight: 600; color: #fff; border-bottom-color: var(--bs-app-border); } .card-footer { background: transparent !important; border-top-color: var(--bs-app-border); } .card .fs-3, .card .fs-4 { color: #fff; } /* Clickable stat cards on the dashboard */ a.text-decoration-none { color: inherit; } a.text-decoration-none > .card { transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } a.text-decoration-none:hover > .card { transform: translateY(-2px); border-color: var(--bs-app-border-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 222, 128, 0.15); } .surface { background: var(--bs-app-surface-soft); border-radius: var(--bs-app-radius-sm); } .text-muted-brand { color: var(--bs-app-muted) !important; } .text-danger { color: var(--bs-app-danger) !important; } .text-break-all { word-break: break-all; } /* ---------- Buttons ---------- */ .btn { border-radius: var(--bs-app-radius-sm); font-weight: 600; } .btn-sm { border-radius: 10px; } .btn-primary { --bs-btn-color: var(--bs-app-green-ink); --bs-btn-hover-color: var(--bs-app-green-ink); --bs-btn-active-color: var(--bs-app-green-ink); --bs-btn-disabled-color: var(--bs-app-green-ink); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; background: linear-gradient(180deg, #5eea94 0%, var(--bs-app-green) 100%); box-shadow: 0 6px 18px rgba(34, 197, 94, 0.28); } .btn-primary:hover, .btn-primary:focus-visible { background: linear-gradient(180deg, #74f0a6 0%, #2fd46b 100%); } .btn-outline-primary { --bs-btn-color: var(--bs-app-green-bright); --bs-btn-border-color: var(--bs-app-border-strong); --bs-btn-hover-color: var(--bs-app-green-ink); --bs-btn-hover-bg: var(--bs-app-green-bright); --bs-btn-hover-border-color: var(--bs-app-green-bright); --bs-btn-active-bg: var(--bs-app-green); --bs-btn-active-border-color: var(--bs-app-green); background: rgba(34, 197, 94, 0.06); } .btn-outline-secondary { --bs-btn-color: var(--bs-app-text); --bs-btn-border-color: rgba(255, 255, 255, 0.16); --bs-btn-hover-bg: rgba(255, 255, 255, 0.08); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.24); --bs-btn-hover-color: #fff; background: rgba(255, 255, 255, 0.03); } .btn-outline-danger { --bs-btn-color: var(--bs-app-danger); --bs-btn-border-color: rgba(255, 107, 134, 0.45); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #e8466a; --bs-btn-hover-border-color: #e8466a; } .btn-outline-light { border-radius: 999px; } /* ---------- Pills (view switchers), badges ---------- */ .nav-pills { gap: 0.4rem; } .nav-pills .nav-link { border-radius: 999px; color: var(--bs-app-text); background: var(--bs-app-surface); border: 1px solid var(--bs-app-border); padding: 0.4rem 1rem; } .nav-pills .nav-link:hover { border-color: var(--bs-app-border-strong); } .nav-pills .nav-link.active { color: #fff; background: linear-gradient(180deg, #2bd46e, #16a34a); border-color: transparent; box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3); } .badge { border-radius: 999px; } .badge-state { font-weight: 600; letter-spacing: 0.01em; padding: 0.4em 0.8em; border: 1px solid transparent; } .state-queued { background: rgba(148, 163, 184, 0.16); color: #d5dde6; border-color: rgba(148, 163, 184, 0.25); } .state-running { background: rgba(34, 197, 94, 0.18); color: var(--bs-app-green-soft); border-color: rgba(34, 197, 94, 0.35); } .state-succeeded { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.35); } .state-succeeded_with_warnings { background: rgba(250, 204, 21, 0.14); color: var(--bs-app-warning); border-color: rgba(250, 204, 21, 0.3); } .state-failed { background: rgba(255, 107, 134, 0.16); color: #ffa3b5; border-color: rgba(255, 107, 134, 0.35); } .state-cancelled { background: rgba(148, 163, 184, 0.12); color: #aab6c2; border-color: rgba(148, 163, 184, 0.2); } .state-ready { background: rgba(34, 197, 94, 0.16); color: var(--bs-app-green-soft); border-color: rgba(34, 197, 94, 0.3); } .state-deleting { background: rgba(255, 107, 134, 0.16); color: #ffa3b5; border-color: rgba(255, 107, 134, 0.35); } .state-active { background: rgba(34, 197, 94, 0.16); color: var(--bs-app-green-soft); border-color: rgba(34, 197, 94, 0.3); } .state-inactive { background: rgba(148, 163, 184, 0.12); color: #aab6c2; border-color: rgba(148, 163, 184, 0.2); } .state-suspended { background: rgba(255, 107, 134, 0.16); color: #ffa3b5; border-color: rgba(255, 107, 134, 0.35); } .state-deleted { background: rgba(148, 163, 184, 0.12); color: #aab6c2; border-color: rgba(148, 163, 184, 0.2); } .text-bg-light { background: rgba(255, 255, 255, 0.08) !important; color: var(--bs-app-muted) !important; } /* ---------- Progress (native : no inline styles needed under the CSP) ---------- */ .app-progress { -webkit-appearance: none; appearance: none; width: 7rem; height: 0.5rem; border: 0; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); } .app-progress-lg { width: 100%; height: 0.75rem; } .app-progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.08); border-radius: 999px; } .app-progress::-webkit-progress-value { background: linear-gradient(90deg, #16a34a, #4ade80); border-radius: 999px; } .app-progress::-moz-progress-bar { background: linear-gradient(90deg, #16a34a, #4ade80); border-radius: 999px; } /* ---------- Tables ---------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-app-text); --bs-table-border-color: var(--bs-app-border); --bs-table-hover-bg: rgba(74, 222, 128, 0.05); } .table > thead th { color: var(--bs-app-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom-color: var(--bs-app-border-strong); } .table > tbody > tr { transition: background 0.12s; } .table > tbody > tr:hover > * { background: rgba(74, 222, 128, 0.05); } .table td, .table th { vertical-align: middle; padding-top: 0.85rem; padding-bottom: 0.85rem; } .table .filename { max-width: 28rem; font-weight: 500; } .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--bs-app-border); --bs-list-group-color: var(--bs-app-text); } /* ---------- Forms ---------- */ .form-control, .form-select { background-color: rgba(3, 20, 12, 0.7); border-color: var(--bs-app-border); color: var(--bs-app-text); border-radius: 12px; } .form-control:focus, .form-select:focus { background-color: rgba(3, 20, 12, 0.85); border-color: var(--bs-app-green-bright); box-shadow: 0 0 0 0.2rem rgba(74, 222, 128, 0.2); color: #fff; } .form-control::placeholder { color: rgba(159, 181, 168, 0.6); } .form-label { color: var(--bs-app-muted); } /* ---------- Alerts, breadcrumbs, pagination, misc ---------- */ .alert { border-radius: var(--bs-app-radius-sm); border-width: 1px; } .alert-success { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); color: var(--bs-app-green-soft); } .alert-danger { background: rgba(255, 107, 134, 0.1); border-color: rgba(255, 107, 134, 0.35); color: #ffc2ce; } .alert-secondary { background: var(--bs-app-surface-soft); border-color: var(--bs-app-border); color: var(--bs-app-muted); } .breadcrumb { --bs-breadcrumb-divider-color: var(--bs-app-muted); --bs-breadcrumb-item-active-color: var(--bs-app-muted); } .pagination { --bs-pagination-bg: var(--bs-app-surface); --bs-pagination-border-color: var(--bs-app-border); --bs-pagination-color: var(--bs-app-green-bright); --bs-pagination-hover-bg: rgba(74, 222, 128, 0.1); --bs-pagination-hover-border-color: var(--bs-app-border-strong); --bs-pagination-disabled-bg: var(--bs-app-surface); --bs-pagination-disabled-color: var(--bs-app-muted); --bs-pagination-disabled-border-color: var(--bs-app-border); } code { background: rgba(74, 222, 128, 0.08); padding: 0.1em 0.35em; border-radius: 6px; } dl dt { color: var(--bs-app-muted); font-weight: 500; } .border-top { border-color: var(--bs-app-border) !important; } /* ---------- Auth (admin sign-in) ---------- */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .auth-card { max-width: 26rem; width: 100%; } .auth-card .card { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(74, 222, 128, 0.08), 0 0 80px rgba(34, 197, 94, 0.12); } .auth-card .btn-primary { padding-top: 0.7rem; padding-bottom: 0.7rem; border-radius: 16px; } .site-footer { color: var(--bs-app-muted); font-size: 0.875rem; } .is-hidden { display: none !important; }