/** * QE Sites shared admin stylesheet. * * Installed into wp-content/mu-plugins/ by the provisioner and enqueued on * every admin, Customizer, and login screen by the qe-white-label mu-plugin. * To change it fleet-wide, edit this stub in the QE Sites app and run the * "Refresh QE mu-plugins" action in the admin site manager. * * Three parts, in order: * 1. SHARED — shape, spacing, typography, brand accents, and the paper, ink, * and chrome that QE paints in both appearances. WordPress's own greys and * its blue never show through: pages sit on QE's paper and every accent is * the periwinkle, light or dark. * 2. DARK — the remaining surface repaints, scoped to [data-theme='dark'], * for the components and bundled plugins whose light defaults already read * on QE paper. The appearance bootstrap in qe-white-label.php puts that * attribute on from the customer's account preference, the same * signal qe-theme.css uses to swap its tokens. * 3. WHITE-LABEL — hide the WordPress chrome and chatter that points away * from QE (bottom of this file, unchanged behaviour). * * Which part a declaration belongs in: anything structural (radius, spacing, * font, letter-spacing, visibility) is shared, and so is any colour written * with a token that already answers to the appearance — the paper, ink, rule, * and chrome tokens, the brand accents (--qe-lime as a fill, --qe-lime-text as * text), and the status colours (--qe-mint, --qe-amber, --qe-tomato). Part 2 * is for the rest: values that only read on dark paper, such as the bright * accents used as text, and repaints of surfaces WordPress ships white. * * The QE Builder list/settings screens use core wp-admin markup (.wrap, * .wp-list-table, .page-title-action), so theming the core components themes * those screens too. * * Customers sign in as editors; QE staff sign in as administrators and get a * `qe-staff` body class (added by qe-white-label.php). Anything that staff * still need to see is scoped with body:not(.qe-staff). */ /* Same faces the QE Sites app uses, from the same free host (Bunny Fonts). */ @import url('https://fonts.bunny.net/css?family=fraunces:500,600,700|hanken-grotesk:400,500,600,700|jetbrains-mono:400,500&display=swap'); /* ========================================================================== * PART 1 — SHARED * ========================================================================== */ /* ========================================================================== * 1.1 WordPress accent aliases. Brand colors live in qe-theme.css. * ======================================================================== */ :root, html:root { /* Core reads these for focus styles and accents in newer components. * --qe-lime-text is the readable accent for the current appearance: deep * indigo on light paper, periwinkle on dark. */ --wp-admin-theme-color: var(--qe-lime-text, #3543a4); /* Core only uses the triples for translucent accent washes, which read the * same either way, so they stay on the brand periwinkle. */ --wp-admin-theme-color--rgb: 142, 162, 255; /* Core's "darker" steps are its hover and active accents. Mixing toward the * current ink keeps them stronger than the base in both appearances. */ --wp-admin-theme-color-darker-10: color-mix(in srgb, var(--qe-lime-text, #3543a4) 88%, var(--qe-ink)); --wp-admin-theme-color-darker-10--rgb: 114, 134, 244; --wp-admin-theme-color-darker-20: color-mix(in srgb, var(--qe-lime-text, #3543a4) 76%, var(--qe-ink)); --wp-admin-theme-color-darker-20--rgb: 86, 104, 216; } body.wp-core-ui, body.block-editor-page { /* WordPress packages and WooCommerce both ship newer component screens. * Their accent is a fill paired with --wp-components-color-accent-inverted, * so it stays on the periwinkle rather than the readable text accent. */ --wp-components-color-accent: var(--qe-lime); --wp-components-color-accent-darker-10: var(--qe-lime-press); --wp-components-color-accent-darker-20: var(--qe-lime-deep, #5668d8); --wp-components-color-accent-inverted: var(--qe-on-lime); --wp-components-color-foreground-inverted: var(--qe-on-lime); } /* ========================================================================== * 1.2 Base — paper, ink, type, links, selection * ======================================================================== */ /* Pages sit on QE's paper rather than WordPress's grey, in both appearances. */ html, body { background: var(--qe-paper) !important; } :is( #wpwrap, #wpcontent, #wpbody, #wpbody-content ) { background: var(--qe-paper); } body, #wpcontent, .wp-core-ui, .media-frame, .media-modal { font-family: var(--qe-font-sans); color: var(--qe-ink); } :is( #wpbody-content .wrap, #wpbody-content .wrap p, #wpbody-content .wrap label, #wpbody-content .description, .form-table th, .form-table td ) { color: var(--qe-ink-2); } :is( .description, .wp-list-table .description, #wpbody-content .wrap p.description ) { color: var(--qe-ink-muted); } :is( h2, h3, h4 ) { color: var(--qe-ink); } /* Page titles set in the display serif, like the app's headings. */ .wrap > h1, .wrap h1.wp-heading-inline, #wpbody-content .wrap > h2:first-of-type { font-family: var(--qe-font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; color: var(--qe-ink); } /* Links use the accent that reads on the current paper. Hover is an underline * rather than a second colour, so the affordance survives both appearances. */ #wpbody-content a:not(.button):not(.button-primary):not(.button-secondary):not(.page-title-action):not(.row-title) { color: var(--qe-lime-text); } #wpbody-content a:not(.button):not(.button-primary):not(.button-secondary):not(.page-title-action):not(.row-title):hover, #wpbody-content a:not(.button):not(.button-primary):not(.button-secondary):not(.page-title-action):not(.row-title):focus { text-decoration: underline; } ::selection { background: var(--qe-lime); color: var(--qe-on-lime); } code, kbd, pre { font-family: var(--qe-font-mono); background: var(--qe-paper-3); color: var(--qe-ink-2) !important; } /* Native widgets (date pickers, range, progress) pick up the accent. */ body { accent-color: var(--qe-lime); } /* Core's spinner is inverted only by the dark token set. */ .spinner { filter: var(--qe-spinner-filter); } /* Thin, paper-coloured scrollbars — same treatment as the QE Builder editor. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--qe-rule-strong); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--qe-rule-hover); background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } * { scrollbar-width: thin; scrollbar-color: var(--qe-rule-strong) transparent; } /* Permission and expired-link pages bypass most ordinary admin wrappers. */ :is(body#error-page, body#error-page #error-page) { background: var(--qe-paper) !important; color: var(--qe-ink-2) !important; } body#error-page .wp-die-message { background: var(--qe-surface) !important; border: 1px solid var(--qe-rule) !important; color: var(--qe-ink-2) !important; } /* Component packages read these surfaces on the newer screens. */ body.wp-core-ui { --wp-components-color-background: var(--qe-surface); --wp-components-color-foreground: var(--qe-ink); --wc-content-bg: var(--qe-surface); --wc-secondary: var(--qe-paper-3); --wc-secondary-text: var(--qe-ink-2); --wc-subtext: var(--qe-ink-muted); --wc-form-border-color: var(--qe-rule-strong); } /* ========================================================================== * 1.3 Buttons — pills, like every button in the QE Sites app. Primary is * periwinkle over ink in both appearances; secondary is a quiet ghost. * ======================================================================== */ .wp-core-ui .button, .wp-core-ui .button-secondary { font-family: var(--qe-font-sans); font-weight: 500; border-radius: 9999px; box-shadow: none; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .wp-core-ui .button:focus, .wp-core-ui .button-secondary:focus { border-color: var(--qe-lime-text); box-shadow: 0 0 0 4px var(--qe-focus-ring); } .wp-core-ui .button-primary, .wp-core-ui .button-primary:visited { background: var(--qe-lime) !important; border-color: var(--qe-lime) !important; color: var(--qe-on-lime) !important; font-weight: 600; text-shadow: none; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, var(--qe-shadow-lime); } .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { background: var(--qe-lime-bright) !important; border-color: var(--qe-lime-bright) !important; color: var(--qe-on-lime) !important; } .wp-core-ui .button-primary:active { background: var(--qe-lime-press) !important; border-color: var(--qe-lime-press) !important; } .wp-core-ui .button-primary:focus { box-shadow: 0 0 0 4px var(--qe-focus-ring); } .wp-core-ui .button-link, #wpbody-content .wp-list-table .button-link { color: var(--qe-lime-text); } /* "Add new" next to page titles */ .wrap .page-title-action, .wrap .page-title-action:active { font-family: var(--qe-font-sans); font-weight: 600; border-radius: 9999px; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .wrap .page-title-action:hover, .wrap .page-title-action:focus { background: var(--qe-lime); border-color: var(--qe-lime); color: var(--qe-on-lime); } /* ========================================================================== * 1.4 Forms — the shape and focus halo from the app's .qe-input * ======================================================================== */ #wpcontent input[type="text"], #wpcontent input[type="search"], #wpcontent input[type="email"], #wpcontent input[type="url"], #wpcontent input[type="number"], #wpcontent input[type="tel"], #wpcontent input[type="password"], #wpcontent input[type="date"], #wpcontent input[type="datetime-local"], #wpcontent input[type="time"], #wpcontent textarea, #wpcontent select, .media-frame input[type="text"], .media-frame input[type="search"], .media-frame input[type="url"], .media-frame input[type="number"], .media-frame textarea, .media-frame select { font-family: var(--qe-font-sans); border-radius: 8px; } #wpcontent input:focus, #wpcontent textarea:focus, #wpcontent select:focus, .media-frame input:focus, .media-frame textarea:focus, .media-frame select:focus { border-color: var(--qe-lime-text); box-shadow: 0 0 0 4px var(--qe-focus-ring); outline: none; } input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--qe-lime); border-color: var(--qe-lime); } input[type="checkbox"]:checked::before { /* Core draws the check as a dashicon glyph; ink on accent like the app. */ filter: none; color: var(--qe-on-lime); } input[type="radio"]:checked::before { background-color: var(--qe-on-lime); } .form-table th { font-weight: 600; } /* ========================================================================== * 1.5 List tables — the core of every screen customers use. Rounded card, * and column headers become the app's uppercase tracked micro-labels. * ======================================================================== */ table.widefat, .wp-list-table, .widefat { border-radius: 12px; border-spacing: 0; overflow: hidden; } .widefat thead td, .widefat thead th, .widefat tfoot td, .widefat tfoot th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; } /* Row titles read as headings, not links, so they take the ink rather than * WordPress's blue. */ #wpbody-content .wp-list-table a.row-title { font-weight: 600; color: var(--qe-ink); } #wpbody-content .wp-list-table a.row-title:hover { color: var(--qe-lime-text); } /* Status words and destructive row actions carry the app's status colours, * both of which have a readable value in either appearance. */ #wpbody-content .wp-list-table .post-state { background: transparent !important; color: var(--qe-amber); font-weight: 600; } #wpbody-content .row-actions .trash a, #wpbody-content .row-actions .delete a, #wpbody-content a.submitdelete { color: var(--qe-tomato) !important; } .subsubsub a.current { font-weight: 600; } /* ========================================================================== * 1.6 Cards & panels — postboxes, dashboard widgets, settings tabs * ======================================================================== */ .postbox, .stuffbox, .health-check-accordion, .welcome-panel, .card { border-radius: 12px; } .postbox .hndle, .postbox-header h2, .stuffbox .hndle { font-family: var(--qe-font-sans); font-weight: 600; } .welcome-panel { border-left: 3px solid var(--qe-lime); } .welcome-panel h2 { font-family: var(--qe-font-display); font-weight: 600; letter-spacing: -0.02em; } /* ========================================================================== * 1.7 Notices — QE staff still see them; customers have them hidden below. * Rounded cards with the app's status colours on the spine. * ======================================================================== */ .notice, div.updated, div.error, .notice-info { border-left-style: solid; border-left-width: 4px; border-radius: 8px; } .notice-success, div.updated { border-left-color: var(--qe-mint-fill); } .notice-error, div.error { border-left-color: var(--qe-tomato-fill); } .notice-warning { border-left-color: var(--qe-amber-fill); } .notice-info { border-left-color: var(--qe-lime); } /* The site details screen reports its own result, because the notices above * are hidden from customers — almost every one of them is plugin chatter. */ .qe-site-details__status { border-left: 4px solid var(--qe-mint-fill); border-radius: 8px; padding: 10px 14px; background: var(--qe-paper-3); max-width: 40rem; } .qe-site-details__status.is-warning { border-left-color: var(--qe-amber-fill); } .qe-site-details__intro { max-width: 40rem; color: var(--qe-ink-muted); } .qe-site-details__icon { display: block; width: 64px; height: 64px; margin-bottom: 10px; border: 1px solid var(--qe-rule); border-radius: 10px; object-fit: cover; } /* ========================================================================== * 1.8 Media — library grid, the uploader, and the select-media modal that * opens inside the QE Builder editor. * ======================================================================== */ .media-frame-title h1 { font-family: var(--qe-font-display); font-weight: 600; letter-spacing: -0.02em; } .media-menu .media-menu-item.active { font-weight: 600; } .attachment.selected .thumbnail, .attachment.details .thumbnail { box-shadow: 0 0 0 3px var(--qe-lime) !important; } .attachment .check { background: var(--qe-lime); box-shadow: 0 0 0 1px var(--qe-on-lime); } .attachment .check .media-modal-icon { filter: brightness(0); } .upload-ui h2, .uploader-inline h2 { font-family: var(--qe-font-display); font-weight: 600; } .drag-drop #drag-drop-area.drag-over, .uploader-inline.drag-over { border-color: var(--qe-lime); } .media-progress-bar div { background: var(--qe-lime); } /* ========================================================================== * 1.9 Login — the front door, and the one screen everybody meets. The card, * its type, and the sheet-off-the-press entrance. * ======================================================================== */ /* Paper with a faint accent aurora and print grain, in both appearances. */ body.login { font-family: var(--qe-font-sans); background: radial-gradient(1100px 520px at 50% -8%, var(--qe-login-aurora), transparent 60%), radial-gradient(var(--qe-login-grain) 1px, transparent 1px) 0 0 / 22px 22px, var(--qe-paper) !important; color: var(--qe-ink-2); } .login h1 a { /* Image + size come from qe-white-label.php's inline style. */ filter: drop-shadow(0 8px 24px rgba(142, 162, 255, 0.2)); } .login form, .login .qe-reload-needed { border-radius: 18px; padding: 32px; box-shadow: 0 1px 0 0 var(--qe-inset-highlight) inset, var(--qe-login-shadow); } .login .qe-reload-needed { text-align: center; } .login .qe-reload-needed h2 { margin: 0 0 12px; font-family: var(--qe-font-display); font-size: 26px; font-weight: 600; } .login .qe-reload-needed p { margin: 0 0 20px; } .login .qe-reload-needed p:last-child { margin-bottom: 0; } .login label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; } .login form .forgetmenot label { /* "Remember me" reads as a sentence, not a heading. */ text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; } .login form .input, .login input[type="text"], .login input[type="password"] { font-family: var(--qe-font-sans); border-radius: 10px; box-shadow: none; } .login form .input:focus, .login input[type="text"]:focus, .login input[type="password"]:focus { border-color: var(--qe-lime-text); box-shadow: 0 0 0 4px var(--qe-focus-ring); outline: none; } .login .message, .login .notice, .login .success { border-left: 4px solid var(--qe-lime); border-radius: 8px; } .login #login_error { border-left: 4px solid var(--qe-tomato-fill); border-radius: 8px; } .login #login_error a, .login .message a { color: var(--qe-lime-text); } /* Entrance: the card and links rise like a sheet coming off the press. */ @media (prefers-reduced-motion: no-preference) { .login h1, .login form, .login #nav, .login .privacy-policy-page-link { animation: qe-login-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } .login form { animation-delay: 80ms; } .login #nav { animation-delay: 160ms; } .login .privacy-policy-page-link { animation-delay: 220ms; } } @keyframes qe-login-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== * 1.10 Admin chrome — menu + toolbar (QE staff only; customers never see * them) and the re-login prompt. WordPress paints these navy with a blue * current item; QE paints them on paper with the periwinkle accent. * ======================================================================== */ :is( #adminmenumain, #adminmenuback, #adminmenuwrap, #adminmenu ) { background: var(--qe-paper) !important; } :is(#adminmenuback, #adminmenuwrap) { border-right: 1px solid var(--qe-rule); } #adminmenu a { color: var(--qe-ink-muted) !important; } #adminmenu div.wp-menu-image:before, #adminmenu .wp-menu-image img { color: var(--qe-ink-subtle) !important; } :is( #adminmenu li.menu-top:hover, #adminmenu li.opensub > a.menu-top, #adminmenu li > a.menu-top:focus ) { background: var(--qe-paper-2) !important; color: var(--qe-ink) !important; } #adminmenu li.menu-top:hover div.wp-menu-image:before, #adminmenu li.opensub > a.menu-top div.wp-menu-image:before { color: var(--qe-ink) !important; } :is( #adminmenu li.current a.menu-top, #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu .wp-menu-arrow, .folded #adminmenu li.current.menu-top ) { background: var(--qe-surface) !important; color: var(--qe-lime-text) !important; box-shadow: inset 3px 0 0 var(--qe-lime); } #adminmenu li.current a.menu-top div.wp-menu-image:before, #adminmenu li.wp-has-current-submenu div.wp-menu-image:before { color: var(--qe-lime-text) !important; } :is( #adminmenu .wp-submenu, #adminmenu .wp-has-current-submenu .wp-submenu, #adminmenu .wp-has-current-submenu.opensub .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu ) { background: var(--qe-paper-2) !important; } #adminmenu .wp-submenu a { color: var(--qe-ink-muted) !important; } :is( #adminmenu .wp-submenu a:hover, #adminmenu .wp-submenu a:focus ) { color: var(--qe-lime-text) !important; } :is( #adminmenu .wp-submenu li.current a, #adminmenu .wp-has-current-submenu .wp-submenu li.current a ) { color: var(--qe-ink) !important; } #adminmenu .wp-submenu a.gh_go_pro { color: var(--qe-on-lime) !important; } #adminmenu .wp-submenu .wp-submenu-head { color: var(--qe-ink) !important; } #adminmenu li.wp-menu-separator .separator { border-color: var(--qe-rule); } #collapse-button { color: var(--qe-ink-subtle); } :is(#collapse-button:hover, #collapse-button:focus) { color: var(--qe-lime-text); } /* Toolbar */ #wpadminbar { background: var(--qe-paper) !important; border-bottom: 1px solid var(--qe-rule); } :is( #wpadminbar .ab-item, #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon ) { color: var(--qe-ink-muted) !important; } #wpadminbar .ab-icon:before, #wpadminbar .ab-item:before, #wpadminbar #adminbarsearch:before { color: var(--qe-ink-subtle) !important; } :is( #wpadminbar .ab-top-menu > li:hover > .ab-item, #wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar .ab-top-menu > li > .ab-item:focus, #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item ) { background: var(--qe-paper-2) !important; color: var(--qe-lime-text) !important; } #wpadminbar .ab-top-menu > li:hover > .ab-item .ab-icon:before, #wpadminbar .ab-top-menu > li:hover > .ab-item:before { color: var(--qe-lime-text) !important; } :is( #wpadminbar .ab-sub-wrapper, #wpadminbar .quicklinks .menupop ul li a, #wpadminbar .ab-submenu ) { background: var(--qe-paper-2) !important; color: var(--qe-ink-muted) !important; } #wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item { background: var(--qe-paper-3) !important; border: 1px solid var(--qe-rule-strong) !important; color: var(--qe-ink-2) !important; } #wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge.woocommerce-site-status-badge-live a.ab-item { background: color-mix(in srgb, var(--qe-mint-fill) 18%, var(--qe-paper-3)) !important; color: var(--qe-mint) !important; } :is( #wpadminbar .quicklinks .menupop ul li a:hover, #wpadminbar .quicklinks .menupop ul li a:focus ) { color: var(--qe-lime-text) !important; } /* Session-expired re-login prompt */ #wp-auth-check-wrap #wp-auth-check { background: var(--qe-surface); } #wp-auth-check-wrap .wp-auth-check-close:before { color: var(--qe-ink-muted); } /* ========================================================================== * 1.11 Secondary buttons — WordPress ships these in its own blue. QE gives * them the app's quiet ghost instead, so the only accent on the page is * the periwinkle on the primary button. * ======================================================================== */ /* Primary buttons are excluded: they keep the shared periwinkle fill and its * ink label in both appearances. */ :is( .wp-core-ui .button:not(.button-primary), .wp-core-ui .button-secondary:not(.button-primary) ) { background: transparent; color: var(--qe-ink) !important; border-color: var(--qe-rule-strong); } :is( .wp-core-ui .button:not(.button-primary):hover, .wp-core-ui .button-secondary:not(.button-primary):hover ) { background: var(--qe-paper-3); border-color: var(--qe-rule-hover); color: var(--qe-ink) !important; } /* Restated so the focus edge outranks the resting border colour above. */ :is( .wp-core-ui .button:not(.button-primary):focus, .wp-core-ui .button-secondary:not(.button-primary):focus ) { border-color: var(--qe-lime); color: var(--qe-ink) !important; } :is( .wp-core-ui .button:disabled, .wp-core-ui .button[disabled], .wp-core-ui .button.disabled, .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary.disabled ) { background: var(--qe-paper-3) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-subtle) !important; box-shadow: none; text-shadow: none; } :is( .wrap .page-title-action, .wrap .page-title-action:active ) { background: transparent; border: 1px solid var(--qe-rule-strong); color: var(--qe-ink); } /* Restated so the shared accent fill outranks the resting colours above. */ :is( .wrap .page-title-action:hover, .wrap .page-title-action:focus ) { background: var(--qe-lime); border-color: var(--qe-lime); color: var(--qe-on-lime); } /* ========================================================================== * 1.12 QE's own plugins — Events and Affiliates. Both sit in every * customer's sidebar and both ship stylesheets written in WordPress's * palette: white cards, #ddd rules, the admin blue, and status chips in * hard-coded pastels. None of it answers to the appearance, so the * surfaces are restated here on QE tokens — which is also why these * rules are shared rather than dark-only: the light values were never * QE's either. Specificity is matched or beaten rather than reached for * with !important, except where the plugin itself used one. * ======================================================================== */ /* ---- Affiliates: stat cards, panels, filter bar ---- */ .qea-wrap .qea-card, .qea-wrap .qea-panel { background: var(--qe-surface); border: 1px solid var(--qe-rule); border-radius: 12px; box-shadow: var(--qe-shadow-card); } .qea-wrap .qea-card__label { font-size: 11px; letter-spacing: 0.14em; color: var(--qe-ink-muted); } /* The headline figure is the one number on the screen — set in the display * serif, like every other big numeral in the app. */ .qea-wrap .qea-card__value { font-family: var(--qe-font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--qe-ink); } .qea-wrap .qea-panel__head { background: var(--qe-paper-3); border-bottom: 1px solid var(--qe-rule); border-top-left-radius: 12px; border-top-right-radius: 12px; } .qea-wrap .qea-panel__head h2 { font-family: var(--qe-font-sans); font-weight: 600; color: var(--qe-ink); } .qea-wrap .qea-muted { color: var(--qe-ink-muted); } .qea-wrap .qea-table th, .qea-wrap .qea-table td { background: transparent; border-color: var(--qe-rule); color: var(--qe-ink-2); } /* Status chips, on the app's own status colours. The fill is mixed down from * each hue so the readable text partner stays legible on either paper. */ .qea-wrap .qea-pill { border-radius: 999px; font-size: 11px; letter-spacing: 0.08em; background: color-mix(in srgb, var(--qe-ink) 8%, transparent); color: var(--qe-ink-muted); } .qea-wrap .qea-pill--active, .qea-wrap .qea-pill--good, .qea-wrap .qea-pill--paid { background: color-mix(in srgb, var(--qe-mint-fill) 18%, transparent); color: var(--qe-mint-text); } .qea-wrap .qea-pill--pending, .qea-wrap .qea-pill--warn { background: color-mix(in srgb, var(--qe-amber-fill) 20%, transparent); color: var(--qe-amber-text); } .qea-wrap .qea-pill--unpaid { background: var(--qe-lime-soft); color: var(--qe-lime-text); } .qea-wrap .qea-pill--rejected, .qea-wrap .qea-pill--suspended { background: color-mix(in srgb, var(--qe-tomato-fill) 16%, transparent); color: var(--qe-tomato-text); } /* Segmented switch — the app's own pill toggle instead of WordPress blue. */ .qea-wrap .qea-segmented { padding: 3px; border: 1px solid var(--qe-rule); border-radius: 999px; background: var(--qe-paper-2); } .qea-wrap .qea-segmented__option span { border-radius: 999px; padding: 0 14px; font-size: 13px; font-weight: 500; color: var(--qe-ink-muted); transition: background 160ms ease, color 160ms ease; } .qea-wrap .qea-segmented__option span:hover { color: var(--qe-ink); } .qea-wrap .qea-segmented__option input:checked + span { background: var(--qe-ink); color: var(--qe-paper); } .qea-wrap .qea-segmented__option input:focus-visible + span { outline: 2px solid var(--qe-lime); outline-offset: 2px; } /* ---- Events: schedule editor, tags, filters ---- */ :is( .simple-events-datetime-filter, .custom-date-slot-group, .time-slot-day, .ticket-row ) { background: var(--qe-paper-2); border-radius: 10px; } .simple-events-datetime-filter { border: 1px solid var(--qe-rule); } .simple-events-datetime-filter select { border: 1px solid var(--qe-rule); border-radius: 8px; background: var(--qe-surface); color: var(--qe-ink); } .simple-events-datetime-filter select:disabled { background: var(--qe-paper-3); color: var(--qe-ink-subtle); } .simple-events-datetime-filter select:not(:disabled):hover { border-color: var(--qe-rule-hover); } .simple-events-datetime-filter select:focus { border-color: var(--qe-ink); box-shadow: 0 0 0 3px var(--qe-focus-ring); } /* Chosen dates and days off read as chips, matching the app's pills. */ .date-tag { border-radius: 999px; border: 1px solid var(--qe-rule); background: var(--qe-paper-3); color: var(--qe-ink-2); } .date-tag .date-time-input { border: 1px solid var(--qe-rule); border-radius: 6px; background: var(--qe-surface); color: var(--qe-ink); } .excluded-date-tag { border-radius: 999px; background: color-mix(in srgb, var(--qe-tomato-fill) 16%, transparent); color: var(--qe-tomato-text); } .excluded-date-tag .remove-excluded-date, .date-tag .remove-date, .remove-date { color: var(--qe-tomato); } .remove-date:hover, .date-tag .remove-date:hover { color: var(--qe-tomato-fill); } #ticket-list li { background: var(--qe-surface); border-bottom: 1px solid var(--qe-rule); } #ticket-list .row-actions a { color: var(--qe-lime-text); } #ticket-list .row-actions a:hover { color: var(--qe-lime-text); } #ticket-list .row-actions .delete a, #ticket-list .row-actions .delete a:hover { color: var(--qe-tomato); } /* The event list's delete button, kept destructive but on QE's tomato. */ .simple-events-delete-link { color: var(--qe-tomato); border-color: var(--qe-tomato); } .simple-events-delete-link:hover, .simple-events-delete-link:focus { background-color: var(--qe-tomato-fill); border-color: var(--qe-tomato-fill); color: #fff; } /* The jQuery datepicker's selected day, off WordPress blue. The plugin sets * these with !important, so matching it is the only way through. */ .ui-datepicker .ui-state-active:not(.ui-state-hover) { background: var(--qe-lime) !important; color: var(--qe-on-lime) !important; } /* Order status chips on the ticket-sales screen. */ .order-status { border-radius: 999px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .order-status.status-completed { background: color-mix(in srgb, var(--qe-mint-fill) 18%, transparent); color: var(--qe-mint-text); } .order-status.status-processing { background: var(--qe-lime-soft); color: var(--qe-lime-text); } .order-status.status-pending, .order-status.status-on-hold { background: color-mix(in srgb, var(--qe-amber-fill) 20%, transparent); color: var(--qe-amber-text); } .order-status.status-cancelled, .order-status.status-refunded, .order-status.status-failed { background: color-mix(in srgb, var(--qe-tomato-fill) 16%, transparent); color: var(--qe-tomato-text); } /* ---- Both plugins: hand-rolled modals ---- * These are plain divs rather than core dialogs, so nothing else in this * file reaches them. Left alone they stay white cards over a black scrim, * which is the single most jarring thing left in the dark appearance. */ :is( .ticket-form, #change-date-dialog, .simple-events-modal-content, .simple-events-order-release-panel ) { background: var(--qe-surface); color: var(--qe-ink); border: 1px solid var(--qe-rule); border-radius: 14px; box-shadow: var(--qe-shadow-pop); } :is( #ticket-modal, #occurrence-tickets-modal, #extra-service-modal, #email-modal, #change-date-backdrop, .simple-events-modal-overlay, .simple-events-order-release-backdrop ) { background: var(--qe-scrim); } .simple-events-modal-header { background: var(--qe-surface); border-bottom: 1px solid var(--qe-rule); } .simple-events-modal-header h2, .simple-events-order-release-panel h2, #change-date-dialog h3 { font-family: var(--qe-font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--qe-ink); } .simple-events-modal-close { border-radius: 999px; color: var(--qe-ink-muted); transition: color 160ms ease, background 160ms ease; } .simple-events-modal-close:hover { background: var(--qe-paper-2); color: var(--qe-ink); } /* Fields inside those modals, given the app's input shape and focus halo. */ .form-field label { color: var(--qe-ink-2); } .form-field .description { color: var(--qe-ink-muted); } .form-field .required { color: var(--qe-tomato); } :is( .form-field input[type='text'], .form-field input[type='email'], .form-field input[type='tel'], .form-field input[type='number'], .form-field select, .form-field textarea ) { border: 1px solid var(--qe-rule); border-radius: 8px; background: var(--qe-surface); color: var(--qe-ink); } #modal-occurrence-list { border: 1px solid var(--qe-rule); border-radius: 10px; } .modal-occurrence-item { border: 1px solid var(--qe-rule); border-radius: 8px; background: var(--qe-surface); color: var(--qe-ink-2); } .modal-occurrence-item:hover { background: var(--qe-paper-2); border-color: var(--qe-rule-hover); } .modal-occurrence-item.selected { background: var(--qe-lime-soft); border-color: var(--qe-lime-line); } .modal-occurrence-item .modal-occurrence-time, .modal-occurrence-status { color: var(--qe-ink-muted); } .modal-occurrence-status.error { color: var(--qe-tomato); } .ticket-row .ticket-price { color: var(--qe-ink-muted); } .ticket-row .ticket-available { color: var(--qe-ink-subtle); } /* ========================================================================== * 1.13 WooCommerce and Groundhogg. Both ship hard-coded light palettes and * load after this stylesheet, so their surfaces are restated here on * QE tokens. These rules were dark-only until now, which left the * light appearance looking like stock WooCommerce and Groundhogg; * the tokens already resolve per appearance, so one copy serves both. * ======================================================================== */ /* WooCommerce mixes classic settings markup with React cards. Its styles load * after the shared admin stylesheet and contain hard-coded light colors, so * these selectors intentionally match its component boundaries directly. */ :is( body.woocommerce-admin-page #wpcontent, body.woocommerce-admin-page #wpbody, body.woocommerce-admin-page #wpbody-content, body.woocommerce_page_wc-settings #wpcontent, body.woocommerce_page_wc-settings #wpbody, body.woocommerce_page_wc-settings #wpbody-content, body.woocommerce_page_wc-settings #mainform ) { background: var(--qe-paper) !important; color: var(--qe-ink-2) !important; } :is( .woocommerce-layout__header, .woocommerce-layout__header-wrapper, .woocommerce-layout__footer, .woocommerce-layout__activity-panel-wrapper, .woocommerce-navigation, .woocommerce-store-alerts ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } :is( .woocommerce-layout__header-heading, .woocommerce-layout__header-meta-icon, .woocommerce-layout__activity-panel-tab, .woocommerce-navigation a ) { color: var(--qe-ink-2) !important; } :is( .woocommerce-layout__header-meta-icon:hover, .woocommerce-layout__header-meta-icon:focus, .woocommerce-layout__activity-panel-tab:hover, .woocommerce-layout__activity-panel-tab:focus ) { background: var(--qe-paper-3) !important; color: var(--qe-lime-text) !important; } :is( .woocommerce-layout, .woocommerce-layout__main, .woocommerce-admin-page .woocommerce-layout__main, .woocommerce-admin-page .woocommerce-layout__primary ) { background: var(--qe-paper) !important; color: var(--qe-ink-2) !important; } .woocommerce-admin-page :where( .woocommerce-summary, .woocommerce-summary__item, .woocommerce-chart, .woocommerce-table, .woocommerce-report-table, .woocommerce-dashboard__chart-block, .woocommerce-dashboard__leaderboard, .woocommerce-dashboard__leaderboard-row, .woocommerce-stats-overview, .woocommerce-list, .woocommerce-list__item, .woocommerce-card, .woocommerce-empty-content, .woocommerce-analytics__card, .woocommerce-segmented-selection, .woocommerce-calendar, .woocommerce-calendar__input, .woocommerce-filters-advanced, .woocommerce-filters-advanced__fieldset, .woocommerce-dropdown-button ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } .woocommerce-admin-page :where( .woocommerce-summary__item:hover, .woocommerce-summary__item:focus, .woocommerce-list__item:hover, .woocommerce-list__item:focus, .woocommerce-dashboard__leaderboard-row:hover ) { background: var(--qe-paper-3) !important; } .woocommerce-admin-page :where( .woocommerce-summary__item-label, .woocommerce-summary__item-data, .woocommerce-chart__title, .woocommerce-chart__header, .woocommerce-table__header, .woocommerce-table__item, .woocommerce-table__empty-item, .woocommerce-list__item-title, .woocommerce-list__item-content, .woocommerce-list__item-after, .woocommerce-dashboard-section__title, .woocommerce-dashboard-section__heading, .woocommerce-dashboard__store-performance, .woocommerce-report-table th, .woocommerce-report-table td ) { color: var(--qe-ink-2) !important; border-color: var(--qe-rule) !important; } .woocommerce-admin-page :where( .woocommerce-table__caption, .woocommerce-table__summary, .woocommerce-list__item-subtitle, .woocommerce-list__item-description, .woocommerce-dashboard__leaderboard-column, .d3-chart__empty-message, .woocommerce-summary__item-prev-label, .woocommerce-summary__item-compare ) { color: var(--qe-ink-muted) !important; } .woocommerce-admin-page :where( .woocommerce-BlankState-message, .woocommerce-analytics-import-status-bar-wrapper__label ) { color: var(--qe-ink-2) !important; } body.wp-core-ui :where( .woocommerce-tour-kit-step__heading, .woocommerce-tour-kit-step__description ) { color: var(--qe-ink-2) !important; } .woocommerce-admin-page .woocommerce-summary { background: var(--qe-paper-2) !important; border-color: var(--qe-rule) !important; } .woocommerce-admin-page :where( .woocommerce-chart__body, .woocommerce-chart__footer, .woocommerce-chart__header, .woocommerce-table__header, .woocommerce-table__table, .woocommerce-table__summary ) { background: transparent !important; border-color: var(--qe-rule) !important; } :is( .woocommerce-admin-page .woocommerce-table table, .woocommerce-admin-page .woocommerce-table thead, .woocommerce-admin-page .woocommerce-table tbody, .woocommerce-admin-page .woocommerce-table tr, .woocommerce-admin-page .woocommerce-table th, .woocommerce-admin-page .woocommerce-table td ) { background: transparent !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } :is( .woocommerce-admin-page .woocommerce-table thead, .woocommerce-admin-page .woocommerce-table tfoot ) { background: var(--qe-paper-2) !important; } .woocommerce-admin-page .woocommerce-table__table::before { background: linear-gradient(90deg, var(--qe-surface), transparent) !important; } .woocommerce-admin-page .woocommerce-table__table::after { background: linear-gradient(270deg, var(--qe-surface), transparent) !important; } :is( .woocommerce-admin-page .woocommerce-legend__item button, .woocommerce-admin-page .woocommerce-summary__item-delta, .woocommerce-admin-page .woocommerce-summary__item-data .woocommerce-summary__item-delta ) { background: var(--qe-paper-3) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-muted) !important; } .woocommerce-admin-page :where(.woocommerce-skeleton, [class*="skeleton"])::before, .woocommerce-admin-page :where(.woocommerce-skeleton, [class*="skeleton"])::after { background: var(--qe-paper-3) !important; } :is( .woocommerce-admin-page .woocommerce-chart svg text, .woocommerce-admin-page .woocommerce-chart .tick text, .woocommerce-admin-page .woocommerce-chart .chart-legend, .woocommerce-admin-page .woocommerce-chart .legend-item ) { fill: var(--qe-ink-muted) !important; color: var(--qe-ink-muted) !important; } :is( .woocommerce-admin-page .woocommerce-chart svg line, .woocommerce-admin-page .woocommerce-chart svg .domain, .woocommerce-admin-page .woocommerce-chart svg .gridline ) { stroke: var(--qe-rule-strong) !important; } .woocommerce-admin-page :where( .woocommerce-filters, .woocommerce-filters__basic-filters, .woocommerce-analytics-report-header, .woocommerce-dashboard-section ) { color: var(--qe-ink-2); } .woocommerce-admin-page :where( .woocommerce-search__field, .woocommerce-select-control__control, .woocommerce-select-control__control-input, .woocommerce-tag__text ) { background: var(--qe-surface) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink) !important; } :is( .woocommerce-admin-page .woocommerce-select-control__menu, .woocommerce-admin-page .woocommerce-select-control__option ) { background: var(--qe-elevated) !important; color: var(--qe-ink-2) !important; } :is( .woocommerce-admin-page .woocommerce-select-control__option:hover, .woocommerce-admin-page .woocommerce-select-control__option.is-selected ) { background: var(--qe-paper-3) !important; } :is( body.woocommerce_page_wc-settings .wrap.woocommerce, body.woocommerce_page_wc-settings .wrap.woocommerce #mainform, body.woocommerce_page_wc-settings .woocommerce table.form-table, body.woocommerce_page_wc-settings .woocommerce table.form-table tbody, body.woocommerce_page_wc-settings .woocommerce table.form-table tr, body.woocommerce_page_wc-settings .woocommerce table.form-table th, body.woocommerce_page_wc-settings .woocommerce table.form-table td ) { background: var(--qe-paper) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } :is( body.woocommerce_page_wc-settings .woocommerce h2, body.woocommerce_page_wc-settings .woocommerce h3, body.woocommerce_page_wc-settings .woocommerce label ) { color: var(--qe-ink) !important; } :is( body.woocommerce_page_wc-settings .woocommerce p, body.woocommerce_page_wc-settings .woocommerce .description ) { color: var(--qe-ink-muted) !important; } body.woocommerce_page_wc-settings .woocommerce :where(input, textarea, select) { background: var(--qe-surface) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink) !important; } :is( body.woocommerce_page_wc-settings .woo-nav-tab-wrapper, body.woocommerce_page_wc-settings .wc-tabs, body.woocommerce_page_wc-settings .subsubsub ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; } /* The classic WooCommerce product editor has its own late-loading light * palette. Theme its administrative chrome while leaving both TinyMCE * document canvases white so product copy still renders as authored. */ body.post-type-product.post-php #titlediv #title { background: var(--qe-surface) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink) !important; } body.post-type-product.post-php #titlediv #title-prompt-text { color: var(--qe-ink-subtle) !important; } :is( body.post-type-product.post-php #edit-slug-box, body.post-type-product.post-php #edit-slug-box strong, body.post-type-product.post-php #edit-slug-box #sample-permalink, body.post-type-product.post-php #edit-slug-box #edit-slug-buttons ) { color: var(--qe-ink-muted) !important; } body.post-type-product :where( #post-status-info, #major-publishing-actions, #minor-publishing-actions, .misc-pub-section, #delete-action, #publishing-action, .categorydiv .tabs-panel, .tagsdiv .ajaxtag, .tagchecklist, #woocommerce-product-data .panel-wrap, #woocommerce-product-data .woocommerce_options_panel, #woocommerce-product-data .options_group, #woocommerce-product-data .wc-metaboxes-wrapper, #woocommerce-product-data .toolbar ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } body.post-type-product #woocommerce-product-data ul.wc-tabs, body.post-type-product #woocommerce-product-data ul.wc-tabs::after { background: var(--qe-paper-2) !important; border-color: var(--qe-rule) !important; } body.post-type-product #woocommerce-product-data ul.wc-tabs li a { background: transparent !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-muted) !important; } body.post-type-product #woocommerce-product-data ul.wc-tabs li a::before { color: var(--qe-ink-subtle) !important; } :is( body.post-type-product #woocommerce-product-data ul.wc-tabs li.active a, body.post-type-product #woocommerce-product-data ul.wc-tabs li a:hover, body.post-type-product #woocommerce-product-data ul.wc-tabs li a:focus ) { background: var(--qe-paper-3) !important; color: var(--qe-ink) !important; } body.post-type-product #woocommerce-product-data ul.wc-tabs li.active a::before, body.post-type-product #woocommerce-product-data ul.wc-tabs li a:hover::before, body.post-type-product #woocommerce-product-data ul.wc-tabs li a:focus::before { color: var(--qe-lime-text) !important; } body.post-type-product #woocommerce-product-data :where( label, legend, p, th, td, .description, .form-field, .wc-metabox-content ) { border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } body.post-type-product #woocommerce-product-data :where(h3, h4, strong) { color: var(--qe-ink) !important; } body.post-type-product #woocommerce-product-data :where( .wc-metabox, .woocommerce_attribute, .woocommerce_variation, table, thead, tbody, tfoot, tr, th, td ) { background-color: transparent !important; border-color: var(--qe-rule) !important; } body.post-type-product :where( #submitdiv, #postimagediv, #product_catdiv, #product_tagdiv, #woocommerce-product-data ) :where(.inside, .tabs-panel, .category-tabs, .add-menu-item-tabs) { border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } body.post-type-product :where( #product_catdiv, #product_tagdiv, #postimagediv, #submitdiv ) :where(.tabs-panel, .inside, #major-publishing-actions) { background: var(--qe-surface) !important; } body.post-type-product :where(.category-tabs, .wp-tab-bar) li:not(.tabs) { background: transparent !important; color: var(--qe-ink-muted) !important; } body.post-type-product :where(.category-tabs, .wp-tab-bar) li.tabs { background: var(--qe-paper-3) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink) !important; } :is( body.post-type-product .wp-editor-container, body.post-type-product .wp-editor-tabs, body.post-type-product #post-status-info ) { border-color: var(--qe-rule) !important; } body.post-type-product #post-status-info { color: var(--qe-ink-muted) !important; } /* Groundhogg supplies a single panel vocabulary across its dashboards, * contacts, reporting, email, and automation screens. Remapping that * vocabulary catches the supported screens without styling email previews. */ body.groundhogg-admin-page { --gh-border-gray: var(--qe-rule-strong); --gh-panel-gray: var(--qe-rule); --gh-border-gray-light: var(--qe-rule); --gh-background-color: var(--qe-paper); --gh-dark: var(--qe-ink); --gh-dark-50: var(--qe-ink-muted); --gh-dark-30: var(--qe-ink-subtle); --gh-dark-15: var(--qe-rule-strong); --gh-dark-10: var(--qe-paper-3); --gh-dark-5: var(--qe-paper-2); --gh-box-shadow: var(--qe-shadow-card); color: var(--qe-ink-2); } body.groundhogg-admin-page :where( .gh-header, .gh-panel, .gh-card, .info-card, .gh-modal, .gh-popup, .gh-dropdown, .gh-menu, .gh-table, .gh-list, .search-filters, .select2-dropdown, .select2-selection ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } body.groundhogg-admin-page :where( .gh-panel-header, .gh-panel-footer, .gh-tabs, .gh-table thead, .gh-list-header, .checklist-row, .onboarding-checklist > div, .select2-results__option ) { background: var(--qe-paper-2) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } body.groundhogg-admin-page :where( .checklist-row:hover, .onboarding-checklist > div:hover, .select2-results__option--highlighted, .select2-results__option[aria-selected="true"] ) { background: var(--qe-paper-3) !important; color: var(--qe-ink) !important; } body.groundhogg-admin-page :where( .gh-panel h1, .gh-panel h2, .gh-panel h3, .gh-panel h4, .gh-header h1, .gh-header h2, .gh-card h2, .gh-card h3, .info-card h2, .info-card h3 ) { color: var(--qe-ink) !important; } body.groundhogg-admin-page :where( .gh-panel p, .gh-panel label, .gh-panel li, .gh-panel td, .gh-panel th, .gh-card p, .info-card p ) { color: var(--qe-ink-2); } body.groundhogg-admin-page :where( .select2-search__field, .select2-selection__rendered, .gh-input, .gh-search ) { background: var(--qe-surface) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink) !important; } body.groundhogg-admin-page .gh-button.secondary { background: transparent !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink-2) !important; } body.groundhogg-admin-page .gh-button.secondary:hover, body.groundhogg-admin-page .gh-button.secondary:focus { background: var(--qe-paper-3) !important; border-color: var(--qe-rule-hover) !important; color: var(--qe-ink) !important; } :is( body.groundhogg-admin-page .gh-button.primary, body.groundhogg-admin-page .gh-button.purple ) { background: var(--qe-lime) !important; border-color: var(--qe-lime-text) !important; color: var(--qe-on-lime) !important; } body.groundhogg-admin-page :where( .gh-nav, .dr-input, .dr-input .dr-date, .dr-input .dr-dates-dash ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } body.groundhogg-admin-page .gh-nav .nav-tab { background: var(--qe-paper-2) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-muted) !important; } :is( body.groundhogg-admin-page .gh-nav .nav-tab-active, body.groundhogg-admin-page .gh-nav .nav-tab:hover, body.groundhogg-admin-page .gh-nav .nav-tab:focus ) { background: var(--qe-surface) !important; color: var(--qe-lime-text) !important; } body.groundhogg-admin-page :where(.gh-tag, .pill.dark) { background: var(--qe-paper-3) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } body.groundhogg-admin-page .pill.green { background: color-mix(in srgb, var(--qe-mint-fill) 18%, var(--qe-paper-3)) !important; border-color: color-mix(in srgb, var(--qe-mint) 40%, var(--qe-rule)) !important; color: var(--qe-mint) !important; } /* ========================================================================== * PART 2 — DARK APPEARANCE * * Everything below repaints what part 1 leaves alone, using the QE dark * palette. Each rule is scoped to [data-theme='dark'] on . * * Only put a rule here if it is genuinely dark-only: a value that would be * wrong on light paper (a bright accent used as text), or a surface that * has to be pinned light while the rest of the page goes dark. A repaint * written on tokens that already answer to the appearance is not dark-only * — it belongs in part 1, where one copy serves both. WooCommerce and * Groundhogg lived here for a while on the assumption that their own light * palettes were "already correct"; they were readable, but they were not * ours, which left the light appearance looking like stock WordPress. * * Keep this part colour-only: shape, type, and layout belong in part 1 so * both appearances get them. * ========================================================================== */ /* ========================================================================== * 2.1 Base * ======================================================================== */ /* The bright accent only reads on dark paper; the light appearance keeps the * shared underline hover from part 1.2. */ [data-theme='dark'] #wpbody-content a:not(.button):not(.button-primary):not(.button-secondary):not(.page-title-action):not(.row-title):hover, [data-theme='dark'] #wpbody-content a:not(.button):not(.button-primary):not(.button-secondary):not(.page-title-action):not(.row-title):focus { color: var(--qe-lime-bright); } /* ========================================================================== * 2.2 Buttons * ======================================================================== */ [data-theme='dark'] :is( .wp-core-ui .button-link:hover, .wp-core-ui .button-link:focus, #wpbody-content .wp-list-table .button-link:hover, #wpbody-content .wp-list-table .button-link:focus ) { color: var(--qe-lime-bright); } /* ========================================================================== * 2.3 Forms * ======================================================================== */ [data-theme='dark'] :is( #wpcontent input[type="text"], #wpcontent input[type="search"], #wpcontent input[type="email"], #wpcontent input[type="url"], #wpcontent input[type="number"], #wpcontent input[type="tel"], #wpcontent input[type="password"], #wpcontent input[type="date"], #wpcontent input[type="datetime-local"], #wpcontent input[type="time"], #wpcontent textarea, #wpcontent select, .media-frame input[type="text"], .media-frame input[type="search"], .media-frame input[type="url"], .media-frame input[type="number"], .media-frame textarea, .media-frame select ) { background: var(--qe-surface); border: 1px solid var(--qe-rule-strong); color: var(--qe-ink); box-shadow: none; } /* Restated so the focus edge outranks the resting field colours above. */ [data-theme='dark'] :is( #wpcontent input:focus, #wpcontent textarea:focus, #wpcontent select:focus, .media-frame input:focus, .media-frame textarea:focus, .media-frame select:focus ) { border-color: var(--qe-lime); color: var(--qe-ink); } [data-theme='dark'] #wpcontent ::placeholder, [data-theme='dark'] .media-frame ::placeholder { color: var(--qe-ink-subtle); } [data-theme='dark'] :is( input[type="checkbox"], input[type="radio"] ) { background: var(--qe-surface); border-color: var(--qe-rule-strong); } /* Restated so the shared accent fill outranks the empty box above. */ [data-theme='dark'] :is( input[type="checkbox"]:checked, input[type="radio"]:checked ) { background: var(--qe-lime); border-color: var(--qe-lime); } [data-theme='dark'] .form-table th { color: var(--qe-ink-2); } /* ========================================================================== * 2.4 List tables * ======================================================================== */ /* Core paints the table white via `table.widefat`, whose element qualifier * outranks a lone class — match it so even (non-striped) rows go dark too. */ [data-theme='dark'] :is( table.widefat, .wp-list-table, .widefat ) { background: var(--qe-surface); border: 1px solid var(--qe-rule); box-shadow: var(--qe-shadow-card); color: var(--qe-ink-2); } [data-theme='dark'] :is( .widefat thead td, .widefat thead th, .widefat tfoot td, .widefat tfoot th ) { background: var(--qe-surface) !important; border-color: var(--qe-rule); color: var(--qe-ink-muted) !important; } [data-theme='dark'] .widefat thead :where(th, td) :where(span, strong), [data-theme='dark'] .widefat tfoot :where(th, td) :where(span, strong) { color: inherit !important; } [data-theme='dark'] :is( .widefat thead th a, .widefat thead td a, .wp-list-table thead .sorted a, .wp-list-table thead .sortable a ) { color: var(--qe-ink-muted) !important; } [data-theme='dark'] :is( .wp-list-table thead .sortable a:hover, .wp-list-table thead .sorted a:hover ) { color: var(--qe-ink) !important; } [data-theme='dark'] .wp-list-table .sorting-indicators span { color: var(--qe-ink-subtle); } [data-theme='dark'] :is(.widefat td, .widefat th) { border-color: var(--qe-rule); color: var(--qe-ink-2); } [data-theme='dark'] :is( #wpbody-content table.widefat tbody tr, #wpbody-content table.wp-list-table tbody tr ) { background: var(--qe-surface); } [data-theme='dark'] :is( #wpbody-content table.widefat tbody tr > td, #wpbody-content table.widefat tbody tr > th, #wpbody-content table.wp-list-table tbody tr > td, #wpbody-content table.wp-list-table tbody tr > th ) { background: transparent !important; border-color: var(--qe-rule); color: var(--qe-ink-2); } [data-theme='dark'] :is( #wpbody-content table.widefat.striped > tbody > :nth-child(odd), #wpbody-content table.wp-list-table.striped > tbody > :nth-child(odd), #wpbody-content .striped > tbody > :nth-child(odd), #wpbody-content ul.striped > :nth-child(odd), #wpbody-content .alternate ) { background: var(--qe-paper-2); } [data-theme='dark'] :is( #wpbody-content table.widefat tbody tr:hover, #wpbody-content table.wp-list-table tbody tr:hover, #wpbody-content .wp-list-table tbody tr:hover, #wpbody-content table.widefat tbody tr.selected, #wpbody-content table.wp-list-table tbody tr.selected ) { background: var(--qe-paper-3); } [data-theme='dark'] .row-actions { color: var(--qe-ink-subtle); } [data-theme='dark'] #wpbody-content .wp-list-table .row-actions span, [data-theme='dark'] #wpbody-content .wp-list-table .post-state, [data-theme='dark'] #wpbody-content .wp-list-table .locked-info, [data-theme='dark'] #wpbody-content .wp-list-table .locked-text, [data-theme='dark'] #wpbody-content .wp-list-table .column-date, [data-theme='dark'] #wpbody-content .wp-list-table .column-author, [data-theme='dark'] #wpbody-content .wp-list-table .column-comments, [data-theme='dark'] #wpbody-content .wp-list-table .toggle-row:before { color: var(--qe-ink-muted); } /* The status word keeps the shared amber; only the plugin scores below need * the dark surfaces. */ [data-theme='dark'] #wpbody-content .wp-list-table .post-state { color: var(--qe-amber); } [data-theme='dark'] #wpbody-content .wp-list-table .rank-math-column-display.seo-score.no-score strong { background: var(--qe-paper-3) !important; color: var(--qe-ink-muted) !important; } [data-theme='dark'] #wpbody-content .wp-list-table .post-com-count { background: var(--qe-paper-3); color: var(--qe-ink-2); } [data-theme='dark'] #wpbody-content .wp-list-table .post-com-count:after { border-top-color: var(--qe-paper-3); } [data-theme='dark'] #wpbody-content .wp-list-table .submitted-on { color: var(--qe-ink-muted) !important; } [data-theme='dark'] :is( #wpbody-content .wp-list-table .comment-count, #wpbody-content .wp-list-table .dashicons ) { color: inherit; } /* Plugin columns often ship their own table markup and inline colours. Keep * those cells readable without depending on plugin-specific stylesheets. */ [data-theme='dark'] :is( #wpbody-content .wp-list-table .rank-math-column-display, #wpbody-content .wp-list-table .rank-math-column-display strong, #wpbody-content .wp-list-table .rank-math-column-display label, #wpbody-content .wp-list-table .rank-math-link-count, #wpbody-content .wp-list-table .rank-math-link-count-item, #wpbody-content .wp-list-table .rank-math-column-edit ) { color: var(--qe-ink-muted); } [data-theme='dark'] :is( #wpbody-content .wp-list-table .rank-math-column-display strong, #wpbody-content .wp-list-table .rank-math-column-display.schema-type, #wpbody-content .wp-list-table .rank-math-link-count strong ) { color: var(--qe-ink-2); } [data-theme='dark'] #wpbody-content .wp-list-table .rank-math-column-display.seo-score { background: var(--qe-paper-3); border: 1px solid var(--qe-rule); border-radius: 9999px; color: var(--qe-ink-2); display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 10px; } [data-theme='dark'] #wpbody-content .wp-list-table .rank-math-column-display.seo-score strong { color: inherit; } [data-theme='dark'] #wpbody-content .wp-list-table .rank-math-link-count .divider { border-left-color: var(--qe-rule-strong); } [data-theme='dark'] #wpbody-content .wp-list-table .rank-math-column-edit a { color: var(--qe-lime) !important; } [data-theme='dark'] :is( #wpbody-content .wp-list-table .rank-math-column-edit a:hover, #wpbody-content .wp-list-table .rank-math-column-edit a:focus ) { color: var(--qe-lime-bright) !important; } [data-theme='dark'] :is( #wpbody-content .wp-list-table [style*="#137333"], #wpbody-content .wp-list-table [style*="rgb(19, 115, 51)"] ) { color: var(--qe-mint) !important; } [data-theme='dark'] :is( .tablenav, .tablenav .tablenav-pages .displaying-num, .tablenav .tablenav-pages .paging-input ) { color: var(--qe-ink-muted); } [data-theme='dark'] .tablenav .tablenav-pages .tablenav-pages-navspan { background: var(--qe-paper-3); border-color: var(--qe-rule); color: var(--qe-ink-subtle); } [data-theme='dark'] .subsubsub { color: var(--qe-ink-subtle); } [data-theme='dark'] .subsubsub a { color: var(--qe-ink-muted) !important; } [data-theme='dark'] .subsubsub a.current { color: var(--qe-ink) !important; } [data-theme='dark'] .subsubsub a:hover { color: var(--qe-lime) !important; } [data-theme='dark'] .subsubsub .count { color: var(--qe-ink-subtle) !important; } [data-theme='dark'] .view-switch a:before { color: var(--qe-ink-subtle); } [data-theme='dark'] .view-switch a.current:before, [data-theme='dark'] .view-switch a:hover:before { color: var(--qe-lime); } /* ========================================================================== * 2.5 Cards & panels — postboxes, dashboard widgets, settings tabs * ======================================================================== */ [data-theme='dark'] :is( .postbox, .stuffbox, .health-check-accordion, .card ) { background: var(--qe-surface); border: 1px solid var(--qe-rule); box-shadow: var(--qe-shadow-card); color: var(--qe-ink-2); } [data-theme='dark'] .welcome-panel { background: var(--qe-surface); /* Three sides only, so the shared accent spine keeps the left edge. */ border-top: 1px solid var(--qe-rule); border-right: 1px solid var(--qe-rule); border-bottom: 1px solid var(--qe-rule); box-shadow: var(--qe-shadow-card); color: var(--qe-ink-2); } [data-theme='dark'] :is( .postbox .hndle, .postbox .postbox-header, .stuffbox .hndle ) { border-bottom: 1px solid var(--qe-rule); color: var(--qe-ink); } [data-theme='dark'] .postbox .handlediv, [data-theme='dark'] .postbox .handle-order-higher, [data-theme='dark'] .postbox .handle-order-lower, [data-theme='dark'] .postbox .toggle-indicator:before { color: var(--qe-ink-subtle); } [data-theme='dark'] .postbox .inside { color: var(--qe-ink-2); } [data-theme='dark'] .welcome-panel h2 { color: var(--qe-ink); } [data-theme='dark'] :is( .welcome-panel .about-description, .welcome-panel p ) { color: var(--qe-ink-muted); } [data-theme='dark'] .nav-tab { background: var(--qe-paper-2); border-color: var(--qe-rule); color: var(--qe-ink-muted); } [data-theme='dark'] :is(.nav-tab:hover, .nav-tab:focus) { background: var(--qe-paper-3); color: var(--qe-ink); } [data-theme='dark'] :is( .nav-tab-active, .nav-tab-active:hover, .nav-tab-active:focus ) { background: var(--qe-surface); border-bottom-color: var(--qe-surface); color: var(--qe-lime); } [data-theme='dark'] :is( .nav-tab-wrapper, h1.nav-tab-wrapper, h2.nav-tab-wrapper ) { border-bottom-color: var(--qe-rule); } /* Dashboard feed rows and pointers are separate from the surrounding * postbox, so core's light defaults otherwise show through. */ [data-theme='dark'] :is( #dashboard_activity .activity-block ul li, #dashboard_activity .community-events ul li, #dashboard_activity .rss-widget ul li ) { background: var(--qe-paper-2); border-color: var(--qe-rule); color: var(--qe-ink-2); } [data-theme='dark'] :is( #dashboard_activity .activity-block ul li span, #dashboard_activity .community-events ul li span, #dashboard_activity .rss-widget ul li span ) { color: var(--qe-ink-muted); } [data-theme='dark'] :is( #dashboard_activity #the-comment-list .comment-item, #dashboard_activity #the-comment-list .comment-item:hover, #dashboard_activity #the-comment-list .comment-item:focus-within ) { background: var(--qe-paper-2) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] :is( #dashboard_activity #the-comment-list .comment-item blockquote, #dashboard_activity #the-comment-list .comment-item p, #dashboard_activity #the-comment-list .comment-item .dashboard-comment-wrap ) { color: var(--qe-ink-2) !important; } [data-theme='dark'] :is( #dashboard_activity .activity-block h3, #dashboard_activity .community-events h3, #dashboard_activity .rss-widget h3 ) { color: var(--qe-ink-muted); } [data-theme='dark'] :is( .wp-pointer .wp-pointer-content, .wp-pointer .wp-pointer-content h3, .wp-pointer-buttons ) { background: var(--qe-elevated); border-color: var(--qe-rule); color: var(--qe-ink-2); } [data-theme='dark'] .wp-pointer .wp-pointer-content h3 { background: var(--qe-lime); color: var(--qe-on-lime); } [data-theme='dark'] .wp-pointer .wp-pointer-content h3:before { color: var(--qe-on-lime); } [data-theme='dark'] :is( .wp-pointer .wp-pointer-content p, .wp-pointer .wp-pointer-buttons ) { color: var(--qe-ink-2); } [data-theme='dark'] :is( .wp-pointer-top .wp-pointer-arrow, .wp-pointer-top .wp-pointer-arrow-inner, .wp-pointer-undefined .wp-pointer-arrow, .wp-pointer-undefined .wp-pointer-arrow-inner ) { border-bottom-color: var(--qe-lime); } [data-theme='dark'] :is( .wp-pointer-bottom .wp-pointer-arrow, .wp-pointer-bottom .wp-pointer-arrow-inner ) { border-top-color: var(--qe-elevated); } [data-theme='dark'] :is( .wp-pointer-left .wp-pointer-arrow, .wp-pointer-left .wp-pointer-arrow-inner ) { border-right-color: var(--qe-elevated); } [data-theme='dark'] :is( .wp-pointer-right .wp-pointer-arrow, .wp-pointer-right .wp-pointer-arrow-inner ) { border-left-color: var(--qe-elevated); } /* Site Health owns its header and accordion button colors instead of using * the generic card rules. */ [data-theme='dark'] .health-check-header { background: var(--qe-surface); border-color: var(--qe-rule); color: var(--qe-ink); } [data-theme='dark'] :is( .health-check-header h1, .health-check-header .health-check-title-section h1, .health-check-tab ) { color: var(--qe-ink); } [data-theme='dark'] :is( .health-check-tab.active, .health-check-tab:hover, .health-check-tab:focus ) { color: var(--qe-lime); } [data-theme='dark'] .health-check-accordion .health-check-accordion-heading { border-color: var(--qe-rule); } [data-theme='dark'] .health-check-accordion .health-check-accordion-trigger { background: var(--qe-surface); border-color: var(--qe-rule); color: var(--qe-ink-2); } [data-theme='dark'] :is( .health-check-accordion .health-check-accordion-trigger:hover, .health-check-accordion .health-check-accordion-trigger:focus ) { background: var(--qe-paper-3); color: var(--qe-ink); } [data-theme='dark'] .health-check-accordion .health-check-accordion-trigger .title, [data-theme='dark'] .health-check-accordion .health-check-accordion-trigger .icon:before { color: inherit; } [data-theme='dark'] .health-check-accordion .health-check-accordion-trigger .badge { background: var(--qe-paper-3); border: 1px solid var(--qe-rule-strong); color: var(--qe-ink-2); } [data-theme='dark'] .health-check-accordion .health-check-accordion-panel { background: var(--qe-paper-2); border-color: var(--qe-rule); color: var(--qe-ink-2); } /* Themes, menus, classic editor chrome, and the old jQuery dialogs are still * ordinary supported admin screens even though they do not use postboxes. */ [data-theme='dark'] :is( .wp-filter, .manage-menus, .nav-menus-php #post-body, #nav-menu-header, #nav-menu-footer, .menu-item-bar .menu-item-handle, .menu-item-settings, .accordion-container, .accordion-section, .accordion-section-title, .accordion-section-content, .theme-browser .theme, .theme-browser .theme .theme-name, .theme-browser .theme .theme-actions, .theme-overlay .theme-wrap, .theme-overlay .theme-header, .theme-overlay .theme-about, .theme-overlay .theme-actions, .ui-dialog, .ui-dialog-titlebar, #TB_window, #TB_ajaxContent ) { background: var(--qe-surface); border-color: var(--qe-rule); color: var(--qe-ink-2); } [data-theme='dark'] :is( .wp-filter .filter-links li > a, .accordion-section-title, .menu-item-bar .menu-item-handle, .theme-browser .theme .theme-name, .theme-overlay .theme-name, .ui-dialog-title, #TB_title ) { color: var(--qe-ink); } [data-theme='dark'] :is( .accordion-section-title:hover, .accordion-section-title:focus, .menu-item-bar .menu-item-handle:hover ) { background: var(--qe-paper-3); border-color: var(--qe-rule-hover); color: var(--qe-ink); } /* WordPress 7 moved the Menus accordion click target and its item browser * onto nested elements with their own late light backgrounds. */ [data-theme='dark'] body.nav-menus-php :where( .accordion-section, .accordion-section-title, .accordion-trigger, .accordion-section-content, .tabs-panel, .tabs-panel-active ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.nav-menus-php :where( .accordion-section-title, .accordion-trigger ):hover, [data-theme='dark'] body.nav-menus-php :where( .accordion-section-title, .accordion-trigger ):focus { background: var(--qe-paper-3) !important; color: var(--qe-ink) !important; } [data-theme='dark'] body.nav-menus-php .tabs-panel :where(label, .menu-item-title) { color: var(--qe-ink-2) !important; } [data-theme='dark'] body.nav-menus-php .tabs-panel .nav-tab-link { background: transparent !important; color: var(--qe-lime) !important; } [data-theme='dark'] body.nav-menus-php .nav-tab-link { background: transparent !important; color: var(--qe-ink-muted) !important; } [data-theme='dark'] body.nav-menus-php .nav-tab-link.tabs-current, [data-theme='dark'] body.nav-menus-php .nav-tab-link:hover, [data-theme='dark'] body.nav-menus-php .nav-tab-link:focus { color: var(--qe-lime) !important; } [data-theme='dark'] body.nav-menus-php .bulk-select-button { background: var(--qe-paper-3) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] .theme-browser .theme.active .theme-name { background: var(--qe-lime); color: var(--qe-on-lime); } [data-theme='dark'] :is( .theme-browser .theme.active .theme-actions, .theme-browser .theme .theme-actions ) { background: var(--qe-paper-2); } [data-theme='dark'] .theme-browser .theme.add-new-theme a:after { background: var(--qe-paper-3); color: var(--qe-ink-muted); } [data-theme='dark'] .theme-browser .theme.add-new-theme a:hover:after, [data-theme='dark'] .theme-browser .theme.add-new-theme a:focus:after { background: var(--qe-lime); color: var(--qe-on-lime); } [data-theme='dark'] :is( .mce-container, .mce-container-body, .mce-panel, .mce-toolbar-grp, .mce-statusbar, .mce-menu, .mce-menu-item ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] :is( .mce-btn, .mce-btn button, .mce-ico, .mce-txt, .mce-menu-item .mce-text ) { color: var(--qe-ink-2) !important; } [data-theme='dark'] .mce-btn { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; } [data-theme='dark'] .mce-btn button { background: transparent !important; } [data-theme='dark'] :is( .mce-btn:hover, .mce-btn:focus, .mce-menu-item:hover, .mce-menu-item:focus ) { background: var(--qe-paper-3) !important; } /* ========================================================================== * 2.6 Component packages and the remaining bundled plugins. Each ships its * own hard-coded light palette, so the dark appearance has to name the * surfaces directly. WooCommerce and Groundhogg's panel vocabulary have * moved to part 1.13 and serve both appearances. What is left here is * either dark-only by nature, or belongs to a screen only legacy sites * reach — and legacy dashboards are pinned to the light appearance by * WordpressAutoLogin, so those rules no longer run at all. * ======================================================================== */ /* Shared WordPress component package. These surfaces appear in WooCommerce, * the media tools, and plugin dialogs. The block editor keeps its content * canvas separate below so a page preview remains true to the site. */ [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) :where( .components-card, .components-surface, .components-panel, .components-panel__body, .components-panel__header, .components-modal__frame, .components-modal__header, .components-popover__content, .components-dropdown__content, .components-menu-group, .components-notice, .components-snackbar, .components-tab-panel__tabs ) { background-color: var(--qe-elevated) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) :where( .components-card__header, .components-card__footer, .components-panel__body + .components-panel__body, .components-menu-group + .components-menu-group ) { border-color: var(--qe-rule) !important; } [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) :where( .components-text, .components-base-control__label, .components-input-control__label, .components-form-token-field__label, .components-modal__header-heading, .components-panel__body-title, .components-menu-item__item, .components-checkbox-control__label ) { color: var(--qe-ink-2) !important; } [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) :where( .components-base-control__help, .components-input-control__help, .components-form-token-field__help ) { color: var(--qe-ink-muted) !important; } [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) :where( .components-text-control__input, .components-search-control__input, .components-input-control__input, .components-select-control__input, .components-form-token-field__input-container, .components-combobox-control__input ) { background: var(--qe-surface) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink) !important; } [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) .components-button:not(.is-primary):not(.is-destructive) { color: var(--qe-ink-2) !important; } [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) .components-button:not(.is-primary):not(.is-destructive):hover, [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) .components-button:not(.is-primary):not(.is-destructive):focus { background: var(--qe-paper-3) !important; color: var(--qe-ink) !important; } [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) .components-button.is-primary { background: var(--qe-lime) !important; color: var(--qe-on-lime) !important; } [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) .components-button.is-destructive { color: var(--qe-tomato) !important; } [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) .components-button svg { fill: currentColor; } [data-theme='dark'] body.wp-core-ui:not(.block-editor-page) .components-button :where(span, strong) { color: inherit !important; } /* The block Widgets screen is an editor shell, but unlike Posts/Pages its * panels are all administrative chrome. Theme those panels and dialogs while * leaving each .editor-styles-wrapper widget preview to the active theme. */ [data-theme='dark'] body.widgets-php.block-editor-page :where( .edit-widgets-header, .edit-widgets-sidebar, .interface-complementary-area, .interface-complementary-area-header, .components-panel, .components-panel__header, .components-panel__body, .components-modal__frame, .components-modal__header, .components-modal__content, .components-popover__content, .components-dropdown__content, .components-menu-group, .components-tab-panel__tabs ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.widgets-php.block-editor-page :where( .components-panel__body-title, .components-modal__header-heading, .components-guide__page h1, .components-guide__page h2, .components-guide__page h3, .components-base-control__label, .components-menu-item__item, .components-tab-panel__tabs-item, .edit-widgets-header h1, .edit-widgets-sidebar h2 ) { color: var(--qe-ink-2) !important; } [data-theme='dark'] body.widgets-php.block-editor-page :where( .components-base-control__help, .components-modal__content p, .components-external-link__contents, .components-external-link__icon ) { color: var(--qe-ink-muted) !important; } [data-theme='dark'] body.widgets-php.block-editor-page .components-button:not(.is-primary):not(.is-destructive) { background: transparent !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.widgets-php.block-editor-page .components-button:not(.is-primary):not(.is-destructive):hover, [data-theme='dark'] body.widgets-php.block-editor-page .components-button:not(.is-primary):not(.is-destructive):focus { background: var(--qe-paper-3) !important; color: var(--qe-ink) !important; } [data-theme='dark'] body.widgets-php.block-editor-page .components-button.is-primary { background: var(--qe-lime) !important; color: var(--qe-on-lime) !important; } /* Select2 is still used by WooCommerce and Groundhogg for long option lists. */ [data-theme='dark'] body.wp-core-ui .select2-container :where( .select2-selection--single, .select2-selection--multiple, .select2-search__field, .select2-selection__rendered ) { background: var(--qe-surface) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink) !important; } [data-theme='dark'] body.wp-core-ui .select2-container .select2-selection__placeholder { color: var(--qe-ink-subtle) !important; } [data-theme='dark'] body.wp-core-ui .select2-container .select2-selection__choice { background: var(--qe-paper-3) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.wp-core-ui .select2-container .select2-selection.select2-selection--single, [data-theme='dark'] body.wp-core-ui .select2-container .select2-selection.select2-selection--multiple { background: var(--qe-surface) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink) !important; } [data-theme='dark'] .blockUI.blockOverlay { background: var(--qe-scrim) !important; opacity: 1 !important; } /* Groundhogg's email builder intentionally keeps the message itself light, * but hard-codes white into the surrounding block picker, settings rail, * toolbar, inspector, and dialogs. Theme only that editor chrome. */ [data-theme='dark'] body.groundhogg-admin-page.gh_emails :where( #email-block-editor, #blocks-panel, #controls-panel, #controls-panel .controls-nav, #controls-panel > .gh-panel, #email-editor-controls, #email-editor-advanced, .block-inspector, #block-editor-toolbar .buttons, .gh-modal-dialog, .gh-modal-header, .gh-modal-footer, .gh-modal-content ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails #blocks-panel, [data-theme='dark'] body.groundhogg-admin-page.gh_emails #content { background: var(--qe-paper-2) !important; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails :where( #blocks-panel .block, .insert-block-grid .block, #controls-panel .controls-nav button.tab, .block-inspector .inspector-block, .global-font-select .select-font ) { background: var(--qe-paper-3) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails :where( #controls-panel .controls-nav button.tab.active, #controls-panel .controls-nav button.tab:hover, #controls-panel .controls-nav button.tab:focus, .block-inspector .inspector-block:hover, .global-font-select .select-font:hover ) { background: var(--qe-elevated) !important; color: var(--qe-ink) !important; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails :where( #blocks-panel .block-name, .insert-block-grid .block-name, #controls-panel h2, #controls-panel h3, #controls-panel label, #controls-panel p, #controls-panel .control-label, .gh-modal-dialog h2, .gh-modal-dialog h3, .gh-modal-dialog label, .gh-modal-dialog p ) { color: var(--qe-ink-2) !important; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails :where( #blocks-panel .block, .insert-block-grid .block, #block-editor-toolbar .buttons, .block-inspector ) svg { color: currentColor; fill: currentColor; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails :where( #controls-panel, .gh-modal-dialog ) :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { background: var(--qe-surface) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink) !important; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails :where( .gh-picker, .gh-picker .gh-picker-options ) { background: var(--qe-surface) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails .gh-picker .gh-picker-option:hover, [data-theme='dark'] body.groundhogg-admin-page.gh_emails .gh-picker .gh-picker-option.highlighted { background: var(--qe-paper-3) !important; color: var(--qe-ink) !important; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails .gh-modal-overlay, [data-theme='dark'] body.groundhogg-admin-page.gh_emails .gh-modal-backdrop { background: var(--qe-scrim) !important; } /* These are the authored email and inbox preview surfaces, not admin chrome. */ [data-theme='dark'] body.groundhogg-admin-page.gh_emails #block-editor-content-wrap { background: var(--qe-light-surface) !important; color: var(--qe-light-ink-2) !important; color-scheme: light; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails #block-editor-content-wrap :where( p, h1, h2, h3, h4, h5, h6, li, td, th ):not([style*="color"]) { color: var(--qe-light-ink-2) !important; } [data-theme='dark'] body.groundhogg-admin-page.gh_emails :where( .preview.mobile, .preview.desktop, iframe.template-preview ) { color-scheme: light; } /* The QE Builder analytics filter, whose resting state comes from the shared * button rules. Affiliates' own primitives are themed for both appearances * in part 1.12, so nothing more is needed here. */ [data-theme='dark'] .qeb-analytics .button.is-active { background: var(--qe-lime) !important; border-color: var(--qe-lime) !important; color: var(--qe-on-lime) !important; } /* The Customizer is rendered by customize.php rather than the normal admin * shell. Theme only its control sidebar; the preview iframe must continue to * show the website exactly as visitors see it. */ [data-theme='dark'] :is( body.wp-customizer, body.wp-customizer #customize-controls, body.wp-customizer #customize-controls .wp-full-overlay-sidebar-content, body.wp-customizer #customize-sidebar-outer-content, body.wp-customizer .customize-pane-parent, body.wp-customizer .customize-pane-child, body.wp-customizer .accordion-sub-container.control-panel-content, body.wp-customizer #available-widgets, body.wp-customizer #available-menu-items ) { background: var(--qe-paper) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.wp-customizer :where( .wp-full-overlay-header, .wp-full-overlay-footer, #customize-header-actions, .customize-info, .customize-section-title, .customize-section-description-container, .accordion-section, .accordion-section-title, .accordion-section-content, .customize-inside-control-row, .widget, .widget-top, .widget-inside, .menu-item-bar .menu-item-handle, .menu-item-settings, #available-widgets-filter, #available-menu-items-search ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] :is( body.wp-customizer #customize-theme-controls .accordion-section-title, body.wp-customizer #customize-outer-theme-controls .accordion-section-title, body.wp-customizer #customize-controls .customize-info .accordion-section-title, body.wp-customizer #customize-controls .customize-section-title, body.wp-customizer #customize-controls .customize-section-title h3, body.wp-customizer #customize-controls h3.customize-section-title ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink) !important; } [data-theme='dark'] :is( body.wp-customizer #customize-theme-controls .accordion-section-title:hover, body.wp-customizer #customize-theme-controls .accordion-section-title:focus, body.wp-customizer #customize-theme-controls .control-section.open .accordion-section-title, body.wp-customizer #customize-outer-theme-controls .accordion-section-title:hover, body.wp-customizer #customize-outer-theme-controls .accordion-section-title:focus, body.wp-customizer #customize-outer-theme-controls .control-section.open .accordion-section-title ) { background: var(--qe-paper-3) !important; border-left-color: var(--qe-lime) !important; color: var(--qe-ink) !important; } [data-theme='dark'] body.wp-customizer #customize-theme-controls .accordion-section-title:after, [data-theme='dark'] body.wp-customizer #customize-outer-theme-controls .accordion-section-title:after, [data-theme='dark'] body.wp-customizer .customize-panel-back:before, [data-theme='dark'] body.wp-customizer .customize-section-back:before { color: var(--qe-ink-subtle) !important; } [data-theme='dark'] body.wp-customizer :where( .customize-control-title, .customize-control label, .customize-info .panel-title, .widget-title h3, .menu-item-title ) { color: var(--qe-ink) !important; } [data-theme='dark'] body.wp-customizer :where( .customize-control-description, .customize-info .preview-notice, .customize-info .customize-panel-description, .customize-info .customize-section-description, .no-widget-areas-rendered-notice, .item-type, .theme-location-set ) { background: transparent !important; color: var(--qe-ink-muted) !important; } [data-theme='dark'] body.wp-customizer :where( .customize-controls-close, .customize-controls-preview-toggle, .customize-panel-back, .customize-section-back, .collapse-sidebar, .wp-full-overlay-footer .devices button ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-muted) !important; } [data-theme='dark'] body.wp-customizer :where( .customize-controls-close, .customize-controls-preview-toggle, .customize-panel-back, .customize-section-back, .collapse-sidebar, .wp-full-overlay-footer .devices button ):hover, [data-theme='dark'] body.wp-customizer :where( .customize-controls-close, .customize-controls-preview-toggle, .customize-panel-back, .customize-section-back, .collapse-sidebar, .wp-full-overlay-footer .devices button ):focus { background: var(--qe-paper-3) !important; color: var(--qe-lime) !important; } [data-theme='dark'] body.wp-customizer .wp-full-overlay-footer .devices button.active, [data-theme='dark'] body.wp-customizer .wp-full-overlay-footer .devices button.active:before { color: var(--qe-lime) !important; } [data-theme='dark'] body.wp-customizer .wp-full-overlay-footer .devices { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; } /* Legacy analytics and settings plugins predate a shared component palette * and paint entire applications white. These selectors follow each plugin's * public admin primitives so all of its tabs inherit the same treatment. */ [data-theme='dark'] body.dashboard_page_koko-analytics .koko-analytics.ka-wrap { background: var(--qe-paper) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.dashboard_page_koko-analytics .koko-analytics :where( .ka-filter, .ka-card, .ka-kpi, .ka-upsell-peek, .ka-upsell-banner, .ka-chart-group, table, thead, tbody, tfoot, tr, th, td ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.dashboard_page_koko-analytics .koko-analytics :where( h1, h2, h3, h4, strong, .ka-kpi-value, .ka-upsell-h ) { color: var(--qe-ink) !important; } [data-theme='dark'] body.dashboard_page_koko-analytics .koko-analytics :where( p, small, .ka-muted, .ka-kpi-subtitle, .ka-kpi-cap, .ka-chart-legend, .ka-chart-legend span, .ka-upsell-sub, .ka-upsell-sub b ) { color: var(--qe-ink-muted) !important; } [data-theme='dark'] body.dashboard_page_koko-analytics .koko-analytics .ka-chart-options a { background: transparent !important; color: var(--qe-ink-muted) !important; } [data-theme='dark'] :is( body.dashboard_page_koko-analytics .koko-analytics .ka-chart-options a.on, body.dashboard_page_koko-analytics .koko-analytics .ka-chart-options a:hover, body.dashboard_page_koko-analytics .koko-analytics .ka-chart-options a:focus ) { background: var(--qe-paper-3) !important; color: var(--qe-lime) !important; } [data-theme='dark'] body.dashboard_page_koko-analytics .koko-analytics svg text { fill: var(--qe-ink-muted) !important; } [data-theme='dark'] body.dashboard_page_koko-analytics .koko-analytics svg :where(line, .grid-line) { stroke: var(--qe-rule-strong) !important; } [data-theme='dark'] body[class*="site-kit_page_googlesitekit"] :where( .googlesitekit-page, .googlesitekit-header, .googlesitekit-layout, .googlesitekit-card, .googlesitekit-widget, .googlesitekit-setup__wrapper, .googlesitekit-setup__analytics-opt-in-wrapper, .googlesitekit-settings-module, .googlesitekit-setup-module, .mdc-card ) { background-color: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body[class*="site-kit_page_googlesitekit"] :where( .googlesitekit-page h1, .googlesitekit-page h2, .googlesitekit-page h3, .googlesitekit-page h4, .googlesitekit-page p, .googlesitekit-page label, .googlesitekit-page li, .googlesitekit-page .mdc-typography ) { color: var(--qe-ink-2) !important; } [data-theme='dark'] body[class*="site-kit_page_googlesitekit"] .googlesitekit-page :where( .mdc-checkbox__content, .mdc-checkbox__description, .mdc-form-field ) { color: var(--qe-ink-muted) !important; } [data-theme='dark'] body[class*="site-kit_page_googlesitekit"] .googlesitekit-page :where( .googlesitekit-cta-link, a:not(.mdc-button) ) { color: var(--qe-lime) !important; } [data-theme='dark'] body[class*="site-kit_page_googlesitekit"] .googlesitekit-page .mdc-button:not(.mdc-button--raised) { background: var(--qe-paper-3) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body[class*="site-kit_page_googlesitekit"] .googlesitekit-page .mdc-button--raised:not(:disabled) { background: var(--qe-lime) !important; color: var(--qe-on-lime) !important; } [data-theme='dark'] body.rank-math-page .rank-math-wrap-settings :where( .components-tab-panel__tabs, .rank-math-tab-header, .field-wrap, .rank-math-footer, .form-footer.rank-math-ui, .components-input-control__container, .components-toggle-group-control ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.rank-math-page .rank-math-wrap-settings .components-tab-panel__tabs-item { background: var(--qe-paper-2) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-muted) !important; } [data-theme='dark'] body.rank-math-page .rank-math-wrap-settings .components-tab-panel__tabs-item.separator { background: var(--qe-paper-3) !important; color: var(--qe-ink-subtle) !important; } [data-theme='dark'] :is( body.rank-math-page .rank-math-wrap-settings .components-tab-panel__tabs-item.is-active, body.rank-math-page .rank-math-wrap-settings .components-tab-panel__tabs-item:hover, body.rank-math-page .rank-math-wrap-settings .components-tab-panel__tabs-item:focus ) { background: var(--qe-surface) !important; color: var(--qe-lime) !important; } [data-theme='dark'] body.rank-math-page .rank-math-wrap-settings :where( .rank-math-tab-header, .field-wrap ) :where(h1, h2, h3, h4, p, label, li, th, td, .field-description) { color: var(--qe-ink-2) !important; } [data-theme='dark'] body.rank-math-page .rank-math-wrap-settings .rank-math-button.button-secondary { background: transparent !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.events_page_simple-events-pools #col-right .col-wrap > div[style*="background: #f0f0f1"] { background: var(--qe-surface) !important; border-color: var(--qe-lime) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.events_page_simple-events-pools #col-right .col-wrap > div[style*="background: #f0f0f1"] :where(h3, p, li, strong) { color: var(--qe-ink-2) !important; } [data-theme='dark'] body.affiliates_page_wpam-woo-coupons .postbox .inside > p[style*="background: #fff6d5"] { background: color-mix(in srgb, var(--qe-amber-fill) 14%, var(--qe-surface)) !important; border-color: var(--qe-amber) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] body.wp-customizer :where( input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], textarea, select ) { background: var(--qe-surface) !important; border-color: var(--qe-rule-strong) !important; color: var(--qe-ink) !important; } [data-theme='dark'] body.wp-customizer :where(input, textarea, select):focus { border-color: var(--qe-lime) !important; box-shadow: 0 0 0 4px var(--qe-focus-ring) !important; outline: none; } [data-theme='dark'] :is( body.wp-customizer .CodeMirror, body.wp-customizer .CodeMirror-gutters ) { background: var(--qe-surface) !important; border-color: var(--qe-rule) !important; color: var(--qe-ink-2) !important; } [data-theme='dark'] :is( body.wp-customizer .CodeMirror-linenumber, body.wp-customizer .CodeMirror-placeholder ) { color: var(--qe-ink-subtle) !important; } [data-theme='dark'] body.wp-customizer .CodeMirror-cursor { border-left-color: var(--qe-ink) !important; } [data-theme='dark'] body.wp-customizer .CodeMirror-selected { background: var(--qe-lime-soft) !important; } [data-theme='dark'] body.wp-customizer .CodeMirror-activeline-background { background: var(--qe-paper-3) !important; } [data-theme='dark'] :is( body.wp-customizer .cm-s-default .cm-keyword, body.wp-customizer .cm-s-default .cm-qualifier ) { color: var(--qe-rose-text); } [data-theme='dark'] :is( body.wp-customizer .cm-s-default .cm-atom, body.wp-customizer .cm-s-default .cm-number ) { color: var(--qe-amber); } [data-theme='dark'] :is( body.wp-customizer .cm-s-default .cm-def, body.wp-customizer .cm-s-default .cm-variable, body.wp-customizer .cm-s-default .cm-variable-2, body.wp-customizer .cm-s-default .cm-property ) { color: var(--qe-lime-bright); } [data-theme='dark'] :is( body.wp-customizer .cm-s-default .cm-string, body.wp-customizer .cm-s-default .cm-string-2 ) { color: var(--qe-mint); } [data-theme='dark'] body.wp-customizer .cm-s-default .cm-comment { color: var(--qe-ink-subtle); } [data-theme='dark'] :is( body.wp-customizer .cm-s-default .cm-tag, body.wp-customizer .cm-s-default .cm-error ) { color: var(--qe-tomato); } /* ========================================================================== * 2.7 Notices — dark cards; the status spine on the left is shared. * ======================================================================== */ [data-theme='dark'] :is( .notice, div.updated, div.error, .notice-info ) { background: var(--qe-surface); /* Three sides only, so the shared status spine keeps the left edge. */ border-top: 1px solid var(--qe-rule); border-right: 1px solid var(--qe-rule); border-bottom: 1px solid var(--qe-rule); color: var(--qe-ink-2); box-shadow: var(--qe-shadow-card); } [data-theme='dark'] :is( .notice p, div.updated p, div.error p ) { color: var(--qe-ink-2); } [data-theme='dark'] .notice .notice-dismiss:before { color: var(--qe-ink-subtle); } [data-theme='dark'] .notice .notice-dismiss:hover:before { color: var(--qe-ink); } /* ========================================================================== * 2.8 Media — library grid, the uploader, and the select-media modal that * opens inside the QE Builder editor. * ======================================================================== */ [data-theme='dark'] :is(.media-modal, .media-modal-content) { background: var(--qe-paper); box-shadow: var(--qe-shadow-pop); } [data-theme='dark'] .media-modal-backdrop { background: var(--qe-scrim); } [data-theme='dark'] .media-modal-close .media-modal-icon:before { color: var(--qe-ink-muted); } [data-theme='dark'] .media-modal-close:hover .media-modal-icon:before { color: var(--qe-ink); } [data-theme='dark'] :is( .media-frame-title, .media-frame-router, .media-frame-menu, .media-frame-content, .media-frame-toolbar, .media-toolbar ) { background: var(--qe-paper); border-color: var(--qe-rule); color: var(--qe-ink); } [data-theme='dark'] .media-frame-title h1 { color: var(--qe-ink); } [data-theme='dark'] .media-menu { background: var(--qe-paper); border-right-color: var(--qe-rule); } [data-theme='dark'] .media-menu .media-menu-item { color: var(--qe-ink-muted); } [data-theme='dark'] .media-menu .media-menu-item:hover { background: var(--qe-paper-2); color: var(--qe-ink); } [data-theme='dark'] .media-menu .media-menu-item.active { background: var(--qe-surface); color: var(--qe-lime); } [data-theme='dark'] .media-router .media-menu-item { color: var(--qe-ink-muted); } [data-theme='dark'] :is( .media-router .media-menu-item.active, .media-router .media-menu-item.active:last-child ) { background: var(--qe-surface); color: var(--qe-ink); border-color: var(--qe-rule); } [data-theme='dark'] :is( .attachments-browser .media-toolbar, .media-frame.mode-grid .media-toolbar ) { background: var(--qe-paper); border-bottom: 1px solid var(--qe-rule); } [data-theme='dark'] .attachment .thumbnail { background: var(--qe-paper-3); box-shadow: 0 0 0 1px var(--qe-rule); } [data-theme='dark'] .attachment .thumbnail .centered img { background: var(--qe-paper-3); } [data-theme='dark'] .attachment .filename { background: var(--qe-surface); color: var(--qe-ink-2); box-shadow: inset 0 1px 0 var(--qe-rule); } [data-theme='dark'] :is( .media-sidebar, .attachment-details, .attachment-info ) { background: var(--qe-paper-2); border-left-color: var(--qe-rule); color: var(--qe-ink-2); } [data-theme='dark'] :is( .media-sidebar h2, .attachment-details h2 ) { color: var(--qe-ink); } [data-theme='dark'] :is( .media-sidebar .setting span, .media-sidebar .setting .name, .attachment-details .setting span, .attachment-details .setting .name, .attachment-info .details, .attachment-info .filename, .attachment-info .uploaded, .attachment-info .file-size, .attachment-info .dimensions ) { color: var(--qe-ink-muted); } [data-theme='dark'] .attachment-info { border-bottom-color: var(--qe-rule); } [data-theme='dark'] .details-image { background: var(--qe-paper-3); } /* Drag-and-drop targets */ [data-theme='dark'] :is(.upload-ui h2, .uploader-inline h2) { color: var(--qe-ink); } [data-theme='dark'] :is(.uploader-inline, .uploader-editor) { background: var(--qe-paper); } [data-theme='dark'] .upload-php .media-frame.mode-grid .uploader-inline, [data-theme='dark'] #drag-drop-area { border: 2px dashed var(--qe-rule-strong); background: var(--qe-paper-2); } [data-theme='dark'] :is( .drag-drop .drag-drop-inside p, .uploader-inline .upload-ui p ) { color: var(--qe-ink-muted); } [data-theme='dark'] .media-progress-bar { background: var(--qe-paper-3); border-color: var(--qe-rule-strong); } /* ========================================================================== * 2.9 Block editor — staff-only surface here (customers build pages in the * QE Builder). Branded chrome, content canvas left alone so the page * being edited renders true. * ======================================================================== */ [data-theme='dark'] body.block-editor-page { --wp-components-color-background: var(--qe-surface); --wp-components-color-foreground: var(--qe-ink); } [data-theme='dark'] body.block-editor-page .interface-interface-skeleton { background: var(--qe-paper); color: var(--qe-ink); } [data-theme='dark'] body.block-editor-page :is( .interface-interface-skeleton__header, .interface-interface-skeleton__footer, .edit-post-header, .editor-header ) { background: var(--qe-paper); border-color: var(--qe-rule); color: var(--qe-ink); } [data-theme='dark'] body.block-editor-page :is( .interface-interface-skeleton__sidebar, .interface-interface-skeleton__secondary-sidebar ) { background: var(--qe-surface); border-color: var(--qe-rule); color: var(--qe-ink); } [data-theme='dark'] body.block-editor-page .interface-interface-skeleton__content { background: var(--qe-paper-2); } [data-theme='dark'] body.block-editor-page .components-button.is-primary { color: var(--qe-on-lime) !important; } /* ========================================================================== * 2.10 Login — the card and its type on the shared paper. * ======================================================================== */ [data-theme='dark'] :is(.login form, .login .qe-reload-needed) { background: var(--qe-surface); border: 1px solid var(--qe-rule); } [data-theme='dark'] .login .qe-reload-needed h2 { color: var(--qe-ink); } [data-theme='dark'] .login .qe-reload-needed p { color: var(--qe-ink-2); } [data-theme='dark'] .login label { color: var(--qe-ink-muted); } [data-theme='dark'] .login form .forgetmenot label { color: var(--qe-ink-2); } [data-theme='dark'] :is( .login form .input, .login input[type="text"], .login input[type="password"] ) { background: var(--qe-paper-3); border: 1px solid var(--qe-rule-strong); color: var(--qe-ink); } /* Restated so the focus halo outranks the field colours above. */ [data-theme='dark'] :is( .login form .input:focus, .login input[type="text"]:focus, .login input[type="password"]:focus ) { border-color: var(--qe-lime); } [data-theme='dark'] .login .button.wp-hide-pw { color: var(--qe-ink-subtle); } [data-theme='dark'] :is( .login .button.wp-hide-pw:hover, .login .button.wp-hide-pw:focus ) { color: var(--qe-ink); background: transparent; border-color: transparent; } [data-theme='dark'] :is( .login .message, .login .notice, .login .success, .login #login_error ) { background: var(--qe-surface); color: var(--qe-ink-2); } [data-theme='dark'] :is( .login #login_error a, .login .message a ) { color: var(--qe-lime); } [data-theme='dark'] :is(.login #nav, .login #backtoblog) { color: var(--qe-ink-subtle); } [data-theme='dark'] :is(.login #nav a, .login #backtoblog a) { color: var(--qe-ink-muted); } [data-theme='dark'] :is(.login #nav a:hover, .login #backtoblog a:hover) { color: var(--qe-lime); } [data-theme='dark'] .login .privacy-policy-page-link a { color: var(--qe-ink-subtle); } /* ========================================================================== * PART 3 — WHITE-LABEL: hide WordPress chrome and chatter (behaviour * unchanged, and the same in both appearances) * ========================================================================== */ /* -------------------------------------------------------------------------- * Update nags and version chatter (everyone, staff included — updates are * handled centrally from the QE Sites app, never from inside a site). * ------------------------------------------------------------------------ */ .update-nag, #wp-admin-bar-updates, .theme-update-message, .update-message, #menu-plugins .update-plugins, .plugin-count, #footer-upgrade { display: none !important; } /* -------------------------------------------------------------------------- * Admin chrome that points away from QE: the footer credit line and the * contextual help / screen-options tabs that document WordPress itself. * ------------------------------------------------------------------------ */ #wpfooter, #screen-meta, #screen-meta-links { display: none !important; } /* -------------------------------------------------------------------------- * The WordPress sidebar menu and toolbar are hidden for customers entirely — * their navigation is the QE Sites manage sidebar, which is an allowlist. * Hiding whole chrome (rather than pruning items) means a plugin update can * never expose a new screen by accident. The toolbar markup is already * removed server-side by qe-white-label.php; the #wpadminbar rule here is a * safety net. QE staff keep the full menu for support. * ------------------------------------------------------------------------ */ body:not(.qe-staff) #adminmenumain, body:not(.qe-staff) #wpadminbar { display: none !important; } /* Sites converted from the legacy platform still carry a child-theme * admin.css that hides the menu and toolbar for everyone with plain * #adminmenuwrap-level selectors. When the app pins the native view * (body.qe-staff), these higher-specificity rules win that fight and * bring the chrome back. */ body.qe-staff #adminmenumain, body.qe-staff #adminmenuback, body.qe-staff #adminmenuwrap, body.qe-staff #wpadminbar { display: block !important; } /* The same legacy stylesheet also zeroes the offsets that make room for * the fixed-position menu and toolbar, so the restored chrome would sit on * top of the content. Give back core wp-admin's layout values (menu 160px, * folded 36px, toolbar 32px / 46px on small screens). */ body.qe-staff #wpcontent, body.qe-staff #wpfooter { margin-left: 160px !important; } body.qe-staff.folded #wpcontent, body.qe-staff.folded #wpfooter { margin-left: 36px !important; } body.qe-staff #wpcontent { padding-left: 20px !important; } html.wp-toolbar:has(body.qe-staff) { padding-top: 32px !important; } @media screen and (max-width: 960px) { body.qe-staff.auto-fold #wpcontent, body.qe-staff.auto-fold #wpfooter { margin-left: 36px !important; } } @media screen and (max-width: 782px) { body.qe-staff.auto-fold #wpcontent, body.qe-staff.auto-fold #wpfooter { margin-left: 0 !important; } body.qe-staff #wpcontent { padding-left: 10px !important; } html.wp-toolbar:has(body.qe-staff) { padding-top: 46px !important; } } body:not(.qe-staff) #wpcontent, body:not(.qe-staff) #wpfooter { margin-left: 0 !important; } /* Dashboard pages hardcode class="wp-toolbar" on , whose padding * reserves space for the (now absent) toolbar. The staff marker lives on * , so reach the root element through :has(). */ html.wp-toolbar:has(body:not(.qe-staff)) { padding-top: 0 !important; } /* -------------------------------------------------------------------------- * Notice noise. Plugin update banners, upsells, and review begging mean * nothing to customers; QE staff keep them for debugging. * ------------------------------------------------------------------------ */ body:not(.qe-staff) .notice, body:not(.qe-staff) .updated, body:not(.qe-staff) .error, body:not(.qe-staff) .update-php, body:not(.qe-staff) .wp-core-ui .notice.is-dismissible { display: none !important; } /* -------------------------------------------------------------------------- * Bundled-plugin vendor chrome. Customers still get every useful commerce * and marketing screen from the QE sidebar; these panels are vendor branding, * extension advertising, remote knowledge-base links, and mobile-app prompts. * Keep them visible to staff because they can help with support diagnostics. * ------------------------------------------------------------------------ */ body:not(.qe-staff) #woocommerce-activity-panel, body:not(.qe-staff) .woocommerce-layout__header, body:not(.qe-staff) .woocommerce-store-alerts, body:not(.qe-staff) #woocommerce-layout__notice-list, body:not(.qe-staff) .woocommerce-marketing-knowledgebase-card, body:not(.qe-staff) .woocommerce-marketing-recommended-extensions-card, body:not(.qe-staff) .woocommerce-mobile-app-banner, body:not(.qe-staff) .gh-header svg { display: none !important; } /* -------------------------------------------------------------------------- * Overlays inside the QE Sites editor frame. * * In the editor the frame is as tall as the screen it is showing rather than * as tall as the window, so the window does the scrolling (see the frame * sizing script in qe-white-label.php). Anything that covers "the window" — * the media picker, the store's dialogs — would then cover the entire screen * top to bottom and open nowhere near where the customer is looking. The app * sends back the part of the frame that is on screen; these anchor to it. * * Scoped to the framed view, so a dashboard opened in its own tab keeps the * behaviour WordPress and its plugins ship. * ------------------------------------------------------------------------ */ [data-qe-framed] .media-modal, [data-qe-framed] .media-modal-backdrop, [data-qe-framed] .wc-backbone-modal-backdrop, [data-qe-framed] .components-modal__screen-overlay { position: absolute; top: var(--qe-frame-visible-top, 0px); bottom: auto; height: var(--qe-frame-visible-height, 100vh); } /* This one centres itself on the viewport rather than filling it. */ [data-qe-framed] .wc-backbone-modal .wc-backbone-modal-content { position: absolute; top: calc(var(--qe-frame-visible-top, 0px) + var(--qe-frame-visible-height, 100vh) / 2); } /* The store screens floor these wrappers at "a window tall, less the toolbar", * which inside the frame chases its own tail: the frame is sized from the * content, so every measurement changes the floor for the next one. The frame * is exactly as tall as its screen here, so the floor buys nothing — let the * content decide and the height settles in one pass. * ------------------------------------------------------------------------ */ [data-qe-framed] #wpwrap, [data-qe-framed] #wpcontent, [data-qe-framed] #wpbody-content { min-height: 0 !important; } /* -------------------------------------------------------------------------- * Store tours, announcements, and surveys (everyone, staff included). The * commerce plugins interrupt the dashboard with feature announcements, guided * tours, and satisfaction surveys — the vendor talking to a store owner who * has never heard of them, and who cannot act on what it says. Every release * brings new ones under new names, so these close off the containers the tour * framework renders into rather than dismissing each one as it appears. * Nothing here is diagnostic, and a modal blocks support work exactly as * thoroughly as it blocks a customer's, so staff lose nothing by not seeing * them. * ------------------------------------------------------------------------ */ .woocommerce-tour-kit, .tour-kit-frame, .tour-kit-frame__container, .tour-kit-overlay, .tour-kit-spotlight, .woocommerce-customer-effort-score { display: none !important; } /* -------------------------------------------------------------------------- * Links out to the plugin vendor's own site: the marketplace promotion under * the store settings tabs, and the "learn more" buttons on the empty-state * screens (orders, coupons). The buttons that stay are the ones leading back * into the dashboard — "Create product", "Start import". * * The ancestor class on the second selector is load-bearing, not decoration: * the store's own stylesheet carries * `.woocommerce-BlankState .woocommerce-BlankState-cta { display: inline-block * !important }`, and it loads after this file — so without the extra class * the two rules tie on specificity and source order hands the win to theirs. * ------------------------------------------------------------------------ */ .wc-settings-marketplace-link, .woocommerce-BlankState .woocommerce-BlankState-cta[href*='woocommerce.com'] { display: none !important; } /* -------------------------------------------------------------------------- * Dashboard widgets that surface WordPress internals to customers. * ------------------------------------------------------------------------ */ body:not(.qe-staff) #dashboard_site_health, body:not(.qe-staff) #dashboard_right_now, body:not(.qe-staff) #dashboard_quick_press { display: none !important; } /* -------------------------------------------------------------------------- * Block editor: hide the welcome tour and the "open in new tab" plugin * directory hints that lead to wordpress.org. * ------------------------------------------------------------------------ */ .edit-post-welcome-guide, .block-directory-downloadable-blocks-panel, .block-editor-inserter__media-tabs-container .block-editor-inserter__media-panel-search, .nux-dot-tip { display: none !important; } /* -------------------------------------------------------------------------- * Login screen: drop the links that lead away from the brand. The logo image * itself is swapped by qe-white-label.php. * ------------------------------------------------------------------------ */ .login #nav .wp-login-register, .login .language-switcher, .login #backtoblog { display: none !important; }