/* ============================================================================= Paperless-ngx — injected by Apache (proxy/paperless.conf) as /lphl/theme/paperless.css, after the app's own styles ============================================================================= palette: house — what the box runs today — earthy greens, orange with ink on it. Generated from themes/_palettes.json; edit the palette there, not here. The web UI is Angular + Bootstrap 5.3, and — unlike ntfy and FMD — it is themed by variables: theme.scss keeps the primary as an HSL pair (--pngx-primary: "H, S%") plus --pngx-primary-lightness and derives every tint and shade from them by calc(); the grounds are --bs-body-bg / --pngx-bg-alt / --pngx-bg-alt2 / --pngx-bg-darker; the ink on the primary is --pngx-primary-text-contrast. Dark mode is (the user's Dark mode setting) or data-bs-theme="auto" + the OS — the app's own switch, default System; this sheet hangs its dark set off both. Bootstrap's own triplets are comma-separated (rgba(var(--bs-primary-rgb), α)), so the triplets here have commas. Fonts and this file are same-origin under /lphl/ (see proxy/paperless.conf). Untested against the live app. ========================================================================== */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/lphl/fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/lphl/fonts/manrope-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } :root { /* the primary: paperless keeps it as an HSL pair + a lightness and derives faded/lighten/darken from them by calc(). !important so the sheet beats the inline style the Settings → Theme colour field writes on . */ --pngx-primary: 36, 100% !important; --pngx-primary-lightness: 50% !important; --pngx-primary-text-contrast: #16211A !important; --bs-primary: #FF9900; --bs-primary-rgb: 255, 153, 0; --bs-primary-text-emphasis: #7D4A00; --bs-primary-bg-subtle: #FFE7C2; --bs-primary-border-subtle: #FFD290; --lphl-accent-hover: #C77700; --lphl-accent-text: #7D4A00; --lphl-on-tint: #5C3600; /* grounds */ --bs-body-bg: #EDEFEA; --bs-body-bg-rgb: 237, 239, 234; --bs-body-color: #16211A; --bs-body-color-rgb: 22, 33, 26; --bs-emphasis-color: #16211A; --bs-secondary-color: #575F58; --bs-secondary-color-rgb: 87, 95, 88; --bs-tertiary-color: #777E78; --bs-secondary-bg: #F6F6F6; --bs-secondary-bg-rgb: 246, 246, 246; --bs-tertiary-bg: #F6F6F6; --bs-tertiary-bg-rgb: 246, 246, 246; --bs-light: #F6F6F6; --bs-light-rgb: 246, 246, 246; --bs-dark: #16211A; --bs-dark-rgb: 22, 33, 26; --pngx-bg-alt: #FFFFFF; --pngx-bg-alt2: #F6F6F6; --pngx-bg-darker: #E0E3DE; --pngx-bg-disabled: #F6F6F6; --pngx-body-color-accent: #16211A; --pngx-primary-faded: #FFE7C2; --bs-info: #F6F6F6; --bs-info-rgb: 246, 246, 246; --bs-border-color: rgba(22,33,26,.4); --bs-border-color-translucent: rgba(22,33,26,.12); --bs-link-color: #2E6E6B; --bs-link-color-rgb: 46, 110, 107; --bs-link-hover-color: #16211A; --bs-link-hover-color-rgb: 22, 33, 26; --bs-focus-ring-color: #FF9900; --bs-success: #1A403E; --bs-success-bg-subtle: #EAF3F2; --bs-success-text-emphasis: #1A403E; --bs-body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif; --bs-font-sans-serif: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif; --bs-font-monospace: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; --bs-border-radius-2xl: 0; --bs-border-radius-pill: 0; --bs-border-width: 1px; } :root[data-bs-theme="dark"] { /* the primary: paperless keeps it as an HSL pair + a lightness and derives faded/lighten/darken from them by calc(). !important so the sheet beats the inline style the Settings → Theme colour field writes on . */ --pngx-primary: 36, 100% !important; --pngx-primary-lightness: 50% !important; --pngx-primary-text-contrast: #16211A !important; --bs-primary: #FF9900; --bs-primary-rgb: 255, 153, 0; --bs-primary-text-emphasis: #FFC061; --bs-primary-bg-subtle: #5C3600; --bs-primary-border-subtle: #7D4A00; --lphl-accent-hover: #FFB84D; --lphl-accent-text: #FFC061; --lphl-on-tint: #FFD290; /* grounds */ --bs-body-bg: #141A16; --bs-body-bg-rgb: 20, 26, 22; --bs-body-color: #E6E9E3; --bs-body-color-rgb: 230, 233, 227; --bs-emphasis-color: #E6E9E3; --bs-secondary-color: #A7ABA5; --bs-secondary-color-rgb: 167, 171, 165; --bs-tertiary-color: #888C87; --bs-secondary-bg: #2C332E; --bs-secondary-bg-rgb: 44, 51, 46; --bs-tertiary-bg: #2C332E; --bs-tertiary-bg-rgb: 44, 51, 46; --bs-light: #2C332E; --bs-light-rgb: 44, 51, 46; --bs-dark: #E6E9E3; --bs-dark-rgb: 230, 233, 227; --pngx-bg-alt: #1C231E; --pngx-bg-alt2: #2C332E; --pngx-bg-darker: #1C231E; --pngx-bg-disabled: #2C332E; --pngx-body-color-accent: #E6E9E3; --pngx-primary-faded: #5C3600; --bs-info: #2C332E; --bs-info-rgb: 44, 51, 46; --bs-border-color: rgba(230,233,227,.4); --bs-border-color-translucent: rgba(230,233,227,.14); --bs-link-color: #6FAEA9; --bs-link-color-rgb: 111, 174, 169; --bs-link-hover-color: #E6E9E3; --bs-link-hover-color-rgb: 230, 233, 227; --bs-focus-ring-color: #FF9900; --bs-success: #CBE3E1; --bs-success-bg-subtle: #1A403E; --bs-success-text-emphasis: #CBE3E1; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-bs-theme="auto"] { /* the primary: paperless keeps it as an HSL pair + a lightness and derives faded/lighten/darken from them by calc(). !important so the sheet beats the inline style the Settings → Theme colour field writes on . */ --pngx-primary: 36, 100% !important; --pngx-primary-lightness: 50% !important; --pngx-primary-text-contrast: #16211A !important; --bs-primary: #FF9900; --bs-primary-rgb: 255, 153, 0; --bs-primary-text-emphasis: #FFC061; --bs-primary-bg-subtle: #5C3600; --bs-primary-border-subtle: #7D4A00; --lphl-accent-hover: #FFB84D; --lphl-accent-text: #FFC061; --lphl-on-tint: #FFD290; /* grounds */ --bs-body-bg: #141A16; --bs-body-bg-rgb: 20, 26, 22; --bs-body-color: #E6E9E3; --bs-body-color-rgb: 230, 233, 227; --bs-emphasis-color: #E6E9E3; --bs-secondary-color: #A7ABA5; --bs-secondary-color-rgb: 167, 171, 165; --bs-tertiary-color: #888C87; --bs-secondary-bg: #2C332E; --bs-secondary-bg-rgb: 44, 51, 46; --bs-tertiary-bg: #2C332E; --bs-tertiary-bg-rgb: 44, 51, 46; --bs-light: #2C332E; --bs-light-rgb: 44, 51, 46; --bs-dark: #E6E9E3; --bs-dark-rgb: 230, 233, 227; --pngx-bg-alt: #1C231E; --pngx-bg-alt2: #2C332E; --pngx-bg-darker: #1C231E; --pngx-bg-disabled: #2C332E; --pngx-body-color-accent: #E6E9E3; --pngx-primary-faded: #5C3600; --bs-info: #2C332E; --bs-info-rgb: 44, 51, 46; --bs-border-color: rgba(230,233,227,.4); --bs-border-color-translucent: rgba(230,233,227,.14); --bs-link-color: #6FAEA9; --bs-link-color-rgb: 111, 174, 169; --bs-link-hover-color: #E6E9E3; --bs-link-hover-color-rgb: 230, 233, 227; --bs-focus-ring-color: #FF9900; --bs-success: #CBE3E1; --bs-success-bg-subtle: #1A403E; --bs-success-text-emphasis: #CBE3E1; color-scheme: dark; } } /* Settings → Theme colour, if someone sets one, adds body.primary-light / .primary-dark and overrides the ink on the primary with !important; keep ours (more specific, also !important). Leave that field empty — the sheet owns it. */ body, body.primary-light, body.primary-dark { --pngx-primary-text-contrast: var(--lphl-accent-ink) !important; } :root { --lphl-accent-ink: #16211A; } :root[data-bs-theme="dark"] { --lphl-accent-ink: #16211A; } @media (prefers-color-scheme: dark) { :root[data-bs-theme="auto"] { --lphl-accent-ink: #16211A; } } /* the top bar is .navbar.bg-primary: the accent as a field, its own ink on it */ /* v0.9.266 (measured): the app re-declares --bs-primary ON the navbar element (hsl(128,57%,21%) at night), so a var() read there sees the green. The palette's values are set on the element itself. */ .navbar.bg-primary { --pngx-primary: 36, 100% !important; --pngx-primary-lightness: 50% !important; --bs-primary: #FF9900 !important; --pngx-primary-text-contrast: #16211A !important; background-color: #FF9900 !important; background-image: none !important; } /* v0.9.265: in dark the app colours .navbar.bg-primary from a [data-bs-theme=dark]-scoped rule that outranks the plain selector above (measured: green bar at night, accent by day). Same specificity here, same !important. */ html[data-bs-theme="dark"] .navbar.bg-primary { background-color: var(--bs-primary) !important; background-image: none !important; } @media (prefers-color-scheme: dark) { html[data-bs-theme="auto"] .navbar.bg-primary { background-color: var(--bs-primary) !important; background-image: none !important; } } .navbar.bg-primary, .navbar.bg-primary .navbar-brand, .navbar.bg-primary .nav-link, .navbar.bg-primary .btn, .navbar.bg-primary .text-primary-contrast, .navbar.bg-primary .search-container input, .navbar.bg-primary .search-container input::placeholder, .navbar.bg-primary .search-container i-bs { color: var(--pngx-primary-text-contrast) !important; } .navbar.bg-primary .search-container .form-control, .navbar.bg-primary .search-container .input-group-text { background-color: color-mix(in srgb, var(--pngx-primary-text-contrast) 10%, transparent) !important; border-color: color-mix(in srgb, var(--pngx-primary-text-contrast) 30%, transparent) !important; } /* v0.9.267 (measured at night): the user menu drops down INSIDE the bar and inherited the accent's ink onto its own dark ground. Inside a dropdown, text is the body's. */ .navbar.bg-primary .dropdown-menu, .navbar.bg-primary .dropdown-menu .dropdown-item, .navbar.bg-primary .dropdown-menu a, .navbar.bg-primary .dropdown-menu i-bs, .navbar.bg-primary .dropdown-menu svg { color: var(--bs-body-color) !important; } .navbar.bg-primary .dropdown-menu .dropdown-item:hover, .navbar.bg-primary .dropdown-menu .dropdown-item:focus { background-color: var(--pngx-bg-darker) !important; color: var(--bs-body-color) !important; } /* buttons: Bootstrap 5.3 button variables — the accent carries its own ink, labels flush left, weight 800 */ .btn-primary { --bs-btn-color: var(--pngx-primary-text-contrast); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--pngx-primary-text-contrast); --bs-btn-hover-bg: var(--lphl-accent-hover); --bs-btn-hover-border-color: var(--lphl-accent-hover); --bs-btn-active-color: var(--pngx-primary-text-contrast); --bs-btn-active-bg: var(--lphl-accent-hover); --bs-btn-active-border-color: var(--lphl-accent-hover); --bs-btn-disabled-color: var(--pngx-primary-text-contrast); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary.active, .btn-primary:active { color: var(--pngx-primary-text-contrast) !important; } .btn-outline-primary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-body-color); --bs-btn-hover-color: var(--pngx-primary-text-contrast); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-color: var(--pngx-primary-text-contrast); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); border-width: 2px; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.active, .btn-outline-primary:active { color: var(--pngx-primary-text-contrast) !important; } .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--pngx-bg-darker); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-bg: var(--pngx-bg-darker); --bs-btn-active-color: var(--bs-body-color); } .btn-link, .btn-link:hover { --bs-btn-color: var(--lphl-accent-text); --bs-btn-hover-color: var(--bs-body-color); } .btn { --bs-btn-font-weight: 800; text-align: left; } .btn.w-100, .btn.btn-block, .btn.d-block { justify-content: flex-start; } /* the accent as text needs the deep step to pass 4.5:1 on the ground */ .text-primary, a.text-primary { color: var(--lphl-accent-text) !important; } .nav-link.active, .sidebar .nav-link.active, .list-group-item.active { color: var(--lphl-accent-text); background-color: var(--pngx-primary-faded); border-color: var(--pngx-primary-faded); font-weight: 800; } .badge.bg-primary, .badge.text-bg-primary { background-color: var(--bs-primary) !important; color: var(--pngx-primary-text-contrast) !important; } .alert-primary { --bs-alert-color: var(--lphl-on-tint); --bs-alert-bg: var(--bs-primary-bg-subtle); --bs-alert-border-color: var(--bs-primary); } .form-check-input:checked, .form-switch .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .form-control:focus, .form-select:focus, .ng-select-focused .ng-select-container { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 2px var(--bs-primary) !important; } .page-link { --bs-pagination-color: var(--bs-body-color); --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-active-color: var(--pngx-primary-text-contrast); --bs-pagination-hover-bg: var(--pngx-bg-darker); --bs-pagination-hover-color: var(--bs-body-color); } .progress-bar { background-color: var(--bs-primary); color: var(--pngx-primary-text-contrast); } .toast { background-color: var(--pngx-bg-alt) !important; color: var(--bs-body-color) !important; border: 2px solid var(--bs-border-color); } .toast .btn, .toast .btn-close { color: var(--bs-body-color) !important; } .dropdown-menu { --bs-dropdown-bg: var(--pngx-bg-alt); --bs-dropdown-color: var(--bs-body-color); --bs-dropdown-link-color: var(--bs-body-color); --bs-dropdown-link-hover-bg: var(--pngx-bg-darker); --bs-dropdown-link-hover-color: var(--bs-body-color); --bs-dropdown-link-active-bg: var(--pngx-primary-faded); --bs-dropdown-link-active-color: var(--lphl-accent-text); --bs-dropdown-border-color: var(--bs-border-color); --bs-dropdown-border-width: 2px; } .card { --bs-card-bg: var(--pngx-bg-alt); --bs-card-color: var(--bs-body-color); --bs-card-border-color: var(--bs-border-color-translucent); --bs-card-cap-bg: transparent; } .modal-content, .modal-header, .modal-body, .modal-footer { background-color: var(--pngx-bg-alt); border-color: var(--bs-border-color); } .modal-content { border-width: 2px; box-shadow: none; } .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--pngx-bg-alt2); --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: var(--pngx-bg-darker); --bs-table-hover-color: var(--bs-body-color); } .table-row-selected td, .table-row-selected a:not(.badge) { color: var(--lphl-on-tint) !important; background-color: var(--pngx-primary-faded); } .card-selected { outline: 2px solid var(--bs-primary); outline-offset: -2px; } /* flat: no shadows, no rounded corners the variables did not catch */ .card, .dropdown-menu, .modal-content, .toast, .popover, .btn, .form-control, .form-select, .badge, .ng-select-container, .doc-img, .rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5, .rounded-pill, .rounded-circle, .rounded-top, .rounded-bottom, .rounded-start, .rounded-end { border-radius: 0 !important; } .shadow, .shadow-sm, .shadow-lg, .card, .dropdown-menu, .toast, .popover { box-shadow: none !important; } code, pre, kbd, samp, .font-monospace { font-family: var(--bs-font-monospace) !important; } *:focus-visible { outline: 2px solid var(--bs-primary) !important; outline-offset: 2px; } /* v0.9.264 (measured): the login page is a Django template with its own base.css — --pngx-primary as a HEX on body (the app keeps an HSL pair on :root), .btn.btn-primary, an , dark by prefers-color-scheme only. Its has no data-bs-theme; the app's has. Scoped on that. */ html:not([data-bs-theme]) body { --pngx-primary: var(--bs-primary); --pngx-primary-hover: var(--lphl-accent-hover); --pngx-primary-active: var(--lphl-accent-hover); --bs-link-color-rgb: var(--bs-primary-rgb); --bs-body-bg: #EDEFEA; --bs-body-color: #16211A; --bs-border-color: rgba(22,33,26,.4); } html:not([data-bs-theme]) .form-control, html:not([data-bs-theme]) .form-floating { --bs-body-bg: #FFFFFF; } /* v0.9.265: explicit night values (the v0.9.264 line referenced itself and fell back to white) */ @media (prefers-color-scheme: dark) { html:not([data-bs-theme]) body { --bs-body-bg: #141A16; --bs-body-color: #E6E9E3; --bs-border-color: rgba(230,233,227,.4); --pngx-bg-alt: #1C231E; --pngx-bg-darker: #1C231E; } html:not([data-bs-theme]) .form-control, html:not([data-bs-theme]) .form-floating { --bs-body-bg: #1C231E; } html:not([data-bs-theme]) .byline { color: #E6E9E3; } } html:not([data-bs-theme]) .btn.btn-primary { --bs-btn-color: var(--pngx-primary-text-contrast); --bs-btn-hover-color: var(--pngx-primary-text-contrast); --bs-btn-active-color: var(--pngx-primary-text-contrast); } html:not([data-bs-theme]) .btn.btn-secondary { --bs-btn-bg: var(--pngx-bg-alt); --bs-btn-border-color: var(--bs-border-color); --bs-btn-color: var(--bs-body-color); --bs-btn-hover-bg: var(--pngx-bg-darker); --bs-btn-hover-color: var(--bs-body-color); } html:not([data-bs-theme]) .btn { text-align: center; justify-content: center; } html:not([data-bs-theme]) img.logo { content: url('/lphl/theme/brand/lockup-ink.svg'); } @media (prefers-color-scheme: dark) { html:not([data-bs-theme]) img.logo { content: url('/lphl/theme/brand/lockup-paper.svg'); } }