NoRoutes/vibeproxy
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
vibeproxy/internal/web/static/css/app.css
T
owenandClaude Sonnet 5 affdbfaa41 Restyle admin UI to dark theme, fix Docker /data volume permissions 
- Rework the admin UI (topbar, sidebar, cards, tables, badges, stat
  tiles) into a dark theme with a light/dark toggle, matching the
  visual style requested for the project.
- Fix Dockerfile: chown /data to the distroless nonroot uid/gid before
  the VOLUME declaration so a freshly created named volume is seeded
  with writable permissions instead of root:root (was causing
  "unable to open database file" on first run).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QTXFrNP1imCW7jtfL5SZrw
2026-08-17 10:37:51 -05:00

466 lines
8.6 KiB
CSS
Raw Permalink Blame History

:root,
[data-bs-theme="dark"] {
--vp-bg: #0a0d12;
--vp-surface: #11151c;
--vp-surface-2: #161b24;
--vp-border: #232833;
--vp-text: #e6e9ef;
--vp-text-muted: #8b93a3;
--vp-text-faint: #5c6577;
--vp-blue: #3b82f6;
--vp-blue-dark: #1d4ed8;
--vp-blue-light: #60a5fa;
--vp-green: #22c55e;
--vp-red: #ef4444;
--vp-amber: #f59e0b;
--vp-topbar-h: 56px;
--vp-sidebar-w: 240px;
}
[data-bs-theme="light"] {
--vp-bg: #f3f5f8;
--vp-surface: #ffffff;
--vp-surface-2: #f0f2f6;
--vp-border: #e0e4ea;
--vp-text: #1a1f29;
--vp-text-muted: #5c6577;
--vp-text-faint: #8b93a3;
--vp-blue: #2563eb;
--vp-blue-dark: #1d4ed8;
--vp-blue-light: #3b82f6;
--vp-green: #16a34a;
--vp-red: #dc2626;
--vp-amber: #d97706;
}
body {
background-color: var(--vp-bg);
color: var(--vp-text);
}
a {
color: var(--vp-blue-light);
}
/* ---------- Top bar ---------- */
.vp-topbar {
height: var(--vp-topbar-h);
padding: 0 1.25rem;
background: linear-gradient(90deg, var(--vp-blue-dark) 0%, var(--vp-blue) 55%, var(--vp-blue-light) 100%);
position: sticky;
top: 0;
z-index: 1030;
}
.vp-brand {
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 1.15rem;
letter-spacing: -0.01em;
}
.vp-brand i {
font-size: 1.3rem;
}
.vp-icon-btn {
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
border-radius: 0.5rem;
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.vp-icon-btn:hover {
background: rgba(255, 255, 255, 0.24);
color: #fff;
}
.vp-user-badge {
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
border-radius: 0.5rem;
padding: 0.4rem 0.85rem;
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
/* ---------- Shell / sidebar ---------- */
.vp-shell {
display: flex;
min-height: calc(100vh - var(--vp-topbar-h));
}
.vp-sidebar {
width: var(--vp-sidebar-w);
flex-shrink: 0;
background-color: var(--vp-bg);
border-right: 1px solid var(--vp-border);
position: sticky;
top: var(--vp-topbar-h);
height: calc(100vh - var(--vp-topbar-h));
}
.vp-nav {
padding: 1rem 0.75rem;
flex: 1;
overflow-y: auto;
}
.vp-nav-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--vp-text-faint);
text-transform: uppercase;
padding: 1rem 0.6rem 0.35rem;
}
.vp-nav .nav-link {
color: var(--vp-text-muted);
border-radius: 0.4rem;
padding: 0.5rem 0.7rem;
margin-bottom: 0.1rem;
font-size: 0.92rem;
display: flex;
align-items: center;
}
.vp-nav .nav-link i {
width: 1.4rem;
font-size: 1rem;
text-align: center;
margin-right: 0.55rem;
color: inherit;
}
.vp-nav .nav-link:hover {
background-color: var(--vp-surface-2);
color: var(--vp-text);
}
.vp-nav .nav-link.active {
background-color: rgba(59, 130, 246, 0.16);
color: var(--vp-blue-light);
font-weight: 600;
}
.vp-sidebar-footer {
padding: 0.85rem 1.25rem;
border-top: 1px solid var(--vp-border);
color: var(--vp-text-faint) !important;
}
/* ---------- Main content ---------- */
.vp-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.vp-page-header {
padding: 1.25rem 1.75rem 0;
}
.vp-page-header h1 {
font-weight: 700;
}
.vp-content {
padding: 1.25rem 1.75rem 2rem;
flex: 1;
}
/* ---------- Cards / tables ---------- */
.card {
background-color: var(--vp-surface);
border: 1px solid var(--vp-border);
border-radius: 0.65rem;
}
.card-header {
background-color: transparent;
border-bottom: 1px solid var(--vp-border);
font-weight: 600;
color: var(--vp-text);
}
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--vp-text);
--bs-table-border-color: var(--vp-border);
--bs-table-hover-bg: var(--vp-surface-2);
--bs-table-hover-color: var(--vp-text);
margin-bottom: 0;
}
.table thead th {
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--vp-text-faint);
border-bottom: 1px solid var(--vp-border);
background-color: transparent;
}
.table-light,
.table > :not(caption) > * > * {
background-color: transparent;
}
/* ---------- Forms ---------- */
.form-control,
.form-select {
background-color: var(--vp-surface-2);
border: 1px solid var(--vp-border);
color: var(--vp-text);
}
.form-control:focus,
.form-select:focus {
background-color: var(--vp-surface-2);
border-color: var(--vp-blue);
color: var(--vp-text);
box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.2);
}
.form-control::placeholder {
color: var(--vp-text-faint);
}
.form-label {
color: var(--vp-text-muted);
font-size: 0.85rem;
font-weight: 600;
}
.input-icon {
position: relative;
}
.input-icon i {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--vp-text-faint);
}
.input-icon .form-control {
padding-left: 2.25rem;
}
/* ---------- Buttons ---------- */
.btn-primary {
background-color: var(--vp-blue);
border-color: var(--vp-blue);
}
.btn-primary:hover {
background-color: var(--vp-blue-dark);
border-color: var(--vp-blue-dark);
}
.btn-outline-primary {
color: var(--vp-blue-light);
border-color: var(--vp-blue);
}
.btn-outline-primary:hover {
background-color: var(--vp-blue);
border-color: var(--vp-blue);
}
.btn-outline-secondary {
color: var(--vp-text-muted);
border-color: var(--vp-border);
}
.btn-outline-secondary:hover {
background-color: var(--vp-surface-2);
color: var(--vp-text);
border-color: var(--vp-border);
}
.btn-outline-danger {
color: #f87171;
border-color: #7f1d1d;
}
.btn-outline-danger:hover {
background-color: var(--vp-red);
border-color: var(--vp-red);
}
/* ---------- Badges ---------- */
.badge.text-bg-success {
background-color: var(--vp-green) !important;
color: #062b13;
}
.badge.text-bg-danger {
background-color: var(--vp-red) !important;
}
.badge.text-bg-secondary {
background-color: var(--vp-surface-2) !important;
color: var(--vp-text-muted) !important;
border: 1px solid var(--vp-border);
}
.badge.text-bg-info {
background-color: rgba(59, 130, 246, 0.18) !important;
color: var(--vp-blue-light) !important;
}
.badge.text-bg-warning {
background-color: rgba(245, 158, 11, 0.18) !important;
color: var(--vp-amber) !important;
}
.badge.text-bg-light {
background-color: var(--vp-surface-2) !important;
color: var(--vp-text-muted) !important;
border: 1px solid var(--vp-border) !important;
}
/* ---------- Stat cards ---------- */
.stat-card {
border: 1px solid var(--vp-border);
border-radius: 0.65rem;
background-color: var(--vp-surface);
}
.stat-card .card-body {
padding: 1.1rem 1.25rem;
}
.stat-card .stat-label {
text-transform: uppercase;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--vp-text-faint);
}
.stat-card .stat-icon {
color: var(--vp-text-faint);
font-size: 1.1rem;
}
.stat-card .stat-value {
font-size: 1.9rem;
font-weight: 700;
color: var(--vp-text);
line-height: 1.2;
margin-top: 0.15rem;
}
.stat-card .stat-sub {
color: var(--vp-text-faint);
font-size: 0.8rem;
margin-top: 0.15rem;
}
/* ---------- Modals ---------- */
.modal-content {
background-color: var(--vp-surface);
border: 1px solid var(--vp-border);
color: var(--vp-text);
}
.modal-header,
.modal-footer {
border-color: var(--vp-border);
}
/* ---------- Nav pills / tabs ---------- */
.nav-tabs {
border-bottom-color: var(--vp-border);
}
.nav-tabs .nav-link {
color: var(--vp-text-muted);
border: none;
border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link.active {
background: transparent;
color: var(--vp-blue-light);
border-bottom: 2px solid var(--vp-blue);
}
.nav-pills .nav-link {
color: var(--vp-text-muted);
}
.nav-pills .nav-link.active {
background-color: var(--vp-blue);
}
/* ---------- Misc ---------- */
.vp-chip-list {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.5rem;
}
.vp-chip {
font-weight: 500;
padding: 0.4rem 0.6rem;
background-color: var(--vp-surface-2) !important;
border: 1px solid var(--vp-border);
}
code, pre, code.vp-token {
color: var(--vp-blue-light);
word-break: break-all;
}
pre.bg-light {
background-color: var(--vp-surface-2) !important;
color: var(--vp-text);
border: 1px solid var(--vp-border);
}
.text-secondary {
color: var(--vp-text-muted) !important;
}
.pagination .page-link {
background-color: var(--vp-surface);
border-color: var(--vp-border);
color: var(--vp-text-muted);
}
.pagination .page-item.active .page-link {
background-color: var(--vp-blue);
border-color: var(--vp-blue);
color: #fff;
}
Reference in New Issue View Git Blame Copy Permalink