From d5272498336fc116463293f214d660d35c30d931 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 24 Aug 2018 12:06:56 +0100 Subject: [PATCH] Style the editor. --- .../public/stylesheets/app/editor/pdf.less | 6 ++- .../stylesheets/core/ol-light-variables.less | 47 ++++++++++++------- .../public/stylesheets/core/ol-variables.less | 2 +- 3 files changed, 35 insertions(+), 20 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index af597933ea..d2fc813577 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -7,7 +7,6 @@ .pdf .toolbar.toolbar-pdf when (@is-overleaf = true) { .toolbar-small-mixin; .toolbar-alt-mixin; - border-bottom: 0; padding-right: 5px; &.uncompiled-changes { #gradient > .striped(@color: rgba(255,255,255,.10), @angle: -45deg); @@ -23,6 +22,11 @@ } } +.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) and (@is-overleaf-light = false) { + border-bottom: 0; +} + + .pdf .toolbar.toolbar-pdf when (@is-overleaf = false) { .toolbar-tall-mixin; padding: 0 (@line-height-computed / 2); diff --git a/services/web/public/stylesheets/core/ol-light-variables.less b/services/web/public/stylesheets/core/ol-light-variables.less index 3df92f8761..3dffb3f005 100644 --- a/services/web/public/stylesheets/core/ol-light-variables.less +++ b/services/web/public/stylesheets/core/ol-light-variables.less @@ -1,8 +1,8 @@ // Styleguide colors -@ol-blue-gray-0 : lighten(#E4E8EE, 6%); -@ol-blue-gray-1 : lighten(#E4E8EE, 1%); +@ol-blue-gray-0 : #F4F5F8; +@ol-blue-gray-1 : #DFE2E8; @ol-blue-gray-2 : #9DA7B7; -@ol-blue-gray-3 : #5D6879; +@ol-blue-gray-3 : #727E91; @ol-blue-gray-4 : #455265; @ol-blue-gray-5 : #2C3645; @ol-blue-gray-6 : #1E2530; @@ -31,14 +31,14 @@ @v2-dash-pane-btn-hover-bg : @ol-blue-gray-6; // Editor file-tree -@file-tree-bg : @ol-blue-gray-1; +@file-tree-bg : #FFF; @file-tree-line-height : 2.05; @file-tree-item-color : @ol-blue-gray-3; @file-tree-item-selected-color : #FFF; -@file-tree-item-input-color : @ol-blue-gray-3; -@file-tree-item-toggle-color : @ol-blue-gray-3; -@file-tree-item-icon-color : @ol-blue-gray-3; -@file-tree-item-folder-color : @ol-blue-gray-3; +@file-tree-item-input-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-folder-color : @ol-blue-gray-2; @file-tree-item-hover-bg : @ol-blue-gray-1; @file-tree-item-selected-bg : @ol-green; @file-tree-multiselect-bg : @ol-blue; @@ -48,21 +48,32 @@ @content-alt-bg-color : @ol-blue-gray-1; // Editor resizers -@editor-resizer-bg-color : darken(@ol-blue-gray-1, 5%); -@editor-resizer-bg-color-dragging: darken(@ol-blue-gray-1, 5%); -@editor-toggler-bg-color : darken(@ol-blue-gray-1, 15%); +@editor-resizer-bg-color : @ol-blue-gray-1; +@editor-resizer-bg-color-dragging: @ol-blue-gray-1; +@editor-toggler-bg-color : @ol-blue-gray-2; @editor-toggler-hover-bg-color : @ol-green; @synctex-controls-z-index : 6; @synctex-controls-padding : 0; @editor-border-color : @ol-blue-gray-5; -@toolbar-border-color : darken(@ol-blue-gray-1, 5%); -@toolbar-alt-bg-color : darken(@ol-blue-gray-1, 5%); + +@toolbar-border-color : @ol-blue-gray-1; +@toolbar-alt-bg-color : #FFF; +@editor-toolbar-bg : @toolbar-alt-bg-color; @navbar-default-bg : @ol-blue-gray-4; -@toolbar-header-bg-color : @ol-blue-gray-4; -@toolbar-header-btn-border-color : @ol-blue-gray-3; -@toolbar-btn-color : #FFF; +@toolbar-header-bg-color : #FFF; +@toolbar-header-btn-border-color : @ol-blue-gray-1; +@toolbar-btn-color : @ol-blue-gray-3; +@toolbar-btn-hover-color : @ol-blue-gray-3; +@toolbar-btn-hover-bg-color : @ol-blue-gray-0; @toolbar-icon-btn-color : @ol-blue-gray-3; @toolbar-icon-btn-hover-color : @ol-blue-gray-3; -@editor-header-logo-background : url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat; -@pdf-bg : @ol-blue-gray-0; \ No newline at end of file +@editor-header-logo-background : url(/img/ol-brand/overleaf-o.svg) center / contain no-repeat; +@project-name-color : @ol-blue-gray-3; +@pdf-bg : @ol-blue-gray-0; + +// Formatting buttons +@formatting-btn-color : @toolbar-icon-btn-color; +@formatting-btn-bg : transparent; +@formatting-btn-border : @ol-blue-gray-1; +@formatting-menu-bg : transparent; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 15242024bb..6349d1887b 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -6,7 +6,7 @@ @footer-height: 50px; // Styleguide colors -@ol-blue-gray-0 : #f4f5f8; +@ol-blue-gray-0 : #F4F5F8; @ol-blue-gray-1 : #E4E8EE; @ol-blue-gray-2 : #9DA7B7; @ol-blue-gray-3 : #5D6879;