/* ========================================================================== River Shoals theme layer (September 2026) -------------------------------------------------------------------------- Loaded LAST in on every owners and admin page, right after assets/js/rs-theme.js has put data-bs-theme="light|dark" on . Also loaded by the public header (includes/header.php) for the public nav bar only -- public pages never load rs-theme.js, so they never get the data-bs-theme attribute and none of the owners/admin rules below (all scoped to html[data-bs-theme]) touch them. What lives here, in order: 1. Design tokens, light and dark 2. Bootstrap 5.3 colour-mode variables mapped onto the tokens 3. The app bar (owners/includes/ownermenubar.php, admin/pages/includes/appbar.php) 4. Page title block -- the old photo banners (.bannerProp, .bannerPool, .bannerLand, .bannerTech + .titleText) restyled in place 5. Page toolbar (.btnContainer / .menuButtons) and footer 6. Owners-area legacy styles (ownerPages.css, style.css) in dark mode 7. Admin-area legacy styles (admin.css) in dark mode 8. Dark-mode safety nets for hard-coded light colours in page markup 9. Public site nav bar (includes/header.php) Rule of thumb for new work: use the --rs-* tokens (or Bootstrap's own --bs-* variables) instead of hex colours, and it works in both modes for free. A hard-coded #fff is a white box in dark mode. ========================================================================== */ /* 1. Tokens ================================================================ */ :root, [data-bs-theme="light"] { --rs-bg: #f4f6f8; --rs-surface: #ffffff; --rs-surface-2: #f1f4f6; --rs-surface-3: #e7ecef; --rs-text: #17232b; --rs-text-2: #3a4852; --rs-muted: #66747e; --rs-border: #dde3e8; --rs-border-strong: #c7d0d7; --rs-accent: #1f6f6b; --rs-accent-hover: #175855; --rs-accent-soft: #e2f1ef; --rs-accent-text: #17605c; --rs-on-accent: #ffffff; --rs-danger: #b3261e; --rs-danger-soft: #fbe9e7; --rs-warn: #8a5a00; --rs-warn-soft: #fff4dc; --rs-ok: #1e7a42; --rs-ok-soft: #e6f4ea; --rs-info-soft: #e7f0fa; --rs-shadow-sm: 0 1px 2px rgba(16, 24, 32, .05), 0 1px 3px rgba(16, 24, 32, .06); --rs-shadow: 0 6px 20px rgba(16, 24, 32, .08), 0 1px 3px rgba(16, 24, 32, .06); --rs-ring: 0 0 0 3px rgba(31, 111, 107, .25); /* Page-level inline styles that used a tinted light background or a dark coloured ink were rewritten as color-mix(in srgb, var(--rs-tint), var(--rs-surface)) color-mix(in srgb, var(--rs-ink), #fff) At 100% that is exactly the original colour, so light mode is unchanged; dark mode dials them down to a faint tint of the same hue and lifts dark text toward white. */ --rs-tint: 100%; --rs-ink: 100%; --rs-radius: 12px; --rs-radius-sm: 8px; --rs-appbar-h: 60px; --rs-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } [data-bs-theme="dark"] { --rs-bg: #0e1316; --rs-surface: #151c20; --rs-surface-2: #1b2328; --rs-surface-3: #232d33; --rs-text: #e3e9ed; --rs-text-2: #c2ccd2; --rs-muted: #8f9da6; --rs-border: #29343b; --rs-border-strong: #37444c; --rs-accent: #4fb3a9; --rs-accent-hover: #6cc6bd; --rs-accent-soft: rgba(79, 179, 169, .14); --rs-accent-text: #82d3ca; --rs-on-accent: #0b1a19; --rs-danger: #f28b82; --rs-danger-soft: rgba(242, 139, 130, .14); --rs-warn: #f3c46b; --rs-warn-soft: rgba(243, 196, 107, .13); --rs-ok: #7fd49a; --rs-ok-soft: rgba(127, 212, 154, .13); --rs-info-soft: rgba(120, 170, 230, .13); --rs-tint: 14%; --rs-ink: 45%; --rs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --rs-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .4); --rs-ring: 0 0 0 3px rgba(79, 179, 169, .35); } /* 2. Bootstrap 5.3 colour modes =========================================== */ /* Bootstrap draws cards, tables, forms, modals, dropdowns, list groups and alerts from these. --bs-body-bg is what an input or a card is painted with, so it maps to the SURFACE colour; the page itself gets --rs-bg directly on below. */ html[data-bs-theme] { --bs-body-bg: var(--rs-surface); --bs-body-color: var(--rs-text); --bs-emphasis-color: var(--rs-text); --bs-secondary-color: var(--rs-muted); --bs-secondary-bg: var(--rs-surface-2); --bs-tertiary-bg: var(--rs-surface-2); --bs-border-color: var(--rs-border); --bs-border-color-translucent: var(--rs-border); --bs-link-color: var(--rs-accent-text); --bs-link-color-rgb: 23, 96, 92; --bs-link-hover-color: var(--rs-accent-hover); --bs-link-hover-color-rgb: 23, 88, 85; --bs-focus-ring-color: rgba(31, 111, 107, .25); background: var(--rs-bg); } html[data-bs-theme="dark"] { --bs-link-color-rgb: 130, 211, 202; --bs-link-hover-color-rgb: 108, 198, 189; --bs-focus-ring-color: rgba(79, 179, 169, .35); } html[data-bs-theme] body { background: var(--rs-bg); color: var(--rs-text); -webkit-font-smoothing: antialiased; } html[data-bs-theme] .btn-primary { --bs-btn-bg: var(--rs-accent); --bs-btn-border-color: var(--rs-accent); --bs-btn-color: var(--rs-on-accent); --bs-btn-hover-bg: var(--rs-accent-hover); --bs-btn-hover-border-color: var(--rs-accent-hover); --bs-btn-hover-color: var(--rs-on-accent); --bs-btn-active-bg: var(--rs-accent-hover); --bs-btn-active-border-color: var(--rs-accent-hover); --bs-btn-active-color: var(--rs-on-accent); --bs-btn-disabled-bg: var(--rs-accent); --bs-btn-disabled-border-color: var(--rs-accent); } html[data-bs-theme] .btn-outline-primary { --bs-btn-color: var(--rs-accent-text); --bs-btn-border-color: var(--rs-accent); --bs-btn-hover-bg: var(--rs-accent); --bs-btn-hover-border-color: var(--rs-accent); --bs-btn-hover-color: var(--rs-on-accent); --bs-btn-active-bg: var(--rs-accent); --bs-btn-active-color: var(--rs-on-accent); } html[data-bs-theme] .form-control:focus, html[data-bs-theme] .form-select:focus, html[data-bs-theme] .btn:focus-visible { border-color: var(--rs-accent); box-shadow: var(--rs-ring); } html[data-bs-theme] .dropdown-menu { --bs-dropdown-bg: var(--rs-surface); --bs-dropdown-border-color: var(--rs-border); --bs-dropdown-link-color: var(--rs-text); --bs-dropdown-link-hover-bg: var(--rs-surface-2); --bs-dropdown-link-hover-color: var(--rs-text); --bs-dropdown-link-active-bg: var(--rs-accent); --bs-dropdown-box-shadow: var(--rs-shadow); box-shadow: var(--rs-shadow); } /* 3. App bar =============================================================== */ /* Full-bleed even though the owners is capped at 1200px wide (ownerPages.css). The bar's paint -- surface colour plus the 1px hairline along its bottom -- is a border-image pushed 100vmax out to each side. A border-image outset is paint only: it adds nothing to the page's scrollable width, and unlike a clip-path it does not cut off the account dropdown that hangs below the bar. */ .rs-appbar { position: sticky; top: 0; z-index: 1030; height: var(--rs-appbar-h); background: var(--rs-surface); border-image: linear-gradient(to top, var(--rs-border) 1px, var(--rs-surface) 1px) fill 0 / 0 / 0 100vmax; font-family: var(--rs-font); font-size: 15px; line-height: 1.2; } .rs-appbar__inner { display: flex; align-items: center; gap: 20px; height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; } .rs-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--rs-text) !important; text-decoration: none !important; } .rs-brand__mark { width: 34px !important; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px var(--rs-border-strong); display: block; } .rs-brand__text { display: flex; align-items: baseline; gap: 8px; } .rs-brand__name { font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; } .rs-brand__area { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-accent-text); background: var(--rs-accent-soft); padding: 3px 7px; border-radius: 999px; } .rs-brand__area--admin { color: var(--rs-danger); background: var(--rs-danger-soft); } .rs-nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .rs-nav::-webkit-scrollbar { display: none; } .rs-nav__link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: var(--rs-radius-sm); color: var(--rs-muted) !important; font-weight: 500; font-size: 14px; white-space: nowrap; text-decoration: none !important; transition: background-color .12s ease, color .12s ease; } .rs-nav__link i { font-size: 15px; opacity: .9; } .rs-nav__link:hover { color: var(--rs-text) !important; background: var(--rs-surface-2); } .rs-nav__link.is-active { color: var(--rs-accent-text) !important; background: var(--rs-accent-soft); } .rs-appbar__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; } .rs-iconbtn, .rs-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rs-border) !important; border-radius: 50%; background: var(--rs-surface); color: var(--rs-text-2) !important; font-size: 16px; cursor: pointer; text-decoration: none !important; transition: background-color .12s ease, border-color .12s ease; } .rs-iconbtn:hover, .rs-avatar:hover { background: var(--rs-surface-2); border-color: var(--rs-border-strong) !important; } .rs-iconbtn:focus-visible, .rs-avatar:focus-visible, .rs-nav__link:focus-visible, .rs-chip:focus-visible { outline: none; box-shadow: var(--rs-ring); } .rs-avatar { overflow: hidden; background: var(--rs-accent-soft); color: var(--rs-accent-text) !important; font-size: 13px; font-weight: 700; letter-spacing: .02em; } .rs-avatar img { width: 100% !important; height: 100%; object-fit: cover; display: block; } .rs-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none !important; white-space: nowrap; } .rs-chip--admin { color: var(--rs-danger) !important; background: var(--rs-danger-soft); } .rs-chip--admin:hover { filter: brightness(.97); } /* The moon shows in light mode (click for dark), the sun in dark mode. */ .rs-show-dark { display: none !important; } [data-bs-theme="dark"] .rs-show-dark { display: inline-block !important; } [data-bs-theme="dark"] .rs-show-light { display: none !important; } .rs-appbar .dropdown { position: relative; } .rs-menu { position: absolute; top: calc(100% + 8px); right: 0; left: auto; max-height: calc(100vh - var(--rs-appbar-h) - 16px); overflow-y: auto; min-width: 240px; padding: 6px; border-radius: var(--rs-radius) !important; font-size: 14px; } .rs-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 14px; } .rs-menu .dropdown-item i { color: var(--rs-muted); } .rs-menu__who { padding: 8px 10px 6px; font-weight: 700; color: var(--rs-text); } .rs-menu__label { padding: 2px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-muted); } .rs-menu__themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 6px 4px; } .rs-menu__themes button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--rs-border) !important; border-radius: 8px; background: var(--rs-surface); color: var(--rs-text-2); font-size: 12px; cursor: pointer; } .rs-menu__themes button:hover { background: var(--rs-surface-2); } /* Whichever mode is actually in force is highlighted. "Device" lights up only when no choice has been stored. */ [data-rs-theme-source="chosen"][data-bs-theme="light"] .rs-menu__themes [data-rs-theme-set="light"], [data-rs-theme-source="chosen"][data-bs-theme="dark"] .rs-menu__themes [data-rs-theme-set="dark"], [data-rs-theme-source="device"] .rs-menu__themes [data-rs-theme-set="auto"] { border-color: var(--rs-accent) !important; color: var(--rs-accent-text); background: var(--rs-accent-soft); } @media (max-width: 900px) { .rs-nav__link span { display: none; } .rs-nav__link { padding: 8px 10px; } .rs-nav__link i { font-size: 17px; } } .rs-menu__mnav { display: none; } /* Phone width: the nav links move into the account menu (rs-menu__mnav) rather than scrolling sideways half-hidden in the bar. */ @media (max-width: 560px) { .rs-appbar__inner { gap: 8px; padding: 0 12px; } .rs-nav { display: none; } .rs-menu__mnav { display: block; } .rs-chip--admin span { display: none; } .rs-chip--admin { width: 38px; padding: 0; justify-content: center; } } @media (max-width: 360px) { .rs-brand__name { display: none; } } @media print { .rs-appbar { display: none !important; } } /* 4. Page title block ====================================================== */ /* Every owners and admin page opens with one of these, carried over from when each page had a 150px stock photo behind a white, drop-shadowed title. The markup is untouched -- it is restyled here into a plain, left-aligned heading that lines up with the Bootstrap .container below it, with a small eyebrow naming the area the page belongs to. */ html[data-bs-theme] .bannerProp, html[data-bs-theme] .bannerPool, html[data-bs-theme] .bannerLand, html[data-bs-theme] .bannerTech { background: none !important; height: auto !important; min-height: 0 !important; text-align: left; width: 100%; max-width: 100%; margin: 0 auto; padding: 30px 12px 0; } @media (min-width: 576px) { html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) { max-width: 540px; } } @media (min-width: 768px) { html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) { max-width: 720px; } } @media (min-width: 992px) { html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) { max-width: 960px; } } @media (min-width: 1200px) { html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) { max-width: 1140px; } } @media (min-width: 1400px) { html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) { max-width: 1320px; } } html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) .titleText { display: block; padding: 0 0 18px !important; margin: 0; text-align: left !important; color: var(--rs-text) !important; text-shadow: none !important; font-family: var(--rs-font) !important; font-size: clamp(26px, 3.2vw, 34px) !important; font-weight: 700 !important; letter-spacing: -.02em; line-height: 1.15; border-bottom: 1px solid var(--rs-border); } /* A title nested inside a title (admin election-proxies.php) must not draw a second rule or a second eyebrow. */ html[data-bs-theme] .titleText .titleText { padding: 0 !important; border: 0; font-size: inherit !important; } html[data-bs-theme] .titleText .titleText::before { content: none !important; } html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) > .titleText::before { content: "Owners area"; display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rs-accent-text); } html[data-bs-theme] body:has(.rs-appbar[data-rs-area="admin"]) :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) > .titleText::before { content: "Administration"; color: var(--rs-danger); } /* 5. Page toolbar and footer ============================================== */ /* .menuButtons were fixed 250px-wide slabs in five different Bootstrap colours. They are page actions ("Import Roster", "Voting", ...), so they now read as one quiet row of buttons under the title. Navigation that every page repeated (Return Home, Back to Admin, Back to Menu) moved into the app bar. */ html[data-bs-theme] .btnContainer:has(> .menuButtons) { display: flex; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 0; margin: 16px 0 8px; } /* A button row whose only buttons were the ones the app bar replaced. */ html[data-bs-theme] .btnContainer:not(:has(*)) { display: none; } html[data-bs-theme] .menuButtons { width: auto !important; height: auto; margin: 0 !important; padding: 7px 14px !important; flex: 0 0 auto !important; border: 1px solid var(--rs-border) !important; border-radius: var(--rs-radius-sm) !important; background: var(--rs-surface) !important; color: var(--rs-text) !important; font-family: var(--rs-font); font-size: 14px !important; font-weight: 500; line-height: 1.3; white-space: nowrap; box-shadow: var(--rs-shadow-sm); transition: background-color .12s ease, border-color .12s ease; } html[data-bs-theme] .menuButtons:hover { background: var(--rs-surface-2) !important; border-color: var(--rs-border-strong) !important; } /* The one red-outline action (Citation Review Queue) keeps its warning. */ html[data-bs-theme] .menuButtons.btn-danger, html[data-bs-theme] .menuButtons.btn-outline-danger { color: var(--rs-danger) !important; } html[data-bs-theme] .copyright { position: relative; height: auto !important; margin-top: 48px !important; padding: 22px 16px 26px; background: var(--rs-surface) !important; border-image: linear-gradient(to bottom, var(--rs-border) 1px, var(--rs-surface) 1px) fill 0 / 0 / 0 100vmax; text-align: center; font-family: var(--rs-font); } html[data-bs-theme] .copyright .copyText { color: var(--rs-text-2) !important; font-size: 14px; font-weight: 500; margin: 0 0 4px; padding: 0; line-height: 1.4; } html[data-bs-theme] .copyright .copySubText { color: var(--rs-muted) !important; font-size: 12px; margin: 0; line-height: 1.4; } /* 6. Owners area in dark mode ============================================= */ [data-bs-theme="dark"] .mainContent, [data-bs-theme="dark"] .policyDoc, [data-bs-theme="dark"] .bookingWidget, [data-bs-theme="dark"] .user-form-container, [data-bs-theme="dark"] .transparentBackground, [data-bs-theme="dark"] .transparentBackgroundNews, [data-bs-theme="dark"] .homeBackground, [data-bs-theme="dark"] .aboutBackground, [data-bs-theme="dark"] .linkContainerBG, [data-bs-theme="dark"] .tableBackground, [data-bs-theme="dark"] .prospectiveBG, [data-bs-theme="dark"] .covIntro, [data-bs-theme="dark"] .covToc { background-color: var(--rs-surface) !important; color: var(--rs-text); } html[data-bs-theme] .mainContent, html[data-bs-theme] .policyDoc { border: 1px solid var(--rs-border); box-shadow: var(--rs-shadow-sm); } [data-bs-theme="dark"] .responsive-example .card { background-color: var(--rs-surface); border-color: var(--rs-border); color: var(--rs-text); box-shadow: var(--rs-shadow-sm); } [data-bs-theme="dark"] a.menuLinks:hover .card, [data-bs-theme="dark"] a.menuLinks:focus-visible .card { border-color: var(--rs-accent); box-shadow: var(--rs-shadow); } html[data-bs-theme] a.menuLinks:hover .card, html[data-bs-theme] a.menuLinks:focus-visible .card { border-color: var(--rs-accent); } html[data-bs-theme] .responsive-example .tileIcon { color: var(--rs-accent); } /* owners/menu.php: the welcome card and the tile section headings. */ .rsMenuHero { border-radius: 16px; overflow: hidden; box-shadow: var(--rs-shadow); } .rsMenuSection .menuGroupHeading { max-width: calc(var(--tileCols, 5) * 15rem); margin: 36px auto 0; padding: 0 1rem; text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--rs-muted); } .rsMenuSection .responsive-example { margin-top: 12px; } .rsMenuSection a.menuLinks { display: block; } html[data-bs-theme] .responsive-example .card { min-height: 196px; border-radius: var(--rs-radius); } @media (max-width: 900px) { .rsMenuSection .menuGroupHeading { max-width: 100%; } } [data-bs-theme="dark"] .responsive-example .card-title { color: var(--rs-text); } [data-bs-theme="dark"] .responsive-example .card-text { color: var(--rs-muted); } [data-bs-theme="dark"] h5 { color: var(--rs-muted); } /* style.css paints every .card-title black in Verdana. */ html[data-bs-theme] .card-title { font-family: var(--rs-font); } [data-bs-theme="dark"] .card-title { color: var(--rs-text); } [data-bs-theme="dark"] .email, [data-bs-theme="dark"] .fob-link, [data-bs-theme="dark"] .disclaimer { color: var(--rs-accent-text); } [data-bs-theme="dark"] .emphasis, [data-bs-theme="dark"] .bg, [data-bs-theme="dark"] .item .ownerLink h4 { color: var(--rs-text); } [data-bs-theme="dark"] .policyDoc h3 { color: var(--rs-accent-text); } [data-bs-theme="dark"] .policyMeta, [data-bs-theme="dark"] .bookingHeader p, [data-bs-theme="dark"] .calLegend, [data-bs-theme="dark"] .summaryPlaceholder { color: var(--rs-muted); } [data-bs-theme="dark"] .ownerMenuHome:hover { color: var(--rs-text); text-shadow: none; } [data-bs-theme="dark"] .pdfDownloadLink, [data-bs-theme="dark"] .calNavBtn { background: var(--rs-surface-2); color: var(--rs-accent-text); border-color: var(--rs-border-strong); } [data-bs-theme="dark"] .pdfDownloadLink:hover, [data-bs-theme="dark"] .calNavBtn:hover { background: var(--rs-surface-3); } [data-bs-theme="dark"] .rateBadge { background: var(--rs-ok-soft); color: var(--rs-ok); } [data-bs-theme="dark"] .calMonth, [data-bs-theme="dark"] .bookingSummary { border-color: var(--rs-border); } [data-bs-theme="dark"] .calDay { color: var(--rs-text-2); } [data-bs-theme="dark"] .calDay.isPast { color: #4b5860; } [data-bs-theme="dark"] .calDay.isBooked { background: var(--rs-danger-soft); color: var(--rs-danger); } [data-bs-theme="dark"] .calDay.isAvailable:hover { background: var(--rs-ok-soft); } [data-bs-theme="dark"] .calDay.inRange { background: rgba(127, 212, 154, .22); } [data-bs-theme="dark"] .summaryDates { background: var(--rs-surface-2); } [data-bs-theme="dark"] .priceRow { color: var(--rs-text-2); } [data-bs-theme="dark"] .priceRow.total { color: var(--rs-text); border-color: var(--rs-border); } [data-bs-theme="dark"] .clearDatesLink { color: var(--rs-accent-text); } [data-bs-theme="dark"] .bookBtnLarge:disabled { background: var(--rs-surface-3); color: var(--rs-muted); } [data-bs-theme="dark"] .clubClosedNotice { background: var(--rs-warn-soft); color: var(--rs-text); } [data-bs-theme="dark"] .clubClosedPhone, [data-bs-theme="dark"] .clubClosedEmail { color: var(--rs-ok); } [data-bs-theme="dark"] .miniMapPlaceholder { background: var(--rs-surface-2); border-color: var(--rs-border-strong); color: var(--rs-muted); } [data-bs-theme="dark"] .covArbitrationNotice { background: var(--rs-warn-soft); } [data-bs-theme="dark"] .card-body svg, [data-bs-theme="dark"] legend, [data-bs-theme="dark"] .thankyou { color: var(--rs-accent-text); } [data-bs-theme="dark"] .leadEmp { background: var(--rs-warn-soft); } [data-bs-theme="dark"] .vTitle { background: var(--rs-surface); color: var(--rs-text); } [data-bs-theme="dark"] .vehBorder { border-color: var(--rs-border-strong); } [data-bs-theme="dark"] .userNotificationTextRed { color: var(--rs-danger); } [data-bs-theme="dark"] mark.covHit { background: rgba(255, 214, 90, .35); color: inherit; } /* profile.php ("My Contact Details") drawn inside the owners area. Its form still carries the public page's classes (style.css), so the loud red-on-yellow notice, the heavy fieldset and the floating labels that sat on the column edge are calmed down here, scoped to this page. */ .rsProfileCard .leadEmp { background: var(--rs-surface-2); border-left: 3px solid var(--rs-accent); border-radius: 8px; color: var(--rs-muted) !important; font-size: 14px; text-indent: 0; padding: 10px 14px; } .rsProfileCard fieldset { border: 1px solid var(--rs-border) !important; border-radius: var(--rs-radius); padding: 12px 16px 6px; margin: 18px 0 10px; } .rsProfileCard legend { float: none; width: auto; padding: 0 8px; margin: 0; font-size: 12px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-muted) !important; } .rsProfileCard .form-floating > label { left: calc(var(--bs-gutter-x) * .5); padding: 1rem .75rem; color: var(--rs-muted) !important; font-size: 14px; } .rsProfileCard .form-floating > .form-control { border-radius: var(--rs-radius-sm); } .rsProfileCard label[for="owner"], .rsProfileCard .form-check-label { color: var(--rs-text-2) !important; } .rsProfileCard .btnUpdateDelete { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; } .rsProfileCard .btnUpdateDelete .btn-danger { background: var(--rs-surface); border-color: var(--rs-border-strong); color: var(--rs-text); } .rsProfileCard .btnUpdateDelete .btn-danger:hover { background: var(--rs-surface-2); } /* 7. Admin area in dark mode ============================================== */ /* admin.css already runs on its own custom properties; re-pointing them converts the sidebar, the dashboard and most admin chrome at once. */ html[data-bs-theme] { --color-background: var(--rs-bg); --color-white: var(--rs-surface); --color-dark: var(--rs-text); --color-dark-variant: var(--rs-muted); --color-info-dark: var(--rs-muted); --color-info-light: var(--rs-border); --color-primary: var(--rs-accent); --color-light: var(--rs-accent-soft); --box-shadow: var(--rs-shadow-sm); } /* admin.css sizes these at 14px root; keep the app bar the same size in both areas regardless. */ html[data-bs-theme] body:has(.rs-appbar[data-rs-area="admin"]) .sidebarToggle { top: calc(var(--rs-appbar-h) + 10px); } [data-bs-theme="dark"] .main .insights h3, [data-bs-theme="dark"] .formatTotalNumbers { color: var(--rs-text); } [data-bs-theme="dark"] .main .links .adminTables th { border-bottom-color: var(--rs-border-strong); } [data-bs-theme="dark"] .main .links .adminTables td { border-bottom-color: var(--rs-border); } [data-bs-theme="dark"] .containerBG { background-color: var(--rs-bg); } [data-bs-theme="dark"] .link-form-container { background-color: var(--rs-surface); border-color: var(--rs-border); } [data-bs-theme="dark"] label { color: var(--rs-text-2); } [data-bs-theme="dark"] .meetingFileLabel, [data-bs-theme="dark"] .meetingLabel, [data-bs-theme="dark"] .viewAdminHome { color: var(--rs-accent-text); } [data-bs-theme="dark"] .meetingNotes, [data-bs-theme="dark"] .question textarea { background: var(--rs-surface); color: var(--rs-text); border-color: var(--rs-border-strong); } [data-bs-theme="dark"] .speedBtn { color: var(--rs-text); border-color: var(--rs-border-strong); } [data-bs-theme="dark"] .statGreen { background-color: var(--rs-ok-soft); border-color: rgba(127, 212, 154, .3); } [data-bs-theme="dark"] .statYellow { background-color: var(--rs-warn-soft); border-color: rgba(243, 196, 107, .3); } [data-bs-theme="dark"] .statRed { background-color: var(--rs-danger-soft); border-color: rgba(242, 139, 130, .3); } [data-bs-theme="dark"] .statGreen .statNumber { color: var(--rs-ok); } [data-bs-theme="dark"] .statYellow .statNumber { color: var(--rs-warn); } [data-bs-theme="dark"] .statRed .statNumber { color: var(--rs-danger); } [data-bs-theme="dark"] .nextRentalAlert { background: var(--rs-ok-soft); border-color: rgba(127, 212, 154, .25); } [data-bs-theme="dark"] .nextRentalEmpty { background: var(--rs-surface-2); border-color: var(--rs-border); color: var(--rs-muted); } [data-bs-theme="dark"] .nextRentalStreet, [data-bs-theme="dark"] .nextRentalMeta, [data-bs-theme="dark"] .bmStreet, [data-bs-theme="dark"] .miniMapCaption { color: var(--rs-muted); } [data-bs-theme="dark"] .clubCalWrap { background: var(--rs-surface); } [data-bs-theme="dark"] .bmActionBlock { border-top-color: var(--rs-border); } [data-bs-theme="dark"] .calDay.isPendingBooking { background: var(--rs-warn-soft); color: var(--rs-warn); } [data-bs-theme="dark"] .calDay.hasCommunityEvent { background: var(--rs-info-soft); color: #9cc3ee; } [data-bs-theme="dark"] .calDay.hasAssociationMeeting { background: var(--rs-ok-soft); color: var(--rs-ok); } [data-bs-theme="dark"] .calDay.hasHold { background: var(--rs-surface-3); color: var(--rs-text-2); } /* The admin dashboard sidebar. */ html[data-bs-theme] aside .sidebar a.active { background: var(--rs-accent-soft); color: var(--rs-accent-text); } html[data-bs-theme] aside .sidebar a.active:before { background: var(--rs-accent); } html[data-bs-theme] aside .sidebar a:hover { color: var(--rs-accent-text); } html[data-bs-theme] aside .sidebar a h3 { color: inherit; } /* The logo block that used to sit above the menu is gone (the app bar has it), so the menu no longer needs to be pushed down to clear it. */ html[data-bs-theme] aside .sidebar { top: .5rem; height: auto; } /* Tables. Admin lists were painted whole in Bootstrap's table-warning (yellow) or table-info (cyan) with Verdana headers. One neutral look in both modes now: plain surface rows, faint zebra striping, and a small uppercase header row. */ html[data-bs-theme] .table { --bs-table-bg: var(--rs-surface); --bs-table-color: var(--rs-text); --bs-table-border-color: var(--rs-border); --bs-table-striped-bg: var(--rs-surface-2); --bs-table-striped-color: var(--rs-text); --bs-table-hover-bg: var(--rs-surface-3); --bs-table-hover-color: var(--rs-text); --bs-table-active-bg: var(--rs-surface-3); --bs-table-active-color: var(--rs-text); border-color: var(--rs-border); } html[data-bs-theme] .table > thead th, html[data-bs-theme] .table > thead td { --bs-table-bg: var(--rs-surface-2); --bs-table-bg-state: var(--rs-surface-2); color: var(--rs-muted) !important; font-family: var(--rs-font) !important; font-size: 12px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--rs-border-strong) !important; } html[data-bs-theme] .viewTables td, html[data-bs-theme] .viewTables th { font-family: var(--rs-font); font-size: 14px; } /* In-page help panels (classes/Help.php draws these with its own inline