mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 19:26:48 +00:00
refactor(templates): the page width, headings and paragraphs as Bootstrap sets them
Three upstream rules in webvirtcloud.css set every page's layout
against Bootstrap 5.3:
- .container { max-width: 900px } held each page to 900px at any
screen width, below Bootstrap's own widths. Pages now take
Bootstrap's container widths up to its lg one, 960px, and stop
there on wider screens: its xl and xxl widths (1140px, 1320px) leave
the panel's forms and lists too wide;
- .page-header (margins of 5px 5px 20px 20px) put headings 20px right
of the content under them; its 14 uses are mb-3, flush with the
content (one carried Bootstrap 4's mr-auto, now me-auto);
- p { margin: 10px } indented every paragraph 10px from the content
beside it; paragraphs take Bootstrap's own bottom margin.
webvirtcloud.css keeps only what Bootstrap has no utility for: the
page width cap, the XML editor's place and height, the Tom Select
colour fix, the sortable table headers' arrows, the grouped VM list's
collapsed hosts and the charts' height.
This commit is contained in:
parent
faa6e4bb14
commit
965cf0080c
10 changed files with 20 additions and 27 deletions
|
|
@ -4,14 +4,12 @@
|
|||
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*/
|
||||
|
||||
/* Global Styles */
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin: 5px 5px 20px 20px;
|
||||
/* 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 {
|
||||
|
|
@ -62,11 +60,6 @@ th[aria-sort="ascending"]:not([data-sort-method="none"])::after {
|
|||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
margin: 10px 10px 10px 10px;
|
||||
}
|
||||
|
||||
/* a live chart (static/js/charts.js) fills the width of its card at this height */
|
||||
.chart {
|
||||
height: 160px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue