Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style: UI modernisiert – weniger Tabellen-Look, mehr Tiefe

Browse Source 
- Größere Radien (Karten 14px, Inputs 9px, Event-Chips 6px)
- Geschichtete Dark-Flächen + weiche Schatten statt harter 1px-Linien
- Primär-Buttons mit dezentem Verlauf/Glow, segmentierter View-Switcher
- Sanfte Hover-/Press-/Modal-Animationen (respektiert prefers-reduced-motion)
- Fokus-Ringe für Buttons/Inputs (A11y), feinerer System-Font-Stack
- Fix: --bg-2 / --bg-card definiert (Quartalskarten & Wiederholungs-Buttons)

Theme-Variablen (Farben/Kontrast aus den Einstellungen) bleiben unangetastet.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-05-30 21:37:54 +02:00
parent e744b1829e
commit a60c27f66f
1 changed files with 69 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/css/app.css
View File

@@ -9,38 +9,50 @@
--accent: #ea4335;
--today-color: #4285f4;
--bg-app: #0e0e14;
--bg-topbar: #18181f;
--bg-sidebar: #18181f;
--bg-surface: #22222c;
--bg-hover: #2a2a38;
--bg-active: #32324a;
/* Layered surfaces — subtly cool-tinted, slightly more depth between layers
so panels read via elevation instead of hard table-like 1px borders */
--bg-app: #0c0c13;
--bg-topbar: #14141d;
--bg-sidebar: #14141d;
--bg-surface: #1d1d2a;
--bg-2: #16161f; /* used by quarter month cards */
--bg-card: #1d1d2a; /* used by recurrence day buttons */
--bg-hover: #262636;
--bg-active: #31314f;
--text-1: #e8e8f0;
--text-2: #9090aa;
--text-3: #55556a;
--border: #2e2e40;
--border-light: #242438;
--scrollbar: #30303c;
--scrollbar: #36364a;
--topbar-h: 64px;
--sidebar-w: 256px;
--shadow: 0 2px 12px rgba(0,0,0,.45);
--shadow-lg: 0 8px 28px rgba(0,0,0,.55);
--radius: 8px;
--radius-sm: 4px;
--transition: .15s ease;
--shadow-sm: 0 1px 3px rgba(0,0,0,.30);
--shadow: 0 6px 20px rgba(0,0,0,.40);
--shadow-lg: 0 16px 44px rgba(0,0,0,.55);
--radius-lg: 20px;
--radius: 14px;
--radius-sm: 9px;
--transition: .18s cubic-bezier(.4, 0, .2, 1);
--ring: 0 0 0 3px var(--primary-dim);
}
/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
font-family: 'Google Sans', 'Roboto', system-ui, sans-serif;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', system-ui, sans-serif;
background: var(--bg-app);
color: var(--text-1);
font-size: 14px;
line-height: 1.5;
letter-spacing: .1px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
@@ -59,14 +71,21 @@ a { color: var(--primary); text-decoration: none; }
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: 20px;
font-weight: 500; transition: background var(--transition), color var(--transition);
font-weight: 500;
transition: background var(--transition), color var(--transition),
box-shadow var(--transition), transform var(--transition),
filter var(--transition);
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary {
background: var(--primary);
background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 80%, #14141d));
color: #fff;
box-shadow: 0 2px 10px var(--primary-dim);
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:hover { filter: brightness(1.10); box-shadow: 0 5px 18px var(--primary-dim); }
.btn-secondary {
background: var(--bg-surface);
color: var(--text-1);
@@ -93,11 +112,14 @@ a { color: var(--primary); text-decoration: none; }
.icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
color: var(--text-2); transition: background var(--transition);
color: var(--text-2);
transition: background var(--transition), color var(--transition), transform var(--transition);
flex-shrink: 0;
}
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.icon-btn:active { transform: scale(.92); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }
/* ── Auth Screens ───────────────────────────────────────── */
.auth-screen {
@@ -144,11 +166,12 @@ a { color: var(--primary); text-decoration: none; }
padding: 10px 12px;
color: var(--text-1);
outline: none;
transition: border-color var(--transition);
transition: border-color var(--transition), box-shadow var(--transition);
width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
border-color: var(--primary);
box-shadow: var(--ring);
}
.form-group textarea { resize: vertical; }
@@ -289,7 +312,8 @@ a { color: var(--primary); text-decoration: none; }
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: var(--topbar-h);
background: var(--bg-topbar);
border-bottom: 1px solid var(--border);
border-bottom: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
display: flex; align-items: center;
padding: 0 8px;
gap: 8px;
@@ -302,15 +326,16 @@ a { color: var(--primary); text-decoration: none; }
.view-title { font-size: 20px; font-weight: 400; color: var(--text-1); white-space: nowrap; padding-left: 8px; }
.topbar-right { display: flex; align-items: center; gap: 4px; }
.view-switcher { display: flex; background: var(--bg-surface); border-radius: 20px; overflow: hidden; border: 1px solid var(--border); }
.view-switcher { display: flex; gap: 2px; padding: 3px; background: var(--bg-surface); border-radius: 22px; border: 1px solid var(--border-light); }
.view-btn {
padding: 6px 14px; font-size: 13px; font-weight: 500;
color: var(--text-2);
transition: background var(--transition), color var(--transition);
border-radius: 20px;
transition: background var(--transition), color var(--transition), box-shadow var(--transition);
border-radius: 18px;
}
.view-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.view-btn.active { background: var(--primary-dim); color: var(--primary); }
.view-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.view-btn.active { background: var(--primary-dim); color: var(--primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary-dim); }
.user-menu-wrapper { position: relative; }
.user-avatar {
@@ -353,7 +378,7 @@ a { color: var(--primary); text-decoration: none; }
.sidebar {
width: var(--sidebar-w);
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
border-right: 1px solid var(--border-light);
flex-shrink: 0;
overflow-y: auto;
overflow-x: hidden;
@@ -640,7 +665,7 @@ a { color: var(--primary); text-decoration: none; }
position: absolute;
height: 18px; line-height: 18px;
font-size: 11px; font-weight: 500;
padding: 0 6px; border-radius: 3px;
padding: 0 6px; border-radius: 6px;
cursor: pointer; pointer-events: all;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@@ -691,7 +716,7 @@ a { color: var(--primary); text-decoration: none; }
/* Timed events */
.timed-event {
position: absolute; border-radius: 4px;
position: absolute; border-radius: 7px;
padding: 2px 4px; cursor: pointer; overflow: hidden;
font-size: 11px; font-weight: 500;
border-left: 3px solid rgba(0,0,0,.25);
@@ -723,16 +748,19 @@ a { color: var(--primary); text-decoration: none; }
flex-direction: column;
min-width: 0;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 8px;
border: 1px solid var(--border-light);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition), transform var(--transition);
}
.qtr-month:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.qtr-month-name {
font-size: 13px;
font-weight: 600;
color: var(--text-1);
padding: 10px 12px 8px;
border-bottom: 1px solid var(--border);
border-bottom: 1px solid var(--border-light);
letter-spacing: .3px;
}
.qtr-month-grid { padding: 6px 8px 8px; }
@@ -835,17 +863,27 @@ a { color: var(--primary); text-decoration: none; }
/* ── Modals ─────────────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0; z-index: 500;
background: rgba(0,0,0,.6);
background: rgba(8,8,14,.55);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.modal-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border: 1px solid var(--border-light);
border-radius: var(--radius);
width: 100%;
max-height: 90vh; overflow-y: auto;
box-shadow: var(--shadow-lg);
animation: card-in .2s cubic-bezier(.4, 0, .2, 1);
}
@keyframes card-in {
from { opacity: 0; transform: translateY(8px) scale(.985); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.modal-card { animation: none; }
}
.modal-header {
display: flex; align-items: center;
@@ -1145,7 +1183,7 @@ a { color: var(--primary); text-decoration: none; }
.month-span-event {
position: absolute;
height: 18px; line-height: 18px;
border-radius: 3px; padding: 0 6px;
border-radius: 6px; padding: 0 6px;
font-size: 11px; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
cursor: pointer; color: #fff;