mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-05 14:18:45 -05:00
ed8fc2747a
[web] BS5 toolbar buttons border radius GitOrigin-RevId: b07a7bb16ab7a933dfa714a128f88f2ee006cf04
397 lines
7.3 KiB
SCSS
397 lines
7.3 KiB
SCSS
:root {
|
|
--pdf-bg: var(--neutral-10);
|
|
--pdf-toolbar-btn-hover-color: rgb(125 125 125 / 20%);
|
|
--synctex-control-size: 24px;
|
|
}
|
|
|
|
@include theme('light') {
|
|
--pdf-toolbar-btn-hover-color: var(--neutral-10);
|
|
}
|
|
|
|
.pdf .toolbar.toolbar-pdf {
|
|
@include toolbar-sm-height;
|
|
@include toolbar-alt-bg;
|
|
|
|
padding-right: var(--spacing-03);
|
|
margin-left: 0;
|
|
|
|
.btn.disabled,
|
|
.btn[disabled] {
|
|
pointer-events: auto;
|
|
cursor: not-allowed;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.toolbar-pdf-left {
|
|
gap: var(--spacing-02);
|
|
|
|
.dropdown > .btn {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
|
|
&[disabled],
|
|
&[disabled]:active {
|
|
background-color: var(--bs-btn-bg);
|
|
color: var(--bs-btn-color);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: var(--spacing-02);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.toolbar-pdf-right {
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.toolbar-pdf-orphan {
|
|
justify-content: center;
|
|
color: var(--toolbar-btn-color);
|
|
|
|
.btn {
|
|
margin-left: var(--spacing-03);
|
|
}
|
|
}
|
|
|
|
.btn.pdf-toolbar-btn {
|
|
display: inline-block;
|
|
color: var(--toolbar-btn-color);
|
|
background-color: transparent;
|
|
padding: 0 var(--spacing-01);
|
|
line-height: 1;
|
|
height: 24px;
|
|
border-radius: var(--border-radius-base);
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: var(--toolbar-btn-color);
|
|
}
|
|
|
|
&:hover {
|
|
&:not(:disabled) {
|
|
background-color: var(--pdf-toolbar-btn-hover-color);
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.button-content {
|
|
align-self: center;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 60%;
|
|
}
|
|
|
|
&.log-btn {
|
|
border: none;
|
|
|
|
&.active {
|
|
color: var(--white);
|
|
background-color: var(--link-color);
|
|
box-shadow: none;
|
|
opacity: 0.65;
|
|
|
|
&:hover {
|
|
&:not(:disabled) {
|
|
background-color: transparent;
|
|
color: var(--toolbar-btn-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pdf {
|
|
background-color: var(--pdf-bg);
|
|
}
|
|
|
|
.pdf-viewer,
|
|
.pdf-errors,
|
|
.pdf-uncompiled {
|
|
@extend .full-size;
|
|
|
|
top: var(--toolbar-small-height);
|
|
}
|
|
|
|
.pdf-viewer {
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.pdfjs-viewer {
|
|
@extend .full-size;
|
|
|
|
background-color: transparent;
|
|
overflow: scroll;
|
|
|
|
/* stylelint-disable-next-line selector-class-pattern */
|
|
.canvasWrapper > canvas,
|
|
div.pdf-canvas {
|
|
background: white;
|
|
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
|
|
}
|
|
|
|
div.pdf-canvas.pdfng-empty {
|
|
background-color: var(--white);
|
|
}
|
|
|
|
div.pdf-canvas.pdfng-loading {
|
|
background-color: var(--white);
|
|
}
|
|
|
|
.page-container {
|
|
margin: var(--spacing-05) auto;
|
|
padding: 0 var(--spacing-05);
|
|
box-sizing: content-box;
|
|
user-select: none;
|
|
}
|
|
|
|
.page {
|
|
box-sizing: content-box;
|
|
margin: var(--spacing-05) auto;
|
|
box-shadow: 0 0 8px #bbb;
|
|
border: none;
|
|
}
|
|
|
|
.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 */
|
|
/* stylelint-disable-next-line selector-class-pattern */
|
|
.pdfViewer {
|
|
min-height: 100%;
|
|
}
|
|
}
|
|
|
|
&:focus-within {
|
|
outline: none;
|
|
}
|
|
|
|
/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
|
|
/* stylelint-disable-next-line selector-class-pattern */
|
|
.textLayer br::selection {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.progress-thin {
|
|
position: absolute;
|
|
top: -2px;
|
|
height: 3px;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background-color: var(--link-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.pdfjs-viewer-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
}
|
|
|
|
.pdfjs-zoom-controls {
|
|
display: inline-flex;
|
|
border-left: 1px solid rgb(125 125 125 / 30%);
|
|
}
|
|
|
|
.pdfjs-toolbar-buttons {
|
|
display: flex;
|
|
gap: var(--spacing-04);
|
|
margin-left: var(--spacing-04);
|
|
margin-right: var(--spacing-04);
|
|
|
|
.btn {
|
|
border-radius: var(--border-radius-base) !important;
|
|
}
|
|
}
|
|
|
|
.pdfjs-toolbar-button {
|
|
padding: var(--spacing-01) !important;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.pdfjs-zoom-dropdown-button {
|
|
width: 60px;
|
|
text-align: right;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.pdfjs-zoom-dropdown-mac-shortcut-char {
|
|
display: inline-block;
|
|
width: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.pdfjs-custom-zoom-menu-item {
|
|
display: block;
|
|
pointer-events: initial !important;
|
|
|
|
&:hover {
|
|
background-color: initial !important;
|
|
color: initial !important;
|
|
cursor: initial !important;
|
|
}
|
|
}
|
|
|
|
.pdfjs-page-number-input {
|
|
color: var(--toolbar-btn-color);
|
|
font-size: var(--font-size-02);
|
|
padding-right: var(--spacing-04);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-02);
|
|
|
|
input {
|
|
color: initial;
|
|
border: 1px solid var(--neutral-60);
|
|
width: 32px;
|
|
height: 24px;
|
|
border-radius: var(--border-radius-base);
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.pdfjs-viewer-controls-small {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-04);
|
|
}
|
|
|
|
.pdfjs-toolbar-popover-button {
|
|
padding: var(--spacing-01) !important;
|
|
}
|
|
|
|
.pdfjs-toolbar-popover {
|
|
background-color: var(--editor-toolbar-bg);
|
|
border-radius: var(--border-radius-base);
|
|
|
|
.popover-arrow {
|
|
display: none;
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
color: var(--toolbar-btn-color);
|
|
}
|
|
|
|
.popover-body {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--spacing-04) 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;
|
|
}
|
|
}
|
|
|
|
.synctex-controls {
|
|
margin-right: calc(var(--spacing-04) * -1);
|
|
position: absolute;
|
|
z-index: 6;
|
|
padding: 0;
|
|
top: 68px;
|
|
}
|
|
|
|
.synctex-control:not(.detach-synctex-control) {
|
|
align-items: center;
|
|
background-color: rgba($bg-dark-tertiary, 0.8);
|
|
border-color: transparent;
|
|
border-radius: var(--border-radius-full);
|
|
color: var(--content-primary-dark);
|
|
display: flex !important;
|
|
height: var(--synctex-control-size);
|
|
justify-content: center;
|
|
margin-bottom: var(--spacing-05);
|
|
padding: 0;
|
|
transition: background 0.15s ease;
|
|
width: var(--synctex-control-size);
|
|
|
|
&:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
&:active {
|
|
background-color: rgba($bg-dark-tertiary, 0.8);
|
|
color: var(--content-primary-dark);
|
|
}
|
|
}
|
|
|
|
.synctex-control {
|
|
.synctex-control-icon {
|
|
font-weight: 700;
|
|
font-size: var(--font-size-06);
|
|
}
|
|
}
|
|
|
|
.keyboard-tooltip {
|
|
.tooltip-inner {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
#dropdown-files-logs-pane-list {
|
|
overflow-y: auto;
|
|
|
|
.dropdown-header {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// This keeps the dropdown menu inside the Logs div.
|
|
// "spacing-11" is there to compensate the button height and the margin around the logs.
|
|
max-height: calc(
|
|
100vh - #{$toolbar-small-height + $toolbar-height + $spacing-11}
|
|
);
|
|
}
|