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

design: Desktop-UI modernisieren (Sidebar, Typografie, Shadows, Buttons)

Browse Source 
- Sidebar: Logo mit Gradient, kompaktere Nav-Items (40px statt 44px),
  kleinere Icons (18px), 2px Gap, bessere Hover/Active-Zustände
- tokens.css: feinere Schatten, Inter im Font-Stack, Sidebar-Breite 256px
- layout.css: Desktop-Content mehr Luft (40px padding), Headings mit
  letter-spacing, Primary-Buttons mit subtiler Elevation
- router.js: Logo-Span für CSS-Gradient-Clip

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-03-25 13:12:29 +01:00
parent b36f2833ef
commit 55a0371505
3 changed files with 44 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/layout.css
+38 -11
View File
@@ -127,22 +127,30 @@
display: flex;
flex-direction: column;
z-index: var(--z-nav);
padding: var(--space-6) 0;
padding: var(--space-5) 0 var(--space-6);
}
.nav-sidebar__logo {
font-size: var(--text-xl);
font-size: var(--text-lg);
font-weight: var(--font-weight-bold);
color: var(--color-accent);
padding: 0 var(--space-6) var(--space-6);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-4);
letter-spacing: -0.3px;
color: var(--color-text-primary);
padding: var(--space-2) var(--space-5) var(--space-5);
margin-bottom: var(--space-2);
}
.nav-sidebar__logo span {
display: inline-block;
background: linear-gradient(135deg, var(--color-accent) 0%, #5856D6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-sidebar__items {
display: flex;
flex-direction: column;
gap: var(--space-1);
gap: 2px;
padding: 0 var(--space-3);
flex: 1;
}
@@ -151,22 +159,34 @@
flex-direction: row;
justify-content: flex-start;
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-3);
padding: var(--space-2) var(--space-3);
gap: var(--space-3);
min-height: 44px;
min-height: 40px;
font-size: var(--text-sm);
color: var(--color-text-secondary);
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-sidebar .nav-item__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.nav-sidebar .nav-item[aria-current="page"] {
background-color: var(--color-accent-light);
color: var(--color-accent);
font-weight: var(--font-weight-semibold);
}
.nav-sidebar .nav-item:hover:not([aria-current="page"]) {
background-color: var(--color-surface-2);
color: var(--color-text-primary);
}
.nav-sidebar .nav-item__label {
font-size: var(--text-base);
font-size: var(--text-sm);
font-weight: inherit;
}
}
@@ -194,7 +214,12 @@
@media (min-width: 1024px) {
.page {
padding: var(--space-8);
padding: var(--space-10) var(--space-10);
}
.page__title {
font-size: var(--text-3xl);
letter-spacing: -0.5px;
}
}
@@ -233,10 +258,12 @@
.btn--primary {
background-color: var(--color-btn-primary);
color: #ffffff;
box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.btn--primary:hover {
background-color: var(--color-btn-primary-hover);
box-shadow: 0 2px 6px rgba(0,102,219,0.28);
}
.btn--secondary {