54 lines
1.9 KiB
CSS
54 lines
1.9 KiB
CSS
/*
|
|
* Dank fleet big-screen theme for jellyfin-web.
|
|
*
|
|
* Deployed by bind-mounting THIS file over the container's "Media Center"
|
|
* theme (`/jellyfin/jellyfin-web/themes/wmc/theme.css`) — see the Volume line
|
|
* in dankserver/jellyfin/quadlet/jellyfin.container. The slot is deliberately
|
|
* one nobody picks by accident, and its name is the only thing that changes:
|
|
* the colors are the live upstream dark theme, pulled in by @import below, so
|
|
* this file never vendors a snapshot of upstream CSS and cannot drift when the
|
|
* Jellyfin image moves.
|
|
*
|
|
* Why it exists: the living-room client (Jellyfin Desktop on danklivingroom)
|
|
* renders this server-served web app at 3840x2160 with no client-side scaling,
|
|
* so 14 px body text lands on a big panel viewed from three metres. `zoom` on
|
|
* the root element is the one lever that scales the whole UI — the layout code
|
|
* measures layout px, so card grids re-flow to fewer, larger columns instead of
|
|
* overflowing.
|
|
*
|
|
* Adoption is per device, not global: Display Settings -> Theme ->
|
|
* "Media Center" on the screen that wants it. That is the point — a phone
|
|
* browser on the same server must not get a 1.75x interface.
|
|
*
|
|
* Change the size by editing the single number. 1.5 is mild, 1.75 is the
|
|
* three-metre default, 2.0 is for a projector.
|
|
*/
|
|
|
|
@import url("../dark/theme.css");
|
|
|
|
:root {
|
|
/* Marker the e2e gate reads back; also a tweak hook for a per-client
|
|
override injected by anyone who really wants one. */
|
|
--dank-big-screen: 1;
|
|
--dank-big-screen-zoom: 1.75;
|
|
}
|
|
|
|
html {
|
|
zoom: var(--dank-big-screen-zoom);
|
|
}
|
|
|
|
/* A remote moves focus in discrete jumps, so the ring has to survive a
|
|
three-metre read. */
|
|
.emby-focus,
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
.inputElement:focus-visible {
|
|
outline: 3px solid var(--accentColor, #00a4dc) !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
/* Scrollbars are mouse furniture; on a TV they are noise at this size. */
|
|
* {
|
|
scrollbar-width: none;
|
|
}
|