/* ============================================================================ Theme tokens The active layout (data-layout) and colour scheme (data-theme) are set on in App.razor: the layout is the administrator's site-wide choice, the theme is the visitor's light/dark preference (defaulting to the admin default / the OS preference). Each of the six combinations is fully spelled out so exactly one block ever matches — no cascade fighting. ============================================================================ */ :root { --bg: #eef3f7; --surface: #ffffff; --surface-muted: #f2f6f9; --border: #dce4ec; --text: #1f2d3a; --text-muted: #5d6b7a; --heading: #0e3a5d; --brand: #11507c; --brand-dark: #0e3a5d; --brand-soft: #e8f1f8; --accent: #e2674a; --radius: 0.75rem; --shadow: rgba(14, 58, 93, 0.08); --head-font: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif; --rail-bg: linear-gradient(170deg, #0e3a5d 0%, #11507c 55%, #0d6e8f 100%); --rail-fg: rgba(255, 255, 255, 0.82); --rail-fg-muted: rgba(255, 255, 255, 0.6); --rail-strong: #ffffff; --rail-icon: #ffffff; --rail-active-bg: rgba(255, 255, 255, 0.22); --rail-active-fg: #ffffff; --topbar-bg: rgba(255, 255, 255, 0.85); color-scheme: light; } html[data-layout="marina"][data-theme="dark"] { --bg: #0b1620; --surface: #13212e; --surface-muted: #0f1f2b; --border: #243443; --text: #e6eef5; --text-muted: #90a4b5; --heading: #cfe3f2; --brand: #4aa3d6; --brand-dark: #7bc0e6; --brand-soft: rgba(74, 163, 214, 0.14); --accent: #f0916f; --shadow: rgba(0, 0, 0, 0.4); --rail-bg: linear-gradient(170deg, #0a2233 0%, #0c3046 100%); --rail-fg: rgba(255, 255, 255, 0.8); --rail-fg-muted: rgba(255, 255, 255, 0.55); --rail-strong: #ffffff; --rail-icon: #ffffff; --rail-active-bg: rgba(255, 255, 255, 0.16); --rail-active-fg: #ffffff; --topbar-bg: rgba(15, 28, 40, 0.85); color-scheme: dark; } html[data-layout="paseo"][data-theme="light"] { --bg: #f6f2ea; --surface: #fffdf8; --surface-muted: #efe9dc; --border: #e6ded0; --text: #2a2520; --text-muted: #7a7165; --heading: #3a3228; --brand: #5b6b3a; --brand-dark: #45522c; --brand-soft: #efe6d4; --accent: #b4552e; --radius: 0.4rem; --shadow: rgba(80, 60, 30, 0.08); --head-font: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --rail-bg: #fffdf8; --rail-fg: #2a2520; --rail-fg-muted: #7a7165; --rail-strong: #3a3228; --rail-icon: #b4552e; --rail-active-bg: transparent; --rail-active-fg: #b4552e; --topbar-bg: #fffdf8; color-scheme: light; } html[data-layout="paseo"][data-theme="dark"] { --bg: #1c1813; --surface: #26211a; --surface-muted: #322b21; --border: #3a3328; --text: #efe8da; --text-muted: #a99e8c; --heading: #efe2c9; --brand: #9bab6e; --brand-dark: #b6c489; --brand-soft: rgba(155, 171, 110, 0.16); --accent: #d9784e; --radius: 0.4rem; --shadow: rgba(0, 0, 0, 0.45); --head-font: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --rail-bg: #26211a; --rail-fg: #efe8da; --rail-fg-muted: #a99e8c; --rail-strong: #efe2c9; --rail-icon: #d9784e; --rail-active-bg: transparent; --rail-active-fg: #d9784e; --topbar-bg: #26211a; color-scheme: dark; } html[data-layout="mirador"][data-theme="light"] { --bg: #eef1f5; --surface: #ffffff; --surface-muted: #f1f5f9; --border: #e2e8f0; --text: #1b2430; --text-muted: #64748b; --heading: #15202b; --brand: #0d9488; --brand-dark: #0f766e; --brand-soft: #e3f5f2; --accent: #0d9488; --radius: 1rem; --shadow: rgba(15, 30, 50, 0.07); --rail-bg: #ffffff; --rail-fg: #64748b; --rail-fg-muted: #94a3b8; --rail-strong: #15202b; --rail-icon: #0d9488; --rail-active-bg: #e3f5f2; --rail-active-fg: #0d6e63; --topbar-bg: rgba(255, 255, 255, 0.85); color-scheme: light; } html[data-layout="mirador"][data-theme="dark"] { --bg: #0c1118; --surface: #161e29; --surface-muted: #1c2733; --border: #243140; --text: #e7edf4; --text-muted: #8a99ab; --heading: #d3e3f0; --brand: #2dd4bf; --brand-dark: #5eead4; --brand-soft: rgba(45, 212, 191, 0.13); --accent: #2dd4bf; --radius: 1rem; --shadow: rgba(0, 0, 0, 0.45); --rail-bg: #161e29; --rail-fg: #8a99ab; --rail-fg-muted: #64748b; --rail-strong: #d3e3f0; --rail-icon: #2dd4bf; --rail-active-bg: #10302c; --rail-active-fg: #2dd4bf; --topbar-bg: rgba(15, 22, 32, 0.85); color-scheme: dark; } /* ============================================================================ Colour schemes (data-scheme) — palettes layered on top of a layout. Each layout's "default" scheme is its built-in palette above; the rules below add the alternates an administrator can pick. They override only the colour-bearing variables, inheriting structure (radius, fonts, rail style) from the layout rules, so they apply alongside them via higher specificity. ============================================================================ */ /* ---- Marina alternates (gradient rail, white rail text inherited) ---------- */ html[data-layout="marina"][data-scheme="lagoon"][data-theme="light"] { --bg: #eaf4f4; --surface: #ffffff; --surface-muted: #eef6f6; --border: #d3e6e6; --text: #16302e; --text-muted: #5a7572; --heading: #0c3b38; --brand: #0f8a8a; --brand-dark: #0a6e6e; --brand-soft: #e0f2f1; --accent: #e6a34a; --rail-bg: linear-gradient(170deg, #0b4a48 0%, #0f7a78 55%, #129a8f 100%); --topbar-bg: rgba(255, 255, 255, 0.85); } html[data-layout="marina"][data-scheme="lagoon"][data-theme="dark"] { --bg: #08201f; --surface: #0f2b29; --surface-muted: #0c2523; --border: #1f3a38; --text: #e2f1ef; --text-muted: #8aa9a6; --heading: #c3e7e3; --brand: #34b3ad; --brand-dark: #5fd0c9; --brand-soft: rgba(52, 179, 173, 0.14); --accent: #f0b86a; --rail-bg: linear-gradient(170deg, #072725 0%, #0a3a37 100%); --topbar-bg: rgba(10, 30, 28, 0.85); } html[data-layout="marina"][data-scheme="sunset"][data-theme="light"] { --bg: #f3eef4; --surface: #fffafc; --surface-muted: #f3ebf1; --border: #e6d8e6; --text: #2c2433; --text-muted: #756a7d; --heading: #3a2a4a; --brand: #7a4a9c; --brand-dark: #5e3a7c; --brand-soft: #efe3f5; --accent: #ee6c4d; --rail-bg: linear-gradient(170deg, #3a2a5d 0%, #6e3f86 55%, #a85a7a 100%); --topbar-bg: rgba(255, 255, 255, 0.85); } html[data-layout="marina"][data-scheme="sunset"][data-theme="dark"] { --bg: #18121f; --surface: #221830; --surface-muted: #1d1428; --border: #342540; --text: #ece2f2; --text-muted: #a394b0; --heading: #e0cdee; --brand: #b985d6; --brand-dark: #cda3e3; --brand-soft: rgba(185, 133, 214, 0.15); --accent: #f2856a; --rail-bg: linear-gradient(170deg, #1f1430 0%, #3a2150 100%); --topbar-bg: rgba(20, 14, 28, 0.85); } html[data-layout="marina"][data-scheme="regatta"][data-theme="light"] { --bg: #eef1f7; --surface: #ffffff; --surface-muted: #eff3fa; --border: #d9e1ee; --text: #1b2436; --text-muted: #5c6a82; --heading: #16284e; --brand: #1f4eb8; --brand-dark: #173c8f; --brand-soft: #e4ecfb; --accent: #d6342f; --rail-bg: linear-gradient(170deg, #16284e 0%, #1f4eb8 60%, #2563c9 100%); --topbar-bg: rgba(255, 255, 255, 0.85); } html[data-layout="marina"][data-scheme="regatta"][data-theme="dark"] { --bg: #0a0f1c; --surface: #131b2e; --surface-muted: #0f1727; --border: #233152; --text: #e4eaf6; --text-muted: #8d9bb6; --heading: #c5d6f2; --brand: #5b86e8; --brand-dark: #82a4ef; --brand-soft: rgba(91, 134, 232, 0.14); --accent: #f0625d; --rail-bg: linear-gradient(170deg, #0c1530 0%, #16265a 100%); --topbar-bg: rgba(12, 18, 32, 0.85); } html[data-layout="marina"][data-scheme="slate"][data-theme="light"] { --bg: #eef0f2; --surface: #ffffff; --surface-muted: #eef1f4; --border: #dbe0e6; --text: #232a31; --text-muted: #65707b; --heading: #2c3742; --brand: #4d6577; --brand-dark: #3a4e5d; --brand-soft: #e7edf1; --accent: #c97b54; --rail-bg: linear-gradient(170deg, #2f3d49 0%, #46596a 100%); --topbar-bg: rgba(255, 255, 255, 0.85); } html[data-layout="marina"][data-scheme="slate"][data-theme="dark"] { --bg: #0e1316; --surface: #181f24; --surface-muted: #141a1f; --border: #283139; --text: #e3e8ec; --text-muted: #93a0ab; --heading: #cdd8e0; --brand: #7f9bb0; --brand-dark: #9db4c6; --brand-soft: rgba(127, 155, 176, 0.14); --accent: #d99a73; --rail-bg: linear-gradient(170deg, #141b21 0%, #222e38 100%); --topbar-bg: rgba(14, 19, 22, 0.85); } /* ---- Paseo alternates (surface rail, dark rail text) ----------------------- */ html[data-layout="paseo"][data-scheme="terracotta"][data-theme="light"] { --bg: #f7f0e8; --surface: #fffaf3; --surface-muted: #f0e5d8; --border: #e7d8c6; --text: #2e2620; --text-muted: #80715f; --heading: #3d2a20; --brand: #b0542e; --brand-dark: #8c3f20; --brand-soft: #f4e2d4; --accent: #c77f3a; --rail-bg: #fffaf3; --rail-fg: #2e2620; --rail-fg-muted: #80715f; --rail-strong: #3d2a20; --rail-icon: #b0542e; --rail-active-fg: #b0542e; --topbar-bg: #fffaf3; } html[data-layout="paseo"][data-scheme="terracotta"][data-theme="dark"] { --bg: #1d1611; --surface: #281e17; --surface-muted: #342820; --border: #3d2f24; --text: #efe4d7; --text-muted: #ab9a86; --heading: #f0d9c4; --brand: #d98a5e; --brand-dark: #e6a37d; --brand-soft: rgba(217, 138, 94, 0.16); --accent: #e0a45c; --rail-bg: #281e17; --rail-fg: #efe4d7; --rail-fg-muted: #ab9a86; --rail-strong: #f0d9c4; --rail-icon: #d98a5e; --rail-active-fg: #d98a5e; --topbar-bg: #281e17; } html[data-layout="paseo"][data-scheme="vino"][data-theme="light"] { --bg: #f6efea; --surface: #fffaf6; --surface-muted: #f0e4dd; --border: #e6d5cc; --text: #2c211f; --text-muted: #7d6a64; --heading: #4a1f28; --brand: #8a2e44; --brand-dark: #6c2334; --brand-soft: #f1dfe2; --accent: #b78a3c; --rail-bg: #fffaf6; --rail-fg: #2c211f; --rail-fg-muted: #7d6a64; --rail-strong: #4a1f28; --rail-icon: #8a2e44; --rail-active-fg: #8a2e44; --topbar-bg: #fffaf6; } html[data-layout="paseo"][data-scheme="vino"][data-theme="dark"] { --bg: #1e1416; --surface: #281a1d; --surface-muted: #321f23; --border: #3d262b; --text: #efdfe0; --text-muted: #ad9498; --heading: #e9c4cd; --brand: #cf6a82; --brand-dark: #df8c9f; --brand-soft: rgba(207, 106, 130, 0.15); --accent: #d4ad5e; --rail-bg: #281a1d; --rail-fg: #efdfe0; --rail-fg-muted: #ad9498; --rail-strong: #e9c4cd; --rail-icon: #cf6a82; --rail-active-fg: #cf6a82; --topbar-bg: #281a1d; } html[data-layout="paseo"][data-scheme="almendra"][data-theme="light"] { --bg: #f4f1ea; --surface: #fdfbf5; --surface-muted: #ece7db; --border: #ddd6c7; --text: #2d2a23; --text-muted: #7a7264; --heading: #3a362c; --brand: #6f7d5a; --brand-dark: #566244; --brand-soft: #e7e8d8; --accent: #a98c63; --rail-bg: #fdfbf5; --rail-fg: #2d2a23; --rail-fg-muted: #7a7264; --rail-strong: #3a362c; --rail-icon: #6f7d5a; --rail-active-fg: #6f7d5a; --topbar-bg: #fdfbf5; } html[data-layout="paseo"][data-scheme="almendra"][data-theme="dark"] { --bg: #1a1814; --surface: #24221b; --surface-muted: #2e2b22; --border: #38342a; --text: #ece8db; --text-muted: #a39c8a; --heading: #dcd9c4; --brand: #a3b07e; --brand-dark: #bcc79a; --brand-soft: rgba(163, 176, 126, 0.15); --accent: #c4a880; --rail-bg: #24221b; --rail-fg: #ece8db; --rail-fg-muted: #a39c8a; --rail-strong: #dcd9c4; --rail-icon: #a3b07e; --rail-active-fg: #a3b07e; --topbar-bg: #24221b; } html[data-layout="paseo"][data-scheme="azulejo"][data-theme="light"] { --bg: #f2f0ea; --surface: #fdfcf7; --surface-muted: #e7ebec; --border: #d8dfe0; --text: #232a2e; --text-muted: #687680; --heading: #1b3a4a; --brand: #246b86; --brand-dark: #1a5168; --brand-soft: #dbe9ef; --accent: #cf8a3a; --rail-bg: #fdfcf7; --rail-fg: #232a2e; --rail-fg-muted: #687680; --rail-strong: #1b3a4a; --rail-icon: #246b86; --rail-active-fg: #246b86; --topbar-bg: #fdfcf7; } html[data-layout="paseo"][data-scheme="azulejo"][data-theme="dark"] { --bg: #0f1719; --surface: #172226; --surface-muted: #1d2a2f; --border: #28383d; --text: #e3edf0; --text-muted: #90a3aa; --heading: #bfe0ea; --brand: #4ba3c2; --brand-dark: #74c0da; --brand-soft: rgba(75, 163, 194, 0.14); --accent: #dba35a; --rail-bg: #172226; --rail-fg: #e3edf0; --rail-fg-muted: #90a3aa; --rail-strong: #bfe0ea; --rail-icon: #4ba3c2; --rail-active-fg: #4ba3c2; --topbar-bg: #172226; } /* ---- Mirador alternates (surface rail, brand-tinted active state) ---------- */ html[data-layout="mirador"][data-scheme="indigo"][data-theme="light"] { --bg: #eef0f6; --surface: #ffffff; --surface-muted: #f1f3f9; --border: #e1e5f0; --text: #1d2230; --text-muted: #646c82; --heading: #1a1f3a; --brand: #4f46e5; --brand-dark: #4338ca; --brand-soft: #e8e7fc; --accent: #4f46e5; --rail-bg: #ffffff; --rail-fg: #646c82; --rail-fg-muted: #9aa1b5; --rail-strong: #1a1f3a; --rail-icon: #4f46e5; --rail-active-bg: #e8e7fc; --rail-active-fg: #4338ca; --topbar-bg: rgba(255, 255, 255, 0.85); } html[data-layout="mirador"][data-scheme="indigo"][data-theme="dark"] { --bg: #0c0e1a; --surface: #161a2b; --surface-muted: #1c2236; --border: #272e47; --text: #e6e9f4; --text-muted: #8b94ad; --heading: #cdd2ee; --brand: #818cf8; --brand-dark: #a5acfb; --brand-soft: rgba(129, 140, 248, 0.14); --accent: #818cf8; --rail-bg: #161a2b; --rail-fg: #8b94ad; --rail-fg-muted: #646c82; --rail-strong: #cdd2ee; --rail-icon: #818cf8; --rail-active-bg: #232a4a; --rail-active-fg: #a5acfb; --topbar-bg: rgba(14, 16, 28, 0.85); } html[data-layout="mirador"][data-scheme="coral"][data-theme="light"] { --bg: #f6eff0; --surface: #ffffff; --surface-muted: #faf0f1; --border: #f0dee0; --text: #2c2225; --text-muted: #7c6a6e; --heading: #3a2026; --brand: #e1556b; --brand-dark: #c43d54; --brand-soft: #fce2e6; --accent: #e1556b; --rail-bg: #ffffff; --rail-fg: #7c6a6e; --rail-fg-muted: #b09a9e; --rail-strong: #3a2026; --rail-icon: #e1556b; --rail-active-bg: #fce2e6; --rail-active-fg: #c43d54; --topbar-bg: rgba(255, 255, 255, 0.85); } html[data-layout="mirador"][data-scheme="coral"][data-theme="dark"] { --bg: #160f11; --surface: #221619; --surface-muted: #2a1c20; --border: #38262b; --text: #f2e2e4; --text-muted: #b0969b; --heading: #f0c8cf; --brand: #f47e90; --brand-dark: #f7a0ad; --brand-soft: rgba(244, 126, 144, 0.14); --accent: #f47e90; --rail-bg: #221619; --rail-fg: #b0969b; --rail-fg-muted: #806468; --rail-strong: #f0c8cf; --rail-icon: #f47e90; --rail-active-bg: #3a242a; --rail-active-fg: #f7a0ad; --topbar-bg: rgba(20, 14, 16, 0.85); } html[data-layout="mirador"][data-scheme="amber"][data-theme="light"] { --bg: #f6f2e9; --surface: #ffffff; --surface-muted: #faf4e6; --border: #ece0c8; --text: #2c2820; --text-muted: #7a7158; --heading: #3a3018; --brand: #b9790a; --brand-dark: #9a6408; --brand-soft: #f7ecd0; --accent: #c9890f; --rail-bg: #ffffff; --rail-fg: #7a7158; --rail-fg-muted: #aaa180; --rail-strong: #3a3018; --rail-icon: #c9890f; --rail-active-bg: #f7ecd0; --rail-active-fg: #9a6408; --topbar-bg: rgba(255, 255, 255, 0.85); } html[data-layout="mirador"][data-scheme="amber"][data-theme="dark"] { --bg: #16130b; --surface: #221c11; --surface-muted: #2a2316; --border: #38301c; --text: #f0ebdd; --text-muted: #ada185; --heading: #efdcb0; --brand: #e3b24f; --brand-dark: #efc873; --brand-soft: rgba(227, 178, 79, 0.15); --accent: #e3b24f; --rail-bg: #221c11; --rail-fg: #ada185; --rail-fg-muted: #7a7158; --rail-strong: #efdcb0; --rail-icon: #e3b24f; --rail-active-bg: #38301c; --rail-active-fg: #efc873; --topbar-bg: rgba(20, 16, 8, 0.85); } html[data-layout="mirador"][data-scheme="forest"][data-theme="light"] { --bg: #ecf2ee; --surface: #ffffff; --surface-muted: #eef5f0; --border: #dce8e0; --text: #1c2722; --text-muted: #5f7268; --heading: #12352a; --brand: #15803d; --brand-dark: #126b33; --brand-soft: #dcf0e3; --accent: #15803d; --rail-bg: #ffffff; --rail-fg: #5f7268; --rail-fg-muted: #93a89c; --rail-strong: #12352a; --rail-icon: #15803d; --rail-active-bg: #dcf0e3; --rail-active-fg: #126b33; --topbar-bg: rgba(255, 255, 255, 0.85); } html[data-layout="mirador"][data-scheme="forest"][data-theme="dark"] { --bg: #0a1410; --surface: #131f18; --surface-muted: #18271e; --border: #233429; --text: #e2efe7; --text-muted: #87a092; --heading: #bfe6cd; --brand: #34d27e; --brand-dark: #5cdf9a; --brand-soft: rgba(52, 210, 126, 0.13); --accent: #34d27e; --rail-bg: #131f18; --rail-fg: #87a092; --rail-fg-muted: #5f7268; --rail-strong: #bfe6cd; --rail-icon: #34d27e; --rail-active-bg: #163026; --rail-active-fg: #5cdf9a; --topbar-bg: rgba(10, 20, 16, 0.85); } html, body { font-family: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif; background-color: var(--bg); color: var(--text); } h1, h2, h3 { color: var(--heading); font-family: var(--head-font); } h1 { font-size: 1.6rem; font-weight: 700; } a, .btn-link { color: var(--brand); } .btn-primary { background-color: var(--brand); border-color: var(--brand); } .btn-primary:hover, .btn-primary:focus { background-color: var(--brand-dark); border-color: var(--brand-dark); } .content h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } /* ============================================================================ Application shell — one DOM, reshaped per layout (mobile-first) ============================================================================ */ .page { display: grid; /* Pin the shell to the viewport so the sidebar/top bar stay fixed and only the main area scrolls (dvh accounts for mobile browser chrome). */ height: 100vh; height: 100dvh; grid-template-columns: 1fr; grid-template-rows: 3.5rem 1fr; grid-template-areas: "topbar" "main"; background: var(--bg); } .sidebar { grid-area: sidebar; display: none; } .topbar { grid-area: topbar; } main { grid-area: main; display: flex; flex-direction: column; min-width: 0; /* The scroll container: content scrolls here while the shell stays put. min-height:0 lets this grid item shrink instead of blowing out the row. */ overflow-y: auto; min-height: 0; } .nav-drawer-toggle { display: none; } /* Brand */ .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; padding: 0.25rem 0.4rem; } .brand-icon { font-size: 1.7rem; color: var(--rail-icon); } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-name { color: var(--rail-strong); font-weight: 700; font-size: 1.05rem; } .brand-tagline { color: var(--rail-fg-muted); font-size: 0.75rem; } /* The compact brand lives in the top bar (mobile + Paseo); it sits on the light surface, so it uses surface-appropriate colours, not the rail's. */ .brand-compact { display: none; } .brand-compact .brand-icon { color: var(--brand); font-size: 1.4rem; } .brand-compact .brand-name { color: var(--heading); font-size: 1rem; } /* Top bar */ .topbar { display: flex; align-items: center; gap: 0.6rem; height: 3.5rem; padding: 0 1rem; background: var(--topbar-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .nav-toggle { display: inline-flex; align-items: center; cursor: pointer; color: var(--heading); font-size: 1.5rem; padding: 0.1rem 0.35rem; border-radius: 0.4rem; } .nav-toggle:hover { background: var(--brand-soft); } .page-title { display: none; font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } .top-link, .theme-toggle { color: var(--heading); text-decoration: none; display: inline-flex; align-items: center; font-size: 1.15rem; background: none; border: none; cursor: pointer; padding: 0.2rem; line-height: 1; } .top-link:hover, .theme-toggle:hover { color: var(--brand); } .logout-form { display: inline; margin: 0; } /* Show the single relevant theme toggle for the active scheme. */ html[data-theme="dark"] .theme-to-dark { display: none; } html[data-theme="light"] .theme-to-light { display: none; } /* Navigation links (rail / top bar / bottom bar) */ .nav-links { display: flex; flex-direction: column; gap: 0.25rem; } .nav-link { display: flex; align-items: center; gap: 0.6rem; height: 2.8rem; padding: 0 0.85rem; border-radius: 0.5rem; color: var(--rail-fg); text-decoration: none; font-size: 0.95rem; transition: background-color 0.15s ease, color 0.15s ease; } .nav-link:hover { background: var(--rail-active-bg); color: var(--rail-active-fg); } .nav-link.active { background: var(--rail-active-bg); color: var(--rail-active-fg); font-weight: 600; } .nav-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; } /* Content + footer */ .content { padding: 1.25rem 1rem 2rem; max-width: 70rem; flex: 1; } /* --- Mobile drawer (all layouts): the hamburger opens the sidebar as a drawer holding every menu item. ------------------------------------------------ */ .nav-drawer-toggle:checked ~ .sidebar { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 15rem; padding: 1rem 0.75rem; background: var(--rail-bg); overflow-y: auto; z-index: 1200; } /* The dimming layer behind the open drawer. A label for the drawer checkbox, so tapping anywhere outside the menu closes it. */ .nav-drawer-backdrop { display: none; } .nav-drawer-toggle:checked ~ .nav-drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1150; } /* --- Mobile icon bar (any layout, optional): a compact bottom bar with a chosen subset of nav items. Hidden on desktop; the full menu stays in the hamburger drawer. --------------------------------------------------------- */ .icon-bar { display: none; } @media (max-width: 800.98px) { .icon-bar { display: flex; position: fixed; inset: auto 0 0 0; gap: 0.15rem; padding: 0.25rem; background: var(--surface); border-top: 1px solid var(--border); z-index: 1100; } .icon-bar .nav-link { flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; height: auto; padding: 0.4rem 0.2rem; font-size: 0.68rem; text-align: center; color: var(--text-muted); } .icon-bar .nav-link .nav-icon { width: auto; font-size: 1.25rem; } .icon-bar .nav-link .nav-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-bar .nav-link:hover { background: transparent; color: var(--brand); } .icon-bar .nav-link.active { background: transparent; color: var(--accent); } /* Keep content clear of the fixed bar. */ .page.has-iconbar main { padding-bottom: 4rem; } } /* ============================================================================ Desktop (≥ 801px) ============================================================================ */ @media (min-width: 801px) { .nav-toggle, .brand-compact { display: none !important; } .content { padding: 1.75rem 2rem 3rem; } /* --- Marina & Mirador: full-height left rail --- */ html[data-layout="marina"] .page, html[data-layout="mirador"] .page { grid-template-columns: 16rem 1fr; grid-template-rows: 3.5rem 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; } html[data-layout="marina"] .sidebar, html[data-layout="mirador"] .sidebar { display: flex; flex-direction: column; position: sticky; top: 0; inset: auto; height: 100vh; padding: 1rem 0.75rem; background: var(--rail-bg); overflow-y: auto; box-shadow: none; z-index: 1; } html[data-layout="marina"] .sidebar .brand, html[data-layout="mirador"] .sidebar .brand { margin-bottom: 1rem; } html[data-layout="marina"] .page-title, html[data-layout="mirador"] .page-title { display: block; } /* Mirador's rail floats as a rounded card. */ html[data-layout="mirador"] .sidebar { margin: 0.75rem 0 0.75rem 0.75rem; height: calc(100vh - 1.5rem); border: 1px solid var(--border); border-radius: 1rem; } html[data-layout="mirador"] main { padding-bottom: 0; } /* --- Paseo: one horizontal top bar (brand + nav | actions) --- */ html[data-layout="paseo"] .page { grid-template-columns: 1fr auto; grid-template-rows: 3.75rem 1fr; grid-template-areas: "sidebar topbar" "main main"; } html[data-layout="paseo"] .sidebar { display: flex; flex-direction: row; align-items: center; gap: 1.75rem; height: 3.75rem; padding: 0 0.5rem 0 1.5rem; background: var(--topbar-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; overflow: visible; z-index: 10; } html[data-layout="paseo"] .sidebar .brand { margin: 0; padding: 0; } html[data-layout="paseo"] .topbar { height: 3.75rem; padding-right: 1.5rem; } html[data-layout="paseo"] .nav-links { flex-direction: row; gap: 0.25rem; } html[data-layout="paseo"] .nav-link { height: auto; padding: 0.4rem 0.7rem; border-radius: 0.4rem; opacity: 0.85; } html[data-layout="paseo"] .nav-link .nav-icon { display: none; } html[data-layout="paseo"] .nav-link:hover { background: var(--surface-muted); color: var(--text); opacity: 1; } html[data-layout="paseo"] .nav-link.active { background: transparent; color: var(--accent); opacity: 1; } html[data-layout="paseo"] .content { max-width: 48rem; margin: 0 auto; width: 100%; } } /* ============================================================================ Shared building blocks ============================================================================ */ .card-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 1px 2px var(--shadow); } /* Standard back link (BackLink.razor): quiet, top-left, above the page title. */ .back-link { margin-bottom: 0.75rem; } .back-link a { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; color: var(--text-muted); text-decoration: none; } .back-link a:hover, .back-link a:focus-visible { color: var(--brand); text-decoration: underline; } .page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; } .muted { color: var(--text-muted); font-size: 0.875rem; } /* ---- collapsible find control (SearchBox) ---- */ /* Sits inside .page-header: collapsed it is a quiet icon button at title level; expanded it stretches and keeps its controls right-aligned. */ .search-box { display: flex; align-items: center; gap: 0.5rem; } .search-box-expanded { flex: 1 1 auto; justify-content: flex-end; } .search-box-toggle { border: 0; background: transparent; color: var(--heading); font-size: 1.25rem; line-height: 1; padding: 0.35rem 0.5rem; border-radius: 0.375rem; cursor: pointer; } .search-box-toggle:hover, .search-box-toggle:focus-visible { color: var(--brand); background: var(--brand-soft); } /* Borderless icon toggle at page-title level (e.g. the starred-channels filter); lit in the accent colour while the filter is on, matching the channel stars. */ .filter-toggle { border: 0; background: transparent; color: var(--heading); font-size: 1.25rem; line-height: 1; padding: 0.35rem 0.5rem; border-radius: 0.375rem; cursor: pointer; } .filter-toggle:hover, .filter-toggle:focus-visible { color: var(--brand); background: var(--brand-soft); } .filter-toggle.is-active { color: var(--accent); } .search-box-input { flex: 0 1 22rem; min-width: 8rem; } /* ---- in-channel message search: highlighted hits + hit navigation ---- */ /* One floating cluster holding the search box, hit counter and chevrons. Sticky top-right: a chat page rests at the bottom of its scroll container, so every search control must stay reachable at any scroll depth. */ .channel-search { position: sticky; top: 0.5rem; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; width: max-content; max-width: 100%; margin-left: auto; margin-bottom: 0.75rem; padding: 0.3rem 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Idle (just the magnifier): shrink to a quiet compact pill. */ .channel-search:has(.search-box-toggle) { padding: 0.1rem; } .channel-search-count { font-variant-numeric: tabular-nums; white-space: nowrap; } mark.search-hit { background: #f5d76e; color: #1b2430; padding: 0 0.06em; border-radius: 2px; } html[data-theme="dark"] mark.search-hit { background: #8a6d1d; color: #fff; } /* The hit currently navigated to: accent its bubble and its occurrences. */ .message.search-current { outline: 2px solid var(--accent); outline-offset: 2px; } .message.search-current mark.search-hit { background: var(--accent); color: #fff; } /* ---- appearance picker (admin) ---- */ .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; } .choice { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .choice:hover { border-color: var(--brand); } .choice.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice-head { font-weight: 600; color: var(--heading); display: flex; align-items: center; gap: 0.5rem; } .choice-hint { font-size: 0.82rem; color: var(--text-muted); } /* Home-page widget picker: an orderable list of enable/disable rows. */ .widget-order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .widget-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); } .widget-row.disabled { opacity: 0.6; } .widget-toggle { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; flex: 1 1 auto; cursor: pointer; } .widget-toggle input { margin-top: 0.2rem; flex: 0 0 auto; } .widget-text { display: flex; flex-direction: column; gap: 0.2rem; } .widget-move { display: flex; gap: 0.3rem; flex: 0 0 auto; } /* Colour-scheme preview chips in the appearance picker. */ .swatches { display: inline-flex; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); } .swatch { width: 1.1rem; height: 1.1rem; } .badge-status { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 1rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } /* ---- incident status filter chips ---- */ /* Same shape as the status badges: a chip that is off is outlined and muted; switched on it wears the matching badge colours (added as badge-status + status-* classes on the button). The border stays on both states so the chip doesn't change size when toggled. */ .status-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; } .status-filter { display: inline-block; padding: 0.2rem 0.65rem; border: 1px solid var(--border); border-radius: 1rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap; background: transparent; color: var(--text-muted); cursor: pointer; } .status-filter.badge-status { border-color: transparent; } /* On phones the chips leave the title row and form their own row below it; on wider screens they take the stretch between the title and the search controls and center themselves in it. */ @media (max-width: 575.98px) { .page-header .status-filters { order: 3; flex-basis: 100%; } } @media (min-width: 576px) { .page-header .status-filters { flex: 1 1 auto; justify-content: center; } } .badge-status.status-new { background: #fdecea; color: #b3261e; } .badge-status.status-reported { background: #e2ecfb; color: #2456a8; } .badge-status.status-inprogress { background: #fff4e0; color: #9a6a00; } .badge-status.status-resolved { background: #e6f6ed; color: #1c7d4d; } .badge-status.status-closed { background: #edf0f3; color: #5d6b7a; } .badge-status.badge-private { background: #ece9fb; color: #5b4bb7; } .badge-status.badge-public { background: #e8f1f8; color: #11507c; } .badge-status.badge-announcement { background: #fff4e0; color: #9a6a00; } html[data-theme="dark"] .badge-status.status-new { background: #3a1b18; color: #f5a99f; } html[data-theme="dark"] .badge-status.status-reported { background: #16283f; color: #8ab4ea; } html[data-theme="dark"] .badge-status.status-inprogress { background: #3a2c10; color: #f0c070; } html[data-theme="dark"] .badge-status.status-resolved { background: #123524; color: #7ddca7; } html[data-theme="dark"] .badge-status.status-closed { background: #20262d; color: #9aa7b5; } html[data-theme="dark"] .badge-status.badge-private { background: #211c3a; color: #b3a9ee; } html[data-theme="dark"] .badge-status.badge-public { background: #102536; color: #7fbce6; } html[data-theme="dark"] .badge-status.badge-announcement { background: #3a2c10; color: #f0c070; } /* ---- incident card/grid view switch ---- */ .view-toggle { border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; } .view-toggle-btn { border: none; background: transparent; color: var(--text-muted); padding: 0.35rem 0.6rem; line-height: 1; cursor: pointer; } .view-toggle-btn.active { background: var(--brand-soft); color: var(--brand-dark); } .view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--border); } /* ---- incident grid view (sortable, paged table) ---- */ /* The card panel supplies the frame; the table scrolls sideways inside it if a narrow window makes the columns too tight. */ .incident-grid { overflow-x: auto; padding: 0.5rem 0; } .incident-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .incident-table th, .incident-table td { padding: 0.55rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); } .incident-table tbody tr:last-child td { border-bottom: none; } .incident-table tbody tr { cursor: pointer; } .incident-table tbody tr:hover { background: var(--surface-muted); } /* Header cells are whole-cell click targets for sorting. */ .incident-table th { padding: 0; white-space: nowrap; } .incident-sort { display: block; width: 100%; padding: 0.55rem 1rem; border: none; background: transparent; text-align: left; font-weight: 600; color: var(--heading); cursor: pointer; } .incident-sort .bi { font-size: 0.7rem; color: var(--brand); } .incident-grid-link { color: var(--text); text-decoration: none; font-weight: 600; } .incident-grid-link:hover { text-decoration: underline; } /* The reference number people quote when talking about an incident. */ .incident-id { color: var(--text-muted); font-weight: 600; } /* ---- admin diagnostics page ---- */ /* Rows of small stat tiles, same look as the pool history stats. */ .diag-stats { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; margin: 0.5rem 0 0; } .diag-stat dt { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); margin: 0; } .diag-stat dd { font-size: 1.25rem; font-weight: 700; margin: 0; } .diag-sub { display: block; font-size: 0.78rem; font-weight: 400; color: var(--text-muted); } /* Translation credit consumption as a thin fill bar under the number. */ .diag-bar { width: 220px; max-width: 100%; height: 6px; border-radius: 3px; background: var(--surface-muted); margin-top: 0.35rem; overflow: hidden; } .diag-bar-fill { height: 100%; border-radius: 3px; background: var(--brand); } .diag-bar-fill.diag-bar-high { background: var(--accent); } /* ---- language selector ---- */ .lang-menu { position: relative; } .lang-menu > summary { list-style: none; cursor: pointer; color: var(--heading); white-space: nowrap; padding: 0.3rem 0.5rem; border-radius: 0.5rem; } .lang-menu > summary::-webkit-details-marker { display: none; } .lang-menu > summary:hover { background: var(--brand-soft); } .lang-menu[open] > ul { position: absolute; right: 0; top: 2.2rem; z-index: 50; margin: 0; padding: 0.4rem; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 0.6rem; box-shadow: 0 8px 24px var(--shadow); min-width: 11rem; max-height: 70vh; overflow-y: auto; } .lang-menu li a { display: block; padding: 0.45rem 0.8rem; border-radius: 0.4rem; text-decoration: none; color: var(--text); } .lang-menu li a:hover { background: var(--brand-soft); } .lang-menu li a.active { font-weight: 700; color: var(--brand); } /* ---- weather widget ---- */ .weather-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(5.5rem, 1fr); gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; } .weather-day { text-align: center; background: var(--surface-muted); border-radius: 0.6rem; padding: 0.6rem 0.3rem; } .weather-day .day-name { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: capitalize; } .weather-day .day-icon { font-size: 1.6rem; line-height: 2.2rem; color: var(--accent); } .weather-day .day-temp { font-size: 0.85rem; font-weight: 600; } .weather-day .day-detail { font-size: 0.72rem; color: var(--text-muted); } /* The forecast links out to a detailed external forecast. */ .weather-link { display: block; text-decoration: none; color: inherit; border-radius: 0.6rem; } .weather-link:hover .weather-day { background: var(--surface); outline: 1px solid var(--border); } .weather-link:hover .weather-more { color: var(--brand); text-decoration: underline; } .weather-more { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); } /* ---- half-width home widgets ---- Adjacent half-width widgets share an invisible flex row so they sit side by side AND stretch to the same height (align-items: stretch). The row has no box of its own, so the left card aligns flush-left and the right card flush-right with the full-width widget cards. Each column's card fills the stretched height. Collapses to a single column on narrow screens. */ .home-widget-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem; margin-bottom: 1rem; } .home-widget-col { display: flex; flex-direction: column; flex: 1 1 calc(50% - 0.5rem); min-width: 0; } /* The widget's card fills its (equal-height) column. */ .home-widget-col > .card-panel { flex: 1 1 auto; margin-bottom: 0; } /* Half-width widgets stay side by side on mobile; to fit the narrow cards we hide the secondary readings there (see the widget rules further down). */ /* ---- today-only weather widget ---- */ .weather-today { display: flex; align-items: center; gap: 1rem; } .weather-today-icon { font-size: 3rem; line-height: 1; color: var(--accent); } .weather-today-date { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-transform: capitalize; } /* Mobile-only compact date (calendar icon + short date); hidden on wide screens. */ .weather-today-date-short { display: none; } .weather-today-kind { font-size: 0.95rem; font-weight: 600; } .weather-today-temp { font-size: 1.4rem; font-weight: 700; } .weather-today-feels { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.05rem; } .weather-today-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.85rem; font-size: 0.74rem; color: var(--text-muted); margin-top: 0.15rem; } .weather-link:hover .weather-today-icon { color: var(--brand); } /* ---- pool widget ---- */ .pool-widget { position: relative; } /* Whole card taps through to the measurement-history graphs. */ .pool-link { display: block; text-decoration: none; color: inherit; } .pool-link:hover .pool-icon { color: var(--brand); } .pool-link:hover .pool-temp { color: var(--brand); } /* Manager edit affordance, layered above the card link in the top-right corner. */ .pool-edit-btn { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 1; } .pool-widget-head { display: flex; align-items: center; gap: 0.5rem; padding-right: 2rem; } .pool-widget-head h2 { margin: 0; } .pool-body { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; } .pool-icon { font-size: 3.2rem; line-height: 1; color: var(--accent); flex: 0 0 auto; } .pool-readings { flex: 1 1 auto; min-width: 0; } /* Water temperature matches the weather widget's temperature size. */ .pool-temp { font-size: 1.4rem; font-weight: 700; line-height: 1.2; } .pool-temp .pool-unit { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-left: 0.15rem; } .pool-temp-empty { color: var(--text-muted); font-weight: 400; } .pool-stats { display: flex; flex-wrap: wrap; gap: 0.1rem 1rem; margin: 0.35rem 0 0; } .pool-stat { display: flex; align-items: baseline; gap: 0.3rem; } .pool-stat dt { font-size: 0.75rem; color: var(--text-muted); margin: 0; } .pool-stat dd { font-size: 0.85rem; font-weight: 600; margin: 0; } /* Shown above the temperature, styled like the weather widget's date line. */ .pool-date { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.1rem; } .pool-date-value { text-transform: capitalize; } /* Mobile-only compact bits (calendar-icon date + one-line stats); hidden wide. */ .pool-date-short { display: none; } .pool-stats-compact { display: none; } /* Full title on wide screens; a one-word title on the narrow mobile cards. */ .widget-title-short { display: none; } /* The half-width cards stay side by side on mobile, so they are narrow: show only the essentials (date + temperature) and tighten the icon/spacing. */ @media (max-width: 640.98px) { .weather-today-kind, .weather-today-feels, .weather-today-meta, .pool-stats, .widget-title-full { display: none; } .widget-title-short { display: inline; } .weather-today-icon, .pool-icon { font-size: 2.4rem; } /* Both cards: keep the icon on the left with date + value at its right; the date shrinks to a calendar icon + short date. The weather min temperature drops to a smaller regular weight next to the bold max. */ .weather-today, .pool-body { gap: 0.6rem; } .weather-today-date-full, .pool-date-full { display: none; } .weather-today-date-short, .pool-date-short { display: inline; } .weather-today-temp-min { font-size: 0.95rem; font-weight: 400; } /* Pool card: the readings return as one small line under the icon row. */ .pool-stats-compact { display: block; font-size: 0.74rem; color: var(--text-muted); margin-top: 0.4rem; } } /* History page: the last measured values as a row of small stat tiles. */ .pool-latest { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; margin: 0.5rem 0 0; } .pool-latest-stat dt { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); margin: 0; } .pool-latest-stat dd { font-size: 1.25rem; font-weight: 700; margin: 0; } .pool-latest-unit { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); } /* Manage page: keep the reading columns compact. */ .pool-table td, .pool-table th { white-space: nowrap; } /* ---- pool measurement charts (inline SVG line graphs) ---- */ .pool-chart { margin-top: 1.25rem; } .pool-chart:first-of-type { margin-top: 0.5rem; } .pool-chart-title { font-weight: 600; margin-bottom: 0.25rem; } .pool-chart-unit { color: var(--text-muted); font-weight: 400; font-size: 0.85em; } .pool-chart-svg { width: 100%; height: auto; display: block; overflow: visible; } .pool-chart-svg .pc-grid { stroke: var(--border); stroke-width: 2; } .pool-chart-svg .pc-grid-minor { stroke: var(--border); stroke-width: 1; stroke-opacity: 0.7; } .pool-chart-svg .pc-line { stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .pool-chart-svg .pc-dot { fill: var(--accent); } .pool-chart-svg .pc-ylabel, .pool-chart-svg .pc-xlabel { fill: var(--text-muted); font-size: 12px; } /* ---- weather detail: one row per day (date · icon · temps · stats · wind) ---- */ .weather-daylist { display: flex; flex-direction: column; margin-top: 0.5rem; } .wdl-row { display: grid; /* date | icon | temps | sun/precip stats (flexible) | wind */ grid-template-columns: 3.6rem 2.6rem 3.6rem 1fr auto; align-items: center; gap: 0.9rem; padding: 0.55rem 0.35rem; border-top: 1px solid var(--border); } .weather-daylist .wdl-row:first-child { border-top: 0; } .wdl-row.is-today { background: var(--surface); border-radius: 0.5rem; } .wdl-date { display: flex; flex-direction: column; line-height: 1.25; } .wdl-dow { font-weight: 700; color: var(--brand); text-transform: capitalize; } .wdl-dom { font-size: 0.8rem; color: var(--text-muted); } .wdl-icon { font-size: 1.7rem; line-height: 1; color: var(--accent); text-align: center; } .wdl-temps { display: flex; flex-direction: column; line-height: 1.25; text-align: right; } .wdl-tmin { font-size: 0.85rem; color: var(--text-muted); } .wdl-tmax { font-size: 1.05rem; font-weight: 700; } /* Wide screens: the three stats sit side by side; a min-width per stat keeps them vertically aligned from row to row. They stack on narrow screens below. */ .wdl-stats { display: flex; align-items: center; gap: 0.1rem 1.1rem; font-size: 0.78rem; color: var(--text-muted); line-height: 1.3; } .wdl-stats span { white-space: nowrap; min-width: 4.5rem; } .wdl-stats i { width: 1rem; display: inline-block; text-align: center; } .wdl-wind { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: end; color: var(--text-muted); } .wdl-wind-value { font-weight: 600; color: var(--text); } .wdl-unit { font-weight: 400; font-size: 0.78rem; color: var(--text-muted); } @media (max-width: 930.98px) { .wdl-stats { flex-direction: column; align-items: flex-start; font-size: 0.74rem; } .wdl-stats span { min-width: 0; } } @media (max-width: 480.98px) { .wdl-row { grid-template-columns: 3.1rem 2.2rem 3.2rem 1fr auto; gap: 0.6rem; } .wdl-icon { font-size: 1.5rem; } } /* ---- weather detail page ---- */ /* Current conditions */ .weather-current { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; } .wc-main { display: flex; align-items: center; gap: 1rem; } .wc-icon { font-size: 3.4rem; color: var(--accent); line-height: 1; } .wc-temp { font-size: 2.6rem; font-weight: 700; line-height: 1; } .wc-desc { color: var(--text-muted); } .wc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0; flex: 1; min-width: 14rem; } .wc-stats > div { display: flex; flex-direction: column; } .wc-stats dt { font-size: 0.75rem; color: var(--text-muted); } .wc-stats dd { margin: 0; font-weight: 600; } /* ---- weather charts page (inline SVG line/bar graphs over time) ---- */ .weather-charts-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .weather-charts-inner { min-width: 100%; } .weather-chart-block { margin-top: 1.5rem; } .weather-chart-block:first-of-type { margin-top: 0.75rem; } .weather-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 0.35rem; } .weather-chart-title { font-weight: 600; } .weather-chart-unit { color: var(--text-muted); font-weight: 400; font-size: 0.85em; } .weather-chart-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.85rem; color: var(--text-muted); } .weather-chart-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; } .weather-chart-swatch { width: 0.85rem; height: 0.2rem; border-radius: 1px; } .weather-chart-swatch.wc-s-temp { background: #e2674a; } .weather-chart-swatch.wc-s-feels { background: #4a90d9; } .weather-chart-swatch.wc-s-wind { background: #2fa39a; } .weather-chart-swatch.wc-s-precip { background: #5b9bd5; } .weather-chart-svg { width: 100%; height: auto; display: block; overflow: visible; } .weather-chart-svg .wc-grid { stroke: var(--border); stroke-width: 1; } .weather-chart-svg .wc-day { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; } .weather-chart-svg .wc-ylabel, .weather-chart-svg .wc-xlabel { fill: var(--text-muted); font-size: 12px; } .weather-chart-svg .wc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .weather-chart-svg .wc-line.wc-s-temp { stroke: #e2674a; } .weather-chart-svg .wc-line.wc-s-feels { stroke: #4a90d9; } .weather-chart-svg .wc-line.wc-s-wind { stroke: #2fa39a; } .weather-chart-svg .wc-bar.wc-s-precip { fill: #5b9bd5; } @media (max-width: 640.98px) { /* Charts are ~2.5x the screen width and pan horizontally (about 3 days visible at a time); the shared container keeps the three time axes in sync while swiping. Titles/legends stick to the left edge. */ .weather-charts-inner { min-width: 250%; } /* Must fit inside the visible scrollport, or the sticky head runs out of room in its containing block at full scroll and gets clipped. */ .weather-chart-head { position: sticky; left: 0; width: max-content; max-width: 75vw; } } /* ---- contacts widget (compact, links to the contacts page) ---- */ /* A prominent "callout" card so important numbers stand out from news cards: tinted background, an accent left bar, and a large accent icon badge. */ .contacts-widget { background: var(--brand-soft); border-color: transparent; border-left: 4px solid var(--accent); transition: transform 0.15s ease, box-shadow 0.15s ease; } .contacts-widget:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--shadow); } .contacts-link { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; } .contacts-widget-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.6rem; box-shadow: 0 2px 6px var(--shadow); } .contacts-widget-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .contacts-widget-title { font-weight: 700; font-size: 1.05rem; color: var(--heading); } .contacts-widget-sub { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contacts-widget-arrow { flex: 0 0 auto; font-size: 1.3rem; color: var(--accent); transition: transform 0.15s ease; } .contacts-link:hover .contacts-widget-arrow { transform: translateX(3px); } /* ---- contacts page ---- */ .contacts-list { display: flex; flex-direction: column; gap: 0.6rem; } .contact-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .contact-label { font-weight: 600; color: var(--heading); } /* Methods stack vertically so each can carry its own note on the same line. */ .contact-methods { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.3rem; } .contact-method-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; } .contact-method { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--brand); } .contact-method:hover { text-decoration: underline; } .contact-method-note { color: var(--text-muted); font-size: 0.85rem; } .contact-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } /* ---- forum ---- */ /* Clickable channel card (navigates on click; inline translate/edit buttons stop the click so they don't navigate). */ .channel-card { cursor: pointer; } .channel-card h2 { color: var(--brand); } .channel-card:hover { border-color: var(--brand); } /* Member autocomplete dropdown for private channels. */ .member-suggestions { z-index: 1050; max-height: 16rem; overflow-y: auto; } /* Favourite star toggle on a channel card. */ .favorite-btn { border: 0; background: none; padding: 0 0.15rem; line-height: 1; font-size: 1.05rem; color: var(--text-muted); cursor: pointer; } .favorite-btn:hover { color: var(--accent); } .favorite-btn.is-favorite { color: var(--accent); } /* The bell (subscribe) uses the brand colour when active, to read apart from the gold star. */ .subscribe-btn:hover { color: var(--brand); } .subscribe-btn.is-subscribed { color: var(--brand); } .message-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } /* Top-of-list marker whose visibility triggers loading the previous page. */ .forum-load-older { min-height: 1px; align-self: center; padding: 0.25rem 0; font-size: 0.85rem; } /* Chat bubbles: other owners on the left, my own messages on the right. */ .message { position: relative; /* anchors the side add-reaction control */ max-width: min(78%, 42rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-bottom-left-radius: 0.2rem; /* little "tail" corner toward the left edge */ padding: 0.55rem 0.85rem; align-self: flex-start; } .message.own { align-self: flex-end; background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, transparent); border-bottom-left-radius: var(--radius); border-bottom-right-radius: 0.2rem; /* tail flips to the right edge */ } .message-meta { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.2rem; } .message.own .message-meta { justify-content: flex-end; } .message-author { font-weight: 700; color: var(--heading); font-size: 0.9rem; } /* Edit/delete controls on the author's own message, pushed to the right. */ .message-actions { margin-left: auto; display: inline-flex; gap: 0.25rem; } .msg-action-btn { border: 0; background: none; padding: 0 0.15rem; line-height: 1; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; } .msg-action-btn:hover { color: var(--brand); } .message-actions.delete-confirm { align-items: center; } .message-actions .confirm-text { font-size: 0.85rem; color: var(--text-muted); } /* Web addresses inside user text (forum messages), rendered as clickable links. break-all keeps long URLs from overflowing the chat bubble. */ .text-link { color: var(--accent); text-decoration: underline; word-break: break-all; } /* @mentions of members inside a message; your own mention pops out more. */ .mention { color: var(--accent); font-weight: 600; } .mention-self { background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 0.25rem; padding: 0 0.15rem; } /* **bold** in a forum message is shown in the theme accent colour, matching how bold renders in news posts (.blog-content strong); *italic* and __underline__ keep the default treatment. Only the message bubble, never the composer. */ .message strong { color: var(--accent); } /* The bubble whose text is currently loaded in the composer for editing. */ .message.editing { border: 1px dashed var(--accent); } /* "Editing message" banner above the composer input, with its cancel button. */ .composer-editing { display: flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem; } /* The edited message's existing photos, as chips with a remove/restore toggle. */ .edit-photos { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.35rem; } .edit-photo-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; font-size: 0.82rem; border: 1px solid var(--border); border-radius: 1rem; max-width: 100%; } .edit-photo-chip .edit-photo-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .edit-photo-chip.removed { opacity: 0.55; } .edit-photo-chip.removed .edit-photo-name { text-decoration: line-through; } /* Member typeahead (admin settings): type to filter, suggestions open below. */ .member-typeahead { position: relative; max-width: 24rem; } .member-typeahead-list { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; max-height: 14rem; overflow-y: auto; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); z-index: 60; } .member-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.35rem; } .member-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; font-size: 0.9rem; border: 1px solid var(--border); border-radius: 1rem; } /* The member picker shown while typing "@name" in the composer. */ .composer { position: relative; } .mention-picker { position: absolute; bottom: calc(100% + 0.25rem); left: 0.75rem; min-width: 14rem; max-width: calc(100% - 1.5rem); max-height: 14rem; overflow-y: auto; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); z-index: 60; } .mention-choice { border: 0; background: none; text-align: left; padding: 0.45rem 0.75rem; cursor: pointer; color: inherit; } .mention-choice:hover, .mention-choice:focus-visible { background: var(--brand-soft); } /* A message flagged as inappropriate: visible only to its author (with the notice below) and to moderators. */ .message.flagged { border: 1px dashed #b3261e; } .flag-notice { display: flex; gap: 0.4rem; align-items: baseline; color: #b3261e; font-size: 0.82rem; margin-bottom: 0.3rem; } .flag-notice .flag-reason { font-style: italic; } .flag-form { margin-bottom: 0.4rem; } /* "X is typing…" indicator above the composer. Kept in the DOM (aria-live) and hidden when nobody is typing, so the height doesn't jump. */ .typing-indicator { display: flex; align-items: center; gap: 0.4rem; min-height: 1.2rem; margin: 0.1rem 0.2rem 0.4rem; font-size: 0.85rem; } .typing-indicator.is-hidden { visibility: hidden; } .typing-dots { display: inline-flex; gap: 0.18rem; } .typing-dots span { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--text-muted); animation: typing-bounce 1.2s infinite ease-in-out both; } .typing-dots span:nth-child(2) { animation-delay: 0.15s; } .typing-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes typing-bounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-0.15rem); } } /* Attachments shown with a message/incident: compact thumbnails above the text. */ .message-photos { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; } .message.own .message-photos { justify-content: flex-end; } /* Emoji reactions at the bottom of a message */ .message-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.4rem; } .message.own .message-reactions { justify-content: flex-end; } .reaction-pill { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.05rem 0.45rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface-muted); font-size: 0.85rem; line-height: 1.5; cursor: pointer; /* Long-press reveals who reacted; suppress the native selection/callout. */ -webkit-touch-callout: none; user-select: none; } .reaction-pill:hover { border-color: var(--brand); } .reaction-pill.mine { background: var(--brand-soft); border-color: var(--brand); } .reaction-count { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .reaction-pill.mine .reaction-count { color: var(--brand); } /* Popover listing who reacted, shown on long-press (touch). Fixed + JS-clamped to the viewport, so it never overflows. */ .reaction-names-popover { position: fixed; z-index: 1100; max-width: min(16rem, calc(100vw - 1rem)); padding: 0.4rem 0.6rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); font-size: 0.8rem; line-height: 1.45; } .reaction-names-popover > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Floats just outside the bubble — to the right of others' messages, to the left of my own — so it doesn't add a row under the message. */ .reaction-add { position: absolute; top: 50%; transform: translateY(-50%); right: -1.75rem; display: inline-flex; z-index: 5; } .message.own .reaction-add { right: auto; left: -1.75rem; } .reaction-add-btn { border: 1px solid transparent; background: none; color: var(--text-muted); padding: 0.05rem 0.3rem; border-radius: 1rem; font-size: 0.9rem; line-height: 1.4; cursor: pointer; opacity: 0.5; transition: opacity 0.12s ease; } /* Fully visible on hover/focus or when hovering the message (still tappable on touch). */ .message:hover .reaction-add-btn, .reaction-add-btn:hover, .reaction-add-btn:focus-visible { opacity: 1; } .reaction-add-btn:hover { color: var(--brand); border-color: var(--border); background: var(--surface-muted); } .reaction-picker { position: absolute; top: calc(100% + 0.25rem); left: 0; /* others: open into the right-hand gutter */ right: auto; z-index: 20; display: flex; flex-wrap: wrap; /* wrap into rows on narrow screens instead of overflowing */ justify-content: center; max-width: min(14rem, 60vw); gap: 0.15rem; padding: 0.3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.6rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .message.own .reaction-picker { left: auto; right: 0; } /* mine: open into the left-hand gutter */ .reaction-choice { border: 0; background: none; font-size: 1.2rem; line-height: 1; padding: 0.2rem; border-radius: 0.4rem; cursor: pointer; } .reaction-choice:hover { background: var(--surface-muted); } /* Image attachment thumbnail (ImageAttachmentPreviewer); opens the viewer on click. */ .attachment-thumb { border: 0; padding: 0; width: 104px; height: 104px; border-radius: 0.5rem; overflow: hidden; cursor: pointer; background: var(--surface-muted); } .attachment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Fallback preview for attachments without a dedicated previewer: a download chip. */ .attachment-file { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 16rem; padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--surface-muted); color: var(--text); text-decoration: none; } .attachment-file:hover { border-color: var(--brand); } .attachment-file-icon { font-size: 1.15rem; color: var(--text-muted); } .attachment-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Inline video player for a video attachment. */ .attachment-video { max-width: 100%; } .attachment-video video { display: block; max-width: min(20rem, 100%); max-height: 22rem; border-radius: 0.5rem; background: #000; } /* Message composer: icon-only add-photo button + selected-file chips. */ /* Forum composer: compact single line while idle; expands on focus and reveals the attach + send controls on one row. Uses :focus-within so focus moving from the textarea to a control (attach/send) keeps it open. */ .composer .composer-input { resize: none; height: 2.6rem; /* one line */ min-height: 2.6rem; overflow-y: hidden; transition: height 0.15s ease; } .composer:focus-within .composer-input { height: 7rem; overflow-y: auto; } .composer-actions { display: none; } .composer:focus-within .composer-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .composer-actions .photo-attach { margin: 0; } .composer-actions .composer-send { margin-left: auto; } /* The composer (MentionComposer, used by the forum composer and the incident forms) is a plain textarea plus an @mention dropdown; mention-host is the positioning context for that .mention-picker. Links and @mentions are not coloured while typing — they colour in the posted message via TranslatedText. */ .mention-host { position: relative; } .mention-host textarea::placeholder { color: var(--text-muted); opacity: 1; } /* A bubble whose text is being edited in place (incident comments): bubbles are shrink-to-fit, so without this the editor would be sized by the textarea's tiny intrinsic width instead of the bubble's. */ .message.editing-inline { width: 100%; } .file-input-hidden { display: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); cursor: pointer; font-size: 1rem; margin: 0; } .icon-btn:hover { color: var(--brand); border-color: var(--brand); } .selected-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; } .selected-photo { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 14rem; padding: 0.2rem 0.4rem 0.2rem 0.55rem; border: 1px solid var(--border); border-radius: 1rem; font-size: 0.8rem; color: var(--text-muted); background: var(--surface-muted); } .selected-photo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .remove-photo { border: 0; background: none; padding: 0; line-height: 1; color: var(--text-muted); cursor: pointer; } .remove-photo:hover { color: var(--accent); } /* Full-screen photo viewer (modal). */ .photo-viewer { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); cursor: zoom-out; } .viewer-image { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 0.4rem; cursor: default; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .viewer-close, .viewer-nav { position: absolute; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; } .viewer-close { top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; font-size: 1.1rem; } .viewer-nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.4rem; } .viewer-nav.prev { left: 1rem; } .viewer-nav.next { right: 1rem; } .viewer-close:hover, .viewer-nav:hover { background: rgba(0, 0, 0, 0.75); } /* unread forum message (always from another owner): accent left edge + a "New" pill */ .message.unread { border-left: 3px solid var(--accent); } .unread-pill { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; background: var(--brand); border-radius: 1rem; padding: 0.05rem 0.5rem; } .unread-badge { display: inline-block; min-width: 1.4rem; text-align: center; font-size: 0.75rem; font-weight: 700; color: #fff; background: var(--brand); border-radius: 1rem; padding: 0.05rem 0.45rem; margin-left: 0.4rem; } /* ---- polls ---- */ .poll-bar { background: var(--surface-muted); border-radius: 0.4rem; overflow: hidden; height: 1.5rem; position: relative; margin: 0.25rem 0 0.6rem; } .poll-bar-fill { background: var(--brand); opacity: 0.25; height: 100%; } .poll-bar-label { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 0.6rem; font-size: 0.85rem; } /* ---- misc ---- */ .preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; } /* Inline, icon-only translation controls shown at the end of translatable text: a bi-translate toggle (original ⇄ translation), an edit pencil for admins, and a spinner while a translation is being fetched. Kept subtle so they don't compete with the content. */ .ti-actions { display: inline-flex; align-items: center; gap: 0.1rem; margin-left: 0.3rem; vertical-align: baseline; } .ti-btn { border: 0; background: none; padding: 0 0.1rem; margin: 0; line-height: 1; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; vertical-align: baseline; } .ti-btn:hover { color: var(--brand); } .ti-btn.active { color: var(--brand); } /* translation is currently shown */ .ti-spin { width: 0.7rem; height: 0.7rem; border-width: 0.12em; margin-left: 0.3rem; color: var(--text-muted); vertical-align: middle; } /* ---- document folder browser ---- */ .doc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 1rem; font-size: 0.95rem; } .doc-breadcrumb .sep { color: var(--text-muted); } .doc-breadcrumb .current { font-weight: 600; color: var(--heading); } .link-button { border: none; background: none; padding: 0; color: var(--brand); cursor: pointer; } .link-button:hover { text-decoration: underline; } .file-list .file-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--border); } .file-list .file-row:last-child { border-bottom: none; } .file-list .file-name { flex: 1; min-width: 12rem; } .file-list .file-row:hover { background: var(--surface-muted); } .file-list [role="button"] { cursor: pointer; } /* ---- GDPR footer & cookie banner ---- */ .site-footer { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-muted); } .site-footer a { color: var(--text-muted); text-decoration: underline; } .cookie-banner { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; margin: 0 auto; max-width: 60rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); z-index: 1100; } .cookie-banner-text { flex: 1 1 20rem; } .cookie-banner-text p { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--text-muted); } .cookie-banner-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } /* ---- rich-text (Quill) editor & rendered blog content ---- */ .rich-text-editor .ql-container { min-height: 12rem; font-size: 1rem; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } .rich-text-editor .ql-toolbar { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } /* Keep typed text legible in dark mode (Quill ships light-only styles). */ html[data-theme="dark"] .rich-text-editor .ql-container, html[data-theme="dark"] .rich-text-editor .ql-editor { background: var(--surface); color: var(--text); } html[data-theme="dark"] .rich-text-editor .ql-toolbar, html[data-theme="dark"] .rich-text-editor .ql-container { border-color: var(--border); } /* Quill's toolbar icons are hardcoded dark grey (#444), which is invisible on the dark toolbar and makes every stock button look disabled. Recolour the icons and dropdown labels to the theme text colour; keep the brand colour for hover/active so toggled formats still read as "on". */ html[data-theme="dark"] .rich-text-editor .ql-toolbar .ql-stroke { stroke: var(--text); } html[data-theme="dark"] .rich-text-editor .ql-toolbar .ql-fill { fill: var(--text); } html[data-theme="dark"] .rich-text-editor .ql-toolbar .ql-picker-label { color: var(--text); } html[data-theme="dark"] .rich-text-editor .ql-toolbar .ql-picker-label .ql-stroke { stroke: var(--text); } html[data-theme="dark"] .rich-text-editor .ql-picker-options { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .rich-text-editor .ql-picker-item { color: var(--text); } html[data-theme="dark"] .rich-text-editor .ql-toolbar button:hover .ql-stroke, html[data-theme="dark"] .rich-text-editor .ql-toolbar button.ql-active .ql-stroke, html[data-theme="dark"] .rich-text-editor .ql-toolbar .ql-picker-label:hover .ql-stroke, html[data-theme="dark"] .rich-text-editor .ql-toolbar .ql-picker-label.ql-active .ql-stroke { stroke: var(--brand); } html[data-theme="dark"] .rich-text-editor .ql-toolbar button:hover .ql-fill, html[data-theme="dark"] .rich-text-editor .ql-toolbar button.ql-active .ql-fill { fill: var(--brand); } html[data-theme="dark"] .rich-text-editor .ql-toolbar button:hover, html[data-theme="dark"] .rich-text-editor .ql-toolbar button.ql-active, html[data-theme="dark"] .rich-text-editor .ql-toolbar .ql-picker-label:hover, html[data-theme="dark"] .rich-text-editor .ql-toolbar .ql-picker-label.ql-active, html[data-theme="dark"] .rich-text-editor .ql-toolbar .ql-picker-item:hover, html[data-theme="dark"] .rich-text-editor .ql-toolbar .ql-picker-item.ql-selected { color: var(--brand); } /* Blog title as a link to the article's own page: looks like the heading, hints on hover. */ .blog-title-link { color: inherit; text-decoration: none; } .blog-title-link:hover, .blog-title-link:focus-visible { text-decoration: underline; } .blog-content img { max-width: 100%; height: auto; border-radius: 0.4rem; } .blog-content p { margin-bottom: 0.75rem; } /* Author-applied bold (the editor's [B] button) is shown in the theme accent colour — in both the rendered post and the editor, so editing stays WYSIWYG. */ .blog-content strong, .blog-content b, .rich-text-editor .ql-editor strong, .rich-text-editor .ql-editor b { color: var(--accent); } /* Inline-image positioning, chosen in the rich-text editor and stored as a class on a wrapper around the (rte-img-inline|left|right|full). Applied both in the editor (.ql-editor) and the rendered post (.blog-content). */ .blog-content .rte-img-inline, .ql-editor .rte-img-inline { display: inline; } .blog-content .rte-img-left, .ql-editor .rte-img-left { float: left; max-width: 50%; margin: 0.25rem 1rem 0.5rem 0; } .blog-content .rte-img-right, .ql-editor .rte-img-right { float: right; max-width: 50%; margin: 0.25rem 0 0.5rem 1rem; } .blog-content .rte-img-full, .ql-editor .rte-img-full { display: block; width: 100%; margin: 0.5rem 0; } /* The image fills its positioned wrapper. */ .blog-content .rte-img-left img, .blog-content .rte-img-right img, .blog-content .rte-img-full img, .ql-editor .rte-img-left img, .ql-editor .rte-img-right img, .ql-editor .rte-img-full img { display: block; width: 100%; height: auto; } /* Contain the floats so they don't spill past the post/teaser. */ .blog-content::after, .ql-editor::after { content: ""; display: block; clear: both; } @media (max-width: 560px) { /* Floats get cramped on phones: let left/right images go full width instead. */ .blog-content .rte-img-left, .blog-content .rte-img-right { float: none; max-width: 100%; margin: 0.5rem 0; } } .blog-content .ql-size-small { font-size: 0.75em; } .blog-content .ql-size-large { font-size: 1.5em; } .blog-content .ql-size-huge { font-size: 2.5em; } .blog-content .ql-align-center { text-align: center; } .blog-content .ql-align-right { text-align: right; } .blog-content .ql-align-justify { text-align: justify; } /* ---- "read more" cut ---- */ /* Toolbar button: a scissors icon, tinted with the accent colour so it stands out as a special insert among the stock formatting buttons. */ .rich-text-editor .ql-toolbar button.ql-read-more { color: var(--accent); } .rich-text-editor .ql-toolbar button.ql-read-more:hover { color: var(--brand); } /* The cut shown inside the editor: a labelled dashed divider. */ .rich-text-editor .ql-editor hr.rte-more { border: 0; border-top: 2px dashed var(--accent); margin: 1.25rem 0; height: 0; overflow: visible; } .rich-text-editor .ql-editor hr.rte-more::after { content: "✂"; display: block; width: fit-content; margin: -0.8rem auto 0; padding: 0 0.5rem; background: var(--surface); color: var(--accent); font-size: 0.9rem; } /* Public "Read more / Show less" toggle. */ .btn-read-more { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.25rem; padding: 0; border: 0; background: none; color: var(--brand); font-weight: 600; cursor: pointer; } .btn-read-more:hover { text-decoration: underline; }