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

fix(styles): resolve design system audit violations and touch scrolling

Browse Source 
- Replace hardcoded px values with design tokens (--space-0h, --space-px,
  --space-1, --target-sm/md/lg) across layout, calendar, dashboard CSS
- Fix rgba(255,255,255,0.35) spinner border to use var(--color-glass-hover)
- Fix modal close icon from off-grid 18px to 16px
- Fix touch scrolling on mobile: add min-height: 0 and
  -webkit-overflow-scrolling: touch to .app-content
This commit is contained in:
Ulas
2026-04-05 01:23:38 +02:00
parent b730ece159
commit 72515c5a69
4 changed files with 41 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/layout.css
+18 -15
View File
@@ -95,9 +95,11 @@
* -------------------------------------------------------- */
.app-content {
flex: 1;
min-height: 0;
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}
/* Sidebar auf Mobile verstecken */
@@ -177,7 +179,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
gap: var(--space-0h);
padding: var(--space-1) var(--space-1);
color: var(--color-text-tertiary);
transition: color var(--transition-fast), transform 0.12s ease;
@@ -260,8 +262,8 @@
.page-fab {
bottom: var(--space-8);
right: var(--space-8);
width: 48px;
height: 48px;
width: var(--target-lg);
height: var(--target-lg);
}
}
@@ -288,6 +290,7 @@
.app-content {
flex: 1;
min-height: 0;
padding-bottom: 0;
margin-left: var(--sidebar-width);
transition: margin-left var(--transition-slow);
@@ -327,8 +330,8 @@
/* App-Icon als kompaktes Logo */
.nav-sidebar__logo::before {
content: 'O';
width: 32px;
height: 32px;
width: var(--target-sm);
height: var(--target-sm);
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--color-accent) 0%, #7C5CFC 100%);
color: var(--color-text-on-accent);
@@ -363,7 +366,7 @@
justify-content: center;
align-items: center;
border-radius: var(--radius-sm);
padding: 8px var(--space-2);
padding: var(--space-2) var(--space-2);
gap: 0;
min-height: var(--target-lg);
font-size: var(--text-sm);
@@ -462,7 +465,7 @@
/* Nav-Items: horizontal mit Label */
.nav-sidebar .nav-item {
justify-content: flex-start;
padding: 8px var(--space-3);
padding: var(--space-2) var(--space-3);
gap: var(--space-3);
}
@@ -669,8 +672,8 @@
}
.modal-panel__close {
width: 32px;
height: 32px;
width: var(--target-sm);
height: var(--target-sm);
display: flex;
align-items: center;
justify-content: center;
@@ -748,7 +751,7 @@
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
height: var(--space-1);
background: var(--color-border);
border-radius: var(--radius-full);
}
@@ -908,8 +911,8 @@
@media (min-width: 1024px) {
.fab {
bottom: var(--space-8);
width: 48px;
height: 48px;
width: var(--target-lg);
height: var(--target-lg);
}
}
@@ -1427,8 +1430,8 @@
}
.rrule-day {
width: 40px;
height: 40px;
width: var(--target-md);
height: var(--target-md);
border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border);
background: transparent;
@@ -1514,7 +1517,7 @@
height: 14px;
margin-top: -7px;
margin-left: -7px;
border: 2px solid rgba(255, 255, 255, 0.35);
border: 2px solid var(--color-glass-hover);
border-top-color: var(--color-text-on-accent);
border-radius: var(--radius-full);
animation: btn-spin 0.55s linear infinite;