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:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -12,5 +12,6 @@ backend/static/uploads/*
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
.prod.env
|
||||
scripts/env/dev.env
|
||||
docker-compose.yml
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
22
docker-compose-prod.yml
Normal file
22
docker-compose-prod.yml
Normal 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
|
||||
Reference in New Issue
Block a user