Modernize individual page, add dark mode fixes, and restyle gallery
- Redesign individual page header: photo beside name/year/age/username, pencil icon edit button, stacked vertical fact cards, iOS toggle, underline tabs, and responsive mobile layout - Add global dark mode fixes for modals, forms, dropdowns (both data-theme=dark and prefers-color-scheme auto mode) - Restyle colorbox gallery: blurred backdrop, centered image, no zoom animation, clean controls with drop-shadow - Override family navigator with thumbnails linking to individual pages instead of raw images, matching full diagram gender colors - Add high-contrast link colors and silhouette placeholder sizing
This commit is contained in:
@@ -0,0 +1,383 @@
|
||||
/* ==========================================================================
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user