1 files changed, 111 insertions, 30 deletions

diff --git a/glances/outputs/static/css/style.css b/glances/outputs/static/css/style.css
index 3ac50123..d1bf4d1b 100644
--- a/glances/outputs/static/css/style.css
+++ b/glances/outputs/static/css/style.css
@@ -3,31 +3,48 @@ body {
     color: #BBB;
     font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
 }
-.plugin {
-    margin-bottom: 20px;
-}
-.plugin table {
+
+.table {
+    display: table;
     width: 100%;
 }
-.plugin table tr td:not(:first-child) {
+.table-row-group {
+    display: table-row-group
+}
+.table-row {
+    display: table-row;
+}
+.table-cell {
+    display: table-cell;
     text-align: right;
 }
 
-.underline{
+.plugin {
+    margin-bottom: 20px;
+}
+.plugin.table-row-group .table-row:last-child .table-cell {
+    padding-bottom: 20px;
+}
+
+.underline {
     text-decoration: underline
 }
-.bold{
+.bold {
     font-weight: bold;
 }
-.sort{
+.sort {
     font-weight: bold;
-}
-.sort:after{
-    content: '\25BC'
+    color: white;
 }
 .text-right {
     text-align: right;
 }
+.text-left {
+    text-align: left;
+}
+.sidebar .table-cell:not(.text-left) {
+    padding-left: 10px;
+}
 
 /* Theme */
 
@@ -35,6 +52,10 @@ body {
     font-weight: bold;
     color: white;
 }
+.highlight {
+    font-weight: bold;
+    color: magenta;
+}
 .ok {
     color: green;
 }
@@ -53,10 +74,10 @@ body {
     color: white;
 }
 .warning {
-    color: orange;
+    color: magenta;
 }
 .warning_log {
-    background-color: orange;
+    background-color: magenta;
     color: white;
 }
 .critical {
@@ -77,25 +98,85 @@ body {
 }
 
 /* Plugins */
-#cpu table tr td:nth-child(3),
-#mem table tr td:nth-child(3),
-#monitor table tr td:nth-child(3) {
-    text-align: left;
-    padding-left: 20px;
-}
-#processlist table tr td {
-    text-align: right;
-}
-#processlist table tr td,
-#docker table tr td {
+#processlist .table-cell, #containers .table-cell {
     padding: 0px 5px 0px 5px;
     white-space: nowrap;
 }
-#processlist table tr td:nth-child(6),
-#processlist table tr td:nth-child(12) {
-    text-align: left;
+gl-monitor-list {
+    display: block;
 }
-#docker table tr td:nth-child(2),
-#docker table tr td:nth-child(6) {
+gl-monitor-list .table-cell {
     text-align: left;
-}
\ No newline at end of file
+}
+/* Loading page */
+
+#loading-page .glances-logo {
+    background: url('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;
+    }
+    40% {
+        box-shadow: 0 2.5em 0 0 #56CA69;
+    }
+}
+@keyframes loader {
+    0%, 80%, 100% {
+        box-shadow: 0 2.5em 0 -1.3em #56CA69;
+    }
+    40% {
+        box-shadow: 0 2.5em 0 0 #56CA69;
+    }
+}