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.*
|
.env.*
|
||||||
!.env.example
|
!.env.example
|
||||||
|
.prod.env
|
||||||
scripts/env/dev.env
|
scripts/env/dev.env
|
||||||
docker-compose.yml
|
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;
|
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
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