@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 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; }