/** * theme-auto.css — Adamiro Theme * * Programmatically-managed CSS additions and overrides. * This file is edited by tooling; do NOT manually edit it. * * User-maintained styles belong in style.css. * This file is enqueued after style.css, so rules here * take precedence where selectors have equal specificity. */ /* ============================================================ Block Theme Wrapper: Overflow Fix WordPress block themes wrap all content in .wp-site-blocks and template parts in .wp-block-template-part. WordPress layout CSS applies overflow:clip to constrained-layout blocks (including these wrappers) to contain full-width children. overflow:clip on ANY ancestor of a sticky element breaks position:sticky. It also clips the mega menu panel that extends below the header. Strategy: - body: overflow-x:clip keeps horizontal scroll contained (prevents full-width blocks from causing h-scroll) - block wrappers: overflow visible so sticky + mega work ============================================================ */ html, body { overflow-x: clip; } /* All potential WordPress-generated layout wrappers that could receive overflow:clip from theme.json or wp-block-library. */ body>.wp-site-blocks, .wp-site-blocks, .wp-site-blocks>.wp-block-template-part, .wp-block-template-part, .wp-site-blocks>.wp-block-group, .wp-site-blocks .is-layout-constrained:not(.app-sidebar *), .wp-site-blocks .is-layout-flow:not(.app-sidebar *), .wp-site-blocks .has-global-padding:not(.app-sidebar *) { overflow: visible !important; } /* ============================================================ Header Template-Part Wrapper: Sticky WordPress wraps in a
. Making THIS element sticky is the most reliable approach because it is the outermost element under .wp-site-blocks and no further ancestor clip can interfere. ============================================================ */ .wp-site-blocks>.wp-block-template-part:first-child { position: sticky; top: 0; z-index: 1001; } /* ============================================================ Mega Menu: Header Overflow Fix The site-header itself and all containers within it must also be visible so the absolutely-positioned mega panel can extend below the header bar. ============================================================ */ .site-header, .site-header.wp-block-group, .site-header.is-layout-constrained, .site-header .wp-block-group, .site-header .header-container, .main-navigation { overflow: visible !important; } /* ============================================================ Mega Menu: Hide Fallback Sub-menus Standard .sub-menu lists generated when the mega-menu walker is NOT active (or for non-mega items) should be hidden. The mega panels use .mega-menu class, NOT .sub-menu, so this rule does not affect them. ============================================================ */ .site-header .main-navigation ul>li>.sub-menu { display: none !important; } /* ============================================================ Light Mode: Header & Sidebar Always Dark The dark-mode toggle sets data-theme="light" on , which changes CSS custom properties globally. The header and sidebar must keep their dark brand appearance regardless. We re-pin the variables back to dark-mode values inside these containers so no child element picks up light values. ============================================================ */ [data-theme="light"] .site-header, [data-theme="light"] .site-header *, [data-theme="light"] .app-sidebar, [data-theme="light"] .app-sidebar * { --bg: var(--navy); --bg-alt: var(--petrol); --fg: var(--off-white); --fg-muted: var(--light-gray); --fg-subtle: var(--gray); --border-v3: rgba(255, 255, 255, 0.08); --card-bg: rgba(255, 255, 255, 0.04); --glass-v3: rgba(255, 255, 255, 0.06); } /* Force header background back to navy (overrides WP inline color) */ [data-theme="light"] .site-header { background: var(--navy) !important; color: var(--off-white) !important; } /* Sidebar stays dark */ [data-theme="light"] .app-sidebar { background: var(--navy) !important; color: var(--off-white) !important; } /* Header buttons, links, and search icon stay light-on-dark */ [data-theme="light"] .site-header a, [data-theme="light"] .site-header button, [data-theme="light"] .site-header svg { color: inherit !important; } /* Mega-nav hamburger icon stays light */ [data-theme="light"] .site-header .nav-hamburger, [data-theme="light"] .site-header .nav-hamburger svg, [data-theme="light"] .site-header .hamburger-label { color: var(--off-white) !important; stroke: currentColor; } /* Sidebar links stay light */ [data-theme="light"] .app-sidebar a, [data-theme="light"] .app-sidebar .menu-label, [data-theme="light"] .app-sidebar .lucide-icon, [data-theme="light"] .app-sidebar .lucide { color: inherit !important; } /* ============================================================ Light Mode: Dashboard Content Area When data-theme="light" is set, the body and app-main must switch to light backgrounds. The dark appearance normally comes from @media(prefers-color-scheme:dark) in style.css — these rules override that with !important since theme-auto loads after style.css. ============================================================ */ html[data-theme="light"] body, html[data-theme="light"] body.has-sidebar { background-color: var(--off-white) !important; color: var(--text-ink) !important; } html[data-theme="light"] .app-main, html[data-theme="light"] .site-main.app-main { background-color: var(--off-white) !important; color: var(--text-ink); } /* ============================================================ Light Mode: Signals Dashboard Form field groups, inputs, source items, and settings ============================================================ */ /* Force all WordPress block wrappers in app-main to be transparent */ html[data-theme="light"] .app-main .wp-block-group, html[data-theme="light"] .app-main .wp-block-adamiro-signals-dashboard, html[data-theme="light"] .app-main .is-layout-constrained, html[data-theme="light"] .app-main .is-layout-flow { background-color: transparent !important; } /* Force dashboard itself + all panels transparent */ html[data-theme="light"] .adamiro-signals-dashboard, html[data-theme="light"] .adamiro-signals-dashboard .asd-panel, html[data-theme="light"] .adamiro-signals-dashboard .asd-sources-list, html[data-theme="light"] .adamiro-signals-dashboard .asd-source-group, html[data-theme="light"] .adamiro-signals-dashboard .asd-source-group__items, html[data-theme="light"] .adamiro-signals-dashboard .asd-suggestion-form, html[data-theme="light"] .adamiro-signals-dashboard .asd-reports-list, html[data-theme="light"] .adamiro-signals-dashboard .asd-ideas-list, html[data-theme="light"] .asd-settings-editor, html[data-theme="light"] .asd-settings-editor .acp-columns { background: transparent !important; } html[data-theme="light"] .acp-field-group { background: rgba(7,4,37,.03) !important; border-color: rgba(7,4,37,.10) !important; } html[data-theme="light"] .acp-input { background: rgba(7,4,37,.03) !important; border-color: rgba(7,4,37,.12) !important; color: var(--text-ink) !important; } html[data-theme="light"] .acp-input:focus { background: var(--white) !important; border-color: var(--teal) !important; } html[data-theme="light"] select.acp-input option { background: var(--white); color: var(--text-ink); } html[data-theme="light"] .acp-label { color: var(--text-ink) !important; } html[data-theme="light"] .acp-hint { color: var(--fg-muted-light) !important; } html[data-theme="light"] .acp-sublabel { color: var(--fg-sublabel) !important; } html[data-theme="light"] .acp-btn-secondary { background: rgba(7,4,37,.04) !important; border-color: rgba(31,138,154,.25) !important; color: var(--petrol) !important; } html[data-theme="light"] .acp-add-btn { background: rgba(31,138,154,.06) !important; border-color: rgba(31,138,154,.25) !important; color: var(--petrol) !important; } html[data-theme="light"] .acp-remove-btn { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.2) !important; } html[data-theme="light"] .acp-task-badge { background: rgba(7,4,37,.08); color: var(--fg-muted-light); } html[data-theme="light"] .asd-source-item { color: var(--fg-muted-light) !important; } html[data-theme="light"] .asd-source-item__name { color: var(--text-ink) !important; } html[data-theme="light"] .asd-source-item:hover { background: rgba(7,4,37,.04); } html[data-theme="light"] .acp-email-toggle { color: var(--fg-muted-light) !important; } html[data-theme="light"] .asd-field input, html[data-theme="light"] .asd-field textarea { background: rgba(7,4,37,.03) !important; border-color: rgba(7,4,37,.12) !important; color: var(--text-ink) !important; }