Fix dark mode for calendar, family/individual list pages and refine search
- Add dark mode support for calendar page elements (options bar, month table, day cells) - Add dark mode support for family/individual list pages (initials bar, surname table, DataTables numeric cells) - Force transparent table cell backgrounds in dark mode with !important to override Bootstrap/DataTables defaults - Refactor TreePage search to match homepage style (pill input, no button, Ionicon search icon, Enter to submit) - Fix active nav icon color filters being overridden by dark mode mixin - Fix mobile nav items not being perfectly round (gap: 0)
This commit is contained in:
+1
-3
@@ -235,9 +235,7 @@ class BockenTheme extends AbstractModule implements ModuleCustomInterface, Modul
|
||||
searchDiv.innerHTML =
|
||||
'<form method="post" action="' + searchAction + '" class="bocken-search-form" role="search">' +
|
||||
'<input type="search" class="bocken-search-input" name="query" placeholder="Search names, places, sources..." autocomplete="off">' +
|
||||
'<button type="submit" class="bocken-search-btn" aria-label="Search">' +
|
||||
'<i data-lucide="search"></i>' +
|
||||
'</button>' +
|
||||
'<span class="bocken-search-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="m338.29 338.29 105.25 105.25"/></svg></span>' +
|
||||
'<input type="hidden" name="_csrf" value="' + csrfValue + '">' +
|
||||
'</form>';
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
+212
-32
@@ -896,49 +896,75 @@ a:hover,
|
||||
}
|
||||
|
||||
// Search form on the start page (injected via JS)
|
||||
// Matches homepage SearchInput.svelte: pill-shaped, nord0 bg, no button, submit via Enter
|
||||
.bocken-page-search {
|
||||
max-width: 500px;
|
||||
margin: 0 auto 2rem;
|
||||
width: 500px;
|
||||
max-width: 85vw;
|
||||
margin: 2.5rem auto 1.2rem;
|
||||
font-size: 1.6rem;
|
||||
filter: drop-shadow(0.4em 0.5em 0.4em rgba(0,0,0,0.4));
|
||||
transition: var(--transition-fast);
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
transform: scale(1.02);
|
||||
filter: drop-shadow(0.4em 0.5em 1em rgba(0,0,0,0.6));
|
||||
}
|
||||
|
||||
.bocken-search-form {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bocken-search-input {
|
||||
flex: 1;
|
||||
padding: 0.6rem 1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 100px 0 0 100px;
|
||||
background: var(--color-surface);
|
||||
all: unset;
|
||||
box-sizing: border-box;
|
||||
background: var(--nord0);
|
||||
color: #fff;
|
||||
padding: 0.7rem 2rem;
|
||||
padding-right: 3rem;
|
||||
border-radius: 100px;
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--nord6);
|
||||
}
|
||||
}
|
||||
|
||||
.bocken-search-icon {
|
||||
position: absolute;
|
||||
right: 0.8em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--nord6);
|
||||
pointer-events: none;
|
||||
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light mode: lighter search bar
|
||||
:root[data-theme="light"] .bocken-page-search .bocken-search-input {
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
transition: border-color var(--transition-fast);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root:not([data-theme]) .bocken-page-search .bocken-search-input {
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
.bocken-search-btn {
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-left: 0;
|
||||
border-radius: 0 100px 100px 0;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-primary-hover);
|
||||
&::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1003,6 +1029,7 @@ a:hover,
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: 0 !important;
|
||||
padding: 0.45rem !important;
|
||||
gap: 0 !important;
|
||||
|
||||
&::before {
|
||||
font-size: 0.85rem !important;
|
||||
@@ -1145,6 +1172,73 @@ a:hover,
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
// Calendar & page options
|
||||
.wt-page-options {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.wt-page-options-label {
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.wt-page-options-value {
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
}
|
||||
}
|
||||
|
||||
.wt-calendar-month {
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
|
||||
th, td {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.wt-calendar-today {
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.cal_day {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
// Family/Individual list — initials bar & content
|
||||
.wt-initials-list {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.wt-initial {
|
||||
color: var(--color-link);
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-text-on-primary) !important;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.wt-page-content {
|
||||
color: var(--color-text-primary);
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.wt-table-surname {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// FOOTER
|
||||
// ============================================================================
|
||||
@@ -1593,10 +1687,30 @@ div[id^=caldiv] {
|
||||
}
|
||||
|
||||
.table {
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-bg: transparent !important;
|
||||
--bs-table-color: var(--color-text-primary);
|
||||
--bs-table-border-color: var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
|
||||
th, td {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border) !important;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background-color: var(--color-bg-tertiary) !important;
|
||||
}
|
||||
|
||||
// DataTables sorted column highlight
|
||||
td.sorting_1 {
|
||||
background-color: rgba(255, 255, 255, 0.02) !important;
|
||||
}
|
||||
|
||||
// Ensure numeric cells get light text
|
||||
.dt-type-numeric {
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
@@ -1664,8 +1778,8 @@ div[id^=caldiv] {
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
// Nav icon filters for dark mode
|
||||
.wt-header-content .nav > .nav-item > .nav-link::before {
|
||||
// Nav icon filters for dark mode (exclude active items which have their own colored filters)
|
||||
.wt-header-content .nav > .nav-item:not(.bocken-nav-active) > .nav-link::before {
|
||||
filter: brightness(0) invert(0.7);
|
||||
}
|
||||
|
||||
@@ -1704,6 +1818,72 @@ div[id^=caldiv] {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
// Calendar page
|
||||
.wt-page-options {
|
||||
background-color: transparent;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.wt-page-options-label {
|
||||
background-color: var(--color-bg-secondary);
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.wt-page-options-value {
|
||||
background-color: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.wt-calendar-month {
|
||||
background-color: transparent;
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
|
||||
th {
|
||||
background-color: var(--color-bg-tertiary);
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.wt-calendar-today {
|
||||
background-color: var(--color-bg-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.cal_day {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
// Family/Individual list
|
||||
.wt-initials-list {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.wt-initial {
|
||||
color: var(--color-link);
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-text-on-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wt-page-content {
|
||||
color: var(--color-text-primary);
|
||||
|
||||
p {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user