From 5956ea36a873b815b7ea9900c4e236c56d8d0216 Mon Sep 17 00:00:00 2001 From: mr-forust Date: Sun, 26 Jul 2026 19:29:04 +0200 Subject: [PATCH] style(webui): match dashboard reference --- webui/index.html | 43 +++++- webui/style.css | 384 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 410 insertions(+), 17 deletions(-) diff --git a/webui/index.html b/webui/index.html index 9b3c7a0..8fda968 100644 --- a/webui/index.html +++ b/webui/index.html @@ -10,17 +10,43 @@
+
+
Dashboard
+
+ Service: Running Scraper: Idle +
+
diff --git a/webui/style.css b/webui/style.css index 6d0c4c0..11f23ec 100644 --- a/webui/style.css +++ b/webui/style.css @@ -1506,9 +1506,16 @@ input, background: var(--accent-soft); } .nav-link::before { - content: '—'; - width: 16px; - color: currentColor; + display: none; +} +.nav-icon { + display: inline-grid; + width: 18px; + place-items: center; + color: #c6c6c6; + font-size: 17px; + font-weight: 400; + line-height: 1; } .status-card, @@ -1548,15 +1555,56 @@ input, .content { max-width: none; - padding: 24px 28px 40px; + padding: 0 28px 40px; } .content::before { - content: ''; - display: block; - height: 43px; - margin: -24px -28px 24px; + display: none; +} +.dashboard-topbar { + display: flex; + min-height: 58px; + align-items: center; + justify-content: space-between; + gap: 20px; + margin: 0 -28px 20px; + padding: 0 28px; border-bottom: 1px solid var(--line); } +.dashboard-title, +.runtime-status { + display: inline-flex; + align-items: center; + gap: 12px; + color: #efefef; + font-size: 13px; + font-weight: 650; +} +.menu-icon { + color: #dedede; + font-size: 20px; + font-weight: 400; +} +.runtime-status { + color: #b8b8b8; + font-size: 12px; + font-weight: 500; +} +.runtime-status i { + width: 1px; + height: 17px; + background: #363636; +} +.runtime-dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: #e2e2e2; +} +.runtime-clock::before { + content: '◷'; + color: #e1e1e1; + font-size: 17px; +} .content-tabs, .account-tabs { gap: 0; @@ -1612,18 +1660,63 @@ input, margin-bottom: 14px; } .stat-panel { - min-height: 128px; - padding: 17px 18px; + position: relative; + min-height: 187px; + padding: 18px; +} +.stat-panel::after { + content: ''; + position: absolute; + right: 18px; + bottom: 65px; + left: 18px; + height: 1px; + background: #343434; +} +.stat-panel::before { + position: absolute; + top: 17px; + right: 18px; + display: grid; + width: 24px; + height: 24px; + place-items: center; + border: 1px solid #9c9c9c; + border-radius: 50%; + color: #e4e4e4; + font-size: 15px; + font-weight: 400; +} +.stat-panel:nth-child(1)::before { + content: '⌘'; +} +.stat-panel:nth-child(2)::before { + content: '⇩'; +} +.stat-panel:nth-child(3)::before { + content: '⇄'; +} +.stat-panel:nth-child(4)::before { + content: '◇'; } .stat-value { - margin-top: 20px; - font-size: 30px; + margin-top: 24px; + font-size: 28px; font-weight: 650; letter-spacing: -0.04em; } .stat-compact { font-size: 19px; } +.stat-panel .account-health-detail { + position: absolute; + right: 18px; + bottom: 17px; + left: 18px; +} +.stat-panel .section-title { + max-width: calc(100% - 34px); +} .panel-header, .dialog-header, .job-head { @@ -1828,3 +1921,270 @@ tbody tr:hover { white-space: nowrap; } } + +/* Dashboard reference fidelity pass */ +:root { + --sidebar-width: 244px; +} + +.app-shell { + grid-template-columns: var(--sidebar-width) minmax(0, 1fr); +} + +.sidebar { + width: var(--sidebar-width); + padding: 18px 12px; +} + +.brand-block { + min-height: 62px; + padding: 5px 9px 14px; +} + +.brand-block::before { + display: none; +} + +.brand-icon { + position: absolute; + top: 9px; + left: 9px; + width: 27px; + height: 27px; + fill: none; + stroke: #f1f1f1; + stroke-width: 1.65; + stroke-linecap: round; + stroke-linejoin: round; +} + +.brand-block h1 { + margin-left: 37px; + font-size: 15px; +} + +.brand-block .eyebrow { + margin-left: 37px; + color: #f5f5f5; + font-size: 15px; + font-weight: 650; +} + +.nav-links { + gap: 5px; + margin: 6px 0 0; +} + +.nav-link { + min-height: 45px; + gap: 12px; + padding: 0 13px; + color: #a1a1a1; + font-size: 13px; +} + +.nav-link.active { + border-color: transparent; + background: #202020; +} + +a.nav-link { + border-bottom-color: transparent; +} + +.nav-icon { + width: 20px; + height: 20px; + flex: 0 0 20px; + fill: none; + stroke: currentColor; + stroke-width: 1.7; + stroke-linecap: round; + stroke-linejoin: round; +} + +.status-card:first-of-type { + margin-top: auto; +} + +.status-card { + padding: 15px 10px 5px; +} + +.content { + padding: 0 20px 28px; +} + +.dashboard-topbar { + min-height: 58px; + margin: 0 -20px 20px; + padding: 0 28px; +} + +.dashboard-title { + gap: 22px; + font-size: 14px; +} + +.menu-icon { + font-size: 21px; +} + +.runtime-status { + gap: 13px; +} + +.account-tabs { + margin-bottom: 18px; +} + +.account-tab { + min-height: 36px; + padding: 7px 16px; +} + +.content-tabs { + margin-bottom: 16px; +} + +.content-tab { + min-height: 35px; + padding: 6px 13px; +} + +.panel-grid { + gap: 16px; + margin-bottom: 16px; +} + +.panel, +.stat-panel { + border-color: #303030; + border-radius: 7px; +} + +.stat-panel { + min-height: 188px; + padding: 18px 18px 16px; +} + +.stat-panel::after { + right: 16px; + bottom: 66px; + left: 16px; + background: #363636; +} + +.stat-panel::before { + top: 16px; + right: 16px; + width: 25px; + height: 25px; +} + +.section-title { + color: #ebebeb; + font-size: 14px; + font-weight: 600; + letter-spacing: -0.01em; + text-transform: none; +} + +.stat-value { + margin-top: 20px; + font-size: 27px; + font-weight: 500; +} + +.stat-panel .account-health-detail { + color: #c7c7c7; + font-size: 12px; +} + +.panel { + padding: 0; + overflow: hidden; +} + +.panel-header { + min-height: 52px; + padding: 0 18px; + border-bottom: 1px solid #343434; +} + +.panel-header h2 { + font-size: 15px; + font-weight: 600; +} + +.panel-header .muted { + display: none; +} + +.inline-form { + gap: 8px; +} + +.inline-form input { + width: 168px; +} + +.table-wrap { + padding: 0 8px; +} + +th, +td { + height: 38px; + padding: 9px 10px; + border-bottom-color: #303030; +} + +th { + color: #e6e6e6; + font-size: 11px; + font-weight: 500; + letter-spacing: 0; + text-transform: none; +} + +td { + color: #d0d0d0; + font-size: 12px; +} + +.action-row .button, +td .button, +.job-card .button { + min-height: 29px; + padding: 4px 9px; + border-radius: 5px; + font-size: 11px; +} + +.jobs-list { + padding: 12px 16px 16px; +} + +.job-card { + padding: 14px; +} + +@media (max-width: 768px) { + .app-shell { + grid-template-columns: 1fr; + } + + .sidebar { + width: auto; + } + + .content { + padding: 0 16px 20px; + } + + .dashboard-topbar { + margin: 0 -16px 16px; + padding: 0 16px; + } +}