Daniel Legt
a2c80ac105
Wire dashboard panels to real alerts, activity, boxes, and users data instead of static mock rows. Enable working dashboard actions (close alerts, close low alerts, cleanup expired boxes, exports, and navigation). Update storage overview to use real filesystem free/total space from the uploads volume. Make top alert chip data-driven across admin pages.
302 lines
9.7 KiB
CSS
302 lines
9.7 KiB
CSS
/* ==============================================
|
|
Dashboard-specific styles (shared with admin)
|
|
Reusable across account dashboard pages
|
|
============================================== */
|
|
|
|
/* Hero section */
|
|
.dashboard-hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 330px;
|
|
gap: 10px;
|
|
padding: 9px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.hero-copy h2 { margin: 0 0 5px; font-size: 22px; line-height: 24px; }
|
|
.hero-copy p { margin: 0; color: #333; font-size: 13px; line-height: 15px; }
|
|
|
|
.hero-status {
|
|
display: grid;
|
|
gap: 4px;
|
|
align-content: center;
|
|
padding: 7px;
|
|
background: #ffffff;
|
|
border-top: 1px solid #808080;
|
|
border-left: 1px solid #808080;
|
|
border-right: 1px solid #ffffff;
|
|
border-bottom: 1px solid #ffffff;
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
}
|
|
|
|
.hero-status-row { display: flex; justify-content: space-between; gap: 8px; }
|
|
.status-ok { color: #008000; }
|
|
.status-warn { color: #8a6200; }
|
|
.status-danger { color: #800000; }
|
|
|
|
/* Stats grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.stat-card {
|
|
position: relative;
|
|
min-height: 122px;
|
|
padding: 10px 11px 10px 14px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
width: 7px;
|
|
border-left: 7px solid #000078;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.stat-card.is-ok { background: linear-gradient(180deg, #eeffee, #ffffff); }
|
|
.stat-card.is-ok::before { border-left-color: #008000; }
|
|
.stat-card.is-info { background: linear-gradient(180deg, #edf4ff, #ffffff); }
|
|
.stat-card.is-info::before { border-left-color: #000078; }
|
|
.stat-card.is-warning { background: linear-gradient(180deg, #ffffcc, #ffffff); }
|
|
.stat-card.is-warning::before { border-left-color: #ffcc00; }
|
|
.stat-card.is-danger {
|
|
color: #000;
|
|
background: repeating-linear-gradient(45deg, #fff2f2 0 6px, #ffe1e1 6px 12px);
|
|
}
|
|
.stat-card.is-danger::before { border-left-color: #800000; }
|
|
|
|
.stat-label { margin: 0 0 6px; color: #333; font-size: 13px; line-height: 13px; font-weight: bold; }
|
|
.stat-value { margin: 0 0 7px; font-size: 32px; line-height: 32px; font-weight: bold; }
|
|
.stat-note { display: flex; gap: 4px; flex-wrap: wrap; margin: 0; color: #222; font-size: 12px; line-height: 14px; }
|
|
.stat-note-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 18px;
|
|
padding: 1px 6px;
|
|
background: #dfdfdf;
|
|
border-top: 1px solid #ffffff;
|
|
border-left: 1px solid #ffffff;
|
|
border-right: 1px solid #808080;
|
|
border-bottom: 1px solid #808080;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Main two-column grid */
|
|
.dashboard-main-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 12px;
|
|
align-items: start;
|
|
}
|
|
|
|
.dashboard-span-2 { grid-column: 1 / -1; }
|
|
|
|
/* Dashboard body */
|
|
.dashboard-body {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Section windows */
|
|
.section-window { min-height: 0; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 3px 4px 0 rgba(0,0,0,.38); }
|
|
.section-body { margin: 0 6px 6px; padding: 8px; min-height: 0; }
|
|
|
|
/* Scroll panels */
|
|
.scroll-panel { overflow: auto; background: #ffffff; border-top: 2px solid #606060; border-left: 2px solid #606060; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; }
|
|
.alerts-scroll { height: 326px; }
|
|
.boxes-scroll { height: 352px; }
|
|
.activity-scroll { height: 326px; }
|
|
.dashboard-empty-state {
|
|
margin: 8px;
|
|
padding: 10px;
|
|
color: #333333;
|
|
background: #ffffcc;
|
|
border-top: 1px solid #ffffff;
|
|
border-left: 1px solid #ffffff;
|
|
border-right: 1px solid #a08000;
|
|
border-bottom: 1px solid #a08000;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-list { display: grid; min-width: 0; }
|
|
.alert-row {
|
|
display: grid;
|
|
grid-template-columns: 72px minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
align-items: start;
|
|
min-height: 74px;
|
|
padding: 7px;
|
|
color: #000;
|
|
border-bottom: 1px solid #dfdfdf;
|
|
background: #ffffff;
|
|
}
|
|
.alert-row:nth-child(even) { background: #f5f8ff; }
|
|
.alert-row.is-dismissed { display: none; }
|
|
.alert-severity {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 60px;
|
|
min-height: 20px;
|
|
padding: 2px 5px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
background: #dfdfdf;
|
|
border-top: 1px solid #ffffff;
|
|
border-left: 1px solid #ffffff;
|
|
border-right: 1px solid #808080;
|
|
border-bottom: 1px solid #808080;
|
|
}
|
|
.alert-row[data-severity="low"] .alert-severity { color: #000078; }
|
|
.alert-row[data-severity="medium"] .alert-severity { color: #8a6200; background: #ffffcc; }
|
|
.alert-row[data-severity="high"] .alert-severity { color: #ffffff; background: #800000; }
|
|
.alert-title { margin: 0 0 3px; font-weight: bold; font-size: 14px; line-height: 15px; }
|
|
.alert-desc { margin: 0 0 3px; color: #333; font-size: 12px; line-height: 14px; }
|
|
.alert-trace { margin: 0; color: #555; font-family: 'MonoCraft', 'Courier New', monospace; font-size: 10px; line-height: 13px; overflow-wrap: anywhere; }
|
|
.alert-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
|
|
|
|
/* Boxes table */
|
|
.box-table {
|
|
width: 100%;
|
|
min-width: 900px;
|
|
border-collapse: collapse;
|
|
color: #000;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
.box-table th, .box-table td { padding: 6px 7px; border-bottom: 1px solid #dfdfdf; text-align: left; vertical-align: middle; }
|
|
.box-table th { position: sticky; top: 0; z-index: 5; background: #dfdfdf; border-bottom: 1px solid #808080; }
|
|
.box-table tr:nth-child(even) td { background: #f5f8ff; }
|
|
.box-actions { display: flex; gap: 5px; flex-wrap: nowrap; }
|
|
.box-action-button { min-width: 62px; height: 22px; padding: 0 6px; font-size: 12px; line-height: 12px; }
|
|
|
|
/* Activity */
|
|
.activity-list { display: grid; }
|
|
.activity-row {
|
|
display: grid;
|
|
grid-template-columns: 56px minmax(0, 1fr) auto;
|
|
gap: 9px;
|
|
align-items: center;
|
|
min-height: 48px;
|
|
padding: 6px 8px;
|
|
border-bottom: 1px solid #dfdfdf;
|
|
background: #ffffff;
|
|
color: #000;
|
|
}
|
|
.activity-row:nth-child(even) { background: #f5f8ff; }
|
|
.activity-time { font-weight: bold; color: #000078; }
|
|
.activity-title { margin: 0 0 2px; font-weight: bold; }
|
|
.activity-meta { margin: 0; color: #555; font-size: 12px; line-height: 13px; }
|
|
|
|
/* Modal / Popup */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: none;
|
|
background: rgba(128, 128, 128, .42);
|
|
z-index: 70;
|
|
}
|
|
.modal-backdrop.is-visible { display: block; }
|
|
|
|
.popup-window {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(calc(-50% - 1px), -50%);
|
|
width: min(760px, calc(100vw - 24px));
|
|
max-height: min(760px, calc(100vh - 24px));
|
|
display: none;
|
|
z-index: 80;
|
|
}
|
|
.popup-window.is-visible { display: flex; animation: popup-open 160ms steps(5, end); }
|
|
@keyframes popup-open {
|
|
from { transform: translate(calc(-50% - 1px), calc(-50% + 10px)) scale(.97); opacity: .45; }
|
|
to { transform: translate(calc(-50% - 1px), -50%) scale(1); opacity: 1; }
|
|
}
|
|
.popup-body { margin: 0 6px 6px; padding: 10px; max-height: calc(100vh - 90px); overflow: auto; color: #000; }
|
|
.metadata-pre {
|
|
min-height: 240px;
|
|
margin: 0;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
color: #b7ffc8;
|
|
background: #030403;
|
|
background-image: repeating-linear-gradient(transparent 0 4px, rgba(0,255,102,.018) 4px 6px);
|
|
font-family: 'MonoCraft', 'Courier New', monospace;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* Tiny button (for alerts / boxes) */
|
|
.tiny-button {
|
|
min-width: 56px;
|
|
height: 22px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
padding: 0 7px;
|
|
color: #000;
|
|
background: var(--w98-gray);
|
|
border-top: 1px solid #ffffff;
|
|
border-left: 1px solid #ffffff;
|
|
border-right: 1px solid #000000;
|
|
border-bottom: 1px solid #000000;
|
|
box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
text-decoration: none;
|
|
}
|
|
.tiny-button:hover { filter: brightness(1.06); }
|
|
|
|
/* Compact mode */
|
|
body.is-compact .dashboard-body { gap: 8px; }
|
|
body.is-compact .section-body { padding: 5px; }
|
|
body.is-compact .alerts-scroll,
|
|
body.is-compact .boxes-scroll { height: 280px; }
|
|
body.is-compact .activity-scroll { height: 280px; }
|
|
body.is-compact .alert-row { min-height: 62px; }
|
|
body.is-compact .activity-row { min-height: 42px; }
|
|
|
|
/* Responsive: medium */
|
|
@media (max-width: 1180px) {
|
|
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.dashboard-hero { grid-template-columns: 1fr; }
|
|
.dashboard-main-grid { grid-template-columns: 1fr; }
|
|
.dashboard-span-2 { grid-column: auto; }
|
|
.alerts-scroll, .boxes-scroll { height: 310px; }
|
|
.activity-scroll { height: 310px; }
|
|
}
|
|
|
|
/* Responsive: small (mobile) */
|
|
@media (max-width: 760px) {
|
|
.dashboard-body { padding: 6px; gap: 8px; }
|
|
.stats-grid { grid-template-columns: 1fr; }
|
|
.stat-card { min-height: 112px; }
|
|
.alert-row { grid-template-columns: 1fr; min-height: 0; }
|
|
.alert-actions { justify-content: flex-start; }
|
|
.alerts-scroll, .boxes-scroll, .activity-scroll { height: 320px; }
|
|
.boxes-scroll { overflow-x: auto; }
|
|
.activity-row { grid-template-columns: 48px minmax(0, 1fr); }
|
|
.activity-row .tag { grid-column: 2; justify-self: start; }
|
|
.popup-window {
|
|
left: 0;
|
|
top: 0;
|
|
transform: none;
|
|
width: 100vw;
|
|
height: 100dvh;
|
|
max-height: none;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
.popup-window.is-visible { animation: popup-open-mobile 150ms steps(5, end); }
|
|
@keyframes popup-open-mobile { from { transform: translateY(10px); opacity: .35; } to { transform: translateY(0); opacity: 1; } }
|
|
.popup-body { max-height: calc(100dvh - 40px); }
|
|
}
|