09d7303eb2
Die Leiste der laufenden Zeiten steht jetzt offen: Wer an der Strecke steht, will sie sehen und nicht erst danach fragen. Und die ganze Zeile ist der Knopf, nicht ein Icon an ihrem Rand — ein 16-px-Ziel neben einer fingerbreiten Zeile ist eine Einladung zum Danebentippen. Der Name der Stage verlinkt dafuer nicht mehr auf ihre Seite: ein Link im Knopf waere weder gueltiges HTML noch eindeutig zu treffen. Im Zeit-Dialog steht der Fahrer als Kachel statt in einer Auswahlliste — die Startnummer gross wie am Trikot (font-startnumber: Impact, mit Haettenschweiler und Arial Narrow Bold als Ersatz), der Name darunter. Eine Liste verlangt aufklappen, zielen und treffen; drei Schritte fuer etwas, das ein Zeitnehmer zwanzigmal am Tag macht. Starten und Stoppen sind Flaechen von 96 px Hoehe, Symbol ueber Wort, statt einer Zeile im Fussbereich. DNF steht daneben, gleich hoch, damit es sich treffen laesst, aber schmaler, damit es nicht versehentlich getroffen wird. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P32KoesVtABd6xWsqMKzhr
162 lines
5.9 KiB
CSS
162 lines
5.9 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* shadcn theme: yellow (oklch) */
|
|
:root {
|
|
--radius: 0.65rem;
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.141 0.005 285.823);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.141 0.005 285.823);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
--primary: oklch(0.795 0.184 86.047);
|
|
--primary-foreground: oklch(0.421 0.095 57.708);
|
|
--secondary: oklch(0.967 0.001 286.375);
|
|
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
--muted: oklch(0.967 0.001 286.375);
|
|
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
--accent: oklch(0.967 0.001 286.375);
|
|
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.92 0.004 286.32);
|
|
--input: oklch(0.92 0.004 286.32);
|
|
--ring: oklch(0.795 0.184 86.047);
|
|
--chart-1: oklch(0.646 0.222 41.116);
|
|
--chart-2: oklch(0.6 0.118 184.704);
|
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
--sidebar-primary: oklch(0.795 0.184 86.047);
|
|
--sidebar-primary-foreground: oklch(0.421 0.095 57.708);
|
|
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
--sidebar-ring: oklch(0.795 0.184 86.047);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.141 0.005 285.823);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.21 0.006 285.885);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.21 0.006 285.885);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.852 0.199 91.936);
|
|
--primary-foreground: oklch(0.421 0.095 57.708);
|
|
--secondary: oklch(0.274 0.006 286.033);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.274 0.006 286.033);
|
|
--muted-foreground: oklch(0.705 0.015 286.067);
|
|
--accent: oklch(0.274 0.006 286.033);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.554 0.135 66.442);
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.21 0.006 285.885);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.852 0.199 91.936);
|
|
--sidebar-primary-foreground: oklch(0.421 0.095 57.708);
|
|
--sidebar-accent: oklch(0.274 0.006 286.033);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.554 0.135 66.442);
|
|
}
|
|
|
|
@theme inline {
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
|
|
/*
|
|
* Tailwind 4 nimmt Knöpfen den Zeigefinger und überlässt sie dem
|
|
* Browser-Standard — was am Ende ein Pfeil ist, der nichts verspricht.
|
|
* Hier steht er wieder, ein für alle Mal und nicht als Klasse an jedem
|
|
* einzelnen Element: Was sich anklicken lässt, sieht auch so aus.
|
|
*
|
|
* `label[for]` ist mitgemeint, weil versteckte Eingabefelder über ihr
|
|
* Label bedient werden — etwa das Profilbild in den Einstellungen.
|
|
*/
|
|
button,
|
|
summary,
|
|
label[for],
|
|
[role='button'],
|
|
[role='menuitem'],
|
|
[role='option'],
|
|
[role='tab'] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Abgeschaltet heißt abgeschaltet — ein Zeigefinger verspräche dort zu viel. */
|
|
button:disabled,
|
|
[aria-disabled='true'],
|
|
[data-disabled] {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/*
|
|
* Startnummern wie am Trikot: schmal, fett, ohne Zierrat. Impact ist auf
|
|
* Windows und macOS da, Haettenschweiler und Arial Narrow Bold springen
|
|
* ein; am Ende steht eine beliebige serifenlose Schrift, dann sieht die
|
|
* Nummer eben normal aus statt falsch.
|
|
*/
|
|
.font-startnumber {
|
|
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Franklin Gothic Bold', sans-serif;
|
|
font-weight: 700;
|
|
font-stretch: condensed;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
}
|