messages.pcss.css

/**
 * Messages.
 *
 * @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
 *   has been resolved.
 */

.messages-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.field .messages-list,
.form-wrapper .messages-list {
  margin-block-end: 0;
}

.messages {
  --messages-bg-color: #353641;
  --messages-fg-color: var(--color-white);
  --messages-icon: none;

  position: relative;
  overflow: auto; /* Required to prevent text clipping. */
  box-sizing: border-box;
  padding: var(--gin-spacing-m);
  opacity: 1;
  color: var(--messages-fg-color);
  border: 2px solid transparent;
  border-radius: var(--gin-border-l);
  background-color: var(--messages-bg-color);
  margin-block: 0 var(--space-m);

  a {
    &,
    &:hover,
    &:active {
      color: #fff;
    }
  }

  pre {
    margin: 0;
  }

  .gin--dark-mode & {
    box-shadow: 0 6px 16px var(--gin-border-color-layer);
  }

  /* If Layout Builder form is active, remove background images. */
  .layout-builder__message--defaults &,
  .layout-builder__message--overrides & {
    background-image: none;
  }

  .button--dismiss {
    position: absolute;
    width: 29px;
    height: 29px;
    margin: var(--gin-spacing-s);
    padding: 0;
    text-indent: -99999px;
    color: transparent;
    border-color: transparent;
    border-radius: var(--gin-border-m);
    box-shadow: none;
    inset-block-start: 0;
    inset-inline-end: 0;

    &:focus {
      background-color: transparent;
    }

    &:hover:not(:focus) {
      color: transparent;
      border-color: #fff;
      background-color: transparent;
    }

    .icon-close {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #fff;
      inset-block-start: 0;
      inset-inline-start: 0;
      mask-image: var(--admin-icon-close);
      mask-size: 16px 16px;
      mask-repeat: no-repeat;
      mask-position: center;

      @media (forced-colors: active) {
        background-color: buttonBorder;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--gin-transition);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: opacity var(--gin-transition-fast);
  }
}

.messages--error {
  --messages-bg-color: var(--gin-bg-danger);
  --messages-fg-color: var(--gin-color-danger-light);
  --messages-icon: var(--admin-icon-error);
}

.messages--status {
  --messages-bg-color: var(--gin-bg-green);
  --messages-fg-color: var(--gin-color-green-light);
  --messages-icon: var(--admin-icon-status);
}

.messages--warning {
  --messages-bg-color: var(--gin-bg-warning);
  --messages-fg-color: var(--gin-color-warning-light);
  --messages-icon: var(--admin-icon-warning);
}

.messages--info {
  --messages-bg-color: var(--gin-bg-info);
  --messages-fg-color: var(--gin-color-info-light);
  --messages-icon: var(--admin-icon-info);
}

.messages__title {
  margin-block: 0;
  margin-inline: 2.125rem 0;
  font-size: var(--font-size-base);
  font-weight: var(--gin-font-weight-bold);
}

.messages__header {
  position: relative;
  display: flex;
  align-items: center;
  margin-block-end: var(--gin-spacing-xs);
  margin-inline-end: 1.5em;

  &::before {
    position: absolute;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    content: "";
    inset-block-start: 2px;
    inset-inline-start: 0;
    mask-image: var(--messages-icon);
    mask-repeat: no-repeat;
    mask-position: center left;
    background-color: var(--messages-fg-color);

    &:dir(rtl) {
      mask-position: center right;
    }

    /* If no icon, then remove the pseudo-element. */
    @container style(--messages-icon: none) {
      content: none;
    }

    @media (forced-colors: active) {
      background-color: linktext;
    }
  }
}

.messages__content {
  margin-inline-start: 2.125rem;
}

.messages__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.messages__item + .messages__item {
  margin-block-start: var(--space-s);
}

File

core/themes/default_admin/css/components/messages.pcss.css

/**
 * Messages.
 *
 * @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
 *   has been resolved.
 */

.messages-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.field .messages-list,
.form-wrapper .messages-list {
  margin-block-end: 0;
}

.messages {
  --messages-bg-color: #353641;
  --messages-fg-color: var(--color-white);
  --messages-icon: none;

  position: relative;
  overflow: auto; /* Required to prevent text clipping. */
  box-sizing: border-box;
  padding: var(--gin-spacing-m);
  opacity: 1;
  color: var(--messages-fg-color);
  border: 2px solid transparent;
  border-radius: var(--gin-border-l);
  background-color: var(--messages-bg-color);
  margin-block: 0 var(--space-m);

  a {
    &,
    &:hover,
    &:active {
      color: #fff;
    }
  }

  pre {
    margin: 0;
  }

  .gin--dark-mode 

  /* If Layout Builder form is active, remove background images. */
  .layout-builder__message--defaults &,
  .layout-builder__message--overrides 

  .button--dismiss {
    position: absolute;
    width: 29px;
    height: 29px;
    margin: var(--gin-spacing-s);
    padding: 0;
    text-indent: -99999px;
    color: transparent;
    border-color: transparent;
    border-radius: var(--gin-border-m);
    box-shadow: none;
    inset-block-start: 0;
    inset-inline-end: 0;

    &:focus {
      background-color: transparent;
    }

    &:hover:not(:focus) {
      color: transparent;
      border-color: #fff;
      background-color: transparent;
    }

    .icon-close {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #fff;
      inset-block-start: 0;
      inset-inline-start: 0;
      mask-image: var(--admin-icon-close);
      mask-size: 16px 16px;
      mask-repeat: no-repeat;
      mask-position: center;

      @media (forced-colors: active) {
        background-color: buttonBorder;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--gin-transition);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: opacity var(--gin-transition-fast);
  }
}

.messages--error {
  --messages-bg-color: var(--gin-bg-danger);
  --messages-fg-color: var(--gin-color-danger-light);
  --messages-icon: var(--admin-icon-error);
}

.messages--status {
  --messages-bg-color: var(--gin-bg-green);
  --messages-fg-color: var(--gin-color-green-light);
  --messages-icon: var(--admin-icon-status);
}

.messages--warning {
  --messages-bg-color: var(--gin-bg-warning);
  --messages-fg-color: var(--gin-color-warning-light);
  --messages-icon: var(--admin-icon-warning);
}

.messages--info {
  --messages-bg-color: var(--gin-bg-info);
  --messages-fg-color: var(--gin-color-info-light);
  --messages-icon: var(--admin-icon-info);
}

.messages__title {
  margin-block: 0;
  margin-inline: 2.125rem 0;
  font-size: var(--font-size-base);
  font-weight: var(--gin-font-weight-bold);
}

.messages__header {
  position: relative;
  display: flex;
  align-items: center;
  margin-block-end: var(--gin-spacing-xs);
  margin-inline-end: 1.5em;

  &::before {
    position: absolute;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    content: "";
    inset-block-start: 2px;
    inset-inline-start: 0;
    mask-image: var(--messages-icon);
    mask-repeat: no-repeat;
    mask-position: center left;
    background-color: var(--messages-fg-color);

    &:dir(rtl) {
      mask-position: center right;
    }

    /* If no icon, then remove the pseudo-element. */
    @container style(--messages-icon: none) {
      content: none;
    }

    @media (forced-colors: active) {
      background-color: linktext;
    }
  }
}

.messages__content {
  margin-inline-start: 2.125rem;
}

.messages__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.messages__item + .messages__item {
  margin-block-start: var(--space-s);
}