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

style(web): dark-mode the share modal's add-user search + permission select

Browse Source 
The user-search input and permission dropdown in the share modal were raw white
browser controls. Style them like the rest of the app (dark bg, border, radius,
focus ring) and give the user checkboxes the primary accent colour. v80.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-07 13:24:05 +02:00
parent 89a1355149
commit d426f8985c
2 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/css/app.css
View File

@@ -2013,7 +2013,29 @@ a { color: var(--primary); text-decoration: none; }
}
.share-user-item:last-child { border-bottom: none; }
.share-user-item:hover { background: var(--bg-surface); }
.share-user-item input[type=checkbox] { flex-shrink: 0; }
.share-user-item input[type=checkbox] {
flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer;
}
/* Add-user row: match the app's dark inputs instead of raw white browser
controls, with a subtle focus ring for a modern feel. */
#share-user-search,
#share-permission {
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
color: var(--text-1);
font-size: 14px;
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
}
#share-user-search::placeholder { color: var(--text-3); }
#share-permission { cursor: pointer; }
#share-user-search:focus,
#share-permission:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}
/* "Shared with me" section header row inside the calendar-management table */
.ct-section-row td {
padding-top: 14px; font-size: 12px; font-weight: 600;