From f5993a6ce77bb066f0941d30fb68ffc7d91d5527 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Wed, 10 Dec 2014 02:22:28 +0100 Subject: [PATCH] Update layout. --- src/_h5ai/client/css/inc/general.less | 83 ++++++++++++++++++---- src/_h5ai/client/css/inc/h5ai-info.less | 33 ++------- src/_h5ai/client/css/inc/view-details.less | 8 ++- src/_h5ai/client/css/inc/view-grid.less | 7 +- src/_h5ai/client/css/inc/view-icons.less | 7 +- src/_h5ai/client/css/inc/view.less | 10 +-- 6 files changed, 95 insertions(+), 53 deletions(-) diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less index 83b102eb..c3242467 100644 --- a/src/_h5ai/client/css/inc/general.less +++ b/src/_h5ai/client/css/inc/general.less @@ -1,16 +1,32 @@ +// @col-blue: #2196F3; +@col-blue: #42a5f5; +@col-green: #4caf50; +@col-red: #f44336; -@col: #333; -@col-back: #eee; -@col-hover: #42a5f5; +@col-light: #ffffff; +@col-lightgray: #fafafa; +@col-darkgray: #eeeeee; +// @col-dark: #333; +@col-dark: #212121; + +@col-font-light: @col-light; +@col-font-dark: @col-dark; + +@col-back-light: @col-lightgray; +@col-back-dark: @col-darkgray; + +@col: @col-dark; +@col-back: @col-back-dark; +@col-hover: @col-blue; @col-border: rgba(0,0,0,0.05); @col-border-strong: rgba(0,0,0,0.15); @col-border-stronger: rgba(0,0,0,0.3); -@col-okay: #689f38; -@col-error: #d32f2f; +@col-okay: @col-green; +@col-error: @col-red; -@col-link: #42a5f5; -@col-link-hover: #42a5f5; +@col-link: @col-blue; +@col-link-hover: @col-blue; @col-widget-back: rgb(245,245,245); @col-widget-back-highlight: rgba(255,255,255,0.8); @@ -34,8 +50,8 @@ @font-family-mono: monospace; -::-moz-selection { background: #42a5f5; color: #fff; text-shadow: none; } -::selection { background: #42a5f5; color: #fff; text-shadow: none; } +::-moz-selection { background: @col-blue; color: @col-font-light; text-shadow: none; } +::selection { background: @col-blue; color: @col-font-light; text-shadow: none; } .transition (@transition) { -webkit-transition: @transition; @@ -49,6 +65,49 @@ zoom: 1; } +.card() { + box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); +} + +.raised() { + box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5); +} + +.rounded() { + overflow: hidden; + border-radius: 2px; +} + +.el-button() { + .card(); + .rounded(); + .transition(all 0.2s ease-in-out); + color: @col-light; + background: @col-blue; + border-radius: 2px; + cursor: pointer; + text-decoration: none; + + &:hover { + .raised(); + } +} + +.el-input() { + .card(); + .rounded(); + -moz-appearance: none; + -ms-appearance: none; + -webkit-appearance: none; + font-family: @font-family; + font-weight: @font-weight; + color: @col-dark; + background: @col-light; + border: none; + outline: none; +} + + html { min-height: 100%; overflow: auto; @@ -97,6 +156,6 @@ body { height: 0; } -*:focus { - outline: 1px solid #42a5f5; -} +// *:focus { +// outline: 1px solid #42a5f5; +// } diff --git a/src/_h5ai/client/css/inc/h5ai-info.less b/src/_h5ai/client/css/inc/h5ai-info.less index 72f0b789..3b96189f 100644 --- a/src/_h5ai/client/css/inc/h5ai-info.less +++ b/src/_h5ai/client/css/inc/h5ai-info.less @@ -46,42 +46,20 @@ body#h5ai-info { } #pass { - -moz-appearance: none; - -ms-appearance: none; - -webkit-appearance: none; - font-family: @font-family; - font-weight: @font-weight; - color: @col; - background: #fff; - border: none; - outline: none; + .el-input(); display: inline-block; - width: 200px; - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); - border-radius: 2px; margin: 8px; padding: 0 12px; line-height: 28px; + width: 200px; } #login, #logout { + .el-button(); display: inline-block; margin: 8px; padding: 0 12px; - background: #42a5f5; - color: #fff; line-height: 28px; - cursor: pointer; - border-radius: 2px; - cursor: pointer; - text-decoration: none; - .transition(all 0.2s ease-in-out); - - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); - - &:hover { - box-shadow: 0 1px 8px 0px rgba(0,0,0,0.5); - } } #hint { @@ -98,11 +76,10 @@ body#h5ai-info { padding: 0; .test { + .card(); + .rounded(); margin: 12px 0 0 0; padding: 8px; - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); - background: #fff; - border-radius: 2px; } .label { display: inline-block; diff --git a/src/_h5ai/client/css/inc/view-details.less b/src/_h5ai/client/css/inc/view-details.less index a5b20d70..aafae0a1 100644 --- a/src/_h5ai/client/css/inc/view-details.less +++ b/src/_h5ai/client/css/inc/view-details.less @@ -27,6 +27,7 @@ margin: 16px; #items { + .rounded(); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); } @@ -65,10 +66,11 @@ } .item { + overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.07); &:hover { - box-shadow: 0 1px 10px 0px rgba(0,0,0,0.5); + .raised(); z-index: 1; } } @@ -81,6 +83,7 @@ padding: 8px; .thumb { + .rounded(); box-shadow: 0 0 1px 0 rgba(0,0,0,0.2); } } @@ -102,7 +105,8 @@ } .selector { - margin-top: -1px; + left: -2px; + top: -2px; } .view-details-sized(16px) diff --git a/src/_h5ai/client/css/inc/view-grid.less b/src/_h5ai/client/css/inc/view-grid.less index e8297e05..8c328b51 100644 --- a/src/_h5ai/client/css/inc/view-grid.less +++ b/src/_h5ai/client/css/inc/view-grid.less @@ -21,12 +21,13 @@ margin: 8px; .item { + .card(); + .rounded(); float: left; margin: 8px; - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); - &:hover, &.hover { - box-shadow: 0 1px 10px 0px rgba(0,0,0,0.5); + &:hover { + .raised(); } } diff --git a/src/_h5ai/client/css/inc/view-icons.less b/src/_h5ai/client/css/inc/view-icons.less index aa18895a..d5029774 100644 --- a/src/_h5ai/client/css/inc/view-icons.less +++ b/src/_h5ai/client/css/inc/view-icons.less @@ -24,12 +24,13 @@ margin: 8px; .item { + .card(); + .rounded(); float: left; margin: 8px; - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); - &:hover, &.hover { - box-shadow: 0 1px 12px 0px rgba(0,0,0,0.5); + &:hover { + .raised(); } } diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less index d32e4c58..8105a520 100644 --- a/src/_h5ai/client/css/inc/view.less +++ b/src/_h5ai/client/css/inc/view.less @@ -112,16 +112,16 @@ .selector { display: none; position: absolute; - left: -4px; - top: 4px; + left: 0; + top: 0; width: 22px; height: 22px; background-color: #fff; cursor: pointer; - box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); - border-radius: 0 20px 20px 0; + box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); + border-radius: 0 0 12px 0; opacity: 0.6; - padding: 2px; + padding: 0px; &:hover { opacity: 0.8;