Basic filetree skinning, still WIP.

This commit is contained in:
Paulo Reis 2017-11-20 12:24:00 +00:00
parent 6913d28abb
commit 269975560f
4 changed files with 38 additions and 8 deletions

View file

@ -7,6 +7,7 @@ aside#file-tree {
left: 0;
right: 0;
overflow-y: auto;
background-color: @file-tree-bg;
&.no-toolbar {
top: 0;
@ -20,10 +21,13 @@ aside#file-tree {
margin: (@line-height-computed / 2);
}
ul.file-tree-list {
ul.file-tree-list when (@is-overleaf = false) {
font-size: 0.8rem;
margin: 0;
padding: (@line-height-computed / 4) 0;
}
ul.file-tree-list {
margin: 0;
overflow-x: hidden;
height: 100%;
@ -40,13 +44,13 @@ aside#file-tree {
}
.entity-name {
color: @gray-darker;
color: @file-tree-item-color;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: @gray-lightest;
background-color: @file-tree-item-hover-bg;
}
input {
line-height: 1.6;
@ -57,7 +61,7 @@ aside#file-tree {
}
i.fa {
color: @gray-light;
color: @file-tree-item-color;
font-size: 14px;
}
@ -111,7 +115,7 @@ aside#file-tree {
&:not(.multi-selected) {
ul.file-tree-list li.selected {
> .entity > .entity-name {
> .entity > .entity-name when (@is-overleaf = false) {
color: @link-color;
border-right: 4px solid @link-color;
font-weight: bold;
@ -123,6 +127,18 @@ aside#file-tree {
display: inline;
}
}
> .entity when (@is-overleaf = true) {
background-color: @file-tree-item-selected-bg;
> .entity-name {
font-weight: bold;
padding-right: 32px;
.entity-menu-toggle {
display: inline;
}
}
}
}
}

View file

@ -139,7 +139,7 @@
}
&.toolbar-alt {
background-color: #fafafa;
background-color: @toolbar-alt-bg-color;
}
}

View file

@ -898,7 +898,14 @@
@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;
// Editor file-tree
@file-tree-bg : transparent;
@file-tree-item-color : @gray-darker;
@file-tree-item-icon-color : @gray-light;
@file-tree-item-hover-bg : @gray-lightest;
@file-tree-item-selected-bg : transparent;
// Tags
@tag-border-radius : 0.25em;
@tag-bg-color : @label-default-bg;

View file

@ -8,7 +8,7 @@
@ol-blue-gray-1 : #E4E8EE;
@ol-blue-gray-2 : #9DA7B7;
@ol-blue-gray-3 : #5D6879;
@ol-blue-gray-4 : #485973;
@ol-blue-gray-4 : #455265;
@ol-blue-gray-5 : #2C3645;
@ol-blue-gray-6 : #1E2530;
@ -167,7 +167,14 @@
@toolbar-btn-active-bg-color : @ol-green;
@toolbar-btn-active-shadow : none;
@toolbar-border-color : @ol-blue-gray-5;
@toolbar-alt-bg-color : @ol-blue-gray-5;
// Editor file-tree
@file-tree-bg : @ol-blue-gray-4;
@file-tree-item-color : white;
@file-tree-item-icon-color : @file-tree-item-color
@file-tree-item-hover-bg : @ol-blue-gray-5;
@file-tree-item-selected-bg : @ol-green;
//== Colors
//
//## Gray and brand colors for use across Bootstrap.