nixpanelandClaude Sonnet 5
4a547d2c50
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]>
256 lines
10 KiB
CSS
256 lines
10 KiB
CSS
/*
|
|
* The ONLY global stylesheet in the plugin. Every rule here either defines
|
|
* an --aurora-* theme variable or targets a specific WordPress structural ID
|
|
* to frame the native content. No element/tag resets, no utility classes —
|
|
* so it cannot leak onto or restyle WordPress's own page content the way the
|
|
* old plugin's Tailwind preflight did.
|
|
*
|
|
* Theme colors live here as plain CSS variables we fully control. Dark mode
|
|
* is a single class on <html> (.aurora-dark) that swaps the variable values.
|
|
*/
|
|
|
|
/* Palette carried over from the original plugin's design tokens: a zinc
|
|
neutral scale with a blue/indigo accent, large rounded surfaces. */
|
|
: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;
|
|
|
|
--aurora-radius: 14px;
|
|
--aurora-radius-lg: 24px;
|
|
|
|
/* 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 */
|
|
--aurora-border: #e4e4e7; /* zinc-200 */
|
|
--aurora-card-border: #ececef;
|
|
--aurora-frame-bg: #ffffff; /* native-page content panel */
|
|
--aurora-frame-border: #e0e0e3;
|
|
--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
|
|
layout offset derives from --aurora-sidebar-w, so this one override
|
|
reflows the toolbar and content automatically. */
|
|
html.aurora-collapsed {
|
|
--aurora-sidebar-w: 68px;
|
|
}
|
|
|
|
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 */
|
|
--aurora-border: #27272a; /* zinc-800 */
|
|
--aurora-card-border: #2e2e33;
|
|
--aurora-frame-bg: #1c1c20; /* slightly elevated panel */
|
|
--aurora-frame-border: #34343b;
|
|
--aurora-accent: rgb(125 158 255);
|
|
--aurora-accent-soft: rgb(125 158 255 / 0.14);
|
|
}
|
|
|
|
/* --- Framing: only applies once the Vue shell has signalled ready --- */
|
|
|
|
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
|
|
rules (.auto-fold / folded menu states live in media queries at equal
|
|
specificity). This is positioning the frame, not restyling content.
|
|
The toolbar clearance lives here (on #wpcontent, which holds everything)
|
|
rather than on #wpbody, so content rendered above #wpbody — like the
|
|
takeover dashboard — also clears the fixed toolbar. */
|
|
html.aurora-ready #wpcontent {
|
|
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);
|
|
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;
|
|
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.
|
|
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 {
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/*
|
|
* Native WordPress pages are fully dark-themed by a dedicated stylesheet
|
|
* (admin/assets/native-dark.css), enqueued only on native pages and gated
|
|
* on dark mode. It restyles WP's postboxes, forms, tables, buttons, etc.
|
|
* Keeping that large surface in one isolated, native-only file means it
|
|
* can never leak onto Aurora's own pages or affect light mode.
|
|
*/
|