mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 11:16:47 +00:00
07ca42dcdf
The tab listed seven settings at one weight, each a two-column card with a heading and a paragraph beside its control. The controls disagreed: three switches posted on change, while the video model, the crash action and the guest agent (an Enabled/Disabled select) each had their own Save, and "From the next start" was repeated under three of them. Now it has three parts. VM details: title and description with their Save, and the template switch below them. Devices the guest sees: video, virtio RNG, TPM 2.0 and the guest agent as rows of name, control and a one-line note, under one line saying when changes apply; the video model posts on change and the guest agent is a switch, with its connection shown beside it as the Power tab's dot. When the guest crashes: Restart / Stop as two buttons that post on click. Form names, posts and who sees what are unchanged. The Turkish catalog now calls the guest agent "konuk ajanı" everywhere.
211 lines
6.2 KiB
CSS
211 lines
6.2 KiB
CSS
/*!
|
|
* WebVirtCloud (http://github.com/retspen/webvirtcloud)
|
|
* Code licensed under the Apache License v2.0.
|
|
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
|
|
*/
|
|
|
|
/* pages stop at Bootstrap's lg container width (960px): its xl and xxl
|
|
widths (1140px, 1320px) leave the panel's forms and lists too wide */
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
|
|
/* a count or label badge: text-bg-light keeps a light background with the
|
|
theme's light-text colour, white on grey in Darkly, Superhero and Vapor;
|
|
the page's own colours read in every theme */
|
|
.badge.text-bg-light.border {
|
|
color: var(--bs-body-color) !important;
|
|
background-color: var(--bs-body-bg) !important;
|
|
}
|
|
|
|
/* an outlined secondary button (Cancel, a row's menu): Bootstrap draws it
|
|
in the theme's secondary colour, near the page background in Cyborg,
|
|
Darkly, Slate, Solar, Superhero and Vapor; the page's own text colours
|
|
read in every theme, its hover stays the theme's */
|
|
.btn-outline-secondary {
|
|
color: var(--bs-body-color);
|
|
border-color: var(--bs-secondary-color);
|
|
}
|
|
|
|
#editor {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/* Tom Select's control keeps the text colour of the select it replaces:
|
|
its own stylesheet fixes one, unreadable on some Bootswatch themes */
|
|
.ts-wrapper.form-select .ts-control,
|
|
.ts-wrapper.form-select .ts-control input {
|
|
color: inherit;
|
|
}
|
|
|
|
.xmlheight {
|
|
height: 364px;
|
|
}
|
|
|
|
.ace_editor {
|
|
height: 350px;
|
|
}
|
|
|
|
/* headers of sortable tables (static/js/sort_tables.js): the sorted one shows
|
|
its direction, up for ascending */
|
|
th[role=columnheader]:not([data-sort-method="none"]) {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
th[aria-sort]:not([data-sort-method="none"])::after {
|
|
content: "";
|
|
display: inline-block;
|
|
margin-left: 0.4em;
|
|
vertical-align: middle;
|
|
border: 0.3em solid transparent;
|
|
border-top-color: currentColor;
|
|
}
|
|
|
|
th[aria-sort="ascending"]:not([data-sort-method="none"])::after {
|
|
border-top-color: transparent;
|
|
border-bottom-color: currentColor;
|
|
}
|
|
|
|
/* a phone keeps Bootstrap's own cell padding: some themes (Zephyr) double
|
|
it, and a list's last column no longer fits the screen */
|
|
@media (max-width: 575.98px) {
|
|
.table > :not(caption) > * > * {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* a choice shown as a card around its radio button (the VM's disk source,
|
|
a new pool's type): the chosen card by its border only, as the
|
|
Bootswatch dark themes keep light "subtle" backgrounds */
|
|
.source-option {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.source-option:has(input:checked) {
|
|
border-color: var(--bs-primary) !important;
|
|
box-shadow: inset 0 0 0 1px var(--bs-primary);
|
|
}
|
|
|
|
.source-option:has(input:focus-visible) {
|
|
outline: 2px solid var(--bs-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.host-collapsed tr[host] {
|
|
display: none;
|
|
}
|
|
|
|
/* a live chart (static/js/charts.js) fills the width of its card at this height */
|
|
.chart {
|
|
height: 160px;
|
|
}
|
|
|
|
/* the host's sections (computes/host_nav.html) on one line in every theme:
|
|
one font size, and the divider spaced alike on its two sides (Zephyr
|
|
doubles the space after it) */
|
|
.host-nav .breadcrumb {
|
|
--bs-breadcrumb-item-padding-x: .5rem;
|
|
font-size: .875rem;
|
|
}
|
|
|
|
.host-nav .breadcrumb-item + .breadcrumb-item::before {
|
|
padding-right: var(--bs-breadcrumb-item-padding-x);
|
|
}
|
|
|
|
/* the power tab's states: the current one filled, the others a ring */
|
|
.power-dot {
|
|
width: .8rem;
|
|
height: .8rem;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
border: 2px solid var(--bs-border-color);
|
|
}
|
|
.power-dot.bg-success, .power-dot.bg-warning, .power-dot.bg-secondary { border-color: transparent; }
|
|
/* the access tab's two login buttons line up */
|
|
.access-act { min-width: 9rem; }
|
|
|
|
/* the options tab: one row per device the guest sees, its name, its control and a note */
|
|
.option-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
column-gap: 1rem;
|
|
row-gap: .25rem;
|
|
padding: .6rem 0;
|
|
}
|
|
.option-name { flex: 0 0 8rem; }
|
|
|
|
/* the resize tab: one cell per vCPU up to the maximum, filled when on; memory now within its maximum */
|
|
.vcpu-cell {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 2.25rem;
|
|
height: 2.25rem;
|
|
padding: 0 .4rem;
|
|
border-radius: var(--bs-border-radius);
|
|
border: 2px solid var(--bs-primary);
|
|
background: var(--bs-body-bg);
|
|
color: var(--bs-primary);
|
|
font-size: .875rem;
|
|
font-weight: 600;
|
|
}
|
|
.vcpu-cell.on { background: var(--bs-primary); color: #fff; }
|
|
button.vcpu-cell:not(:disabled):hover { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
|
|
button.vcpu-cell:disabled { opacity: .65; }
|
|
.memory-bar {
|
|
width: min(18rem, 100%);
|
|
height: .9rem;
|
|
border: 2px solid var(--bs-primary);
|
|
border-radius: var(--bs-border-radius);
|
|
overflow: hidden;
|
|
}
|
|
.memory-bar-now { height: 100%; background: var(--bs-primary); }
|
|
.resize-act { min-width: 9rem; }
|
|
|
|
/* the boot order: the devices the VM tries in turn, numbered and joined by a line */
|
|
.boot-chain { counter-reset: boot; }
|
|
.boot-node { position: relative; padding: .5rem 0; }
|
|
.boot-chain > .boot-node { counter-increment: boot; }
|
|
.boot-step {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--bs-primary);
|
|
color: var(--bs-primary);
|
|
background: var(--bs-body-bg);
|
|
font-size: .8rem;
|
|
font-weight: 600;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.boot-chain .boot-step::before { content: counter(boot); }
|
|
.boot-chain > .boot-node:not(:last-child)::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: calc(.875rem - 1px);
|
|
top: calc(50% + .875rem);
|
|
height: calc(100% - 1.75rem);
|
|
border-left: 2px solid var(--bs-border-color);
|
|
}
|
|
.boot-spare .boot-step { visibility: hidden; }
|
|
/* on a narrow screen a device's buttons go below its name, not over it */
|
|
.boot-text { min-width: 10rem; flex-basis: 10rem; }
|
|
.boot-chain .boot-spare-only, .boot-spare .boot-chain-only { display: none !important; }
|
|
|
|
/* a log message keeps a readable width when its table scrolls on a phone */
|
|
.log-message {
|
|
min-width: 16rem;
|
|
}
|