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;
}
resources/css/theme.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/scss/theme.scss
+11 -1
View File
@@ -215,6 +215,13 @@ p {
.wt-footers {
text-align: center;
padding-block: 1rem;
&::after {
content: "Ad maiorem Dei gloriam";
color: var(--color-text-tertiary);
font-size: $font-size-sm;
}
}
@media (min-width: 1200px) {
@@ -1177,7 +1184,10 @@ a:hover,
// ============================================================================
.wt-main-container {
@extend .container;
max-width: 1320px;
width: 100%;
margin-inline: auto;
padding-inline: 0.75rem !important;
margin-top: 2rem;
}