1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-08 11:16:47 +00:00
webvirtcloud/static/css/webvirtcloud.css
catborise c3c84d780c style(instances): a VM's settings tabs on one line in every theme
- With the Host devices tab, a superuser's ten settings tabs took two lines
  in 22 of the 27 themes (up to 166 px short in Darkly): the themes' tab
  font sizes and spacing differ. The tabs take one font size and the same
  side spacing in every theme; the Users tab no longer has narrower spacing
  than the others.
- Measured in the 27 themes at 992, 1200 and 1440 px: one line in each,
  with at least 150 px to spare, room for the guest agent's info tab too.
2026-10-29 17:13:24 +03:00

115 lines
2.9 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;
}
}
#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);
}
/* a VM's settings tabs (instances/settings_tab.html) on one line in every
theme: the themes' tab font sizes and spacing differ by up to a tab */
.vm-settings-tabs {
font-size: .875rem;
}
.vm-settings-tabs .nav-link {
padding-left: .75rem;
padding-right: .75rem;
}