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

- 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:
2026-05-31 21:03:00 +03:00
parent 42449b3322
commit 2d04a42736
3 changed files with 134 additions and 4 deletions

1
.gitignore vendored
View File

@@ -12,5 +12,6 @@ backend/static/uploads/*
.env .env
.env.* .env.*
!.env.example !.env.example
.prod.env
scripts/env/dev.env scripts/env/dev.env
docker-compose.yml docker-compose.yml

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; 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. */ /* Links: classic blue, underlined, purple when visited. Sidebar links and tabs
:root[data-theme="retro"] a:not(.button):not(.brand) { 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; color: #0000ee;
text-decoration: underline; 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; 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; color: #ee0000;
} }
@@ -440,3 +441,109 @@
display: none; 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);
}

22
docker-compose-prod.yml Normal file
View File

@@ -0,0 +1,22 @@
services:
app:
image: tea.chunkbyte.com/kato/warpbox-dev:latest
container_name: warpbox-dev
env_file:
- .prod.env
environment:
WARPBOX_ADDR: ":8080"
WARPBOX_DATA_DIR: /data
WARPBOX_STATIC_DIR: /app/static
WARPBOX_TEMPLATE_DIR: /app/templates
volumes:
- ./data:/data:Z
ports:
- "6070:8080"
restart: unless-stopped
healthcheck:
test: ["CMD-SHELL", "wget -qO- http://127.0.0.1:8080/health >/dev/null || exit 1"]
interval: 30s
timeout: 3s
start_period: 10s
retries: 3