From 1a6e831b9edcc964d73dd6757994549ec2745019 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 7 Dec 2017 14:14:42 +0000 Subject: [PATCH 1/4] Basic PDF viewer colors for v2. --- services/web/public/stylesheets/app/editor/pdf.less | 10 +++++++--- .../web/public/stylesheets/app/editor/toolbar.less | 4 ++-- .../web/public/stylesheets/core/_common-variables.less | 9 +++++++++ services/web/public/stylesheets/core/ol-variables.less | 6 ++++++ 4 files changed, 24 insertions(+), 5 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index a873cd5e8f..aab748d17f 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -10,9 +10,13 @@ padding: 0 (@line-height-computed / 2); } +.pdf §{ + background-color: @pdf-bg; +} + .pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled { .full-size; - top: 58px; + top: @pdf-top-offset; } .pdf-logs, .pdf-errors, .pdf-uncompiled, .pdf-validation-problems{ @@ -69,11 +73,11 @@ } .pdfjs-viewer { .full-size; - background-color: @gray-lighter; + background-color: @pdfjs-bg; overflow: scroll; canvas, div.pdf-canvas { background: white; - box-shadow: black 0px 0px 10px; + box-shadow: @pdf-page-shadow-color 0px 0px 10px; } div.pdf-canvas.pdfng-empty { background-color: white; diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index 5c00f00567..1243c07634 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -129,11 +129,11 @@ } .toolbar-small-mixin() { - height: 32px; + height: @toolbar-small-height; } .toolbar-tall-mixin() { - height: 58px; + height: @toolbar-tall-height; padding-top: 10px; } .toolbar-alt-mixin() { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index acf6bcc91f..a0342c5534 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -904,6 +904,8 @@ @toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25); @toolbar-icon-btn-hover-boxshadow : inset 0 3px 5px rgba(0, 0, 0, 0.225); @toolbar-border-bottom : 1px solid @toolbar-border-color; +@toolbar-small-height : 32px; +@toolbar-tall-height : 58px; // Editor file-tree @file-tree-bg : transparent; @@ -917,6 +919,13 @@ @file-tree-item-selected-bg : transparent; @file-tree-multiselect-bg : lighten(@brand-info, 40%); @file-tree-multiselect-hover-bg : lighten(@brand-info, 30%); + +// PDF +@pdf-top-offset : @toolbar-tall-height; +@pdf-bg : transparent; +@pdfjs-bg : @gray-lighter; +@pdf-page-shadow-color : #000; + // Tags @tag-border-radius : 0.25em; @tag-bg-color : @label-default-bg; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 5c15ad2d3d..8116c79a6a 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -186,6 +186,12 @@ @file-tree-multiselect-bg : @ol-blue; @file-tree-multiselect-hover-bg : @ol-dark-blue; @file-tree-droppable-bg-color : tint(@ol-green, 5%); + +// PDF +@pdf-top-offset : @toolbar-small-height; +@pdf-bg : transparent; +@pdfjs-bg : @ol-blue-gray-1; +@pdf-page-shadow-color : rgba(0, 0, 0, 0.5); //== Colors // //## Gray and brand colors for use across Bootstrap. From 5bea196b8faceadd5e6eb4f9289b88d217881d5d Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 7 Dec 2017 16:35:39 +0000 Subject: [PATCH 2/4] Style logs, log hints and alerts in general. --- .../public/stylesheets/app/editor/pdf.less | 22 ++++----- .../public/stylesheets/components/alerts.less | 2 +- .../public/stylesheets/components/card.less | 1 - .../stylesheets/core/_common-variables.less | 5 +- .../public/stylesheets/core/ol-variables.less | 46 +++++++++++++++++-- 5 files changed, 58 insertions(+), 18 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index aab748d17f..eadf39cb9e 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -10,7 +10,7 @@ padding: 0 (@line-height-computed / 2); } -.pdf §{ +.pdf { background-color: @pdf-bg; } @@ -183,7 +183,7 @@ cursor: pointer; .line-no { float: right; - color: @gray; + color: @log-line-no-color; font-weight: 700; .fa { @@ -303,22 +303,22 @@ } .alert-danger & { - color: @alert-danger-border; + color: @state-danger-border; } .alert-warning & { - color: @alert-warning-border; + color: @state-warning-border; } .alert-info & { - color: @alert-info-border; + color: @state-info-border; } } &-text, &-feedback-label { - color: @gray-dark; + color: @log-hints-color; font-size: 0.9rem; margin-bottom: 20px; } @@ -343,25 +343,25 @@ &-actions a, &-text a { .alert-danger & { - color: @alert-danger-text; + color: @state-danger-text; } .alert-warning & { - color: @alert-warning-text; + color: @state-warning-text; } .alert-info & { - color: @alert-info-text; + color: @state-info-text; } } &-feedback { - color: @gray-dark; + color: @log-hints-color; float: right; } &-extra-feedback { - color: @gray-dark; + color: @log-hints-color; font-size: 0.8rem; margin-top: 10px; padding-bottom: 5px; diff --git a/services/web/public/stylesheets/components/alerts.less b/services/web/public/stylesheets/components/alerts.less index 527c97b151..6ed93d29d4 100755 --- a/services/web/public/stylesheets/components/alerts.less +++ b/services/web/public/stylesheets/components/alerts.less @@ -10,7 +10,7 @@ padding: @alert-padding; margin-bottom: @line-height-computed; border-left: 3px solid transparent; - // border-radius: @alert-border-radius; + border-radius: @alert-border-radius; // Headings for larger alerts h4 { diff --git a/services/web/public/stylesheets/components/card.less b/services/web/public/stylesheets/components/card.less index 1e06fbe3b4..ac43c038b7 100644 --- a/services/web/public/stylesheets/components/card.less +++ b/services/web/public/stylesheets/components/card.less @@ -1,7 +1,6 @@ .card { background-color: white; border-radius: @border-radius-base; - -webkit-box-shadow: @card-box-shadow; box-shadow: @card-box-shadow; padding: @line-height-computed; .page-header { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index a0342c5534..23db1a202b 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -550,7 +550,7 @@ //## Define alert colors, border radius, and padding. @alert-padding: 15px; -@alert-border-radius: @border-radius-base; +@alert-border-radius: 0; @alert-link-font-weight: bold; @alert-success-bg: @state-success-bg; @@ -925,7 +925,8 @@ @pdf-bg : transparent; @pdfjs-bg : @gray-lighter; @pdf-page-shadow-color : #000; - +@log-line-no-color : @gray; +@log-hints-color : @gray-dark; // Tags @tag-border-radius : 0.25em; @tag-bg-color : @label-default-bg; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 8116c79a6a..bb3ba436b7 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -64,6 +64,44 @@ @btn-info-bg : @ol-blue; @btn-info-border : transparent; +// Alerts +@alert-padding : 15px; +@alert-border-radius : @border-radius-base; +@alert-link-font-weight : bold; + +@alert-success-bg : @brand-success; +@alert-success-text : #FFF; +@alert-success-border: transparent; + +@alert-info-bg : @brand-info; +@alert-info-text : #FFF; +@alert-info-border : transparent; + +@alert-warning-bg : @brand-warning; +@alert-warning-text : #FFF; +@alert-warning-border: transparent; + +@alert-danger-bg : @brand-danger; +@alert-danger-text : #FFF; +@alert-danger-border : transparent; + + +// @state-success-text: darken(@brand-success, 20%); +// @state-success-bg: lighten(@brand-success, 50%); +// @state-success-border: darken(@brand-success, 5%); + +// @state-info-text: darken(@brand-info, 20%); +// @state-info-bg: lighten(@brand-info, 47%); +// @state-info-border: darken(@brand-info, 7%); + +// @state-warning-text: darken(@brand-warning, 10%); +// @state-warning-bg: lighten(@brand-warning, 45%); +// @state-warning-border: @brand-warning; + +// @state-danger-text: darken(@brand-danger, 10%); +// @state-danger-bg: lighten(@brand-danger, 50%); +// @state-danger-border: darken(@brand-danger, 5%); + // Tags @tag-border-radius : 9999px; @tag-bg-color : @ol-green; @@ -189,9 +227,11 @@ // PDF @pdf-top-offset : @toolbar-small-height; -@pdf-bg : transparent; -@pdfjs-bg : @ol-blue-gray-1; +@pdf-bg : @ol-blue-gray-1; +@pdfjs-bg : transparent; @pdf-page-shadow-color : rgba(0, 0, 0, 0.5); +@log-line-no-color : #FFF; +@log-hints-color : @ol-blue-gray-4; //== Colors // //## Gray and brand colors for use across Bootstrap. @@ -213,7 +253,7 @@ @brand-primary: @ol-green; @brand-success: @green; -@brand-info: @ol-dark-green; +@brand-info: @ol-blue; @brand-warning: @orange; @brand-danger: #E03A06; From d89aa0ca02f7d3a6358466d6d430a602b090bf36 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 14 Dec 2017 11:52:41 +0000 Subject: [PATCH 3/4] Remove commented out code. --- .../public/stylesheets/core/ol-variables.less | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index a1a7738102..aee331f3d2 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -86,22 +86,6 @@ @alert-danger-border : transparent; -// @state-success-text: darken(@brand-success, 20%); -// @state-success-bg: lighten(@brand-success, 50%); -// @state-success-border: darken(@brand-success, 5%); - -// @state-info-text: darken(@brand-info, 20%); -// @state-info-bg: lighten(@brand-info, 47%); -// @state-info-border: darken(@brand-info, 7%); - -// @state-warning-text: darken(@brand-warning, 10%); -// @state-warning-bg: lighten(@brand-warning, 45%); -// @state-warning-border: @brand-warning; - -// @state-danger-text: darken(@brand-danger, 10%); -// @state-danger-bg: lighten(@brand-danger, 50%); -// @state-danger-border: darken(@brand-danger, 5%); - // Tags @tag-border-radius : 9999px; @tag-bg-color : @ol-green; From 547c0cb79f2821ce33ab33f6180ec87d31d79cba Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 19 Dec 2017 13:10:12 +0000 Subject: [PATCH 4/4] Use new theme red shade as the danger red; tone down compile log alerts. --- .../public/stylesheets/app/editor/pdf.less | 21 +++++++++++++------ .../public/stylesheets/core/ol-variables.less | 2 +- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index f5ff31177f..d59ca93069 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -207,16 +207,25 @@ } } - &.alert-danger:hover { - background-color: darken(@alert-danger-bg, 5%); + &.alert-danger { + background-color: tint(@alert-danger-bg, 15%); + &:hover { + background-color: @alert-danger-bg; + } } - &.alert-warning:hover { - background-color: darken(@alert-warning-bg, 5%); + &.alert-warning { + background-color: tint(@alert-warning-bg, 15%); + &:hover { + background-color: @alert-warning-bg; + } } - &.alert-info:hover { - background-color: darken(@alert-info-bg, 5%); + &.alert-info { + background-color: tint(@alert-info-bg, 15%); + &:hover { + background-color: @alert-info-bg; + } } } diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index aee331f3d2..b89e476567 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -249,7 +249,7 @@ @brand-success: @green; @brand-info: @ol-blue; @brand-warning: @orange; -@brand-danger: #E03A06; +@brand-danger: @ol-red; @editor-loading-logo-padding-top: 115.44%; @editor-loading-logo-background-url: url(/img/ol-brand/overleaf-o-grey.svg);