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

Merge pull request #3396 from overleaf/jel-match-grays

Browse source 
Improve editor color contrast and remove light theme blue-gray colors

GitOrigin-RevId: acc5659c41201fce47e9ff03531cb51bfbf590bc
This commit is contained in:
Jessica Lawshe 2020-11-30 08:56:38 -06:00 committed by Copybot
parent 3ce57ed442
commit 76cbf9949f
8 changed files with 20 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/app/views/project/editor/history.pug
View file

@ -72,7 +72,7 @@ script(type="text/ng-template", id="historyV2DeleteLabelModalTemplate")
.modal-body .modal-body
.alert.alert-danger(ng-show="state.error.message") {{ state.error.message}} .alert.alert-danger(ng-show="state.error.message") {{ state.error.message}}
.alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")} .alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")}
p.help-block(ng-if="labelDetails") p(ng-if="labelDetails")
| #{translate("history_are_you_sure_delete_label")} | #{translate("history_are_you_sure_delete_label")}
strong "{{ labelDetails.comment }}" strong "{{ labelDetails.comment }}"
| ? | ?

2
services/web/app/views/project/editor/history/fileTreeV2.pug
View file

@ -22,7 +22,7 @@ script(type="text/ng-template", id="historyFileEntityTpl")
.history-file-entity-wrapper .history-file-entity-wrapper
a.history-file-entity-link( a.history-file-entity-link(
href href
ng-click="$ctrl.handleClick()" ng-click="$ctrl.isSelected ? '' : $ctrl.handleClick()"
ng-class="{ 'history-file-entity-link-selected': $ctrl.isSelected }" ng-class="{ 'history-file-entity-link-selected': $ctrl.isSelected }"
) )
span.history-file-entity-name-container span.history-file-entity-name-container

15
services/web/frontend/stylesheets/app/editor/history-v2.less
View file

