diff options
Diffstat (limited to 'src/zenserver/frontend/html/zen.css')
| -rw-r--r-- | src/zenserver/frontend/html/zen.css | 222 |
1 files changed, 221 insertions, 1 deletions
diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css index 74336f0e1..5ce60d2d2 100644 --- a/src/zenserver/frontend/html/zen.css +++ b/src/zenserver/frontend/html/zen.css @@ -471,7 +471,7 @@ a { border-radius: 6px; background-color: var(--theme_p4); border: 1px solid var(--theme_g2); - width: 6em; + min-width: 6em; cursor: pointer; font-weight: 500; transition: background 0.15s; @@ -486,6 +486,8 @@ a { padding: 2em; min-height: 8em; align-content: center; + white-space: pre-wrap; + text-align: left; } } @@ -1081,3 +1083,221 @@ tr:last-child td { background: var(--theme_g2); color: var(--theme_bright); } + +/* module action controls --------------------------------------------------- */ + +.module-state-dot { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + margin-right: 6px; + vertical-align: middle; + flex-shrink: 0; +} + +.module-state-dot[data-state="provisioned"] { background: var(--theme_ok); } +.module-state-dot[data-state="hibernated"] { background: var(--theme_warn); } +.module-state-dot[data-state="unprovisioned"] { background: var(--theme_g1); } + +@keyframes module-dot-hibernating { + 0%, 59.9% { background: var(--theme_warn); } + 60%, 100% { background: var(--theme_ok); } +} +@keyframes module-dot-waking { + 0%, 59.9% { background: var(--theme_ok); } + 60%, 100% { background: var(--theme_warn); } +} +@keyframes module-dot-provisioning { + 0%, 59.9% { background: var(--theme_ok); } + 60%, 100% { background: var(--theme_g1); } +} +@keyframes module-dot-deprovisioning-from-provisioned { + 0%, 59.9% { background: var(--theme_fail); } + 60%, 100% { background: var(--theme_ok); } +} +@keyframes module-dot-deprovisioning-from-hibernated { + 0%, 59.9% { background: var(--theme_fail); } + 60%, 100% { background: var(--theme_warn); } +} + +.module-state-dot[data-state="hibernating"] { animation: module-dot-hibernating 1s steps(1, end) infinite; } +.module-state-dot[data-state="waking"] { animation: module-dot-waking 1s steps(1, end) infinite; } +.module-state-dot[data-state="provisioning"] { animation: module-dot-provisioning 1s steps(1, end) infinite; } +.module-state-dot[data-state="deprovisioning"][data-prev-state="provisioned"] { + animation: module-dot-deprovisioning-from-provisioned 1s steps(1, end) infinite; +} +.module-state-dot[data-state="deprovisioning"][data-prev-state="hibernated"] { + animation: module-dot-deprovisioning-from-hibernated 1s steps(1, end) infinite; +} +.module-state-dot[data-state="deprovisioning"] { + animation: module-dot-deprovisioning-from-provisioned 1s steps(1, end) infinite; +} + +.module-action-cell { + white-space: nowrap; + display: flex; + gap: 4px; +} + +.module-action-wrap { + display: inline-block; + cursor: default; +} + +.module-action-wrap:has(button:disabled) { + cursor: default; +} + +.module-action-btn { + background: transparent; + border: 1px solid var(--theme_g2); + border-radius: 4px; + color: var(--theme_g1); + cursor: pointer; + font-size: 13px; + line-height: 1; + padding: 3px 6px; + transition: background 0.1s, color 0.1s; +} + +.module-action-btn:not(:disabled):hover { + background: var(--theme_g2); + color: var(--theme_bright); +} + +.module-action-btn:disabled { + color: var(--theme_border_subtle); + border-color: var(--theme_border_subtle); + pointer-events: none; +} + +.module-bulk-btn { + display: inline-flex; + align-items: center; + gap: 5px; + background: transparent; + border: 1px solid var(--theme_g2); + border-radius: 4px; + cursor: pointer; + font-size: 12px; + font-weight: 600; + padding: 4px 10px; + color: var(--theme_g1); + transition: background 0.1s, color 0.1s; +} + +.module-bulk-btn:not(:disabled):hover { + background: var(--theme_p3); + color: var(--theme_bright); +} + +.module-bulk-btn:disabled { + opacity: 0.4; +} + +.module-bulk-bar { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 10px; + margin-bottom: 8px; + background: var(--theme_g2); + border-radius: 4px; + font-size: 12px; +} + +.module-bulk-label { + margin-right: 8px; + color: var(--theme_g1); +} + +.module-bulk-sep { + flex: 1; +} + +.module-pager { + position: absolute; + right: 0; + top: 0; + display: flex; + align-items: center; + gap: 10px; +} + +.module-pager-btn { + background: transparent; + border: 1px solid var(--theme_g2); + border-radius: 4px; + color: var(--theme_g1); + cursor: pointer; + font-size: 12px; + padding: 4px 10px; + transition: background 0.1s, color 0.1s; +} + +.module-pager-btn:not(:disabled):hover { + background: var(--theme_g2); + color: var(--theme_bright); +} + +.module-pager-btn:disabled { + opacity: 0.35; + cursor: default; +} + +.module-pager-label { + font-size: 12px; + color: var(--theme_g1); + min-width: 8em; + text-align: center; +} + +.module-table td, .module-table th { + padding-top: 4px; + padding-bottom: 4px; +} + +.module-expand-btn { + background: transparent; + border: none; + color: var(--theme_g1); + cursor: pointer; + font-size: 16px; + line-height: 1; + padding: 0 4px 0 0; + vertical-align: middle; +} + +.module-expand-btn:hover { + color: var(--theme_bright); +} + +.module-metrics-row td { + padding: 6px 10px 10px 42px; + background: var(--theme_g3); + border-bottom: 1px solid var(--theme_g2); +} + +.module-metrics-grid { + display: grid; + grid-template-columns: max-content minmax(9em, 1fr) max-content minmax(9em, 1fr); + gap: 3px 12px; + font-size: 11px; + font-variant-numeric: tabular-nums; +} + +.module-metrics-label { + color: var(--theme_faint); + white-space: nowrap; +} + +/* Right-column labels get extra left padding to visually separate the two pairs */ +.module-metrics-label:nth-child(4n+3) { + padding-left: 16px; +} + +.module-metrics-value { + color: var(--theme_g0); + text-align: right; +} |