Alexander
5ab7a3c174
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.
466 lines
13 KiB
CSS
466 lines
13 KiB
CSS
/* ==========================================================================
|
|
Global fixes
|
|
Layout overrides and dark mode fixes for Bootstrap components.
|
|
|
|
Dark mode strategy:
|
|
- :root[data-theme=dark] → user explicitly chose dark
|
|
- @media (prefers-color-scheme: dark) + :root:not([data-theme=light])
|
|
→ auto mode with browser dark preference
|
|
========================================================================== */
|
|
|
|
/* ---------- Layout: remove forced container padding ---------- */
|
|
|
|
.wt-main-container {
|
|
--bs-gutter-x: 0;
|
|
}
|
|
|
|
/* ---------- Modals ---------- */
|
|
|
|
:root[data-theme=dark] .modal-content {
|
|
background-color: var(--color-bg-primary, #2E3440);
|
|
color: #ECEFF4;
|
|
border-color: var(--color-border, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
:root[data-theme=dark] .modal-header {
|
|
border-bottom-color: var(--color-border, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
:root[data-theme=dark] .modal-footer {
|
|
border-top-color: var(--color-border, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
:root[data-theme=dark] .modal-header .btn-close {
|
|
filter: invert(1) grayscale(100%) brightness(200%);
|
|
}
|
|
|
|
/* ---------- Form controls in dark mode ---------- */
|
|
|
|
:root[data-theme=dark] .form-control,
|
|
:root[data-theme=dark] .form-select {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
color: #ECEFF4;
|
|
border-color: var(--color-border, rgba(255,255,255,0.15));
|
|
}
|
|
|
|
:root[data-theme=dark] .form-control::placeholder {
|
|
color: #4C566A;
|
|
}
|
|
|
|
:root[data-theme=dark] .form-control:focus,
|
|
:root[data-theme=dark] .form-select:focus {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
color: #ECEFF4;
|
|
border-color: var(--color-primary, #5E81AC);
|
|
box-shadow: 0 0 0 0.2rem rgba(94, 129, 172, 0.25);
|
|
}
|
|
|
|
:root[data-theme=dark] .form-select option {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
color: #ECEFF4;
|
|
}
|
|
|
|
:root[data-theme=dark] .input-group-text {
|
|
background-color: var(--color-bg-elevated, #3B4252);
|
|
color: #D8DEE9;
|
|
border-color: var(--color-border, rgba(255,255,255,0.15));
|
|
}
|
|
|
|
:root[data-theme=dark] .form-check-input {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
border-color: var(--color-border, rgba(255,255,255,0.2));
|
|
}
|
|
|
|
:root[data-theme=dark] .form-check-input:checked {
|
|
background-color: var(--color-primary, #5E81AC);
|
|
border-color: var(--color-primary, #5E81AC);
|
|
}
|
|
|
|
:root[data-theme=dark] .col-form-label,
|
|
:root[data-theme=dark] .form-check-label,
|
|
:root[data-theme=dark] .form-label {
|
|
color: #D8DEE9;
|
|
}
|
|
|
|
:root[data-theme=dark] .form-text,
|
|
:root[data-theme=dark] .text-muted {
|
|
color: #4C566A !important;
|
|
}
|
|
|
|
:root[data-theme=dark] textarea.form-control {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
color: #ECEFF4;
|
|
}
|
|
|
|
/* ---------- Dropdown menus (global) ---------- */
|
|
|
|
:root[data-theme=dark] .dropdown-menu {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
color: #ECEFF4;
|
|
border-color: var(--color-border, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
:root[data-theme=dark] .dropdown-menu .dropdown-item {
|
|
color: #ECEFF4;
|
|
}
|
|
|
|
:root[data-theme=dark] .dropdown-menu .dropdown-item:hover,
|
|
:root[data-theme=dark] .dropdown-menu .dropdown-item:focus {
|
|
background-color: var(--color-surface-hover, #222);
|
|
color: #ECEFF4;
|
|
}
|
|
|
|
:root[data-theme=dark] .dropdown-menu .dropdown-item.disabled {
|
|
color: #4C566A;
|
|
}
|
|
|
|
:root[data-theme=dark] .dropdown-menu .dropdown-divider {
|
|
border-color: var(--color-border, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
:root[data-theme=dark] .dropdown-menu .dropdown-header {
|
|
color: #D8DEE9;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Auto mode: @media (prefers-color-scheme: dark) — same rules
|
|
========================================================================== */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
/* Modals */
|
|
:root:not([data-theme=light]) .modal-content {
|
|
background-color: var(--color-bg-primary, #2E3440);
|
|
color: #ECEFF4;
|
|
border-color: var(--color-border, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
:root:not([data-theme=light]) .modal-header {
|
|
border-bottom-color: var(--color-border, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
:root:not([data-theme=light]) .modal-footer {
|
|
border-top-color: var(--color-border, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
:root:not([data-theme=light]) .modal-header .btn-close {
|
|
filter: invert(1) grayscale(100%) brightness(200%);
|
|
}
|
|
|
|
/* Form controls */
|
|
:root:not([data-theme=light]) .form-control,
|
|
:root:not([data-theme=light]) .form-select {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
color: #ECEFF4;
|
|
border-color: var(--color-border, rgba(255,255,255,0.15));
|
|
}
|
|
|
|
:root:not([data-theme=light]) .form-control::placeholder {
|
|
color: #4C566A;
|
|
}
|
|
|
|
:root:not([data-theme=light]) .form-control:focus,
|
|
:root:not([data-theme=light]) .form-select:focus {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
color: #ECEFF4;
|
|
border-color: var(--color-primary, #5E81AC);
|
|
box-shadow: 0 0 0 0.2rem rgba(94, 129, 172, 0.25);
|
|
}
|
|
|
|
:root:not([data-theme=light]) .form-select option {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
color: #ECEFF4;
|
|
}
|
|
|
|
:root:not([data-theme=light]) .input-group-text {
|
|
background-color: var(--color-bg-elevated, #3B4252);
|
|
color: #D8DEE9;
|
|
border-color: var(--color-border, rgba(255,255,255,0.15));
|
|
}
|
|
|
|
:root:not([data-theme=light]) .form-check-input {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
border-color: var(--color-border, rgba(255,255,255,0.2));
|
|
}
|
|
|
|
:root:not([data-theme=light]) .form-check-input:checked {
|
|
background-color: var(--color-primary, #5E81AC);
|
|
border-color: var(--color-primary, #5E81AC);
|
|
}
|
|
|
|
:root:not([data-theme=light]) .col-form-label,
|
|
:root:not([data-theme=light]) .form-check-label,
|
|
:root:not([data-theme=light]) .form-label {
|
|
color: #D8DEE9;
|
|
}
|
|
|
|
:root:not([data-theme=light]) .form-text,
|
|
:root:not([data-theme=light]) .text-muted {
|
|
color: #4C566A !important;
|
|
}
|
|
|
|
:root:not([data-theme=light]) textarea.form-control {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
color: #ECEFF4;
|
|
}
|
|
|
|
/* Dropdown menus */
|
|
:root:not([data-theme=light]) .dropdown-menu {
|
|
background-color: var(--color-surface, #1a1a1a);
|
|
color: #ECEFF4;
|
|
border-color: var(--color-border, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
:root:not([data-theme=light]) .dropdown-menu .dropdown-item {
|
|
color: #ECEFF4;
|
|
}
|
|
|
|
:root:not([data-theme=light]) .dropdown-menu .dropdown-item:hover,
|
|
:root:not([data-theme=light]) .dropdown-menu .dropdown-item:focus {
|
|
background-color: var(--color-surface-hover, #222);
|
|
color: #ECEFF4;
|
|
}
|
|
|
|
:root:not([data-theme=light]) .dropdown-menu .dropdown-item.disabled {
|
|
color: #4C566A;
|
|
}
|
|
|
|
:root:not([data-theme=light]) .dropdown-menu .dropdown-divider {
|
|
border-color: var(--color-border, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
:root:not([data-theme=light]) .dropdown-menu .dropdown-header {
|
|
color: #D8DEE9;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Colorbox / Gallery lightbox overrides
|
|
Styled to match homepage dialog: blurred backdrop, centered image,
|
|
close button top-right. Uses [dir] to override webtrees specificity.
|
|
========================================================================== */
|
|
|
|
/* Overlay: blurred backdrop (matching homepage dialog::backdrop blur(10px))
|
|
colorbox sets opacity via inline style (.fadeTo), which prevents
|
|
backdrop-filter from working. Force opacity:1 and use background alpha. */
|
|
[dir] #cboxOverlay {
|
|
background: rgba(0, 0, 0, 0.3) !important;
|
|
opacity: 1 !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
-webkit-backdrop-filter: blur(10px) !important;
|
|
}
|
|
|
|
/* Strip webtrees border/padding/background from content area */
|
|
[dir] #cboxContent {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Remove bottom margin that offsets the image */
|
|
[dir] #cboxLoadedContent {
|
|
margin-bottom: 0 !important;
|
|
overflow: visible !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Image: full opacity, centered */
|
|
[dir] .cboxPhoto {
|
|
margin: auto !important;
|
|
float: none !important;
|
|
}
|
|
|
|
.cboxPhoto {
|
|
opacity: 1 !important;
|
|
object-fit: contain;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Title: centered below image */
|
|
[dir] #cboxTitle {
|
|
background: transparent !important;
|
|
text-align: center !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
#cboxTitle {
|
|
font-size: 0.85rem;
|
|
color: #ECEFF4 !important;
|
|
padding: 0.4rem 0 !important;
|
|
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
/* Hide "Image X of Y" */
|
|
#cboxCurrent {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide loading overlay backgrounds */
|
|
[dir] #cboxLoadingOverlay,
|
|
[dir] #cboxLoadingGraphic {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* --- Control buttons: semi-transparent circles with drop-shadow --- */
|
|
[dir] #cboxPrevious,
|
|
[dir] #cboxNext,
|
|
[dir] #cboxSlideshow,
|
|
[dir] #cboxClose {
|
|
background: rgba(0, 0, 0, 0.4) !important;
|
|
border: none !important;
|
|
border-radius: 50% !important;
|
|
padding: 0.45rem !important;
|
|
}
|
|
|
|
#cboxPrevious,
|
|
#cboxNext,
|
|
#cboxSlideshow,
|
|
#cboxClose {
|
|
color: #ECEFF4 !important;
|
|
opacity: 0.85;
|
|
transition: opacity 0.2s, background 0.2s;
|
|
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
|
|
width: 2.25rem !important;
|
|
height: 2.25rem !important;
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#cboxPrevious:hover,
|
|
#cboxNext:hover,
|
|
#cboxSlideshow:hover,
|
|
#cboxClose:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
[dir] #cboxPrevious:hover,
|
|
[dir] #cboxNext:hover,
|
|
[dir] #cboxSlideshow:hover,
|
|
[dir] #cboxClose:hover {
|
|
background: rgba(0, 0, 0, 0.6) !important;
|
|
}
|
|
|
|
#cboxPrevious svg,
|
|
#cboxNext svg,
|
|
#cboxSlideshow svg,
|
|
#cboxClose svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Close: top-right of image (like homepage dialog button) */
|
|
#cboxClose {
|
|
top: -1rem !important;
|
|
bottom: auto !important;
|
|
}
|
|
[dir=ltr] #cboxClose { right: -1rem !important; }
|
|
[dir=rtl] #cboxClose { left: -1rem !important; }
|
|
|
|
/* Prev/Next: vertically centered on sides of image */
|
|
#cboxPrevious,
|
|
#cboxNext {
|
|
bottom: 50% !important;
|
|
transform: translateY(50%);
|
|
}
|
|
[dir=ltr] #cboxPrevious { left: -2.5rem !important; }
|
|
[dir=rtl] #cboxPrevious { right: -2.5rem !important; }
|
|
[dir=ltr] #cboxNext { left: auto !important; right: -2.5rem !important; }
|
|
[dir=rtl] #cboxNext { right: auto !important; left: -2.5rem !important; }
|
|
|
|
/* Slideshow: bottom-right */
|
|
#cboxSlideshow {
|
|
bottom: -2rem !important;
|
|
}
|
|
[dir=ltr] #cboxSlideshow { right: 0 !important; left: auto !important; }
|
|
[dir=rtl] #cboxSlideshow { left: 0 !important; right: auto !important; }
|
|
|
|
/* Hide decorative border/spacing divs */
|
|
#cboxTopLeft, #cboxTopCenter, #cboxTopRight,
|
|
#cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight,
|
|
#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;
|
|
}
|
|
|