Configure resizer colors.

This commit is contained in:
Paulo Reis 2017-11-30 17:00:25 +00:00
parent 3a959cccfd
commit ce3e410250
3 changed files with 53 additions and 26 deletions

View file

@ -261,9 +261,9 @@
}
}
.ui-layout-resizer {
.ui-layout-resizer when (@is-overleaf = false) {
width: 6px;
background-color: #f4f4f4;
background-color: @editor-resizer-bg-color;
border-left: 1px solid @editor-border-color;
border-right: 1px solid @editor-border-color;
.ui-layout-toggler {
@ -282,6 +282,27 @@
}
}
}
.ui-layout-resizer when (@is-overleaf = true) {
background-color: @editor-resizer-bg-color;
// .ui-layout-toggler {
// color: #999;
// font-family: FontAwesome;
// font-style: normal;
// font-weight: normal;
// line-height: 1;
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// font-size: 16px !important;
// line-height: 50px;
// &:hover {
// background-color: #ddd;
// color: #333;
// }
// }
}
.ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
.ui-layout-toggler {
&:before {

View file

@ -889,32 +889,36 @@
@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 : darken(white, 10%);
@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);
@toolbar-alt-bg-color : #fafafa;
@toolbar-icon-btn-color : @gray-light;
@toolbar-icon-btn-hover-color : @gray-dark;
@toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25);
@toolbar-border-bottom : 1px solid @toolbar-border-color;
@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 : darken(white, 10%);
@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);
@toolbar-alt-bg-color : #fafafa;
@toolbar-icon-btn-color : @gray-light;
@toolbar-icon-btn-hover-color : @gray-dark;
@toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25);
@toolbar-border-bottom : 1px solid @toolbar-border-color;
// Editor file-tree
@file-tree-bg : transparent;
@file-tree-item-color : @gray-darker;
@file-tree-item-toggle-color : @gray;
@file-tree-item-icon-color : @gray-light;
@file-tree-item-input-color : inherit;
@file-tree-item-folder-color : lighten(desaturate(@link-color, 10%), 5%);
@file-tree-item-hover-bg : @gray-lightest;
@file-tree-item-selected-bg : transparent;
@file-tree-multiselect-bg : lighten(@brand-info, 40%);
@file-tree-multiselect-hover-bg : lighten(@brand-info, 30%);
@file-tree-bg : transparent;
@file-tree-item-color : @gray-darker;
@file-tree-item-toggle-color : @gray;
@file-tree-item-icon-color : @gray-light;
@file-tree-item-input-color : inherit;
@file-tree-item-folder-color : lighten(desaturate(@link-color, 10%), 5%);
@file-tree-item-hover-bg : @gray-lightest;
@file-tree-item-selected-bg : transparent;
@file-tree-multiselect-bg : lighten(@brand-info, 40%);
@file-tree-multiselect-hover-bg : lighten(@brand-info, 30%);
// Editor resizers
@editor-resizer-bg-color : #F4F4F4;
// Tags
@tag-border-radius : 0.25em;
@tag-bg-color : @label-default-bg;

View file

@ -184,6 +184,8 @@
@file-tree-multiselect-bg : @ol-blue;
@file-tree-multiselect-hover-bg : @ol-dark-blue;
@file-tree-droppable-bg-color : tint(@ol-green, 5%);
// Editor resizers
@editor-resizer-bg-color : @ol-blue-gray-6;
//== Colors
//
//## Gray and brand colors for use across Bootstrap.