dtourolle
ad48d89dfe
Formatting was configured but never enforced: `bun run format:check` reported 199 unformatted files and ran in no workflow and in no git hook, so .prettierrc (printWidth 100, trailing commas) described an intention rather than the tree. This is the one-time sweep that makes the check gateable. Whitespace and token-reflow only -- no behavioural change: `bun run check` reports 0 errors and all 1053 frontend tests pass before and after. Kept out of every other commit on purpose. A 199-file diff mixed with real changes is unreviewable, and the next commit turns format:check into a hard CI gate so this cannot silently accumulate again.
86 lines
3.3 KiB
CSS
86 lines
3.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Exclude the generated tauri-specta bindings from Tailwind's content scan.
|
|
It contains no CSS classes (only TS types/command wrappers), and scanning a
|
|
large generated file can confuse Tailwind v4's automatic class detection. */
|
|
@source not "./lib/api/bindings.ts";
|
|
|
|
/* Custom theme variables for JellyTau */
|
|
@theme {
|
|
--color-jellyfin: #00a4dc;
|
|
--color-jellyfin-dark: #0085b3;
|
|
--color-background: #101010;
|
|
--color-surface: #1a1a1a;
|
|
--color-surface-hover: #252525;
|
|
}
|
|
|
|
/* Safe-area insets — the single source of edge padding for the whole app.
|
|
*
|
|
* TRACES: UR-066 | DR-112
|
|
*
|
|
* Two independent sources have to be folded together:
|
|
*
|
|
* - `env(safe-area-inset-*)` — iOS/desktop, and the *display cutout* on
|
|
* Android. Requires `viewport-fit=cover` (see src/app.html) or it is 0px.
|
|
* - `var(--jt-inset-*)` — real Android `WindowInsets` (status bar, navigation/
|
|
* gesture bar, cutout) pushed in from Kotlin, because Android WebView never
|
|
* reports the *system bars* through `env()`. See WindowInsetsBridge.kt and
|
|
* $lib/utils/safeArea.ts.
|
|
*
|
|
* `max()` takes whichever is real on this platform; both are 0 on desktop.
|
|
* Consumers must use `--safe-*` and never `env()` directly — a bare `env()` is
|
|
* silently 0 for the Android system bars, which is what put the bottom nav
|
|
* under the navigation bar on 3-button-nav devices.
|
|
*
|
|
* Applied at the edges that own them: the app shell (top/left/right) and
|
|
* BottomUi (bottom, so its surface colour extends behind the gesture bar).
|
|
* Deliberately NOT applied to `body` — the shell is `h-screen`, and body
|
|
* padding would push 100vh past the viewport, and `position: fixed` overlays
|
|
* (the video/audio players) ignore body padding anyway.
|
|
*/
|
|
:root {
|
|
--safe-top: max(env(safe-area-inset-top, 0px), var(--jt-inset-top, 0px));
|
|
--safe-right: max(env(safe-area-inset-right, 0px), var(--jt-inset-right, 0px));
|
|
--safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--jt-inset-bottom, 0px));
|
|
--safe-left: max(env(safe-area-inset-left, 0px), var(--jt-inset-left, 0px));
|
|
}
|
|
|
|
/* Global styles */
|
|
html,
|
|
body {
|
|
@apply h-full;
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
/* Native-video compositing (Android).
|
|
*
|
|
* TRACES: UR-003, UR-004 | DR-150
|
|
*
|
|
* When ExoPlayer renders into a SurfaceView *behind* the WebView, every opaque
|
|
* layer between the viewport and that surface hides the video. The WebView
|
|
* itself is made transparent by `"transparent": true` in
|
|
* tauri.android.conf.json; these rules clear the app's own painted backgrounds.
|
|
*
|
|
* Scoped to `[data-native-video="active"]` — set on <html> by
|
|
* $lib/stores/nativeVideo.ts only while a native video session is on screen —
|
|
* because every other screen genuinely needs its opaque background. The app
|
|
* shell (+layout.svelte) also paints --color-background across the viewport, so
|
|
* it is cleared here too; the shell is the layer directly over the surface.
|
|
*
|
|
* `background: transparent` (not a colour) is required: an alpha-0 colour still
|
|
* composites in some WebView versions.
|
|
*/
|
|
html[data-native-video="active"],
|
|
html[data-native-video="active"] body,
|
|
html[data-native-video="active"] [data-app-shell] {
|
|
background: transparent !important;
|
|
}
|
|
|
|
body {
|
|
@apply text-white antialiased;
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
sans-serif;
|
|
}
|