schalli/tessera-ctl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

style(web): lebendigere Kacheln deutlich sichtbar - gelber Symbol-Chip, 4px Anheben, spuerbares Einblenden

Browse Source 
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Schalli
2026-09-28 17:26:08 +02:00
parent 8440db8c6e
commit 76d17fe3c9
2 changed files with 11 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/globals.css
+10 -14
View File
@@ -434,7 +434,7 @@ input[type="checkbox"], input[type="radio"] {
}
/* Runde 3 — mehr Leben in den Kacheln, ohne bunt zu werden.
Symbol-Chip: Flaeche und Symbol aus der persoenlichen Akzentfarbe. */
Symbol-Chip: volle Akzentfarbe als Flaeche, Symbol in der passenden Vordergrundfarbe. */
.widget-icon-chip {
display: inline-flex;
flex-shrink: 0;
@@ -443,39 +443,35 @@ input[type="checkbox"], input[type="radio"] {
width: 1.625rem;
height: 1.625rem;
border-radius: 0.4375rem;
background-color: color-mix(in oklab, var(--primary) 24%, var(--card));
color: color-mix(in oklab, var(--primary) 38%, oklch(0.27 0.02 90));
}
.dark .widget-icon-chip {
background-color: color-mix(in oklab, var(--primary) 16%, var(--card));
color: var(--primary);
background-color: var(--primary);
color: var(--primary-foreground);
}
/* Karte hebt sich beim Zeigen leicht an (nur Maus, nur Ansicht). */
@media (hover: hover) {
.widget-card {
transition: box-shadow 160ms ease-out, translate 160ms ease-out;
transition: box-shadow 180ms ease-out, translate 180ms ease-out;
}
.widget-card:not(.widget-drag-handle):hover {
translate: 0 -1px;
box-shadow: 0 0 2px oklch(0 0 0 / 0.12), 0 6px 16px oklch(0 0 0 / 0.12);
translate: 0 -4px;
box-shadow: 0 0 2px oklch(0 0 0 / 0.14), 0 14px 30px oklch(0 0 0 / 0.18);
}
.dark .widget-card:not(.widget-drag-handle):hover {
box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08), 0 8px 20px oklch(0 0 0 / 0.45);
box-shadow: 0 0 0 1px oklch(1 0 0 / 0.12), 0 16px 34px oklch(0 0 0 / 0.6);
}
}
/* Beim Laden blenden die Kacheln gestaffelt ein (je 40 ms, --enter-delay). */
/* Beim Laden blenden die Kacheln gestaffelt ein (je 80 ms, --enter-delay). */
@media (prefers-reduced-motion: no-preference) {
.widget-card {
animation: widget-enter 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
animation: widget-enter 520ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
animation-delay: var(--enter-delay, 0ms);
}
}
@keyframes widget-enter {
from {
opacity: 0;
transform: translateY(6px);
transform: translateY(24px) scale(0.97);
}
to {
opacity: 1;