feat: Spanning event bars, wheel nav, dark datetime picker, segmented settings UI
- Month view: Multi-day events render as continuous Google Calendar-style spanning bars across days/weeks using a greedy lane-packing algorithm. Timed multi-day events no longer repeat per day. - Mouse wheel / trackpad scrolls week-by-week in month view, day/week in other views (debounced, prevents default page scroll). - datetime-local/date inputs now use color-scheme:dark so the native browser picker opens in dark mode; calendar icon styled to match. - Contrast/hour-height selectors redesigned as connected segmented pill controls instead of individual tiles. - Hidden calendars list gains proper padding and separator lines. - "Google Konten" settings panel renamed "Konten" and expanded to show CalDAV, local calendars, iCal subscriptions, and Google accounts in one unified panel with sync/disconnect actions. - New i18n keys added for accounts panel in both de and en.
This commit is contained in:
Guido Schmit
@@ -151,6 +151,19 @@ a { color: var(--primary); text-decoration: none; }
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.form-group textarea { resize: vertical; }
|
||||
|
||||
/* ── Date/time input dark mode ──────────────────────────── */
|
||||
.form-group input[type="datetime-local"],
|
||||
.form-group input[type="date"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator,
|
||||
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
filter: invert(0.8);
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex; gap: 12px; margin-bottom: 16px; align-items: center;
|
||||
}
|
||||
@@ -455,31 +468,25 @@ a { color: var(--primary); text-decoration: none; }
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: .5px; color: var(--text-2);
|
||||
}
|
||||
.month-grid {
|
||||
display: grid; grid-template-columns: 38px repeat(7, 1fr);
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
flex: 1; overflow: hidden;
|
||||
}
|
||||
.month-kw-cell {
|
||||
border-right: 1px solid var(--border-light);
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: absolute; left: 0; top: 0; bottom: 0;
|
||||
width: 38px;
|
||||
display: flex; align-items: flex-start; justify-content: center;
|
||||
padding-top: 6px;
|
||||
font-size: 13px; color: var(--text-3); font-weight: 700;
|
||||
cursor: default; user-select: none;
|
||||
min-height: 0;
|
||||
border-right: 1px solid var(--border-light);
|
||||
cursor: default; user-select: none; z-index: 1;
|
||||
background: var(--bg-app);
|
||||
}
|
||||
.month-cell {
|
||||
flex: 1;
|
||||
border-right: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
padding: 4px 4px 0;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition);
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
/* every 8th child is the last day column (after KW cell) */
|
||||
.month-cell:nth-child(8n) { border-right: none; }
|
||||
.month-cell:last-child { border-right: none; }
|
||||
.month-cell:hover { background: var(--bg-hover); }
|
||||
.month-cell.today { background: rgba(66,133,244,.08); }
|
||||
.month-cell.other-month .cell-day { color: var(--text-3); }
|
||||
@@ -487,23 +494,15 @@ a { color: var(--primary); text-decoration: none; }
|
||||
font-size: 12px; font-weight: 500; color: var(--text-2);
|
||||
width: 26px; height: 26px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border-radius: 50%; margin-bottom: 2px; flex-shrink: 0;
|
||||
border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
.cell-day.today {
|
||||
background: var(--today-color);
|
||||
color: #fff; font-weight: 700;
|
||||
}
|
||||
.month-event {
|
||||
font-size: 11px; font-weight: 500;
|
||||
padding: 1px 6px; border-radius: 3px;
|
||||
margin-bottom: 1px; cursor: pointer;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
transition: filter var(--transition);
|
||||
}
|
||||
.month-event:hover { filter: brightness(1.15); }
|
||||
.month-event.past { opacity: .45; }
|
||||
.month-more {
|
||||
font-size: 11px; color: var(--text-2); padding: 1px 6px;
|
||||
position: absolute;
|
||||
font-size: 11px; color: var(--text-2); padding: 0 4px;
|
||||
cursor: pointer; font-weight: 500;
|
||||
}
|
||||
.month-more:hover { color: var(--primary); }
|
||||
@@ -747,29 +746,38 @@ a { color: var(--primary); text-decoration: none; }
|
||||
font-size: 12px; color: var(--text-3); margin: 0 0 12px;
|
||||
}
|
||||
|
||||
/* Contrast / option selectors */
|
||||
/* Contrast / option selectors — segmented pill */
|
||||
.contrast-selector {
|
||||
display: flex; gap: 8px; flex-wrap: wrap;
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
.contrast-btn {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
padding: 10px 16px; border-radius: var(--radius);
|
||||
border: 1px solid var(--border); background: var(--bg-surface);
|
||||
cursor: pointer; transition: border-color .15s, background .15s;
|
||||
min-width: 70px;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
||||
padding: 8px 14px; min-width: 64px;
|
||||
background: transparent; border: none;
|
||||
border-right: 1px solid var(--border);
|
||||
cursor: pointer; color: var(--text-2);
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
.contrast-btn:hover { border-color: var(--primary); }
|
||||
.contrast-btn.active { border-color: var(--primary); background: var(--primary-dim); }
|
||||
.contrast-btn:last-child { border-right: none; }
|
||||
.contrast-btn:hover { background: var(--bg-hover); color: var(--text-1); }
|
||||
.contrast-btn.active { background: var(--primary); color: #fff; }
|
||||
.contrast-btn span { font-size: 18px; font-weight: 700; line-height: 1; }
|
||||
.contrast-lbl { font-size: 11px; color: var(--text-2); white-space: nowrap; }
|
||||
.contrast-btn.active span { color: #fff !important; }
|
||||
.contrast-lbl { font-size: 11px; white-space: nowrap; }
|
||||
.contrast-btn.active .contrast-lbl { color: #fff; }
|
||||
.line-preview {
|
||||
display: block; width: 36px; height: 0;
|
||||
border-top: 2px solid; border-radius: 1px;
|
||||
margin: 6px 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.hour-preview {
|
||||
font-size: 14px; line-height: 1; color: var(--text-2);
|
||||
}
|
||||
.contrast-btn.active .hour-preview { color: #fff; }
|
||||
|
||||
/* ── Settings (legacy) ──────────────────────────────────── */
|
||||
.settings-section { margin-bottom: 28px; }
|
||||
@@ -861,6 +869,74 @@ a { color: var(--primary); text-decoration: none; }
|
||||
|
||||
.loading-view { display: flex; justify-content: center; align-items: center; height: 200px; }
|
||||
|
||||
/* ── Accounts Panel ──────────────────────────────────────── */
|
||||
.accounts-section { margin-bottom: 24px; }
|
||||
.accounts-section-heading {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: .5px; color: var(--text-3);
|
||||
padding: 0 0 8px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.accounts-section-empty {
|
||||
font-size: 13px; color: var(--text-3); padding: 4px 0; display: block;
|
||||
}
|
||||
.accounts-row {
|
||||
display: flex; align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
.accounts-row:last-child { border-bottom: none; }
|
||||
.accounts-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.accounts-row-name { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.accounts-row-sub { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.accounts-row-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: 8px; }
|
||||
.accounts-local-dot {
|
||||
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block;
|
||||
}
|
||||
|
||||
/* ── Month View (spanning bars) ─────────────────────────── */
|
||||
.month-body {
|
||||
display: flex; flex-direction: column; flex: 1; overflow: hidden;
|
||||
}
|
||||
.month-row {
|
||||
display: flex; flex: 1; position: relative; min-height: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.month-row:last-child { border-bottom: none; }
|
||||
.month-row-right {
|
||||
margin-left: 38px; display: flex; flex-direction: column; flex: 1; min-width: 0;
|
||||
}
|
||||
.month-day-strip {
|
||||
display: flex; flex-shrink: 0;
|
||||
}
|
||||
.month-events-area {
|
||||
position: relative; flex: 1;
|
||||
min-height: 72px; /* 3 lanes × 22px + 6px padding */
|
||||
overflow: hidden;
|
||||
}
|
||||
.month-span-event {
|
||||
position: absolute;
|
||||
height: 18px; line-height: 18px;
|
||||
border-radius: 3px;
|
||||
padding: 0 6px;
|
||||
font-size: 11px; font-weight: 500;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
cursor: pointer; color: #fff;
|
||||
transition: filter var(--transition);
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
}
|
||||
.month-span-event:hover { filter: brightness(1.15); }
|
||||
.month-span-event.past { opacity: .45; }
|
||||
.month-span-event.continues-left {
|
||||
border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 3px;
|
||||
}
|
||||
.month-span-event.continues-right {
|
||||
border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 3px;
|
||||
}
|
||||
|
||||
/* ── Responsive ─────────────────────────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
:root { --sidebar-w: 0px; }
|
||||
|
||||
Reference in New Issue
Block a user