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:last-child { border-bottom: none; }
.share-user-item:hover { background: var(--bg-surface); } .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 */ /* "Shared with me" section header row inside the calendar-management table */
.ct-section-row td { .ct-section-row td {
padding-top: 14px; font-size: 12px; font-weight: 600; padding-top: 14px; font-size: 12px; font-weight: 600;

2
frontend/js/version.js
View File

@@ -1,2 +1,2 @@
// Increment APP_VERSION with every code change // Increment APP_VERSION with every code change
export const APP_VERSION = 'v81'; export const APP_VERSION = 'v82';