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

Make resizer bar larger; add a chevron inside the toggler; make the toggler itself darker.

Browse source
This commit is contained in:
Paulo Reis 2018-03-23 10:16:03 +00:00
parent 2447e85f3f
commit 89d9a43652
2 changed files with 59 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
services/web/public/stylesheets/app/editor.less
View file

@ -310,11 +310,34 @@
box-sizing: content-box; box-sizing: content-box;
background-image: linear-gradient(90deg, background-image: linear-gradient(90deg,
transparent, transparent,
transparent (@ui-resizer-extra-hit-area - 1px), transparent @ui-resizer-extra-hit-area - 3px,
@editor-resizer-bg-color (@ui-resizer-extra-hit-area - 1px), @editor-resizer-bg-color @ui-resizer-extra-hit-area - 3px,
@editor-resizer-bg-color (@ui-resizer-extra-hit-area + 2px), @editor-resizer-bg-color @ui-resizer-extra-hit-area + 4px,
transparent (@ui-resizer-extra-hit-area + 2px), transparent @ui-resizer-extra-hit-area + 4px,
transparent); transparent);
&.ui-layout-resizer-closed {
background-image: linear-gradient(90deg,
@editor-resizer-bg-color,
@editor-resizer-bg-color);
}
&::before,
&::after {
content: '\2847';
display: block;
position: absolute;
text-align: center;
left: 1px;
-webkit-font-smoothing: antialiased;
width: 100%;
font-size: 24px;
top: 25%;
color: @ol-blue-gray-2;
}
&::after {
top: 75%;
}
} }
.ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed { .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
@ -340,16 +363,17 @@
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
width: 9px; justify-content: center;
width: 7px;
height: 50px; height: 50px;
margin-top: -25px; margin-top: -25px;
top: 50%; top: 50%;
z-index: 6; z-index: 6;
background-color: @editor-toggler-bg-color; background-color: @editor-toggler-bg-color;
border-radius: 4px;
&:hover, &:hover,
&:focus { &:focus {
outline: none;
text-decoration: none; text-decoration: none;
} }
// Increase hit area // Increase hit area
@ -363,39 +387,49 @@
left: -3px; left: -3px;
} }
&::after {
font-family: FontAwesome;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 75%;
font-weight: bold;
color: #FFF;
user-select: none;
pointer-events: none;
}
&:hover { &:hover {
background-color: @editor-toggler-hover-bg-color; background-color: @editor-toggler-hover-bg-color;
} }
} }
.custom-toggler-east { .custom-toggler-east {
margin-right: -4px; margin-right: -3px;
&::after {
content: '\f105';
}
} }
.custom-toggler-west { .custom-toggler-west {
margin-left: -4px; margin-left: -3px;
&::after {
content: '\f104';
}
} }
.custom-toggler-closed { .custom-toggler-closed {
width: 12px;
&.custom-toggler-east { &.custom-toggler-east {
margin-right: -6px; margin-right: 0;
&::after { &::after {
margin-left: -2px; content: '\f104';
} }
} }
&.custom-toggler-west { &.custom-toggler-west {
margin-left: -6px; margin-left: 0;
&::after { &::after {
margin-left: 3px; content: '\f105';
} }
} }
&::after {
content: "\22EE"; // Vertical ellipsis
color: #FFF;
font-weight: 700;
font-size: @font-size-h2;
user-select: none;
pointer-events: none;
}
} }
.ui-layout-resizer-dragging { .ui-layout-resizer-dragging {

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

@ -229,7 +229,7 @@
// Editor resizers // Editor resizers
@editor-resizer-bg-color : @ol-blue-gray-6; @editor-resizer-bg-color : @ol-blue-gray-6;
@editor-resizer-bg-color-dragging : transparent; @editor-resizer-bg-color-dragging : transparent;
@editor-toggler-bg-color : @ol-blue-gray-2; @editor-toggler-bg-color : darken(@ol-blue-gray-2, 15%);
@editor-toggler-hover-bg-color : @ol-green; @editor-toggler-hover-bg-color : @ol-green;
@synctex-controls-z-index : 6; @synctex-controls-z-index : 6;
@synctex-controls-padding : 0; @synctex-controls-padding : 0;