github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Make full-width backgrounds, even with indented filetree items.

Browse source
This commit is contained in:
Paulo Reis 2017-11-21 11:20:39 +00:00
parent 269975560f
commit 0de57885b1
4 changed files with 52 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
services/web/public/stylesheets/app/editor/file-tree.less
View file

@ -31,7 +31,11 @@ aside#file-tree {
overflow-x: hidden;
height: 100%;
ul {
ul when (@is-overleaf = false) {
margin-left: (@line-height-computed / 2);
}
ul when (@is-overleaf = true) {
margin-left: (@line-height-computed / 2);
}
@ -52,6 +56,13 @@ aside#file-tree {
&:hover {
background-color: @file-tree-item-hover-bg;
}
&:hover when (@is-overleaf = true) {
// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
// and, in consequence, the background gets clipped. The negative (in the x axis) box-shadow is a
// hack to paint the unfilled left-hand region.
box-shadow: -200px 0 0 @file-tree-item-hover-bg;
}
input {
line-height: 1.6;
}
@ -61,12 +72,12 @@ aside#file-tree {
}
i.fa {
color: @file-tree-item-color;
color: @file-tree-item-icon-color;
font-size: 14px;
}
i.fa-folder-open, i.fa-folder {
color: lighten(desaturate(@link-color, 10%), 5%);
color: @file-tree-item-folder-color;
font-size: 14px;
}
@ -74,7 +85,7 @@ aside#file-tree {
width: 24px;
padding: 6px;
font-size: 0.7rem;
color: @gray
color: @file-tree-item-toggle-color;
}
&.multi-selected {
@ -129,8 +140,16 @@ aside#file-tree {
}
> .entity when (@is-overleaf = true) {
background-color: @file-tree-item-selected-bg;
i.fa {
color: #FFF;
}
> .entity-name {
background-color: @file-tree-item-selected-bg;
// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
// and, in consequence, the background gets clipped. The negative (in the x axis) box-shadow is a
// hack to paint the unfilled left-hand region.
box-shadow: -200px 0 0 @file-tree-item-selected-bg;
font-weight: bold;
padding-right: 32px;
@ -147,7 +166,7 @@ aside#file-tree {
}
}
.editor-dark {
.editor-dark when (@is-overleaf = false) {
aside#file-tree {
// background-color: lighten(@editor-dark-background-color, 10%);
@ -175,6 +194,4 @@ aside#file-tree {
}
}
}
}

6
services/web/public/stylesheets/app/editor/toolbar.less
View file

@ -22,13 +22,13 @@
.toolbar-left > a:not(.btn),
.toolbar-right > a:not(.btn) {
display: inline-block;
color: @gray-light;
color: @toolbar-icon-btn-color;
padding: 4px 10px 5px;
margin: 1px 2px;
border-radius: @border-radius-small;
&:hover {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
color: @gray-dark;
text-shadow: @toolbar-icon-btn-hover-shadow;
color: @toolbar-icon-btn-hover-color;
text-decoration: none;
}
&.active, &:active {

7
services/web/public/stylesheets/core/_common-variables.less
View file

@ -899,13 +899,20 @@
@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);
// 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-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%);
// Tags
@tag-border-radius : 0.25em;
@tag-bg-color : @label-default-bg;

11
services/web/public/stylesheets/core/ol-variables.less
View file

@ -168,13 +168,20 @@
@toolbar-btn-active-shadow : none;
@toolbar-border-color : @ol-blue-gray-5;
@toolbar-alt-bg-color : @ol-blue-gray-5;
@toolbar-icon-btn-color : #FFF;
@toolbar-icon-btn-hover-color : #FFF;
@toolbar-icon-btn-hover-shadow : none;
// 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-color : #FFF;
@file-tree-item-toggle-color : #FFF;
@file-tree-item-icon-color : @ol-blue-gray-2;
@file-tree-item-folder-color : @ol-blue-gray-2;
@file-tree-item-hover-bg : @ol-blue-gray-5;
@file-tree-item-selected-bg : @ol-green;
@file-tree-multiselect-bg : lighten(@brand-warning, 10%);
@file-tree-multiselect-hover-bg : lighten(@brand-warning, 20%);
//== Colors
//
//## Gray and brand colors for use across Bootstrap.