diff options
Diffstat (limited to 'src/zenserver/frontend/html/zen.css')
| -rw-r--r-- | src/zenserver/frontend/html/zen.css | 183 |
1 files changed, 178 insertions, 5 deletions
diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css index b4f7270fc..d3c6c9036 100644 --- a/src/zenserver/frontend/html/zen.css +++ b/src/zenserver/frontend/html/zen.css @@ -803,18 +803,21 @@ zen-banner + zen-nav::part(nav-bar) { /* stats tiles -------------------------------------------------------------- */ -.stats-tiles { - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +.grid.stats-tiles { + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .stats-tile { cursor: pointer; - transition: border-color 0.15s, background 0.15s; + transition: border-color 0.15s; } .stats-tile:hover { border-color: var(--theme_p0); - background: var(--theme_p4); +} + +.stats-tile[data-over="true"] { + border-color: var(--theme_fail); } .stats-tile-detailed { @@ -873,6 +876,81 @@ zen-banner + zen-nav::part(nav-bar) { font-size: 28px; } +/* HTTP summary panel ------------------------------------------------------- */ + +.stats-http-panel { + display: grid; + grid-template-columns: 20% 1fr 1fr; + align-items: center; + margin-bottom: 16px; +} + +.http-title { + font-size: 22px; + font-weight: 700; + color: var(--theme_bright); + text-transform: uppercase; + letter-spacing: 1px; + line-height: 1; +} + +.http-section { + display: flex; + flex-direction: column; + gap: 8px; + padding: 0 24px; + border-left: 1px solid var(--theme_g2); +} + +.http-section-label { + font-size: 11px; + font-weight: 600; + color: var(--theme_g1); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.stats-http-panel .tile-metrics { + flex-direction: row; + align-items: center; + gap: 20px; +} + +/* workspaces page ---------------------------------------------------------- */ + +.ws-id-wrap { + display: inline-flex; + align-items: center; + font-family: 'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace; + font-size: 14px; +} + +.ws-share-table { + width: 100%; + margin: 4px 0; +} + +.ws-share-table th { + padding: 4px; +} + +.ws-share-table td { + font-family: 'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace; + font-size: 13px; + padding: 4px; +} + +.ws-share-table td.ws-no-shares-cell { + color: var(--theme_g1); + font-style: italic; + font-family: inherit; + padding: 4px 8px; +} + +.module-metrics-row td.ws-detail-cell { + padding-left: 24px; +} + /* start -------------------------------------------------------------------- */ #start { @@ -1030,7 +1108,7 @@ html:has(#map) { .card-title { font-size: 14px; font-weight: 600; - color: var(--theme_g1); + color: var(--theme_g0); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; @@ -1533,6 +1611,25 @@ tr:last-child td { animation: module-dot-deprovisioning-from-provisioned 1s steps(1, end) infinite; } +@keyframes module-dot-obliterating-from-provisioned { + 0%, 59.9% { background: var(--theme_fail); } + 60%, 100% { background: var(--theme_ok); } +} +@keyframes module-dot-obliterating-from-hibernated { + 0%, 59.9% { background: var(--theme_fail); } + 60%, 100% { background: var(--theme_warn); } +} + +.module-state-dot[data-state="obliterating"][data-prev-state="provisioned"] { + animation: module-dot-obliterating-from-provisioned 0.5s steps(1, end) infinite; +} +.module-state-dot[data-state="obliterating"][data-prev-state="hibernated"] { + animation: module-dot-obliterating-from-hibernated 0.5s steps(1, end) infinite; +} +.module-state-dot[data-state="obliterating"] { + animation: module-dot-obliterating-from-provisioned 0.5s steps(1, end) infinite; +} + .module-action-cell { white-space: nowrap; display: flex; @@ -1652,6 +1749,53 @@ tr:last-child td { text-align: center; } +.module-pager-search { + font-size: 12px; + padding: 4px 8px; + width: 14em; + border: 1px solid var(--theme_g2); + border-radius: 4px; + background: var(--theme_g4); + color: var(--theme_g0); + outline: none; + transition: border-color 0.15s, outline 0.3s; +} + +.module-pager-search:focus { + border-color: var(--theme_p0); +} + +.module-pager-search::placeholder { + color: var(--theme_g1); +} + +@keyframes pager-search-flash { + from { box-shadow: inset 0 0 0 100px var(--theme_p2); } + to { box-shadow: inset 0 0 0 100px transparent; } +} + +.zen_table > .pager-search-highlight > div { + animation: pager-search-flash 1s linear forwards; +} + +.module-table .pager-search-highlight td { + animation: pager-search-flash 1s linear forwards; +} + +@keyframes pager-loading-pulse { + 0%, 100% { opacity: 0.6; } + 50% { opacity: 0.2; } +} + +.pager-loading { + color: var(--theme_g1); + font-style: italic; + font-size: 14px; + font-weight: 600; + padding: 12px 0; + animation: pager-loading-pulse 1.5s ease-in-out infinite; +} + .module-table td, .module-table th { padding-top: 4px; padding-bottom: 4px; @@ -1672,6 +1816,35 @@ tr:last-child td { color: var(--theme_bright); } +.zen-copy-btn { + background: transparent; + border: 1px solid var(--theme_g2); + border-radius: 4px; + color: var(--theme_g1); + cursor: pointer; + font-size: 12px; + line-height: 1; + padding: 2px 5px; + margin-left: 6px; + vertical-align: middle; + flex-shrink: 0; + transition: background 0.1s, color 0.1s; +} +.zen-copy-btn:hover { + background: var(--theme_g2); + color: var(--theme_bright); +} +.zen-copy-btn.zen-copy-ok { + color: var(--theme_ok); + border-color: var(--theme_ok); +} + +.zen-copy-wrap { + display: inline-flex; + align-items: center; + white-space: nowrap; +} + .module-metrics-row td { padding: 6px 10px 10px 42px; background: var(--theme_g3); |