mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-05-23 17:19:37 +02:00
356 lines
8.6 KiB
SCSS
356 lines
8.6 KiB
SCSS
@mixin light-notification {
|
|
--notification-bg-info: var(--bg-info-03);
|
|
--notification-bg-success: var(--bg-accent-03);
|
|
--notification-bg-warning: var(--bg-warning-03);
|
|
--notification-bg-error: var(--bg-danger-03);
|
|
--notification-bg-offer: var(--bg-light-primary);
|
|
--notification-border-info: var(--blue-20);
|
|
--notification-border-success: var(--green-20);
|
|
--notification-border-warning: var(--yellow-20);
|
|
--notification-border-error: var(--red-20);
|
|
--notification-border-offer: var(--neutral-20);
|
|
--notification-icon-info: var(--blue-50);
|
|
--notification-icon-success: var(--green-50);
|
|
--notification-icon-warning: var(--yellow-40);
|
|
--notification-icon-error: var(--red-50);
|
|
--notification-icon-offer: var(--neutral-50);
|
|
--notification-content-primary: var(--content-primary);
|
|
--notification-content-secondary: var(--content-secondary);
|
|
--notification-bg-primary: var(--neutral-90);
|
|
--notification-reconfirmation-bg: var(--bg-light-secondary);
|
|
--notification-disclaimer-color: var(--neutral-60);
|
|
--notification-close-btn-bg: rgb(27 34 44 / 8%);
|
|
}
|
|
|
|
@mixin dark-notification {
|
|
--notification-bg-info: var(--blue-70);
|
|
--notification-bg-success: var(--green-70);
|
|
--notification-bg-warning: var(--yellow-70);
|
|
--notification-bg-error: var(--red-70);
|
|
--notification-bg-offer: var(--neutral-70);
|
|
--notification-border-info: var(--blue-60);
|
|
--notification-border-success: var(--green-60);
|
|
--notification-border-warning: var(--yellow-60);
|
|
--notification-border-error: var(--red-60);
|
|
--notification-border-offer: var(--neutral-60);
|
|
--notification-icon-info: var(--blue-30);
|
|
--notification-icon-success: var(--green-30);
|
|
--notification-icon-warning: var(--yellow-20);
|
|
--notification-icon-error: var(--red-20);
|
|
--notification-icon-offer: var(--neutral-20);
|
|
--notification-content-primary: var(--content-primary-dark);
|
|
--notification-content-secondary: var(--content-secondary-dark);
|
|
--notification-bg-primary: var(--neutral-10);
|
|
--notification-reconfirmation-bg: var(--bg-dark-secondary);
|
|
--notification-disclaimer-color: var(--neutral-40);
|
|
--notification-close-btn-bg: rgb(255 255 255 / 8%);
|
|
}
|
|
|
|
:root {
|
|
--notification-ai-paywall-background: var(--bg-info-03);
|
|
--notification-ai-paywall-color: var(--content-primary);
|
|
--notification-ai-paywall-border-color: var(--blue-60);
|
|
|
|
@include light-notification;
|
|
|
|
// Until we roll out dark mode notifications, make sure we show buttons in
|
|
// light mode even when the rest of the page is in dark mode
|
|
.ide-redesign-main .notification .btn {
|
|
@include light-buttons;
|
|
}
|
|
|
|
@include theme('default') {
|
|
--notification-ai-paywall-background: var(--bg-dark-secondary);
|
|
--notification-ai-paywall-color: var(--content-primary-dark);
|
|
--notification-ai-paywall-border-color: var(--blue-30);
|
|
|
|
.project-ds-nav-page {
|
|
.notification {
|
|
@include dark-notification;
|
|
@include dark-bg;
|
|
|
|
.btn {
|
|
@include dark-buttons;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification-body {
|
|
// will be deprecated once notifications moved to use .notification (see below)
|
|
flex-grow: 1;
|
|
width: 90%;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.notification-action {
|
|
$line-height-computed: $font-size-base * $line-height-base; // 24px
|
|
|
|
// will be deprecated once notifications moved to use .notification (see below)
|
|
margin-top: calc($line-height-computed / 2); // match paragraph padding
|
|
order: 1;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
margin-top: 0;
|
|
order: 0;
|
|
padding-left: $spacing-05;
|
|
}
|
|
}
|
|
|
|
.notification-close {
|
|
// will be deprecated once notifications moved to use .notification (see below)
|
|
padding-left: $spacing-05;
|
|
text-align: right;
|
|
width: 10%;
|
|
|
|
button {
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
float: right;
|
|
padding: 5.5px;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 0;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--notification-close-btn-bg);
|
|
color: var(--notification-content-secondary);
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.notification {
|
|
border-radius: $border-radius-base;
|
|
color: var(--notification-content-primary);
|
|
display: flex;
|
|
padding: 0 $spacing-06; // vertical padding added by elements within notification
|
|
width: 100%;
|
|
|
|
a:not(.btn) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: $spacing-02;
|
|
}
|
|
|
|
.notification-icon {
|
|
flex-grow: 0;
|
|
padding: 18px $spacing-06 0 0;
|
|
}
|
|
|
|
.notification-icon.notification-icon-center {
|
|
padding-top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.notification-content-and-cta {
|
|
// shared container to align cta with text on smaller screens
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-wrap: wrap;
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.notification-content {
|
|
flex-grow: 1;
|
|
padding: $spacing-06 0;
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
&.text-center .notification-content {
|
|
text-align: center;
|
|
}
|
|
|
|
.notification-cta {
|
|
padding-bottom: $spacing-06;
|
|
|
|
a {
|
|
font-weight: 700;
|
|
}
|
|
|
|
a,
|
|
button {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.notification-disclaimer {
|
|
color: var(--notification-disclaimer-color);
|
|
font-size: $font-size-sm;
|
|
padding-bottom: $spacing-06;
|
|
}
|
|
|
|
.notification-close-btn {
|
|
height: $spacing-12;
|
|
align-items: center;
|
|
display: flex;
|
|
padding: 0 0 0 $spacing-06;
|
|
|
|
button {
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
float: right;
|
|
padding: 5.5px;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--notification-content-primary);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--notification-close-btn-bg);
|
|
color: var(--notification-content-secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.notification-type-info {
|
|
background-color: var(--notification-bg-info);
|
|
border: 1px solid var(--notification-border-info);
|
|
|
|
.notification-icon {
|
|
color: var(--notification-icon-info);
|
|
}
|
|
}
|
|
|
|
&.notification-type-success {
|
|
background-color: var(--notification-bg-success);
|
|
border: 1px solid var(--notification-border-success);
|
|
|
|
.notification-icon {
|
|
color: var(--notification-icon-success);
|
|
}
|
|
}
|
|
|
|
&.notification-type-warning {
|
|
background-color: var(--notification-bg-warning);
|
|
border: 1px solid var(--notification-border-warning);
|
|
|
|
.notification-icon {
|
|
color: var(--notification-icon-warning);
|
|
}
|
|
}
|
|
|
|
&.notification-type-error {
|
|
background-color: var(--notification-bg-error);
|
|
border: 1px solid var(--notification-border-error);
|
|
|
|
.notification-icon {
|
|
color: var(--notification-icon-error);
|
|
}
|
|
}
|
|
|
|
&.notification-type-offer {
|
|
background-color: var(--notification-bg-offer);
|
|
border: 1px solid var(--notification-border-offer);
|
|
|
|
.notification-icon {
|
|
color: var(--notification-icon-offer);
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
&:not(.notification-cta-below-content) {
|
|
.notification-content-and-cta {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.notification-content {
|
|
width: auto;
|
|
}
|
|
|
|
.notification-cta {
|
|
height: $spacing-12;
|
|
padding-left: $spacing-06;
|
|
padding-bottom: 0;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification-with-scroll-margin {
|
|
scroll-margin: $spacing-06;
|
|
}
|
|
|
|
.notification-list {
|
|
.notification {
|
|
margin-bottom: $spacing-07;
|
|
}
|
|
}
|
|
|
|
// Reconfirmation notification
|
|
|
|
.reconfirm-notification {
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
.btn-reconfirm {
|
|
float: right;
|
|
margin-left: $spacing-05;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
.group-invitation-cancel-subscription-notification-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
// Settings page
|
|
.affiliations-table {
|
|
.reconfirm-notification {
|
|
margin: 0 auto $spacing-05 !important;
|
|
padding: $spacing-07;
|
|
}
|
|
|
|
.reconfirm-row {
|
|
td {
|
|
border: 0;
|
|
|
|
.alert {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:not(.alert) {
|
|
.reconfirm-notification {
|
|
background-color: var(--notification-reconfirmation-bg);
|
|
border-radius: $border-radius-base;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Only apply bottom margin to form messages when it is non-empty
|
|
.form-messages-bottom-margin > :last-child {
|
|
margin-bottom: var(--spacing-06);
|
|
}
|
|
|
|
.ai-paywall-notification {
|
|
// Override notification styles. !important is needed so that it binds
|
|
// stronger than the notification variant styles.
|
|
border: 2px solid var(--notification-ai-paywall-border-color) !important;
|
|
background-color: var(--notification-ai-paywall-background) !important;
|
|
color: var(--notification-ai-paywall-color) !important;
|
|
}
|