1.vms-list th:not(:first-child), .vms-list tr.top > td:not(.title) { width: 1%; white-space: nowrap; }
2.vms-list .row-skeleton { height: 36px; margin: 14px var(--gutter); }
3
4.vms-list tbody.vm tr { cursor: pointer; }
5.vms-list tbody.vm tr > td { transition: background-color 150ms; }
6.vms-list tbody.vm:has(tr:hover) tr > td { background: var(--hover); }
7.vms-list tr.top > td { padding-top: 8px; padding-bottom: 0; }
8.vms-list tr.bottom > td { padding-top: 2px; padding-bottom: 8px; font-size: 12px; color: var(--muted); }
9.vms-list tbody.off tr.bottom > td.num { color: var(--text-2); }
10.vms .vms-list table.data tbody.vm tr.bottom > td:last-child { padding-right: 8px; }
11/* A row-spanning cell loses its collapsed bottom border to the next row, so each VM's rule is drawn as a shadow. */
12.vms-list tbody.vm td { border-bottom: 0; }
13.vms-list tbody.vm :is(tr.bottom > td, td.actions) { box-shadow: inset 0 -1px var(--grid); }
14.vms-list td:focus-visible { outline-offset: -2px; }
15
16.vms-list td.title { max-width: 0; }
17.vms-list td.title button {
18 display: flex;
19 align-items: baseline;
20 gap: 8px;
21 width: 100%;
22 padding: 0;
23 border: 0;
24 background: none;
25 color: inherit;
26 font: inherit;
27 text-align: left;
28 white-space: nowrap;
29 cursor: pointer;
30}
31.vms-list td.title button:focus-visible { outline-offset: 2px; }
32.vm-name { font-weight: 600; }
33.vms-list tbody.off .vm-name { color: var(--text-2); }
34.vms-list .for { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
35.vms-list td.specs { max-width: 0; }
36.vms-list td.specs > div { display: flex; flex-wrap: wrap; gap: 2px 12px; cursor: default; }
37.vms-list td.specs span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
38.vms-list td.specs svg { flex: none; }
39.vms-list td.specs .mono { color: var(--text-2); }
40
41
42.vm-detail { display: grid; align-content: start; gap: 16px; }
43.vm-detail .off-hour { margin: 0; color: var(--muted); font-size: 12px; }
44.vm-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
45.vm-charts .skeleton { height: 104px; }
46.vm-detail .facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 28px; }
47.vm-detail .kv { align-content: start; }
48.vm-detail .settings { display: grid; gap: 12px; align-content: start; }
49.vm-detail .describe {
50 margin: 0 -4px;
51 padding: 0 4px;
52 border: 0;
53 border-radius: 4px;
54 background: none;
55 color: inherit;
56 font: inherit;
57 text-align: left;
58 cursor: text;
59 transition: background-color 150ms;
60}
61.vm-detail .describe:hover { background: var(--hover); }
62.vm-detail .describe.empty { color: var(--accent); cursor: pointer; }
63.vm-detail .lines { display: grid; gap: 4px 10px; align-items: center; }
64.vm-detail .lines > div { display: contents; }
65.vm-detail .lines.disks { grid-template-columns: auto minmax(0, 1fr) 72px auto; }
66.vm-detail .lines.disks .meter { min-width: 0; height: 5px; }
67.vm-detail .lines.nics { grid-template-columns: auto auto minmax(0, 1fr); }
68.vm-detail .lines.devices { grid-template-columns: auto minmax(0, 1fr); }
69.vm-detail .lines .source { overflow-wrap: anywhere; }
70
71.vms-empty { display: grid; justify-items: center; gap: 8px; }
72.vms-empty p { margin: 0; }
73
74.dialog:has(.vm-create) { width: min(580px, calc(100vw - 32px)); }
75.vm-create { display: grid; gap: 18px; }
76.vm-create .hint { margin: 0; }
77.vm-custom-iso { display: flex; align-items: end; gap: 10px; }
78.vm-custom-iso .field { flex: 1; min-width: 0; }
79.vm-resources { display: grid; gap: 18px; }
80.vm-resource { display: grid; gap: 7px; font-size: 13px; }
81.vm-resource > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
82.vm-resource output { color: var(--text); font-variant-numeric: tabular-nums; }
83.vm-resource input { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
84.vm-resource-scale { color: var(--muted); font-size: 11px; }
85.vm-hardware summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
86.vm-hardware .row { margin-top: 12px; }
87.vm-media { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--grid); border-radius: 6px; font-size: 12px; }
88.vm-media .source { overflow-wrap: anywhere; min-width: 0; }
89.vm-upload-progress { display: grid; gap: 8px; }
90.vm-upload-progress progress { width: 100%; accent-color: var(--accent); }
91.vm-console { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: var(--panel); }
92.vm-console-toolbar { display: flex; flex: none; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--grid); }
93.vm-console-status { color: var(--text-2); font-size: 12px; }
94.vm-password { display: grid; gap: 6px; padding: 8px 10px; color: var(--muted); font-size: 11px; }
95.vm-password input { width: 26ch; min-width: 0; padding: 5px 6px; color: var(--text); font: 12px monospace; }
96.vm-console-screen { flex: 1; background: #101014; min-height: 0; }
97.vm-console-screen video { display: block; width: 100%; height: 100%; object-fit: contain; outline: none; touch-action: none; }
98.vm-cursor { display: none; position: fixed; left: 0; top: 0; pointer-events: none; }
99.vm-cursor-invert { mix-blend-mode: difference; }
100.vm-console-error { padding: 8px 12px; margin: 0; font-size: 12px; }
101.vm-clipboard { display: grid; gap: 8px; padding: 12px; }
102@media (max-width: 640px) {
103 .vm-detail .facts, .vm-charts { grid-template-columns: 1fr; }
104 .vm-media { flex-wrap: wrap; }
105}
106
107.vm-workspace { min-width: 0; }
108.vms .page-head { flex-wrap: wrap; }
109
110.vms .vms-list { overflow-x: auto; }
111.vms .vms-list table { min-width: 540px; }
112@media (max-width: 900px) {
113 .shell:has(.vms) { --sidebar: 220px; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
114 .vms { --gutter: 16px; }
115 .vm-detail .facts { grid-template-columns: 1fr; }
116}
117
118.vm-library { margin-top: 28px; }
119.vm-library h2 { font-size: 15px; display: flex; align-items: baseline; gap: 14px; }
120.vm-library h2 span { font-size: 12px; font-weight: normal; }
121.vm-library details { margin-top: 18px; }
122.vm-library summary { cursor: pointer; color: var(--text-2); font-size: 13px; margin-bottom: 8px; }
123.vm-library-item { display: flex; gap: 12px; padding-block: 7px; font-size: 12px; }
124.vm-clipboard .field { display: grid; gap: 6px; font-size: 12px; }
125.vm-count { font-size: 12px; }
126
127.vms.vm-active { padding: 0; max-width: none; width: 100%; }
128.vm-active .list-body.flush { margin: 0; padding: 0; overflow: hidden; }
129.vm-active .list-body.flush > .vm-workspace { margin: 0; flex: 1; min-height: 0; }
130.vm-workspace { display: flex; flex-direction: column; }
131.vm-console-screen[hidden] { display: none; }
132.vm-workspace .vm-detail { padding: 20px var(--gutter); overflow: auto; flex: 1; min-height: 0; }
133.vm-menu { position: relative; font-size: 12px; }
134.vm-menu summary { display: flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; padding: 6px 8px; border-radius: 4px; user-select: none; }
135.vm-menu summary svg { color: var(--muted); }
136.vm-menu summary::-webkit-details-marker { display: none; }
137.vm-menu summary:hover, .vm-menu[open] summary { background: var(--hover); }
138.vm-menu > div { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; max-width: 300px; z-index: 5; display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--grid); border-radius: 7px; background: var(--panel); box-shadow: 0 6px 24px #0005; }
139.vm-menu > div > button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; border: 0; border-radius: 4px; background: transparent; color: var(--text); padding: 7px 10px; font: inherit; text-align: left; cursor: pointer; }
140.vm-menu > div > button svg { flex: none; }
141.vm-menu > div > button:hover:not(:disabled) { background: var(--hover); }
142.vm-menu > div > button:disabled { color: var(--muted); cursor: default; }
143.vm-menu > div > button.danger { color: var(--danger); }
144.vm-menu-info { display: block; font-size: 11px; padding: 8px 10px; overflow-wrap: anywhere; }
145
146.vm-serial { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px 16px; gap: 8px; }
147.vm-serial[hidden] { display: none; }
148.vm-serial-tools { display: contents; }
149.vm-serial p { margin: 0; font-size: 12px; }
150.vm-serial-surface { position: relative; display: flex; flex: 1; min-height: 0; }
151.vm-serial-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 13px; pointer-events: none; }
152.vm-serial-empty button { pointer-events: auto; }
153.vm-serial-terminal { flex: 1; min-height: 0; --clo-term-bg: var(--page); --clo-term-fg: var(--text); --clo-term-cursor: var(--accent); }