@ -78,7 +78,7 @@
.history-entry-day { .history-entry-day {
display: block; display: block;
background-color: @history-entry-day-bg; background-color: @history-entry-day-bg;
color: #fff; color: @history-entry-day-color;
padding: 5px 10px; padding: 5px 10px;
line-height: 1; line-height: 1;
position: sticky; position: sticky;
@ -331,6 +331,7 @@
color: @file-tree-item-color; color: @file-tree-item-color;
line-height: @file-tree-line-height; line-height: @file-tree-line-height;
&:hover { &:hover {
.fake-full-width-bg(@file-tree-item-hover-bg);
background-color: @file-tree-item-hover-bg; background-color: @file-tree-item-hover-bg;
color: @file-tree-item-color; color: @file-tree-item-color;
text-decoration: none; text-decoration: none;
@ -340,20 +341,18 @@
outline: none; outline: none;
text-decoration: none; text-decoration: none;
} }
&:hover {
.fake-full-width-bg(@file-tree-item-hover-bg);
}
} }
.history-file-entity-link-selected { .history-file-entity-link-selected {
background-color: @file-tree-item-selected-bg; background-color: @file-tree-item-selected-bg;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
.fake-full-width-bg(@file-tree-item-selected-bg); .fake-full-width-bg(@file-tree-item-selected-bg);
&:hover { &:hover,
background-color: @file-tree-item-hover-bg;
}
&:focus { &:focus {
color: @file-tree-item-focus-selected-color; background-color: @file-tree-item-selected-bg;
.fake-full-width-bg(@file-tree-item-selected-bg);
color: #fff;
pointer-events: none;
} }
} }
.history-file-entity-name-container { .history-file-entity-name-container {

14
services/web/frontend/stylesheets/app/editor/review-panel.less
View file

@ -942,25 +942,17 @@
.review-icon { .review-icon {
display: inline-block; display: inline-block;
background: url('/img/review-icon-sprite-ol.png') top/30px no-repeat; background: url('/img/ol-icons/review-icon-dark-theme.svg') top/30px no-repeat;
width: 30px; width: 30px;
background-position-y: -30px;
&::before { &::before {
content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome. content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
} }
@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
background-image: url('/img/review-icon-sprite-ol@2x.png');
}
} }
.review-icon when (@is-overleaf-light = true) { .review-icon when (@is-overleaf-light = true) {
background-position-y: 0; background: url('/img/ol-icons/review-icon-light-theme.svg') top/30px
.toolbar .btn-full-height.active &, no-repeat;
.toolbar .btn-full-height:active & {
background-position-y: -30px;
}
} }
.resolved-comments-toggle { .resolved-comments-toggle {

13
services/web/frontend/stylesheets/core/ol-light-variables.less
View file

@ -1,12 +1,4 @@
// Styleguide colors // Styleguide colors
@ol-blue-gray-0 : #F4F5FB;
@ol-blue-gray-1 : #DFE2E8;
@ol-blue-gray-2 : #9DA7B7;
@ol-blue-gray-3 : #727E91;
@ol-blue-gray-4 : #455265;
@ol-blue-gray-5 : #2C3645;
@ol-blue-gray-6 : #1E2530;
@ol-green : #138A07; @ol-green : #138A07;
@ol-dark-green : #004A0E; @ol-dark-green : #004A0E;
@ol-blue : #3E70BB; @ol-blue : #3E70BB;
@ -19,7 +11,6 @@
// Sidebar // Sidebar
@sidebar-bg : #FFF; @sidebar-bg : #FFF;
@sidebar-color : @ol-blue-gray-2; @sidebar-color : @ol-blue-gray-2;
@sidebar-link-color : @ol-blue-gray-3;
@sidebar-active-bg : @ol-green; @sidebar-active-bg : @ol-green;
@sidebar-active-color : #FFF; @sidebar-active-color : #FFF;
@sidebar-hover-bg : @ol-blue-gray-1; @sidebar-hover-bg : @ol-blue-gray-1;
@ -43,7 +34,6 @@
@file-tree-line-height : 2.05; @file-tree-line-height : 2.05;
@file-tree-item-color : @ol-blue-gray-3; @file-tree-item-color : @ol-blue-gray-3;
@file-tree-item-focus-color : @file-tree-item-color; @file-tree-item-focus-color : @file-tree-item-color;
@file-tree-item-focus-selected-color : #FFF;
@file-tree-item-selected-color : #FFF; @file-tree-item-selected-color : #FFF;
@file-tree-item-input-color : @ol-blue-gray-2; @file-tree-item-input-color : @ol-blue-gray-2;
@file-tree-item-toggle-color : @ol-blue-gray-2; @file-tree-item-toggle-color : @ol-blue-gray-2;
@ -88,6 +78,8 @@
@toolbar-icon-btn-hover-color : @ol-blue-gray-3; @toolbar-icon-btn-hover-color : @ol-blue-gray-3;
@editor-header-logo-background : url(/img/ol-brand/overleaf-o.svg) center / contain no-repeat; @editor-header-logo-background : url(/img/ol-brand/overleaf-o.svg) center / contain no-repeat;
@project-name-color : @ol-blue-gray-3; @project-name-color : @ol-blue-gray-3;
@project-rename-link-color: @ol-blue-gray-3;
@project-rename-link-color-hover: @ol-blue-gray-4;
@pdf-bg : @ol-blue-gray-0; @pdf-bg : @ol-blue-gray-0;
@logs-pane-bg: @ol-blue-gray-1; @logs-pane-bg: @ol-blue-gray-1;
@ -114,7 +106,6 @@
// v2 History // v2 History
@history-toolbar-color : @ol-blue-gray-3; @history-toolbar-color : @ol-blue-gray-3;
@history-entry-day-bg : @ol-blue-gray-2;
@history-base-bg : @ol-blue-gray-0; @history-base-bg : @ol-blue-gray-0;
@history-file-badge-bg : rgba(0, 0, 0, .25); @history-file-badge-bg : rgba(0, 0, 0, .25);
@history-file-badge-color : #FFF; @history-file-badge-color : #FFF;

8
services/web/frontend/stylesheets/core/variables.less
View file

@ -1000,7 +1000,6 @@
@file-tree-line-height: 2.05; @file-tree-line-height: 2.05;
@file-tree-item-color: #fff; @file-tree-item-color: #fff;
@file-tree-item-focus-color: @file-tree-item-color; @file-tree-item-focus-color: @file-tree-item-color;
@file-tree-item-focus-selected-color: @file-tree-item-color;
@file-tree-item-selected-color: @file-tree-item-color; @file-tree-item-selected-color: @file-tree-item-color;
@file-tree-item-toggle-color: @ol-blue-gray-2; @file-tree-item-toggle-color: @ol-blue-gray-2;
@file-tree-item-icon-color: @ol-blue-gray-2; @file-tree-item-icon-color: @ol-blue-gray-2;
@ -1019,7 +1018,7 @@
@outline-item-h-padding: @outline-h-rhythm * 0.25; @outline-item-h-padding: @outline-h-rhythm * 0.25;
@outline-line-guide-color: @ol-blue-gray-3; @outline-line-guide-color: @ol-blue-gray-3;
@outline-expand-collapse-color: @ol-blue-gray-2; @outline-expand-collapse-color: @ol-blue-gray-2;
@outline-no-items-color: @ol-blue-gray-2; @outline-no-items-color: @file-tree-item-color;
@outline-header-hover-bg: @ol-blue-gray-6; @outline-header-hover-bg: @ol-blue-gray-6;
@outline-highlight-bg: tint(@file-tree-bg, 15%); @outline-highlight-bg: tint(@file-tree-bg, 15%);
@vertical-resizable-resizer-bg: @ol-blue-gray-5; @vertical-resizable-resizer-bg: @ol-blue-gray-5;
@ -1097,11 +1096,12 @@
@history-entry-selected-label-bg-color: #fff; @history-entry-selected-label-bg-color: #fff;
@history-entry-selected-label-color: @ol-blue; @history-entry-selected-label-color: @ol-blue;
@history-entry-selected-pseudo-label-color: @ol-green; @history-entry-selected-pseudo-label-color: @ol-green;
@history-entry-day-bg: @ol-blue-gray-2; @history-entry-day-bg: @ol-blue-gray-1;
@history-entry-day-color: @ol-blue-gray-3;
@history-entry-selected-bg: @ol-green; @history-entry-selected-bg: @ol-green;
@history-entry-handle-bg: darken(@ol-green, 10%); @history-entry-handle-bg: darken(@ol-green, 10%);
@history-entry-handle-height: 8px; @history-entry-handle-height: 8px;
@history-base-color: @ol-blue-gray-2; @history-base-color: @ol-blue-gray-3;
@history-highlight-color: @ol-type-color; @history-highlight-color: @ol-type-color;
@history-toolbar-bg-color: @editor-toolbar-bg; @history-toolbar-bg-color: @editor-toolbar-bg;
@history-toolbar-color: #fff; @history-toolbar-color: #fff;

1
services/web/public/img/ol-icons/review-icon-dark-theme.svg Normal file
View file

@ -0,0 +1 @@
<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.4 21.87h4.1L38.34 44h-3.93l-.9-5.86h-8.8L21.28 44h-4.15l13.27-22.13zm1.34 3.9h-.06l-5.33 9.43h6.75l-1.36-9.43zM39.38 21.87h3.54v8.18h.06a4.86 4.86 0 012.05-1.83c.43-.23.88-.4 1.33-.5a7.4 7.4 0 014.68.5 6.26 6.26 0 012.36 1.83 7.78 7.78 0 011.4 2.7 11.49 11.49 0 01.02 6.45 7.92 7.92 0 01-1.27 2.7 6.43 6.43 0 01-2.14 1.85c-.87.46-1.89.68-3.07.68-.53 0-1.08-.04-1.64-.12a5.71 5.71 0 01-2.91-1.2c-.4-.34-.73-.77-1-1.31h-.06V44h-3.35V21.87zM51.72 36c0-.72-.09-1.42-.28-2.1a5.54 5.54 0 00-.83-1.8 4.1 4.1 0 00-3.32-1.77c-1.49 0-2.61.52-3.38 1.55A6.91 6.91 0 0042.8 36c0 .8.1 1.56.28 2.27.21.68.51 1.27.9 1.76.4.5.86.9 1.4 1.18.56.29 1.2.43 1.92.43a3.95 3.95 0 003.41-1.76 5 5 0 00.77-1.8c.17-.68.25-1.38.25-2.08z" fill="#fff"/><path d="M19 34.39h18.45v1.55H19v-1.55z" fill="#fff"/><path d="M37.43 34.39h18.94v1.55H37.43v-1.55z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 37.17v.77h.01l-.68 2.38c-.24.85-.5 1.61-.8 2.3l.14-.06L13.61 46h4.1a28.28 28.28 0 01-9.27 3c-.43.03-.84-.2-1.06-.58-.07-.11-.11-.23-.14-.36v-.03h.12l.94-.2v-.01l-1.06.21c-.11-.54.2-.89.53-1.26a11.73 11.73 0 00.34-.39l.1-.1.35-.38a46.83 46.83 0 001.04-1.15 13.78 13.78 0 002.89-5.53C7.3 36.33 4 31.85 4 26.83 4 18.1 14.07 11 26.5 11c11.84 0 21.54 6.42 22.43 14.6-.38-.04-.78-.06-1.18-.06a7.5 7.5 0 00-2.8.52 7.4 7.4 0 00-.03-.3v-5.9h-3.57c-.38-.32-.8-.64-1.24-.96-3.32-2.33-8.12-3.9-13.61-3.9s-10.29 1.57-13.6 3.91C9.55 21.26 8 24.12 8 26.83c0 3.11 2.07 6.46 6.44 8.9L17 37.17zm15.1 5l-.3-2.03h-5.95l-1.43 2.46a33.37 33.37 0 007.68-.43zM9.15 47.64l1.01-.2-1 .2zm-.06.01l.01.01-.76.16v-.01l.75-.16z" fill="#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
services/web/public/img/ol-icons/review-icon-light-theme.svg Normal file
View file

@ -0,0 +1 @@
<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.4 21.87h4.1L38.34 44h-3.93l-.9-5.86h-8.8L21.28 44h-4.15l13.27-22.13zm1.34 3.9h-.06l-5.33 9.43h6.75l-1.36-9.43zM39.38 21.87h3.54v8.18h.06a4.86 4.86 0 012.05-1.83c.43-.23.88-.4 1.33-.5a7.4 7.4 0 014.68.5 6.26 6.26 0 012.36 1.83 7.78 7.78 0 011.4 2.7 11.49 11.49 0 01.02 6.45 7.92 7.92 0 01-1.27 2.7 6.43 6.43 0 01-2.14 1.85c-.87.46-1.89.68-3.07.68-.53 0-1.08-.04-1.64-.12a5.71 5.71 0 01-2.91-1.2c-.4-.34-.73-.77-1-1.31h-.06V44h-3.35V21.87zM51.72 36c0-.72-.09-1.42-.28-2.1a5.54 5.54 0 00-.83-1.8 4.1 4.1 0 00-3.32-1.77c-1.49 0-2.61.52-3.38 1.55A6.91 6.91 0 0042.8 36c0 .8.1 1.56.28 2.27.21.68.51 1.27.9 1.76.4.5.86.9 1.4 1.18.56.29 1.2.43 1.92.43a3.95 3.95 0 003.41-1.76 5 5 0 00.77-1.8c.17-.68.25-1.38.25-2.08z" fill="#5d6879"/><path d="M19 34.39h18.45v1.55H19v-1.55z" fill="#5d6879"/><path d="M37.43 34.39h18.94v1.55H37.43v-1.55z" fill="#5d6879"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 37.17v.77h.01l-.68 2.38c-.24.85-.5 1.61-.8 2.3l.14-.06L13.61 46h4.1a28.28 28.28 0 01-9.27 3c-.43.03-.84-.2-1.06-.58-.07-.11-.11-.23-.14-.36v-.03h.12l.94-.2v-.01l-1.06.21c-.11-.54.2-.89.53-1.26a11.73 11.73 0 00.34-.39l.1-.1.35-.38a46.83 46.83 0 001.04-1.15 13.78 13.78 0 002.89-5.53C7.3 36.33 4 31.85 4 26.83 4 18.1 14.07 11 26.5 11c11.84 0 21.54 6.42 22.43 14.6-.38-.04-.78-.06-1.18-.06a7.5 7.5 0 00-2.8.52 7.4 7.4 0 00-.03-.3v-5.9h-3.57c-.38-.32-.8-.64-1.24-.96-3.32-2.33-8.12-3.9-13.61-3.9s-10.29 1.57-13.6 3.91C9.55 21.26 8 24.12 8 26.83c0 3.11 2.07 6.46 6.44 8.9L17 37.17zm15.1 5l-.3-2.03h-5.95l-1.43 2.46a33.37 33.37 0 007.68-.43zM9.15 47.64l1.01-.2-1 .2zm-.06.01l.01.01-.76.16v-.01l.75-.16z" fill="#5d6879"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB