/* * Native WordPress admin dark theme. * * Loaded ONLY on native (non-Aurora) admin pages, and every rule is gated * on html.aurora-dark so it is completely inert in light mode. It restyles * the common WordPress admin elements to match Aurora's dark palette using * the --aurora-* variables defined in the shell stylesheet. * * Scope is kept under #wpcontent / #wpbody-content so it never reaches the * Aurora sidebar/toolbar (which live in their own root) and cannot leak to * the front end. This is the one intentionally-large styling surface, kept * isolated in a single file on purpose. */ html.aurora-dark.aurora-ready #wpbody-content, html.aurora-dark.aurora-ready #wpbody-content .wrap { color: var(--aurora-text); } /* Headings & text -------------------------------------------------------- */ html.aurora-dark.aurora-ready #wpbody-content h1, html.aurora-dark.aurora-ready #wpbody-content h2, html.aurora-dark.aurora-ready #wpbody-content h3, html.aurora-dark.aurora-ready #wpbody-content h4, html.aurora-dark.aurora-ready #wpbody-content h5, html.aurora-dark.aurora-ready #wpbody-content h6, html.aurora-dark.aurora-ready #wpbody-content p, html.aurora-dark.aurora-ready #wpbody-content li, html.aurora-dark.aurora-ready #wpbody-content dt, html.aurora-dark.aurora-ready #wpbody-content dd, html.aurora-dark.aurora-ready #wpbody-content label, html.aurora-dark.aurora-ready #wpbody-content th, html.aurora-dark.aurora-ready #wpbody-content td, html.aurora-dark.aurora-ready #wpbody-content strong { color: var(--aurora-text); } html.aurora-dark.aurora-ready #wpbody-content .description, html.aurora-dark.aurora-ready #wpbody-content .howto, html.aurora-dark.aurora-ready #wpbody-content .subtitle, html.aurora-dark.aurora-ready #wpbody-content .wp-heading-inline + .subtitle { color: var(--aurora-text-muted); } html.aurora-dark.aurora-ready #wpbody-content a { color: var(--aurora-accent); } /* Postboxes, cards, metaboxes ------------------------------------------- */ html.aurora-dark.aurora-ready #wpbody-content .postbox, html.aurora-dark.aurora-ready #wpbody-content .card, html.aurora-dark.aurora-ready #wpbody-content .welcome-panel, html.aurora-dark.aurora-ready #wpbody-content .wp-list-table, html.aurora-dark.aurora-ready #wpbody-content .stuffbox { background: var(--aurora-card-bg); border-color: var(--aurora-card-border); color: var(--aurora-text); box-shadow: none; } html.aurora-dark.aurora-ready #wpbody-content .postbox-header, html.aurora-dark.aurora-ready #wpbody-content .postbox .hndle, html.aurora-dark.aurora-ready #wpbody-content .postbox h2, html.aurora-dark.aurora-ready #wpbody-content .postbox h3 { border-color: var(--aurora-card-border); color: var(--aurora-text); } html.aurora-dark.aurora-ready #wpbody-content .inside, html.aurora-dark.aurora-ready #wpbody-content .welcome-panel-content { color: var(--aurora-text); } html.aurora-dark.aurora-ready #wpbody-content .handlediv, html.aurora-dark.aurora-ready #wpbody-content .postbox .handle-order-higher, html.aurora-dark.aurora-ready #wpbody-content .postbox .handle-order-lower { color: var(--aurora-text-muted); } /* Tables ---------------------------------------------------------------- */ html.aurora-dark.aurora-ready #wpbody-content .wp-list-table th, html.aurora-dark.aurora-ready #wpbody-content .wp-list-table td { border-color: var(--aurora-border); } html.aurora-dark.aurora-ready #wpbody-content .wp-list-table thead th, html.aurora-dark.aurora-ready #wpbody-content .wp-list-table tfoot th, html.aurora-dark.aurora-ready #wpbody-content .wp-list-table thead th a, html.aurora-dark.aurora-ready #wpbody-content .wp-list-table tfoot th a { color: var(--aurora-text); } html.aurora-dark.aurora-ready #wpbody-content .wp-list-table.striped > tbody > :nth-child(odd), html.aurora-dark.aurora-ready #wpbody-content .striped > tbody > :nth-child(odd) { background: var(--aurora-bg-subtle); } html.aurora-dark.aurora-ready #wpbody-content .wp-list-table tbody tr:hover { background: var(--aurora-accent-soft); } html.aurora-dark.aurora-ready #wpbody-content .row-actions { color: var(--aurora-text-muted); } /* Form fields ----------------------------------------------------------- */ html.aurora-dark.aurora-ready #wpbody-content input[type='text'], html.aurora-dark.aurora-ready #wpbody-content input[type='search'], html.aurora-dark.aurora-ready #wpbody-content input[type='email'], html.aurora-dark.aurora-ready #wpbody-content input[type='url'], html.aurora-dark.aurora-ready #wpbody-content input[type='password'], html.aurora-dark.aurora-ready #wpbody-content input[type='number'], html.aurora-dark.aurora-ready #wpbody-content input[type='tel'], html.aurora-dark.aurora-ready #wpbody-content input[type='date'], html.aurora-dark.aurora-ready #wpbody-content textarea, html.aurora-dark.aurora-ready #wpbody-content select { background: var(--aurora-bg-subtle); border-color: var(--aurora-border); color: var(--aurora-text); } html.aurora-dark.aurora-ready #wpbody-content input::placeholder, html.aurora-dark.aurora-ready #wpbody-content textarea::placeholder { color: var(--aurora-text-muted); } html.aurora-dark.aurora-ready #wpbody-content input[type='text']:focus, html.aurora-dark.aurora-ready #wpbody-content input[type='search']:focus, html.aurora-dark.aurora-ready #wpbody-content textarea:focus, html.aurora-dark.aurora-ready #wpbody-content select:focus { border-color: var(--aurora-accent); box-shadow: 0 0 0 1px var(--aurora-accent); outline: none; } /* Buttons --------------------------------------------------------------- */ html.aurora-dark.aurora-ready #wpbody-content .button, html.aurora-dark.aurora-ready #wpbody-content .button-secondary { background: var(--aurora-bg-subtle); border-color: var(--aurora-border); color: var(--aurora-text); } html.aurora-dark.aurora-ready #wpbody-content .button:hover, html.aurora-dark.aurora-ready #wpbody-content .button-secondary:hover { background: var(--aurora-border); border-color: var(--aurora-text-muted); color: var(--aurora-text); } html.aurora-dark.aurora-ready #wpbody-content .button-primary { background: var(--aurora-accent); border-color: var(--aurora-accent); color: #fff; text-shadow: none; box-shadow: none; } html.aurora-dark.aurora-ready #wpbody-content .button-primary:hover { filter: brightness(1.1); } /* Nav tabs -------------------------------------------------------------- */ html.aurora-dark.aurora-ready #wpbody-content .nav-tab-wrapper, html.aurora-dark.aurora-ready #wpbody-content .wp-filter { background: var(--aurora-card-bg); border-color: var(--aurora-border); } html.aurora-dark.aurora-ready #wpbody-content .wp-filter .filter-links a { color: var(--aurora-accent); } html.aurora-dark.aurora-ready #wpbody-content .wp-filter .filter-links .current { color: var(--aurora-text); } html.aurora-dark.aurora-ready #wpbody-content .wp-filter .search-form input[type='search'] { background: var(--aurora-bg-subtle); border-color: var(--aurora-border); color: var(--aurora-text); } html.aurora-dark.aurora-ready #wpbody-content .nav-tab { background: var(--aurora-bg-subtle); border-color: var(--aurora-border); color: var(--aurora-text-muted); } html.aurora-dark.aurora-ready #wpbody-content .nav-tab-active { background: var(--aurora-card-bg); border-bottom-color: var(--aurora-card-bg); color: var(--aurora-text); } /* Notices --------------------------------------------------------------- */ html.aurora-dark.aurora-ready #wpbody-content .notice, html.aurora-dark.aurora-ready #wpbody-content div.updated, html.aurora-dark.aurora-ready #wpbody-content div.error { background: var(--aurora-card-bg); color: var(--aurora-text); } /* Code ------------------------------------------------------------------ */ html.aurora-dark.aurora-ready #wpbody-content code, html.aurora-dark.aurora-ready #wpbody-content kbd, html.aurora-dark.aurora-ready #wpbody-content pre { background: var(--aurora-bg-subtle); color: var(--aurora-text); } /* Tablenav / pagination / filters --------------------------------------- */ html.aurora-dark.aurora-ready #wpbody-content .tablenav, html.aurora-dark.aurora-ready #wpbody-content .subsubsub, html.aurora-dark.aurora-ready #wpbody-content .tablenav .displaying-num { color: var(--aurora-text-muted); } html.aurora-dark.aurora-ready #wpbody-content .tablenav-pages a, html.aurora-dark.aurora-ready #wpbody-content .pagination-links a { background: var(--aurora-bg-subtle); border-color: var(--aurora-border); color: var(--aurora-text); } /* Screen meta (Help / Screen Options pull-down tabs) -------------------- */ html.aurora-dark.aurora-ready #screen-meta, html.aurora-dark.aurora-ready #screen-meta-links .show-settings, html.aurora-dark.aurora-ready #contextual-help-wrap, html.aurora-dark.aurora-ready #screen-options-wrap { background: var(--aurora-card-bg); border-color: var(--aurora-border); color: var(--aurora-text); } /* Form tables (settings pages) ----------------------------------------- */ html.aurora-dark.aurora-ready #wpbody-content .form-table th, html.aurora-dark.aurora-ready #wpbody-content .form-table td { border-color: var(--aurora-border); color: var(--aurora-text); } /* Horizontal rules & misc dividers ------------------------------------- */ html.aurora-dark.aurora-ready #wpbody-content hr, html.aurora-dark.aurora-ready #wpbody-content .wp-header-end { border-color: var(--aurora-border); } /* --------------------------------------------------------------------------- * WordPress Updates page (update-core.php) — boxed "card" layout. * native-enhance.js wraps each section (Current version, Plugins, Themes) * into a .aurora-native-card div; these rules give those cards the same * surface look as the dashboard cards, plus a clean title and accent button. * Scoped to the updates page body class so it can't affect other screens. * ------------------------------------------------------------------------ */ html.aurora-dark.aurora-ready body.update-core-php #wpbody-content .wrap > h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; } html.aurora-dark.aurora-ready body.update-core-php #wpbody-content .wrap > p { color: var(--aurora-text-muted); font-size: 0.875rem; margin: 0 0 20px; } html.aurora-dark.aurora-ready body.update-core-php #wpbody-content .aurora-native-card { background: var(--aurora-card-bg); border: 1px solid var(--aurora-card-border); border-radius: 20px; padding: 20px; margin-bottom: 16px; } html.aurora-dark.aurora-ready body.update-core-php #wpbody-content .aurora-native-card h2 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 18px; color: var(--aurora-text); border: 0; padding-top: 0; } html.aurora-dark.aurora-ready body.update-core-php #wpbody-content .aurora-native-card h2.response { font-size: 1.15rem; } html.aurora-dark.aurora-ready body.update-core-php #wpbody-content .aurora-native-card .button { background: transparent; border: 1px solid var(--aurora-accent); color: var(--aurora-accent); border-radius: 8px; padding: 7px 18px; font-weight: 500; height: auto; box-shadow: none; text-shadow: none; } html.aurora-dark.aurora-ready body.update-core-php #wpbody-content .aurora-native-card .button:hover { background: var(--aurora-accent-soft); } /* --------------------------------------------------------------------------- * Modals & popups (media library, plugin/theme install details) — these are * Backbone/thickbox views appended to , outside #wpbody-content, so * every rule above misses them entirely. Scoped to html.aurora-dark only * (no #wpbody-content ancestor requirement) since that's the only anchor * available at body level. * ------------------------------------------------------------------------ */ html.aurora-dark.aurora-ready .media-modal, html.aurora-dark.aurora-ready .media-frame, html.aurora-dark.aurora-ready .media-frame-title, html.aurora-dark.aurora-ready .media-frame-router, html.aurora-dark.aurora-ready .media-frame-content, html.aurora-dark.aurora-ready .media-frame-toolbar, html.aurora-dark.aurora-ready .media-sidebar, html.aurora-dark.aurora-ready #TB_window, html.aurora-dark.aurora-ready #TB_ajaxContent, html.aurora-dark.aurora-ready .plugin-details-modal, html.aurora-dark.aurora-ready .plugin-install-php .plugin-card { background: var(--aurora-card-bg); color: var(--aurora-text); border-color: var(--aurora-card-border); } html.aurora-dark.aurora-ready .media-modal h1, html.aurora-dark.aurora-ready .media-modal h2, html.aurora-dark.aurora-ready .media-modal h3, html.aurora-dark.aurora-ready .media-modal label, html.aurora-dark.aurora-ready .media-frame-title h1, html.aurora-dark.aurora-ready #TB_ajaxContent, html.aurora-dark.aurora-ready #TB_ajaxContent p, html.aurora-dark.aurora-ready #TB_ajaxContent h1, html.aurora-dark.aurora-ready .plugin-card-top, html.aurora-dark.aurora-ready .plugin-card .name, html.aurora-dark.aurora-ready .plugin-card .desc { color: var(--aurora-text); } html.aurora-dark.aurora-ready .media-frame-menu, html.aurora-dark.aurora-ready .media-menu, html.aurora-dark.aurora-ready .attachments-browser .media-toolbar, html.aurora-dark.aurora-ready .media-sidebar, html.aurora-dark.aurora-ready .plugin-card-bottom { background: var(--aurora-bg-subtle); border-color: var(--aurora-border); } html.aurora-dark.aurora-ready .attachments-browser .attachments, html.aurora-dark.aurora-ready .media-frame-content { background: var(--aurora-app-bg-solid); } html.aurora-dark.aurora-ready .media-modal input, html.aurora-dark.aurora-ready .media-modal textarea, html.aurora-dark.aurora-ready .media-modal select, html.aurora-dark.aurora-ready #TB_ajaxContent input, html.aurora-dark.aurora-ready #TB_ajaxContent textarea, html.aurora-dark.aurora-ready #TB_ajaxContent select { background: var(--aurora-bg-subtle); border-color: var(--aurora-border); color: var(--aurora-text); } html.aurora-dark.aurora-ready .media-modal-backdrop, html.aurora-dark.aurora-ready #TB_overlay { background: rgba(0, 0, 0, 0.7); } /* Plugin/theme card grids on plugins.php / plugin-install.php / themes.php */ html.aurora-dark.aurora-ready #wpbody-content .theme-browser .theme, html.aurora-dark.aurora-ready #wpbody-content .plugin-card { background: var(--aurora-card-bg); border-color: var(--aurora-card-border); color: var(--aurora-text); } html.aurora-dark.aurora-ready #wpbody-content .theme-browser .theme .theme-name, html.aurora-dark.aurora-ready #wpbody-content .theme-browser .theme .theme-actions { background: var(--aurora-card-bg); color: var(--aurora-text); border-color: var(--aurora-card-border); }