diff --git a/web/src/components/AppHeader.tsx b/web/src/components/AppHeader.tsx
index 969ab00..f5d5456 100644
--- a/web/src/components/AppHeader.tsx
+++ b/web/src/components/AppHeader.tsx
@@ -1,5 +1,6 @@
import type { ReactNode } from "react";
+import { SKIN } from "../lib/skins";
import { SHOW_APP_TITLE } from "../lib/theme";
interface Props {
@@ -12,8 +13,8 @@ interface Props {
}
export function AppHeader({
- title = "Musik Delfin",
- mascot = "/dolphin-mascot.png",
+ title = SKIN.appName,
+ mascot = SKIN.mascot,
status,
compact = false,
}: Props) {
@@ -58,7 +59,7 @@ export function AppHeader({
fontSize: compact ? 28 : 34,
fontWeight: 900,
color: "var(--paper)",
- textShadow: "0 3px 14px oklch(15% 0.05 210 / .5)",
+ textShadow: "0 3px 14px oklch(15% 0.05 var(--hue) / .5)",
}}
>
{title}
diff --git a/web/src/components/BrowseView.tsx b/web/src/components/BrowseView.tsx
index 9d4b435..ca4ec3c 100644
--- a/web/src/components/BrowseView.tsx
+++ b/web/src/components/BrowseView.tsx
@@ -20,6 +20,7 @@ import {
import { clock } from "../lib/format";
import type { Category, Group, Results, SearchIndex, SongHit } from "../lib/search";
import { categoryMatches, effectiveSearch, groupOf } from "../lib/search";
+import { SKIN } from "../lib/skins";
import {
ANIMATE_VIEW_TRANSITIONS,
glassTint,
@@ -260,7 +261,7 @@ function BrowseViewImpl({
textAlign: "center",
fontSize: 14,
fontWeight: 700,
- color: "oklch(88% 0.02 210 / .6)",
+ color: "oklch(88% 0.02 var(--hue) / .6)",
}}
>
Noch nichts hier
@@ -400,7 +401,7 @@ function BrowseViewImpl({
style={{
fontSize: 12,
fontWeight: 700,
- color: "oklch(88% 0.02 210 / .65)",
+ color: "oklch(88% 0.02 var(--hue) / .65)",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
@@ -412,7 +413,7 @@ function BrowseViewImpl({
{clock(hit.duration)}
@@ -540,7 +541,7 @@ function BrowseViewImpl({
style={{
fontSize: 16,
fontWeight: 800,
- color: "oklch(22% 0.03 210)",
+ color: "oklch(22% 0.03 var(--hue))",
lineHeight: 1.2,
}}
>
@@ -551,7 +552,7 @@ function BrowseViewImpl({
style={{
fontSize: 12,
fontWeight: 700,
- color: "oklch(40% 0.03 210)",
+ color: "oklch(40% 0.03 var(--hue))",
marginTop: 4,
lineHeight: 1.3,
}}
@@ -566,7 +567,7 @@ function BrowseViewImpl({
style={{
fontSize: 16,
fontWeight: 800,
- color: "oklch(22% 0.03 210)",
+ color: "oklch(22% 0.03 var(--hue))",
lineHeight: 1.2,
height: `${titleLines * 1.2}em`,
display: "-webkit-box",
@@ -582,7 +583,7 @@ function BrowseViewImpl({
style={{
fontSize: 13,
fontWeight: 700,
- color: "oklch(30% 0.03 210)",
+ color: "oklch(30% 0.03 var(--hue))",
marginTop: 2,
whiteSpace: "nowrap",
overflow: "hidden",
@@ -596,7 +597,7 @@ function BrowseViewImpl({
style={{
fontSize: 12,
fontWeight: 800,
- color: "oklch(40% 0.17 340)",
+ color: "oklch(40% 0.17 var(--accent-hue))",
marginTop: 6,
}}
>
@@ -623,11 +624,11 @@ function BrowseViewImpl({
style={{
textAlign: "center",
marginTop: 60,
- color: "oklch(92% 0.02 210 / .8)",
+ color: "oklch(92% 0.02 var(--hue) / .8)",
}}
>
@@ -823,7 +824,7 @@ export function CategoryTile({
style={{
fontSize: 12,
fontWeight: 800,
- color: "oklch(40% 0.17 340)",
+ color: "oklch(40% 0.17 var(--accent-hue))",
marginTop: 5,
}}
>
@@ -871,7 +872,7 @@ function Muted({ children }: { children: ReactNode }) {
style={{
fontSize: 13,
fontWeight: 700,
- color: "oklch(88% 0.02 210 / .7)",
+ color: "oklch(88% 0.02 var(--hue) / .7)",
}}
>
{children}
diff --git a/web/src/components/Bubbles.tsx b/web/src/components/Bubbles.tsx
deleted file mode 100644
index dff5250..0000000
--- a/web/src/components/Bubbles.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/** The ambient bubble field. Positions are fixed so they do not reshuffle on render. */
-
-const BUBBLES: Array<[left: number, size: number, alpha: number, seconds: number, delay: number]> =
- [
- [5, 14, 0.5, 9, 0], [15, 22, 0.4, 12, 2], [28, 10, 0.5, 7, 1], [42, 18, 0.45, 10, 4],
- [58, 12, 0.5, 8, 3], [70, 26, 0.35, 13, 5], [82, 16, 0.5, 9.5, 1.5], [92, 10, 0.5, 6.5, 2.5],
- [2, 8, 0.45, 7.5, 3.5], [9, 18, 0.3, 14, 6], [21, 12, 0.5, 8.5, 5.5], [34, 24, 0.32, 12.5, 1.2],
- [38, 9, 0.5, 6.8, 4.6], [48, 14, 0.42, 10.5, 0.6], [53, 20, 0.3, 13.5, 7], [63, 8, 0.5, 7.2, 2.2],
- [66, 16, 0.38, 11.5, 5.2], [76, 11, 0.48, 9.2, 6.4], [87, 22, 0.28, 15, 3.2],
- [96, 14, 0.42, 10.8, 8], [45, 7, 0.5, 6.2, 7.6],
- ];
-
-export function Bubbles() {
- return (
- <>
- {BUBBLES.map(([left, size, alpha, seconds, delay], index) => (
-
- ))}
-
- );
-}
diff --git a/web/src/components/Cover.tsx b/web/src/components/Cover.tsx
index 76ca006..9cfeb79 100644
--- a/web/src/components/Cover.tsx
+++ b/web/src/components/Cover.tsx
@@ -85,7 +85,7 @@ export function Cover({ album, size, fit = "width", radius, className, style, la
fontWeight: 900,
lineHeight: 1.15,
color: "oklch(99% 0 0 / .92)",
- textShadow: "0 2px 8px oklch(15% 0.05 210 / .6)",
+ textShadow: "0 2px 8px oklch(15% 0.05 var(--hue) / .6)",
overflow: "hidden",
}}
>
diff --git a/web/src/components/Drift.tsx b/web/src/components/Drift.tsx
new file mode 100644
index 0000000..acad66b
--- /dev/null
+++ b/web/src/components/Drift.tsx
@@ -0,0 +1,64 @@
+/** A decorative field drifting behind a page: rising bubbles for the dolphin, falling
+ * leaves for the dinosaur (`drift` in the skin). The room page and the typing game each
+ * pass their own fixed table, so positions do not reshuffle on render; the play view's
+ * moving field is a canvas of its own (`Ambience.tsx`). */
+
+import { SKIN } from "../lib/skins";
+
+/** [left %, size px, opacity, seconds, delay seconds] */
+export type DriftField = readonly (readonly [number, number, number, number, number])[];
+
+interface Props {
+ field: DriftField;
+ /** A bubble's fill at the given opacity - each page tints its own. */
+ bubbleColor: (alpha: number) => string;
+}
+
+const LEAVES = ["🍃", "🌿", "🍂"];
+
+export function Drift({ field, bubbleColor }: Props) {
+ const leaves = SKIN.drift === "leaves";
+ // The wrapper is load-bearing, not tidiness. Each bubble starts at `bottom: -40px`,
+ // and an absolutely positioned child still counts toward its container's scrollHeight
+ // - so without this, twelve decorative bubbles made `.stage` 40px taller than the
+ // viewport. `.stage` hides that overflow, but a hidden overflow is still scrollable:
+ // focusing the result sheet's button scrolled the whole app up and pushed the header
+ // off the top of the screen. Clipping them here keeps the stage exactly one screen.
+ return (
+
+ {field.map(([left, size, alpha, seconds, delay], i) =>
+ leaves ? (
+ // A leaf is an opaque glyph rather than a translucent disc, so it gets a larger
+ // size and a stronger opacity to read as present-but-quiet like a bubble does,
+ // and falls a little slower than a bubble rises.
+
+ {LEAVES[i % LEAVES.length]}
+
+ ) : (
+
+ ),
+ )}
+
+ );
+}
diff --git a/web/src/components/HelpOverlay.tsx b/web/src/components/HelpOverlay.tsx
index de0195f..c20b6c8 100644
--- a/web/src/components/HelpOverlay.tsx
+++ b/web/src/components/HelpOverlay.tsx
@@ -78,7 +78,7 @@ export function HelpOverlay({ onClose }: { onClose: () => void }) {
fontWeight: 800,
textTransform: "uppercase",
letterSpacing: 1,
- color: "oklch(50% 0.03 210 / .8)",
+ color: "oklch(50% 0.03 var(--hue) / .8)",
}}
>
{title}
@@ -92,7 +92,7 @@ export function HelpOverlay({ onClose }: { onClose: () => void }) {
))}