Add theme presets, gradient backgrounds, and macOS-style window chrome
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
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
db07e21f9e
commit
4a547d2c50
@@ -14,6 +14,13 @@
|
||||
:root {
|
||||
--aurora-sidebar-w: 264px;
|
||||
--aurora-toolbar-h: 56px;
|
||||
/* SiteShell.vue's taskbar, shown only while a window is minimized
|
||||
(html.aurora-has-taskbar toggles the bottom space reserved for it). */
|
||||
--aurora-taskbar-h: 56px;
|
||||
/* Space between the sidebar card and the browser's left/top/bottom
|
||||
edges (Sidebar.vue) — the toolbar and #wpcontent offsets below add
|
||||
the same amount so nothing overlaps the floating sidebar. */
|
||||
--aurora-sidebar-gap: 16px;
|
||||
/* Breathing room between page content and the right browser edge. */
|
||||
--aurora-gutter-r: 44px;
|
||||
|
||||
@@ -22,8 +29,15 @@
|
||||
|
||||
/* Light theme */
|
||||
--aurora-app-bg: #fafafa; /* zinc-50 */
|
||||
/* Flat fallback for the handful of consumers that need a solid color
|
||||
(--aurora-app-bg itself may be a gradient once a theme preset applies). */
|
||||
--aurora-app-bg-solid: #fafafa;
|
||||
--aurora-bg: #ffffff; /* frame */
|
||||
--aurora-card-bg: #fafafa; /* zinc-50 */
|
||||
/* Dashboard cards specifically (AuroraCard.vue) — a step further from
|
||||
--aurora-frame-bg than --aurora-card-bg so they read as distinct
|
||||
surfaces against the Dashboard's own frame, not a near-identical tone. */
|
||||
--aurora-card-bg-deep: #f0f0f2;
|
||||
--aurora-bg-subtle: #f4f4f5; /* zinc-100 */
|
||||
--aurora-text: #18181b; /* zinc-900 */
|
||||
--aurora-text-muted: #71717a; /* zinc-500 */
|
||||
@@ -34,6 +48,10 @@
|
||||
--aurora-accent: rgb(71 114 250);
|
||||
--aurora-accent-soft: rgb(71 114 250 / 0.1);
|
||||
--aurora-accent-text: #ffffff;
|
||||
|
||||
/* Overridden by the font-picker setting (see SiteShell.vue::applyFontFamily);
|
||||
this is the fallback when no Google Font has been chosen. */
|
||||
--aurora-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* Minified menu: the toolbar's collapse button toggles this class; every
|
||||
@@ -46,8 +64,10 @@ html.aurora-collapsed {
|
||||
html.aurora-dark {
|
||||
/* Dark theme — the immersive near-black look of the original */
|
||||
--aurora-app-bg: #09090b; /* zinc-950 */
|
||||
--aurora-app-bg-solid: #09090b;
|
||||
--aurora-bg: #18181b; /* zinc-900 frame */
|
||||
--aurora-card-bg: #1f1f23; /* slightly elevated */
|
||||
--aurora-card-bg-deep: #131316;
|
||||
--aurora-bg-subtle: #27272a; /* zinc-800 */
|
||||
--aurora-text: #f4f4f5; /* zinc-100 */
|
||||
--aurora-text-muted: #a1a1aa; /* zinc-400 */
|
||||
@@ -64,6 +84,14 @@ html.aurora-dark {
|
||||
html.aurora-ready,
|
||||
html.aurora-ready body {
|
||||
background: var(--aurora-app-bg);
|
||||
/* Fixed so the gradient stays pinned to the viewport instead of
|
||||
scrolling with document height — the sidebar/toolbar are also
|
||||
position:fixed and paint no background of their own (see
|
||||
Sidebar.vue/Toolbar.vue), so this one gradient plane has to line up
|
||||
with them at every scroll position to read as a single unified
|
||||
background instead of a seam between "sidebar" and "page". */
|
||||
background-attachment: fixed;
|
||||
font-family: var(--aurora-font-family);
|
||||
}
|
||||
|
||||
/* !important here defeats WordPress's own responsive #wpcontent margin
|
||||
@@ -73,12 +101,31 @@ html.aurora-ready body {
|
||||
rather than on #wpbody, so content rendered above #wpbody — like the
|
||||
takeover dashboard — also clears the fixed toolbar. */
|
||||
html.aurora-ready #wpcontent {
|
||||
margin-left: var(--aurora-sidebar-w) !important;
|
||||
margin-left: calc(var(--aurora-sidebar-w) + var(--aurora-sidebar-gap) * 2) !important;
|
||||
padding-left: 0 !important;
|
||||
padding-top: var(--aurora-toolbar-h);
|
||||
transition: margin-left 0.2s ease;
|
||||
}
|
||||
|
||||
/* The block editor (Gutenberg) doesn't live inside #wpcontent's normal
|
||||
box model — it renders its own skeleton as position:fixed, inset:0,
|
||||
completely independent of the margin-left above. Left unchecked it
|
||||
spans the full viewport and renders underneath the (higher z-index)
|
||||
sidebar and toolbar. Inset it the same amount #wpcontent gets. */
|
||||
html.aurora-ready .interface-interface-skeleton {
|
||||
left: calc(var(--aurora-sidebar-w) + var(--aurora-sidebar-gap) * 2) !important;
|
||||
top: var(--aurora-toolbar-h) !important;
|
||||
transition: left 0.2s ease;
|
||||
}
|
||||
|
||||
/* Aurora's own toolbar is skipped on the block editor (SiteShell.vue) —
|
||||
its own toolbar sits flush against the top instead, so no toolbar
|
||||
height needs to be reserved here; just the same top gap the sidebar
|
||||
gets, so the two line up. */
|
||||
html.aurora-ready.aurora-no-toolbar .interface-interface-skeleton {
|
||||
top: var(--aurora-sidebar-gap) !important;
|
||||
}
|
||||
|
||||
html.aurora-ready #wpbody-content {
|
||||
background: var(--aurora-frame-bg);
|
||||
color: var(--aurora-text);
|
||||
@@ -89,12 +136,111 @@ html.aurora-ready #wpbody-content {
|
||||
padding: 32px;
|
||||
min-height: calc(100vh - var(--aurora-toolbar-h) - 40px);
|
||||
box-sizing: border-box;
|
||||
/* WP core sets #wpbody-content { float: left; width: 100% }, which (with
|
||||
box-sizing left alone) ignores the margin above and overflows past the
|
||||
right edge by margin-left + margin-right. Force it back to shrink-to-fit
|
||||
so the margin is actually respected. */
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* SiteShell.vue's taskbar docks along the bottom edge only while a window
|
||||
is minimized — push content up by its height so pages stop above it
|
||||
instead of rendering underneath. */
|
||||
html.aurora-has-taskbar #wpbody-content {
|
||||
margin-bottom: calc(24px + var(--aurora-taskbar-h));
|
||||
}
|
||||
html.aurora-has-taskbar .aurora-dashboard-frame {
|
||||
margin-bottom: calc(24px + var(--aurora-taskbar-h));
|
||||
}
|
||||
|
||||
/* macOS-style title bar (windowChrome.js). Most pages get it injected as
|
||||
the first child of #wpbody-content — negative margins cancel the 32px
|
||||
padding above so it spans edge-to-edge like a real window title bar. */
|
||||
.aurora-winbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
#wpbody-content > .aurora-winbar {
|
||||
margin: -32px -32px 20px -32px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--aurora-frame-border);
|
||||
border-top-left-radius: var(--aurora-radius-lg);
|
||||
border-top-right-radius: var(--aurora-radius-lg);
|
||||
}
|
||||
.aurora-winbar__dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.aurora-winbar__dot:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
.aurora-winbar__dot--close {
|
||||
background: #ff5f57;
|
||||
}
|
||||
.aurora-winbar__dot--minimize {
|
||||
background: #febc2e;
|
||||
}
|
||||
.aurora-winbar__dot--maximize {
|
||||
background: #28c840;
|
||||
}
|
||||
|
||||
/* The Dashboard bypasses #wpbody-content (DashboardTakeover.php renders
|
||||
it into a separate sibling — see windowChrome.js), so it never got the
|
||||
card frame every other page has. windowChrome.js wraps the bar + the
|
||||
dashboard's mount point in this div to give it the same treatment. */
|
||||
.aurora-dashboard-frame {
|
||||
background: var(--aurora-frame-bg);
|
||||
border: 1px solid var(--aurora-frame-border);
|
||||
border-radius: var(--aurora-radius-lg);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
margin: 16px var(--aurora-gutter-r) 24px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.aurora-dashboard-frame > .aurora-winbar {
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--aurora-frame-border);
|
||||
border-top-left-radius: var(--aurora-radius-lg);
|
||||
border-top-right-radius: var(--aurora-radius-lg);
|
||||
}
|
||||
|
||||
/* Yellow dot: on the Dashboard itself there's nowhere further "home" to
|
||||
send it, so minimize just collapses the frame down to the title bar in
|
||||
place — everywhere else, minimize navigates to the dashboard instead
|
||||
(see windowChrome.js) and SiteShell.vue's taskbar offers a way back. */
|
||||
html.aurora-minimized #aurora-admin-dashboard-root {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Green dot: hide Aurora's own chrome (sidebar/toolbar) and let the
|
||||
content reclaim the full browser window, like restoring a real OS
|
||||
window to fullscreen. */
|
||||
html.aurora-maximized .sidebar,
|
||||
html.aurora-maximized .toolbar {
|
||||
display: none !important;
|
||||
}
|
||||
html.aurora-ready.aurora-maximized #wpcontent {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
html.aurora-ready.aurora-maximized .interface-interface-skeleton {
|
||||
left: 0 !important;
|
||||
}
|
||||
html.aurora-maximized .aurora-taskbar {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
/* The settings page renders its own two boxed panels, so drop the outer
|
||||
content frame there — leaving just those panels on the dark backdrop. */
|
||||
content frame there — leaving just those panels on the dark backdrop.
|
||||
No background here: #wpbody-content is inset from the sidebar/gutter,
|
||||
not the full viewport, so painting var(--aurora-app-bg) on it computes
|
||||
its own independent (and visibly mismatched) gradient instance instead
|
||||
of sharing the one fixed gradient plane painted on html/body. */
|
||||
html.aurora-ready body.toplevel_page_aurora-admin #wpbody-content {
|
||||
background: var(--aurora-app-bg);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
Reference in New Issue
Block a user