diff --git a/app/assets/sass/global/_color-schemes.scss b/app/assets/sass/global/_color-schemes.scss index d0a5a4c..904ec40 100644 --- a/app/assets/sass/global/_color-schemes.scss +++ b/app/assets/sass/global/_color-schemes.scss @@ -6,6 +6,44 @@ //----------------------------------*/ .color-scheme--light { // Light scheme is not ready for now. + %colorTxtCurrent { + color:$_color_light_delta; + } + + %colorHightContrast { + color:$_color_alpha; + } + + // For panel and the sidebar + %colorBkgPanel { + background:$_color_light_beta; + } + + %colorLink { + color:$_color_light_delta; + transition-duration: 0.5s; + transition-property: color; + + &:hover { + color:$_color_alpha; + } + } + + %colorBorderThin { + border-color:$_color_light_epsilon; + } + + %colorBkgTopbar { + background:$_color_light_alpha; + } + + %colorBkgTopbarPanel { + background:$_color_light_beta; + } + + %colorBkgTopbarButton { + background:$_color_light_alpha; + } } // Dark Scheme diff --git a/app/assets/sass/modules-interface/_main.scss b/app/assets/sass/modules-interface/_main.scss index c474beb..54f2866 100644 --- a/app/assets/sass/modules-interface/_main.scss +++ b/app/assets/sass/modules-interface/_main.scss @@ -17,7 +17,7 @@ } .color-scheme--light & { - background:$_color_light_beta; + background:$_color_omega; } table {width:100%;} @@ -50,7 +50,7 @@ } .color-scheme--light & { - color:$_color_light_alpha; + color:$_color_light_delta; } } } @@ -66,7 +66,7 @@ } .color-scheme--light & { - border-top-color:$_color_light_beta; + border-top-color:$_color_light_delta; } } diff --git a/app/assets/sass/modules-objects/_data-table.scss b/app/assets/sass/modules-objects/_data-table.scss index 80920af..bc84635 100644 --- a/app/assets/sass/modules-objects/_data-table.scss +++ b/app/assets/sass/modules-objects/_data-table.scss @@ -51,7 +51,7 @@ } .color-scheme--light & { - border-color:$_color_light_beta; + border-color:$_color_light_epsilon; } } @@ -83,7 +83,7 @@ } .color-scheme--light & { - border-color:$_color_light_beta; + border-color:$_color_light_epsilon; } /* &:before { */ @@ -128,8 +128,8 @@ } .color-scheme--light & { - background:$_color_light_beta; - border-color:$_color_light_gamma; + background:$_color_light_alpha; + border-color:$_color_light_epsilon; &.state--asc, &.state--desc {background:$_color_light_alpha;} @@ -332,4 +332,4 @@ time.data-table__data { .color-scheme--light & { color:$_color_light_delta; } -} \ No newline at end of file +} diff --git a/app/assets/sass/modules-objects/_filters.scss b/app/assets/sass/modules-objects/_filters.scss index dec783d..21a2814 100644 --- a/app/assets/sass/modules-objects/_filters.scss +++ b/app/assets/sass/modules-objects/_filters.scss @@ -13,7 +13,7 @@ .color-scheme--light & { background:$_color_light_gamma; - border-color:$_color_light_beta; + border-color:$_color_light_epsilon; } } @@ -49,7 +49,7 @@ } .color-scheme--light & { - border-color:$_color_light_beta; + border-color:$_color_light_epsilon; } .filters__item--more &, @@ -80,7 +80,7 @@ } .color-scheme--light & { - background:$_color_light_beta; + background:$_color_light_epsilon; color:$_color_alpha; } } @@ -125,4 +125,4 @@ color:$_color_alpha; } } -} \ No newline at end of file +} diff --git a/app/assets/sass/modules-objects/_panes.scss b/app/assets/sass/modules-objects/_panes.scss index ab9a824..031efb3 100644 --- a/app/assets/sass/modules-objects/_panes.scss +++ b/app/assets/sass/modules-objects/_panes.scss @@ -21,7 +21,7 @@ } .color-scheme--light & { - background:$_color_light_gamma; + background:$_color_light_alpha; } } @@ -56,7 +56,7 @@ } .color-scheme--light & { - border-color:$_color_light_beta; + border-color:$_color_light_delta; } .panes--2 & {width:50%;} diff --git a/app/assets/sass/modules-objects/_togglable-tabs.scss b/app/assets/sass/modules-objects/_togglable-tabs.scss index af07254..9838ed4 100644 --- a/app/assets/sass/modules-objects/_togglable-tabs.scss +++ b/app/assets/sass/modules-objects/_togglable-tabs.scss @@ -25,7 +25,14 @@ &[aria-expanded="true"] { border-width:0 0 3px; - color:$_color_omega; + .color-scheme--dark & { + color:$_color_omega; + } + + .color-scheme--light & { + color:$_color_alpha; + } + } :first-child > & {margin:0;} @@ -53,4 +60,4 @@ display:block; visibility:visible; } -} \ No newline at end of file +} diff --git a/app/assets/sass/settings/_variables.scss b/app/assets/sass/settings/_variables.scss index f14a971..79118c4 100644 --- a/app/assets/sass/settings/_variables.scss +++ b/app/assets/sass/settings/_variables.scss @@ -9,10 +9,12 @@ $_img_path: "../images/" !default; // Colors //----------------------------------*/ // Light scheme -$_color_light_alpha: '' !default; -$_color_light_beta: '' !default; -$_color_light_gamma: '' !default; -$_color_light_delta: red !default; +$_color_light_alpha: #EEEEEE !default; +$_color_light_beta: #F9F9F9 !default; +$_color_light_gamma: #FFFFFF !default; +$_color_light_delta: #333333 !default; +$_color_light_epsilon: #c0c1c2 !default; + // Dark scheme $_color_dark_alpha: #252C35 !default; diff --git a/app/assets/sass/temporary.scss b/app/assets/sass/temporary.scss index cfbc3b9..c1f83a4 100644 --- a/app/assets/sass/temporary.scss +++ b/app/assets/sass/temporary.scss @@ -38,8 +38,14 @@ } .subcomponent__live { - background-color: #252C35; - //background-color: #353D48; + + .color-scheme--dark & { + background-color:$_color_dark_alpha; + } + + .color-scheme--light & { + background-color:$_color_light_alpha; + } padding: 0px 15px; float: left; @@ -51,39 +57,89 @@ } .subcomponent__live table { - background-color: #49515C; + .color-scheme--dark & { + background-color:$_color_dark_gamma; + } + + .color-scheme--light & { + background-color:$_color_light_gamma; + } + } .subcomponent__live h2 { margin: 15px 0px 20px 0px; - color: #FFFFFF; + .color-scheme--dark & { + color:$_color_omega; + } + + .color-scheme--light & { + color:$_color_alpha; + } } .subcomponent__live p { - color: #FFFFFF; + .color-scheme--dark & { + background-color:$_color_dark_gamma; + } + + .color-scheme--light & { + background-color:$_color_light_gamma; + } } .subcomponent__live label { - color: #A2AAB4; + .color-scheme--dark & { + background-color:$_color_dark_delta; + } + + .color-scheme--light & { + background-color:$_color_light_delta; + } } .subcomponent__title { width: 94%; clear: both; - background-color: #49515C; + .color-scheme--dark & { + background-color:$_color_dark_gamma; + } + + .color-scheme--light & { + background-color:$_color_light_gamma; + } + } .subcomponent__title h1 { font-size: 2em; - color: #FFFFFF; + .color-scheme--dark & { + color:$_color_omega; + } + + .color-scheme--light & { + color:$_color_alpha; + } + } .subcomponent__title h1 span { font-size: 20px; - color: #A2AAB4; + .color-scheme--dark & { + color:$_color_dark_delta; + } + + .color-scheme--light & { + color:$_color_light_delta; + } + +} + +.subcomponent__title h1 span a { + text-decoration: none; } .subcomponent__small { - min-height: 160px; + min-height: 190px; } diff --git a/app/components/host/host_cpu/host_cpu.html b/app/components/host/host_cpu/host_cpu.html index 0b22afa..8239623 100644 --- a/app/components/host/host_cpu/host_cpu.html +++ b/app/components/host/host_cpu/host_cpu.html @@ -1,5 +1,15 @@
{{host.cpuService.plugin_output}}
+State | +|
Output | +{{host.cpuService.plugin_output}} | +
-
{{host.live.plugin_output}}
+State | +|
Output | +{{host.live.plugin_output}} | +
{{host.loadService.plugin_output}}
+State | +|
Output | +{{host.loadService.plugin_output}} | +
Last check: {{service.last_check|timeElapsed}}
-Last state change: {{service.last_state_change|timeElapsed}}
-Acknowledged: {{isAcknowledged}}
+Last check | +{{service.last_check|timeElapsed}} | +
Last state change | +{{service.last_state_change|timeElapsed}} | +
Acknowledged | +{{isAcknowledged}} | +
State | +|
Output | +{{service.plugin_output}} | +
Description: {{service.description}}
-Host Name: {{service.host_name}}
-Current state:
Live plugin output: {{service.plugin_output}}
+Metrics
+