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 #204 from sharelatex/pr-style-v2-pdf

Browse source 
Style v2 PDF viewer, alerts and logs
This commit is contained in:
Paulo Jorge Reis 2017-12-20 09:17:21 +00:00 committed by GitHub
commit c8741daeb2
6 changed files with 108 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
services/web/public/stylesheets/app/editor/pdf.less
View file

@ -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;

4
services/web/public/stylesheets/app/editor/toolbar.less
View file

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

2
services/web/public/stylesheets/components/alerts.less
View file

@ -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 {

1
services/web/public/stylesheets/components/card.less
View file

@ -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 {

13
services/web/public/stylesheets/core/_common-variables.less
View file

@ -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;
@ -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;
@ -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;

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

@ -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,6 +198,7 @@
@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;
@ -189,6 +212,7 @@
@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);