152 lines
7.8 KiB
CSS
152 lines
7.8 KiB
CSS
/* ============================================================================
|
|
weirsoe-theme — Bulma adapter.
|
|
Maps Bulma's component classes onto the weirsoe-theme tokens so an existing
|
|
Bulma site gets the dark card look without rewriting markup. Load AFTER
|
|
bulma(swatch) and AFTER weirsoe-theme.css (which defines --color-* tokens).
|
|
========================================================================== */
|
|
|
|
/* Typography */
|
|
.title, h1, h2, h3, h4, strong, .label, label.label { color: var(--color-text) !important; }
|
|
.subtitle { color: var(--color-muted) !important; }
|
|
.content, p, .navbar-item, td, th, li { color: var(--color-text); }
|
|
.has-text-grey, .has-text-grey-light, .is-size-7.has-text-grey { color: var(--color-muted) !important; }
|
|
h1.title, .title.is-1, .title.is-2, .title.is-3 { letter-spacing: -0.02em; font-weight: 750; }
|
|
a { color: var(--color-accent); }
|
|
a:hover { color: var(--color-accent-2); }
|
|
|
|
/* Navbar — translucent dark, blurred */
|
|
.navbar, .navbar.is-fixed-top {
|
|
background-color: color-mix(in srgb, var(--color-bg) 90%, transparent) !important;
|
|
-webkit-backdrop-filter: blur(12px);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--color-border);
|
|
box-shadow: none !important;
|
|
}
|
|
.navbar-item, .navbar-link { color: var(--color-text) !important; }
|
|
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
|
|
background-color: color-mix(in srgb, var(--color-text) 6%, transparent) !important;
|
|
color: var(--color-accent) !important;
|
|
}
|
|
.navbar-brand .navbar-item span { font-weight: 700; letter-spacing: -0.01em; }
|
|
.navbar-dropdown {
|
|
background-color: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--wt-radius-sm);
|
|
box-shadow: var(--wt-shadow);
|
|
}
|
|
.navbar-divider { background-color: var(--color-border); }
|
|
|
|
/* Cards */
|
|
.box {
|
|
background-color: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--wt-radius);
|
|
box-shadow: var(--wt-shadow);
|
|
color: var(--color-text);
|
|
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
|
|
}
|
|
@media (hover: hover) {
|
|
.box:hover {
|
|
border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
|
|
box-shadow: var(--wt-shadow-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
.box .box { box-shadow: none; transform: none; }
|
|
.notification { border-radius: var(--wt-radius); border: 1px solid var(--color-border); }
|
|
hr { background-color: var(--color-border); }
|
|
|
|
/* Buttons */
|
|
.button { border-radius: var(--wt-radius-sm); transition: filter 0.15s ease, transform 0.05s ease, background-color 0.15s ease; }
|
|
.button:active { transform: translateY(1px); }
|
|
.button.is-primary, .button.is-link { background-color: var(--color-accent); border-color: transparent; color: var(--color-accent-ink); font-weight: 650; }
|
|
.button.is-primary:hover, .button.is-link:hover { filter: brightness(1.08); color: var(--color-accent-ink); }
|
|
.button.is-light, .button:not(.is-primary):not(.is-link):not(.is-danger):not(.is-warning):not(.is-success) {
|
|
background-color: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text);
|
|
}
|
|
.button.is-light:hover { background-color: var(--color-surface-3); color: var(--color-text); }
|
|
.button.is-danger.is-light { background-color: #3a1620; color: var(--color-bad); border-color: #5b2230; }
|
|
.button.is-warning { background-color: #3a2c10; color: #ffd479; border-color: #5b471d; }
|
|
.button.is-success { background-color: #10341f; color: var(--color-good); border-color: #1d5a32; }
|
|
|
|
/* Form controls */
|
|
.input, .textarea, .select select {
|
|
background-color: var(--color-surface-2); border-color: var(--color-border);
|
|
color: var(--color-text); border-radius: var(--wt-radius-sm);
|
|
}
|
|
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--color-muted) 80%, transparent); }
|
|
.input:focus, .textarea:focus, .select select:focus {
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
|
|
}
|
|
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--color-accent); }
|
|
.label { font-weight: 600; }
|
|
|
|
/* Tags */
|
|
.tag:not(.is-primary):not(.is-link):not(.is-success):not(.is-danger):not(.is-warning) {
|
|
background-color: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 999px;
|
|
}
|
|
.tag.is-link { background-color: #1b2a44; color: #9ec3ff; }
|
|
.tag.is-success { background-color: #10341f; color: var(--color-good); }
|
|
.tag.is-danger { background-color: #3a1620; color: var(--color-bad); }
|
|
|
|
/* Notifications — tinted surface + theme text, so they read in light AND dark
|
|
(a hardcoded colour was dark-on-dark in one theme). */
|
|
.notification { color: var(--color-text); }
|
|
.notification.is-info.is-light {
|
|
background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
|
|
color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
|
|
}
|
|
.notification.is-success.is-light {
|
|
background-color: color-mix(in srgb, var(--color-good) 16%, var(--color-surface));
|
|
color: var(--color-text); border-color: color-mix(in srgb, var(--color-good) 40%, var(--color-border));
|
|
}
|
|
.notification.is-danger.is-light {
|
|
background-color: color-mix(in srgb, var(--color-bad) 16%, var(--color-surface));
|
|
color: var(--color-text); border-color: color-mix(in srgb, var(--color-bad) 40%, var(--color-border));
|
|
}
|
|
.notification.is-warning.is-light {
|
|
background-color: color-mix(in srgb, #ffb020 16%, var(--color-surface));
|
|
color: var(--color-text); border-color: color-mix(in srgb, #ffb020 40%, var(--color-border));
|
|
}
|
|
|
|
/* Progress bars — dark track + accent fill (native <progress> needs pseudo-els) */
|
|
.progress { background-color: var(--color-surface-2); border-radius: 999px; height: 0.6rem; }
|
|
.progress::-webkit-progress-bar { background-color: var(--color-surface-2); border-radius: 999px; }
|
|
.progress::-webkit-progress-value { background-color: var(--color-accent); border-radius: 999px; }
|
|
.progress::-moz-progress-bar { background-color: var(--color-accent); border-radius: 999px; }
|
|
.progress.is-info::-webkit-progress-value { background-color: var(--color-accent); }
|
|
.progress.is-info::-moz-progress-bar { background-color: var(--color-accent); }
|
|
.progress.is-success::-webkit-progress-value { background-color: var(--color-good); }
|
|
.progress.is-success::-moz-progress-bar { background-color: var(--color-good); }
|
|
.progress:indeterminate { background-image: linear-gradient(to right, var(--color-accent) 30%, var(--color-surface-2) 30%); }
|
|
|
|
/* Media object (list items) */
|
|
.media + .media { border-top: 1px solid var(--color-border); }
|
|
.media-left img { border-radius: var(--wt-radius-sm); border: 1px solid var(--color-border); background: #fff; }
|
|
/* flex children need min-width:0 to shrink — otherwise long names/URLs push the
|
|
whole page wider than the viewport (sideways scroll on mobile). */
|
|
.media-content { min-width: 0; overflow-wrap: anywhere; }
|
|
|
|
/* Misc */
|
|
details summary { color: var(--color-accent); }
|
|
.section { padding-top: 2rem; }
|
|
|
|
/* Kill any light Bulma canvas (html/body/section) so dark mode is fully dark. */
|
|
html, body { background-color: var(--color-bg) !important; }
|
|
body { min-height: 100vh; }
|
|
.content.has-navbar-fixed-top, #pageContent, .section, .hero, .hero-body, .footer { background-color: transparent !important; }
|
|
|
|
/* Responsive content width: full-bleed on phones, a centred readable column on
|
|
large screens (so a wishlist doesn't stretch edge-to-edge on a desktop). The
|
|
app marks a wrapper with .container.fullwidth; centre + constrain past tablet.
|
|
!important is needed to beat Bulma's .is-marginless (margin:0 !important). */
|
|
@media (min-width: 769px) {
|
|
.container.fullwidth {
|
|
max-width: 52rem;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
.container.fullwidth.is-wide { max-width: 72rem; }
|
|
}
|