You are here

messages.css in Drupal 9

Messages.

File

core/themes/olivero/css/components/messages.css
View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Messages.
  10. */
  11. [dir="ltr"] .messages-list {
  12. padding-left: 0;
  13. }
  14. [dir="rtl"] .messages-list {
  15. padding-right: 0;
  16. }
  17. [dir="ltr"] .messages-list {
  18. padding-right: 0;
  19. }
  20. [dir="rtl"] .messages-list {
  21. padding-left: 0;
  22. }
  23. .messages-list {
  24. margin-top: 1.125rem;
  25. margin-bottom: 1.125rem;
  26. padding-top: 0;
  27. padding-bottom: 0;
  28. list-style: none;
  29. }
  30. [dir="ltr"] .messages {
  31. padding-left: 1.6875rem;
  32. }
  33. [dir="rtl"] .messages {
  34. padding-right: 1.6875rem;
  35. }
  36. [dir="ltr"] .messages {
  37. padding-right: 1.6875rem;
  38. }
  39. [dir="rtl"] .messages {
  40. padding-left: 1.6875rem;
  41. }
  42. .messages {
  43. min-height: 4.25rem;
  44. padding-top: 1.125rem;
  45. padding-bottom: 1.125rem;
  46. color: #fff;
  47. outline: solid 1px transparent;
  48. background-color: #0d1214
  49. }
  50. .messages * {
  51. color: inherit;
  52. }
  53. .messages {
  54. /* Additional specificity to override contrib modules. */
  55. }
  56. .messages.messages-list__item {
  57. background-image: none;
  58. }
  59. [dir="ltr"] .messages__list {
  60. margin-left: 0;
  61. }
  62. [dir="rtl"] .messages__list {
  63. margin-right: 0;
  64. }
  65. [dir="ltr"] .messages__list {
  66. margin-right: 0;
  67. }
  68. [dir="rtl"] .messages__list {
  69. margin-left: 0;
  70. }
  71. [dir="ltr"] .messages__list {
  72. padding-left: 0;
  73. }
  74. [dir="rtl"] .messages__list {
  75. padding-right: 0;
  76. }
  77. [dir="ltr"] .messages__list {
  78. padding-right: 0;
  79. }
  80. [dir="rtl"] .messages__list {
  81. padding-left: 0;
  82. }
  83. .messages__list {
  84. margin-top: 0;
  85. margin-bottom: 0;
  86. padding-top: 0;
  87. padding-bottom: 0;
  88. list-style: none;
  89. }
  90. .messages:not(.hidden) ~ .messages {
  91. margin-top: 1.125rem;
  92. }
  93. .messages__item + .messages__item {
  94. margin-top: 0.5625rem;
  95. }
  96. .messages__container {
  97. display: flex;
  98. }
  99. [dir="ltr"] .messages__header {
  100. margin-right: 1.125rem;
  101. }
  102. [dir="rtl"] .messages__header {
  103. margin-left: 1.125rem;
  104. }
  105. .messages__header {
  106. flex-shrink: 0
  107. }
  108. [dir="ltr"] .messages__header.no-icon {
  109. margin-right: 0;
  110. }
  111. [dir="rtl"] .messages__header.no-icon {
  112. margin-left: 0;
  113. }
  114. .messages__content {
  115. overflow: auto; /* Ensure large code blocks can be scrolled to. */
  116. flex: 1;
  117. padding-top: 0.1875rem;
  118. }
  119. [dir="ltr"] .messages__button {
  120. margin-left: 1.125rem;
  121. }
  122. [dir="rtl"] .messages__button {
  123. margin-right: 1.125rem;
  124. }
  125. .messages__button {
  126. flex-shrink: 0;
  127. padding-top: 0.1875rem;
  128. }
  129. [dir="ltr"] .messages__close {
  130. padding-left: 0;
  131. }
  132. [dir="rtl"] .messages__close {
  133. padding-right: 0;
  134. }
  135. [dir="ltr"] .messages__close {
  136. padding-right: 0;
  137. }
  138. [dir="rtl"] .messages__close {
  139. padding-left: 0;
  140. }
  141. .messages__close {
  142. position: relative;
  143. width: 1.5625rem;
  144. height: 1.5625rem;
  145. padding-top: 0;
  146. padding-bottom: 0;
  147. cursor: pointer;
  148. vertical-align: top;
  149. border: 0;
  150. background: none;
  151. -webkit-appearance: none;
  152. -moz-appearance: none;
  153. appearance: none
  154. }
  155. .messages__close:before,
  156. .messages__close:after {
  157. position: absolute;
  158. top: 50%;
  159. left: 50%;
  160. display: block;
  161. width: 2.0625rem;
  162. height: 0;
  163. content: "";
  164. border-top: solid 2px #7e96a7;
  165. }
  166. .messages__close:before {
  167. transform: translate(-50%, -50%) rotate(45deg);
  168. }
  169. .messages__close:after {
  170. transform: translate(-50%, -50%) rotate(-45deg);
  171. }
  172. .messages__close:hover::before,
  173. .messages__close:hover::after {
  174. border-color: #fff;
  175. }
  176. .messages__close:focus {
  177. outline: 2px solid #53b0eb;
  178. outline-offset: 2px;
  179. }
  180. .messages__icon svg {
  181. vertical-align: top;
  182. }
  183. .messages--error .messages__icon svg {
  184. fill: #e33f1e;
  185. }
  186. .messages--warning .messages__icon svg {
  187. fill: #fdca40;
  188. }
  189. .messages--status .messages__icon svg {
  190. fill: #3fa21c;
  191. }
  192. .messages--info .messages__icon svg {
  193. fill: #53b0eb;
  194. }
  195. .messages a {
  196. color: #fff;
  197. }
  198. .messages pre {
  199. margin: 0;
  200. }
  201. [dir="ltr"] .js-form-managed-file .messages {
  202. border-left: solid 6px #e33f1e;
  203. }
  204. [dir="rtl"] .js-form-managed-file .messages {
  205. border-right: solid 6px #e33f1e;
  206. }
  207. .js-form-managed-file .messages {
  208. margin-bottom: 1.125rem;
  209. }