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

697 lines
12 KiB
Text
Raw Normal View History

.pdf .toolbar.toolbar-pdf {
.toolbar-small-mixin;
.toolbar-alt-mixin;
padding-right: 5px;
margin-left: 0;
.auto-compile-status {
color: white;
margin-right: (@line-height-computed / 2);
i {
color: @brand-danger;
}
}
.auto-compile-status when (@is-overleaf-light = true) {
color: @ol-blue-gray-3;
}
2018-08-24 07:06:56 -04:00
}
.toolbar-pdf-orphan,
.toolbar-pdf-left,
.toolbar-pdf-right,
.toolbar-pdf-controls {
display: flex;
align-items: center;
align-self: stretch;
}
.toolbar-pdf-orphan,
.toolbar-pdf-controls {
flex: 1 1 100%;
}
.toolbar-pdf-controls {
margin-right: 4px;
justify-content: flex-end;
}
.toolbar-pdf-right {
flex: 1;
justify-content: flex-end;
}
.toolbar-pdf-orphan {
justify-content: center;
color: @toolbar-btn-color;
.btn {
margin-left: @margin-xs;
}
}
.btn-toggle-logs {
&:focus,
&:active:focus {
outline: none;
}
}
.btn-toggle-logs-label {
padding-left: @line-height-computed / 4;
}
.pdf-toolbar-btn {
display: inline-block;
color: @toolbar-btn-color;
background-color: transparent;
padding: 4px 2px;
line-height: 1;
height: 24px;
border-radius: 2px;
border-radius: @border-radius-base;
&:hover,
&:active,
&:focus {
color: @toolbar-btn-color;
}
&:hover {
&:not(:disabled) {
background-color: @pdf-toolbar-btn-hover-color;
}
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 0.15em 0.6em 0.2em;
font-size: 60%;
pointer-events: none;
}
&.log-btn {
border: none;
margin-right: 3px;
&.active {
color: white;
background-color: @link-color;
box-shadow: @toolbar-icon-btn-hover-boxshadow;
opacity: 0.65;
&:hover {
&:not(:disabled) {
background-color: transparent;
color: @toolbar-btn-color;
}
}
}
&:focus {
outline: none;
}
}
}
.pdf {
background-color: @pdf-bg;
2017-12-07 09:14:42 -05:00
}
.pdf-viewer,
.pdf-logs,
.pdf-errors,
.pdf-uncompiled {
.full-size;
top: @pdf-top-offset;
2014-06-29 09:22:08 -04:00
}
.pdf-logs,
.pdf-errors,
.pdf-uncompiled,
.pdf-validation-problems {
padding: @line-height-computed / 2;
}
.pdf-uncompiled {
.fa {
color: @blue;
}
}
.toolbar-text {
padding-left: @padding-xs;
}
2014-06-29 09:22:08 -04:00
.pdf-viewer {
iframe {
width: 100%;
height: 100%;
border: none;
}
.pdfjs-viewer {
.full-size;
background-color: @pdfjs-bg;
overflow: scroll;
.canvasWrapper > canvas,
div.pdf-canvas {
background: white;
box-shadow: @pdf-page-shadow-color 0px 0px 10px;
}
div.pdf-canvas.pdfng-empty {
background-color: white;
}
div.pdf-canvas.pdfng-loading {
background-color: white;
}
.page-container {
margin: 10px auto;
padding: 0 10px;
box-sizing: content-box;
user-select: none;
}
.page {
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 8px #bbb;
border: none;
margin-top: 10px;
margin-bottom: 10px;
}
.pdfjs-viewer-inner {
position: absolute;
overflow-y: scroll;
width: 100%;
height: 100%;
-webkit-font-smoothing: initial;
-moz-osx-font-smoothing: initial;
/* fix review-panel overflow issue, see: https://github.com/overleaf/internal/issues/6781#issuecomment-1112708638 */
.pdfViewer {
min-height: 100%;
}
}
&:focus-within {
outline: none;
}
/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
.textLayer br::selection {
background: transparent;
}
}
.progress-thin {
position: absolute;
top: -2px;
height: 3px;
left: 0;
right: 0;
.progress-bar {
height: 100%;
background-color: @link-color;
}
}
}
// TODO: remove this block once the new pdfjs toolbar is fully rolled out
.pdfjs-controls {
position: absolute;
padding: @line-height-computed / 2;
top: 0;
left: 0;
display: inline-block;
z-index: 10; // above the PDF viewer
.btn-group {
transition:
opacity 0.5s ease,
visibility 0 linear 0.5s;
visibility: hidden;
opacity: 0;
}
&:focus-within,
&:hover {
// make .pdfjs-controls and its children visible when it or any of its descendants are focused
.btn-group {
transition: none;
visibility: visible;
opacity: 1;
}
}
&:hover,
&.flash {
.btn-group {
transition: none;
visibility: visible;
opacity: 1;
}
}
i.fa-arrows-h {
border-right: 2px solid @content-primary;
border-left: 2px solid @content-primary;
}
i.fa-arrows-v {
border-top: 2px solid @content-primary;
border-bottom: 2px solid @content-primary;
}
}
.pdfjs-viewer-controls {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
.pdfjs-zoom-controls {
border-left: 1px solid rgba(125, 125, 125, 0.3);
}
.pdfjs-toolbar-buttons {
display: flex;
gap: 8px;
margin-left: 8px;
margin-right: 8px;
}
.pdfjs-toolbar-button {
padding: 2px !important;
display: flex;
align-items: center;
&:hover {
color: @toolbar-btn-color;
}
}
.pdfjs-zoom-dropdown-button {
width: 60px;
text-align: right;
font-size: 14px;
font-weight: normal;
.caret {
margin-left: 4px;
}
}
.pdfjs-zoom-dropdown-mac-shortcut-char {
display: inline-block;
width: 1em;
text-align: center;
}
.pdfjs-custom-zoom-menu-item {
a:hover {
background-color: initial !important;
color: initial !important;
cursor: initial !important;
}
&.disabled {
a {
color: initial !important;
}
}
2014-06-28 08:25:06 -04:00
}
2014-06-29 09:22:08 -04:00
.pdfjs-page-number-input {
color: @toolbar-btn-color;
font-size: 14px;
padding: 8px 8px 8px 0;
display: flex;
align-items: center;
gap: 4px;
input {
color: initial;
border: 1px solid @neutral-60;
width: 32px;
height: 24px;
border-radius: @border-radius-base;
text-align: center;
}
}
.pdfjs-viewer-controls-small {
display: flex;
align-items: center;
gap: 8px;
}
.pdfjs-toolbar-popover-button {
padding: 2px !important;
display: flex;
align-items: center;
}
.pdfjs-toolbar-popover {
background-color: @editor-toolbar-bg;
border-radius: 4px;
.arrow {
display: none;
}
button {
background-color: transparent;
color: @toolbar-btn-color;
}
.popover-content {
display: flex;
align-items: center;
padding: 0;
}
}
// The new viewer UI has overflow on the inner element,
// so disable the overflow on the outer element
.pdf-viewer .pdfjs-viewer.pdfjs-viewer-outer {
overflow: hidden;
}
:fullscreen {
.pdfjs-viewer-inner {
overflow-y: hidden !important;
}
}
.pdf-logs {
overflow: auto;
.alert {
font-size: 0.9rem;
margin-bottom: @line-height-computed / 2;
cursor: pointer;
.line-no {
float: right;
color: @log-line-no-color;
font-weight: 700;
.fa {
opacity: 0;
}
}
.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;
}
&:hover .line-no {
color: inherit;
.fa {
opacity: 1;
}
}
&.alert-danger {
background-color: tint(@alert-danger-bg, 15%);
&:hover {
background-color: @alert-danger-bg;
}
}
&.alert-warning {
background-color: tint(@alert-warning-bg, 15%);
&:hover {
background-color: @alert-warning-bg;
}
}
&.alert-info {
background-color: tint(@alert-info-bg, 15%);
&:hover {
background-color: @alert-info-bg;
}
}
}
pre {
font-size: 12px;
white-space: pre-wrap;
}
.dropdown {
position: relative;
}
.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 {
margin-right: -8px;
position: absolute;
z-index: @synctex-controls-z-index;
padding: @synctex-controls-padding;
top: 68px;
2014-06-30 13:35:01 -04:00
}
.synctex-control:not(.detach-synctex-control) {
@ol-synctex-control-size: 24px;
align-items: center;
display: flex;
justify-content: center;
font-size: 1em;
margin-bottom: @ol-synctex-control-size / 2;
width: @ol-synctex-control-size;
height: @ol-synctex-control-size;
border-radius: @ol-synctex-control-size / 2;
padding: 0 0 2px;
background-color: fade(@btn-default-bg, 80%);
transition: background 0.15s ease;
color: white;
border-color: transparent;
&:focus:not(:focus-visible) {
outline: none;
}
&[disabled] {
opacity: 1;
background-color: fade(@btn-default-bg, 60%);
}
}
.synctex-control {
> .synctex-control-icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
> .synctex-spin-icon {
margin-top: 2px;
}
}
.synctex-control-goto-pdf > .synctex-control-icon {
text-indent: 1px; // "Optical" adjustment.
&::before {
content: '\f061';
}
}
.synctex-control-goto-code > .synctex-control-icon {
text-indent: -1px; // "Optical" adjustment.
&::before {
content: '\f060';
}
}
.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 {
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;
cursor: default;
&-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;
}
.alert-danger & {
color: @state-danger-border;
}
.alert-warning & {
color: @state-warning-border;
}
.alert-info & {
color: @state-info-border;
}
}
&-text,
&-feedback-label {
color: @log-hints-color;
font-size: 0.9rem;
margin-bottom: 20px;
}
&-text {
min-height: 35px;
}
&-feedback-label {
font-size: inherit;
margin-right: 0.5em;
margin-bottom: 0;
font-weight: normal;
}
&-ext-link,
&-feedback {
display: inline-block;
font-size: 0.8rem;
}
&-footer a,
&-text a {
.alert-danger & {
color: @state-danger-text;
}
.alert-warning & {
color: @state-warning-text;
}
.alert-info & {
color: @state-info-text;
}
}
&-feedback {
color: @log-hints-color;
float: right;
}
&-extra-feedback {
color: @log-hints-color;
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;
}
}
& + 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;
2016-06-28 10:51:50 -04:00
}
.files-dropdown {
display: inline-block;
}
@editor-and-logs-pane-toolbars-height: @toolbar-small-height + @toolbar-height;
@btn-small-height: (@padding-small-vertical * 2)+ (@font-size-small *
@line-height-small);
#download-dropdown-list,
#dropdown-files-logs-pane-list {
overflow-y: auto;
.dropdown-header {
white-space: nowrap;
}
}
#download-dropdown-list {
max-height: calc(
~'100vh - ' @editor-and-logs-pane-toolbars-height ~' - ' @margin-md
);
}
#dropdown-files-logs-pane-list {
max-height: calc(
~'100vh - ' @editor-and-logs-pane-toolbars-height ~' - ' @btn-small-height ~' - '
@margin-md
);
}
.btn-secondary-compile-timeout-override {
color: #1b222c;
background-color: #ffffff;
border-color: #677283;
border-width: 1px;
}