mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-07 22:34:10 -05:00
850bbceab6
Migrate the Github Sync modal to Bootstrap 5 GitOrigin-RevId: a6178fc2e9c7072d28d0a1b094b42dff12944781
315 lines
6.4 KiB
SCSS
315 lines
6.4 KiB
SCSS
@use 'sass:color';
|
|
|
|
$editor-toggler-bg-dark-color: color.adjust(
|
|
$content-disabled,
|
|
$lightness: -15%
|
|
);
|
|
|
|
:root {
|
|
--editor-toggler-bg-color: #{$editor-toggler-bg-dark-color};
|
|
--editor-resizer-bg-color: var(--bg-dark-secondary);
|
|
}
|
|
|
|
@include theme('light') {
|
|
--editor-toggler-bg-color: var(--content-disabled);
|
|
--editor-resizer-bg-color: var(--bg-light-tertiary);
|
|
}
|
|
|
|
#ide-root {
|
|
height: 100vh; /* for backwards compatibility */
|
|
height: 100dvh; /* needed for mobile devices */
|
|
|
|
.global-alerts {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.chat {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.review-panel-wrapper {
|
|
&.rp-state-overview {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.global-alerts {
|
|
height: 0;
|
|
margin-top: var(--spacing-01);
|
|
text-align: center;
|
|
|
|
[role='alert'] {
|
|
text-align: left;
|
|
min-width: 400px;
|
|
position: relative;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
|
|
.ide-react-editor-sidebar {
|
|
background-color: var(--file-tree-bg);
|
|
height: 100%;
|
|
color: var(--content-secondary-dark);
|
|
}
|
|
|
|
.ide-react-body {
|
|
flex-grow: 1;
|
|
background-color: var(--bg-light-secondary);
|
|
overflow-y: hidden;
|
|
z-index: 0;
|
|
}
|
|
|
|
.ide-react-main {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.toolbar.toolbar-header {
|
|
position: static;
|
|
flex-grow: 0;
|
|
color: var(--neutral-20);
|
|
}
|
|
}
|
|
|
|
.ide-react-symbol-palette {
|
|
height: 100%;
|
|
background-color: var(--bg-dark-tertiary);
|
|
color: var(--neutral-20);
|
|
}
|
|
|
|
.ide-react-editor-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// Ensure an element with class "full-size", such as the binary file view, stays within the bounds of the panel
|
|
.ide-react-panel {
|
|
position: relative;
|
|
container-type: size;
|
|
}
|
|
|
|
.ide-panel-group-resizing {
|
|
background-color: var(--white);
|
|
|
|
// Hide panel contents while resizing
|
|
.ide-react-editor-content,
|
|
.pdf {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.modal.lock-editor-modal {
|
|
display: flex !important;
|
|
background-color: rgba($bg-dark-primary, 0.3);
|
|
overflow-y: hidden;
|
|
pointer-events: none;
|
|
|
|
.modal-dialog {
|
|
top: 25px;
|
|
}
|
|
}
|
|
|
|
.out-of-sync-modal {
|
|
.text-preview {
|
|
margin-top: var(--spacing-05);
|
|
|
|
.scroll-container {
|
|
@include body-sm;
|
|
|
|
max-height: 360px;
|
|
width: 100%;
|
|
background-color: var(--bg-light-primary);
|
|
overflow: auto;
|
|
border: 1px solid var(--border-primary-dark);
|
|
padding: var(--spacing-04) var(--spacing-05);
|
|
text-align: left;
|
|
white-space: pre;
|
|
font-family: monospace;
|
|
}
|
|
}
|
|
}
|
|
|
|
.horizontal-resize-handle {
|
|
width: 7px !important;
|
|
height: 100%;
|
|
|
|
// Enable ::before and ::after pseudo-elements to position themselves correctly
|
|
position: relative;
|
|
background-color: var(--editor-resizer-bg-color);
|
|
|
|
.custom-toggler {
|
|
padding: 0;
|
|
border-width: 0;
|
|
|
|
// Override react-resizable-panels which sets a global * { cursor: ew-resize }
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
&.horizontal-resize-handle-enabled {
|
|
&::before,
|
|
&::after {
|
|
// This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
|
|
// we'd have to change this SVG too
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='18' viewBox='0 0 7 18'%3E%3Cpath d='M2 0h3v3H2zM2 5h3v3H2zM2 10h3v3H2zM2 15h3v3H2z' style='fill:%239da7b7'/%3E%3C/svg%3E");
|
|
display: block;
|
|
position: absolute;
|
|
text-align: center;
|
|
left: 0;
|
|
width: 7px;
|
|
height: 18px;
|
|
}
|
|
|
|
&::before {
|
|
top: 25%;
|
|
}
|
|
|
|
&::after {
|
|
top: 75%;
|
|
}
|
|
}
|
|
|
|
&:not(.horizontal-resize-handle-enabled) {
|
|
cursor: default;
|
|
}
|
|
|
|
.synctex-controls {
|
|
left: -8px;
|
|
margin: 0;
|
|
|
|
// Ensure that SyncTex controls appear in front of PDF viewer controls and logs pane
|
|
z-index: 12;
|
|
|
|
.synctex-control .synctex-control-icon {
|
|
// Override react-resizable-panels which sets a global * { cursor: ew-resize }
|
|
cursor: pointer !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-toggler {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 7px !important;
|
|
height: 50px;
|
|
margin-top: calc(var(--spacing-08) * -1);
|
|
top: 50%;
|
|
background-color: var(--editor-toggler-bg-color);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
outline: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
// Increase hit area
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
inset: 0 -3px;
|
|
}
|
|
|
|
&::after {
|
|
font-family: FontAwesome; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-size: 65%;
|
|
font-weight: bold;
|
|
color: var(--white);
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--bg-accent-01);
|
|
}
|
|
}
|
|
|
|
.custom-toggler-east::after {
|
|
content: '\f105';
|
|
}
|
|
|
|
.custom-toggler-west::after {
|
|
content: '\f104';
|
|
}
|
|
|
|
.custom-toggler-closed.custom-toggler-east::after {
|
|
content: '\f104';
|
|
}
|
|
|
|
.custom-toggler-closed.custom-toggler-west::after {
|
|
content: '\f105';
|
|
}
|
|
|
|
.vertical-resize-handle {
|
|
height: 6px;
|
|
background-color: var(--editor-resizer-bg-color);
|
|
|
|
&.vertical-resize-handle-enabled {
|
|
&:hover {
|
|
background-color: var(--editor-resizer-bg-color);
|
|
}
|
|
}
|
|
|
|
&:not(.vertical-resize-handle-enabled) {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
&::after {
|
|
// This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
|
|
// we'd have to change this SVG too
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='6' viewBox='0 0 18 6'%3E%3Cpath d='M0 1.5h3v3H0zM5 1.5h3v3H5zM10 1.5h3v3h-3zM15 1.5h3v3h-3z' style='fill:%239da7b7'/%3E%3C/svg%3E");
|
|
display: block;
|
|
text-align: center;
|
|
line-height: 0;
|
|
}
|
|
}
|
|
|
|
.full-size {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.teaser-feature-icon {
|
|
vertical-align: sub;
|
|
}
|
|
|
|
.teaser-title {
|
|
margin-top: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.teaser-refresh-label {
|
|
text-align: center;
|
|
}
|
|
|
|
.teaser-img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin-bottom: var(--spacing-03);
|
|
}
|
|
|
|
.teaser-video-container {
|
|
margin: calc(var(--bs-modal-padding) * -1) calc(var(--bs-modal-padding) * -1)
|
|
var(--spacing-02) calc(var(--bs-modal-padding) * -1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.teaser-video {
|
|
width: 100%;
|
|
height: auto;
|
|
border-bottom: 1px solid var(--border-divider);
|
|
}
|