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

style: Feinschliff – Event-Popup, KW-Anzeige, Termin-Formular

Browse Source 
- Event-Popup: Kopf neu ausgerichtet (Titel umbricht sauber, Aktions-
  Icons oben rechts statt gequetscht), breiter, weicherer Rahmen
- Kalenderwoche: KW-Badge in Wochen- & Monatsansicht vertikal zentriert
- Formulare: Feld-Labels nicht mehr in Großbuchstaben (moderner),
  Modal-Kopf kräftiger, weichere Trennlinien in Modals

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

32
frontend/css/app.css
View File

@@ -158,7 +158,7 @@ a { color: var(--primary); text-decoration: none; }
display: flex; flex-direction: column; gap: 6px; display: flex; flex-direction: column; gap: 6px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.form-group label { color: var(--text-2); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; } .form-group label { color: var(--text-2); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.form-group input, .form-group select, .form-group textarea { .form-group input, .form-group select, .form-group textarea {
background: var(--bg-app); background: var(--bg-app);
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -495,8 +495,7 @@ a { color: var(--primary); text-decoration: none; }
} }
.month-kw-cell { .month-kw-cell {
position: absolute; left: 0; top: 0; bottom: 0; width: 38px; position: absolute; left: 0; top: 0; bottom: 0; width: 38px;
display: flex; align-items: flex-start; justify-content: center; display: flex; align-items: center; justify-content: center;
padding-top: 6px;
font-size: 13px; color: var(--text-3); font-weight: 700; font-size: 13px; color: var(--text-3); font-weight: 700;
border-right: 1px solid var(--border-light); border-right: 1px solid var(--border-light);
cursor: default; user-select: none; z-index: 1; cursor: default; user-select: none; z-index: 1;
@@ -624,8 +623,7 @@ a { color: var(--primary); text-decoration: none; }
/* KW badge in week view header gutter */ /* KW badge in week view header gutter */
.week-kw-badge { .week-kw-badge {
font-size: 14px; font-weight: 700; color: var(--text-3); font-size: 14px; font-weight: 700; color: var(--text-3);
display: flex; align-items: flex-end; justify-content: center; display: flex; align-items: center; justify-content: center;
padding-bottom: 6px;
text-transform: uppercase; letter-spacing: .3px; text-transform: uppercase; letter-spacing: .3px;
user-select: none; user-select: none;
} }
@@ -887,10 +885,10 @@ a { color: var(--primary); text-decoration: none; }
} }
.modal-header { .modal-header {
display: flex; align-items: center; display: flex; align-items: center;
padding: 16px 20px; border-bottom: 1px solid var(--border); padding: 16px 20px; border-bottom: 1px solid var(--border-light);
gap: 8px; gap: 8px;
} }
.modal-header h3 { font-size: 18px; font-weight: 500; flex: 1; } .modal-header h3 { font-size: 18px; font-weight: 600; flex: 1; letter-spacing: -.2px; }
.modal-close { font-size: 24px; } .modal-close { font-size: 24px; }
.modal-body { padding: 20px; } .modal-body { padding: 20px; }
.modal-body p { margin: 0 0 14px; font-size: 14px; color: var(--text-1); } .modal-body p { margin: 0 0 14px; font-size: 14px; color: var(--text-1); }
@@ -899,7 +897,7 @@ a { color: var(--primary); text-decoration: none; }
.modal-body a:hover { text-decoration: underline; } .modal-body a:hover { text-decoration: underline; }
.modal-footer { .modal-footer {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 12px 20px; border-top: 1px solid var(--border); padding: 14px 20px; border-top: 1px solid var(--border-light);
} }
/* ── Recurrence UI ─────────────────────────────────────── */ /* ── Recurrence UI ─────────────────────────────────────── */
@@ -930,18 +928,22 @@ a { color: var(--primary); text-decoration: none; }
.event-popup { .event-popup {
position: fixed; z-index: 600; position: fixed; z-index: 600;
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid var(--border); border: 1px solid var(--border-light);
border-radius: var(--radius); border-radius: var(--radius);
width: 300px; width: 340px;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
overflow: hidden;
animation: card-in .16s cubic-bezier(.4, 0, .2, 1);
} }
@media (prefers-reduced-motion: reduce) { .event-popup { animation: none; } }
.popup-header { .popup-header {
display: flex; align-items: center; gap: 8px; display: flex; align-items: flex-start; gap: 10px;
padding: 12px 16px; border-bottom: 1px solid var(--border); padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--border-light);
} }
.popup-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .popup-color-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.popup-header h4 { flex: 1; font-size: 15px; font-weight: 500; } .popup-header h4 { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; padding-top: 1px; }
.popup-action, .popup-close { width: 32px; height: 32px; font-size: 16px; } .popup-action, .popup-close { width: 30px; height: 30px; font-size: 16px; flex-shrink: 0; }
.popup-close { margin-left: 2px; }
.popup-body { padding: 12px 16px; } .popup-body { padding: 12px 16px; }
.popup-time, .popup-location, .popup-calendar { font-size: 13px; color: var(--text-2); margin-bottom: 6px; } .popup-time, .popup-location, .popup-calendar { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.popup-description { font-size: 13px; color: var(--text-1); margin-bottom: 6px; white-space: pre-wrap; } .popup-description { font-size: 13px; color: var(--text-1); margin-bottom: 6px; white-space: pre-wrap; }