overleaf/services/web/public/stylesheets/app/editor/pdf.less

356 lines
5.2 KiB
Text
Raw Normal View History

.pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled {
2014-06-28 08:25:06 -04:00
.full-size;
2014-06-29 09:22:08 -04:00
top: 58px;
}
2016-06-02 08:09:11 -04:00
.pdf-logs, .pdf-errors, .pdf-uncompiled, .pdf-validation-problems{
padding: @line-height-computed / 2;
}
.pdf-uncompiled {
.fa {
color: @blue;
}
}
2014-06-29 09:22:08 -04:00
.pdf-viewer {
iframe {
width: 100%;
height: 100%;
border: none;
}
2014-06-28 08:25:06 -04:00
.pdfjs-viewer {
.full-size;
background-color: @gray-lighter;
overflow: scroll;
user-select: none;
canvas, div.pdf-canvas {
2014-06-28 08:25:06 -04:00
background: white;
box-shadow: black 0px 0px 10px;
}
div.pdf-canvas.pdfng-empty {
2014-12-08 12:39:33 -05:00
background-color: white;
}
div.pdf-canvas.pdfng-loading {
2014-12-08 12:39:33 -05:00
background-color: white;
}
2014-06-28 08:25:06 -04:00
.page-container {
margin: 10px auto;
padding: 0 10px;
box-sizing: content-box;
}
}
.progress-thin {
position: absolute;
top: -2px;
height: 3px;
left: 0;
right: 0;
.progress-bar {
height: 100%;
background-color: @link-color;
}
}
2014-06-28 10:43:44 -04:00
.pdfjs-controls {
position: absolute;
padding: @line-height-computed / 2;
top: 0;
left: 0;
display: inline-block;
.btn-group {
transition: opacity 0.5s ease, visibility 0 linear 0.5s;
visibility: hidden;
opacity: 0;
}
&:hover, &.flash {
.btn-group {
transition: none;
visibility: visible;
opacity: 1;
}
}
i.fa-arrows-h {
border-right: 2px solid white;
border-left: 2px solid white;
}
i.fa-arrows-v {
border-top: 2px solid white;
border-bottom: 2px solid white;
}
}
2014-06-28 08:25:06 -04:00
}
2014-06-29 09:22:08 -04:00
2014-07-22 08:33:01 -04:00
.pdf .toolbar {
.toolbar-right {
margin-right: @line-height-computed / 2;
a {
&:hover {
i {
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
border-color: @gray-dark;
}
}
i {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid @gray-light;
margin-top: 5px;
}
i.full-screen {
border-top-width: 3px;
border-radius: 2px;
}
i.split-screen {
width: 7px;
border-top-width: 3px;
border-radius: 2px;
margin-left: 2px;
}
}
}
2014-06-29 09:22:08 -04:00
}
.pdf-logs {
2014-06-29 09:22:08 -04:00
overflow: auto;
.alert {
font-size: 0.9rem;
margin-bottom: @line-height-computed / 2;
cursor: pointer;
2014-06-29 09:22:08 -04:00
.line-no {
float: right;
color: @gray;
font-weight: 700;
2016-06-24 10:55:19 -04:00
.fa {
opacity: 0;
2016-06-24 10:55:19 -04:00
}
2014-06-29 09:22:08 -04:00
}
.entry-message {
font-weight: 700;
//font-family: @font-family-monospace;
}
.entry-content {
white-space: pre-wrap;
font-size: 0.8rem;
//font-family: @font-family-monospace;
}
2016-06-24 10:55:19 -04:00
&:hover .line-no {
color: inherit;
.fa {
opacity: 1;
2016-06-24 10:55:19 -04:00
}
}
&.alert-danger:hover {
background-color: darken(@alert-danger-bg, 5%);
}
&.alert-warning:hover {
background-color: darken(@alert-warning-bg, 5%);
}
&.alert-info:hover {
background-color: darken(@alert-info-bg, 5%);
}
2014-06-29 09:22:08 -04:00
}
2014-06-30 07:05:43 -04:00
pre {
font-size: 12px;
}
.dropdown {
position: relative;
}
2016-08-24 11:05:22 -04:00
.force-recompile {
margin-top: 10px;
text-align: right;
}
2014-06-29 09:22:08 -04:00
}
2014-06-30 13:35:01 -04:00
.synctex-controls {
top: 68px;
padding: 0px 2px;
2014-06-30 13:35:01 -04:00
.btn-xs {
line-height: 1.3;
padding: 0 2px 0;
}
}
.editor-dark {
.pdf-logs {
background-color: lighten(@editor-dark-background-color, 10%);
}
.pdfjs-viewer {
background-color: lighten(@editor-dark-background-color, 10%);
}
.pdf .toolbar {
.toolbar-right a {
i {
border-color: @gray;
}
&:hover {
i {
border-color: @gray-light;
}
}
}
}
}
2016-06-15 05:48:40 -04:00
.keyboard-tooltip {
.tooltip-inner {
max-width: none;
}
}
.keyboard-shortcut {
2016-06-15 05:48:40 -04:00
white-space: nowrap;
2016-06-17 09:16:38 -04:00
}
@keyframes expand-feedback-area {
from {
max-height: 0;
}
to {
max-height: 500px;
}
}
2016-06-17 09:16:38 -04:00
.card-hint:extend(.card-thin) {
margin-top: 10px;
padding-bottom: 7px;
2016-06-24 07:12:45 -04:00
cursor: default;
2016-06-20 04:45:14 -04:00
&-icon-container {
background: currentColor;
width: 2.5rem;
height: 2.5rem;
font-size: 1.5rem;
text-align: center;
border-radius: 50%;
float: left;
margin-right: 10px;
.fa {
color: #FFF;
}
2016-06-20 09:42:36 -04:00
.alert-danger & {
color: @alert-danger-border;
}
.alert-warning & {
color: @alert-warning-border;
}
.alert-info & {
color: @alert-info-border;
}
2016-06-20 04:45:14 -04:00
}
2016-06-20 06:53:10 -04:00
&-text,
2016-06-20 09:59:30 -04:00
&-feedback-label {
2016-06-20 04:45:14 -04:00
color: @gray-dark;
2016-06-20 06:53:10 -04:00
font-size: 0.9rem;
2016-06-21 09:20:23 -04:00
margin-bottom: 20px;
2016-06-20 06:53:10 -04:00
}
2016-06-24 07:07:02 -04:00
&-text {
min-height: 35px;
}
2016-06-20 09:59:30 -04:00
&-feedback-label {
2016-06-20 09:42:36 -04:00
font-size: inherit;
2016-06-21 09:20:23 -04:00
margin-right: 0.5em;
2016-06-20 06:53:10 -04:00
margin-bottom: 0;
font-weight: normal;
}
2016-06-20 09:59:30 -04:00
&-ext-link,
&-feedback {
2016-06-20 06:53:10 -04:00
display: inline-block;
2016-06-20 09:42:36 -04:00
font-size: 0.8rem;
2016-06-20 06:53:10 -04:00
}
&-actions a,
&-text a {
.alert-danger & {
color: @alert-danger-text;
}
.alert-warning & {
color: @alert-warning-text;
}
.alert-info & {
color: @alert-info-text;
}
}
2016-06-21 09:20:23 -04:00
2016-06-20 09:59:30 -04:00
&-feedback {
2016-06-21 09:20:23 -04:00
color: @gray-dark;
2016-06-20 06:53:10 -04:00
float: right;
}
&-extra-feedback {
color: @gray-dark;
font-size: 0.8rem;
margin-top: 10px;
padding-bottom: 5px;
animation: 0.5s ease-out expand-feedback-area;
overflow: hidden;
&-label {
margin: 5px 0 10px;
padding-top: 5px;
border-top: solid 1px @gray-lighter;
}
.radio {
margin: 5px;
}
textarea {
font-size: 0.8rem;
margin-bottom: 10px;
padding: 5px;
}
input[type="radio"] {
margin-top: 2px;
}
}
2016-06-20 04:45:14 -04:00
& + p {
margin-top: 20px;
}
2016-06-20 09:42:36 -04:00
}
2016-06-28 10:51:50 -04:00
.files-dropdown-container {
.pull-right();
position: relative;
}
.files-dropdown {
display: inline-block;
}
.plv-text-layer {
display: none;
user-select: text;
.pdf-page-container:hover &,
.pdfjs-viewer-show-text & {
display: block;
}
& > div {
color: red;
}
}