/* Franchisarr's own styles, layered on top of Pico. * * Dark is the default (matching Radarr/Sonarr/Overseerr) and is set as `data-theme="dark"` on * rather than by overriding Pico's colours here. Pico ships both palettes; Phase 9's * light/dark toggle only has to change that one attribute and remember the choice. Nothing in * this file may assume a dark background. */ :root { --franchisarr-header-border: var(--pico-muted-border-color); } body > header.container { border-bottom: 1px solid var(--franchisarr-header-border); margin-bottom: var(--pico-block-spacing-vertical); } .app-brand { font-weight: 700; text-decoration: none; } .app-nav ul { margin-bottom: 0; } /* Shown while an htmx request is in flight. htmx toggles .htmx-request on the element. */ .htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } footer.container { color: var(--pico-muted-color); font-size: 0.875rem; } .login-card { margin-inline: auto; max-width: 28rem; } .login-error { color: var(--pico-del-color); } /* Keeps the sign-out button inline with the rest of the nav instead of on its own block line. */ .nav-form { display: inline; margin: 0; } .nav-form button { margin: 0; padding: 0.25rem 0.75rem; width: auto; } /* --------------------------------------------------------------------------- * Movie screens. * * Every colour below is a Pico variable, never a literal. That is what lets * theme-adapter.css repaint the whole UI from a theme.park stylesheet without * touching this file. A hex value here would be a hole in the theme. * ------------------------------------------------------------------------ */ .collection-grid { display: grid; gap: var(--pico-spacing); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); } .collection-card { margin-bottom: 0; } .collection-counts { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.875rem; margin-bottom: var(--pico-spacing); } .count-owned { color: var(--pico-muted-color); } .count-missing { color: var(--pico-primary); font-weight: 600; } .count-upcoming { color: var(--pico-muted-color); font-style: italic; } .missing-preview { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; } .film-list { list-style: none; padding: 0; margin: 0; } .film-row { align-items: center; border-bottom: 1px solid var(--pico-muted-border-color); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.6rem 0; } .film-row:last-child { border-bottom: none; } .film-title { flex: 1 1 14rem; } .film-meta { flex: 0 0 auto; font-size: 0.875rem; } .film-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; } .film-actions button { font-size: 0.8rem; margin: 0; padding: 0.3rem 0.7rem; width: auto; } /* Upcoming films are visually quieter than missing ones on purpose: they are not something the * reader can act on today, and giving them equal weight is what made the raw gap list unusable. */ .upcoming-section .film-row { opacity: 0.75; } .owned .film-title::before { color: var(--pico-primary); content: "✓ "; } .muted { color: var(--pico-muted-color); } .notice-good { color: var(--pico-primary); } .notice-bad { color: var(--pico-del-color); } .notice-warn { color: var(--pico-muted-color); } dialog article { max-width: 32rem; } .candidates-panel { margin-top: var(--pico-spacing); } .test-result { flex-basis: 100%; } details > summary { cursor: pointer; margin-block: var(--pico-spacing); } /* Only one of the two glyphs is shown, whichever offers the *other* mode. Driven by the same * data-theme attribute everything else uses, so it stays correct under an external theme. */ .theme-toggle { margin: 0; padding: 0.25rem 0.6rem; width: auto; } [data-theme="light"] .theme-toggle-light, :root:not([data-theme="light"]) .theme-toggle-dark { display: none; }