messages.pcss.css

Same filename in this branch
  1. main core/misc/dialog/off-canvas/css/messages.pcss.css
  2. main core/themes/olivero/css/components/messages.pcss.css
  3. main core/themes/claro/css/components/messages.pcss.css
  4. main core/themes/admin/css/components/messages.pcss.css
Same filename and directory in other branches
  1. 10 core/misc/dialog/off-canvas/css/messages.pcss.css
  2. 10 core/themes/olivero/css/components/messages.pcss.css
  3. 10 core/themes/claro/css/components/messages.pcss.css
  4. 11.x core/misc/dialog/off-canvas/css/messages.pcss.css
  5. 11.x core/themes/olivero/css/components/messages.pcss.css
  6. 11.x core/themes/claro/css/components/messages.pcss.css
  7. 9 core/themes/olivero/css/components/messages.pcss.css
  8. 9 core/themes/claro/css/components/messages.pcss.css
  9. 8.9.x core/themes/claro/css/components/messages.pcss.css
  10. 11.x core/themes/admin/css/components/messages.pcss.css
  11. 11.x 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;
  /* Fixed white: text on the always-dark message banner (--messages-bg-color). */
  --messages-fg-color: var(--admin-color-white);
  --messages-icon: none;

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

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

  pre {
    margin: 0;
  }

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

  /* 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(--admin-space-s);
    padding: 0;
    text-indent: -99999px;
    color: transparent;
    border-color: transparent;
    border-radius: var(--admin-radius-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(--admin-transition);
    }
  }

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

/*
 * Message banners use a dark-tinted background with a light status-colored
 * foreground (same in light and dark mode). These specific tints are scoped to
 * the component rather than the global token API — only messages use this
 * dark-banner treatment. The global status semantics (light tint + dark text)
 * are --admin-color-bg-* / --admin-color-text-*.
 */
.messages--error {
  --messages-bg-color: #583333;
  --messages-fg-color: #f39b9d;
  --messages-icon: var(--admin-icon-error);
}

.messages--status {
  --messages-bg-color: #145242;
  --messages-fg-color: #32cea4;
  --messages-icon: var(--admin-icon-status);
}

.messages--warning {
  --messages-bg-color: #483e1e;
  --messages-fg-color: #efcf64;
  --messages-icon: var(--admin-icon-warning);
}

.messages--info {
  --messages-bg-color: #122b3c;
  --messages-fg-color: #589ac5;
  --messages-icon: var(--admin-icon-info);
}

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

