/* ========================================================================== admin-theme.css — GuestBookit admin panel theme (foundation) -------------------------------------------------------------------------- ONE stylesheet = one source of truth for how the admin panel looks. Built from the GuestBookit Design Brief: warm gold accent, soft neutral surfaces, generous whitespace, labelled controls, rounded soft corners. HOW THIS WORKS (plain English): - This file defines the GOLD accent + the brief's card/sidebar/toggle look. - It layers ON TOP of app.css (loaded after it), so existing pages keep working; screens get "dressed properly" as we re-skin them one by one. - To change the whole panel's look later, edit the variables in :root here ONCE and every admin screen updates at once. Load order in header.php: app.css (base) -> admin-theme.css (this file, the theme layer) ========================================================================== */ /* -------------------------------------------------------------------------- 1) DESIGN TOKENS — the single place to change colors & spacing -------------------------------------------------------------------------- */ :root { /* The ONE accent color: warm gold/amber (from the brief). */ --gb-gold: #854F0B; /* buttons, active nav, primary actions */ --gb-gold-hover: #6B3F09; /* darker gold for hover */ --gb-gold-soft: #FAEEDA; /* soft amber background / highlight */ --gb-gold-text: #FFFFFF; /* text on a gold button */ /* Neutral surfaces (soft, calm, premium). */ --gb-page: #F4F1EC; /* soft off-white page background */ --gb-card: #FFFFFF; /* white cards sit on the page */ --gb-ink: #2B2B28; /* dark grey primary text (not pure black) */ --gb-ink-soft: #6B6A64; /* muted secondary text */ --gb-line: #E7E4DD; /* hairline borders between things */ /* Soft, rounded corners (brief: 12px cards, 8px controls). */ --gb-radius-card: 12px; --gb-radius-control: 8px; /* Chip colors — the ONE definition every chip (palette + grid, all pages) reads from. Change a color here and it updates everywhere at once. Color-blind-safe trio: blue / amber / teal, well separated on the wheel. */ --chip-chapter-from: #1877F2; /* Chapter = blue (pause point) */ --chip-chapter-to: #0F52BA; --chip-music-from: #E8710A; /* Music + Slides = amber */ --chip-music-to: #C2410C; --chip-only-from: #0E9384; /* Music Only = teal */ --chip-only-to: #0B7268; } /* -------------------------------------------------------------------------- 2) THE ACCENT SWAP — make the whole panel gold in ONE move -------------------------------------------------------------------------- The existing site points everything at --color-primary (Facebook blue). By re-pointing those variables to gold on admin pages, every button, active state, and highlight that already uses them turns gold automatically — no need to touch a hundred rules. This is the "change once, update everywhere" promise, delivered. Scoped to .admin-theme so we can roll it out screen-by-screen: add the class 'admin-theme' to on a screen and it adopts the gold theme. -------------------------------------------------------------------------- */ body.admin-theme { --color-primary: var(--gb-gold); --color-primary-hover: var(--gb-gold-hover); --color-primary-text: var(--gb-gold-text); --color-primary-soft: var(--gb-gold-soft); --color-info: var(--gb-gold); --color-bg: var(--gb-page); --color-heading: var(--gb-ink); background: var(--gb-page); color: var(--gb-ink); } /* -------------------------------------------------------------------------- 3) CARDS — group related controls; never a wall of fields -------------------------------------------------------------------------- */ .admin-theme .gb-panel { background: var(--gb-card); border: 1px solid var(--gb-line); border-radius: var(--gb-radius-card); padding: var(--space-5); margin-bottom: var(--space-4); } .admin-theme .gb-panel__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .admin-theme .gb-panel__icon { font-size: 22px; line-height: 1; color: var(--gb-gold); flex: 0 0 auto; } .admin-theme .gb-panel__title { font-size: var(--fs-md); font-weight: 500; /* brief: medium, never bold-heavy */ color: var(--gb-ink); margin: 0; } .admin-theme .gb-panel__desc { font-size: var(--fs-sm); color: var(--gb-ink-soft); margin: 2px 0 0; } /* -------------------------------------------------------------------------- 4) PAGE HEADER — title + one-line context + one primary action -------------------------------------------------------------------------- */ .admin-theme .gb-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; } .admin-theme .gb-pagehead__title { font-size: var(--fs-lg); font-weight: 500; color: var(--gb-ink); margin: 0; } .admin-theme .gb-pagehead__subtitle { font-size: var(--fs-sm); color: var(--gb-ink-soft); margin: 2px 0 0; } /* -------------------------------------------------------------------------- 5) SUMMARY / METRIC CARDS — 2-4 numbers that matter at a glance -------------------------------------------------------------------------- */ .admin-theme .gb-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: var(--space-4); } /* compact metric cards */ .admin-theme .gb-metric { background: var(--gb-card); border: 1px solid var(--gb-line); border-radius: var(--gb-radius-control); padding: 5px 8px; } .admin-theme .gb-metric--accent { background: var(--gb-gold-soft); border-color: transparent; } .admin-theme .gb-metric__label { font-size: var(--fs-xs); color: var(--gb-ink-soft); margin: 0 0 2px; } .admin-theme .gb-metric--accent .gb-metric__label { color: var(--gb-gold); } .admin-theme .gb-metric__value { font-size: var(--fs-md); font-weight: 500; color: var(--gb-ink); margin: 0; line-height: 1.1; } .admin-theme .gb-metric--accent .gb-metric__value { color: var(--gb-gold); } /* -------------------------------------------------------------------------- 6) BUTTONS — verb-first labels, gold primary, soft corners -------------------------------------------------------------------------- */ .admin-theme .gb-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 500; line-height: 1; padding: 11px 16px; border-radius: var(--gb-radius-control); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease; } .admin-theme .gb-btn--primary { background: var(--gb-gold); color: var(--gb-gold-text); } .admin-theme .gb-btn--primary:hover { background: var(--gb-gold-hover); } .admin-theme .gb-btn--secondary { background: var(--gb-card); color: var(--gb-ink); border-color: var(--gb-line); } .admin-theme .gb-btn--secondary:hover { background: var(--gb-page); } /* -------------------------------------------------------------------------- 7) TOGGLES & SLIDERS — each with a one-line plain-English explanation -------------------------------------------------------------------------- */ .admin-theme .gb-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--gb-line); } .admin-theme .gb-setting:first-of-type { border-top: 0; } .admin-theme .gb-setting__text { min-width: 0; } .admin-theme .gb-setting__label { font-size: var(--fs-sm); font-weight: 500; color: var(--gb-ink); margin: 0; } .admin-theme .gb-setting__hint { font-size: var(--fs-xs); color: var(--gb-ink-soft); margin: 2px 0 0; } /* The toggle switch itself */ .admin-theme .gb-toggle { position: relative; width: 44px; height: 26px; flex: 0 0 auto; border: 0; border-radius: 999px; background: var(--gb-line); cursor: pointer; transition: background .15s ease; } .admin-theme .gb-toggle[aria-checked="true"] { background: var(--gb-gold); } .admin-theme .gb-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; } .admin-theme .gb-toggle[aria-checked="true"]::after { transform: translateX(18px); } /* Range slider accent (brief: sliders for settings). */ .admin-theme input[type="range"] { accent-color: var(--gb-gold); } /* -------------------------------------------------------------------------- 8) SIDEBAR — current section highlighted in gold -------------------------------------------------------------------------- Works alongside the existing host_sidebar markup. These only tune the active/hover colors to the gold theme; layout stays as-is. -------------------------------------------------------------------------- */ .admin-theme .gb-cp-side__item:hover { background: var(--gb-page); } .admin-theme .gb-cp-side__item.is-active { background: var(--gb-gold-soft); color: var(--gb-gold); } /* -------------------------------------------------------------------------- 9) FALLBACK ACCESSIBILITY — focus rings stay visible & on-brand -------------------------------------------------------------------------- */ .admin-theme .gb-btn:focus-visible, .admin-theme .gb-toggle:focus-visible { outline: 2px solid var(--gb-gold); outline-offset: 2px; } /* === control panel: docked gold sidebar === */ /* Kill the gaps: content goes edge-to-edge, no top gap under the nav. */ body.admin-theme.page-event-control .container { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; width: 100% !important; } body.admin-theme.page-event-control .section { padding-top: 0 !important; } /* The layout fills full width, no top margin, no gap between columns. */ body.admin-theme.page-event-control .gb-cp-layout { gap: 0 !important; margin-top: 0 !important; align-items: stretch !important; } /* The sidebar: docked flush-left, full height, gold-tinted panel. */ body.admin-theme.page-event-control .gb-cp-side { flex: 0 0 220px; background: #FBF7F0 !important; /* soft gold tint */ border: 0 !important; border-right: 1px solid #EADFCB !important; /* gold hairline on inner edge */ border-radius: 0 !important; /* squared — docked, not a card */ padding: 14px 12px !important; position: sticky; top: 0 !important; align-self: stretch; max-height: 100vh; min-height: calc(100vh - 60px); overflow-y: auto; } /* Give the content a little inner breathing room (not the sidebar's job). */ body.admin-theme.page-event-control .gb-cp-main { padding: 16px 24px; } /* Sidebar items adopt the gold theme. */ body.admin-theme.page-event-control .gb-cp-side__item:hover { background: #F3E4CB !important; } body.admin-theme.page-event-control .gb-cp-side__item--active { background: #FAEEDA !important; color: #854F0B !important; font-weight: 500 !important; } body.admin-theme.page-event-control .gb-cp-side__play { background: #854F0B !important; font-weight: 500 !important; } body.admin-theme.page-event-control .gb-cp-side__play:hover { background: #6B3F09 !important; } /* On phones the sidebar stacks full-width again (keep it flush, no radius). */ @media (max-width: 900px) { body.admin-theme.page-event-control .gb-cp-side { border-right: 0 !important; border-bottom: 1px solid #EADFCB !important; min-height: 0; position: static; } body.admin-theme.page-event-control .gb-cp-main { padding: 14px 16px; } } /* === control panel: lock sidebar + kill top gap === */ body.admin-theme.page-event-control #main > .section, body.admin-theme.page-event-control .section { padding-top: 0 !important; margin-top: 0 !important; } body.admin-theme.page-event-control .gb-cp-layout { margin-top: 0 !important; } body.admin-theme.page-event-control .gb-cp-side { position: sticky !important; top: var(--header-height, 60px) !important; height: calc(100vh - var(--header-height, 60px)) !important; max-height: calc(100vh - var(--header-height, 60px)) !important; overflow-y: auto !important; align-self: flex-start !important; }