Merge pull request #204 from sharelatex/pr-style-v2-pdf

Style v2 PDF viewer, alerts and logs

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;
@@ -179,7 +183,7 @@
 		cursor: pointer;
 		.line-no {
 			float: right;
-			color: @gray;
+			color: @log-line-no-color;
 			font-weight: 700;
 
 			.fa {
@@ -203,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;
+			}
 		}
 
 	}
@@ -354,22 +367,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;
 	}
@@ -394,25 +407,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;

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() {

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 {

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 {

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;
@@ -903,20 +903,22 @@
 @toolbar-icon-btn-hover-color   : @gray-dark;
 @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-border-bottom            : 1px solid @toolbar-border-color;
+@toolbar-small-height             : 32px;
+@toolbar-tall-height              : 58px;
 
 // Editor file-tree
-@file-tree-bg                   : transparent;
-@file-tree-line-height          : 2.6;
-@file-tree-item-color           : @gray-darker;
-@file-tree-item-toggle-color    : @gray;
-@file-tree-item-icon-color      : @gray-light;
-@file-tree-item-input-color     : inherit;
-@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%);
+@file-tree-bg                    : transparent;
+@file-tree-line-height           : 2.6;
+@file-tree-item-color            : @gray-darker;
+@file-tree-item-toggle-color     : @gray;
+@file-tree-item-icon-color       : @gray-light;
+@file-tree-item-input-color      : inherit;
+@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%);
 
 // Editor resizers
 @editor-resizer-bg-color          : #F4F4F4;
@@ -925,6 +927,15 @@
 @editor-toggler-hover-bg-color    : #DDD;
 @synctex-controls-z-index         : 3;
 @synctex-controls-padding         : 0 2px;
+
+// PDF
+@pdf-top-offset                  : @toolbar-tall-height;
+@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;

services/web/public/stylesheets/core/ol-variables.less

@@ -64,6 +64,28 @@
 @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;
+
+
 // Tags
 @tag-border-radius       : 9999px;
 @tag-bg-color            : @ol-green;
@@ -176,19 +198,21 @@
 @toolbar-icon-btn-hover-shadow    : none;
 @toolbar-border-bottom            : 1px solid @toolbar-border-color;
 @toolbar-icon-btn-hover-boxshadow : none;
+
 // Editor file-tree
-@file-tree-bg                     : @ol-blue-gray-4;
-@file-tree-line-height            : 2.05;
-@file-tree-item-color             : #FFF;
-@file-tree-item-input-color       : @ol-blue-gray-5;
-@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-5;
-@file-tree-item-selected-bg       : @ol-green;
-@file-tree-multiselect-bg         : @ol-blue;
-@file-tree-multiselect-hover-bg   : @ol-dark-blue;
-@file-tree-droppable-bg-color     : tint(@ol-green, 5%);
+@file-tree-bg                   : @ol-blue-gray-4;
+@file-tree-line-height          : 2.05;
+@file-tree-item-color           : #FFF;
+@file-tree-item-input-color     : @ol-blue-gray-5;
+@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-5;
+@file-tree-item-selected-bg     : @ol-green;
+@file-tree-multiselect-bg       : @ol-blue;
+@file-tree-multiselect-hover-bg : @ol-dark-blue;
+@file-tree-droppable-bg-color   : tint(@ol-green, 5%);
+
 // Editor resizers
 @editor-resizer-bg-color          : @ol-blue-gray-6;
 @editor-resizer-bg-color-dragging : transparent;
@@ -196,6 +220,17 @@
 @editor-toggler-hover-bg-color    : @ol-green;
 @synctex-controls-z-index         : 6;
 @synctex-controls-padding         : 0;
+
+// PDF
+@pdf-top-offset                 : @toolbar-small-height;
+@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.
 @gray-darker:           #252525;
 @gray-dark:             #505050;
@@ -215,9 +250,9 @@
 
 @brand-primary:         @ol-green;
 @brand-success:         @green;
-@brand-info:            @ol-dark-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);