first commit
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
/*
|
||||
v2
|
||||
About Page
|
||||
*/
|
||||
.team {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
.team-member {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-bottom: var(--spacing-09);
|
||||
width: 100%;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.team-pic {
|
||||
float: left;
|
||||
margin-right: var(--spacing-04);
|
||||
}
|
||||
|
||||
.team-info {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.team-connect {
|
||||
list-style: none;
|
||||
margin-top: var(--spacing-04);
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 var(--spacing-07) 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,247 @@
|
||||
.affiliations-table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.affiliations-table-cell {
|
||||
padding: var(--spacing-04);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.affiliations-table-cell-tabbed {
|
||||
margin: var(--spacing-04) 0 0 var(--spacing-07);
|
||||
padding-left: var(--spacing-04);
|
||||
}
|
||||
|
||||
.affiliations-table-row-highlighted {
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
|
||||
.affiliation-change-container {
|
||||
margin-top: var(--spacing-04);
|
||||
}
|
||||
|
||||
.affiliations-table-label {
|
||||
padding-top: var(--spacing-02);
|
||||
}
|
||||
|
||||
.btn-link-accounts {
|
||||
margin-bottom: var(--spacing-03);
|
||||
}
|
||||
|
||||
.settings-widget-status-icon,
|
||||
.dropbox-sync-icon {
|
||||
position: relative;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.3em;
|
||||
vertical-align: top;
|
||||
|
||||
&.status-error,
|
||||
&.dropbox-sync-icon-error {
|
||||
color: var(--bg-danger-01);
|
||||
}
|
||||
|
||||
&.status-success,
|
||||
&.dropbox-sync-icon-success {
|
||||
color: var(--content-positive);
|
||||
}
|
||||
|
||||
&.status-pending,
|
||||
&.dropbox-sync-icon-updating {
|
||||
color: var(--bg-info-01);
|
||||
|
||||
&::after {
|
||||
content: '\f021';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -20%;
|
||||
font-size: 60%;
|
||||
color: #fff;
|
||||
animation: fa-spin 2s infinite linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-widgets-container {
|
||||
border: 1px solid var(--border-divider);
|
||||
|
||||
hr {
|
||||
margin: 0 var(--spacing-05);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-widget-container {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr auto;
|
||||
gap: var(--spacing-07);
|
||||
align-items: center;
|
||||
padding: var(--spacing-05);
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: var(--spacing-07);
|
||||
|
||||
&:last-child {
|
||||
padding-right: var(--spacing-00);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.description-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.dual-logo {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-05);
|
||||
|
||||
> h4 {
|
||||
margin: 0;
|
||||
margin-right: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-05);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: var(--spacing-00);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.settings-widget-container {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.title-row {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Prevents icon from large account linking sections, such as the git bridge,
|
||||
// from rendering in the center of the widget, anchoring it to the top
|
||||
.linking-icon-fixed-position {
|
||||
align-self: start;
|
||||
padding-top: var(--spacing-05);
|
||||
}
|
||||
|
||||
// overrides the default `Col` padding, as the inner `affiliations-table-cell` has its own padding, and
|
||||
// the content length of the git-bridge token table is pretty much fixed (tokens and dates)
|
||||
.linking-git-bridge-table-cell {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.linking-git-bridge-revoke-button {
|
||||
padding: var(--spacing-01) var(--spacing-02);
|
||||
}
|
||||
|
||||
.security-row {
|
||||
.line-header > b {
|
||||
color: var(--content-primary);
|
||||
}
|
||||
|
||||
color: var(--content-secondary);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: var(--spacing-03) 0;
|
||||
|
||||
.icon {
|
||||
color: var(--content-primary);
|
||||
display: flex;
|
||||
flex: 1 1 7%;
|
||||
padding: 0 var(--spacing-06);
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1 1 93%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: var(--spacing-06);
|
||||
}
|
||||
|
||||
.button-column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
@include body-sm;
|
||||
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-01) var(--spacing-02);
|
||||
margin-top: var(--spacing-02);
|
||||
margin-left: var(--spacing-04);
|
||||
flex-shrink: 0;
|
||||
|
||||
&.status-label-configured {
|
||||
background-color: var(--bg-accent-01);
|
||||
color: var(--content-secondary-dark);
|
||||
}
|
||||
|
||||
&.status-label-ready {
|
||||
background-color: var(--bg-light-tertiary);
|
||||
color: var(--content-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#settings-page-root {
|
||||
.recaptcha-branding {
|
||||
font-size: var(--font-size-01);
|
||||
text-align: left;
|
||||
padding: 0 0 var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
#settings-page-root,
|
||||
#action-project-modal {
|
||||
&#settings-page-root .confirm-email-form {
|
||||
background: var(--bg-light-secondary);
|
||||
}
|
||||
|
||||
.confirm-email-form-inner {
|
||||
margin: auto;
|
||||
padding: var(--spacing-08);
|
||||
max-width: 480px;
|
||||
|
||||
label {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
display: flex;
|
||||
gap: var(--spacing-03);
|
||||
padding: var(--spacing-02);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: var(--spacing-05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-05);
|
||||
|
||||
button {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.btn-danger-ghost:not(:hover) {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
.add-secondary-email {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-05);
|
||||
|
||||
.add-secondary-email-error {
|
||||
display: flex;
|
||||
gap: var(--spacing-03);
|
||||
padding: var(--spacing-02);
|
||||
}
|
||||
|
||||
.add-secondary-email-learn-more {
|
||||
margin-top: var(--spacing-05);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
#survey-form,
|
||||
#split-test-edit,
|
||||
#split-test-create {
|
||||
.material-switch {
|
||||
input[type='checkbox'] {
|
||||
display: none;
|
||||
|
||||
&:checked + label::before {
|
||||
background: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:checked + label::after {
|
||||
background: inherit;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
&:disabled + label {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
background-color: var(--bg-accent-01);
|
||||
|
||||
&::before {
|
||||
background: rgb(0 0 0);
|
||||
box-shadow: inset 0 0 10px rgb(0 0 0 / 50%);
|
||||
border-radius: var(--border-radius-medium);
|
||||
content: '';
|
||||
height: 16px;
|
||||
margin-top: calc(var(--spacing-01) * -1);
|
||||
position: absolute;
|
||||
opacity: 0.3;
|
||||
transition: all 0.2s ease-in-out;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: rgb(255 255 255);
|
||||
border-radius: var(--border-radius-large);
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 30%);
|
||||
content: '';
|
||||
height: 24px;
|
||||
left: -4px;
|
||||
margin-top: calc(var(--spacing-01) * -1);
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hr-sect {
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
align-items: center;
|
||||
color: rgb(0 0 0 / 35%);
|
||||
margin: var(--spacing-04) 0;
|
||||
}
|
||||
|
||||
.hr-sect::before,
|
||||
.hr-sect::after {
|
||||
content: '';
|
||||
flex-grow: 1;
|
||||
background: rgb(0 0 0 / 35%);
|
||||
height: 1px;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
margin: 0 var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
#user-info-page {
|
||||
.confirmed-email-color,
|
||||
.trusted-email-color {
|
||||
color: var(--green-60);
|
||||
}
|
||||
|
||||
.unconfirmed-email-color {
|
||||
color: var(--red-50);
|
||||
}
|
||||
|
||||
.untrusted-email-color {
|
||||
color: var(--yellow-50);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.project-url-lookup {
|
||||
margin-top: var(--spacing-08);
|
||||
|
||||
.project-url-lookup-results {
|
||||
margin-top: var(--spacing-08);
|
||||
}
|
||||
|
||||
.project-url-lookup-link-box {
|
||||
background-color: var(--bg-light-secondary);
|
||||
border: 1px solid var(--border-primary-dark);
|
||||
padding: var(--spacing-03) var(--spacing-05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project-url-lookup-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-03);
|
||||
}
|
||||
}
|
||||
53
services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
Normal file
53
services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
@import 'account-settings';
|
||||
@import 'cms';
|
||||
@import 'content';
|
||||
@import 'project-list';
|
||||
@import 'project-list-default';
|
||||
@import 'project-list-ds-nav';
|
||||
@import 'sidebar-v2-dash-pane';
|
||||
@import 'editor/ide';
|
||||
@import 'editor/ide-redesign';
|
||||
@import 'editor/ide-redesign-switcher-modal';
|
||||
@import 'editor/rail';
|
||||
@import 'editor/settings';
|
||||
@import 'editor/toolbar';
|
||||
@import 'editor/toolbar-redesign';
|
||||
@import 'editor/online-users';
|
||||
@import 'editor/hotkeys';
|
||||
@import 'editor/left-menu';
|
||||
@import 'editor/loading-screen';
|
||||
@import 'editor/logs';
|
||||
@import 'editor/outline';
|
||||
@import 'editor/file-tree';
|
||||
@import 'editor/file-view';
|
||||
@import 'editor/figure-modal';
|
||||
@import 'editor/chat';
|
||||
@import 'editor/toast';
|
||||
@import 'editor/history';
|
||||
@import 'editor/write-and-cite';
|
||||
@import 'subscription';
|
||||
@import 'editor/pdf';
|
||||
@import 'editor/pdf-error-state';
|
||||
@import 'editor/compile-button';
|
||||
@import 'editor/publish-modal';
|
||||
@import 'editor/share';
|
||||
@import 'editor/tags-input';
|
||||
@import 'editor/review-panel-new';
|
||||
@import 'editor/table-generator-column-width-modal';
|
||||
@import 'editor/math-preview';
|
||||
@import 'editor/references-search';
|
||||
@import 'website-redesign';
|
||||
@import 'group-settings';
|
||||
@import 'templates-v2';
|
||||
@import 'homepage';
|
||||
@import 'auth';
|
||||
@import 'login-register';
|
||||
@import 'login';
|
||||
@import 'register';
|
||||
@import 'plans';
|
||||
@import 'onboarding-confirm-email';
|
||||
@import 'secondary-confirm-email';
|
||||
@import 'onboarding';
|
||||
@import 'admin/admin';
|
||||
@import 'admin/project-url-lookup';
|
||||
@import 'add-secondary-email-prompt';
|
||||
@@ -0,0 +1,82 @@
|
||||
.auth-aux-logo {
|
||||
position: absolute;
|
||||
top: var(--spacing-06);
|
||||
left: var(--spacing-06);
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-aux-container {
|
||||
padding-top: calc($header-height + $spacing-11);
|
||||
max-width: 320px;
|
||||
min-height: 100vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.recaptcha-branding {
|
||||
@include body-xs;
|
||||
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-aux-new-password ~ .notification {
|
||||
margin-top: var(--spacing-04);
|
||||
}
|
||||
|
||||
.login-overleaf-logo-container {
|
||||
display: block;
|
||||
padding: var(--spacing-06);
|
||||
text-align: center;
|
||||
padding-top: var(--spacing-13);
|
||||
padding-bottom: var(--spacing-09);
|
||||
}
|
||||
|
||||
.login-register-hr-text-container {
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
padding: var(--spacing-08) 0;
|
||||
font-size: var(--font-size-02);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background-color: var(--neutral-20);
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-register-hr-text {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
padding: 0 var(--spacing-05);
|
||||
}
|
||||
|
||||
.sso-auth-login-container {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-06);
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-07);
|
||||
line-height: var(--line-height-06);
|
||||
}
|
||||
|
||||
.login-register-text {
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
|
||||
.email-label {
|
||||
padding-top: var(--spacing-06);
|
||||
}
|
||||
|
||||
.login-register-other-links {
|
||||
padding-top: var(--spacing-09);
|
||||
}
|
||||
}
|
||||
771
services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
Normal file
771
services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
Normal file
@@ -0,0 +1,771 @@
|
||||
/*
|
||||
CMS Generated Pages:
|
||||
/about/*, /contact, /legal, /blog/*, /for/*, /events/*
|
||||
*/
|
||||
|
||||
@mixin section-row-custom-gap($spacing) {
|
||||
// only update the padding between columns
|
||||
// not the padding before the first column
|
||||
// or the padding after the last column
|
||||
// rows can be nested, so only select direct col in row
|
||||
|
||||
> div[class*='col-'] {
|
||||
&:not(:first-child, :last-child) {
|
||||
padding-left: $spacing;
|
||||
padding-right: $spacing;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-right: $spacing;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: $spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cms-page {
|
||||
.sales-contact-form-left-column {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.names-container {
|
||||
display: flex;
|
||||
gap: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
row-gap: var(--spacing-13);
|
||||
}
|
||||
|
||||
.p-no-text-nodes:has(.btn) {
|
||||
margin-top: var(--spacing-09);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.btn {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: var(--spacing-05);
|
||||
}
|
||||
|
||||
.btn:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.linkable-list-container {
|
||||
.row-with-id {
|
||||
margin-top: var(--spacing-12);
|
||||
|
||||
h2:first-child {
|
||||
// css specificity problem. this is more specific than header overrides below
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// create .paragraphs-margin-spacing-00, .paragraphs-margin-spacing-01, .paragraphs-margin-spacing-02, .paragraphs-margin-spacing-03, .paragraphs-margin-spacing-04, .paragraphs-margin-spacing-05, .paragraphs-margin-spacing-06, .paragraphs-margin-spacing-07, .paragraphs-margin-spacing-08, .paragraphs-margin-spacing-09, .paragraphs-margin-spacing-10, .paragraphs-margin-spacing-11, .paragraphs-margin-spacing-12, .paragraphs-margin-spacing-13, .paragraphs-margin-spacing-14, .paragraphs-margin-spacing-15, .paragraphs-margin-spacing-16
|
||||
@each $spacing-option in $all-spacings {
|
||||
.paragraphs-margin-#{$spacing-option} {
|
||||
p {
|
||||
margin-bottom: var(--#{$spacing-option});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// create .paragraphs-top-margin-spacing-00, .paragraphs-top-margin-spacing-01, .paragraphs-top-margin-spacing-02, .paragraphs-top-margin-spacing-03, .paragraphs-top-margin-spacing-04, .paragraphs-top-margin-spacing-05, .paragraphs-top-margin-spacing-06, .paragraphs-top-margin-spacing-07, .paragraphs-top-margin-spacing-08, .paragraphs-top-margin-spacing-09, .paragraphs-top-margin-spacing-10, .paragraphs-top-margin-spacing-11, .paragraphs-top-margin-spacing-12, .paragraphs-top-margin-spacing-13, .paragraphs-top-margin-spacing-14, .paragraphs-top-margin-spacing-15, .paragraphs-top-margin-spacing-16
|
||||
@each $spacing-option in $all-spacings {
|
||||
.paragraphs-top-margin-#{$spacing-option} {
|
||||
p {
|
||||
margin-top: var(--#{$spacing-option}) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// create .headers-top-margin-spacing-00, .headers-top-margin-spacing-01, .headers-top-margin-spacing-02, .headers-top-margin-spacing-03, .headers-top-margin-spacing-04, .headers-top-margin-spacing-05, .headers-top-margin-spacing-06, .headers-top-margin-spacing-07, .headers-top-margin-spacing-08, .headers-top-margin-spacing-09, .headers-top-margin-spacing-10, .headers-top-margin-spacing-11, .headers-top-margin-spacing-12, .headers-top-margin-spacing-13, .headers-top-margin-spacing-14, .headers-top-margin-spacing-15, .headers-top-margin-spacing-16
|
||||
@each $spacing-option in $all-spacings {
|
||||
.headers-top-margin-#{$spacing-option} {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: var(
|
||||
--#{$spacing-option}
|
||||
) !important; // needed for :first-child specificity
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// create .headers-bottom-margin-spacing-00, .headers-bottom-margin-spacing-01, .headers-bottom-margin-spacing-02, .headers-bottom-margin-spacing-03, .headers-bottom-margin-spacing-04, .headers-bottom-margin-spacing-05, .headers-bottom-margin-spacing-06, .headers-bottom-margin-spacing-07, .headers-bottom-margin-spacing-08, .headers-bottom-margin-spacing-09, .headers-bottom-margin-spacing-10, .headers-bottom-margin-spacing-11, .headers-bottom-margin-spacing-12, .headers-bottom-margin-spacing-13, .headers-bottom-margin-spacing-14, .headers-bottom-margin-spacing-15, .headers-bottom-margin-spacing-16
|
||||
@each $spacing-option in $all-spacings {
|
||||
.headers-bottom-margin-#{$spacing-option} {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: var(--#{$spacing-option});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $spacing-option in $all-spacings {
|
||||
// create .padding-top-spacing-00, .padding-top-spacing-01, .padding-top-spacing-02, .padding-top-spacing-03, .padding-top-spacing-04, .padding-top-spacing-05, .padding-top-spacing-06, .padding-top-spacing-07, .padding-top-spacing-08, .padding-top-spacing-09, .padding-top-spacing-10, .padding-top-spacing-11, .padding-top-spacing-12, .padding-top-spacing-13, .padding-top-spacing-14, .padding-top-spacing-15, .padding-top-spacing-16
|
||||
.padding-top-#{$spacing-option} {
|
||||
padding-top: var(--#{$spacing-option});
|
||||
}
|
||||
}
|
||||
|
||||
@each $spacing-option in $all-spacings {
|
||||
// create .padding-bottom-spacing-00, .padding-bottom-spacing-01, .padding-bottom-spacing-02, .padding-bottom-spacing-03, .padding-bottom-spacing-04, .padding-bottom-spacing-05, .padding-bottom-spacing-06, .padding-bottom-spacing-07, .padding-bottom-spacing-08, .padding-bottom-spacing-09, .padding-bottom-spacing-10, .padding-bottom-spacing-11, .padding-bottom-spacing-12, .padding-bottom-spacing-13, .padding-bottom-spacing-14, .padding-bottom-spacing-15, .padding-bottom-spacing-16
|
||||
.padding-bottom-#{$spacing-option} {
|
||||
padding-bottom: var(--#{$spacing-option});
|
||||
}
|
||||
}
|
||||
|
||||
.font-color-green-bright {
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--green-bright);
|
||||
}
|
||||
}
|
||||
|
||||
.card + .card {
|
||||
margin-top: var(--spacing-09);
|
||||
}
|
||||
|
||||
.optional-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: var(--spacing-16) 0 0 0;
|
||||
|
||||
&.no-top-padding {
|
||||
/* opt out of padding via the CMS */
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// TODO: confirm if we will still support this and if so what colors to use
|
||||
// &.color-block {
|
||||
// &.green-dark {
|
||||
// background-color: @ol-dark-green;
|
||||
// }
|
||||
// &.green {
|
||||
// background-color: @ol-green;
|
||||
|
||||
// .no-card * {
|
||||
// .btn-primary,
|
||||
// .btn-success {
|
||||
// // only correct button colors when green on green
|
||||
// .btn-primary-on-primary-bg;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &.blue-gray-dark {
|
||||
// background-color: @ol-blue-gray-5;
|
||||
// }
|
||||
// &.blue-gray-light {
|
||||
// background-color: @ol-blue-gray-1;
|
||||
// }
|
||||
|
||||
// &.green,
|
||||
// &.green-dark,
|
||||
// &.blue-gray-dark {
|
||||
// .no-card * {
|
||||
// &:not(.btn) {
|
||||
// color: @white;
|
||||
// }
|
||||
// a {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
// .btn {
|
||||
// text-decoration: none;
|
||||
// }
|
||||
|
||||
// .form-control {
|
||||
// color: @input-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// only first level of .section-row need to act like containers. We do not want to update .section-row nested within a .section-row
|
||||
section > .section-row {
|
||||
@extend .container;
|
||||
}
|
||||
|
||||
padding-bottom: 0;
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
Tabs
|
||||
*/
|
||||
.tab-content {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
When on preview mode
|
||||
*/
|
||||
.cms-preview {
|
||||
background-color: var(--blue-60);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
height: 30px;
|
||||
left: 0;
|
||||
line-height: 30px;
|
||||
opacity: 0.8;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
|
||||
&::after {
|
||||
content: 'Preview';
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
.row:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Tables
|
||||
*/
|
||||
.table-styled {
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
|
||||
table {
|
||||
background: white;
|
||||
max-width: none;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--neutral-30);
|
||||
padding: var(--spacing-05);
|
||||
text-align: center;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-styled,
|
||||
.features-table {
|
||||
.fa-check-square,
|
||||
.fa-check {
|
||||
color: var(--green-50);
|
||||
}
|
||||
}
|
||||
|
||||
.features-table {
|
||||
max-width: none;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--neutral-30);
|
||||
hyphens: auto;
|
||||
padding: var(--spacing-05);
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
max-width: 100%;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&.left-align-first-col {
|
||||
td,
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td + td,
|
||||
th + th {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-row-above-xs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
tbody,
|
||||
thead {
|
||||
display: block;
|
||||
}
|
||||
|
||||
tr {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
display: block;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
th {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
th:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hidden-row-xs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hidden-row-above-xs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
universities page
|
||||
*/
|
||||
#universities-container {
|
||||
padding: var(--spacing-07);
|
||||
width: 100%;
|
||||
|
||||
.row {
|
||||
border-bottom: 1px solid var(--neutral-10);
|
||||
|
||||
div {
|
||||
padding: var(--spacing-07);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.row:first-child {
|
||||
// parent container contains padding
|
||||
|
||||
div {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
border: 0;
|
||||
|
||||
// parent container contains padding
|
||||
div {
|
||||
border: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Logos
|
||||
.uni-logo {
|
||||
margin: 0 auto;
|
||||
max-height: 55px;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.university-claim-btn {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
|
||||
.row {
|
||||
display: table-row;
|
||||
|
||||
div {
|
||||
border-bottom: 1px solid var(--neutral-10);
|
||||
display: table-cell;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
videos
|
||||
*/
|
||||
video {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
box-shadow:
|
||||
0 8px 16px 0 rgba(30 37 48 / 12%),
|
||||
0 4px 6px 0 rgba(30 37 48 / 12%);
|
||||
}
|
||||
|
||||
/*
|
||||
cards
|
||||
*/
|
||||
.card-body {
|
||||
// card-body all have div before the actual content
|
||||
// due to option to override font size
|
||||
> :first-child {
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card,
|
||||
.no-card {
|
||||
&.top-margin-sm {
|
||||
margin-top: var(--spacing-05);
|
||||
}
|
||||
|
||||
&.top-margin-md {
|
||||
margin-top: var(--spacing-07);
|
||||
}
|
||||
|
||||
&.top-margin-lg {
|
||||
margin-top: var(--spacing-09);
|
||||
}
|
||||
|
||||
&.top-margin-xl {
|
||||
margin-top: var(--spacing-10);
|
||||
}
|
||||
|
||||
&.top-margin-xxl {
|
||||
margin-top: var(--spacing-11);
|
||||
}
|
||||
|
||||
// create .top-margin-spacing-00, .top-margin-spacing-01, .top-margin-spacing-02, .top-margin-spacing-03, .top-margin-spacing-04, .top-margin-spacing-05, .top-margin-spacing-06, .top-margin-spacing-07, .top-margin-spacing-08, .top-margin-spacing-09, .top-margin-spacing-10, .top-margin-spacing-11, .top-margin-spacing-12, .top-margin-spacing-13, .top-margin-spacing-14, .top-margin-spacing-15, .top-margin-spacing-16
|
||||
@each $spacing-option in $all-spacings {
|
||||
&.top-margin-#{$spacing-option} {
|
||||
margin-top: var(--#{$spacing-option});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
@each $spacing-option in $all-spacings {
|
||||
// create .padding-spacing-00, .padding-spacing-01, .padding-spacing-02, .padding-spacing-03, .padding-spacing-04, .padding-spacing-05, .padding-spacing-06, .padding-spacing-07, .padding-spacing-08, .padding-spacing-09, .padding-spacing-10, .padding-spacing-11, .padding-spacing-12, .padding-spacing-13, .padding-spacing-14, .padding-spacing-15, .padding-spacing-16
|
||||
&.padding-#{$spacing-option} {
|
||||
.card-body {
|
||||
padding: var(--#{$spacing-option});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-card {
|
||||
@each $spacing-option in $all-spacings {
|
||||
// create .padding-spacing-00, .padding-spacing-01, .padding-spacing-02, .padding-spacing-03, .padding-spacing-04, .padding-spacing-05, .padding-spacing-06, .padding-spacing-07, .padding-spacing-08, .padding-spacing-09, .padding-spacing-10, .padding-spacing-11, .padding-spacing-12, .padding-spacing-13, .padding-spacing-14, .padding-spacing-15, .padding-spacing-16
|
||||
&.padding-#{$spacing-option} {
|
||||
padding: var(--#{$spacing-option});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-of-contents {
|
||||
--link-color: var(--neutral-70);
|
||||
--link-visited-color: var(--neutral-70);
|
||||
|
||||
border-top: 1px solid var(--neutral-30);
|
||||
border-bottom: 1px solid var(--neutral-30);
|
||||
padding: var(--spacing-09) 0;
|
||||
margin-right: var(--spacing-13);
|
||||
|
||||
h2 {
|
||||
@include heading-xs;
|
||||
|
||||
color: var(--green-60);
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing-06);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-with-content {
|
||||
display: flex;
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
background-color: var(--green-10);
|
||||
padding: 7.5px;
|
||||
height: 56px;
|
||||
width: 56px;
|
||||
border-radius: 50%;
|
||||
margin-right: 24px;
|
||||
|
||||
.icon-inner-container {
|
||||
align-items: center;
|
||||
border: var(--green-30) 3.5px solid;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: var(--green-50);
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.visual-with-content {
|
||||
display: flex;
|
||||
gap: var(--spacing-06);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.svg-arrow-icon {
|
||||
position: relative;
|
||||
left: 4px;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
.vertically-center-col > div[class*='col-'] {
|
||||
align-self: center;
|
||||
|
||||
// remove margin to better vertically align
|
||||
// some elements need to be nested within a container, and others are directly within .no-card/.card
|
||||
.card:first-child,
|
||||
.no-card:first-child {
|
||||
.cms-element-container {
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> *:first-child:not(.cms-element-container) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card:last-child,
|
||||
.no-card:last-child {
|
||||
.cms-element-container {
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> *:last-child:not(.cms-element-container) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-within-card {
|
||||
.no-card {
|
||||
div:first-child {
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-blog {
|
||||
.card-body {
|
||||
padding: var(--spacing-06) !important;
|
||||
|
||||
h2 {
|
||||
@extend .h5;
|
||||
|
||||
padding: var(--spacing-04) var(--spacing-05);
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
.badge-link-list {
|
||||
padding: 0 var(--spacing-05);
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-register-container {
|
||||
margin-top: var(--spacing-05);
|
||||
|
||||
a {
|
||||
margin-top: var(--spacing-02);
|
||||
margin-left: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-error-container {
|
||||
padding-bottom: var(--spacing-08);
|
||||
}
|
||||
|
||||
// Desktop layout options depdendent on mobile breakpoint
|
||||
@include media-breakpoint-up(lg) {
|
||||
.row-equal-column-heights > div[class*='col-'] > .card,
|
||||
.row-equal-column-heights > div[class*='col-'] > .no-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
&.row-max-800 {
|
||||
max-width: 800px !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.row-max-900 {
|
||||
max-width: 900px !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.row-max-1000 {
|
||||
max-width: 1000px !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.row-max-unset {
|
||||
max-width: unset !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// create .row-gap-spacing-00, .row-gap-spacing-01, .row-gap-spacing-02, .row-gap-spacing-03, .row-gap-spacing-04, .row-gap-spacing-05, .row-gap-spacing-06, .row-gap-spacing-07, .row-gap-spacing-08, .row-gap-spacing-09, .row-gap-spacing-10, .row-gap-spacing-11, .row-gap-spacing-12, .row-gap-spacing-13, .row-gap-spacing-14, .row-gap-spacing-15, .row-gap-spacing-16
|
||||
@each $spacing-option in $all-spacings {
|
||||
.row-gap-#{$spacing-option} {
|
||||
@include section-row-custom-gap(calc(var(--#{$spacing-option}) / 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile layout options depdendent on mobile breakpoint
|
||||
@include media-breakpoint-down(lg) {
|
||||
.cms-page {
|
||||
.reverse-col-order-mobile {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
// create .row-mobile-gap-spacing-00, .row-mobile-gap-spacing-01, .row-mobile-gap-spacing-02, .row-mobile-gap-spacing-03, .row-mobile-gap-spacing-04, .row-mobile-gap-spacing-05, .row-mobile-gap-spacing-06, .row-mobile-gap-spacing-07, .row-mobile-gap-spacing-08, .row-mobile-gap-spacing-09, .row-mobile-gap-spacing-10, .row-mobile-gap-spacing-11, .row-mobile-gap-spacing-12, .row-mobile-gap-spacing-13, .row-mobile-gap-spacing-14, .row-mobile-gap-spacing-15, .row-mobile-gap-spacing-16
|
||||
@each $spacing-option in $all-spacings {
|
||||
.row-mobile-gap-#{$spacing-option} {
|
||||
@include section-row-custom-gap(calc(var(--#{$spacing-option}) / 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-align-last-entry {
|
||||
&.no-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
* {
|
||||
&:last-child {
|
||||
flex: 1;
|
||||
align-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card {
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
* {
|
||||
&:last-child {
|
||||
flex: 1;
|
||||
align-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
/*
|
||||
Styling for content pages
|
||||
Including: about, blog, /for/__, legal, contact, portals, wiki, gallery, plans, and interstitial payment page
|
||||
*/
|
||||
|
||||
// TODO: consolidate cms.scss and content.scss
|
||||
|
||||
.content-page {
|
||||
&.content {
|
||||
padding-top: $header-height; // remove extra padding added by .content. Keep .content selector to increase specificity
|
||||
}
|
||||
|
||||
word-break: break-word;
|
||||
|
||||
.btn + .btn,
|
||||
.card-link + .card-link {
|
||||
margin-left: var(--spacing-06);
|
||||
}
|
||||
|
||||
.card-links {
|
||||
@include media-breakpoint-down(md) {
|
||||
.btn {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: var(--spacing-05);
|
||||
}
|
||||
|
||||
.btn:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Links and Buttons
|
||||
*/
|
||||
|
||||
// TODO: remove an use link style in more generic selector,
|
||||
// which is likely .website-redesign to start
|
||||
// a {
|
||||
// color: @link-color-alt;
|
||||
// &:hover {
|
||||
// color: @link-hover-color-alt;
|
||||
// }
|
||||
// }
|
||||
|
||||
hr {
|
||||
border-color: var(--neutral-30);
|
||||
}
|
||||
|
||||
.begin-now-card {
|
||||
margin: calc(var(--spacing-16) * 2) 0;
|
||||
}
|
||||
|
||||
// TODO: only used on about page. Confirm with UX changes needed
|
||||
// .container-small {
|
||||
// section .section-row {
|
||||
// /* match col-sm-8 */
|
||||
// /* @grid-gutter-width is used for margins */
|
||||
// max-width: (@screen-sm * (8/12)) - @grid-gutter-width;
|
||||
// @media (min-width: @screen-md-min) {
|
||||
// max-width: (@screen-md * (8/12)) - @grid-gutter-width;
|
||||
// }
|
||||
// @media (min-width: @screen-lg-min) {
|
||||
// max-width: (@screen-lg * (8/12)) - @grid-gutter-width;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
/*
|
||||
lists
|
||||
*/
|
||||
|
||||
.list-without-style {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,320 @@
|
||||
.enrollment-invite {
|
||||
.title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: var(--font-size-05);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.inner-card {
|
||||
background-color: var(--neutral-10);
|
||||
padding: var(--spacing-06);
|
||||
|
||||
&.warning {
|
||||
background-color: var(--yellow-10);
|
||||
}
|
||||
}
|
||||
|
||||
.list-row {
|
||||
border: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-05);
|
||||
|
||||
.icon {
|
||||
margin-top: var(--spacing-01);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.error {
|
||||
color: var(--yellow-50);
|
||||
}
|
||||
}
|
||||
|
||||
.managed-users-enabled {
|
||||
color: var(--content-positive);
|
||||
|
||||
.icon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
h3.group-settings-title {
|
||||
margin-bottom: var(--spacing-03);
|
||||
|
||||
@include heading-sm;
|
||||
}
|
||||
|
||||
h4.group-settings-title {
|
||||
margin-bottom: 0;
|
||||
font-size: var(--font-size-03);
|
||||
line-height: var(--line-height-04);
|
||||
}
|
||||
|
||||
h3.group-settings-title,
|
||||
h4.group-settings-title {
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.group-settings-sso {
|
||||
.group-settings-sso-row {
|
||||
margin-top: var(--spacing-07);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.group-settings-sso-action-col {
|
||||
margin-left: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.below-settings-section {
|
||||
border-top: 1px solid var(--border-disabled);
|
||||
padding-top: var(--spacing-08);
|
||||
margin-top: var(--spacing-08);
|
||||
}
|
||||
|
||||
.sso-config-info {
|
||||
padding: var(--spacing-05) 0;
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
.sso-config-info-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--spacing-03);
|
||||
padding: 0 var(--spacing-06) var(--spacing-06) var(--spacing-06);
|
||||
border-bottom: 1px solid var(--border-disabled);
|
||||
margin-bottom: var(--spacing-06);
|
||||
flex-wrap: wrap;
|
||||
|
||||
.badge {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sso-config-options-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-04);
|
||||
}
|
||||
|
||||
.sso-config-info-section {
|
||||
margin-bottom: var(--spacing-07);
|
||||
padding: 0 var(--spacing-06);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sso-config-info-label {
|
||||
font-size: var(--font-size-02);
|
||||
font-weight: bold;
|
||||
|
||||
.certificate-status {
|
||||
font-weight: normal;
|
||||
|
||||
.material-symbols {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.certificate-valid {
|
||||
color: var(--content-positive);
|
||||
}
|
||||
|
||||
&.certificate-expiring-soon {
|
||||
color: var(--content-warning);
|
||||
}
|
||||
|
||||
&.certificate-expired {
|
||||
color: var(--content-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sso-config-info-label-optional {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.sso-config-info-content {
|
||||
color: var(--content-primary);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.sso-config-info-content-empty {
|
||||
color: var(--neutral-60);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-03);
|
||||
}
|
||||
}
|
||||
|
||||
.sso-config-modal-content {
|
||||
.sso-config-interstitial-title {
|
||||
font-size: var(--font-size-05);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sso-config-modal-icon-wrapper {
|
||||
text-align: center;
|
||||
margin-top: var(--spacing-04);
|
||||
|
||||
.sso-config-interstitial-icon,
|
||||
.sso-config-test-result-icon,
|
||||
.sso-config-test-error-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: var(--font-size-08);
|
||||
border-radius: 50%;
|
||||
gap: var(--spacing-04);
|
||||
}
|
||||
|
||||
.sso-config-interstitial-icon {
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
|
||||
.sso-config-test-result-icon {
|
||||
background-color: var(--bg-accent-03);
|
||||
color: var(--content-positive);
|
||||
}
|
||||
|
||||
.sso-config-test-error-icon {
|
||||
background-color: var(--bg-danger-03);
|
||||
color: var(--content-danger);
|
||||
}
|
||||
}
|
||||
|
||||
.payload-content {
|
||||
padding: var(
|
||||
--spacing-06
|
||||
); // vertical padding added by elements within notification
|
||||
|
||||
width: 100%;
|
||||
border-radius: $border-radius-base;
|
||||
color: var(--content-primary);
|
||||
border: 1px solid var(--border-disabled);
|
||||
|
||||
.saml-response-xml-wrapper {
|
||||
margin-top: var(--spacing-06);
|
||||
overflow: hidden;
|
||||
background-color: var(--bg-light-secondary);
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
.saml-response-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-03);
|
||||
line-height: 56px;
|
||||
font-weight: bold;
|
||||
padding: 0 var(--spacing-06);
|
||||
border-bottom: 1px solid var(--border-disabled);
|
||||
}
|
||||
|
||||
.saml-response-footer {
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
$neutral-10 0%,
|
||||
rgb(244 245 246 / 0%) 835.48%
|
||||
);
|
||||
}
|
||||
|
||||
.saml-response-xml {
|
||||
@include font-mono;
|
||||
|
||||
white-space: pre-wrap;
|
||||
font-size: var(--font-size-02);
|
||||
word-break: break-word;
|
||||
padding: var(--spacing-06) var(--spacing-06) 0 var(--spacing-06);
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
|
||||
&.view-more {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.expand-viewer {
|
||||
.material-symbols {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payload-content-user-info-item {
|
||||
margin-bottom: var(--spacing-03);
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.certificate-wrapper {
|
||||
.certificate-delete {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.view-more {
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.certificate-truncated {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.view-more {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-06);
|
||||
}
|
||||
|
||||
.certificate {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
flex-grow: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.certificate {
|
||||
font-family: Courier, monospace;
|
||||
}
|
||||
|
||||
.certificate-delete {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.certificate-full .certificate {
|
||||
word-break: break-all;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.certificate-form-row {
|
||||
display: flex;
|
||||
|
||||
.certificate-input {
|
||||
flex-grow: 11;
|
||||
}
|
||||
|
||||
.certificate-delete {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,329 @@
|
||||
.homepage-container {
|
||||
padding-top: $header-height;
|
||||
|
||||
.home-animation-text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.home-begin-text {
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
color: #5f5ff0;
|
||||
font-size: 4rem;
|
||||
line-height: 1.25;
|
||||
font-family: 'DM Mono', monospace;
|
||||
align-self: flex-start;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home-parenthesis-text {
|
||||
color: #bbdbb8;
|
||||
font-size: 4rem;
|
||||
line-height: 1.25;
|
||||
display: inherit;
|
||||
|
||||
span {
|
||||
/* specifity workaround, otherwise .website-redesign span would take precedence */
|
||||
font-family: 'DM Mono', monospace;
|
||||
}
|
||||
|
||||
#home-animation-text {
|
||||
color: var(--neutral-70);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-top-text {
|
||||
@include heading-sm;
|
||||
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
@include heading-xs;
|
||||
|
||||
padding: 0 var(--spacing-16);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 0 var(--spacing-07);
|
||||
}
|
||||
|
||||
// force different line for desktop on both text
|
||||
> span:first-of-type {
|
||||
display: block;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
// need to have an extra space only for mobile
|
||||
// since on mobile all the text are inline
|
||||
.dash-text {
|
||||
@include media-breakpoint-down(lg) {
|
||||
&::after {
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-registration {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-07);
|
||||
|
||||
.home-registration-sso {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.home-registration-separator {
|
||||
margin: var(--spacing-04) 0;
|
||||
color: var(--neutral-90);
|
||||
|
||||
> span {
|
||||
vertical-align: middle;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 196px;
|
||||
height: 1px;
|
||||
background-color: var(--neutral-20);
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
flex-direction: column;
|
||||
width: 156px;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-right: var(--spacing-07);
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-right: var(--spacing-03);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-left: var(--spacing-07);
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-left: var(--spacing-03);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-registration-password {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.home-registration-password-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-06);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.home-registration-sign-up {
|
||||
display: block;
|
||||
margin-top: var(--spacing-06);
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
> button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tos-agreement-notice {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-pdf-video {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 585px;
|
||||
padding: 0 var(--spacing-06);
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
video {
|
||||
box-shadow: 0 60px 25px -15px rgb(16 24 40 / 20%);
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-millions-user-text {
|
||||
@include heading-sm;
|
||||
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
@include body-base;
|
||||
}
|
||||
}
|
||||
|
||||
.organization-logos-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-09);
|
||||
}
|
||||
|
||||
.organization-logo {
|
||||
object-fit: contain;
|
||||
max-height: 62px;
|
||||
|
||||
&.samsung-logo {
|
||||
max-height: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
max-height: 40px;
|
||||
flex-basis: 34%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-description {
|
||||
@include heading-sm;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#home-features-arrow-green {
|
||||
position: absolute;
|
||||
left: 154px;
|
||||
top: -98px;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
height: 100px;
|
||||
left: 120px;
|
||||
top: -60px;
|
||||
}
|
||||
}
|
||||
|
||||
#home-rocket-yellow {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 0;
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
height: 100px;
|
||||
right: 30px;
|
||||
bottom: -84px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
height: 70px;
|
||||
right: 0;
|
||||
bottom: unset;
|
||||
top: -59px;
|
||||
}
|
||||
}
|
||||
|
||||
.template-card {
|
||||
> img.img-responsive {
|
||||
width: 100%;
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
.template-card-title {
|
||||
@include heading-md;
|
||||
|
||||
margin-top: var(--spacing-06);
|
||||
margin-bottom: var(--spacing-04);
|
||||
|
||||
i.material-symbols {
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-bottom: var(--spacing-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plans-card {
|
||||
min-height: 348px;
|
||||
height: 100%;
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@include heading-sm;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.plans-card-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-05);
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-story-card-title {
|
||||
@include heading-md;
|
||||
|
||||
margin-top: var(--spacing-08);
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.login-register-or-text-container {
|
||||
padding: var(--spacing-08) 0 var(--spacing-05) 0;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
font-size: var(--font-size-02);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background-color: var(--neutral-20);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(var(--spacing-08) + var(--spacing-08) / 4);
|
||||
}
|
||||
|
||||
.login-register-or-text {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
padding: 0 var(--spacing-05);
|
||||
}
|
||||
}
|
||||
|
||||
.login-register-error-container {
|
||||
padding-bottom: var(--spacing-05);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-group-password {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
|
||||
.form-group-password-input {
|
||||
input.form-control {
|
||||
padding-right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.visibility-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 35px; // TODO: Should this be calculated ?
|
||||
height: 35px; // TODO: Should this be calculated ?
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: unset;
|
||||
background-color: unset;
|
||||
|
||||
#visibility-icon-off {
|
||||
margin-top: 2px; // workaround for the icon not having the same center as the non-slashed one
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.login-container {
|
||||
max-width: 320px;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--spacing-11);
|
||||
text-align: center;
|
||||
padding-bottom: 125px; // to prevent cookie banner from covering the bottom text of the page on mobile
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
|
||||
@include heading-sm;
|
||||
}
|
||||
|
||||
form {
|
||||
padding-top: var(--spacing-08);
|
||||
|
||||
input {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-other-link {
|
||||
padding: var(--spacing-08) 0;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-text {
|
||||
padding-bottom: var(--spacing-08);
|
||||
margin-bottom: 0;
|
||||
|
||||
@include body-sm;
|
||||
}
|
||||
|
||||
.recaptcha-branding {
|
||||
@include body-xs;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
#onboarding-confirm-email {
|
||||
.confirm-email-form .confirm-email-form-inner {
|
||||
margin: auto;
|
||||
max-width: 480px;
|
||||
|
||||
.notification {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
display: flex;
|
||||
gap: var(--spacing-03);
|
||||
padding: var(--spacing-02);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: var(--spacing-07);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
.onboarding-data-collection-wrapper {
|
||||
max-width: 730px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.d-block,
|
||||
.select-wrapper {
|
||||
label {
|
||||
font-size: 14px; // override DownshiftInput and Select component label size
|
||||
}
|
||||
|
||||
.select-items {
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.select-trigger {
|
||||
border: 1px solid var(--neutral-60);
|
||||
color: var(--neutral-60);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
margin-bottom: var(--spacing-06);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 130px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-08);
|
||||
|
||||
.group-horizontal {
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
gap: var(--spacing-08);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-data-collection-form {
|
||||
background: var(--bg-light-primary);
|
||||
padding: var(--spacing-08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-08);
|
||||
}
|
||||
|
||||
.onboarding-question-title {
|
||||
font-size: 20px;
|
||||
border-bottom: none;
|
||||
margin-bottom: var(--spacing-08);
|
||||
}
|
||||
|
||||
.onboarding-step-2 {
|
||||
.form-check {
|
||||
margin: 0;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-04);
|
||||
|
||||
input {
|
||||
margin-right: var(--spacing-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-collapse-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: var(--blue-50);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.onboarding-collapse-button,
|
||||
.onboarding-privacy-extended {
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 0 var(--spacing-08);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-data-collection-form-margin {
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.compromised-password-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-05);
|
||||
}
|
||||
1254
services/web/frontend/stylesheets/bootstrap-5/pages/plans.scss
Normal file
1254
services/web/frontend/stylesheets/bootstrap-5/pages/plans.scss
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,150 @@
|
||||
.project-list-react {
|
||||
--project-list-content-height: #{$fat-footer-content-height};
|
||||
|
||||
#project-list-root > &.content {
|
||||
padding-top: $header-height;
|
||||
padding-bottom: 0;
|
||||
min-height: var(--project-list-content-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.thin-footer & {
|
||||
--project-list-content-height: #{$thin-footer-content-height};
|
||||
}
|
||||
}
|
||||
|
||||
.project-list-wrapper {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
min-height: var(--project-list-content-height);
|
||||
}
|
||||
|
||||
.project-list-sidebar-wrapper-react {
|
||||
position: relative;
|
||||
background-color: var(--bg-dark-secondary);
|
||||
flex: 0 0 15%;
|
||||
min-height: var(--project-list-content-height);
|
||||
max-width: 320px;
|
||||
min-width: 200px;
|
||||
|
||||
.project-list-sidebar-subwrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.project-list-sidebar-react {
|
||||
flex-grow: 1;
|
||||
padding: var(--spacing-08) var(--spacing-06);
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
color: var(--neutral-40);
|
||||
|
||||
.small {
|
||||
color: var(--neutral-40);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-list-main-react {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
padding: var(--spacing-08) var(--spacing-06);
|
||||
}
|
||||
|
||||
ul.project-list-filters {
|
||||
margin: var(--spacing-05) calc(-1 * var(--spacing-06));
|
||||
|
||||
> li {
|
||||
> button {
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
color: var(--content-primary-dark);
|
||||
background-color: transparent;
|
||||
border-radius: unset;
|
||||
border: none;
|
||||
border-bottom: solid 1px transparent;
|
||||
padding: var(--spacing-03) var(--spacing-06);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--neutral-70);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li.active {
|
||||
> button {
|
||||
background-color: var(--neutral-90);
|
||||
color: var(--content-primary-dark);
|
||||
|
||||
.subdued {
|
||||
color: var(--content-primary-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li.tag {
|
||||
&.active {
|
||||
.tag-menu > button {
|
||||
color: var(--content-primary-dark);
|
||||
border-color: var(--white);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--neutral-90);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:not(.active) {
|
||||
background-color: var(--neutral-70);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
.tag-menu > a:hover {
|
||||
background-color: var(--neutral-90);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-menu {
|
||||
button.dropdown-toggle {
|
||||
border-radius: var(--border-radius-base);
|
||||
border: 1px solid var(--white);
|
||||
color: var(--content-primary-dark);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: var(--spacing-01) var(--spacing-03);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: var(--project-list-content-height);
|
||||
|
||||
.loading-screen-brand-container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.project-list-sidebar-survey-wrapper {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
position: static;
|
||||
margin-top: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
.project-ds-nav-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
color: var(--content-secondary);
|
||||
|
||||
// NOTE-AC: This code can be eliminated when we remove sidebar-navigation-ui-update
|
||||
--navbar-btn-padding-h: var(--spacing-06);
|
||||
--navbar-subdued-padding: calc(
|
||||
var(--navbar-btn-padding-v) + var(--navbar-btn-border-width)
|
||||
)
|
||||
calc(var(--navbar-btn-padding-h) + 1px);
|
||||
|
||||
.navbar-default {
|
||||
position: relative;
|
||||
|
||||
--navbar-toggler-expanded-bg: none;
|
||||
--navbar-toggler-expanded-color: var(--content-secondary);
|
||||
|
||||
.navbar-header > a {
|
||||
position: relative;
|
||||
z-index: 15;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
top: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item-projects {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.nav-item-account,
|
||||
.nav-item-help {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
--navbar-hamburger-submenu-item-hover-color: var(--content-primary);
|
||||
--navbar-hamburger-submenu-item-hover-bg: var(--bg-light-secondary);
|
||||
--navbar-subdued-hover-color: var(--content-primary);
|
||||
--navbar-link-hover-color: var(--content-primary);
|
||||
--navbar-link-hover-bg: var(--bg-light-secondary);
|
||||
--navbar-subdued-hover-bg: var(--bg-light-secondary);
|
||||
--navbar-hamburger-submenu-bg: none;
|
||||
|
||||
.nav-item-help::before {
|
||||
content: '';
|
||||
display: block;
|
||||
border-top: 1px solid var(--border-divider);
|
||||
margin: var(--spacing-07) var(--spacing-06);
|
||||
}
|
||||
|
||||
#navbar-main-collapse {
|
||||
padding: var(--spacing-09) var(--spacing-06) 0;
|
||||
|
||||
.navbar-nav {
|
||||
> li {
|
||||
> a,
|
||||
> .dropdown-toggle,
|
||||
> .nav-link {
|
||||
border-radius: var(--border-radius-medium);
|
||||
|
||||
&.show {
|
||||
background-color: var(--bg-accent-03);
|
||||
color: var(--green-60);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li > .dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.project-list-wrapper {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
overflow-y: hidden;
|
||||
|
||||
.project-list-sidebar-wrapper-react {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 15%;
|
||||
max-width: 320px;
|
||||
min-width: 200px;
|
||||
margin-top: var(--spacing-03);
|
||||
padding: var(--spacing-08) 0 0 0;
|
||||
|
||||
.new-project-dropdown {
|
||||
padding: 0 var(--spacing-08) var(--spacing-05) var(--spacing-05);
|
||||
border-bottom: solid 1px transparent;
|
||||
|
||||
&.show-shadow {
|
||||
border-bottom-color: var(--border-divider);
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
// navbar + new-project spacing + new-project button height (36px) + extra padding
|
||||
max-height: calc(
|
||||
100vh - #{$header-height} - var(--spacing-03) - var(--spacing-08) - 36px - var(
|
||||
--spacing-05
|
||||
)
|
||||
);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.project-list-sidebar-scroll {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
margin: 0 var(--spacing-02) 0 0;
|
||||
padding: var(--spacing-05) var(--spacing-07) var(--spacing-05)
|
||||
var(--spacing-05);
|
||||
}
|
||||
|
||||
.ds-nav-sidebar-lower {
|
||||
padding: var(--spacing-05) var(--spacing-08) 0 var(--spacing-05);
|
||||
border-top: solid 1px transparent;
|
||||
|
||||
&.show-shadow {
|
||||
border-top-color: var(--border-divider);
|
||||
}
|
||||
}
|
||||
|
||||
.project-list-sidebar-survey-link {
|
||||
color: var(--content-secondary) !important;
|
||||
}
|
||||
|
||||
.survey-notification {
|
||||
background-color: var(--bg-light-secondary);
|
||||
color: var(--content-secondary);
|
||||
box-shadow: none;
|
||||
border-radius: var(--border-radius-large);
|
||||
position: relative;
|
||||
|
||||
.user-notification-close {
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: none;
|
||||
position: absolute;
|
||||
top: var(--spacing-07);
|
||||
right: var(--spacing-07);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-03);
|
||||
}
|
||||
}
|
||||
|
||||
.project-list-sidebar-survey-wrapper .user-notifications {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
|
||||
ul.project-list-filters {
|
||||
margin-bottom: 0;
|
||||
|
||||
hr {
|
||||
margin: var(--spacing-05) 0;
|
||||
}
|
||||
|
||||
> li {
|
||||
> button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: var(--content-secondary);
|
||||
background: none;
|
||||
border-radius: var(--border-radius-medium);
|
||||
border: none;
|
||||
padding: var(--spacing-04) var(--spacing-05);
|
||||
}
|
||||
|
||||
&:hover button {
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
|
||||
&.active button {
|
||||
background-color: var(--bg-accent-03);
|
||||
color: var(--green-60);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> li.tag {
|
||||
button.tag-name {
|
||||
padding-right: var(--spacing-08) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-menu {
|
||||
button.dropdown-toggle {
|
||||
border-radius: var(--border-radius-full);
|
||||
border: none;
|
||||
color: var(--content-secondary);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&[aria-expanded='true'] {
|
||||
background-color: var(--neutral-20);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-ds-nav-main {
|
||||
min-height: 100%;
|
||||
padding: var(--spacing-08) var(--spacing-06);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: var(--spacing-08);
|
||||
}
|
||||
}
|
||||
|
||||
.project-dash-table {
|
||||
.btn-link {
|
||||
color: var(--content-secondary);
|
||||
height: var(--spacing-08);
|
||||
width: var(--spacing-08);
|
||||
border-radius: 100%;
|
||||
padding: var(--spacing-01) 0 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #d9d9d9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-cell-name a {
|
||||
color: var(--content-secondary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.project-ds-nav-content-and-messages {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.project-ds-nav-content {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
background-color: var(--bg-light-secondary);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
border-top-left-radius: var(--border-radius-large);
|
||||
border-left: 1px solid var(--border-divider);
|
||||
border-top: 1px solid var(--border-divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ds-nav-icon-dropdown {
|
||||
.dropdown-toggle {
|
||||
color: var(--content-secondary);
|
||||
background: none;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
|
||||
&.show {
|
||||
background-color: var(--bg-accent-03);
|
||||
color: var(--green-60);
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ds-nav-ds-name {
|
||||
margin-bottom: var(--spacing-05);
|
||||
|
||||
span {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
|
||||
@include body-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,770 @@
|
||||
.project-list-empty-col {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
.row:first-child {
|
||||
flex-grow: 1; /* fill vertical space so notifications are pushed to bottom */
|
||||
}
|
||||
|
||||
.card-body {
|
||||
// h2 + .card-thin top padding
|
||||
padding-bottom: calc(var(--line-height-03) + var(--line-height-03) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0 var(--spacing-02);
|
||||
}
|
||||
|
||||
#project-list-root .user-notifications ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.project-list-sidebar-wrapper-react {
|
||||
button {
|
||||
white-space: normal;
|
||||
word-wrap: anywhere;
|
||||
|
||||
// prevents buttons from expanding sidebar width
|
||||
}
|
||||
|
||||
.new-project-dropdown {
|
||||
width: 100%;
|
||||
|
||||
.new-project-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-project-button.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.project-list-welcome-wrapper {
|
||||
width: 100%;
|
||||
padding-bottom: var(--spacing-08);
|
||||
|
||||
.welcome-new-wrapper {
|
||||
.welcome-title {
|
||||
@include heading-xl;
|
||||
|
||||
margin-top: var(--spacing-08);
|
||||
}
|
||||
|
||||
.welcome-message-cards-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-11);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-message-card {
|
||||
border: 1px solid $bg-light-tertiary;
|
||||
border-radius: $border-radius-large;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-08) var(--spacing-06);
|
||||
margin: var(--spacing-05) 0;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: 0 var(--spacing-06);
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $bg-light-secondary;
|
||||
}
|
||||
|
||||
.welcome-message-card-img {
|
||||
max-width: 100%;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-bottom: var(--spacing-07);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-message-card-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex: 0 1 312px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.create-new-project-dropdown {
|
||||
transform: none !important;
|
||||
top: 100% !important;
|
||||
left: var(--spacing-06) !important;
|
||||
right: var(--spacing-06) !important;
|
||||
margin-top: var(--spacing-04);
|
||||
margin-left: var(--spacing-06);
|
||||
margin-right: var(--spacing-06);
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
margin-top: calc((var(--spacing-05) - var(--spacing-04)) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-message-card-link {
|
||||
&,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-list-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-05);
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.project-list-title {
|
||||
min-width: 0;
|
||||
color: $content-secondary;
|
||||
|
||||
@include heading-sm;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.project-tools {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
min-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.project-tools {
|
||||
float: left;
|
||||
margin-left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.projects-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.dropdown,
|
||||
.dropdown-toggle {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.projects-sort-dropdown {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.project-menu-item-edit-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: var(--spacing-09);
|
||||
width: initial;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.project-menu-item-tag-name {
|
||||
padding-right: var(--spacing-13);
|
||||
}
|
||||
|
||||
ul.project-list-filters {
|
||||
.subdued {
|
||||
color: var(--content-disabled);
|
||||
}
|
||||
|
||||
> li {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
> button {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.separator {
|
||||
padding: var(--spacing-03) var(--spacing-06);
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
@include body-sm;
|
||||
|
||||
padding: var(--spacing-05) var(--spacing-06);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> li.active {
|
||||
border-radius: 0;
|
||||
|
||||
> button {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-02);
|
||||
margin-bottom: var(--spacing-00);
|
||||
color: var(--content-disabled);
|
||||
text-transform: uppercase;
|
||||
padding: var(--spacing-03) var(--spacing-00);
|
||||
}
|
||||
|
||||
> li.tag {
|
||||
&.active,
|
||||
&:focus-within {
|
||||
.tag-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.untagged {
|
||||
button.tag-name {
|
||||
span.name {
|
||||
font-style: italic;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.tag-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
button.tag-name {
|
||||
position: relative;
|
||||
padding: var(--spacing-03) var(--spacing-09) var(--spacing-03)
|
||||
var(--spacing-06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-wrap: anywhere;
|
||||
|
||||
.tag-list-icon {
|
||||
vertical-align: sub;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span.name {
|
||||
padding-left: 0.5em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-menu {
|
||||
button.dropdown-toggle {
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
display: none;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -8px; // Half the element height.
|
||||
right: 4px;
|
||||
|
||||
&.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button.tag-action {
|
||||
border-radius: unset;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--neutral-70);
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
|
||||
&:hover {
|
||||
color: var(--content-primary-dark);
|
||||
background-color: var(--bg-accent-01);
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-dash-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
tr:not(:last-child) {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr.no-projects:hover {
|
||||
td {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-header-sort-btn {
|
||||
border: 0;
|
||||
text-align: left;
|
||||
color: var(--content-secondary);
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--content-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
vertical-align: bottom;
|
||||
font-size: var(--font-size-06);
|
||||
}
|
||||
}
|
||||
|
||||
.dash-cell-name {
|
||||
hyphens: auto;
|
||||
width: 50%;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.dash-cell-owner {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.dash-cell-date {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.dash-cell-actions {
|
||||
display: none;
|
||||
text-align: right;
|
||||
|
||||
.btn {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-cell-date-owner {
|
||||
font-size: $font-size-sm;
|
||||
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
.dash-cell-tag,
|
||||
.clone-project-tag {
|
||||
.badge-tag {
|
||||
margin-top: var(--spacing-06);
|
||||
margin-bottom: var(--spacing-06);
|
||||
|
||||
&:first-child {
|
||||
margin-left: initial !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.dash-cell-checkbox {
|
||||
width: 4%;
|
||||
}
|
||||
|
||||
.dash-cell-name {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.dash-cell-owner {
|
||||
width: 21%;
|
||||
}
|
||||
|
||||
.dash-cell-date {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.dash-cell-actions {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.dash-cell-checkbox {
|
||||
width: 4%;
|
||||
}
|
||||
|
||||
.dash-cell-name {
|
||||
width: 44%;
|
||||
}
|
||||
|
||||
.dash-cell-owner {
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
.dash-cell-date {
|
||||
width: 21%;
|
||||
}
|
||||
|
||||
.dash-cell-actions {
|
||||
display: table-cell;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.project-tools {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.dash-cell-checkbox {
|
||||
width: 3%;
|
||||
}
|
||||
|
||||
.dash-cell-name {
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
.dash-cell-owner {
|
||||
width: 13%;
|
||||
}
|
||||
|
||||
.dash-cell-date {
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
.dash-cell-actions {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
tbody {
|
||||
.dash-cell-actions {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.dash-cell-checkbox {
|
||||
width: 3%;
|
||||
}
|
||||
|
||||
.dash-cell-name {
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
.dash-cell-owner {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.dash-cell-date {
|
||||
width: 19%;
|
||||
}
|
||||
|
||||
.dash-cell-actions {
|
||||
width: 17%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
.dash-cell-checkbox {
|
||||
width: 2%;
|
||||
}
|
||||
|
||||
.dash-cell-name {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.dash-cell-owner {
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
.dash-cell-date {
|
||||
width: 19%;
|
||||
}
|
||||
|
||||
.dash-cell-actions {
|
||||
width: 14%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
tr {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
td {
|
||||
padding-top: var(--spacing-02);
|
||||
padding-bottom: var(--spacing-02);
|
||||
}
|
||||
|
||||
td:not(.dash-cell-actions) {
|
||||
padding-right: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-cell-name,
|
||||
.dash-cell-owner,
|
||||
.dash-cell-date,
|
||||
.dash-cell-tag,
|
||||
.dash-cell-actions {
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dash-cell-actions {
|
||||
position: absolute;
|
||||
top: var(--spacing-04);
|
||||
right: var(--spacing-04);
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.current-plan {
|
||||
a.current-plan-label {
|
||||
text-decoration: none;
|
||||
color: $content-secondary;
|
||||
}
|
||||
|
||||
.current-plan-label-icon {
|
||||
vertical-align: text-bottom;
|
||||
color: var(--bg-info-01);
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.project-list-upload-project-modal-uppy-dashboard .uppy-Root {
|
||||
.uppy-Dashboard-AddFiles-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--neutral-60);
|
||||
white-space: pre-line;
|
||||
|
||||
@include body-base;
|
||||
|
||||
button.uppy-Dashboard-browse {
|
||||
@extend .btn;
|
||||
@extend .btn-lg;
|
||||
@extend .btn-primary;
|
||||
|
||||
margin-bottom: var(--spacing-07);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.survey-notification {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--spacing-06);
|
||||
background-color: var(--bg-dark-tertiary);
|
||||
border-color: transparent;
|
||||
color: var(--neutral-20);
|
||||
box-shadow: 2px 4px 6px rgb(0 0 0 / 25%);
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
button.close {
|
||||
@extend .text-white;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.project-list-sidebar-survey-wrapper {
|
||||
.survey-notification {
|
||||
font-size: var(--font-size-02);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.survey-notification {
|
||||
font-size: unset;
|
||||
|
||||
.project-list-sidebar-survey-link {
|
||||
display: block;
|
||||
align-items: center;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
padding-top: var(--spacing-07);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-list-load-more-button {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
.clone-project-tag {
|
||||
display: flex;
|
||||
|
||||
.form-label {
|
||||
margin-top: var(--spacing-01);
|
||||
}
|
||||
}
|
||||
|
||||
form.project-search {
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-affiliation-mobile-wrapper {
|
||||
padding: var(--spacing-07) 0;
|
||||
}
|
||||
|
||||
.add-affiliation {
|
||||
.progress {
|
||||
height: var(--spacing-05);
|
||||
margin-bottom: var(--spacing-03);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-03);
|
||||
}
|
||||
|
||||
&.is-mobile p {
|
||||
@include body-xs;
|
||||
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-item {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
outline: none;
|
||||
border-radius: var(--border-radius-base);
|
||||
margin: 0 var(--spacing-06) 0 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--white),
|
||||
0 0 0 3px var(--blue-50),
|
||||
0 0 0 5px var(--blue-30);
|
||||
}
|
||||
|
||||
&.more-button {
|
||||
border: 1px solid var(--neutral-70);
|
||||
|
||||
.color-picker-more {
|
||||
color: var(--neutral-70);
|
||||
margin: 3px; // it's centered, no matching spacing variable
|
||||
font-weight: bold;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 5px; // it's centered, no matching spacing variable
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-more-open {
|
||||
color: var(--neutral-70);
|
||||
margin: 3px;
|
||||
font-weight: bold;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-item-icon {
|
||||
margin: 3px; // it's centered, no matching spacing variable
|
||||
color: var(--content-primary-dark);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin: var(--spacing-08);
|
||||
|
||||
.color-picker-item-icon {
|
||||
margin: 5px; // it's centered, no matching spacing variable
|
||||
color: var(--content-primary-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-more-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.custom-picker {
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
top: 56px;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
.register-container {
|
||||
h1 {
|
||||
@include heading-sm;
|
||||
|
||||
color: var(--neutral-90);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.register-content-container {
|
||||
padding: 0; // override bootstrap padding
|
||||
display: flex;
|
||||
background-color: #f2f4f7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.register-form-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: var(--spacing-11);
|
||||
background-color: var(--white);
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
text-align: center;
|
||||
max-width: 320px;
|
||||
padding-bottom: 120px;
|
||||
|
||||
.notification-content p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.registration-message {
|
||||
text-align: center;
|
||||
padding-bottom: var(--spacing-07);
|
||||
|
||||
.registration-message-heading {
|
||||
color: var(--neutral-70);
|
||||
font-size: var(--font-size-05);
|
||||
line-height: var(--line-height-04);
|
||||
margin-top: var(--spacing-08);
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
.registration-message-details {
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
}
|
||||
|
||||
.tos-agreement-notice {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-illustration-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.register-illustration {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
top: 100px;
|
||||
|
||||
// for wide screen
|
||||
@media (width >= 1700px) {
|
||||
position: relative;
|
||||
left: unset;
|
||||
top: unset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.register-main-image {
|
||||
max-width: 850px;
|
||||
|
||||
@media (width <= 1350px) {
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
@media (width <= 1150px) {
|
||||
max-width: 670px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-tags {
|
||||
position: absolute;
|
||||
height: 210px;
|
||||
bottom: -135px;
|
||||
right: 130px;
|
||||
|
||||
// for wide screen
|
||||
@media (width >= 1700px) {
|
||||
right: calc(50% - 300px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recaptcha-branding {
|
||||
@include body-xs;
|
||||
|
||||
text-align: left;
|
||||
padding: var(--spacing-05) 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
#confirm-secondary-email {
|
||||
.confirm-email-form .confirm-email-form-inner {
|
||||
margin: auto;
|
||||
max-width: 480px;
|
||||
|
||||
.notification {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
display: flex;
|
||||
gap: var(--spacing-03);
|
||||
padding: var(--spacing-02);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: var(--spacing-07);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.project-list-sidebar-survey-link {
|
||||
@extend .text-white;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notification-close-button-style button {
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,520 @@
|
||||
/**
|
||||
* MAIN CONTENT
|
||||
*/
|
||||
|
||||
#subscription-dashboard-root {
|
||||
.hover-highlight {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--neutral-10);
|
||||
}
|
||||
}
|
||||
|
||||
li.row-link {
|
||||
display: flex;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
.row-link-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-02) 0;
|
||||
text-decoration: none;
|
||||
color: var(--neutral-90);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a.row-link-inner {
|
||||
&:hover {
|
||||
background-color: var(--neutral-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* MODALS
|
||||
*/
|
||||
|
||||
.group-subscription-modal-title-discount {
|
||||
@include body-base;
|
||||
|
||||
margin-top: var(--spacing-02);
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
.group-subscription-modal {
|
||||
.circle {
|
||||
font-size: var(--font-size-06);
|
||||
border-radius: 50%;
|
||||
background-color: var(--green-70);
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--spacing-02);
|
||||
font-weight: bold;
|
||||
|
||||
.small {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.circle-subtext {
|
||||
font-size: var(--font-size-03);
|
||||
}
|
||||
}
|
||||
|
||||
.legend-as-label {
|
||||
font-size: var(--font-size-02);
|
||||
font-weight: 600;
|
||||
color: var(--content-secondary);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.educational-discount-badge {
|
||||
height: 50px;
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
padding-left: var(--spacing-02);
|
||||
padding-right: var(--spacing-02);
|
||||
}
|
||||
|
||||
.applied {
|
||||
background-color: rgba($green-70, 0.1);
|
||||
color: var(--green-70);
|
||||
}
|
||||
|
||||
.ineligible {
|
||||
background-color: var(--neutral-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#change-plan {
|
||||
table {
|
||||
@include media-breakpoint-up(lg) {
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
width: 1%; // will expand to fit the content
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: block;
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tbody,
|
||||
td,
|
||||
tr {
|
||||
display: inline-block;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
padding-top: var(--spacing-07);
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
padding-top: var(--spacing-03);
|
||||
padding-bottom: var(--spacing-07);
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-container {
|
||||
padding-top: var(--spacing-08);
|
||||
display: flex;
|
||||
gap: var(--spacing-10);
|
||||
justify-content: center;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.payment-review-panel {
|
||||
width: 339px;
|
||||
height: 100%;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--neutral-70);
|
||||
font-weight: 600;
|
||||
|
||||
@include heading-sm;
|
||||
}
|
||||
|
||||
.price-feature-description {
|
||||
color: var(--neutral-70);
|
||||
font-weight: 400;
|
||||
|
||||
@include body-base;
|
||||
|
||||
h4 {
|
||||
margin-bottom: var(--spacing-06);
|
||||
|
||||
&:has(+ .payment-nudge-annual-button) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.features-list {
|
||||
margin-top: var(--spacing-08);
|
||||
}
|
||||
|
||||
.price-summary {
|
||||
.price-summary-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.price-summary-line-width {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
.price-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.price-summary-total-line {
|
||||
margin-top: var(--spacing-06);
|
||||
|
||||
.price-summary-due {
|
||||
color: var(--green-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-cancel-anytime {
|
||||
@include body-xs;
|
||||
}
|
||||
|
||||
.trial-coupon-summary {
|
||||
padding-top: var(--spacing-08);
|
||||
|
||||
.trial-coupon-summary-list-container {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
color: var(--neutral-90);
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: var(--spacing-04);
|
||||
gap: var(--spacing-05);
|
||||
|
||||
@include body-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-checkout {
|
||||
padding: var(--spacing-08);
|
||||
width: 408px;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.address-line-1-tooltip {
|
||||
font-size: var(--font-size-03);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include heading-md;
|
||||
|
||||
margin-bottom: var(--spacing-08);
|
||||
}
|
||||
|
||||
.student-disclaimer {
|
||||
@include body-sm;
|
||||
}
|
||||
|
||||
.paypal-disclaimer {
|
||||
@include body-sm;
|
||||
|
||||
margin: var(--spacing-05) 0 0 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
&:not(.payment-method-toggle) {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
&.address-1 {
|
||||
margin-bottom: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
.form-check {
|
||||
margin-bottom: 0; // override bootstrap5 default margin-bottom of 0.125rem
|
||||
}
|
||||
|
||||
.checkout-form-submit {
|
||||
margin-top: var(--spacing-08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-04);
|
||||
margin-bottom: var(--spacing-06);
|
||||
|
||||
h2,
|
||||
.heading {
|
||||
@include heading-lg;
|
||||
|
||||
margin: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
--bs-btn-bg: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.change-currency {
|
||||
margin-top: var(--spacing-02);
|
||||
|
||||
.dropdown-item:not(:first-child) {
|
||||
margin-top: var(--spacing-02);
|
||||
}
|
||||
}
|
||||
|
||||
.change-currency-toggle {
|
||||
padding-left: 0;
|
||||
padding-bottom: 0;
|
||||
text-decoration: underline;
|
||||
color: var(--content-secondary);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
// !important is unfortunately necessary to override btn:first-child:active
|
||||
color: var(--content-secondary) !important;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Hide the dropdown caret, BS5 react-bootstrap does not have a prop for this
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include body-xs;
|
||||
}
|
||||
|
||||
.change-currency-dropdown-selected-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: var(--bs-dropdown-item-padding-y);
|
||||
}
|
||||
|
||||
.payment-method-toggle {
|
||||
.form-check {
|
||||
&:first-of-type {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0; // override .website-redesign default
|
||||
}
|
||||
}
|
||||
|
||||
.payment-method-logos {
|
||||
display: inline-block;
|
||||
margin-left: var(--spacing-05);
|
||||
|
||||
img:not(:last-child) {
|
||||
margin-right: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address2-button {
|
||||
text-decoration: none;
|
||||
margin-bottom: var(--spacing-05);
|
||||
padding: 0;
|
||||
|
||||
:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.button-content {
|
||||
justify-content: flex-start;
|
||||
color: var(--link-web);
|
||||
}
|
||||
}
|
||||
|
||||
.three-d-secure-container {
|
||||
> .three-d-secure-recurly-container {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-subscription-upgrade-features {
|
||||
.material-symbols {
|
||||
@include body-sm;
|
||||
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.per-user-price {
|
||||
@include heading-lg;
|
||||
|
||||
color: var(--content-primary);
|
||||
}
|
||||
|
||||
.per-user-price-text {
|
||||
@include body-xs;
|
||||
}
|
||||
|
||||
.feature-list-item {
|
||||
@include body-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.group-subscription-upgrade-card {
|
||||
.title {
|
||||
@include body-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-warning-heading {
|
||||
@include body-base;
|
||||
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.not-student-switch {
|
||||
font-size: var(--font-size-02);
|
||||
margin-left: var(--spacing-08);
|
||||
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0 0 0 var(--spacing-03);
|
||||
padding: 0;
|
||||
color: var(--link-web);
|
||||
font-size: var(--font-size-02);
|
||||
vertical-align: inherit;
|
||||
|
||||
.button-content {
|
||||
color: var(--link-web);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-nudge-annual-button {
|
||||
margin: var(--spacing-02) 0 var(--spacing-06) 0;
|
||||
|
||||
@include body-sm;
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-on-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-05);
|
||||
gap: var(--spacing-05);
|
||||
border: 1px solid var(--border-divider);
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
.add-on-card-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.add-on-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@include body-base;
|
||||
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--content-secondary);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: var(--content-primary);
|
||||
}
|
||||
|
||||
.add-on-options-toggle {
|
||||
padding: var(--spacing-04);
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-summary-card {
|
||||
@extend .card-gray;
|
||||
|
||||
border-radius: var(--border-radius-large);
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-08);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,448 @@
|
||||
.gallery.gallery-tagged {
|
||||
.gallery-title {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gallery-summary {
|
||||
text-align: left;
|
||||
max-width: 828px;
|
||||
}
|
||||
|
||||
.gallery-filters {
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery {
|
||||
padding-top: calc($header-height + var(--spacing-10)) !important;
|
||||
|
||||
.gallery-tagged-tags-container-spacing {
|
||||
padding: 0 var(--spacing-09);
|
||||
margin-bottom: var(--spacing-16);
|
||||
|
||||
h2 {
|
||||
margin-bottom: var(--spacing-09);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-filters {
|
||||
float: right;
|
||||
margin-bottom: var(--spacing-11);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-04);
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
float: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:visited {
|
||||
color: var(--green-50);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--green-60);
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-header {
|
||||
margin-bottom: var(--spacing-09);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
max-width: $templates-search-max-width;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-06);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery-summary {
|
||||
@include body-lg;
|
||||
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tagged-header-container {
|
||||
margin-bottom: var(--spacing-16);
|
||||
}
|
||||
|
||||
.top-picks-banner {
|
||||
padding: 0;
|
||||
margin: 0 auto var(--spacing-16) auto;
|
||||
|
||||
h2 {
|
||||
@include heading-xl;
|
||||
}
|
||||
|
||||
.doc-rows-container {
|
||||
margin-top: var(--spacing-09);
|
||||
}
|
||||
}
|
||||
|
||||
.recent-templates-container {
|
||||
padding: 0 var(--spacing-09);
|
||||
margin-bottom: var(--spacing-16);
|
||||
|
||||
h2 {
|
||||
margin-bottom: var(--spacing-09);
|
||||
|
||||
@include heading-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.no-articles-matching {
|
||||
color: var(--neutral-90);
|
||||
font-weight: 600;
|
||||
|
||||
@include heading-lg;
|
||||
}
|
||||
|
||||
.template-summary {
|
||||
margin-top: var(--spacing-02);
|
||||
margin-bottom: var(--spacing-09);
|
||||
|
||||
@include body-lg;
|
||||
}
|
||||
|
||||
@mixin line-clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popular-tags-list,
|
||||
.gallery-container {
|
||||
--bs-gutter-x: var(--spacing-09);
|
||||
|
||||
row-gap: var(--spacing-11);
|
||||
}
|
||||
|
||||
.gallery-container {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.gallery-thumbnail {
|
||||
a {
|
||||
@extend .link-black-text;
|
||||
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.thumbnail,
|
||||
.thumbnail-tag {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: var(--neutral-90);
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-tag {
|
||||
&::before {
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
&::before {
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.thumbnail,
|
||||
.thumbnail-tag {
|
||||
&::before {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
opacity: 0.08;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.thumbnail-tag {
|
||||
margin: 0 0 var(--spacing-08) 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
img {
|
||||
@include shadow-lg;
|
||||
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
|
||||
.caption {
|
||||
// Override Server Pro template styles
|
||||
background: none;
|
||||
border: none;
|
||||
margin-top: var(--spacing-04);
|
||||
}
|
||||
|
||||
.caption-description {
|
||||
color: var(--neutral-70);
|
||||
margin-bottom: 0;
|
||||
|
||||
@include line-clamp;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
margin-top: var(--spacing-04);
|
||||
color: var(--neutral-70);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gallery-list-item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-04);
|
||||
|
||||
.badge-container {
|
||||
display: inline-block;
|
||||
text-wrap: nowrap;
|
||||
|
||||
.badge:not(:first-child) {
|
||||
margin-left: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
flex-basis: content;
|
||||
cursor: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.caption-title {
|
||||
color: var(--neutral-90);
|
||||
font-weight: 600;
|
||||
|
||||
@include heading-md;
|
||||
@include line-clamp;
|
||||
}
|
||||
}
|
||||
|
||||
.related-tags-top-spacing {
|
||||
margin-top: var(--spacing-16);
|
||||
}
|
||||
|
||||
.gallery-tagged-template-tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-05);
|
||||
|
||||
.badge-content {
|
||||
padding-left: var(--spacing-02);
|
||||
padding-right: var(--spacing-02);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: var(--spacing-13);
|
||||
}
|
||||
|
||||
.popular-tags {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-16);
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.popular-tags,
|
||||
.recent-docs,
|
||||
.featured-docs {
|
||||
h2 {
|
||||
margin-bottom: var(--spacing-09);
|
||||
}
|
||||
}
|
||||
|
||||
.recent-docs + .featured-docs {
|
||||
margin-top: var(--spacing-16);
|
||||
}
|
||||
|
||||
.gallery-item-title {
|
||||
* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: inline;
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
h1:has(+ .gallery-item-title-badge-container) {
|
||||
margin-right: var(--spacing-06);
|
||||
}
|
||||
|
||||
.gallery-item-title-badge-container {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--spacing-04);
|
||||
|
||||
.badge-content {
|
||||
font-size: var(--font-size-02);
|
||||
line-height: var(--line-height-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.template-details-container {
|
||||
@include heading-xs;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
gap: var(--spacing-04) var(--spacing-11);
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.template-detail {
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-bottom: var(--spacing-06);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.tags > div {
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-abstract {
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
|
||||
a {
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-links-container {
|
||||
margin-top: var(--spacing-09);
|
||||
margin-bottom: var(--spacing-09);
|
||||
|
||||
.cta-links {
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-06);
|
||||
|
||||
.btn {
|
||||
margin: 0; // gap will handle spacing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-large-pdf-preview {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include shadow-md;
|
||||
}
|
||||
|
||||
.related-tags-header {
|
||||
margin-top: var(--spacing-16);
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.related-tags {
|
||||
margin-top: var(--spacing-09);
|
||||
max-height: 62px;
|
||||
overflow: hidden;
|
||||
|
||||
&.all-tags {
|
||||
max-height: none;
|
||||
|
||||
// min-height prevents elements below the tags from moving upwards
|
||||
// when Show More is clicked
|
||||
min-height: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
.show-more-tags {
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.template-item-left-section {
|
||||
padding-right: var(--spacing-10);
|
||||
}
|
||||
|
||||
.template-item-right-section {
|
||||
padding-left: var(--spacing-10);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.template-item-left-section {
|
||||
.badge-link-list {
|
||||
margin-top: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
.template-item-right-section {
|
||||
margin-top: var(--spacing-11);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,370 @@
|
||||
// TODO: .website-redesign to be removed once fully rolled out
|
||||
|
||||
@mixin reset-font-size($size) {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
@if $size == 'heading-2xl' {
|
||||
@include heading-2xl;
|
||||
} @else if $size == 'heading-xl' {
|
||||
@include heading-xl;
|
||||
} @else if $size == 'heading-lg' {
|
||||
@include heading-lg;
|
||||
} @else if $size == 'heading-md' {
|
||||
@include heading-md;
|
||||
} @else if $size == 'heading-sm' {
|
||||
@include heading-sm;
|
||||
} @else if $size == 'heading-xs' {
|
||||
@include heading-xs;
|
||||
} @else if $size == 'base' {
|
||||
@include body-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.website-redesign {
|
||||
&:not(.application-page) {
|
||||
--link-color: var(--link-web);
|
||||
--link-hover-color: var(--link-web-hover);
|
||||
--link-visited-color: var(--link-web-visited);
|
||||
--link-hover-text-decoration: underline;
|
||||
|
||||
.notification {
|
||||
--link-color: var(--link-ui);
|
||||
--link-hover-color: var(--link-ui-hover);
|
||||
--link-visited-color: var(--link-ui-visited);
|
||||
}
|
||||
}
|
||||
|
||||
// hero section of features, enterprises, and universities will have an image that will overflow the page
|
||||
|
||||
--bs-body-color: var(--neutral-70);
|
||||
|
||||
overflow-x: hidden;
|
||||
|
||||
a {
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include box-shadow-button-input;
|
||||
}
|
||||
|
||||
i {
|
||||
vertical-align: middle;
|
||||
margin-left: var(--spacing-02);
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
&.link-lg {
|
||||
font-size: var(--font-size-04);
|
||||
line-height: var(--line-height-03);
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.link-xl {
|
||||
font-size: var(--font-size-06);
|
||||
line-height: var(--line-height-05);
|
||||
|
||||
i {
|
||||
font-size: var(--font-size-06);
|
||||
line-height: var(--font-size-06);
|
||||
}
|
||||
}
|
||||
|
||||
// Specific overrides for link styles
|
||||
&.link-monospace {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
@include heading-2xl;
|
||||
}
|
||||
|
||||
.font-size-h1 {
|
||||
@include reset-font-size('heading-2xl');
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
@include heading-xl;
|
||||
}
|
||||
|
||||
.font-size-h2 {
|
||||
@include reset-font-size('heading-xl');
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
@include heading-lg;
|
||||
}
|
||||
|
||||
.font-size-h3 {
|
||||
@include reset-font-size('heading-lg');
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
@include heading-md;
|
||||
}
|
||||
|
||||
.font-size-h4 {
|
||||
@include reset-font-size('heading-md');
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5 {
|
||||
@include heading-sm;
|
||||
}
|
||||
|
||||
.font-size-h5 {
|
||||
@include reset-font-size('heading-sm');
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6 {
|
||||
@include heading-xs;
|
||||
}
|
||||
|
||||
.font-size-h6 {
|
||||
@include reset-font-size('heading-xs');
|
||||
}
|
||||
|
||||
.font-size-base {
|
||||
@include reset-font-size('base');
|
||||
}
|
||||
|
||||
// smaller fonts for mobile
|
||||
@include media-breakpoint-down(lg) {
|
||||
h1,
|
||||
.h1 {
|
||||
@include heading-xl;
|
||||
}
|
||||
|
||||
.font-size-h1 {
|
||||
@include reset-font-size('heading-xl');
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
@include heading-lg;
|
||||
}
|
||||
|
||||
.font-size-h2 {
|
||||
@include reset-font-size('heading-lg');
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
@include heading-md;
|
||||
}
|
||||
|
||||
.font-size-h3 {
|
||||
@include reset-font-size('heading-md');
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
@include heading-sm;
|
||||
}
|
||||
|
||||
.font-size-h4 {
|
||||
@include reset-font-size('heading-sm');
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5 {
|
||||
@include heading-xs;
|
||||
}
|
||||
|
||||
.font-size-h5 {
|
||||
@include reset-font-size('heading-xs');
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6 {
|
||||
@include body-base;
|
||||
}
|
||||
|
||||
.font-size-h6 {
|
||||
@include reset-font-size('base');
|
||||
}
|
||||
}
|
||||
|
||||
.font-size-display-xs {
|
||||
@include display-xs;
|
||||
}
|
||||
|
||||
.text-purple-bright {
|
||||
color: var(--purple-bright);
|
||||
}
|
||||
|
||||
.text-green-bright {
|
||||
color: var(--green-bright);
|
||||
}
|
||||
|
||||
.card {
|
||||
--bs-card-bg: var(--neutral-10);
|
||||
--bs-card-border-radius: var(--border-radius-large);
|
||||
|
||||
&.page-content-card {
|
||||
--bs-card-bg: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-premium {
|
||||
--badge-font-weight: 600;
|
||||
}
|
||||
|
||||
.content-alt {
|
||||
background-color: var(--bg-light-primary);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.round-background {
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.green-round-background {
|
||||
@extend .round-background;
|
||||
|
||||
background: var(--green-30);
|
||||
}
|
||||
|
||||
.features-card {
|
||||
display: flex; /* equal heights */
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
.features-card-media,
|
||||
.features-card-media-right {
|
||||
padding-top: var(--spacing-08);
|
||||
position: relative;
|
||||
|
||||
img.img-responsive {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
video {
|
||||
box-shadow:
|
||||
0 4px 6px 0 rgb(30 37 48 / 12%),
|
||||
0 8px 16px 0 rgb(30 37 48 / 12%);
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-bottom: var(--spacing-11);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.features-card-media-right {
|
||||
padding-left: var(--spacing-13);
|
||||
}
|
||||
|
||||
.features-card-media {
|
||||
padding-right: var(--spacing-13);
|
||||
}
|
||||
}
|
||||
|
||||
.features-card-description,
|
||||
.features-card-description-list {
|
||||
padding-top: var(--spacing-06);
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-06);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.333;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: 1rem;
|
||||
line-height: 1.375;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features-card-description {
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.4;
|
||||
margin-bottom: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
.features-card-description-list {
|
||||
h3 {
|
||||
font-size: 1.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
ul.list-simple-text,
|
||||
ul.list-heading-text {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: var(--spacing-05);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.333;
|
||||
display: flex;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: 1rem;
|
||||
line-height: 1.375;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.list-heading-text {
|
||||
li {
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-04);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user