Overleaf/services/web/frontend/stylesheets/components/notifications.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;
}