diff --git a/glances/outputs/static/css/bootstrap.less b/glances/outputs/static/css/bootstrap.less deleted file mode 100644 index 3ca1d59741..0000000000 --- a/glances/outputs/static/css/bootstrap.less +++ /dev/null @@ -1,56 +0,0 @@ -/*! - * Bootstrap v3.3.7 (http://getbootstrap.com) - * Copyright 2011-2016 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - */ - -// Core variables and mixins -@import "./variables.less"; -@import "~bootstrap/less/mixins.less"; - -// Reset and dependencies -@import "~bootstrap/less/normalize.less"; -// @import "~bootstrap/less/print.less"; -// @import "~bootstrap/less/glyphicons.less"; - -// Core CSS -@import "~bootstrap/less/scaffolding.less"; -// @import "~bootstrap/less/type.less"; -// @import "~bootstrap/less/code.less"; -@import "~bootstrap/less/grid.less"; -@import "~bootstrap/less/tables.less"; -// @import "~bootstrap/less/forms.less"; -// @import "~bootstrap/less/buttons.less"; - -// Components -// @import "~bootstrap/less/component-animations.less"; -// @import "~bootstrap/less/dropdowns.less"; -// @import "~bootstrap/less/button-groups.less"; -// @import "~bootstrap/less/input-groups.less"; -// @import "~bootstrap/less/navs.less"; -// @import "~bootstrap/less/navbar.less"; -// @import "~bootstrap/less/breadcrumbs.less"; -// @import "~bootstrap/less/pagination.less"; -// @import "~bootstrap/less/pager.less"; -// @import "~bootstrap/less/labels.less"; -// @import "~bootstrap/less/badges.less"; -// @import "~bootstrap/less/jumbotron.less"; -// @import "~bootstrap/less/thumbnails.less"; -// @import "~bootstrap/less/alerts.less"; -@import "~bootstrap/less/progress-bars.less"; -// @import "~bootstrap/less/media.less"; -// @import "~bootstrap/less/list-group.less"; -// @import "~bootstrap/less/panels.less"; -// @import "~bootstrap/less/responsive-embed.less"; -// @import "~bootstrap/less/wells.less"; -// @import "~bootstrap/less/close.less"; - -// Components w/ JavaScript -// @import "~bootstrap/less/modals.less"; -// @import "~bootstrap/less/tooltip.less"; -// @import "~bootstrap/less/popovers.less"; -// @import "~bootstrap/less/carousel.less"; - -// Utility classes -@import "~bootstrap/less/utilities.less"; -@import "~bootstrap/less/responsive-utilities.less"; diff --git a/glances/outputs/static/css/custom.scss b/glances/outputs/static/css/custom.scss new file mode 100644 index 0000000000..15e986cd25 --- /dev/null +++ b/glances/outputs/static/css/custom.scss @@ -0,0 +1,46 @@ +// Custom.scss + +// Option A: Include all of Bootstrap +// ================================== + +// Include any default variable overrides here (though functions won't be available) + +@import "../node_modules/bootstrap/scss/bootstrap"; + +// Then add additional custom code here + + + +// // Option B: Include parts of Bootstrap +// // ==================================== + +// // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) +// @import "../node_modules/bootstrap/scss/functions"; + +// // 2. Include any default variable overrides here + +// // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets) +// @import "../node_modules/bootstrap/scss/variables"; +// @import "../node_modules/bootstrap/scss/variables-dark"; + +// // 4. Include any default map overrides here + +// // 5. Include remainder of required parts +// @import "../node_modules/bootstrap/scss/maps"; +// @import "../node_modules/bootstrap/scss/mixins"; +// @import "../node_modules/bootstrap/scss/root"; + +// // 6. Optionally include any other parts as needed +// @import "../node_modules/bootstrap/scss/utilities"; +// @import "../node_modules/bootstrap/scss/reboot"; +// @import "../node_modules/bootstrap/scss/type"; +// @import "../node_modules/bootstrap/scss/images"; +// @import "../node_modules/bootstrap/scss/containers"; +// @import "../node_modules/bootstrap/scss/grid"; +// @import "../node_modules/bootstrap/scss/helpers"; + +// // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` +// @import "../node_modules/bootstrap/scss/utilities/api"; + +// // 8. Add additional custom code here + diff --git a/glances/outputs/static/css/style.scss b/glances/outputs/static/css/style.scss index 2f803a6dbd..974ce75d2e 100644 --- a/glances/outputs/static/css/style.scss +++ b/glances/outputs/static/css/style.scss @@ -1,172 +1,159 @@ -body { - background: black; - color: #BBB; - font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace; -} +// Theme -.table { - display: table; - width: 100%; - max-width:100%; +.title { + font-weight: bold; +} +.highlight { + font-weight: bold !important; + color: #5D4062 !important; +} +.ok, .status, .process { + color: #3E7B04 !important; +} +.ok_log { + background-color: #3E7B04 !important; + color: white !important; } -.table-row-group { - display: table-row-group +.max { + color: #3E7B04 !important; + font-weight: bold !important; } -.table-row { - display: table-row; +.careful { + color: #295183 !important; + font-weight: bold !important; +} +.careful_log { + background-color: #295183 !important; + color: white !important; + font-weight: bold !important; } -.table-cell { - display: table-cell; - text-align: right; +.warning, .nice { + color: #5D4062 !important; + font-weight: bold !important; } -.width-60 { - width: 60px; +.warning_log { + background-color: #5D4062 !important; + color: white !important; + font-weight: bold !important; } -.width-80 { - width: 80px; +.critical { + color: #A30000 !important; + font-weight: bold !important; } -.width-100 { - width: 100px; +.critical_log { + background-color: #A30000 !important; + color: white !important; + font-weight: bold !important; +} +.error { + color: #EE6600 !important; + font-weight: bold !important; } -.plugin { - margin-bottom: 20px; - .table:last-child { - margin-bottom: 0; - } +// Table + +.table { + margin-bottom: 0px; } -.plugin.table-row-group .table-row:last-child .table-cell { - padding-bottom: 20px; + +.margin-top { + margin-top: 0.5em; } -.underline { - text-decoration: underline +.margin-bottom { + margin-bottom: 0.5em; } -.bold { - font-weight: bold; + +.table-sm > :not(caption) > * > * { + padding-top: 0em; + padding-right: 0.25rem; + padding-bottom: 0em; + padding-left: 0.25rem; } + +// Text + .sort { font-weight: bold; color: white; } + .sortable { cursor: pointer; text-decoration: underline; } -.text-right { - text-align: right; -} -.text-left { - text-align: left; -} + .text-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.sidebar .table-cell:not(.text-left) { - padding-left: 10px; -} + +// Separator .separator { - overflow:hidden; - height:5px; + overflow: hidden; + height: 5px; } .separator:after { - content:''; - display:block; - margin:-25px auto 0; - width:100%; - height:24px; - border-radius:125px / 12px; - box-shadow:0 0 8px #555555; -} - -/* Theme */ - -.title { - font-weight: bold; - color: white; -} -.highlight { - font-weight: bold; - color: #5D4062; -} -.ok, .status, .process { - color: #3E7B04; - /*font-weight: bold;*/ -} -.ok_log { - background-color: #3E7B04; - color: white; - /*font-weight: bold;*/ -} -.max { - color: #3E7B04; - font-weight: bold; -} -.careful { - color: #295183; - font-weight: bold; -} -.careful_log { - background-color: #295183; - color: white; - font-weight: bold; -} -.warning, .nice { - color: #5D4062; - font-weight: bold; -} -.warning_log { - background-color: #5D4062; - color: white; - font-weight: bold; -} -.critical { - color: #A30000; - font-weight: bold; -} -.critical_log { - background-color: #A30000; - color: white; - font-weight: bold; -} -.error { - color: #EE6600; - font-weight: bold; + content: ''; + display: block; + margin: -25px auto 0; + width: 100%; + height: 24px; + border-radius: 125px / 12px; + box-shadow: 0 0 8px #555555; } -/* Plugins */ +// Plugins -#processlist-plugin .table-cell { - padding: 0px 5px 0px 5px; - white-space: nowrap; +#system { + span { + padding-left: 10px; + } + span:nth-child(1) { + padding-left: 0px; + } } -#vms-plugin .table-cell { - padding: 0px 10px 0px 10px; - white-space: nowrap; -} -#containers-plugin .table-cell { - padding: 0px 10px 0px 10px; - white-space: nowrap; +#ip { + span { + padding-left: 10px; + } } #quicklook { + span { + padding: 0; + margin: 0; + padding-left: 10px; + } + span:nth-child(1) { + padding-left: 0px; + } + * > th, td { + margin: 0; + padding: 0; + } + * > th:nth-child(1), td:nth-child(1) { + width: 4em; + } + * > th:nth-last-child(1), td:nth-last-child(1) { + width: 4em; + } .progress { - margin-bottom: 0px; min-width: 100px; background-color: #000; - height: 12px; + height: 1.5em; border-radius: 0px; text-align: right; } .progress-bar-ok { background-color: #3E7B04; + } .progress-bar-careful { background-color: #295183; @@ -185,152 +172,99 @@ body { } } -#amps .process-result { - max-width: 300px; - overflow: hidden; - white-space: pre-wrap; - padding-left: 10px; - text-overflow: ellipsis; -} - -#gpu .gpu-name { - white-space: nowrap; - overflow: hidden; - width: 100%; - text-overflow: ellipsis; -} - -#system > span:nth-child(1) { - padding-left: 0px; -} - -#system span { - padding-left: 10px; -} - -#ip { - padding-left: 10px; +#vms { + .table { + margin-bottom: 1em; + } + * > th:not(:last-child), td:not(:last-child) { + width: 4em; + } + * > td:nth-child(2) { + width: 15em; + } + * > td:nth-child(3) { + width: 6em; + } + * > td:nth-child(5) { + text-align: right; + } + * > td:nth-child(7) { + width: 10em; + } } -#ip span { - padding-left: 10px; +#containers { + .table { + margin-bottom: 1em; + } + * > th:not(:last-child), td:not(:last-child) { + width: 4em; + } + * > td:nth-child(1) { + width: 10em; + } + * > td:nth-child(2), td:nth-child(3) { + width: 15em; + } + * > td:nth-child(4), td:nth-child(5) { + width: 6em; + } + * > td:nth-child(7), td:nth-child(9), td:nth-child(11) { + text-align: right; + } } -#processcount > span:nth-child(1) { - padding-left: 0px; +#processcount { + span { + padding-left: 10px; + } + span:nth-child(1) { + padding-left: 0px; + } } -#processcount span { - padding-left: 10px; +#amps { + .process-result { + max-width: 300px; + overflow: hidden; + white-space: pre-wrap; + padding-left: 10px; + text-overflow: ellipsis; + } + .table { + margin-bottom: 1em; + } } -// /* Loading page */ - -// #loading-page .glances-logo { -// background: url('../images/glances.png') no-repeat center center; -// background-size: contain; -// } - -// @media (max-width: 750px) { -// #loading-page .glances-logo { -// height: 400px; -// } -// } -// @media (min-width: 750px) { -// #loading-page .glances-logo { -// height: 500px; -// } -// } - - -/* -Loading animation -source : https://github.com/lukehaas/css-loaders -*/ -#loading-page .loader:before, -#loading-page .loader:after, -#loading-page .loader { - border-radius: 50%; - width: 1em; - height: 1em; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation: loader 1.8s infinite ease-in-out; - animation: loader 1.8s infinite ease-in-out; -} -#loading-page .loader { - margin: auto; - font-size: 10px; - position: relative; - text-indent: -9999em; - -webkit-animation-delay: 0.16s; - animation-delay: 0.16s; -} -#loading-page .loader:before { - left: -3.5em; -} -#loading-page .loader:after { - left: 3.5em; - -webkit-animation-delay: 0.32s; - animation-delay: 0.32s; -} -#loading-page .loader:before, -#loading-page .loader:after { - content: ''; - position: absolute; - top: 0; -} -@-webkit-keyframes loader { - 0%, 80%, 100% { - box-shadow: 0 2.5em 0 -1.3em #56CA69; +#processlist { + * > td:nth-child(-n+12) { + width: 4em; } - 40% { - box-shadow: 0 2.5em 0 0 #56CA69; + * > td:nth-child(5), td:nth-child(7), td:nth-child(9), td:nth-child(11) { + text-align: right; } -} -@keyframes loader { - 0%, 80%, 100% { - box-shadow: 0 2.5em 0 -1.3em #56CA69; + * > td:nth-child(6) { + width: 7em; } - 40% { - box-shadow: 0 2.5em 0 0 #56CA69; + * > td:nth-child(7) { + width: 6em; + } + * > td:nth-child(9),td:nth-child(10) { + width: 2em; + } + .table { + margin-bottom: 1em; } } -/* Help table */ - -.divTable{ - display: table; - width: 100%; -} -.divTableRow { - display: table-row; -} -.divTableHeading { - background-color: #EEE; - display: table-header-group; -} -.divTableHead { - border: 0px solid #999999; - display: table-cell; - padding: 3px 10px; - font-weight: bold; -} -.divTableCell { - border: 0px solid #999999; - display: table-cell; - padding: 3px 10px; -} -.divTableHeading { - background-color: #EEE; - display: table-header-group; - font-weight: bold; -} -.divTableFoot { - background-color: #EEE; - display: table-footer-group; - font-weight: bold; -} -.divTableBody { - display: table-row-group; +#alerts { + span { + padding-left: 10px; + } + span:nth-child(1) { + padding-left: 0px; + } + * > td:nth-child(1) { + width: 20em; + } } diff --git a/glances/outputs/static/css/variables.less b/glances/outputs/static/css/variables.less deleted file mode 100644 index c75804d801..0000000000 --- a/glances/outputs/static/css/variables.less +++ /dev/null @@ -1,4 +0,0 @@ - -@import "~bootstrap/less/variables.less"; - -@grid-columns: 24; diff --git a/glances/outputs/static/js/App.vue b/glances/outputs/static/js/App.vue index 5e99aa98a5..9ee6d3acf0 100644 --- a/glances/outputs/static/js/App.vue +++ b/glances/outputs/static/js/App.vue @@ -4,81 +4,87 @@
-
-
-
-
- -
-
- -
-
- -
+
+
+
+ +
+
+ +
+
+ +
+
+
-
-
-
-
-
- -
+
+
+
-
-
- +
+
+
+ +
-
+ +
-
- + + + +
-
+ +
- - -
+ +
-
+ +
-
-
+
+
-