openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

design: Frontend-Redesign v2 — Design-System, kompaktere UI, Mikrointeraktionen

Browse Source 
Umfassendes Redesign des gesamten Frontends in 9 Schritten:

1. Design-Tokens: Neutral-Farbskala (50–950), Modul-Akzentfarben,
   --text-2xs Token, Easing-Kurven, Z-Index-System, Dark-Mode-Overrides
2. Reset: Reduced-motion Query (prefers-reduced-motion)
3. Sidebar/Navigation: Flaches Design, Glassmorphismus Bottom-Nav,
   Akzentstreifen-Indikator, collapsed/expanded States
4. Layout-Grid: Master-Detail, Content-Aside, Sticky-Header-Primitives
5. Cards/Container: Einheitliches Card-Pattern, Modal-System (Bottom-Sheet
   mobil, zentriert Desktop), Skeleton-Loading, Empty-States
6. Dashboard: Kompaktere Widgets, Token-basierte Farben/Schatten,
   4-Spalten-Grid ab 1440px
7. Module: Mobile-first Kanban/Day-Slots/Budget-Summary, border-subtle
   für sekundäre Trennlinien, responsive Quick-Add, Token-Migration
   aller hardcoded px/rgba-Werte
8. Mikrointeraktionen: Page-out Fade, Checkbox-Pop-Animation,
   Hover-States für Filter/Tabs/Toggles, Toast-Ausblendung,
   done-State Opacity-Transition
9. Feinschliff: Print-Styles, --text-2xs Token für Micro-Labels,
   Konsistenz-Audit (alle 9/10/11px → Token)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-03-25 20:46:45 +01:00
parent 1bea4f1428
commit 76165da592
14 changed files with 1197 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/shopping.css
+20 -6
View File
@@ -55,6 +55,11 @@
min-height: 36px;
}
.list-tab:hover:not(.list-tab--active) {
border-color: var(--color-text-secondary);
color: var(--color-text-primary);
}
.list-tab--active {
background-color: var(--color-accent);
border-color: var(--color-accent);
@@ -149,7 +154,7 @@
.quick-add__input {
width: 100%;
padding: var(--space-3) var(--space-4);
padding-right: 80px;
padding-right: var(--space-20, 80px);
border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border);
background-color: var(--color-surface);
@@ -187,7 +192,9 @@
}
.quick-add__cat {
width: 130px;
width: auto;
min-width: 100px;
max-width: 160px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border);
@@ -274,7 +281,7 @@
text-transform: uppercase;
letter-spacing: 0.06em;
padding: var(--space-2) 0 var(--space-1);
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border-subtle);
margin-bottom: var(--space-1);
display: flex;
align-items: center;
@@ -293,10 +300,10 @@
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-1);
border-bottom: 1px solid var(--color-border);
padding: var(--space-2) var(--space-1);
border-bottom: 1px solid var(--color-border-subtle);
transition: opacity var(--transition-fast);
min-height: 48px;
min-height: 44px;
}
.shopping-item:last-child { border-bottom: none; }
@@ -324,6 +331,13 @@
.item-check--checked {
background-color: var(--color-success);
border-color: var(--color-success);
animation: check-pop 0.2s var(--ease-out);
}
@keyframes check-pop {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.item-check__icon {