root
56 lines
5.4 KiB
CSS
56 lines
5.4 KiB
CSS
:root { color-scheme: dark; font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif; background: #111410; color: #eef2e8; }
|
|
* { box-sizing: border-box; }
|
|
html, body { width: 100%; min-height: 100%; margin: 0; }
|
|
body { background: #111410; letter-spacing: 0; overflow: hidden; }
|
|
button { font: inherit; letter-spacing: 0; }
|
|
.shell { min-height: 100vh; display: grid; grid-template-rows: 58px 54px minmax(0, 1fr); background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; }
|
|
.command-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #30372e; background: rgba(17,20,16,.94); }
|
|
.identity, .actions, .connection { display: flex; align-items: center; }
|
|
.identity { gap: 12px; }
|
|
.identity .mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #a7ff3f; color: #a7ff3f; font: 700 12px/1 "IBM Plex Mono", monospace; }
|
|
.identity div { display: grid; gap: 2px; }
|
|
.identity strong { font-size: 15px; }
|
|
.identity small { color: #8d9788; font-size: 11px; }
|
|
.actions { gap: 16px; }
|
|
.connection { gap: 8px; color: #aeb6a8; font-size: 12px; }
|
|
.connection i { width: 7px; height: 7px; border-radius: 50%; background: #e9bd54; box-shadow: 0 0 12px #e9bd54; }
|
|
.connection[data-health="ready"] i { background: #a7ff3f; box-shadow: 0 0 12px #a7ff3f; }
|
|
.connection[data-health="blocked"] i { background: #ff6b57; box-shadow: 0 0 12px #ff6b57; }
|
|
.actions button { min-width: 66px; height: 30px; border: 1px solid #495044; background: #191d18; color: #eef2e8; cursor: pointer; }
|
|
.actions button:hover { border-color: #a7ff3f; color: #a7ff3f; }
|
|
.status-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid #30372e; background: #181c17; }
|
|
.status-strip div { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 18px; border-right: 1px solid #30372e; }
|
|
.status-strip span { color: #8d9788; font-size: 11px; }
|
|
.status-strip strong { font: 600 20px/1 "IBM Plex Mono", monospace; color: #f4f7f0; }
|
|
.workspace { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); }
|
|
.resource-pane, .detail-pane { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
|
|
.resource-pane { border-right: 1px solid #30372e; }
|
|
.pane-heading { min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #30372e; background: rgba(17,20,16,.84); }
|
|
.pane-heading p { margin: 0 0 4px; color: #a7ff3f; font: 600 10px/1 "IBM Plex Mono", monospace; }
|
|
.pane-heading h1, .pane-heading h2 { margin: 0; font-size: 17px; font-weight: 600; }
|
|
.pane-heading time { color: #717b6d; font: 11px/1 "IBM Plex Mono", monospace; }
|
|
.resource-list, .detail { min-height: 0; overflow: auto; padding: 14px; }
|
|
.resource-list { display: grid; align-content: start; gap: 8px; }
|
|
.resource { width: 100%; min-height: 76px; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid #333a30; background: #171b16; color: inherit; text-align: left; cursor: pointer; }
|
|
.resource:hover, .resource[aria-current="true"] { border-color: #829e65; background: #1c211a; }
|
|
.resource .rail { width: 3px; height: 44px; background: #596255; }
|
|
.resource[data-status="online"] .rail, .resource[data-status="available"] .rail { background: #a7ff3f; }
|
|
.resource[data-status="busy"] .rail { background: #e9bd54; }
|
|
.resource[data-status="offline"] .rail, .resource[data-status="blocked"] .rail { background: #ff6b57; }
|
|
.resource-copy { min-width: 0; display: grid; gap: 5px; }
|
|
.resource-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
|
|
.resource-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8d9788; font: 11px/1.35 "IBM Plex Mono", monospace; }
|
|
.badge { border: 1px solid #41483d; padding: 5px 8px; color: #b6beb1; font: 10px/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
|
|
.detail { display: grid; align-content: start; gap: 14px; }
|
|
.detail-empty, .empty { min-height: 180px; display: grid; place-content: center; gap: 7px; color: #747d70; text-align: center; }
|
|
.detail-empty strong { color: #c8cec3; }
|
|
.detail-block { border-top: 1px solid #353c32; padding-top: 14px; }
|
|
.detail-block h3 { margin: 0 0 10px; color: #8d9788; font: 600 10px/1 "IBM Plex Mono", monospace; }
|
|
.kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 14px; font-size: 12px; }
|
|
.kv dt { color: #7f897a; }
|
|
.kv dd { margin: 0; overflow-wrap: anywhere; color: #e5e9df; font-family: "IBM Plex Mono", monospace; }
|
|
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.chip { border: 1px solid #3f493b; padding: 5px 7px; color: #c8d0c1; font: 10px/1 "IBM Plex Mono", monospace; }
|
|
.blocker { border-left: 3px solid #ff6b57; padding: 10px 12px; background: #271a17; color: #ffc1b8; font-size: 12px; }
|
|
@media (max-width: 760px) { body { overflow: auto; } .shell { min-height: 100svh; grid-template-rows: 58px auto auto; } .status-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .status-strip div:nth-child(n+4) { border-top: 1px solid #30372e; } .workspace { grid-template-columns: 1fr; } .resource-pane { border-right: 0; } .detail-pane { border-top: 1px solid #30372e; min-height: 420px; } .resource-list, .detail { overflow: visible; } }
|