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/notes.css
+14 -14
View File
@@ -77,12 +77,12 @@
}
.note-card:hover {
transform: translateY(-2px);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.note-card--pinned {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
box-shadow: var(--shadow-md);
}
.note-card__pin {
@@ -92,7 +92,7 @@
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background: rgba(0,0,0,0.1);
background: var(--color-overlay-light);
border: none;
cursor: pointer;
display: flex;
@@ -101,12 +101,12 @@
min-height: unset;
opacity: 0;
transition: opacity var(--transition-fast), background-color var(--transition-fast);
color: rgba(0,0,0,0.6);
color: var(--color-text-primary);
}
.note-card--pinned .note-card__pin {
opacity: 1;
background: rgba(0,0,0,0.15);
background: var(--color-overlay-light);
}
.note-card:hover .note-card__pin {
@@ -114,21 +114,21 @@
}
.note-card__pin:hover {
background: rgba(0,0,0,0.2);
background: var(--color-overlay);
}
.note-card__title {
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1);
color: rgba(0,0,0,0.8);
color: var(--color-text-primary);
padding-right: var(--space-6);
}
.note-card__content {
font-size: var(--text-sm);
line-height: var(--line-height-relaxed);
color: rgba(0,0,0,0.75);
color: var(--color-text-secondary);
word-break: break-word;
white-space: pre-wrap;
}
@@ -143,7 +143,7 @@
justify-content: space-between;
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid rgba(0,0,0,0.08);
border-top: 1px solid var(--color-border-subtle);
}
.note-card__creator {
@@ -151,7 +151,7 @@
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: rgba(0,0,0,0.5);
color: var(--color-text-tertiary);
}
.note-card__avatar {
@@ -171,14 +171,14 @@
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background: rgba(0,0,0,0.08);
background: var(--color-overlay-light);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-height: unset;
color: rgba(0,0,0,0.5);
color: var(--color-text-tertiary);
opacity: 0;
transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
@@ -188,7 +188,7 @@
}
.note-card__delete:hover {
background: rgba(255,59,48,0.2);
background: var(--color-danger-light);
color: var(--color-danger);
}
@@ -219,7 +219,7 @@
.note-modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0,0,0,0.5);
background-color: var(--color-overlay);
z-index: var(--z-modal);
display: flex;
align-items: flex-end;