Initial commit: Aurora Admin plugin
This commit is contained in:
Kris Parish
@@ -0,0 +1,282 @@
|
||||
/*
|
||||
* 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 {
|
||||
border-color: var(--aurora-border);
|
||||
}
|
||||
|
||||
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: 16px;
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
html.aurora-dark.aurora-ready body.update-core-php #wpbody-content .aurora-native-card h2 {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
margin: 4px 0 8px;
|
||||
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);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* Progressive enhancement for native WordPress admin pages that benefit from
|
||||
* Aurora's boxed "card" layout but ship as flat sibling markup.
|
||||
*
|
||||
* Currently targets the Updates page (update-core.php): it groups each
|
||||
* section (Current version, Plugins, Themes) into a .aurora-native-card div
|
||||
* so the dark stylesheet can give them the same surface as the dashboard
|
||||
* cards. Purely visual and reversible — no native behaviour is altered.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function enhanceUpdates() {
|
||||
var wrap = document.querySelector('#wpbody-content .wrap');
|
||||
if (!wrap || wrap.querySelector('.aurora-native-card')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var children = Array.prototype.slice.call(wrap.children);
|
||||
|
||||
// A new card starts at each major section heading. The "response" h2
|
||||
// ("You have the latest version") belongs inside the version section,
|
||||
// so it is not treated as a boundary.
|
||||
var isBoundary = function (el) {
|
||||
return el.tagName === 'H2' && !el.classList.contains('response');
|
||||
};
|
||||
|
||||
var groups = [];
|
||||
var current = null;
|
||||
|
||||
children.forEach(function (el) {
|
||||
if (el.tagName === 'H1') {
|
||||
return; // page title stays outside the cards
|
||||
}
|
||||
if (!current && !isBoundary(el)) {
|
||||
return; // intro paragraph(s) before the first section stay in place
|
||||
}
|
||||
if (isBoundary(el)) {
|
||||
current = [];
|
||||
groups.push(current);
|
||||
}
|
||||
if (current) {
|
||||
current.push(el);
|
||||
}
|
||||
});
|
||||
|
||||
groups.forEach(function (group) {
|
||||
if (!group.length) {
|
||||
return;
|
||||
}
|
||||
var card = document.createElement('div');
|
||||
card.className = 'aurora-native-card';
|
||||
group[0].parentNode.insertBefore(card, group[0]);
|
||||
group.forEach(function (el) {
|
||||
card.appendChild(el);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function run() {
|
||||
if (document.body.classList.contains('update-core-php')) {
|
||||
enhanceUpdates();
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', run);
|
||||
} else {
|
||||
run();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user