/* ==========================================================================
HydrologyHub platform stylesheet
--------------------------------------------------------------------------
The shared look-and-feel for every *.hydrologyhub.com app. One file with
two parts:
Part 1, platform identity (sections 1-11): color tokens, Bootstrap
overrides, navbar, hover dropdowns, welcome card, footer, dashboard iframe
layout, About page, tooltip/popover styling, Dash core component theming,
and Bootstrap's own buttons, tabs, cards, and row gutters restyled to the
platform look (section 11), so dbc components need no extra class.
Part 2, reusable widgets (sections 12-17): dashboard card extras, round
help buttons, modal windows, Leaflet controls, dataset selector, map legend,
forms and images, auto-grid. Rules for a widget match nothing until an app
uses its class, so an app that doesn't use a widget isn't affected.
Consolidated from:
- flask_dash_base/src/website/assets/supplement.css (template)
- OWRD_Precip_WebApp/src/website/assets/supplement.css (Oregon Extreme Precip)
- DCP_Tool/src/website/assets/supplement.css (Texas Reservoir Drought Monitor)
See hydrologyhub-assets.md (next to the template README) for the full
class catalog, the version history, and what each version changes for
the apps that copy this file.
Source of truth: hydrologyhub repo, flask_dash_base/src/website/assets/.
Copy into apps unchanged; put app overrides in supplement.css.
Load order: bootstrap.css -> hydrologyhub.css -> the app's own
supplement.css (app-specific, wins last). Flask's base.html links them in
that order. Dash loads assets/ alphabetically, which gives the same order.
See "CSS and JS layers" in the template README.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
/* Platform palette (WEST colors). Use --hh-* in new CSS. */
--hh-blue: #3f50a0; /* dark blue (63, 80, 160) */
--hh-blue-rgb: 63, 80, 160;
--hh-light-blue: #2fa4e7; /* light blue (47, 164, 231) */
--hh-light-blue-rgb: 47, 164, 231;
--hh-green: #56803d; /* green (86, 128, 61) */
--hh-green-rgb: 86, 128, 61;
/* Neutrals (from DCP_Tool's shell). */
--hh-ink: #354052;
--hh-muted: #5e6d81;
--hh-muted-strong: #52627a;
--hh-border: #dbe3ed;
--hh-page-bg: #f7f9fc;
--hh-card-shadow: 0 0.2rem 0.75rem rgba(38, 56, 85, 0.09);
/* Layout. --hh-header-height is measured by hydrologyhub.headerHeight.init()
(hydrologyhub.js); rules fall back to the navbar minimum before it runs. */
--hh-navbar-min-height: 7vh;
--hh-logo-height: 8vh;
--hh-welcome-logo-max: 420px;
--hh-footer-logo-max: 250px;
/* Stacking: overlays must sit above Leaflet controls (z-index 1000). */
--hh-z-overlay: 20000; /* welcome card / modals */
--hh-z-popover: 20010; /* tooltips, popovers, date-picker popups */
/* Bootstrap overrides shared by all current apps. --bs-primary-rgb matches
--bs-primary since 0.5.0 (it was light blue before), so .text-primary,
.bg-primary, .border-primary, and dbc color="primary" render dark blue.
Bootstrap's --bs-tertiary-color(-rgb) are no longer overridden; the green
accent is var(--hh-green). */
--bs-primary: #3F50A0;
--bs-heading-color: #3F50A0;
--bs-primary-rgb: 63, 80, 160;
--bs-link-color: #3F50A0;
--bs-link-hover-color: #2fa4e7;
--bs-link-color-rgb: 63, 80, 160;
--bs-link-hover-color-rgb: 47, 164, 231;
--bs-sliders-color-rgb: 86, 128, 61;
}
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-secondary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}
/* --------------------------------------------------------------------------
2. Page shell
navbar ...
-------------------------------------------------------------------------- */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
overflow-x: hidden; /* no horizontal page scrollbar */
}
.main-container {
flex: 1;
display: flex;
flex-direction: column;
position: relative; /* positioning context */
}
.main-container > main {
flex: 1 0 auto; /* pushes the footer to the bottom */
}
/* Tinted page background and ink color. The platform default since 0.3.0:
put .hh-shell on in both base.html and dash_app_index.txt. Without
it, pages render on plain white. (.dcp-shell is DCP_Tool's older name.) */
body.hh-shell,
body.dcp-shell {
color: var(--hh-ink);
background: var(--hh-page-bg);
}
/* Bootstrap's light-grey surfaces wash out against the tinted background,
so the About sidebar and secondary alerts become white with the
platform card border. */
.hh-shell .alert-secondary {
--bs-alert-bg: var(--bs-white);
--bs-alert-border-color: var(--hh-border);
}
html, body {
scroll-behavior: auto;
scroll-padding-top: 100px; /* keep sticky header clear of #anchor targets */
}
body.overflow-auto {
overflow-y: auto;
}
body.overflow-hidden {
overflow-y: hidden;
}
.text-disclaimer {
color: var(--bs-danger);
}
/* --------------------------------------------------------------------------
3. Navbar
Markup contract (see CLAUDE.md "Navbar collapse layout contract"):
Exactly three visible flex children while collapsed, so the toggler centers.
-------------------------------------------------------------------------- */
.navbar {
border-bottom: 2px solid var(--bs-primary);
--bs-navbar-padding-y: 0rem;
min-height: var(--hh-navbar-min-height);
}
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
padding: 1%;
background-color: white;
}
.main-navbar {
position: relative;
justify-content: flex-start;
}
/* Desktop: center the nav links between the app name and the logo. */
@media (min-width: 1200px) {
.main-navbar .navbar-center {
position: absolute;
left: 50%;
width: max-content;
transform: translateX(-50%);
flex: 0 0 auto;
padding: 0;
background-color: transparent;
}
.main-navbar .navbar-nav-center {
align-items: center;
}
}
/* Application name in the navbar (from DCP_Tool; the template uses the class
in base.html but its stylesheet never defined it). */
.navbar-brand-slot {
max-width: min(48vw, 510px);
color: var(--hh-blue);
font-size: clamp(1rem, 1.6vw, 1.35rem);
font-weight: 700;
line-height: 1.2;
white-space: normal;
}
.navbar-brand-slot:hover {
color: var(--hh-light-blue);
}
.nav-link.active {
border-bottom: 2px solid var(--hh-green);
border-top: 2px solid var(--hh-green);
height: 100%;
width: auto;
position: relative;
font-weight: 600;
}
.figure-logo {
margin-bottom: 0.01rem;
line-height: 1;
width: auto;
height: var(--hh-logo-height);
}
.figure-logo-container {
display: flex;
align-items: center;
/* Below navbar-expand-xl Bootstrap lets .navbar children wrap. If the logo
slot wraps to its own row, space-between pushes the toggler to the far
right instead of the middle. nowrap keeps all three on one row; the brand
text still wraps inside its own box. (Fix from DCP_Tool.) */
flex-wrap: nowrap;
}
/* Text fallback shown when the partner logo image fails to load. */
.west-wordmark {
color: var(--hh-blue);
font-family: Arial, sans-serif;
font-size: clamp(1.4rem, 2vw, 2rem);
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1;
}
/* --------------------------------------------------------------------------
4. Hover dropdown menus in the navbar
