From 6913d28abb25f09c1de99d9148c1fa0e0ff9fb48 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 13 Nov 2017 12:03:28 +0000 Subject: [PATCH] Editor header styling. --- services/web/public/stylesheets/app/base.less | 2 +- .../web/public/stylesheets/app/editor.less | 4 +-- .../public/stylesheets/app/editor/chat.less | 4 +-- .../stylesheets/app/editor/history.less | 6 ++--- .../public/stylesheets/app/editor/search.less | 2 +- .../stylesheets/app/editor/toolbar.less | 17 ++++++------ .../public/stylesheets/app/translations.less | 2 +- .../stylesheets/core/_common-variables.less | 27 ++++++++++++++----- .../public/stylesheets/core/ol-variables.less | 12 +++++++++ 9 files changed, 51 insertions(+), 25 deletions(-) diff --git a/services/web/public/stylesheets/app/base.less b/services/web/public/stylesheets/app/base.less index a78e1a7cfa..7f2d9a55ed 100644 --- a/services/web/public/stylesheets/app/base.less +++ b/services/web/public/stylesheets/app/base.less @@ -2,7 +2,7 @@ padding: (@line-height-computed / 4) (@line-height-computed / 2); background-color: @state-warning-bg; color: #333; - border-bottom: 1px solid @toolbar-border-color; + border-bottom: 1px solid @common-border-color; } .clickable { diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 75b7121094..017ea2ecc8 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -250,8 +250,8 @@ .ui-layout-resizer { width: 6px; background-color: #f4f4f4; - border-left: 1px solid @toolbar-border-color; - border-right: 1px solid @toolbar-border-color; + border-left: 1px solid @editor-border-color; + border-right: 1px solid @editor-border-color; .ui-layout-toggler { color: #999; font-family: FontAwesome; diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less index d0ad76fe9c..c782384cb7 100644 --- a/services/web/public/stylesheets/app/editor/chat.less +++ b/services/web/public/stylesheets/app/editor/chat.less @@ -126,12 +126,12 @@ height: @new-message-height; background-color: @gray-lightest; padding: @line-height-computed / 4; - border-top: 1px solid @toolbar-border-color; + border-top: 1px solid @editor-border-color; textarea { overflow: auto; resize: none; border-radius: @border-radius-base; - border: 1px solid @toolbar-border-color; + border: 1px solid @editor-border-color; height: 100%; width: 100%; color: @gray-dark; diff --git a/services/web/public/stylesheets/app/editor/history.less b/services/web/public/stylesheets/app/editor/history.less index 81af8f989f..b6dca4b7cc 100644 --- a/services/web/public/stylesheets/app/editor/history.less +++ b/services/web/public/stylesheets/app/editor/history.less @@ -70,7 +70,7 @@ } aside.change-list { - border-left: 1px solid @toolbar-border-color; + border-left: 1px solid @editor-border-color; height: 100%; width: @changesListWidth; position: absolute; @@ -91,7 +91,7 @@ .day { background-color: #fafafa; - border-bottom: 1px solid @toolbar-border-color; + border-bottom: 1px solid @editor-border-color; padding: 4px; font-weight: bold; text-align: center; @@ -132,7 +132,7 @@ padding: (@line-height-computed / 4); padding-left: 38px; min-height: 38px; - border-bottom: 1px solid @toolbar-border-color; + border-bottom: 1px solid @editor-border-color; cursor: pointer; &:hover { background-color: @gray-lightest; diff --git a/services/web/public/stylesheets/app/editor/search.less b/services/web/public/stylesheets/app/editor/search.less index 93e7e507d6..f31c59dd6f 100644 --- a/services/web/public/stylesheets/app/editor/search.less +++ b/services/web/public/stylesheets/app/editor/search.less @@ -1,6 +1,6 @@ .ace_search { background-color: @gray-lightest; - border: 1px solid @toolbar-border-color; + border: 1px solid @editor-border-color; border-top: 0 none; width: 350px; overflow: hidden; diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index 1bb5f62bdc..cb20c1354f 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -48,18 +48,18 @@ border: none; border-radius: 0; border-right: 1px solid @toolbar-border-color; - color: @link-color; + color: @toolbar-btn-color; padding: 3px 10px 5px; font-size: 20px; &:hover { - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); - background-color: darken(white, 10%); - color: @link-hover-color; + text-shadow: @toolbar-btn-hover-text-shadow; + background-color: @toolbar-btn-hover-bg-color; + color: @toolbar-btn-hover-color; } &.active, &:active { - color: white; - background-color: @link-color; - .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.225)); + color: @toolbar-btn-active-color; + background-color: @toolbar-btn-active-bg-color; + box-shadow: @toolbar-btn-active-shadow; } .label { top: 4px; @@ -96,7 +96,8 @@ } &.toolbar-header { - box-shadow: 0 0 2px #ccc; + background-color: @toolbar-header-bg-color; + box-shadow: @toolbar-header-shadow; position: absolute; top: 0; left: 0; diff --git a/services/web/public/stylesheets/app/translations.less b/services/web/public/stylesheets/app/translations.less index 3b79b94aff..7ae7532b6c 100644 --- a/services/web/public/stylesheets/app/translations.less +++ b/services/web/public/stylesheets/app/translations.less @@ -3,7 +3,7 @@ padding: (@line-height-computed / 4) (@line-height-computed / 2); background-color: @state-warning-bg; color: #333; - border-bottom: 1px solid @toolbar-border-color; + border-bottom: 1px solid @common-border-color; text-align:center; img { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 0b5d3bf744..1809597f37 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -794,6 +794,8 @@ @left-menu-animation-duration: 0.35s; @toolbar-border-color: @gray-lighter; +@common-border-color: @gray-lighter; +@editor-border-color: @gray-lighter; @file-tree-droppable-background-color: rgb(252, 231, 199); @editor-dark-background-color: #333; @@ -876,15 +878,26 @@ @folders-untagged-line-height : 1.7; // Progress bars -@progress-border-radius : @border-radius-base; -@progress-border-width : 1px; -@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15); +@progress-border-radius : @border-radius-base; +@progress-border-width : 1px; +@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15); // Footer -@footer-link-color : @link-color; -@footer-link-hover-color : @link-hover-color; -@footer-bg-color : transparent; -@footer-padding : 2em; +@footer-link-color : @link-color; +@footer-link-hover-color : @link-hover-color; +@footer-bg-color : transparent; +@footer-padding : 2em; + +// Editor header +@toolbar-header-bg-color : transparent; +@toolbar-header-shadow : 0 0 2px #ccc; +@toolbar-btn-color : @link-color; +@toolbar-btn-hover-color : @link-hover-color; +@toolbar-btn-hover-bg-color : @link-hover-color; +@toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15); +@toolbar-btn-active-color : white; +@toolbar-btn-active-bg-color : @link-color; +@toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225); // Tags @tag-border-radius : 0.25em; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 43646ec542..4443de13ae 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -156,6 +156,18 @@ @footer-link-hover-color : @ol-dark-green; @footer-padding : 2em 0; +// Editor header +@toolbar-header-bg-color : @ol-blue-gray-6; +@toolbar-header-shadow : none; +@toolbar-btn-color : #FFF; +@toolbar-btn-hover-color : #FFF; +@toolbar-btn-hover-bg-color : @ol-blue-gray-5; +@toolbar-btn-hover-text-shadow : none; +@toolbar-btn-active-color : #FFF; +@toolbar-btn-active-bg-color : @ol-green; +@toolbar-btn-active-shadow : none; +@toolbar-border-color : @ol-blue-gray-5; + //== Colors // //## Gray and brand colors for use across Bootstrap.