kato/warpbox-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): style admin shell for retro theme and add prod docker config

Browse Source 
- Update the retro theme CSS to style the dashboard, account, and admin pages with a classic Windows 98 aesthetic (silver sidebar, bevelled tabs, sunken metric cards).
- Exclude sidebar links and tabs from default retro link styles to ensure readability.
- Add `docker-compose-prod.yml` for production deployments.
- Add `.prod.env` to `.gitignore`.
This commit is contained in:
Daniel Legt
2026-05-31 21:03:00 +03:00
parent 42449b3322
commit 2d04a42736
3 changed files with 134 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
backend/static/css/16-retro.css
View File

@@ -150,17 +150,18 @@
box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}
/* Links: classic blue, underlined, purple when visited. */
:root[data-theme="retro"] a:not(.button):not(.brand) {
/* Links: classic blue, underlined, purple when visited. Sidebar links and tabs
are styled as their own Win98 controls below, so they're excluded here. */
:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab) {
color: #0000ee;
text-decoration: underline;
}
:root[data-theme="retro"] a:not(.button):not(.brand):visited {
:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab):visited {
color: #551a8b;
}
:root[data-theme="retro"] a:not(.button):not(.brand):hover {
:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab):hover {
color: #ee0000;
}
@@ -440,3 +441,109 @@
display: none;
}
}
/* ------------------------------------------------------------------------- */
/* App / admin shell (dashboard, account, admin pages) */
/* These use dark revamp tokens by default, which are unreadable on the black */
/* retro desktop. Re-skin them as Win98 chrome: a raised silver sidebar with */
/* solid links, light page headers on the desktop, and bevelled stat cards. */
/* ------------------------------------------------------------------------- */
/* Sidebar = raised silver panel. */
:root[data-theme="retro"] .app-sidebar,
:root[data-theme="retro"] .admin-shell .app-sidebar {
background: #c0c0c0;
border: 1px solid #000000;
box-shadow: var(--shadow);
}
:root[data-theme="retro"] .sidebar-link {
color: #000000;
border: 1px solid transparent;
font-weight: 700;
}
:root[data-theme="retro"] .sidebar-link:hover,
:root[data-theme="retro"] .sidebar-link.is-active,
:root[data-theme="retro"] .admin-shell .sidebar-link.is-active {
background: linear-gradient(to right, #000078, 80%, #0f80cd);
color: #ffffff;
border-color: #000000;
}
:root[data-theme="retro"] .sidebar-sep {
background: #808080;
height: 2px;
box-shadow: 0 1px 0 #ffffff;
}
/* Page header sits on the black desktop: light kicker, plain light title
(not a floating title bar), light subtitle. */
:root[data-theme="retro"] .admin-header .kicker {
color: #ffd966;
}
:root[data-theme="retro"] .admin-header .muted-copy {
color: #cfd8ff;
}
:root[data-theme="retro"] .admin-header h1 {
margin: 0;
padding: 0;
display: block;
background: none;
color: #ffffff;
}
:root[data-theme="retro"] .admin-header h1::after {
content: none;
}
/* Collection / nav tabs become small bevelled buttons. */
:root[data-theme="retro"] .tab {
background: #c0c0c0;
color: #000000;
border: 1px solid #000000;
font-weight: 700;
box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}
:root[data-theme="retro"] .tab:hover {
background: #d4d0c8;
color: #000000;
}
:root[data-theme="retro"] .tab.is-active {
background: linear-gradient(to right, #000078, 80%, #0f80cd);
color: #ffffff;
}
/* Metric cards = sunken white stat boxes with crisp black numbers. */
:root[data-theme="retro"] .metric-card {
background: #ffffff;
border: 1px solid #000000;
box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}
:root[data-theme="retro"] .metric-card span {
color: #404040;
}
:root[data-theme="retro"] .metric-card strong {
color: #000000;
}
/* The "+ Collection" popover becomes a small floating window. */
:root[data-theme="retro"] .new-collection-body {
background: #c0c0c0;
border: 1px solid #000000;
box-shadow: var(--shadow);
color: #000000;
}
/* The storage inline edit form panel. */
:root[data-theme="retro"] .storage-edit-form {
background: #c0c0c0;
border: 1px solid #000000;
box-shadow: var(--shadow);
}