first commit
This commit is contained in:
@@ -0,0 +1,326 @@
|
||||
:root {
|
||||
--chat-bg: var(--neutral-80);
|
||||
--chat-color: var(--white);
|
||||
--chat-instructions-color: var(--neutral-20);
|
||||
--chat-new-message-bg: var(--neutral-70);
|
||||
--chat-new-message-textarea-color: var(--neutral-90);
|
||||
--chat-new-message-textarea-bg: var(--neutral-20);
|
||||
--chat-new-message-textarea-border: var(--editor-border-color);
|
||||
--chat-new-message-border: var(--editor-border-color);
|
||||
--chat-message-date-color: var(--neutral-40);
|
||||
--chat-message-name-color: var(--white);
|
||||
}
|
||||
|
||||
.ide-redesign-main {
|
||||
--chat-bg: var(--bg-dark-primary);
|
||||
--chat-color: var(--content-primary);
|
||||
--chat-instructions-color: var(--content-primary-dark);
|
||||
--chat-new-message-bg: var(--bg-dark-primary);
|
||||
--chat-new-message-textarea-color: var(--content-primary-dark);
|
||||
--chat-new-message-textarea-bg: var(--bg-dark-primary);
|
||||
--chat-message-date-color: var(--content-secondary-dark);
|
||||
--chat-message-name-color: var(--content-secondary-dark);
|
||||
--chat-date-align: center;
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--chat-bg: var(--white);
|
||||
--chat-color: var(--neutral-70);
|
||||
--chat-instructions-color: var(--neutral-70);
|
||||
--chat-new-message-bg: var(--neutral-10);
|
||||
--chat-new-message-textarea-color: var(--neutral-90);
|
||||
--chat-new-message-textarea-bg: var(--white);
|
||||
--chat-new-message-textarea-border: var(--editor-border-color);
|
||||
--chat-new-message-border: var(--editor-border-color);
|
||||
--chat-message-date-color: var(--neutral-70);
|
||||
--chat-message-name-color: var(--neutral-70);
|
||||
|
||||
.ide-redesign-main {
|
||||
--chat-bg: var(--white);
|
||||
--chat-color: var(--neutral-70);
|
||||
--chat-instructions-color: var(--neutral-70);
|
||||
--chat-new-message-bg: var(--neutral-10);
|
||||
--chat-new-message-textarea-color: var(--neutral-90);
|
||||
--chat-new-message-textarea-bg: var(--white);
|
||||
--chat-new-message-textarea-border: var(--editor-border-color);
|
||||
--chat-new-message-border: var(--white);
|
||||
--chat-message-date-color: var(--neutral-70);
|
||||
--chat-message-name-color: var(--neutral-70);
|
||||
--chat-date-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.chat {
|
||||
$new-message-height: 80px;
|
||||
|
||||
color: var(--chat-color);
|
||||
|
||||
.no-messages {
|
||||
padding: calc(var(--line-height-03) / 2);
|
||||
color: var(--chat-instructions-color);
|
||||
}
|
||||
|
||||
.first-message {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: calc(var(--line-height-03) / 2);
|
||||
color: var(--chat-instructions-color);
|
||||
}
|
||||
|
||||
.chat-error {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--chat-bg);
|
||||
padding: calc(var(--line-height-03) / 2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.messages {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
bottom: $new-message-height;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--chat-bg);
|
||||
|
||||
li.message {
|
||||
margin: calc(var(--line-height-03) / 2);
|
||||
|
||||
.date {
|
||||
font-size: var(--font-size-01);
|
||||
color: var(--chat-message-date-color);
|
||||
margin-bottom: calc(var(--line-height-03) / 2);
|
||||
text-align: var(--chat-date-align, right);
|
||||
}
|
||||
|
||||
.message-wrapper {
|
||||
.name {
|
||||
font-size: var(--font-size-01);
|
||||
color: var(--chat-message-name-color);
|
||||
margin-bottom: var(--spacing-02);
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
.message {
|
||||
border-left: 3px solid transparent;
|
||||
font-size: var(--font-size-02);
|
||||
box-shadow: none;
|
||||
border-radius: var(--border-radius-base);
|
||||
position: relative;
|
||||
|
||||
.message-content {
|
||||
padding: var(--spacing-03) var(--spacing-05);
|
||||
overflow-x: auto;
|
||||
color: var(--white);
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transform: rotate(90deg);
|
||||
right: 90%;
|
||||
top: -15px;
|
||||
border: solid;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
border-width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: calc(var(--line-height-03) / 4);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.self) {
|
||||
.message {
|
||||
.arrow {
|
||||
border-left-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.self {
|
||||
margin-top: var(--line-height-03);
|
||||
|
||||
.message-wrapper .message {
|
||||
border-left: none;
|
||||
border-right: 3px solid transparent;
|
||||
|
||||
.arrow {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
border-right-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-message {
|
||||
@extend .full-size;
|
||||
|
||||
top: auto;
|
||||
height: $new-message-height;
|
||||
background-color: var(--chat-new-message-bg);
|
||||
padding: calc(var(--line-height-03) / 4);
|
||||
border-top: 1px solid var(--chat-new-message-border);
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: none;
|
||||
border-radius: var(--border-radius-base);
|
||||
border: 1px solid var(--chat-new-message-textarea-border);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: var(--chat-new-message-textarea-color);
|
||||
font-size: var(--font-size-02);
|
||||
padding: calc(var(--line-height-03) / 4);
|
||||
background-color: var(--chat-new-message-textarea-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-empty-state-placeholder {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
gap: var(--spacing-06);
|
||||
padding: var(--spacing-02);
|
||||
|
||||
.chat-empty-state-icon {
|
||||
padding: var(--spacing-08);
|
||||
font-size: var(--font-size-08);
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
background-color: var(--bg-light-secondary);
|
||||
|
||||
.material-symbols {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-empty-state-title {
|
||||
font-size: var(--font-size-02);
|
||||
line-height: var(--line-height-02);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.chat-empty-state-body {
|
||||
font-size: var(--font-size-02);
|
||||
line-height: var(--line-height-02);
|
||||
color: var(--content-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-message-redesign {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-01);
|
||||
|
||||
.message-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: var(--spacing-03);
|
||||
}
|
||||
|
||||
.message-avatar,
|
||||
.message-avatar-placeholder {
|
||||
flex: 0 0 24px;
|
||||
}
|
||||
|
||||
.message-avatar .avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.message-author,
|
||||
.message-container {
|
||||
flex: 1 1 auto;
|
||||
max-width: calc(100% - 24px - var(--spacing-03));
|
||||
}
|
||||
|
||||
.message-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.message-author {
|
||||
color: var(--chat-message-name-color);
|
||||
font-size: var(--font-size-01);
|
||||
line-height: var(--line-height-01);
|
||||
}
|
||||
|
||||
.message-content {
|
||||
background-color: var(--bg-light-secondary);
|
||||
border-radius: var(--border-radius-large);
|
||||
padding: var(--spacing-03) var(--spacing-04);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.message-container.message-from-self {
|
||||
justify-content: flex-end;
|
||||
|
||||
.message-content {
|
||||
background-color: var(--bg-accent-03);
|
||||
}
|
||||
|
||||
&:not(.first-row-in-message) .message-content {
|
||||
border-top-right-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
&:not(.last-row-in-message) .message-content {
|
||||
border-bottom-right-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
|
||||
.message-container:not(.message-from-self) {
|
||||
&:not(.first-row-in-message) .message-content {
|
||||
border-top-left-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
&:not(.last-row-in-message) .message-content {
|
||||
border-bottom-left-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.chat-wrapper {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
$stripe-width: 20px;
|
||||
|
||||
@keyframes pdf-toolbar-stripes {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: $stripe-width 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-striped-animated {
|
||||
@include striped;
|
||||
|
||||
background-size: $stripe-width $stripe-width;
|
||||
background-origin: content-box;
|
||||
|
||||
@include animation(pdf-toolbar-stripes 2s linear infinite);
|
||||
}
|
||||
|
||||
.detach-compile-button {
|
||||
&[disabled],
|
||||
&[disabled]:active {
|
||||
background-color: var(--bs-btn-bg);
|
||||
color: var(--bs-btn-color);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes compile-button-flash {
|
||||
0%,
|
||||
100% {
|
||||
background: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
background: rgb(0 0 0 / 20%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes compile-button-bounce {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
|
||||
.detach-compile-button-animate {
|
||||
animation-duration: 1.2s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-name: compile-button-flash;
|
||||
}
|
||||
|
||||
.detach-compile-button-animate .material-symbols {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.4s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
||||
animation-name: compile-button-bounce;
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
.figure-modal-help-link,
|
||||
.figure-modal-help-link:hover,
|
||||
.figure-modal-help-link:focus,
|
||||
.figure-modal-help-link:active {
|
||||
color: var(--neutral-90) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.figure-modal-help-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.figure-modal-switcher-input {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file-container {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
padding: var(--spacing-07) var(--spacing-08);
|
||||
border: 1px dashed #eaeaea;
|
||||
background-color: #fafafa;
|
||||
justify-content: space-between;
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
.file-container-file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--neutral-20);
|
||||
border-radius: var(--border-radius-medium);
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
padding: var(--spacing-06) var(--spacing-07);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
margin-left: var(--spacing-07);
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.figure-modal-source-button-grid {
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 0 auto;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.figure-modal-source-button {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 4px 0 #1e253029;
|
||||
line-height: 44px;
|
||||
background-color: var(--white);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: none;
|
||||
padding: 0 var(--spacing-04);
|
||||
|
||||
&-title {
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.figure-modal-source-button-icon {
|
||||
margin-right: var(--spacing-03);
|
||||
}
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.figure-modal-upload .uppy-Dashboard-AddFiles-list {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,811 @@
|
||||
:root {
|
||||
--file-tree-item-hover-bg: var(--bg-dark-secondary);
|
||||
--file-tree-item-selected-bg: var(--bg-accent-01);
|
||||
--file-tree-item-color: var(--content-primary-dark);
|
||||
--file-tree-bg: var(--bg-dark-tertiary);
|
||||
--file-tree-item-selected-color: var(--content-primary-dark);
|
||||
--file-tree-item-dragging-bg: #{rgb($bg-dark-secondary, 0.9)};
|
||||
--file-tree-item-dragging-color: var(--content-primary-dark);
|
||||
--file-tree-item-dragging-preview-bg: #{rgb($bg-accent-01, 0.6)};
|
||||
--file-tree-item-dragging-preview-colour: var(--content-primary-dark);
|
||||
--file-tree-line-height: 2.05;
|
||||
--file-tree-icon-colour: var(--content-disabled);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--file-tree-item-hover-bg: var(--bg-light-tertiary);
|
||||
--file-tree-item-color: var(--content-secondary);
|
||||
--file-tree-bg: var(--bg-light-primary);
|
||||
--file-tree-item-selected-color: var(--bg-light-primary);
|
||||
--file-tree-item-dragging-bg: #{rgb($bg-light-tertiary, 0.9)};
|
||||
--file-tree-item-dragging-color: var(--content-secondary);
|
||||
--file-tree-item-dragging-preview-colour: var(--bg-light-primary);
|
||||
|
||||
.ide-redesign-main {
|
||||
--file-tree-item-hover-bg: var(--bg-light-secondary);
|
||||
--file-tree-item-selected-bg: var(--bg-accent-03);
|
||||
--file-tree-item-selected-color: var(--green-70);
|
||||
--file-tree-item-color: var(--content-primary);
|
||||
--file-tree-bg: var(--white);
|
||||
--file-tree-icon-colour: var(--content-primary);
|
||||
--file-tree-item-dragging-bg: #{rgb($bg-dark-primary, 0.9)};
|
||||
--file-tree-item-dragging-color: var(--white);
|
||||
--file-tree-item-dragging-preview-bg: #{rgb($bg-light-secondary, 0.6)};
|
||||
--file-tree-item-dragging-preview-colour: #{rgb($content-primary, 0.6)};
|
||||
--file-tree-expand-button-color: var(--content-primary);
|
||||
}
|
||||
}
|
||||
|
||||
// TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
|
||||
.ide-redesign-main {
|
||||
--file-tree-item-hover-bg: var(--bg-dark-secondary);
|
||||
--file-tree-item-selected-bg: var(--green-70);
|
||||
--file-tree-item-selected-color: var(--green-10);
|
||||
--file-tree-item-color: var(--content-primary-dark);
|
||||
--file-tree-bg: var(--bg-dark-primary);
|
||||
--file-tree-icon-colour: var(--content-primary-dark);
|
||||
--file-tree-item-dragging-bg: #{rgb($bg-light-primary, 0.9)};
|
||||
--file-tree-item-dragging-color: var(--content-secondary);
|
||||
--file-tree-item-dragging-preview-bg: var(--bg-light-primary);
|
||||
--file-tree-item-dragging-preview-colour: var(--bg-light-primary);
|
||||
--file-tree-expand-button-color: var(--content-primary-dark);
|
||||
|
||||
.file-tree-outline-panel-group {
|
||||
background-color: var(--file-tree-bg);
|
||||
}
|
||||
|
||||
.file-tree-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 28px;
|
||||
margin: var(--spacing-02);
|
||||
}
|
||||
|
||||
.file-tree-panel {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.file-tree-panel-collapsed {
|
||||
max-height: 36px;
|
||||
}
|
||||
|
||||
.file-tree-expand-collapse-button {
|
||||
border-radius: var(--border-radius-base);
|
||||
color: var(--file-tree-expand-button-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0 var(--spacing-02);
|
||||
flex-grow: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--file-tree-item-hover-bg);
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--file-tree-expand-button-color);
|
||||
font-size: var(--font-size-02);
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree-toolbar-action-buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.file-tree-toolbar-action-button {
|
||||
color: var(--file-tree-expand-button-color);
|
||||
padding: var(--spacing-02);
|
||||
border-radius: var(--border-radius-full);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--file-tree-item-hover-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--file-tree-expand-button-color);
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree {
|
||||
background-color: var(--file-tree-bg);
|
||||
}
|
||||
|
||||
.file-tree ul.file-tree-list {
|
||||
margin: var(--spacing-02);
|
||||
}
|
||||
|
||||
.file-tree-folder-list {
|
||||
border-left: 1px solid
|
||||
color-mix(in srgb, var(--border-primary) 24%, transparent);
|
||||
margin-left: 14px !important;
|
||||
margin-top: 0;
|
||||
|
||||
&.file-tree-list {
|
||||
border-left: none;
|
||||
margin-left: var(--spacing-02) !important;
|
||||
|
||||
> .file-tree-folder-list-inner {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree-folder-list-inner {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-02);
|
||||
}
|
||||
|
||||
.item-name-button,
|
||||
.folder-expand-collapse-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
.file-tree ul.file-tree-list li .material-symbols.file-tree-expand-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.file-tree ul.file-tree-list li .material-symbols.file-tree-icon {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// TODO ide-redesign-cleanup: Remove the !important overrides once
|
||||
// we have replaced the default styling
|
||||
.linked-file-highlight {
|
||||
background-color: var(--file-tree-bg) !important;
|
||||
color: var(--file-tree-icon-colour) !important;
|
||||
left: 14px !important;
|
||||
}
|
||||
|
||||
.entity-name {
|
||||
color: var(--file-tree-item-color);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-02);
|
||||
|
||||
// TODO ide-redesign-cleanup: This is here to override the fake-full-width-bg
|
||||
// mixin. We can just remove that mixin when we clean this up.
|
||||
&::before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name-button {
|
||||
margin-left: var(--spacing-02);
|
||||
}
|
||||
|
||||
.dnd-draggable-preview-item {
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
|
||||
.ide-react-file-tree-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// Prevent the file tree expanding beyond the boundary of the panel
|
||||
.file-tree {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.editor-sidebar {
|
||||
background-color: var(--file-tree-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@mixin fake-full-width-bg($bg-color) {
|
||||
&::before {
|
||||
content: '\00a0';
|
||||
position: absolute;
|
||||
width: 9999px;
|
||||
left: -9999px;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include theme('default') {
|
||||
.file-tree {
|
||||
.toolbar {
|
||||
.toolbar-right,
|
||||
.toolbar-left {
|
||||
button {
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: rgba(125 125 125 / 20%);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: rgba(125 125 125 / 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree {
|
||||
display: flex !important; // To work around jQuery layout's inline styles
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.file-tree-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
font-size: var(--font-size-02);
|
||||
|
||||
&.no-toolbar {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO; Consolidate with "Project files" in Overleaf
|
||||
h3 {
|
||||
font-size: var(--font-size-03);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
padding-bottom: var(--spacing-02);
|
||||
margin: var(--spacing-05);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
.toolbar-right,
|
||||
.toolbar-left {
|
||||
button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: var(--border-radius-base);
|
||||
border: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: rgb(125 125 125 / 10%);
|
||||
color: var(--toolbar-btn-color) !important;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: rgb(125 125 125 / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.file-tree-list {
|
||||
margin: 0;
|
||||
overflow: hidden auto;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
|
||||
.entity > ul,
|
||||
ul[role='tree'] {
|
||||
margin-left: var(--spacing-08);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
min-height: var(--spacing-08);
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: var(--file-tree-line-height);
|
||||
position: relative;
|
||||
|
||||
.entity {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.entity > .entity-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > button {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
&.item-name-button {
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
padding-right: var(--spacing-09);
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-name {
|
||||
color: var(--file-tree-item-color);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.entity-name-react {
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
@include fake-full-width-bg(transparent);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--file-tree-item-hover-bg);
|
||||
|
||||
// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
|
||||
// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
|
||||
// and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
|
||||
// the empty space.
|
||||
@include fake-full-width-bg(var(--file-tree-item-hover-bg));
|
||||
}
|
||||
|
||||
input {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.entity-menu-toggle > .material-symbols {
|
||||
color: var(--content-primary-dark);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
color: var(--file-tree-icon-colour);
|
||||
|
||||
&.file-tree-icon {
|
||||
margin-right: var(--spacing-02);
|
||||
margin-left: var(--spacing-04);
|
||||
vertical-align: sub;
|
||||
|
||||
&.linked-file-icon {
|
||||
position: relative;
|
||||
left: -2px;
|
||||
|
||||
+ .linked-file-highlight {
|
||||
color: var(--file-tree-bg);
|
||||
background-color: var(--content-disabled);
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 20px;
|
||||
font-size: var(--font-size-01);
|
||||
border-radius: var(--spacing-01);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.file-tree-folder-icon {
|
||||
margin-right: var(--spacing-02);
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
&.file-tree-expand-icon {
|
||||
margin-left: var(--spacing-04);
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
|
||||
.material-symbols.toggle {
|
||||
width: 24px;
|
||||
padding: var(--spacing-03);
|
||||
font-size: var(--font-size-03);
|
||||
color: var(--file-tree-icon-colour);
|
||||
}
|
||||
|
||||
.file-tree-dropdown-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--content-primary-dark);
|
||||
line-height: 1.6;
|
||||
font-size: var(--font-size-05);
|
||||
padding: 0 var(--font-size-02) 0 var(--font-size-04);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\00B7\00B7\00B7';
|
||||
transform: rotate(90deg);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.multi-selected {
|
||||
> .entity {
|
||||
> .entity-name {
|
||||
> div > .material-symbols,
|
||||
> button > .material-symbols,
|
||||
> .material-symbols,
|
||||
.entity-menu-toggle .material-symbols {
|
||||
color: var(--content-primary-dark);
|
||||
}
|
||||
|
||||
> .material-symbols.linked-file-highlight {
|
||||
background-color: var(--bg-info-01);
|
||||
}
|
||||
|
||||
@include fake-full-width-bg(var(--bg-info-01));
|
||||
|
||||
color: var(--content-primary-dark);
|
||||
font-weight: bold;
|
||||
background-color: var(--bg-info-01);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-info-02);
|
||||
|
||||
@include fake-full-width-bg(var(--bg-info-02));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.rename-input {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
color: var(--content-primary);
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> .entity > .entity-name {
|
||||
.entity-menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-limit-hit {
|
||||
line-height: var(--file-tree-line-height);
|
||||
color: var(--file-tree-item-color);
|
||||
margin-left: var(--spacing-05);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.entity-limit-hit-message {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.material-symbols .entity-limit-hit-tooltip-trigger {
|
||||
margin-left: var(spacing-03);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.multi-selected) {
|
||||
ul.file-tree-list li.selected {
|
||||
> .entity {
|
||||
> .entity-name {
|
||||
background-color: var(--file-tree-item-selected-bg);
|
||||
color: var(--file-tree-item-selected-color);
|
||||
|
||||
> div > .material-symbols,
|
||||
> button > .material-symbols,
|
||||
> .material-symbols,
|
||||
.entity-menu-toggle .material-symbols {
|
||||
color: var(--file-tree-item-selected-color);
|
||||
}
|
||||
|
||||
> .material-symbols.linked-file-highlight {
|
||||
background-color: var(--bg-info-01);
|
||||
}
|
||||
|
||||
@include fake-full-width-bg(var(--file-tree-item-selected-bg));
|
||||
|
||||
font-weight: bold;
|
||||
padding-right: var(--spacing-09);
|
||||
|
||||
button {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.entity-menu-toggle {
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
padding-right: var(--spacing-02);
|
||||
padding-left: var(--spacing-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// while dragging, the previously selected item gets no highlight
|
||||
ul.file-tree-list.file-tree-dragging li.selected .entity .entity-name {
|
||||
@include fake-full-width-bg(transparent);
|
||||
|
||||
font-weight: normal;
|
||||
background-color: transparent;
|
||||
color: var(--file-tree-item-color);
|
||||
|
||||
.material-symbols {
|
||||
color: var(--content-disabled) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// the items being dragged get the full "hover" colour
|
||||
ul.file-tree-list.file-tree-dragging
|
||||
li
|
||||
.entity.file-tree-entity-dragging
|
||||
.entity-name {
|
||||
background-color: var(--file-tree-item-dragging-bg);
|
||||
|
||||
@include fake-full-width-bg(var(--file-tree-item-dragging-bg));
|
||||
|
||||
color: var(--file-tree-item-dragging-color);
|
||||
|
||||
.material-symbols {
|
||||
color: var(--content-disabled) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// the drop target gets the "selected" colour
|
||||
ul.file-tree-list.file-tree-dragging
|
||||
li.dnd-droppable-hover
|
||||
.entity
|
||||
.entity-name {
|
||||
background-color: var(--file-tree-item-selected-bg);
|
||||
|
||||
@include fake-full-width-bg(var(--file-tree-item-selected-bg));
|
||||
|
||||
color: var(--file-tree-item-selected-color);
|
||||
|
||||
.material-symbols {
|
||||
color: var(--file-tree-item-selected-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dnd-draggable-preview-layer {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&.dnd-droppable-hover {
|
||||
border: 3px solid var(--file-tree-item-selected-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.dnd-draggable-preview-item {
|
||||
color: var(--file-tree-item-dragging-preview-colour);
|
||||
background-color: var(--file-tree-item-dragging-preview-bg);
|
||||
width: 75%;
|
||||
padding-left: var(--spacing-08);
|
||||
line-height: 2.05;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.disconnected-overlay {
|
||||
background-color: var(--file-tree-bg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
opacity: 0.5;
|
||||
cursor: wait;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-new-file {
|
||||
padding: 0;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-file-type-button {
|
||||
font-size: var(--font-size-02);
|
||||
margin-top: calc(var(--spacing-05) * -1);
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.btn:focus-within {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-new-file-list {
|
||||
background-color: var(--bg-light-secondary);
|
||||
width: 220px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
/* old modal (a) */
|
||||
a {
|
||||
color: var(--content-secondary);
|
||||
padding: var(--spacing-03);
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* new modal (button) */
|
||||
.btn {
|
||||
color: var(--content-secondary);
|
||||
padding: var(--spacing-03);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
background-color: white;
|
||||
|
||||
/* old modal (a) */
|
||||
a {
|
||||
color: var(--link-ui);
|
||||
}
|
||||
|
||||
/* new modal (button) */
|
||||
.btn {
|
||||
color: var(--link-ui);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree-error {
|
||||
text-align: center;
|
||||
color: var(--content-secondary-dark);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.file-tree-modal-alert {
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
|
||||
.btn.modal-new-file-mode {
|
||||
justify-content: left;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-new-file-body {
|
||||
padding: 20px;
|
||||
padding-top: var(--spacing-03);
|
||||
}
|
||||
|
||||
.modal-new-file-body-upload {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.modal-new-file-body-conflict {
|
||||
background-color: var(--bg-danger-03);
|
||||
border: 1px dashed var(--border-danger);
|
||||
min-height: 400px;
|
||||
border-radius: 3px;
|
||||
color: var(--content-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-05);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
.approaching-file-limit {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.at-file-limit {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.modal-new-file-body-upload .uppy-Root {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.modal-new-file-body-upload .uppy-Dashboard {
|
||||
.uppy-Dashboard-inner {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-dropFilesHereHint {
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-AddFiles {
|
||||
margin: 0;
|
||||
border: 1px dashed var(--border-primary);
|
||||
height: 100%;
|
||||
|
||||
.uppy-Dashboard-AddFiles-title {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.uppy-Dashboard-AddFiles-title {
|
||||
width: 26em; // sized to create a wrap between the sentences
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.uppy-Informer p {
|
||||
background-color: var(--bg-info-03);
|
||||
border: 1px solid var(--blue-20);
|
||||
border-radius: var(--border-radius-base);
|
||||
color: var(--content-primary);
|
||||
font-size: var(--font-size-03);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
.file-view {
|
||||
padding: var(--spacing-05);
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
|
||||
.loading-panel {
|
||||
padding-top: 8rem;
|
||||
background: var(--neutral-10);
|
||||
}
|
||||
|
||||
.file-view-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-03);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.file-view-error {
|
||||
margin: var(--spacing-08) auto auto;
|
||||
max-width: 400px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
img,
|
||||
.file-view-pdf {
|
||||
max-width: 100%;
|
||||
max-height: 90%;
|
||||
display: block;
|
||||
margin: var(--spacing-05) auto auto;
|
||||
border: 1px solid var(--neutral-60);
|
||||
box-shadow: 0 2px 3px var(--neutral-60);
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.file-view-pdf {
|
||||
overflow: auto;
|
||||
width: max-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.pdf-page:not(:last-of-type) {
|
||||
border-bottom: 1px solid var(--neutral-60);
|
||||
}
|
||||
}
|
||||
|
||||
.linked-file-icon {
|
||||
color: var(--blue-50);
|
||||
}
|
||||
|
||||
.no-preview {
|
||||
color: var(--neutral-60);
|
||||
font-size: var(--font-size-06);
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
|
||||
.text-preview {
|
||||
margin-top: var(--spacing-05);
|
||||
color: var(--content-primary);
|
||||
|
||||
.scroll-container {
|
||||
background-color: var(--white);
|
||||
font-size: 0.8em;
|
||||
line-height: 1.1em;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--neutral-30);
|
||||
padding: var(--spacing-04) var(--spacing-05);
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-size,
|
||||
.loading-panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.no-history-available,
|
||||
.no-file-selection-message,
|
||||
.multi-selection-message {
|
||||
width: 50%;
|
||||
margin: var(--spacing-10) auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pdf-empty,
|
||||
.no-history-available,
|
||||
.no-file-selection,
|
||||
.multi-selection-ongoing {
|
||||
&::before {
|
||||
@extend .full-size;
|
||||
|
||||
left: 20px;
|
||||
content: '';
|
||||
background: url(../../../../../public/img/ol-brand/overleaf-o-grey.svg)
|
||||
center / 200px no-repeat;
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,547 @@
|
||||
:root {
|
||||
--history-react-header-bg: var(--bg-dark-secondary);
|
||||
--history-react-header-color: var(--content-primary-dark);
|
||||
--history-react-separator-color: var(--border-divider-dark);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--history-react-header-bg: var(--bg-light-primary);
|
||||
--history-react-header-color: var(--content-primary);
|
||||
--history-react-separator-color: var(--border-divider);
|
||||
}
|
||||
|
||||
history-root {
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Adding !important to override the styling of overlays and popovers
|
||||
.history-popover .popover-arrow {
|
||||
top: 20px !important;
|
||||
transform: unset !important;
|
||||
}
|
||||
|
||||
.history-react {
|
||||
--history-change-list-padding: var(--spacing-06);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background-color: var(--bg-light-primary);
|
||||
|
||||
.history-header {
|
||||
@include body-sm;
|
||||
|
||||
height: 40px;
|
||||
background-color: var(--history-react-header-bg);
|
||||
color: var(--history-react-header-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.doc-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.toolbar-container {
|
||||
border-bottom: 1px solid var(--history-react-separator-color);
|
||||
padding: 0 var(--spacing-04);
|
||||
}
|
||||
|
||||
.doc-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-container .loading {
|
||||
margin: 10rem auto auto;
|
||||
}
|
||||
|
||||
.change-list {
|
||||
@include body-sm;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 320px;
|
||||
border-left: 1px solid var(--history-react-separator-color);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.toggle-switch-label {
|
||||
flex: 1;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.history-version-list-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.history-all-versions-scroller {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.history-all-versions-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.history-versions-bottom {
|
||||
position: absolute;
|
||||
height: 8em;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.history-toggle-switch-container,
|
||||
.history-version-day,
|
||||
.history-version-details {
|
||||
padding: 0 var(--history-change-list-padding);
|
||||
}
|
||||
|
||||
.history-version-day {
|
||||
background-color: white;
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
display: block;
|
||||
padding-top: var(--spacing-05);
|
||||
padding-bottom: var(--spacing-02);
|
||||
line-height: var(--line-height-02);
|
||||
}
|
||||
|
||||
.history-version-details {
|
||||
display: flow-root;
|
||||
padding-top: var(--spacing-04);
|
||||
padding-bottom: var(--spacing-04);
|
||||
position: relative;
|
||||
|
||||
&.history-version-selectable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
&.history-version-selected {
|
||||
background-color: var(--bg-accent-03);
|
||||
border-left: var(--spacing-02) solid var(--green-50);
|
||||
padding-left: calc(
|
||||
var(--history-change-list-padding) - var(--spacing-02)
|
||||
);
|
||||
}
|
||||
|
||||
&.history-version-selected.history-version-selectable:hover {
|
||||
background-color: rgb($green-70, 16%);
|
||||
border-left: var(--spacing-02) solid var(--green-50);
|
||||
}
|
||||
|
||||
&.history-version-within-selected {
|
||||
background-color: var(--bg-light-secondary);
|
||||
border-left: var(--spacing-02) solid var(--green-50);
|
||||
}
|
||||
|
||||
&.history-version-within-selected:hover {
|
||||
background-color: rgb($neutral-90, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.version-element-within-selected {
|
||||
background-color: var(--bg-light-secondary);
|
||||
border-left: var(--spacing-02) solid var(--green-50);
|
||||
}
|
||||
|
||||
.version-element-selected {
|
||||
background-color: var(--bg-accent-03);
|
||||
border-left: var(--spacing-02) solid var(--green-50);
|
||||
}
|
||||
|
||||
.history-version-metadata-time {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-02);
|
||||
color: var(--content-primary);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.history-version-metadata-users,
|
||||
.history-version-changes {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.history-version-restore-file {
|
||||
margin-bottom: var(--spacing-04);
|
||||
}
|
||||
|
||||
.history-version-metadata-users {
|
||||
display: inline;
|
||||
vertical-align: bottom;
|
||||
|
||||
> li {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
.history-version-changes {
|
||||
> li {
|
||||
margin-bottom: var(--spacing-02);
|
||||
}
|
||||
}
|
||||
|
||||
.history-version-user-badge-color {
|
||||
--badge-size: 8px;
|
||||
|
||||
display: inline-block;
|
||||
width: var(--badge-size);
|
||||
height: var(--badge-size);
|
||||
margin-right: var(--spacing-02);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.history-version-user-badge-text {
|
||||
overflow-wrap: anywhere;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.history-version-day,
|
||||
.history-version-change-action,
|
||||
.history-version-metadata-users,
|
||||
.history-version-origin,
|
||||
.history-version-saved-by {
|
||||
color: var(--content-secondary);
|
||||
}
|
||||
|
||||
.history-version-change-action {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.history-version-change-doc {
|
||||
color: var(--content-primary);
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.history-version-divider-container {
|
||||
padding: var(--spacing-03) var(--spacing-04);
|
||||
}
|
||||
|
||||
.history-version-divider {
|
||||
margin: 0;
|
||||
border-color: var(--border-divider);
|
||||
}
|
||||
|
||||
.history-version-badge {
|
||||
margin-bottom: var(--spacing-02);
|
||||
margin-right: var(--spacing-05);
|
||||
height: unset;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
.material-symbols {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.history-version-label {
|
||||
margin-bottom: var(--spacing-02);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
font-family: $font-family-serif;
|
||||
}
|
||||
|
||||
.history-all-versions-loading {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
padding: var(--spacing-05) 0;
|
||||
background-color: var(--bg-light-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.history-version-saved-by {
|
||||
.history-version-saved-by-label {
|
||||
margin-right: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.open {
|
||||
.history-version-dropdown-menu-btn {
|
||||
background-color: rgb(var(--bg-dark-primary) 0.08);
|
||||
box-shadow: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.history-compare-btn,
|
||||
.history-version-dropdown-menu-btn {
|
||||
@include reset-button;
|
||||
@include action-button;
|
||||
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.history-loading-panel {
|
||||
padding-top: 10rem;
|
||||
font-family: $font-family-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.history-react-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-04);
|
||||
|
||||
.history-react-toolbar-file-info {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.history-react-toolbar-time {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.history-paywall-prompt {
|
||||
padding: var(--history-change-list-padding);
|
||||
|
||||
.history-feature-list {
|
||||
list-style: none;
|
||||
padding-left: var(--spacing-04);
|
||||
|
||||
li {
|
||||
margin-bottom: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.history-version-faded .history-version-details {
|
||||
max-height: 6em;
|
||||
|
||||
@include mask-image(linear-gradient(black 35%, transparent));
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.history-paywall-heading {
|
||||
@include heading-sm;
|
||||
@include premium-text;
|
||||
|
||||
font-family: inherit;
|
||||
font-weight: 700;
|
||||
margin-top: var(--spacing-08);
|
||||
}
|
||||
|
||||
.history-content {
|
||||
padding: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
|
||||
.history-version-label-tooltip {
|
||||
padding: var(--spacing-03);
|
||||
text-align: initial;
|
||||
|
||||
.history-version-label-tooltip-row {
|
||||
margin-bottom: var(--spacing-03);
|
||||
|
||||
.history-version-label-tooltip-row-comment {
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
& .material-symbols {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-diff-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.cm-viewer-container,
|
||||
.cm-editor {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.previous-highlight-button,
|
||||
.next-highlight-button {
|
||||
@include shadow-md;
|
||||
|
||||
position: absolute;
|
||||
right: var(--spacing-06);
|
||||
}
|
||||
|
||||
.previous-highlight-button {
|
||||
top: var(--spacing-06);
|
||||
}
|
||||
|
||||
.next-highlight-button {
|
||||
bottom: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
|
||||
.history-dropdown-icon {
|
||||
color: var(--content-primary);
|
||||
}
|
||||
|
||||
.history-dropdown-icon-inverted {
|
||||
color: var(--neutral-10);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.history-restore-promo-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.history-file-tree {
|
||||
display: flex !important; // To work around jQuery layout's inline styles
|
||||
flex-direction: column;
|
||||
max-height: 100%;
|
||||
|
||||
ul.history-file-tree-list {
|
||||
font-size: var(--font-size-02);
|
||||
margin: 0;
|
||||
overflow: hidden auto;
|
||||
|
||||
.history-file-tree-item > ul,
|
||||
ul[role='tree'] {
|
||||
margin-left: var(--spacing-08);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
min-height: 25px;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: var(--file-tree-line-height);
|
||||
position: relative;
|
||||
margin-left: var(--spacing-04);
|
||||
|
||||
.history-file-tree-item {
|
||||
color: var(--file-tree-item-color);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include fake-full-width-bg(transparent);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--file-tree-item-hover-bg);
|
||||
|
||||
// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
|
||||
// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
|
||||
// and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
|
||||
// the empty space.
|
||||
@include fake-full-width-bg(var(--file-tree-item-hover-bg));
|
||||
}
|
||||
|
||||
.history-file-tree-folder-button {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.history-file-tree-item-name-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.history-file-tree-item-name {
|
||||
margin-right: var(--spacing-02);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-grow: 1;
|
||||
white-space: pre;
|
||||
|
||||
&.strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.history-file-tree-item-badge {
|
||||
text-transform: capitalize;
|
||||
font-weight: normal;
|
||||
margin-right: var(--spacing-05);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--neutral-20) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
color: var(--content-disabled);
|
||||
|
||||
&.file-tree-icon {
|
||||
margin-right: var(--spacing-02);
|
||||
margin-left: var(--spacing-04);
|
||||
}
|
||||
|
||||
&.file-tree-folder-icon {
|
||||
margin-right: var(--spacing-02);
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
&.file-tree-expand-icon {
|
||||
margin-left: var(--spacing-04);
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.selected > .history-file-tree-item {
|
||||
color: var(--file-tree-item-selected-color);
|
||||
background-color: var(--file-tree-item-selected-bg);
|
||||
font-weight: bold;
|
||||
|
||||
> div > .material-symbols,
|
||||
> button > .material-symbols,
|
||||
> .material-symbols,
|
||||
.material-symbols {
|
||||
color: var(--file-tree-item-selected-color);
|
||||
}
|
||||
|
||||
@include fake-full-width-bg(var(--file-tree-item-selected-bg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history-error {
|
||||
padding: var(--spacing-06);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
.hotkeys-modal {
|
||||
font-size: var(--font-size-02);
|
||||
|
||||
h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.hotkey {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
.description {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.combination {
|
||||
padding: var(--spacing-02) var(--spacing-04);
|
||||
border-radius: 3px;
|
||||
background-color: var(--bg-dark-tertiary);
|
||||
color: var(--white);
|
||||
font-weight: 600;
|
||||
margin-right: var(--spacing-03);
|
||||
}
|
||||
|
||||
.hotkeys-modal-bottom-text {
|
||||
background-color: var(--bg-light-secondary);
|
||||
padding: var(--spacing-04);
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.ide-redesign-switcher-modal .modal-content {
|
||||
color: var(--content-primary);
|
||||
font-size: var(--font-size-03);
|
||||
line-height: var(--line-height-03);
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ide-redesign-switcher-modal-whats-new {
|
||||
background-color: var(--bg-light-secondary);
|
||||
border: 1px solid var(--border-divider);
|
||||
padding: var(--spacing-05);
|
||||
margin: var(--spacing-05) 0;
|
||||
|
||||
ul li:not(:last-child) {
|
||||
margin-bottom: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
.ide-redesign-switcher-modal-leave-text {
|
||||
color: var(--content-secondary);
|
||||
|
||||
a {
|
||||
color: var(--link-ui);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
:root {
|
||||
--ide-redesign-background: var(--bg-dark-primary);
|
||||
--ide-redesign-color: var(--content-primary-dark);
|
||||
--ide-redesign-resizing-background: var(--bg-dark-primary);
|
||||
--ide-redesign-color-scheme: dark;
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--ide-redesign-background: var(--bg-light-primary);
|
||||
--ide-redesign-color: var(--content-primary);
|
||||
--ide-redesign-resizing-background: var(--white);
|
||||
--ide-redesign-color-scheme: light;
|
||||
}
|
||||
|
||||
.ide-redesign-body {
|
||||
color-scheme: var(--ide-redesign-color-scheme);
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
background-color: var(--ide-redesign-background);
|
||||
color: var(--ide-redesign-color);
|
||||
overflow-y: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ide-redesign-main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.ide-panel-group-resizing {
|
||||
background-color: var(--ide-redesign-resizing-background);
|
||||
}
|
||||
}
|
||||
|
||||
.ide-skeleton-block {
|
||||
border: 1px solid grey;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ide-redesign-full-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ide-redesign-pdf-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ide-redesign-editor-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ide-redesign-editor-content {
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,344 @@
|
||||
@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-redesign-main {
|
||||
--editor-resizer-bg-color: var(--bg-light-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
#ide-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ide-redesign-main {
|
||||
--editor-resizer-bg-color: var(--bg-dark-tertiary);
|
||||
|
||||
.ide-panel-group-resizing {
|
||||
background-color: var(--white);
|
||||
|
||||
// Hide panel contents while resizing
|
||||
.ide-redesign-editor-content,
|
||||
.pdf {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ide-react-body {
|
||||
flex-grow: 1;
|
||||
background-color: var(--bg-light-secondary);
|
||||
overflow-y: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ide-react-main {
|
||||
flex: 1;
|
||||
overflow-y: hidden;
|
||||
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);
|
||||
}
|
||||
|
||||
.loading-panel {
|
||||
inset: 0;
|
||||
text-align: center;
|
||||
padding-top: var(--spacing-16);
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
:root {
|
||||
--left-menu-form-select-border: var(--border-primary);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--left-menu-form-select-border: var(--border-disabled);
|
||||
}
|
||||
|
||||
.left-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--bg-light-secondary);
|
||||
z-index: 100;
|
||||
overflow: hidden auto;
|
||||
transition: left ease-in-out 0.5s;
|
||||
font-size: var(--font-size-02);
|
||||
width: 340px;
|
||||
|
||||
&.shown {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: var(--font-size-03);
|
||||
margin: var(--spacing-05) 0;
|
||||
padding-bottom: var(--spacing-03);
|
||||
color: var(--content-secondary);
|
||||
border-bottom: 1px solid var(--border-primary-dark);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul.nav {
|
||||
.left-menu-button {
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-03);
|
||||
font-weight: 700;
|
||||
color: var(--link-ui);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
|
||||
.material-symbols {
|
||||
margin-right: var(--spacing-04);
|
||||
color: var(--neutral-70);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--bg-info-01);
|
||||
color: var(--white);
|
||||
|
||||
.material-symbols {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: var(--bg-info-01);
|
||||
color: var(--white);
|
||||
|
||||
.material-symbols {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
color: var(--neutral-70);
|
||||
}
|
||||
|
||||
padding: var(--spacing-03);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.link-disabled {
|
||||
color: var(--content-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
> ul.nav:last-child {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
ul.nav-downloads {
|
||||
li {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
|
||||
a {
|
||||
color: var(--content-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
margin: var(--spacing-03) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.settings {
|
||||
label {
|
||||
font-weight: normal;
|
||||
color: var(--content-secondary);
|
||||
flex: 1 0 50%;
|
||||
margin-bottom: 0;
|
||||
padding-right: var(--spacing-03);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
width: 50%;
|
||||
margin: var(--spacing-04) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.left-menu-setting-position {
|
||||
position: relative;
|
||||
|
||||
.left-menu-setting {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.left-menu-setting-icon {
|
||||
position: absolute;
|
||||
right: 65%;
|
||||
top: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.left-menu-setting {
|
||||
padding: 0 var(--spacing-02);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 7%);
|
||||
margin-bottom: 0;
|
||||
height: 43px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: calc(var(--spacing-04) * -1);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background-color: var(--bg-info-01);
|
||||
|
||||
label {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
border: 1px solid var(--left-menu-form-select-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#left-menu-mask {
|
||||
opacity: 0.4;
|
||||
background-color: #999;
|
||||
z-index: 99;
|
||||
transition: opacity 0.5s;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.left-menu-modal-backdrop {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.loading-spinner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.full-size-loading-spinner-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.reference-manager-search-group {
|
||||
width: '100%';
|
||||
border-radius: 0;
|
||||
text-align: left;
|
||||
|
||||
.dropdown-menu {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
@use 'sass:math';
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
.loading-screen-brand-container {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.loading-screen-brand {
|
||||
position: relative;
|
||||
padding-top: math.percentage(math.div(150, 130)); // dimensions of the SVG
|
||||
height: 0;
|
||||
background: url(../../../../../public/img/ol-brand/overleaf-o-grey.svg)
|
||||
no-repeat bottom / 100%;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: url(../../../../../public/img/ol-brand/overleaf-o.svg)
|
||||
no-repeat bottom / 100%;
|
||||
transition: height 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-screen-label {
|
||||
margin: 0;
|
||||
padding-top: var(--spacing-09);
|
||||
font-family: $font-family-serif;
|
||||
font-size: var(--font-size-07);
|
||||
color: var(--content-secondary);
|
||||
}
|
||||
|
||||
.loading-screen-ellip {
|
||||
animation: blink 1.4s both infinite;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-screen-error {
|
||||
margin: 0;
|
||||
padding-top: var(--spacing-06);
|
||||
color: var(--content-danger);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
:root {
|
||||
--logs-pane-bg: var(--bg-dark-secondary);
|
||||
}
|
||||
|
||||
.ide-redesign-main {
|
||||
--logs-pane-bg: var(--bg-dark-primary);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--logs-pane-bg: var(--bg-light-secondary);
|
||||
|
||||
.ide-redesign-main {
|
||||
--logs-pane-bg: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.logs-pane {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow-y: auto;
|
||||
background-color: var(--logs-pane-bg);
|
||||
z-index: 11; // above the PDF viewer + controls
|
||||
top: var(--toolbar-small-height);
|
||||
|
||||
.logs-pane-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.logs-pane-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
place-content: flex-end flex-end;
|
||||
padding: var(--spacing-03) 0;
|
||||
flex-grow: 1;
|
||||
align-items: flex-end;
|
||||
gap: var(--spacing-04);
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
border-radius: var(--border-radius-base);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.log-entry-header {
|
||||
padding: var(--spacing-02) var(--spacing-04);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-04);
|
||||
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
|
||||
color: var(--content-primary-dark);
|
||||
|
||||
.material-symbols {
|
||||
@include body-base;
|
||||
}
|
||||
}
|
||||
|
||||
.log-entry-header-error {
|
||||
background-color: var(--content-danger);
|
||||
}
|
||||
|
||||
.log-entry-header-link-error {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary-dark),
|
||||
$background: var(--bg-danger-02),
|
||||
$hover-background: var(--red-70)
|
||||
);
|
||||
}
|
||||
|
||||
.log-entry-header-warning {
|
||||
background-color: var(--content-warning-dark);
|
||||
}
|
||||
|
||||
.log-entry-header-link-warning {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary-dark),
|
||||
$background: var(--bg-warning-01),
|
||||
$hover-background: var(--bg-warning-02)
|
||||
);
|
||||
}
|
||||
|
||||
.log-entry-header-typesetting {
|
||||
background-color: var(--blue-50);
|
||||
}
|
||||
|
||||
.log-entry-header-link-typesetting {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary-dark),
|
||||
$background: var(--blue-60),
|
||||
$hover-background: var(--blue-70)
|
||||
);
|
||||
}
|
||||
|
||||
.log-entry-header-raw,
|
||||
.log-entry-header-info {
|
||||
background-color: var(--bg-dark-tertiary);
|
||||
}
|
||||
|
||||
.log-entry-header-link-raw,
|
||||
.log-entry-header-link-info {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary-dark),
|
||||
$background: var(--bg-dark-secondary),
|
||||
$hover-background: var(--bg-dark-primary)
|
||||
);
|
||||
}
|
||||
|
||||
.log-entry-header-success {
|
||||
background-color: var(--green-50);
|
||||
}
|
||||
|
||||
.log-entry-header-link-success {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary-dark),
|
||||
$background: var(--green-60),
|
||||
$hover-background: var(--green-70)
|
||||
);
|
||||
}
|
||||
|
||||
.log-entry-header-title {
|
||||
@include body-base;
|
||||
|
||||
flex-grow: 1;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
color: var(--content-primary-dark);
|
||||
}
|
||||
|
||||
.log-entry-header-link {
|
||||
color: var(--content-primary-dark);
|
||||
border-width: 0;
|
||||
max-width: 33%;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none; // needed for the "close button"
|
||||
padding: 0 var(--spacing-03);
|
||||
|
||||
.button-content {
|
||||
min-width: 0; // needed to display the ellipsis on overflow
|
||||
}
|
||||
}
|
||||
|
||||
.log-entry-header-link-location {
|
||||
white-space: nowrap;
|
||||
direction: rtl;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.log-entry-content {
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
background-color: var(--bg-light-primary);
|
||||
color: var(--content-primary);
|
||||
padding: var(--spacing-04);
|
||||
}
|
||||
|
||||
.log-entry-content-raw {
|
||||
@include body-xs;
|
||||
|
||||
color: var(--content-secondary);
|
||||
padding: var(--spacing-03);
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.log-entry-content-button-container {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
margin-top: 0;
|
||||
transition:
|
||||
margin 0.15s ease-in-out,
|
||||
opacity 0.15s ease-in-out;
|
||||
padding-bottom: var(--spacing-04);
|
||||
text-align: center;
|
||||
background-image: linear-gradient(
|
||||
0deg,
|
||||
var(--bg-light-tertiary) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
|
||||
}
|
||||
|
||||
.log-entry-content-button-container-collapsed {
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.log-entry-content-raw-container {
|
||||
background-color: var(--bg-light-tertiary);
|
||||
border-radius: var(--border-radius-base);
|
||||
overflow: hidden;
|
||||
margin-top: var(--spacing-03);
|
||||
}
|
||||
}
|
||||
|
||||
.log-entry-formatted-content,
|
||||
.log-entry-content-link {
|
||||
font-size: var(--font-size-02);
|
||||
margin-top: var(--spacing-02);
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.log-location-tooltip {
|
||||
word-break: break-all;
|
||||
|
||||
& > .tooltip-inner {
|
||||
max-width: 450px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// As part of compile time paywall redesign, we are only migrating the necessary classes needed for the split test
|
||||
// Other classes should be migrated too as a part of website redesign project later on.
|
||||
|
||||
.timeout-upgrade-paywall-prompt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px; // adding this value to match existing spacing in logs pane, there is no variable for 10px
|
||||
}
|
||||
|
||||
.website-redesign {
|
||||
.log-entry-header {
|
||||
@include heading-sm;
|
||||
|
||||
font-weight: 600;
|
||||
padding: var(--spacing-05) var(--spacing-06);
|
||||
}
|
||||
|
||||
.compile-timeout-message {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.log-entry-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.log-bold-text {
|
||||
font-weight: 600;
|
||||
color: var(--neutral-90);
|
||||
}
|
||||
|
||||
.log-entry-formatted-content {
|
||||
@include body-sm;
|
||||
|
||||
padding: var(--spacing-06);
|
||||
color: var(--neutral-70);
|
||||
|
||||
a,
|
||||
.btn-inline-link {
|
||||
color: var(--blue-50);
|
||||
}
|
||||
}
|
||||
|
||||
.log-entry-cta-container {
|
||||
padding-top: var(--spacing-06);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.log-entry-header-error {
|
||||
background-color: var(--red-10);
|
||||
|
||||
.log-entry-header-title {
|
||||
@include heading-sm;
|
||||
|
||||
color: var(--red-50);
|
||||
}
|
||||
}
|
||||
|
||||
.log-entry-header-raw {
|
||||
background-color: var(--neutral-60);
|
||||
padding: var(--spacing-04) var(--spacing-06);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.ol-cm-math-tooltip-container {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
border: 0 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ol-cm-math-tooltip {
|
||||
display: flex;
|
||||
gap: var(--spacing-04);
|
||||
overflow: auto;
|
||||
padding: var(--spacing-04);
|
||||
border-radius: var(--border-radius-base);
|
||||
max-height: 200px;
|
||||
max-width: 800px;
|
||||
margin-top: 10px;
|
||||
|
||||
.dropdown {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.math-tooltip-options-toggle {
|
||||
border: none;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.math-tooltip-options-keyboard-shortcut {
|
||||
color: $content-secondary;
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
:root {
|
||||
--toolbar-btn-color: var(--white);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--toolbar-btn-color: var(--neutral-70);
|
||||
}
|
||||
|
||||
.online-users {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.online-user {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin-right: var(--spacing-04);
|
||||
text-align: center;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--border-radius-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.online-user-multi {
|
||||
@include reset-button;
|
||||
|
||||
color: var(--toolbar-btn-color);
|
||||
width: auto;
|
||||
min-width: 24px;
|
||||
padding-left: var(--spacing-04);
|
||||
padding-right: var(--spacing-03);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,330 @@
|
||||
:root {
|
||||
--outline-bg-color: var(--bg-dark-secondary);
|
||||
--outline-border-color: var(--border-disabled-dark);
|
||||
--outline-header-hover-bg: var(--bg-dark-primary);
|
||||
--outline-item-hover-bg: var(--bg-dark-secondary);
|
||||
--outline-line-guide-color: var(--border-primary);
|
||||
--outline-container-color-bg: var(--bg-dark-tertiary);
|
||||
--outline-content-color: var(--content-primary-dark);
|
||||
--outline-item-highlight-bg: var(--neutral-60);
|
||||
--outline-item-highlight-color: var(--content-primary-dark);
|
||||
--outline-item-highlight-font-weight: normal;
|
||||
--outline-item-carat-color: var(--content-disabled);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--outline-bg-color: var(--bg-light-primary);
|
||||
--outline-border-color: var(--border-disabled);
|
||||
--outline-item-hover-bg: var(--bg-light-tertiary);
|
||||
--outline-header-hover-bg: var(--bg-light-tertiary);
|
||||
--outline-line-guide-color: var(--border-disabled);
|
||||
--outline-container-color-bg: var(--bg-light-primary);
|
||||
--outline-content-color: var(--content-secondary);
|
||||
--outline-item-highlight-bg: var(--bg-light-secondary);
|
||||
--outline-item-highlight-color: var(--content-secondary);
|
||||
--outline-item-highlight-font-weight: normal;
|
||||
--outline-item-carat-color: var(--content-disabled);
|
||||
|
||||
.ide-redesign-main {
|
||||
--outline-bg-color: var(--bg-light-primary);
|
||||
--outline-item-hover-bg: var(--bg-light-secondary);
|
||||
--outline-header-hover-bg: var(--bg-light-secondary);
|
||||
--outline-content-color: var(--content-primary);
|
||||
--outline-item-highlight-bg: var(--bg-accent-03);
|
||||
--outline-item-highlight-color: var(--green-70);
|
||||
--outline-item-highlight-font-weight: bold;
|
||||
--outline-item-carat-color: var(--content-primary);
|
||||
--outline-line-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--border-primary) 24%,
|
||||
transparent
|
||||
);
|
||||
--outline-container-color-bg: var(--bg-light-primary);
|
||||
}
|
||||
}
|
||||
|
||||
// TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
|
||||
.ide-redesign-main {
|
||||
--outline-bg-color: var(--bg-dark-primary);
|
||||
--outline-border-color: var(--border-disabled-dark);
|
||||
--outline-header-hover-bg: var(--bg-dark-primary);
|
||||
--outline-item-hover-bg: var(--bg-dark-secondary);
|
||||
--outline-line-guide-color: var(--border-primary);
|
||||
--outline-container-color-bg: var(--bg-dark-primary);
|
||||
--outline-content-color: var(--content-primary-dark);
|
||||
--outline-item-highlight-bg: var(--green-70);
|
||||
--outline-item-highlight-color: var(--green-10);
|
||||
--outline-item-highlight-font-weight: bold;
|
||||
--outline-item-carat-color: var(--content-disabled);
|
||||
|
||||
.file-outline-panel {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.outline-pane {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.outline-header {
|
||||
border: none;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.outline-header-expand-collapse-btn {
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-02);
|
||||
}
|
||||
|
||||
.outline-header-name {
|
||||
font-weight: unset;
|
||||
}
|
||||
|
||||
.outline-carat-icon {
|
||||
font-size: unset;
|
||||
}
|
||||
|
||||
.outline-body {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.outline-item-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-02);
|
||||
margin-top: var(--spacing-02);
|
||||
|
||||
&::before {
|
||||
left: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
|
||||
.outline-item-list-root {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.outline-item-expand-collapse-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-02);
|
||||
}
|
||||
|
||||
.outline-item-no-children {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.outline-item-link {
|
||||
flex-grow: 1;
|
||||
padding: var(--spacing-02);
|
||||
}
|
||||
}
|
||||
|
||||
.outline-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--outline-container-color-bg);
|
||||
}
|
||||
|
||||
.outline-pane {
|
||||
@include body-sm;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
color: var(--content-primary-dark);
|
||||
}
|
||||
|
||||
.outline-pane-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.documentation-btn-container {
|
||||
@include toolbar-sm-height;
|
||||
|
||||
background-color: var(--outline-bg-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
|
||||
|
||||
& *,
|
||||
& :hover {
|
||||
color: var(--content-primary-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-dark-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.documentation-close {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.outline-header {
|
||||
@include toolbar-sm-height;
|
||||
|
||||
background-color: var(--outline-bg-color);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--outline-border-color);
|
||||
border-top: 1px solid var(--outline-border-color);
|
||||
}
|
||||
|
||||
.outline-header-expand-collapse-btn {
|
||||
color: var(--outline-content-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0 var(--spacing-03) 0 0;
|
||||
font-size: inherit;
|
||||
vertical-align: inherit;
|
||||
flex: 1 0 100%;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--outline-header-hover-bg);
|
||||
}
|
||||
|
||||
&:hover[disabled] {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.outline-header-name {
|
||||
@include body-sm;
|
||||
|
||||
color: var(--outline-content-color);
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.outline-body {
|
||||
background-color: var(--outline-container-color-bg);
|
||||
overflow-y: auto;
|
||||
padding-right: var(--spacing-03);
|
||||
}
|
||||
|
||||
.outline-body-no-elements {
|
||||
color: var(--outline-content-color);
|
||||
text-align: center;
|
||||
padding: var(--spacing-08) var(--spacing-08) var(--spacing-11)
|
||||
var(--spacing-08);
|
||||
margin-right: calc(var(--spacing-03) * -1);
|
||||
}
|
||||
|
||||
.outline-body-link {
|
||||
color: var(--outline-content-color);
|
||||
display: block;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--outline-content-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.outline-item-list {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
padding-left: var(--spacing-08);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background-color: var(--outline-line-guide-color);
|
||||
top: var(--spacing-03);
|
||||
bottom: var(--spacing-03);
|
||||
width: 1px;
|
||||
left: var(--spacing-10);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&.outline-item-list-root {
|
||||
padding-left: 0;
|
||||
|
||||
&::before {
|
||||
left: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outline-item-no-children {
|
||||
padding-left: var(--spacing-07);
|
||||
}
|
||||
|
||||
.outline-item-row {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.outline-item-expand-collapse-btn {
|
||||
background-color: var(--outline-container-color-bg);
|
||||
display: inline;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
vertical-align: inherit;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: var(--outline-item-carat-color);
|
||||
margin-right: calc(var(--spacing-03) * -1);
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--outline-item-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.outline-item-link {
|
||||
@include text-truncate;
|
||||
|
||||
color: var(--outline-content-color);
|
||||
display: inline;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 var(--spacing-03);
|
||||
line-height: var(--spacing-08);
|
||||
border-radius: var(--border-radius-base);
|
||||
text-align: left;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--outline-item-hover-bg);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.outline-item-link-highlight {
|
||||
background-color: var(--outline-item-highlight-bg);
|
||||
color: var(--outline-item-highlight-color);
|
||||
font-weight: var(--outline-item-highlight-font-weight);
|
||||
}
|
||||
|
||||
.outline-caret-icon {
|
||||
width: var(--spacing-08);
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
:root {
|
||||
--pdf-error-state-info-box-color: var(--content-primary-dark);
|
||||
--pdf-error-state-info-box-background: var(--bg-dark-primary);
|
||||
--pdf-error-state-info-box-border: var(--border-divider-dark);
|
||||
--pdf-error-state-label-color: var(--content-primary-dark);
|
||||
--pdf-error-state-description-color: var(--content-secondary-dark);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--pdf-error-state-info-box-color: var(--content-primary);
|
||||
--pdf-error-state-info-box-background: var(--bg-light-primary);
|
||||
--pdf-error-state-info-box-border: var(--border-divider);
|
||||
--pdf-error-state-label-color: var(--content-primary);
|
||||
--pdf-error-state-description-color: var(--content-secondary);
|
||||
}
|
||||
|
||||
.pdf-error-state {
|
||||
position: absolute;
|
||||
inset: var(--toolbar-small-height) 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-06);
|
||||
background-color: var(--pdf-bg);
|
||||
}
|
||||
|
||||
.pdf-error-state-top-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-06);
|
||||
padding: 0 var(--spacing-09) var(--spacing-09) var(--spacing-09);
|
||||
}
|
||||
|
||||
.pdf-error-state-warning-icon {
|
||||
background-color: var(--bg-danger-03);
|
||||
color: var(--content-danger);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
|
||||
.material-symbols {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-error-state-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-02);
|
||||
}
|
||||
|
||||
.pdf-error-state-label {
|
||||
font-size: var(--font-size-02);
|
||||
color: var(--pdf-error-state-label-color);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pdf-error-state-description {
|
||||
color: var(--pdf-error-state-description-color);
|
||||
font-size: var(--font-size-02);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pdf-error-state-info-box {
|
||||
background-color: var(--pdf-error-state-info-box-background);
|
||||
color: var(--pdf-error-state-info-box-color);
|
||||
padding: var(--spacing-06);
|
||||
border: 1px solid var(--pdf-error-state-info-box-border);
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
.pdf-error-state-info-box-title {
|
||||
font-size: var(--font-size-02);
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-02);
|
||||
margin-bottom: var(--spacing-04);
|
||||
}
|
||||
|
||||
.pdf-error-state-info-box-text {
|
||||
font-size: var(--font-size-02);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-02);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
: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);
|
||||
|
||||
.ide-redesign-main {
|
||||
--pdf-bg: 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);
|
||||
|
||||
.compile-button-group {
|
||||
height: 28px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background-color: var(--bg-accent-01);
|
||||
|
||||
.btn-primary:hover {
|
||||
z-index: auto; // prevents border from being hidden
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.ide-redesign-main {
|
||||
--pdf-bg: var(--bg-dark-secondary);
|
||||
|
||||
.pdf-viewer {
|
||||
.pdfjs-viewer {
|
||||
.page {
|
||||
box-shadow:
|
||||
0 5px 5px 0 #23282f0d,
|
||||
0 3px 14px 0 #23282f08,
|
||||
0 8px 10px 0 #23282f14;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-viewer {
|
||||
isolation: isolate;
|
||||
|
||||
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 {
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.pdfViewer {
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
.pdfjs-viewer-inner {
|
||||
overflow-y: hidden !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.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}
|
||||
);
|
||||
}
|
||||
|
||||
.pdf-preview-messages {
|
||||
position: absolute;
|
||||
right: var(--spacing-06);
|
||||
left: var(--spacing-06);
|
||||
top: var(--spacing-10);
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.modal-body-publish {
|
||||
.gallery-export-license {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-content-name {
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-05);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.table-content-category {
|
||||
float: right;
|
||||
font-weight: 300;
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
width: 30%;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.table-content-category ~ .table-content-name {
|
||||
width: 70%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.affix-content-title {
|
||||
color: var(--neutral-40);
|
||||
font-size: var(--spacing-07);
|
||||
padding-left: var(--spacing-05);
|
||||
}
|
||||
|
||||
.affix-subcontent {
|
||||
margin: var(--spacing-03) 0 var(--spacing-11);
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: calc(var(--line-height-03) / 2);
|
||||
border: 1px solid var(--neutral-30);
|
||||
border-radius: var(--border-radius-medium);
|
||||
|
||||
.card-body {
|
||||
padding: calc(var(--line-height-03) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.content-as-table {
|
||||
.table-content-main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.table-content-icon {
|
||||
height: 100px;
|
||||
width: 106px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
|
||||
* {
|
||||
border: 1px solid var(--neutral-10);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-content-text {
|
||||
width: calc(100% - 106px);
|
||||
vertical-align: top;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.table-content-slogan {
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-content-link {
|
||||
padding-top: var(--spacing-05);
|
||||
|
||||
.btn {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
:root {
|
||||
--ide-rail-background: var(--bg-dark-primary);
|
||||
--ide-rail-color: var(--content-primary-dark);
|
||||
--ide-rail-link-background: var(--bg-dark-primary);
|
||||
--ide-rail-link-active-color: var(--green-10);
|
||||
--ide-rail-link-active-background: var(--green-70);
|
||||
--ide-rail-link-hover-color: var(--content-primary-dark);
|
||||
--ide-rail-link-hover-background: var(--bg-dark-secondary);
|
||||
--ide-rail-border-colour: var(--border-divider-dark);
|
||||
--ide-rail-header-subdued-button-color: var(--content-primary-dark);
|
||||
--ide-rail-header-subdued-button-hover-background: var(--bg-dark-tertiary);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--ide-rail-background: #fff;
|
||||
--ide-rail-color: var(--content-primary);
|
||||
--ide-rail-link-background: #fff;
|
||||
--ide-rail-link-active-color: var(--green-70);
|
||||
--ide-rail-link-active-background: var(--bg-accent-03);
|
||||
--ide-rail-link-hover-color: var(--content-primary);
|
||||
--ide-rail-link-hover-background: var(--bg-light-secondary);
|
||||
--ide-rail-border-colour: var(--border-divider);
|
||||
--ide-rail-header-subdued-button-color: var(--content-primary);
|
||||
--ide-rail-header-subdued-button-hover-background: var(--bg-light-tertiary);
|
||||
}
|
||||
|
||||
.rail-panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-03) var(--spacing-04);
|
||||
background-color: var(--ide-rail-background);
|
||||
|
||||
.rail-panel-header-button-subdued {
|
||||
@include ol-button-variant(
|
||||
var(--ide-rail-header-subdued-button-color),
|
||||
transparent,
|
||||
transparent,
|
||||
var(--ide-rail-header-subdued-button-hover-background),
|
||||
transparent,
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.rail-panel-title {
|
||||
font-size: var(--font-size-02);
|
||||
color: var(--ide-rail-color);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ide-rail-tab-button {
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ide-rail-tab-link {
|
||||
border-radius: var(--border-radius-base);
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
color: var(--ide-rail-color);
|
||||
background-color: var(--ide-rail-link-background);
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
|
||||
&:visited,
|
||||
&:focus {
|
||||
color: var(--ide-rail-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--ide-rail-link-hover-color);
|
||||
background-color: var(--ide-rail-link-hover-background);
|
||||
}
|
||||
|
||||
.ide-rail-tab-link-icon {
|
||||
line-height: 32px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&.open-rail {
|
||||
color: var(--ide-rail-link-active-color);
|
||||
background-color: var(--ide-rail-link-active-background);
|
||||
|
||||
&::after {
|
||||
$indicator-height: 3px;
|
||||
|
||||
border-radius: 12px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -$indicator-height;
|
||||
left: 4px;
|
||||
box-sizing: border-box;
|
||||
width: 24px;
|
||||
height: $indicator-height * 2;
|
||||
border: $indicator-height solid var(--ide-rail-link-active-color);
|
||||
background-color: var(--ide-rail-link-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ide-rail {
|
||||
height: 100%;
|
||||
padding: var(--spacing-02);
|
||||
background: var(--ide-rail-background);
|
||||
border-right: 1px solid var(--ide-rail-border-colour);
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.ide-rail-content {
|
||||
height: 100%;
|
||||
|
||||
.logs-pane {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.ide-rail-tabs-nav {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-02);
|
||||
}
|
||||
|
||||
.ide-rail-tab-dropdown {
|
||||
border: 0;
|
||||
|
||||
&.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
.references-search-modal {
|
||||
.references-search-upgrade-prompt {
|
||||
padding: var(--spacing-08);
|
||||
padding-bottom: var(--spacing-11);
|
||||
|
||||
.upgrade-prompt {
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
padding: var(--spacing-06) var(--spacing-10);
|
||||
margin: auto;
|
||||
background: rgb($white, 0.95);
|
||||
border-radius: var(--border-radius-medium);
|
||||
|
||||
.message {
|
||||
margin-top: var(--spacing-06);
|
||||
|
||||
&.call-to-action {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul.upgrade-benefits {
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
margin-top: var(--spacing-05);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// search result items list
|
||||
.search-results {
|
||||
font-size: var(--font-size-01);
|
||||
|
||||
.no-results-message,
|
||||
.too-many-results-message {
|
||||
font-size: var(--font-size-03);
|
||||
}
|
||||
|
||||
.search-results-scroll-container {
|
||||
max-height: calc(100vh - 225px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.search-result-hit {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid var(--border-divider);
|
||||
padding: var(--spacing-04);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
border-left: var(--spacing-02) solid transparent;
|
||||
|
||||
&.selected-search-result-hit {
|
||||
color: var(--content-positive);
|
||||
}
|
||||
|
||||
.hit-title {
|
||||
font-size: var(--font-size-03);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,906 @@
|
||||
@use 'sass:color';
|
||||
|
||||
$rp-border-grey: #d9d9d9;
|
||||
$rp-type-blue: #6b7797;
|
||||
|
||||
:root {
|
||||
--rp-base-font-size: var(--font-size-01);
|
||||
--rp-border-grey: #{$rp-border-grey};
|
||||
--rp-type-blue: #{$rp-type-blue};
|
||||
--review-panel-bg-color: var(--bg-light-secondary);
|
||||
--review-panel-color: var(--content-primary);
|
||||
--review-panel-color-secondary: var(--content-secondary);
|
||||
--review-panel-header-bg-color: var(--bg-light-primary);
|
||||
--review-panel-footer-bg-color: var(--bg-light-primary);
|
||||
--review-panel-entry-bg-color: var(--bg-light-primary);
|
||||
--review-panel-empty-state-bg-color: var(--bg-light-primary);
|
||||
--review-panel-button-hover-bg-color: var(--bg-light-tertiary);
|
||||
--review-panel-border-color: var(--border-divider);
|
||||
--review-panel-width: 230px;
|
||||
--review-panel-width-mini: 24px;
|
||||
|
||||
@include theme('default') {
|
||||
.ide-redesign-main {
|
||||
--review-panel-bg-color: var(--bg-dark-secondary);
|
||||
--review-panel-color: var(--content-primary-dark);
|
||||
--review-panel-color-secondary: var(--content-secondary-dark);
|
||||
--review-panel-header-bg-color: var(--bg-dark-primary);
|
||||
--review-panel-footer-bg-color: var(--bg-dark-primary);
|
||||
--review-panel-entry-bg-color: var(--bg-dark-primary);
|
||||
--review-panel-empty-state-bg-color: var(--bg-dark-primary);
|
||||
--review-panel-button-hover-bg-color: var(--bg-dark-tertiary);
|
||||
--review-panel-border-color: var(--border-divider-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ide-redesign-main {
|
||||
.review-panel-container {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.review-panel-inner {
|
||||
border-left: none;
|
||||
border-right: 1px solid var(--border-divider);
|
||||
}
|
||||
|
||||
.review-panel-header {
|
||||
border-bottom: none;
|
||||
flex: 0 0 var(--review-panel-width);
|
||||
}
|
||||
|
||||
.review-panel-more-comments-button-container {
|
||||
&.upwards {
|
||||
top: calc(var(--review-panel-top) + 16px);
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-mini {
|
||||
// This needs to have a higher z-index than the gutter
|
||||
// so that the comment/change hover previews appear in
|
||||
// front of the gutter
|
||||
z-index: 201;
|
||||
|
||||
.review-panel-entry-hover {
|
||||
.review-panel-entry-content {
|
||||
left: auto;
|
||||
right: -200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-container {
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.review-panel-inner {
|
||||
z-index: 6;
|
||||
flex-shrink: 0;
|
||||
background-color: var(--review-panel-bg-color);
|
||||
border-left: 1px solid var(--review-panel-border-color);
|
||||
color: var(--review-panel-color);
|
||||
font-family: $font-family-base;
|
||||
line-height: $line-height-base;
|
||||
font-size: var(--font-size-01);
|
||||
box-sizing: content-box;
|
||||
width: var(--review-panel-width);
|
||||
min-height: var(--review-panel-height);
|
||||
|
||||
.dropdown-menu {
|
||||
z-index: 1;
|
||||
min-width: var(--bs-dropdown-min-width);
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-entry {
|
||||
background-color: var(--review-panel-entry-bg-color);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: 1px solid var(--review-panel-border-color);
|
||||
padding: var(--spacing-04);
|
||||
width: calc(100% - var(--spacing-04));
|
||||
margin-left: var(--spacing-02);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.review-panel-entry:hover {
|
||||
@include shadow-sm;
|
||||
}
|
||||
|
||||
.review-panel-entry.review-panel-entry-disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.review-panel-entry-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.review-panel-entry-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--font-size-01);
|
||||
gap: var(--spacing-04);
|
||||
}
|
||||
|
||||
.review-panel-entry.review-panel-entry-selected,
|
||||
.review-panel-entry.review-panel-entry-highlighted,
|
||||
.review-panel-entry.review-panel-entry-textarea-focused {
|
||||
margin-left: var(--spacing-01);
|
||||
border: 1px solid var(--border-active);
|
||||
|
||||
@include shadow-md;
|
||||
}
|
||||
|
||||
.review-panel-entry.review-panel-entry-focused {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.review-panel-entry-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-01);
|
||||
|
||||
.review-panel-entry-user {
|
||||
color: var(--review-panel-color);
|
||||
font-size: 110%;
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.review-panel-entry-time {
|
||||
color: var(--review-panel-color-secondary);
|
||||
}
|
||||
|
||||
.review-panel-entry-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-03);
|
||||
|
||||
.btn {
|
||||
background-color: transparent;
|
||||
color: var(--review-panel-color);
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--review-panel-button-hover-bg-color);
|
||||
color: var(--review-panel-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.review-panel-entry-actions-icon {
|
||||
padding: var(--spacing-01);
|
||||
font-size: var(--font-size-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-entry-user-color-badge {
|
||||
display: inline-block;
|
||||
width: $spacing-04;
|
||||
height: $spacing-04;
|
||||
margin-right: $spacing-02;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.review-panel-change-body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: var(--review-panel-color-secondary);
|
||||
gap: var(--spacing-02);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.review-panel-content-highlight {
|
||||
color: var(--review-panel-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
del.review-panel-content-highlight {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.review-panel-entry-icon {
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-02);
|
||||
font-size: var(--font-size-03);
|
||||
}
|
||||
|
||||
.review-panel-entry-change-icon {
|
||||
margin-top: calc(-1 * var(--spacing-01));
|
||||
}
|
||||
|
||||
.review-panel-entry-icon-accept {
|
||||
background-color: var(--bg-accent-03);
|
||||
color: var(--bg-accent-01);
|
||||
}
|
||||
|
||||
.review-panel-entry-icon-reject {
|
||||
background-color: var(--bg-danger-03);
|
||||
color: var(--bg-danger-01);
|
||||
}
|
||||
|
||||
.review-panel-entry-icon-changed {
|
||||
background-color: var(--neutral-20);
|
||||
color: var(--content-secondary);
|
||||
}
|
||||
|
||||
.review-panel-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: var(--review-panel-width);
|
||||
height: var(--review-panel-header-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid var(--review-panel-border-color);
|
||||
background-color: var(--review-panel-header-bg-color);
|
||||
text-align: center;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
// TODO: Update this when we move the track changes menu to the new design
|
||||
.rp-tc-state {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0 var(--spacing-03);
|
||||
margin: 0;
|
||||
border-bottom: 1px solid var(--rp-border-grey);
|
||||
text-align: left;
|
||||
background-color: var(--white);
|
||||
max-height: calc(
|
||||
100vh - var(--review-panel-top) - var(--review-panel-header-height)
|
||||
);
|
||||
overflow-y: auto;
|
||||
|
||||
.rp-tc-state-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-02) 0;
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: var(--spacing-03);
|
||||
}
|
||||
}
|
||||
|
||||
.rp-tc-state-item-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex-grow: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: var(--spacing-02);
|
||||
padding-right: var(--spacing-05);
|
||||
flex-shrink: 0;
|
||||
flex-basis: 32px;
|
||||
}
|
||||
|
||||
.review-panel-resolved-comments-toggle {
|
||||
background-color: var(--bg-light-secondary);
|
||||
font-size: var(--font-size-02);
|
||||
color: color.adjust($rp-type-blue, $lightness: 25%);
|
||||
border: solid 1px var(--rp-border-grey);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: 0;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
line-height: 1.4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: var(--rp-type-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-resolved-comments-toggle-reviewer-role {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--review-panel-color);
|
||||
padding: var(--spacing-01);
|
||||
border-radius: 100%;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--review-panel-button-hover-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.track-changes-indicator-circle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
background-color: var(--bg-accent-01);
|
||||
}
|
||||
|
||||
.track-changes-menu-button {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-02);
|
||||
font-size: var(--font-size-02);
|
||||
|
||||
i {
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-resolved-comments {
|
||||
--bs-popover-border-width: 1px;
|
||||
--bs-popover-bg: var(--bg-light-secondary);
|
||||
--bs-popover-body-color: var(--content-secondary);
|
||||
|
||||
width: 280px;
|
||||
|
||||
.popover-body {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 180px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-02);
|
||||
padding: var(--spacing-04) var(--spacing-03);
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-resolved-disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.review-panel-resolved-comments-empty {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.review-panel-resolved-comments-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-02) 0;
|
||||
}
|
||||
|
||||
.review-panel-resolved-comments-label {
|
||||
font-weight: bold;
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
|
||||
.review-panel-resolved-comment {
|
||||
background-color: var(--white);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-04);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-04);
|
||||
|
||||
.btn-inline-link {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-resolved-comment-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--content-secondary);
|
||||
font-size: var(--font-size-01);
|
||||
}
|
||||
|
||||
.review-panel-resolved-comment-filename {
|
||||
color: var(--content-primary);
|
||||
}
|
||||
|
||||
.review-panel-resolved-comment-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-03);
|
||||
|
||||
.btn {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
color: var(--content-primary);
|
||||
padding: var(--spacing-01);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--neutral-20);
|
||||
}
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
font-size: var(--font-size-05);
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-resolved-comment-quoted-text {
|
||||
background-color: var(--neutral-20);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-02) var(--spacing-04);
|
||||
}
|
||||
|
||||
.review-panel-resolved-comment-quoted-text-label {
|
||||
color: var(--content-secondary);
|
||||
font-size: var(--font-size-01);
|
||||
}
|
||||
|
||||
.review-panel-resolved-comment-quoted-text-quote {
|
||||
color: var(--content-primary);
|
||||
overflow-wrap: anywhere;
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
|
||||
.review-panel-comment-wrapper {
|
||||
display: flex;
|
||||
gap: var(--spacing-04);
|
||||
}
|
||||
|
||||
.review-panel-comment {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.review-panel-comment-reply-divider {
|
||||
border-left: 2px solid var(--yellow-20);
|
||||
}
|
||||
|
||||
.review-panel-comment-body {
|
||||
font-size: var(--font-size-02);
|
||||
color: var(--review-panel-color);
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.review-panel-expandable-content {
|
||||
display: inline;
|
||||
padding-right: var(--spacing-02);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.review-panel-expandable-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.review-panel-expandable-links {
|
||||
.btn-inline-link {
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-inline-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-comment-input {
|
||||
width: 100%;
|
||||
font-size: var(--rp-base-font-size);
|
||||
padding: 2px var(--spacing-03);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: solid 1px var(--neutral-60);
|
||||
resize: vertical;
|
||||
color: var(--review-panel-color-secondary);
|
||||
background-color: var(--review-panel-entry-bg-color);
|
||||
height: 25px;
|
||||
min-height: 25px;
|
||||
overflow-x: hidden;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.review-panel-comment-edit {
|
||||
margin-top: var(--spacing-03);
|
||||
}
|
||||
|
||||
.review-panel-empty-state {
|
||||
position: fixed;
|
||||
width: var(--review-panel-width);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.review-panel-empty-state-inner {
|
||||
position: sticky;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
padding-left: var(--spacing-06);
|
||||
padding-right: var(--spacing-06);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-empty-state-comment-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: var(--review-panel-empty-state-bg-color);
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-06);
|
||||
|
||||
.material-symbols {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-overview {
|
||||
padding: var(--spacing-02);
|
||||
position: absolute;
|
||||
top: var(--review-panel-header-height);
|
||||
bottom: 59px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
overscroll-behavior-block: none;
|
||||
|
||||
.review-panel-entry {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-overfile-divider {
|
||||
border-bottom: 1px solid var(--review-panel-border-color);
|
||||
margin: var(--spacing-01) 0;
|
||||
}
|
||||
|
||||
.review-panel-overview-file-entries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-02);
|
||||
overflow: hidden;
|
||||
padding-top: var(--spacing-02);
|
||||
padding-bottom: var(--spacing-03);
|
||||
}
|
||||
|
||||
.review-panel-footer {
|
||||
position: fixed;
|
||||
height: 60px;
|
||||
bottom: 0;
|
||||
width: var(--review-panel-width);
|
||||
z-index: 2;
|
||||
background-color: var(--review-panel-footer-bg-color);
|
||||
border-top: 1px solid var(--review-panel-border-color);
|
||||
display: flex;
|
||||
|
||||
.review-panel-tab {
|
||||
flex: 0 0 50%;
|
||||
padding: var(--spacing-03) 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-02);
|
||||
border: 0;
|
||||
border-top: solid 3px transparent;
|
||||
background: none;
|
||||
color: var(--review-panel-color-secondary);
|
||||
font-size: var(--font-size-02);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: var(--review-panel-color);
|
||||
}
|
||||
|
||||
&-active {
|
||||
color: var(--review-panel-color);
|
||||
border-top: solid 3px var(--bg-accent-01);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-add-comment-textarea {
|
||||
padding: var(--spacing-01) var(--spacing-03);
|
||||
resize: vertical;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.review-panel-add-comment-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-04);
|
||||
}
|
||||
|
||||
.review-panel-add-comment-cancel-button {
|
||||
background-color: transparent;
|
||||
color: var(--review-panel-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--review-panel-button-hover-bg-color);
|
||||
color: var(--review-panel-color);
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-more-comments-button-container {
|
||||
position: fixed;
|
||||
width: var(--review-panel-width);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
|
||||
&.downwards {
|
||||
// TODO: fix this to not use a magic number when we have updated the footer ui
|
||||
top: calc(100% - 102px);
|
||||
}
|
||||
|
||||
&.upwards {
|
||||
top: calc(
|
||||
var(--review-panel-top) + var(--review-panel-header-height) + 16px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-subview-overview {
|
||||
&.review-panel-container {
|
||||
overflow-y: hidden;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.review-panel-inner {
|
||||
min-height: auto;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-mini {
|
||||
overflow: visible !important;
|
||||
|
||||
.review-panel-inner {
|
||||
width: var(--review-panel-width-mini);
|
||||
}
|
||||
|
||||
.review-panel-entry {
|
||||
margin-left: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.review-panel-entry-indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
color: var(--review-panel-color-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.review-panel-entry-content {
|
||||
display: none;
|
||||
background: var(--review-panel-entry-bg-color);
|
||||
border: 1px solid var(--review-panel-border-color);
|
||||
border-radius: var(--border-radius-base);
|
||||
width: 200px;
|
||||
padding: var(--spacing-02);
|
||||
}
|
||||
|
||||
.review-panel-entry-hover {
|
||||
.review-panel-entry-content {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: -200px;
|
||||
top: 0;
|
||||
padding: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-more-comments-button-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.review-panel-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.review-panel-entry:hover,
|
||||
.review-panel-entry-focused,
|
||||
.review-panel-entry-highlighted {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.review-tooltip-menu {
|
||||
display: flex;
|
||||
box-shadow: 0 2px 4px 0 #1e253029;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-02);
|
||||
gap: var(--spacing-02);
|
||||
transition: opacity 0.05s ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.review-tooltip-menu-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.review-tooltip-menu-button {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-01);
|
||||
padding: var(--spacing-01);
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
.review-tooltip-add-comment-button {
|
||||
padding: var(--spacing-01) var(--spacing-04);
|
||||
}
|
||||
|
||||
.review-tooltip-menu-divider {
|
||||
width: 1px;
|
||||
background-color: #e7e9ee;
|
||||
}
|
||||
|
||||
.review-panel-tooltip {
|
||||
pointer-events: none; // this is to prevent mouseLeave event from firing when hovering over the tooltip
|
||||
}
|
||||
|
||||
.review-panel-in-editor-widgets {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 11px;
|
||||
z-index: 2;
|
||||
font-family: $font-family-base;
|
||||
|
||||
.review-panel-in-editor-widgets-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.review-panel-track-changes-indicator {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-track-changes-indicator {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
background-color: rgb(240 240 240 / 90%);
|
||||
color: var(--rp-type-blue);
|
||||
text-align: center;
|
||||
border-bottom-left-radius: 3px;
|
||||
white-space: nowrap;
|
||||
|
||||
&.review-panel-track-changes-indicator-on-dark {
|
||||
background-color: rgb(88 88 88 / 80%);
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgb(88 88 88 / 100%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(240 240 240 / 100%);
|
||||
color: var(--rp-type-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.review-mode-switcher-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.review-mode-switcher {
|
||||
position: absolute;
|
||||
top: var(--spacing-03);
|
||||
right: var(--spacing-03);
|
||||
font-family: var(--font-sans);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.review-mode-switcher-toggle-button.editing {
|
||||
background-color: var(--bg-light-tertiary);
|
||||
}
|
||||
|
||||
.review-mode-switcher-toggle-button.reviewing {
|
||||
background-color: var(--yellow-20);
|
||||
}
|
||||
|
||||
.review-mode-switcher-toggle-button.viewing {
|
||||
background-color: var(--blue-20);
|
||||
}
|
||||
|
||||
.review-mode-switcher-toggle-label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.review-mode-switcher-toggle-button {
|
||||
all: unset;
|
||||
z-index: 2;
|
||||
font-family: $font-family-base;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
font-size: var(--font-size-02);
|
||||
padding: var(--spacing-02) var(--spacing-03);
|
||||
gap: var(--spacing-02);
|
||||
height: 20px;
|
||||
|
||||
.material-symbols {
|
||||
font-size: 16px;
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 20;
|
||||
}
|
||||
|
||||
&.editing {
|
||||
background-color: var(--bg-light-secondary);
|
||||
color: var(--content-primary);
|
||||
}
|
||||
|
||||
&.reviewing {
|
||||
background-color: var(--yellow-10);
|
||||
color: var(--yellow-60);
|
||||
}
|
||||
|
||||
&.viewing {
|
||||
background-color: var(--blue-10);
|
||||
color: var(--blue-70);
|
||||
}
|
||||
|
||||
.review-mode-switcher-toggle-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.review-mode-switcher-toggle-button-expanded {
|
||||
.review-mode-switcher-toggle-label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
.ide-settings-tab-nav.nav {
|
||||
width: 240px;
|
||||
border-right: var(--bs-modal-header-border-width) solid
|
||||
var(--bs-modal-header-border-color);
|
||||
padding: var(--spacing-02);
|
||||
gap: var(--spacing-02);
|
||||
}
|
||||
|
||||
.ide-settings-tab-content {
|
||||
max-height: 75%;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
padding: 0 var(--spacing-06);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ide-settings-tab-subtitle {
|
||||
font-size: var(--font-size-04);
|
||||
line-height: var(--line-height-03);
|
||||
padding: var(--spacing-06) var(--spacing-08);
|
||||
}
|
||||
|
||||
.ide-settings-tab-link {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-02);
|
||||
color: var(--neutral-90);
|
||||
padding: var(--spacing-02);
|
||||
border-radius: var(--border-radius-base);
|
||||
font-size: var(--font-size-02);
|
||||
line-height: var(--line-height-02);
|
||||
text-decoration: none;
|
||||
|
||||
&:visited {
|
||||
color: var(--neutral-90);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--green-70);
|
||||
background-color: var(--bg-accent-03);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.ide-settings-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ide-settings-section {
|
||||
padding-top: var(--spacing-06);
|
||||
padding-bottom: var(--spacing-05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-05);
|
||||
}
|
||||
|
||||
.ide-settings-section-title {
|
||||
color: var(--content-secondary);
|
||||
font-size: var(--font-size-01);
|
||||
line-height: var(--line-height-01);
|
||||
padding-bottom: var(--spacing-06);
|
||||
border-bottom: 1px solid var(--border-divider);
|
||||
}
|
||||
|
||||
.ide-setting {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.ide-dropdown-setting {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.ide-dropdown-setting-wide {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.ide-setting-title {
|
||||
color: var(--content-primary);
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
|
||||
.ide-setting-description {
|
||||
color: var(--content-secondary);
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
.modal-body-share {
|
||||
h3 {
|
||||
border-bottom: 1px solid var(--neutral-30);
|
||||
padding-bottom: calc(var(--line-height-03) / 4);
|
||||
margin: 0;
|
||||
font-size: var(--font-size-03);
|
||||
}
|
||||
|
||||
.project-member.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.project-member .remove-button {
|
||||
font-size: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-invite,
|
||||
.public-access-level {
|
||||
font-size: var(--font-size-02);
|
||||
padding: calc(var(--line-height-03) / 2) 0;
|
||||
border-bottom: 1px solid var(--neutral-30);
|
||||
}
|
||||
|
||||
.public-access-level {
|
||||
margin-top: calc(var(--line-height-03) / 4);
|
||||
font-size: var(--font-size-02);
|
||||
padding-bottom: var(--spacing-07);
|
||||
|
||||
.access-token-display-area {
|
||||
margin-top: calc(var(--line-height-03) / 4);
|
||||
|
||||
.access-token-wrapper {
|
||||
padding-top: calc(var(--line-height-03) / 4);
|
||||
|
||||
.access-token {
|
||||
margin-top: calc(var(--line-height-03) / 4);
|
||||
background-color: var(--neutral-10);
|
||||
border: 1px solid var(--neutral-30);
|
||||
padding: var(--spacing-03) var(--spacing-05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-chevron {
|
||||
padding: 0 calc(var(--line-height-03) / 2);
|
||||
text-decoration: none;
|
||||
color: var(--neutral-70);
|
||||
}
|
||||
}
|
||||
|
||||
.public-access-level.public-access-level-notice {
|
||||
background-color: var(--neutral-10);
|
||||
border-bottom: none;
|
||||
margin-top: var(--spacing-07);
|
||||
padding-top: var(--spacing-07);
|
||||
}
|
||||
|
||||
.project-member,
|
||||
.project-invite {
|
||||
&:hover {
|
||||
background-color: var(--neutral-10);
|
||||
}
|
||||
}
|
||||
|
||||
.project-member {
|
||||
padding: calc(var(--line-height-03) / 2) 0;
|
||||
font-size: var(--font-size-03);
|
||||
|
||||
.select-wrapper {
|
||||
margin-left: auto;
|
||||
|
||||
.select-trigger {
|
||||
color: var(--neutral-70);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
text-align: right;
|
||||
padding-right: 30px;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
li:last-child .dropdown-item {
|
||||
color: var(--bs-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-member-email-icon {
|
||||
display: grid;
|
||||
grid-template-columns: 2em auto;
|
||||
align-items: center;
|
||||
padding-bottom: var(--spacing-03);
|
||||
|
||||
.subtitle {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.project-member-warning {
|
||||
color: var(--content-warning-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.project-member .text-left,
|
||||
.project-invite .text-left {
|
||||
padding-left: var(--spacing-08);
|
||||
}
|
||||
|
||||
.invite-controls {
|
||||
.small {
|
||||
padding: var(--spacing-01);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
padding: calc(var(--line-height-03) / 2);
|
||||
background-color: var(--neutral-10);
|
||||
margin-top: calc(var(--line-height-03) / 2);
|
||||
|
||||
form {
|
||||
.form-group {
|
||||
margin-bottom: calc(var(--line-height-03) / 2);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.privileges {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.tags-new .privileges {
|
||||
background: transparent;
|
||||
width: auto;
|
||||
height: 30px;
|
||||
font-size: var(--font-size-02);
|
||||
border: none;
|
||||
border-right: 5px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.add-collaborators-upgrade {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-08);
|
||||
|
||||
.upgrade-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-07);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copy-button:focus-within {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modal-link-share {
|
||||
.invite-controls {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.public-access-level {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.invite-warning {
|
||||
margin-bottom: calc(var(--line-height-03) / 2);
|
||||
}
|
||||
|
||||
.project-member-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.project-member-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.select-wrapper {
|
||||
max-width: 175px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-collaborator-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-03);
|
||||
|
||||
.select-wrapper {
|
||||
max-width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.table-generator-width-modal {
|
||||
.table-generator-width-label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-generator-usepackage-copy {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-03) var(--spacing-05);
|
||||
background: var(--bg-light-secondary);
|
||||
border: 1px solid var(--border-primary-dark);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
.tags-input *,
|
||||
.tags-input *::before,
|
||||
.tags-input *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tags-input label.small {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.tags-input .host {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tags-input .host:active,
|
||||
.tags-input[disabled] .host:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tags-input .tags {
|
||||
appearance: textfield;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
cursor: text;
|
||||
background-color: var(--white);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.badge-tag {
|
||||
margin: var(--spacing-01);
|
||||
|
||||
.badge-tag-content {
|
||||
max-width: initial;
|
||||
|
||||
.badge-content {
|
||||
white-space: initial;
|
||||
word-break: break-word;
|
||||
text-align: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-input .tags:focus-within {
|
||||
@extend %input-focus-style;
|
||||
}
|
||||
|
||||
.tags-input .tags .input {
|
||||
border: 0;
|
||||
outline: none;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-input .tags .input.invalid-tag {
|
||||
color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.tags-input .tags .input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.toast-container {
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.toast.showing {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.global-toasts {
|
||||
position: fixed;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
[role='alert'] {
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
@use 'sass:math';
|
||||
|
||||
:root {
|
||||
--redesign-toolbar-home-button-hover-background: var(--bg-dark-secondary);
|
||||
--redesign-toolbar-border-divider: var(--border-divider-dark);
|
||||
--redesign-toolbar-background: var(--bg-dark-primary);
|
||||
--redesign-toolbar-home-link-color: var(--content-primary-dark);
|
||||
--redesign-toolbar-logo-url: url('../../../../../public/img/ol-brand/overleaf-o-white.svg');
|
||||
--redesign-subdued-button-color: var(--content-primary-dark);
|
||||
--redesign-subdued-button-hover-background: var(--bg-dark-tertiary);
|
||||
--redesign-toolbar-feedback-link-color: var(--link-ui-dark);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--redesign-toolbar-home-button-hover-background: var(--neutral-20);
|
||||
--redesign-toolbar-border-divider: var(--border-divider);
|
||||
--redesign-toolbar-background: var(--bg-light-primary);
|
||||
--redesign-toolbar-home-link-color: var(--content-primary);
|
||||
--redesign-toolbar-logo-url: url('../../../../../public/img/ol-brand/overleaf-o-dark.svg');
|
||||
--redesign-subdued-button-color: var(--content-primary);
|
||||
--redesign-subdued-button-hover-background: var(--bg-light-tertiary);
|
||||
--redesign-toolbar-feedback-link-color: var(--link-ui);
|
||||
}
|
||||
|
||||
.ide-redesign-toolbar {
|
||||
$toolbar-height: 40px;
|
||||
$home-button-size: 32px;
|
||||
$ol-icon-height: 24px;
|
||||
$home-icon-font-size: 24px;
|
||||
|
||||
border-bottom: 1px solid var(--redesign-toolbar-border-divider);
|
||||
background-color: var(--redesign-toolbar-background);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
height: $toolbar-height;
|
||||
padding: 0 var(--spacing-02);
|
||||
|
||||
.ide-redesign-toolbar-menu {
|
||||
display: flex;
|
||||
gap: var(--spacing-05);
|
||||
}
|
||||
|
||||
.ide-redesign-toolbar-home-button {
|
||||
width: $home-button-size;
|
||||
height: $home-button-size;
|
||||
margin: math.div($toolbar-height - $home-button-size, 2) 0;
|
||||
}
|
||||
|
||||
.ide-redesign-toolbar-button-subdued {
|
||||
@include ol-button-variant(
|
||||
var(--redesign-subdued-button-color),
|
||||
transparent,
|
||||
transparent,
|
||||
var(--redesign-subdued-button-hover-background),
|
||||
transparent,
|
||||
true
|
||||
);
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ide-redesign-toolbar-home-link {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
color: var(--redesign-toolbar-home-link-color);
|
||||
|
||||
.toolbar-ol-home-button {
|
||||
display: none;
|
||||
font-size: $home-icon-font-size;
|
||||
}
|
||||
|
||||
.toolbar-ol-logo {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: $ol-icon-height;
|
||||
height: $ol-icon-height;
|
||||
background-image: var(--redesign-toolbar-logo-url);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--redesign-toolbar-home-button-hover-background);
|
||||
|
||||
.toolbar-ol-home-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toolbar-ol-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ide-redesign-toolbar-dropdown-toggle-subdued {
|
||||
$height: 28px;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-02);
|
||||
height: $height;
|
||||
font-size: var(--font-size-02);
|
||||
line-height: var(--line-height-02);
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
margin: math.div($toolbar-height - $height, 2) 0;
|
||||
|
||||
&.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ide-redesign-toolbar-menu-bar {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
gap: var(--spacing-05);
|
||||
}
|
||||
|
||||
.ide-redesign-toolbar-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-04);
|
||||
padding-left: var(--spacing-05);
|
||||
}
|
||||
|
||||
.ide-redesign-toolbar-button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ide-redesign-online-users {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ide-redesign-toolbar-editable-project-name {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: var(--spacing-02) 0;
|
||||
}
|
||||
|
||||
.ide-redesign-toolbar-labs-feedback-link {
|
||||
&,
|
||||
&:hover,
|
||||
&:visited {
|
||||
color: var(--redesign-toolbar-feedback-link-color);
|
||||
}
|
||||
}
|
||||
|
||||
.ide-redesign-labs-button.btn.btn-info {
|
||||
@include ol-button-variant(
|
||||
var(--content-positive),
|
||||
var(--bg-accent-03),
|
||||
var(--green-40),
|
||||
var(--bg-accent-03),
|
||||
var(--green-40),
|
||||
false
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,550 @@
|
||||
@import '../../abstracts/variables';
|
||||
|
||||
:root {
|
||||
--toolbar-border-color: var(--neutral-80);
|
||||
--toolbar-header-bg-color: var(--neutral-90);
|
||||
--toolbar-header-btn-border-color: var(--neutral-80);
|
||||
--toolbar-btn-color: var(--white);
|
||||
--toolbar-btn-hover-bg-color: var(--neutral-80);
|
||||
--toolbar-btn-hover-color: var(--white);
|
||||
--toolbar-btn-active-color: var(--white);
|
||||
--toolbar-btn-active-bg-color: var(--green-50);
|
||||
--toolbar-height: #{$toolbar-height};
|
||||
--toolbar-small-height: #{$toolbar-small-height};
|
||||
--toolbar-alt-bg-color: var(--neutral-80);
|
||||
--formatting-btn-color: var(--white);
|
||||
--formatting-btn-bg: var(--neutral-80);
|
||||
--formatting-btn-border: var(--neutral-70);
|
||||
--project-name-color: var(--neutral-40);
|
||||
--toolbar-filetree-bg-color: var(--neutral-80);
|
||||
--project-rename-link-color: var(--neutral-40);
|
||||
--project-rename-link-color-hover: var(--neutral-20);
|
||||
--editor-header-logo-background: url(../../../../../public/img/ol-brand/overleaf-o-white.svg)
|
||||
center / contain no-repeat;
|
||||
--editor-toolbar-bg: var(--neutral-80);
|
||||
--toolbar-dropdown-divider-color: var(--border-dark-divider);
|
||||
}
|
||||
|
||||
.ide-redesign-main {
|
||||
--toolbar-alt-bg-color: var(--bg-dark-secondary);
|
||||
--toolbar-btn-color: var(--content-primary-dark);
|
||||
--toolbar-btn-hover-bg-color: var(--neutral-80);
|
||||
--toolbar-btn-hover-color: var(--white);
|
||||
--editor-toolbar-bg: var(--bg-dark-primary);
|
||||
--toolbar-filetree-bg-color: var(--neutral-80);
|
||||
|
||||
.ol-cm-toolbar-portal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--editor-toolbar-bg);
|
||||
|
||||
.review-panel-header {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.ol-cm-toolbar-wrapper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ol-cm-toolbar-wrapper-indented {
|
||||
width: calc(100% - var(--review-panel-width));
|
||||
}
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--toolbar-border-color: var(--neutral-20);
|
||||
--toolbar-header-bg-color: var(--white);
|
||||
--toolbar-header-btn-border-color: var(--neutral-20);
|
||||
--toolbar-btn-color: var(--neutral-70);
|
||||
--toolbar-btn-hover-bg-color: var(--neutral-10);
|
||||
--toolbar-btn-hover-color: var(--neutral-70);
|
||||
--toolbar-btn-active-bg-color: var(--green-50);
|
||||
--toolbar-alt-bg-color: var(--white);
|
||||
--formatting-btn-color: var(--neutral-70);
|
||||
--formatting-btn-bg: transparent;
|
||||
--formatting-btn-border: var(--neutral-20);
|
||||
--project-name-color: var(--neutral-70);
|
||||
--toolbar-filetree-bg-color: var(--white);
|
||||
--project-rename-link-color: var(--neutral-70);
|
||||
--project-rename-link-color-hover: var(--neutral-70);
|
||||
--editor-header-logo-background: url(../../../../../public/img/ol-brand/overleaf-o.svg)
|
||||
center / contain no-repeat;
|
||||
--editor-toolbar-bg: var(--white);
|
||||
--toolbar-dropdown-divider-color: var(--border-divider);
|
||||
|
||||
.ide-redesign-main {
|
||||
--toolbar-alt-bg-color: var(--bg-light-secondary);
|
||||
--toolbar-btn-color: var(--content-primary);
|
||||
--toolbar-btn-hover-bg-color: var(--neutral-80);
|
||||
--toolbar-btn-hover-color: var(--white);
|
||||
--editor-toolbar-bg: var(--white);
|
||||
--toolbar-filetree-bg-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--toolbar-height);
|
||||
border-bottom: 1px solid var(--toolbar-border-color);
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
pointer-events: none; // Labels were capturing button/anchor clicks.
|
||||
|
||||
.badge-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-right,
|
||||
.toolbar-left {
|
||||
button:not(.back-to-editor-btn, .toolbar-experiment-button) {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-right .back-to-editor-btn {
|
||||
margin-right: var(--spacing-09);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.toolbar-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> a:focus,
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
> a:not(.btn),
|
||||
> button,
|
||||
.toolbar-left > a:not(.btn),
|
||||
.toolbar-left > button,
|
||||
.toolbar-right > a:not(.btn),
|
||||
.toolbar-right > button:not(.back-to-editor-btn, .toolbar-experiment-button) {
|
||||
display: inline-block;
|
||||
color: var(--toolbar-btn-color);
|
||||
background-color: transparent;
|
||||
padding: var(--spacing-01);
|
||||
line-height: 1;
|
||||
height: 24px;
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
&.toolbar-header-back-projects {
|
||||
padding: var(--spacing-02) var(--spacing-04) var(--spacing-02);
|
||||
margin-bottom: var(--spacing-01);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-shadow: none;
|
||||
color: var(--toolbar-btn-hover-color);
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
.label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
color: white;
|
||||
background-color: var(--bg-info-01);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.btn-full-height,
|
||||
button.btn-full-height {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-right: 1px solid var(--toolbar-header-btn-border-color);
|
||||
color: var(--toolbar-btn-color);
|
||||
padding: var(--spacing-02) var(--spacing-05) var(--spacing-03);
|
||||
font-size: var(--font-size-05);
|
||||
max-height: 39px;
|
||||
|
||||
&:hover {
|
||||
text-shadow: none;
|
||||
background-color: var(--toolbar-btn-hover-bg-color);
|
||||
color: var(--toolbar-btn-color);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: var(--white);
|
||||
background-color: $bg-accent-01;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
top: var(--spacing-01);
|
||||
right: var(--spacing-02);
|
||||
}
|
||||
|
||||
&.header-cobranding-logo-container {
|
||||
height: calc(var(--toolbar-height) - 1px);
|
||||
padding: var(--spacing-04) var(--spacing-05);
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
vertical-align: middle;
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
|
||||
&.dropdown-toggle {
|
||||
line-height: 1;
|
||||
|
||||
&::after {
|
||||
vertical-align: middle;
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
|
||||
a.btn-full-height,
|
||||
button.btn-full-height {
|
||||
border-right: 0;
|
||||
border-left: 1px solid var(--toolbar-header-btn-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-center {
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
// At small screen sizes, center relative to the left menu and right buttons
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.toolbar-header {
|
||||
align-items: stretch;
|
||||
background-color: var(--toolbar-header-bg-color);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.toolbar-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toolbar-cio-tooltip {
|
||||
position: absolute;
|
||||
top: var(--toolbar-height);
|
||||
width: 391px;
|
||||
}
|
||||
|
||||
#toolbar-cio-history {
|
||||
@include media-breakpoint-down(lg) {
|
||||
right: 10px;
|
||||
|
||||
/* The iframe a message renders in isn't aware of the page width, so we
|
||||
make it 1px narrower to enable max-width media queries */
|
||||
width: 390px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-dropdown .dropdown-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-cobranding-logo {
|
||||
display: block;
|
||||
width: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
display: none;
|
||||
margin: 0 var(--spacing-02);
|
||||
font-size: var(--font-size-02);
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.toolbar-label-multiline {
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-header-upgrade-prompt {
|
||||
margin-left: var(--spacing-05);
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-filetree {
|
||||
@include toolbar-sm-height;
|
||||
|
||||
background-color: var(--toolbar-filetree-bg-color);
|
||||
padding: 0 var(--spacing-03);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.editor-menu-icon {
|
||||
&.material-symbols {
|
||||
width: 1em;
|
||||
text-indent: -9999px;
|
||||
background: var(--editor-header-logo-background);
|
||||
}
|
||||
}
|
||||
|
||||
.project-name {
|
||||
.name {
|
||||
display: inline-block;
|
||||
|
||||
@include text-truncate;
|
||||
|
||||
padding: var(--spacing-03);
|
||||
vertical-align: top;
|
||||
color: var(--project-name-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 30px;
|
||||
margin-top: var(--spacing-02);
|
||||
padding: var(--spacing-03);
|
||||
max-width: 500px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
a.rename {
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
color: var(--project-rename-link-color);
|
||||
padding: var(--spacing-03);
|
||||
border-radius: var(--border-radius-base);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-shadow: 0 1px 0 rgb(0 0 0 / 25%);
|
||||
color: var(--project-rename-link-color-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a.rename {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-editor {
|
||||
height: var(--toolbar-small-height);
|
||||
background-color: var(--editor-toolbar-bg);
|
||||
padding: 0 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 10; // Prevent track changes showing over toolbar
|
||||
}
|
||||
|
||||
/**************************************
|
||||
Toggle Switch
|
||||
***************************************/
|
||||
|
||||
.toggle-switch {
|
||||
--toggle-switch-height: 26px;
|
||||
--toggle-switch-padding: var(--spacing-01);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: var(--toggle-switch-height);
|
||||
margin-right: var(--spacing-03);
|
||||
border-radius: var(--border-radius-full);
|
||||
background-color: var(--neutral-20);
|
||||
padding: var(--toggle-switch-padding);
|
||||
}
|
||||
|
||||
.toggle-switch-label {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
|
||||
// It seems we need to set the height explicitly rather than using 100% to get the button to display correctly in Blink
|
||||
height: calc(var(--toggle-switch-height) - 2 * var(--toggle-switch-padding));
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: var(--content-secondary);
|
||||
border-radius: var(--border-radius-full);
|
||||
transition:
|
||||
color 0.12s ease-out,
|
||||
background-color 0.12s ease-out,
|
||||
box-shadow 0.12s ease-out;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 var(--spacing-08);
|
||||
background-size: 200% 100%;
|
||||
background-position: 0 0;
|
||||
transition: background-position 0.12s ease-out;
|
||||
font-size: var(--font-size-02);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-switch-input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toggle-switch-input:disabled + .toggle-switch-label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.toggle-switch-input:checked + .toggle-switch-label {
|
||||
span {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
color: var(--white);
|
||||
background-color: var(--bg-accent-01);
|
||||
border-radius: var(--border-radius-full);
|
||||
box-shadow: 0 2px 4px rgb(30 37 48 / 16%);
|
||||
}
|
||||
|
||||
.toggle-switch-input:checked:nth-child(2) + .toggle-switch-label {
|
||||
span {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-toggle-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
.toggle-switch {
|
||||
margin-left: var(--spacing-03);
|
||||
}
|
||||
|
||||
.toggle-switch-label span {
|
||||
background: none;
|
||||
transition: background 0.12s ease-out;
|
||||
}
|
||||
|
||||
.toggle-switch-label:first-of-type span {
|
||||
padding-left: var(--spacing-04);
|
||||
}
|
||||
|
||||
.toggle-switch-label:last-of-type span {
|
||||
padding-right: var(--spacing-04);
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**************************************
|
||||
Formatting buttons
|
||||
***************************************/
|
||||
.formatting-btn {
|
||||
color: var(--formatting-btn-color);
|
||||
background-color: var(--formatting-btn-bg);
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-left: 1px solid var(--formatting-btn-border);
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--formatting-btn-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--white);
|
||||
background-color: var(--toolbar-btn-active-bg-color);
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
color: var(--toolbar-btn-active-color);
|
||||
|
||||
&:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--formatting-btn-color);
|
||||
}
|
||||
}
|
||||
|
||||
.formatting-btn-icon {
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.formatting-btn-icon:last-of-type {
|
||||
border-right: 1px solid var(--formatting-btn-border);
|
||||
}
|
||||
|
||||
.toolbar-experiment-button.btn.btn-info {
|
||||
@include ol-button-variant(
|
||||
var(--content-positive),
|
||||
var(--bg-accent-03),
|
||||
var(--green-40),
|
||||
var(--bg-accent-03),
|
||||
var(--green-40),
|
||||
false
|
||||
);
|
||||
|
||||
max-height: 39px;
|
||||
font-size: var(--font-size-01);
|
||||
line-height: var(--line-height-01);
|
||||
margin-right: var(--spacing-04);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.btn.reference-manager-search-group-dropdown-toggle {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-radius: var(--border-radius-base);
|
||||
cursor: default !important;
|
||||
background-color: inherit;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.reference-manager-search-group-dropdown-icon {
|
||||
.material-symbols {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user