diff options
Diffstat (limited to 'web/css/_src')
| -rw-r--r-- | web/css/_src/_config.libs.scss | 45 | ||||
| -rw-r--r-- | web/css/_src/_mixins.scss | 39 | ||||
| -rw-r--r-- | web/css/_src/frontend.scss | 83 | ||||
| -rw-r--r-- | web/css/_src/utilities.scss | 38 |
4 files changed, 129 insertions, 76 deletions
diff --git a/web/css/_src/_config.libs.scss b/web/css/_src/_config.libs.scss index df02c1c..21d35c9 100644 --- a/web/css/_src/_config.libs.scss +++ b/web/css/_src/_config.libs.scss @@ -1,26 +1,27 @@ -/* Buttons */ -$button-default-color: #c5c5c5; -$button-red: #ff0000; -$button-orange: #fe9c43; -$button-purple: #9a68c7; -$button-blue: #3ba9e4; -$button-green: #75b343; -$button-black: #4b4b4b; -$button-salmon: #F5AD9E; +@import "_config.frontend"; /* Labels */ -$label-default: #bfbfbf; -$label-success: #46a546; -$label-warning: #f89406; -$label-important: #c43c35; -$label-notice: #62cffc; -$label-border-radius: 3px; -$label-font-size: 10px; +$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(#99AEC4, 7%); -$classic-box-background: #fff; -$classic-box-border: lighten(#99AEC4, 16%); -$classic-box-header-height: 35px; -$classic-box-title-color: #fff; -$classic-box-title-fontsize: 14px; +$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 index d547306..450bf76 100644 --- a/web/css/_src/_mixins.scss +++ b/web/css/_src/_mixins.scss @@ -15,22 +15,29 @@ } } -@mixin letterpress($opacity) { - text-shadow: rgba(255, 255, 255, $opacity) 0 1px 0; -} +@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)); -@mixin hide-text { - font: 0/0 a; - text-shadow: none; - color: transparent; -} + @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)); -@mixin link-colors($normal, $hover: $normal, $visited: $normal) { - color: $normal; - &:hover, &:focus { - color: $hover; + @if $get == null { + @return map-get-deep-warning($warn, $get); + } + } + @else { + @return map-get-deep-warning($warn, $get); + } + } } - &:visited { - color: $visited; - } -} + + @return $get; +}
\ No newline at end of file diff --git a/web/css/_src/frontend.scss b/web/css/_src/frontend.scss index 341aa75..2369695 100644 --- a/web/css/_src/frontend.scss +++ b/web/css/_src/frontend.scss @@ -52,7 +52,7 @@ nav[role="main"] { #appname { float: left; - width: 120px; + width: 150px; text-align: left; a { @@ -232,6 +232,35 @@ table.firstBold tbody tr td:first-child { /* --------------------------- */ +/* == 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 { @@ -239,3 +268,55 @@ table.firstBold tbody tr td:first-child { font-weight: normal; } } + + + + +/* ------------------------- */ +/* == 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; + } + } +}
\ No newline at end of file diff --git a/web/css/_src/utilities.scss b/web/css/_src/utilities.scss index a08dd0d..0dddffa 100644 --- a/web/css/_src/utilities.scss +++ b/web/css/_src/utilities.scss @@ -6,8 +6,7 @@ /* -------------------- */ /* == Fonts */ /* -------------------- */ - -@include font-face('OpenSans-Light', font-files('OpenSans-Light.ttf')); +@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"; @@ -15,7 +14,6 @@ /* ------------------- */ /* == Misc */ /* ------------------- */ - * { padding: 0; margin: 0; } *:focus { outline: none; } @@ -37,11 +35,6 @@ img { border: 0; } .debug { border: 1px solid red; } -.u { text-decoration: underline; } -.b { font-weight: bold; } -.i { font-style: italic; } -.r { text-decoration: line-through; } - .text_left, .t-left { text-align: left; } .text_right, .t-right { text-align: right !important; } .text_center, .t-center { text-align: center; } @@ -65,9 +58,6 @@ img { border: 0; } width: 66%; } -.m-l-10 { margin-left: 10px; } -.m-r-10 { margin-right: 10px; } - /*pre { background-color: #fafafa; @@ -83,32 +73,6 @@ img { border: 0; } .w50p { width: 50%; } .w100p { width: 100%; } -.w30 { width: 30px; } -.w50 { width: 50px; } -.w60 { width: 60px; } -.w70 { width: 70px; } -.w75 { width: 75px; } -.w90 { width: 90px; } -.w100 { width: 100px; } -.w110 { width: 110px; } -.w120 { width: 120px; } -.w130 { width: 130px; } -.w150 { width: 150px; } -.w180 { width: 180px; } -.w200 { width: 200px; } -.w220 { width: 220px; } -.w250 { width: 250px; } -.w300 { width: 300px; } -.w350 { width: 350px; } -.w400 { width: 400px; } -.w450 { width: 450px; } -.w500 { width: 500px; } -.w600 { width: 600px; } -.w700 { width: 700px; } -.w800 { width: 800px; } -.w900 { width: 900px; } -.w1000 { width: 1000px; } - /* ------------------------ */ /* == Scrollbar */ |