Alexander/WebtreesBockenTheme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style typeahead, calendar picker, footer motto, and fix main container width

Browse Source 
Add theme-aware dark mode support for typeahead hint inputs and
calendar date picker. Add footer motto and replace Bootstrap .container
extend with explicit max-width for better layout control.
This commit is contained in:
Alexander Bocken
2026-03-16 21:06:04 +01:00
parent cb218c4a3b
commit 5ab7a3c174
3 changed files with 94 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/dark-fixes.css
+82
View File
@@ -381,3 +381,85 @@
#cboxMiddleLeft, #cboxMiddleRight {
display: none !important;
}
/* ---------- Typeahead hint input: fix background ---------- */
.tt-hint {
background: var(--color-bg-primary, #f8f6f1) !important;
}
:root[data-theme=dark] .tt-hint {
background: var(--color-surface, #1a1a1a) !important;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) .tt-hint {
background: var(--color-surface, #1a1a1a) !important;
}
}
/* ---------- Calendar date picker ---------- */
/* Calendar day cells: small radius instead of circle */
div[id^="caldiv"] table table tr:not(:first-child) td {
border-radius: 4px !important;
}
/* Theme-aware calendar overrides */
div[id^="caldiv"] {
background-color: var(--color-surface, #efecea) !important;
border-color: var(--color-border, #ddd) !important;
}
div[id^="caldiv"] table {
border-color: var(--color-border, #ddd) !important;
}
div[id^="caldiv"] td {
background-color: var(--color-surface, #efecea) !important;
border-color: var(--color-border, #ddd) !important;
color: var(--color-text-primary, #2a2a2a);
}
div[id^="caldiv"] td[style*="background-color:#EAEAEA"] {
background-color: var(--color-bg-tertiary, #e8e5e1) !important;
}
/* Header row day names */
div[id^="caldiv"] table table tr:first-child .descriptionbox {
background-color: var(--color-bg-tertiary, #e8e5e1) !important;
color: var(--color-text-primary, #2a2a2a) !important;
}
/* Highlighted/today day cell */
div[id^="caldiv"] table table tr:not(:first-child) td.descriptionbox {
background-color: var(--color-primary, #5E81AC) !important;
color: white !important;
}
div[id^="caldiv"] table table tr:not(:first-child) td.descriptionbox a {
color: white !important;
}
div[id^="caldiv"] .optionbox {
background-color: var(--color-surface, #efecea) !important;
color: var(--color-text-primary, #2a2a2a) !important;
}
div[id^="caldiv"] a {
color: var(--color-link, #5E81AC) !important;
}
div[id^="caldiv"] .form-select,
div[id^="caldiv"] .form-control {
background-color: var(--color-bg-tertiary, #e8e5e1) !important;
color: var(--color-text-primary, #2a2a2a) !important;
border-color: var(--color-border, #ddd) !important;
}
/* ---------- Empty spacer label: match page background ---------- */
.wt-page-options-label:not(:has(*)) {
background-color: var(--color-bg-primary, #f8f6f1) !important;
}