/* EchoArchive v1 — custom CSS overlay * * Applied via /static/branding/custom.css (volume-mounted to * /usr/src/paperless/static/branding/ inside the container). * Referenced from the dashboard via the dashboard-index.html * template override. * * Theme (updated 2026-06-15 per Ravesh): * - background: white * - accent: light blue (#3aa8ff, a softer "EchoPoint sky") * - login button: light blue * - everything else: light blue tones * * V3 changes (2026-06-15 per Ravesh): * - Hides the "EchoArchive" text in the dashboard navbar * (the logo image already contains the brand name) * * Replace with proper EchoPoint brand CSS when the designer asset arrives. */ :root { /* Brand colors */ --ea-accent: #3aa8ff; /* primary light blue */ --ea-accent-dark: #1d8de0; /* hover */ --ea-accent-light: #d6ecff; /* very light blue for backgrounds */ --ea-accent-pale: #eaf5ff; /* near-white blue for hover/selection */ /* Override the upstream Paperless primary HSL with our blue */ --pngx-primary: 207, 100%; /* hue 207 = light blue */ --pngx-primary-lightness: 60%; --pngx-primary-text-contrast: var(--bs-white); --bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness)); --pngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%)); --pngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%)); --pngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%)); --pngx-primary-darken-5: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 5%)); --pngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%)); --pngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%)); --pngx-primary-darken-27: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 27%)); } /* ─── 1. Force white background everywhere ──────────────── */ html, body { background-color: #ffffff !important; background: #ffffff !important; } /* The main content surface (paperless wraps it in a
or .container) */ main, .container, .container-fluid, pngx-app, pngx-root { background-color: #ffffff !important; } /* ─── 2. Primary buttons (login button, "Save" etc) ──────── */ .btn-primary, button[type="submit"].btn-primary, a.btn-primary, .btn-primary:focus, .btn-primary:active { background-color: var(--ea-accent) !important; border-color: var(--ea-accent) !important; color: #ffffff !important; } .btn-primary:hover, button[type="submit"].btn-primary:hover, a.btn-primary:hover { background-color: var(--ea-accent-dark) !important; border-color: var(--ea-accent-dark) !important; color: #ffffff !important; } /* Outline-primary buttons (secondary actions) */ .btn-outline-primary { color: var(--ea-accent-dark) !important; border-color: var(--ea-accent) !important; background-color: transparent !important; } .btn-outline-primary:hover { background-color: var(--ea-accent-pale) !important; color: var(--ea-accent-dark) !important; } /* ─── 3. Links ──────────────────────────────────────────── */ a, .link-primary { color: var(--ea-accent-dark) !important; } a:hover, .link-primary:hover { color: var(--ea-accent) !important; } /* ─── 4. Form controls (subtle blue focus) ──────────────── */ .form-control:focus, .form-select:focus { border-color: var(--ea-accent) !important; box-shadow: 0 0 0 0.2rem rgba(58, 168, 255, 0.25) !important; } /* ─── 5. Sidebar / nav active state (light blue background) ── */ .nav-link.active, .nav-item.active .nav-link, .list-group-item.active { background-color: var(--ea-accent-pale) !important; color: var(--ea-accent-dark) !important; border-color: var(--ea-accent) !important; } /* ─── 6. Subtle polish ───────────────────────────────────── */ .card, .bg-body-secondary { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important; border: 1px solid #f0f4f8 !important; } /* Make headings soft dark for a friendlier feel */ h1, h2, h3, h4, h5, h6, .navbar-brand { color: #1a2a3a; } /* ─── 7. The brand image in the navbar (when APP_LOGO is set) ── */ .navbar-brand img[alt]:not([alt=""]) { /* The Angular component sets height: 6em; override to navbar-appropriate */ max-height: 38px !important; width: auto !important; height: auto !important; } /* ─── 8. Dashboard navbar: hide Paperless leaf, inject our logo ─── */ .navbar-brand svg, pngx-app-header svg[viewBox="0 0 198.43 238.91"] { display: none !important; } .navbar-brand { background-image: url("/static/branding/logo.png") !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: 160px auto !important; padding-left: 175px !important; min-height: 38px !important; display: flex !important; align-items: center !important; } /* The .custom-title element is the "EchoArchive" wordmark text; Ravesh's v3 feedback: the logo image already contains the brand name, so hide the text (don't display: none the parent .flex-column, just the text itself, to preserve layout). */ .navbar-brand .custom-title { display: none !important; } .navbar-brand .flex-column { display: block !important; } /* ─── 9. Hide "by Paperless-ngx" byline in the dashboard navbar ─── */ .navbar-brand .byline, pngx-app-header .byline { display: none !important; }