R3ap3r/aurora-wordpress-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add theme presets, gradient backgrounds, and macOS-style window chrome

Browse Source 
Replaces the old light/dark toggle with 10 fixed color themes (plus
Black & Grey and White) that drive a coordinated gradient palette across
the whole admin UI, a Google Fonts picker, and a native-page dark-mode
stylesheet that now covers modals and plugin/theme card grids. Fixes
several background/gradient seams where the sidebar, toolbar, and content
frame were each painting their own independent copy of the page gradient
instead of sharing one continuous plane.

Also adds a macOS-style traffic-light title bar to every page (close,
minimize, maximize) and a persistent bottom taskbar so a minimized page
can be restored from anywhere, plus a Plugins management page.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
nixpanel
2026-07-03 11:49:15 -05:00
co-authored by Claude Sonnet 5
parent db07e21f9e
commit 4a547d2c50
26 changed files with 1816 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/assets/native-dark.css
+101 -4
View File
@@ -163,9 +163,24 @@ html.aurora-dark.aurora-ready #wpbody-content .button-primary:hover {
/* 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);
@@ -251,14 +266,14 @@ html.aurora-dark.aurora-ready body.update-core-php #wpbody-content .wrap > p {
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;
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.05rem;
font-size: 1.0625rem;
font-weight: 600;
margin: 4px 0 8px;
margin: 0 0 18px;
color: var(--aurora-text);
border: 0;
padding-top: 0;
@@ -280,3 +295,85 @@ html.aurora-dark.aurora-ready body.update-core-php #wpbody-content .aurora-nativ
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 <body>, 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);
}