/* ============================================================================= * /cat/assets/css/admin-theme.css * * Reusable visual layer for catechism pages. Builds on MDB5 + common.css. * * ── ONE FILE, SEVERAL THEMES ───────────────────────────────────────────────── * This file is IDENTICAL on every install. The palette is chosen at render time * by a data-theme attribute on , sourced from fixed_parameters.ui_theme: * * * * That keeps the CSS in the parity manifest like everything else, and makes a * new theme a block of variables rather than a forked file. An install can be * re-themed by changing one row, without touching code. * * ── WHY THE VARIABLES ARE NAMED BY ROLE, NOT BY COLOUR ────────────────────── * They used to be --adm-burgundy and --adm-gold, which was honest while there * was one palette and a lie the moment there were two: nothing is more confusing * six months on than a variable called "burgundy" holding marine blue. Names now * say what a colour DOES — primary, accent, well, line — so a new theme fills * them in without renaming anything. * * Class names are unchanged and admin-prefixed, so pages need no edits. * * @version 2.0.0 * * Changelog * 2.0.0 — (a) Variables renamed from colour to ROLE: --adm-burgundy* -> * --adm-primary*, --adm-gold* -> --adm-accent*. Nothing outside this * file referenced them, so no page changed. * (b) TWO themes in one file, selected by [data-theme]: * rosary — burgundy + antique gold (stcharbelqatar, the original) * marine — deep marine + amber (echristianae) * The marine palette is drawn from the eChristian mark: the blue of * the hull and waves, the amber of the sun. * (c) Public-page pieces added — .adm-hero, .adm-choice, .adm-state * — so the entry pages share the admin visual language instead of * inventing a second one. * 1.1.1 — Editor/preview stack vertically. * 1.1.0 — Brand palette applied. * 1.0.0 — Initial admin theme. * ============================================================================= */ /* ---- Theme: rosary (default) --------------------------------------------- */ /* stcharbelqatar — burgundy from the Rosary Qatar logo, antique gold from the Saint Charbel icon, on warm parchment neutrals. */ :root, [data-theme="rosary"] { --adm-primary: #6B1A2D; --adm-primary-700: #5a1626; --adm-primary-050: #f3e7ea; --adm-accent: #8A5A00; /* readable on light — text, code */ --adm-accent-bright: #D8A521; /* on dark only */ --adm-accent-soft: #f4e3b8; /* chip text on the primary header */ --adm-well: #f6efe0; /* warm parchment inset */ --adm-line: #e3d9c2; /* hairline borders */ --adm-shadow-rgb: 107, 26, 45; } /* ---- Theme: marine -------------------------------------------------------- */ /* echristianae — the blue of the hull and waves, the amber of the sun, on cool sand neutrals. */ [data-theme="marine"] { --adm-primary: #16455F; --adm-primary-700: #103449; --adm-primary-050: #e8eff3; --adm-accent: #C4741A; --adm-accent-bright: #E8A33D; --adm-accent-soft: #f6e2c0; --adm-well: #f5f1e9; --adm-line: #ddd6c9; --adm-shadow-rgb: 22, 69, 95; } /* ---- Shared, theme-independent ------------------------------------------- */ :root { --adm-ink: #1f2533; --adm-body: #495057; --adm-muted: #6c757d; --adm-surface: #ffffff; --adm-danger: #c62828; --adm-success: #1f7a3d; --adm-warning: #b8860b; /* Inactive controls: a filled, bordered, dark-texted surface. A pale outline reads as half-rendered rather than as "not available". */ --adm-inert-bg: #e4ddd0; --adm-inert-line: #c9c0ae; --adm-inert-text: #5a5348; --adm-radius: .65rem; --adm-radius-sm: .4rem; --adm-shadow: 0 .25rem .75rem rgba(var(--adm-shadow-rgb), .12); --adm-shadow-lg: 0 .5rem 1.5rem rgba(var(--adm-shadow-rgb), .16); --adm-fs-h: 1.05rem; --adm-fs-label: .82rem; --adm-fs-chip: .72rem; } /* ---- Page scaffold ------------------------------------------------------- */ .adm-page-wrap { max-width: 1100px; margin: 0 auto; padding: 0 .5rem; } /* ---- Cards --------------------------------------------------------------- */ .adm-card { background: var(--adm-surface); border: 1px solid var(--adm-line); border-radius: var(--adm-radius); box-shadow: var(--adm-shadow); margin-bottom: 1.25rem; overflow: hidden; } .adm-card__body { padding: 1rem 1.15rem; } .adm-card__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1.15rem; color: #fff; background: linear-gradient(135deg, var(--adm-primary-700), var(--adm-primary)); } .adm-card__header h1, .adm-card__header h2, .adm-card__header h5 { font-size: var(--adm-fs-h); font-weight: 600; margin: 0; line-height: 1.2; } .adm-card__footer { padding: .75rem 1.15rem; background: var(--adm-well); border-top: 1px solid var(--adm-line); } /* ---- Hero (public entry pages) ------------------------------------------- */ /* Title in plain white, not the soft accent: on a saturated header the tinted version recedes exactly where the page should feel confident. */ .adm-hero { background: linear-gradient(135deg, var(--adm-primary-700), var(--adm-primary)); border-radius: var(--adm-radius); padding: 1.5rem 1.75rem; color: #fff; margin-bottom: 1.5rem; } .adm-hero__title { font-size: 1.4rem; font-weight: 600; margin: 0 0 .25rem; color: #fff; } .adm-hero__sub { font-size: .95rem; margin: 0; color: rgba(255, 255, 255, .85); } /* ---- Choice card (parish / role) ---------------------------------------- */ .adm-choice { background: var(--adm-surface); border: 1px solid var(--adm-line); border-top: 3px solid var(--adm-primary); border-radius: var(--adm-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease; } .adm-choice:hover { box-shadow: var(--adm-shadow-lg); } .adm-choice__media { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; background: var(--adm-primary-050); display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; } .adm-choice__body { padding: 1.1rem 1.15rem; flex: 1 1 auto; } .adm-choice__name { font-size: 1.05rem; font-weight: 600; margin: 0 0 .1rem; } .adm-choice__place { font-size: .85rem; color: var(--adm-muted); margin: 0 0 .9rem; } /* ---- State pill ---------------------------------------------------------- */ /* One shape, one position, colour and words carrying the difference — so a returning visitor reads status before reading anything else. */ .adm-state { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--adm-fs-chip); font-weight: 600; padding: .28rem .65rem; border-radius: 999px; } .adm-state--open { background: #eaf3de; color: #3B6D11; } .adm-state--soon { background: #FAEEDA; color: #854F0B; } .adm-state--closed { background: #FCEBEB; color: #A32D2D; } .adm-state--paused { background: var(--adm-well); color: var(--adm-body); } /* ---- Inactive action ----------------------------------------------------- */ .adm-inert { display: block; width: 100%; text-align: center; padding: .55rem; border-radius: var(--adm-radius-sm); background: var(--adm-inert-bg); border: 1px solid var(--adm-inert-line); color: var(--adm-inert-text); font-size: .9rem; cursor: not-allowed; } /* ---- Chip / pill --------------------------------------------------------- */ .adm-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--adm-fs-chip); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px; background: rgba(var(--adm-shadow-rgb), .12); color: var(--adm-accent-soft); border: 1px solid rgba(255, 255, 255, .28); } .adm-chip--muted { background: var(--adm-well); color: var(--adm-body); border: 1px solid var(--adm-line); } /* ---- Labels / helper text ------------------------------------------------ */ .adm-label { display: block; font-size: var(--adm-fs-label); font-weight: 600; color: var(--adm-body); margin-bottom: .3rem; } .adm-help { font-size: .78rem; color: var(--adm-muted); margin-top: .3rem; } .adm-card code, code.adm-token { background: var(--adm-well); color: var(--adm-accent); padding: 0 4px; border-radius: 3px; font-size: .85em; } /* ---- Editor-specific layout --------------------------------------------- */ .adm-editor-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; } .adm-editor-host { padding: 0; } .adm-preview { background: #ededed; border: 1px solid var(--adm-line); border-radius: var(--adm-radius-sm); padding: 1rem; min-height: 320px; max-height: 70vh; overflow: auto; } .adm-preview iframe { width: 100%; min-height: 60vh; border: 0; background: #fff; border-radius: var(--adm-radius-sm); } .adm-split { display: grid; grid-template-columns: 1fr; gap: 1rem; } /* ---- Buttons ------------------------------------------------------------- */ .adm-btn-primary { background: var(--adm-primary); border: 1px solid var(--adm-primary); color: #fff; } .adm-btn-primary:hover { background: var(--adm-primary-700); border-color: var(--adm-primary-700); color: #fff; } .adm-btn-accent { background: var(--adm-accent); border: 1px solid var(--adm-accent); color: #fff; } .adm-btn-accent:hover { filter: brightness(.92); color: #fff; } .adm-btn-ghost { background: transparent; border: 1px solid var(--adm-line); color: var(--adm-body); } .adm-btn-ghost:hover { background: var(--adm-well); } .adm-btn-ghost--ondark { background: transparent; border: 1px solid rgba(255, 255, 255, .4); color: #fff; } .adm-btn-ghost--ondark:hover { background: rgba(255, 255, 255, .12); } .adm-btn-accent--ondark { background: rgba(255, 255, 255, .12); border: 1px solid var(--adm-accent-bright); color: var(--adm-accent-soft); } .adm-btn-accent--ondark:hover { background: rgba(255, 255, 255, .2); } /* ---- Status text --------------------------------------------------------- */ .adm-status { font-size: .8rem; } .adm-status--ok { color: var(--adm-success); } .adm-status--err { color: var(--adm-danger); } .adm-status--warn { color: var(--adm-warning); } /* ---- Accessibility ------------------------------------------------------- */ .adm-card a:focus-visible, .adm-choice a:focus-visible, .adm-editor-toolbar button:focus-visible { outline: 2px solid var(--adm-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }