/* Beer Plan's own dark app theme. Layered after shared/timefold-quickstart.css, whose :root vars would otherwise force the light body colours back on regardless of the data-bs-theme="dark" set on in index.html. */ :root { --bs-body-bg: #14161a; --bs-body-bg-rgb: 20, 22, 26; --bs-body-color: #e7e4df; --bs-body-color-rgb: 231, 228, 223; --bs-tertiary-bg: #1c1f25; --bs-secondary-bg: #1c1f25; --bs-border-color: #33373f; --bs-border-color-translucent: #33373f; --brand-accent: #e0a72e; --brand-accent-strong: #f2b73f; --brand-accent-dim: #c99423; --brand-ink: #1a1200; --bs-link-color: var(--brand-accent); --bs-link-hover-color: var(--brand-accent-strong); } body { background-color: var(--bs-body-bg); } /* ── App shell ── */ .app-header { background-color: #191c22; border-bottom: 1px solid var(--bs-border-color); } .app-brand { gap: .5rem; } .app-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand-accent); color: var(--brand-ink); font-size: 1.1rem; } .app-brand-name { font-weight: 600; font-size: 1.15rem; color: var(--bs-body-color); } .app-footer { background-color: #191c22; border-top: 1px solid var(--bs-border-color); } .app-footer-link { color: var(--bs-body-color); text-decoration: none; } .app-footer-link:hover { color: var(--brand-accent); } /* Officially the supported way to restyle a Bootstrap 5.3 button variant: set the per-component --bs-btn-* vars the base .btn class reads, rather than fighting the precompiled .btn-primary colours. */ .btn-accent { --bs-btn-color: var(--brand-ink); --bs-btn-bg: var(--brand-accent); --bs-btn-border-color: var(--brand-accent); --bs-btn-hover-color: var(--brand-ink); --bs-btn-hover-bg: var(--brand-accent-strong); --bs-btn-hover-border-color: var(--brand-accent-strong); --bs-btn-focus-shadow-rgb: 224, 167, 46; --bs-btn-active-color: var(--brand-ink); --bs-btn-active-bg: var(--brand-accent-dim); --bs-btn-active-border-color: var(--brand-accent-dim); --bs-btn-disabled-color: var(--brand-ink); --bs-btn-disabled-bg: var(--brand-accent); --bs-btn-disabled-border-color: var(--brand-accent); } /* The evening reads left to right, one card per round, so it never wraps mid-flight. */ .round-rail { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; } .round-card { flex: 1 0 14rem; min-width: 14rem; } /* The style swatch that makes a repeated style visible at a glance. */ .style-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; } .empty-round { border-style: dashed; background-color: var(--bs-tertiary-bg); } /* One block per participant; a divider between them makes it obvious where one evening ends and the next begins once there is more than one. */ .participant-section + .participant-section { margin-top: .5rem; padding-top: 1.5rem; border-top: 1px solid var(--bs-border-color); } /* .score/.input-metric colours from shared/timefold-quickstart.css assume a light body; lighten them here so the toolbar readout stays legible on the dark header. */ .score { color: var(--bs-body-color); } .input-metric { color: var(--bs-secondary-color); } body.on-platform #headerCustomDatasetButton { display: none !important; }