.messages__header {
  position: relative;
  display: flex;
  align-items: center;
  margin-block-end: var(--admin-space-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(--admin-space-s);
}

File

View on git.drupalcode.org

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

View source 
  1. /**

  2.  * Messages.

  3.  *

  4.  * @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400

  5.  *   has been resolved.

  6.  */

  7. 

  8. .messages-list {

  9.   margin: 0;

  10.   padding: 0;

  11.   list-style: none;

  12. }

  13. 

  14. .field .messages-list,

  15. .form-wrapper .messages-list {

  16.   margin-block-end: 0;

  17. }

  18. 

  19. .messages {

  20.   --messages-bg-color: #353641;

  21.   /* Fixed white: text on the always-dark message banner (--messages-bg-color). */

  22.   --messages-fg-color: var(--admin-color-white);

  23.   --messages-icon: none;

  24. 

  25.   position: relative;

  26.   overflow: auto; /* Required to prevent text clipping. */

  27.   box-sizing: border-box;

  28.   padding: var(--admin-space-m);

  29.   opacity: 1;

  30.   color: var(--messages-fg-color);

  31.   border: 2px solid transparent;

  32.   border-radius: var(--admin-radius-l);

  33.   background-color: var(--messages-bg-color);

  34.   margin-block: 0 var(--admin-space-m);

  35. 

  36.   a {

  37.     &,

  38.     &:hover,

  39.     &:active {

  40.       color: #fff;

  41.     }

  42.   }

  43. 

  44.   pre {

  45.     margin: 0;

  46.   }

  47. 

  48.   .gin--dark-mode 
  49. 

  50.   /* If Layout Builder form is active, remove background images. */

  51.   .layout-builder__message--defaults &,

  52.   .layout-builder__message--overrides 
  53. 

  54.   .button--dismiss {

  55.     position: absolute;

  56.     width: 29px;

  57.     height: 29px;

  58.     margin: var(--admin-space-s);

  59.     padding: 0;

  60.     text-indent: -99999px;

  61.     color: transparent;

  62.     border-color: transparent;

  63.     border-radius: var(--admin-radius-m);

  64.     box-shadow: none;

  65.     inset-block-start: 0;

  66.     inset-inline-end: 0;

  67. 

  68.     &:focus {

  69.       background-color: transparent;

  70.     }

  71. 

  72.     &:hover:not(:focus) {

  73.       color: transparent;

  74.       border-color: #fff;

  75.       background-color: transparent;

  76.     }

  77. 

  78.     .icon-close {

  79.       position: absolute;

  80.       width: 100%;

  81.       height: 100%;

  82.       background-color: #fff;

  83.       inset-block-start: 0;

  84.       inset-inline-start: 0;

  85.       mask-image: var(--admin-icon-close);

  86.       mask-size: 16px 16px;

  87.       mask-repeat: no-repeat;

  88.       mask-position: center;

  89. 

  90.       @media (forced-colors: active) {

  91.         background-color: buttonBorder;

  92.       }

  93.     }

  94. 

  95.     @media (prefers-reduced-motion: no-preference) {

  96.       transition: var(--admin-transition);

  97.     }

  98.   }

  99. 

  100.   @media (prefers-reduced-motion: no-preference) {

  101.     transition: opacity var(--admin-transition-slow);

  102.   }

  103. }

  104. 

  105. /*

  106.  * Message banners use a dark-tinted background with a light status-colored

  107.  * foreground (same in light and dark mode). These specific tints are scoped to

  108.  * the component rather than the global token API — only messages use this

  109.  * dark-banner treatment. The global status semantics (light tint + dark text)

  110.  * are --admin-color-bg-* / --admin-color-text-*.

  111.  */

  112. .messages--error {

  113.   --messages-bg-color: #583333;

  114.   --messages-fg-color: #f39b9d;

  115.   --messages-icon: var(--admin-icon-error);

  116. }

  117. 

  118. .messages--status {

  119.   --messages-bg-color: #145242;

  120.   --messages-fg-color: #32cea4;

  121.   --messages-icon: var(--admin-icon-status);

  122. }

  123. 

  124. .messages--warning {

  125.   --messages-bg-color: #483e1e;

  126.   --messages-fg-color: #efcf64;

  127.   --messages-icon: var(--admin-icon-warning);

  128. }

  129. 

  130. .messages--info {

  131.   --messages-bg-color: #122b3c;

  132.   --messages-fg-color: #589ac5;

  133.   --messages-icon: var(--admin-icon-info);

  134. }

  135. 

  136. .messages__title {

  137.   margin-block: 0;

  138.   margin-inline: 2.125rem 0;

  139.   font-size: var(--admin-font-size-m);

  140.   font-weight: var(--admin-font-weight-bold);

  141. }

  142. 

  143. .messages__header {

  144.   position: relative;

  145.   display: flex;

  146.   align-items: center;

  147.   margin-block-end: var(--admin-space-xs);

  148.   margin-inline-end: 1.5em;

  149. 

  150.   &::before {

  151.     position: absolute;

  152.     display: block;

  153.     width: 1.5rem;

  154.     height: 1.5rem;

  155.     content: "";

  156.     inset-block-start: 2px;

  157.     inset-inline-start: 0;

  158.     mask-image: var(--messages-icon);

  159.     mask-repeat: no-repeat;

  160.     mask-position: center left;

  161.     background-color: var(--messages-fg-color);

  162. 

  163.     &:dir(rtl) {

  164.       mask-position: center right;

  165.     }

  166. 

  167.     /* If no icon, then remove the pseudo-element. */

  168.     @container style(--messages-icon: none) {

  169.       content: none;

  170.     }

  171. 

  172.     @media (forced-colors: active) {

  173.       background-color: linktext;

  174.     }

  175.   }

  176. }

  177. 

  178. .messages__content {

  179.   margin-inline-start: 2.125rem;

  180. }

  181. 

  182. .messages__list {

  183.   margin: 0;

  184.   padding: 0;

  185.   list-style: none;

  186. }

  187. 

  188. .messages__item + .messages__item {

  189.   margin-block-start: var(--admin-space-s);

  190. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.