D4rkst3randClaude Opus 5
2efc04b0b2
FILTER. Eine Leiste ueber der Galerie: Alles, Bilder, Video, Ton, Dokumente, Anderes -- mit der Anzahl AM KNOPF. Ein Knopf "Video", hinter dem nichts liegt, kostet sonst einen Klick, um das herauszufinden; leere Arten sind deshalb sichtbar, aber gesperrt. Die Uebersetzung Art -> SQL steht an EINER Stelle (ARTEN), weil zwei Stellen zwangslaeufig auseinanderlaufen: die Liste zeigte dann etwas anderes, als der Zaehler daneben behauptet. "Anderes" ist bewusst die VERNEINUNG der uebrigen und keine eigene Liste -- sonst faellt ein neuer Typ durch alle Filter und ist nirgends zu finden. Nachgemessen: die Summe der fuenf Arten ergibt die Gesamtzahl. /media/ids nimmt denselben Filter. Ohne das waehlt "alle waehlen" mehr aus, als zu sehen ist -- und geloescht wuerde Unsichtbares. DER FUND BEIM MESSEN: clip.mp4, ton.mp3, handbuch.pdf und notiz.txt landeten ALLE unter "Anderes". Ein Formularteil ohne erkannte Art traegt "application/octet-stream", und mein Code hat das der Endungstabelle vorgezogen. Was der Absender ueber die Art sagt, gilt weiterhin -- aber nicht sein Achselzucken. Danach: mp4 -> video/mp4, mp3 -> audio/mpeg, pdf und txt -> Dokumente, und .zip bleibt richtigerweise "Anderes". POLITUR. Ein ruhiger Verlauf im Hintergrund statt einer flachen Flaeche (ein einfarbiges Dunkel sieht auf einem grossen Monitor aus wie ein Ladefehler), Bildlaufleisten im Ton der Oberflaeche, ein Balken unter der aktiven Seite, Karten mit einem Hauch Tiefe, ein spuerbarer Druckpunkt an den Knoepfen, und Kacheln, die sich beim Darueberfahren leicht heben. Der Seitenwechsel blendet auf -- und wer prefers-reduced-motion gesetzt hat, bekommt nichts davon. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
91 lines
2.4 KiB
CSS
91 lines
2.4 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* Tailwind 4 ist CSS-first: die Gestaltung steht hier, nicht in einer
|
|
tailwind.config.js. Was unter @theme steht, wird zu Hilfsklassen — aus
|
|
--color-grund wird bg-grund, text-grund, border-grund. */
|
|
@theme {
|
|
--color-grund: #0b0d10;
|
|
--color-flaeche: #14181d;
|
|
--color-flaeche-hoch: #1c222a;
|
|
--color-rand: #2a323c;
|
|
--color-schrift: #e6eaf0;
|
|
--color-schrift-leise: #93a1b1;
|
|
|
|
--color-akzent: #4ea3ff;
|
|
--color-akzent-tief: #1b4f85;
|
|
|
|
--color-gut: #3fb950;
|
|
--color-schlecht: #f85149;
|
|
--color-warn: #d29922;
|
|
|
|
--font-sans:
|
|
ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
|
--font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#wurzel {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-grund);
|
|
color: var(--color-schrift);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Der Fokusrahmen bleibt sichtbar. Ein Dashboard, das sich nur mit der Maus
|
|
bedienen lässt, ist bei 900 Kacheln kein Vergnügen. */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-akzent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-akzent-tief);
|
|
}
|
|
|
|
/* Ein ruhiger Verlauf statt einer flachen Flaeche. Er kostet nichts und nimmt
|
|
dem Dunkel die Pappigkeit — auf einem grossen Monitor sieht ein einfarbiger
|
|
Hintergrund aus wie ein Ladefehler. */
|
|
body {
|
|
background-image: radial-gradient(
|
|
1200px 600px at 50% -10%,
|
|
color-mix(in oklab, var(--color-akzent) 7%, transparent),
|
|
transparent 70%
|
|
);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* Bildlaufleisten im Ton der Oberflaeche. Die hellen Standardleisten von
|
|
Windows reissen in einem dunklen Fenster jedes Mal ein Loch. */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-rand) transparent;
|
|
}
|
|
|
|
/* Was neu hereinkommt, blendet auf. Ohne das springen 60 Kacheln auf einmal
|
|
ins Bild und man sucht die Stelle, an der man war. */
|
|
@keyframes auftauchen {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
}
|
|
|
|
.auftauchen {
|
|
animation: auftauchen 0.18s ease-out;
|
|
}
|
|
|
|
/* Wer das nicht will, bekommt es nicht. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|