diff --git a/web/css/_src/_config.frontend.scss b/web/css/_src/_config.frontend.scss new file mode 100644 index 0000000..e900d34 --- /dev/null +++ b/web/css/_src/_config.frontend.scss @@ -0,0 +1,48 @@ +@import "_mixins"; + +/* Navbar */ +$navbar-height: 60px; + +/* Layout */ +$layout-bg-color: #fff; + +/* Default colors */ +$main-color: #99AEC4; +$text-color: #4D5157; + +/* Themes ! */ +$themes: ( + blue: ( + main-color: #99AEC4 + ), + aqua: ( + main-color: #75C8C7 + ), + green: ( + main-color: #9DC499 + ), + light-green: ( + main-color: #ADD8C7 + ), + orange: ( + main-color: #E8B184 + ), + red: ( + main-color: #B36973 + ), + light-red: ( + main-color: #E89D9D + ), + purple: ( + main-color: #AA8ECC + ), + slate: ( + main-color: #7C8998 + ), + light: ( + main-color: #C4C4C4 + ), + dark: ( + main-color: #747474 + ) +); \ No newline at end of file diff --git a/web/css/_src/_config.libs.scss b/web/css/_src/_config.libs.scss new file mode 100644 index 0000000..21d35c9 --- /dev/null +++ b/web/css/_src/_config.libs.scss @@ -0,0 +1,27 @@ +@import "_config.frontend"; + +/* Labels */ +$label: ( + types: ( + default: #bfbfbf, + success: #46a546, + warning: #f89406, + important: #c43c35, + error: #c43c35, + notice: #62cffc + ), + border-radius: 3px, + font-size: 10px +); + +/* Classic box */ +$classic-box: ( + color: darken($main-color, 7%), + background: #fff, + border-color: lighten($main-color, 16%), + header: ( + height: 35px, + color: #fff, + font-size: 14px + ) +); \ No newline at end of file diff --git a/web/css/_src/_mixins.scss b/web/css/_src/_mixins.scss new file mode 100644 index 0000000..450bf76 --- /dev/null +++ b/web/css/_src/_mixins.scss @@ -0,0 +1,43 @@ +@mixin debug($color: red) { + border: 1px solid $color; +} + +@mixin clearfix { + zoom:1; + &:before, &:after { + content: "\0020"; + display: block; + height: 0; + overflow: hidden; + } + &:after { + clear: both; + } +} + +@function map-get-deep($map, $keys...) { + @if length($keys) == 1 { + $keys: nth($keys, 1); + } + $warn: "#{nth($keys, 1)}"; + $length: length($keys); + $get: map-get($map, nth($keys, 1)); + + @if $length > 1 { + @for $i from 2 through $length { + @if $get != null and type-of($get) == 'map' { + $warn: $warn + "->#{nth($keys, $i)}"; + $get: map-get($get, nth($keys, $i)); + + @if $get == null { + @return map-get-deep-warning($warn, $get); + } + } + @else { + @return map-get-deep-warning($warn, $get); + } + } + } + + @return $get; +} \ No newline at end of file diff --git a/web/css/_src/frontend.scss b/web/css/_src/frontend.scss new file mode 100644 index 0000000..be675f9 --- /dev/null +++ b/web/css/_src/frontend.scss @@ -0,0 +1,351 @@ +@charset "UTF-8"; +@import "compass"; +@import "_config.frontend"; + +html { + height: 100%; +} + +body { + font-size: 14px; + font-family: OpenSans-Light, Verdana, sans-serif, Arial; + margin: 0 auto; + color: $text-color; + background-color: $layout-bg-color; +} + +a { + color: $main-color; + + &:hover { + color: lighten($main-color, 5%); + text-decoration: none; + } +} + +::-moz-selection { + background-color: darken($main-color, 10%); + color: lighten($main-color, 30%); +} +::selection { + background-color: darken($main-color, 10%); + color: lighten($main-color, 30%); +} + +/* --------------------- */ +/* == NAVBAR */ +/* --------------------- */ +nav[role="main"] { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: $main-color; + height: $navbar-height; + width: 100%; + padding-left: 5px; + color: #fff; + font-size: 16px; + text-align: center; + z-index: 2; + + #appname { + float: left; + width: 150px; + text-align: left; + + a { + color: #fff; + text-decoration: none; + + &:first-child { + font-size: 24px; + + span[class^="icon-"] { + font-size: 30px; + margin-right: 10px; + } + } + + &:last-child { + display: block; + font-size: 11px; + font-style: italic; + } + } + } + + #hostname { + float: left; + margin-left: 110px; + line-height: $navbar-height; + + a { + color: #fff; + text-decoration: none; + } + } + + #update { + float: left; + margin-left: 100px; + line-height: $navbar-height; + font-size: 13px; + + a { + color: #fff; + } + } + + > ul { + text-align: right; + list-style-type: none; + + > li { + display: inline-block; + + > a { + display: inline-block; + padding: (($navbar-height / 2) - 17px) 15px; + color: #fff; + text-decoration: none; + + &:hover { + background: lighten($main-color, 20%); + } + + > span[class^="icon-"] { + font-size: 30px; + } + } + } + } +} + + + +/* ------------------- */ +/* == MAIN */ +/* ------------------- */ +#main-container { + overflow: auto; + margin-top: $navbar-height; + background-color: $layout-bg-color; + padding: 20px 25px; +} + + + +/* --------------------- */ +/* == Tables */ +/* --------------------- */ +table:not(.no-style) { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + font-size: 13px; + + tr { + border-bottom: 1px solid #ebebeb; + border-top: 1px solid #fff; + } + thead tr { + border-top: none; + } + tbody tr:last-child { + border-bottom: none; + } + tbody tr:nth-child(odd) { + background: #f2f2f2; + } + tbody tr td, thead tr th { + padding: 6px 8px; + position: relative; + text-align: left; + } + tbody tr td:last-child, thead tr th:last-child { + border-right: none; + } + tbody tr td:first-child, thead tr th:first-child { + border-left: none; + } + thead { + color: #898989; + font-size: 13px; + font-weight: bold; + + tr th { + text-align: center; + } + } + tbody tr:hover { + background: lighten($main-color, 25%); + } +} + +table.firstBold tbody tr td:first-child { + font-weight: bold; + color: #7e848c; +} + + +/* --------------------------- */ +/* == Progress bar */ +/* --------------------------- */ +.progressbar-wrap { + width: 100%; + background-color: rgba($main-color, 0.2); + + .progressbar { + text-indent: 5px; + + &.green { background-color: #7BCE6C; } + &.orange { background-color: #E3BB80; } + &.red { background-color: #CF6B6B; } + } +} + + +/* --------------------------- */ +/* == Reload style */ +/* --------------------------- */ +.reload.spin { + @include animation(spin 2000ms infinite linear); +} + +@-ms-keyframes spin { + from { -ms-transform: rotate(0deg); } + to { -ms-transform: rotate(360deg); } +} +@-moz-keyframes spin { + from { -moz-transform: rotate(0deg); } + to { -moz-transform: rotate(360deg); } +} +@-webkit-keyframes spin { + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(360deg); } +} +@keyframes spin { + from { + transform:rotate(0deg); + } + to { + transform:rotate(360deg); + } +} + + +/* --------------------------- */ +/* == Load Average */ +/* --------------------------- */ +.box#esm-load_average { + h3 { + font-weight: normal; + } +} + + + + +/* ------------------------- */ +/* == ! THEMES ! */ +/* ------------------------- */ +@each $name, $datas in $themes { + body.theme-#{""+$name+""} { + a { + color: map-get($datas, main-color); + + &:hover { + color: lighten(map-get($datas, main-color), 5%); + text-decoration: none; + } + } + + ::-moz-selection { + background-color: darken(map-get($datas, main-color), 10%); + color: lighten(map-get($datas, main-color), 30%); + } + ::selection { + background-color: darken(map-get($datas, main-color), 10%); + color: lighten(map-get($datas, main-color), 30%); + } + + nav[role="main"] { + background-color: map-get($datas, main-color); + + > ul > li > a { + &:hover { + background: lighten(map-get($datas, main-color), 15%); + } + } + } + + table:not(.no-style) { + tbody tr:hover { + background: lighten(map-get($datas, main-color), 25%); + } + } + + .progressbar-wrap { + background-color: rgba(map-get($datas, main-color), 0.2); + } + } +} + + + +/* ------------------------- */ +/* == Responsive */ +/* ------------------------- */ +@media only screen and (max-width: 1024px) { + .column-left, .column-right { + float: none; + width: 100%; + } + .box { + width: 100%; + margin-right: 0 !important; + margin-left: 0 !important; + } +} + +@media only screen and (max-width: 550px) { + nav[role="main"] { + #appname { + width: 135px; + } + + #hostname { + margin-left: 0; + font-size: 12px; + } + + #update { + margin-left: 0; + font-size: 9px; + position: absolute; + top: 47px; + line-height: inherit; + } + + ul > li { + > a { + padding: 12px 0; + } + } + } + + .box#esm-load_average { + div { + width: 100%; + float: none; + } + } + + .box#esm-disk { + .filesystem { + display: none; + } + } +} + diff --git a/web/css/_src/utilities.scss b/web/css/_src/utilities.scss new file mode 100644 index 0000000..3f2553b --- /dev/null +++ b/web/css/_src/utilities.scss @@ -0,0 +1,111 @@ +@charset "UTF-8"; +@import "compass"; +@import "_config.libs"; + + +/* -------------------- */ +/* == Fonts */ +/* -------------------- */ +@include font-face('OpenSans-Light', font-files('OpenSans-Light.ttf', 'OpenSans-Light.svg', 'OpenSans-Light.woff'), 'OpenSans-Light.eot'); +@include font-face('Entypo', font-files('entypo.ttf', 'entypo.eot', 'entypo.svg', 'entypo.woff')); + +@import "../libs/_icons.entypo"; + +/* ------------------- */ +/* == Misc */ +/* ------------------- */ +* { padding: 0; margin: 0; } +*:focus { outline: none; } + +*, *:before, *:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.cls:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +img { border: 0; } + +.debug { border: 1px solid red; } + +.text_left, .t-left { text-align: left !important; } +.text_right, .t-right { text-align: right !important; } +.text_center, .t-center { text-align: center !important; } + +.pfixed { position: fixed !important; } +.f-left { float: left; } +.f-right { float: right; } + +.column-left { + float: left; + width: 49%; +} +.column-right { + float: right; + width: 49%; +} +.column-33 { + width: 32%; +} +.column-66 { + width: 66%; +} + + +/*pre { + background-color: #fafafa; + border: 1px solid #ccc; + padding: 5px; + color: #666; +}*/ + +.w10p { width: 10%; } +.w15p { width: 15%; } +.w20p { width: 20%; } +.w33p { width: 33%; } +.w35p { width: 35%; } +.w50p { width: 50%; } +.w100p { width: 100%; } + + +/* ------------------------ */ +/* == Scrollbar */ +/* ------------------------ */ +::-webkit-scrollbar-track { + box-shadow: inset 1px 0px 3px rgba(0,0,0,0.2); + background-color: #F5F5F5; +} +::-webkit-scrollbar-track:hover { + background-color: #EFEFEF; +} +::-webkit-scrollbar { + width: 8px; + background-color: #F5F5F5; +} +::-webkit-scrollbar-thumb { + background-color: #959595; +} +::-webkit-scrollbar-thumb:hover { + background-color: #6B6B6B; +} +::-webkit-scrollbar-thumb:active { + background-color: #555; +} + + +/* --------------------- */ +/* == Labels */ +/* --------------------- */ +@import "../libs/_labels"; + +/* -------------------------- */ +/* == Classic box */ +/* -------------------------- */ +@import "../libs/_classic-box";