mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Merge pull request #204 from sharelatex/pr-style-v2-pdf
Style v2 PDF viewer, alerts and logs
This commit is contained in:
commit
c8741daeb2
6 changed files with 108 additions and 50 deletions
|
@ -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;
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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,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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue