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

UI-Verbesserungen: Favicon, Tab-Titel, Kalender umbenennen, Avatar-Crop, Farbpalette

Browse Source 
- SVG-Favicon hinzugefügt
- Dynamischer Tab-Titel (z.B. "Calendarr - März 2026")
- Kalender per Doppelklick umbenennen (Backend + Frontend)
- Avatar-Anzeige im Topbar gefixt (onerror Fallback, robustes Laden)
- Avatar-Upload mit Cropper.js Bildausschnitt-Wahl
- Avatar-Limit auf 5 MB erhöht, Thumbnail auf 512px
- Farbpalette statt nativem Color-Picker für Kalenderfarben
This commit is contained in:
Scarriffle
2026-03-26 15:14:34 +01:00
parent 77d6e20f86
commit 1bbabd6c4d
7 changed files with 256 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/css/app.css
View File

@@ -307,18 +307,33 @@ a { color: var(--primary); text-decoration: none; }
margin-right: 12px;
}
.cal-item:hover { background: var(--bg-hover); }
.cal-item-dot-wrapper { position: relative; flex-shrink: 0; }
.cal-item-dot {
width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; cursor: pointer;
}
.cal-item-dot:hover { outline: 2px solid var(--text-2); outline-offset: 1px; }
.cal-color-input {
position: absolute; top: 0; left: 0;
width: 14px; height: 14px; opacity: 0;
pointer-events: none;
.cal-color-picker {
position: fixed; z-index: 500;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
padding: 10px;
background: var(--bg-surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.cal-cp-swatch {
width: 28px; height: 28px; border-radius: 50%;
cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.cal-cp-swatch:hover {
transform: scale(1.2);
box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px currentColor;
}
.cal-item input[type=checkbox] { accent-color: var(--primary); width: 14px; height: 14px; }
.cal-item-name { font-size: 13px; flex: 1; color: var(--text-1); }
.cal-item-name { font-size: 13px; flex: 1; color: var(--text-1); cursor: default; }
.cal-rename-input {
font-size: 13px; flex: 1; color: var(--text-1);
background: var(--bg-app); border: 1px solid var(--primary);
border-radius: var(--radius-sm); padding: 2px 6px;
outline: none;
}
.cal-account-name { font-size: 11px; color: var(--text-3); padding: 4px 16px 2px; font-weight: 500; }
.cal-item-remove { opacity: 0; }
.cal-item:hover .cal-item-remove { opacity: 1; }
@@ -619,6 +634,10 @@ a { color: var(--primary); text-decoration: none; }
.profile-cal-name { font-size: 13px; color: var(--text-1); }
.profile-cal-account { font-size: 11px; color: var(--text-3); }
/* ── Avatar Crop ───────────────────────────────────────── */
.crop-container { max-height: 400px; overflow: hidden; background: #000; }
.crop-container img { display: block; max-width: 100%; }
/* ── Toast ──────────────────────────────────────────────── */
.toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);