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. /* 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 { .widget-icon-chip {
display: inline-flex; display: inline-flex;
flex-shrink: 0; flex-shrink: 0;
@@ -443,39 +443,35 @@ input[type="checkbox"], input[type="radio"] {
width: 1.625rem; width: 1.625rem;
height: 1.625rem; height: 1.625rem;
border-radius: 0.4375rem; border-radius: 0.4375rem;
background-color: color-mix(in oklab, var(--primary) 24%, var(--card)); background-color: var(--primary);
color: color-mix(in oklab, var(--primary) 38%, oklch(0.27 0.02 90)); color: var(--primary-foreground);
}
.dark .widget-icon-chip {
background-color: color-mix(in oklab, var(--primary) 16%, var(--card));
color: var(--primary);
} }
/* Karte hebt sich beim Zeigen leicht an (nur Maus, nur Ansicht). */ /* Karte hebt sich beim Zeigen leicht an (nur Maus, nur Ansicht). */
@media (hover: hover) { @media (hover: hover) {
.widget-card { .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 { .widget-card:not(.widget-drag-handle):hover {
translate: 0 -1px; translate: 0 -4px;
box-shadow: 0 0 2px oklch(0 0 0 / 0.12), 0 6px 16px oklch(0 0 0 / 0.12); 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 { .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) { @media (prefers-reduced-motion: no-preference) {
.widget-card { .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); animation-delay: var(--enter-delay, 0ms);
} }
} }
@keyframes widget-enter { @keyframes widget-enter {
from { from {
opacity: 0; opacity: 0;
transform: translateY(6px); transform: translateY(24px) scale(0.97);
} }
to { to {
opacity: 1; opacity: 1;
apps/web/src/components/dashboard/widgets/widget-wrapper.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ export function WidgetWrapper({ widget, isEditMode, onRemove, enterIndex = 0 }:
return ( return (
<article <article
className={cardClassName} className={cardClassName}
style={{ '--enter-delay': `${Math.min(enterIndex, 8) * 40}ms` } as CSSProperties} style={{ '--enter-delay': `${Math.min(enterIndex, 8) * 80}ms` } as CSSProperties}
data-widget-id={widget.id} data-widget-id={widget.id}
aria-label={definition ? t(definition.nameKey) : widget.widgetType} aria-label={definition ? t(definition.nameKey) : widget.widgetType}
> >