/* Liturio — theming is driven by the MudBlazor MudTheme in MainLayout.razor. This file only carries global font choices and a few non-Mud bits (the Blazor error UI, the static login form, the monospace chord editor). Those non-Mud bits can't read the Mud palette, so they use the CSS variables below. MainLayout mirrors the active theme onto , which flips these variables in lock-step with MudBlazor — including when the user's manual toggle differs from the OS setting. Declaring color-scheme for both keeps native controls right and stops mobile "force dark" from inverting. */ :root { color-scheme: light; --liturio-input-bg: #FFFFFF; --liturio-text: #29303F; --liturio-border: #E2E8F1; --liturio-btn-text: #2B3346; --liturio-btn-active-bg: #EDF2FA; --liturio-muted: #67707F; --liturio-accent: #3B74E8; --liturio-accent-shadow: rgba(59, 116, 232, 0.18); /* Blue chrome that always pairs with cream text (chatbot header / user bubble). */ --liturio-brand: #3B74E8; --liturio-error-ui-bg: #EAF0FA; --liturio-flag-ring: rgba(0, 0, 0, 0.12); } :root[data-theme="dark"] { color-scheme: dark; --liturio-input-bg: #2F3850; --liturio-text: #E9EDF7; --liturio-border: #3E4763; --liturio-btn-text: #E9EDF7; --liturio-btn-active-bg: #384463; --liturio-muted: #B4BCCD; --liturio-accent: #9FBEF8; --liturio-accent-shadow: rgba(159, 190, 248, 0.24); --liturio-brand: #3E63C8; --liturio-error-ui-bg: #2F3850; --liturio-flag-ring: rgba(255, 255, 255, 0.16); } html, body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Liturgical serif for the brand + headings */ .liturio-brand, h1, h2, h3, h4, h5, h6, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; letter-spacing: 0.01em; } .liturio-brand { font-weight: 600; } /* Static (SSR) login form — native inputs styled to sit with the Mud look */ .liturio-login-input { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--liturio-border); border-radius: 8px; background-color: var(--liturio-input-bg); color: var(--liturio-text); font-size: 1rem; font-family: inherit; } .liturio-login-input:focus { outline: none; border-color: var(--liturio-accent); box-shadow: 0 0 0 2px var(--liturio-accent-shadow); } /* Rich chord editor (contenteditable). font-family is set inline, per song: charts are aligned with spaces against the source document's font and only line up in that font. */ .liturio-chord-editor { width: 100%; min-height: 28rem; padding: 0.75rem; border: 1px solid var(--liturio-border); border-radius: 8px; background-color: var(--liturio-input-bg); color: var(--liturio-text); font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; overflow-x: auto; } .liturio-chord-editor:focus { outline: none; border-color: var(--liturio-accent); box-shadow: 0 0 0 2px var(--liturio-accent-shadow); } /* Formatting toolbar (bold / italic / underline) */ .liturio-fmt-bar { display: inline-flex; gap: 2px; } .liturio-fmt-btn { width: 2rem; height: 2rem; border: 1px solid var(--liturio-border); border-radius: 6px; background-color: var(--liturio-input-bg); color: var(--liturio-btn-text); font-size: 0.9rem; cursor: pointer; line-height: 1; } .liturio-fmt-btn:hover { border-color: var(--liturio-accent); color: var(--liturio-accent); } .liturio-fmt-btn:active { background-color: var(--liturio-btn-active-bg); } /* Language switcher flags */ .liturio-lang { display: inline-flex; align-items: center; gap: 2px; } .liturio-flag { display: inline-flex; line-height: 0; text-decoration: none; padding: 2px; opacity: 0.45; filter: grayscale(70%); transition: opacity 0.15s ease, filter 0.15s ease; } .liturio-flag svg { display: block; border-radius: 2px; box-shadow: 0 0 0 1px var(--liturio-flag-ring); } .liturio-flag-active, .liturio-flag:hover { opacity: 1; filter: none; } /* Set-list jump links on the liturgy view page */ .liturio-setlist-item { padding: 0.15rem 0; } .liturio-setlist-num { display: inline-block; min-width: 1.6rem; color: var(--liturio-muted); font-variant-numeric: tabular-nums; } /* Read-only chord chart on the song view page (font also set inline, per song) */ .liturio-chord-view { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--liturio-text); white-space: pre-wrap; overflow-x: auto; } /* Bible passage reading */ .liturio-bible-text { font-size: 1.05rem; line-height: 1.7; } .liturio-bible-verse { margin: 0 0 0.4rem 0; } .liturio-verse-num { display: inline-block; min-width: 1.2rem; margin-right: 0.15rem; color: var(--liturio-accent); font-size: 0.72em; font-weight: 600; vertical-align: super; font-variant-numeric: tabular-nums; } /* Embedded media players on the song view page */ .liturio-embed-video { position: relative; width: 100%; aspect-ratio: 16 / 9; } .liturio-embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; } .liturio-embed-spotify { width: 100%; height: 152px; border: 0; border-radius: 12px; } /* Blazor error boundary + reconnect error UI */ .blazor-error-boundary { background: #8a3c3c; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } #blazor-error-ui { background: var(--liturio-error-ui-bg); color: var(--liturio-text); border-top: 2px solid var(--liturio-accent); 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 1.25rem; position: fixed; width: 100%; z-index: 2000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* Help chatbot (Liturbot) — floating button + panel, shown only in the authenticated layout. */ .liturbot { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1500; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; } .liturbot-fab { align-self: flex-end; } .liturbot-panel { width: min(370px, calc(100vw - 2rem)); height: min(520px, calc(100vh - 7rem)); overflow: hidden; border-radius: 12px; } .liturbot-header { background-color: var(--liturio-brand); color: #FFF6EC; } .liturbot-messages { overflow-y: auto; background-color: var(--liturio-input-bg); } .liturbot-msg { display: flex; flex-direction: column; margin-bottom: 0.6rem; } .liturbot-msg-user { align-items: flex-end; } .liturbot-msg-bot { align-items: flex-start; } .liturbot-bubble { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 12px; white-space: pre-wrap; word-break: break-word; line-height: 1.4; border: 1px solid var(--liturio-border); background-color: var(--liturio-input-bg); color: var(--liturio-text); } .liturbot-msg-user .liturbot-bubble { background-color: var(--liturio-brand); border-color: var(--liturio-brand); color: #FFF6EC; } .liturbot-typing { display: flex; align-items: center; color: var(--liturio-muted); } .liturbot-sources { margin-top: 0.25rem; max-width: 85%; color: var(--liturio-muted); }