html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
color: var(--bs-secondary-color);
text-align: start;
}
/* ─── Palette theming ──────────────────────────────────────────────────────
Palette CSS files define --browse-* variables on [data-palette="xxx"].
Bootstrap 5 Bootswatch themes set component-scoped variables (e.g.
--bs-btn-bg on .btn-primary) that take precedence over --bs-primary on
. These rules re-apply palette colours to components via the
--browse-* bridge variables. site.css loads after Bootswatch so wins.
*/
/* Navbar */
#site-nav {
background-color: var(--browse-nav-bg);
border-bottom-color: var(--browse-nav-border) !important;
}
#site-nav .navbar-nav .nav-link,
#site-nav .navbar-brand {
color: var(--browse-nav-text, var(--bs-body-color));
}
#site-nav .navbar-nav .nav-link:hover,
#site-nav .navbar-nav .nav-link:focus {
color: var(--bs-primary);
}
/* Primary buttons */
.btn-primary {
--bs-btn-bg: var(--browse-btn-bg);
--bs-btn-border-color: var(--browse-btn-bg);
--bs-btn-color: var(--browse-btn-text);
--bs-btn-hover-bg: var(--browse-btn-hover);
--bs-btn-hover-border-color: var(--browse-btn-hover);
--bs-btn-hover-color: var(--browse-btn-text);
--bs-btn-active-bg: var(--browse-btn-hover);
--bs-btn-active-border-color: var(--browse-btn-hover);
--bs-btn-active-color: var(--browse-btn-text);
--bs-btn-disabled-bg: var(--browse-btn-bg);
--bs-btn-disabled-border-color: var(--browse-btn-bg);
--bs-btn-disabled-color: var(--browse-btn-text);
}
/* Outline-primary buttons */
.btn-outline-primary {
--bs-btn-color: var(--browse-btn-bg);
--bs-btn-border-color: var(--browse-btn-bg);
--bs-btn-hover-bg: var(--browse-btn-bg);
--bs-btn-hover-border-color: var(--browse-btn-bg);
--bs-btn-hover-color: var(--browse-btn-text);
--bs-btn-active-bg: var(--browse-btn-hover);
--bs-btn-active-border-color: var(--browse-btn-hover);
--bs-btn-active-color: var(--browse-btn-text);
}
/* Sidebar category list — Bootstrap list-group active defaults to --bs-primary blue */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
background-color: var(--browse-btn-bg);
border-color: var(--browse-btn-bg);
color: var(--browse-btn-text);
}