mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
b62cb86bf8
* Create a new shared `SplitMenu` component.
* Refactor the pdf compile button & detached compile button:
- Rename `detach-compile-button` to `detach-compile-button-wrapper`
- Rename `pdf-compile-button-inner` to `detach-compile-button`
- Move some of the logic from `detach-compile-button-wrapper` to `detach-compile-button`
- Create a new `compile-button.less` to centralize all of the compile button (detached/non-detached) custom styles rule.
- Extract the animated striped CSS definition to the dedicated CSS file, change the class from `btn-recompile-group-has-changes` to `btn-striped-animated`
- Refactor other className(s) appropriately according to the new component name
- Delete the unused `changes-to-autocompile` css rule since it has not been used anywhere
* Implement the new pdf compile button with the new `SplitMenu` component.
GitOrigin-RevId: d1d055bffd311923fc47b4681605ce8ba8e26f25
578 lines
11 KiB
Text
578 lines
11 KiB
Text
.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;
|
|
}
|
|
}
|
|
|
|
.pdf .toolbar.toolbar-pdf when (@is-overleaf-light = false) {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.toolbar-pdf-orphan,
|
|
.toolbar-pdf-left,
|
|
.toolbar-pdf-right {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.toolbar-pdf-left when (@is-new-css = true) {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.toolbar-pdf-right {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.toolbar-pdf-hybrid {
|
|
.btn:not(.detach-compile-button):not(.btn-orphan):not(.detach-synctex-control):not(.switch-to-editor-btn):not(.split-menu-dropdown-toggle):not(.split-menu-button) {
|
|
display: inline-block;
|
|
color: @toolbar-btn-color;
|
|
background-color: transparent;
|
|
padding: 4px 2px;
|
|
line-height: 1;
|
|
height: 24px;
|
|
border-radius: 2px;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: @toolbar-btn-color;
|
|
}
|
|
|
|
.label {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 0.15em 0.6em 0.2em;
|
|
font-size: 60%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
color: #fff;
|
|
background-color: transparent;
|
|
padding: 4px 2px;
|
|
line-height: 1;
|
|
height: 24px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&.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 {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pdf {
|
|
background-color: @pdf-bg;
|
|
}
|
|
|
|
.pdf-viewer,
|
|
.pdf-logs,
|
|
.pdf-errors,
|
|
.pdf-uncompiled {
|
|
.full-size;
|
|
top: @pdf-top-offset;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.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 when(@is-new-css = false) {
|
|
border-right: 2px solid white;
|
|
border-left: 2px solid white;
|
|
}
|
|
i.fa-arrows-h when(@is-new-css = true) {
|
|
border-right: 2px solid @content-primary;
|
|
border-left: 2px solid @content-primary;
|
|
}
|
|
i.fa-arrows-v when(@is-new-css = false) {
|
|
border-top: 2px solid white;
|
|
border-bottom: 2px solid white;
|
|
}
|
|
i.fa-arrows-v when(@is-new-css = true) {
|
|
border-top: 2px solid @content-primary;
|
|
border-bottom: 2px solid @content-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.synctex-controls {
|
|
margin-right: -8px;
|
|
position: absolute;
|
|
z-index: @synctex-controls-z-index;
|
|
padding: @synctex-controls-padding;
|
|
top: 68px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.keyboard-tooltip {
|
|
.tooltip-inner {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
.keyboard-shortcut {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@keyframes expand-feedback-area {
|
|
from {
|
|
max-height: 0;
|
|
}
|
|
|
|
to {
|
|
max-height: 500px;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@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
|
|
);
|
|
}
|
|
|
|
.pdf-loading-spinner-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|