system-status-counter.css

Same filename in this branch
  1. main core/themes/stable9/css/system/components/system-status-counter.css
  2. main core/themes/claro/css/components/system-status-counter.css
  3. main core/modules/system/css/components/system-status-counter.css
  4. main core/themes/admin/css/components/system-status-counter.css
Same filename and directory in other branches
  1. 10 core/themes/stable9/css/system/components/system-status-counter.css
  2. 10 core/themes/claro/css/components/system-status-counter.css
  3. 11.x core/themes/stable9/css/system/components/system-status-counter.css
  4. 11.x core/themes/claro/css/components/system-status-counter.css
  5. 11.x core/modules/system/css/components/system-status-counter.css
  6. 10 core/modules/system/css/components/system-status-counter.css
  7. 9 core/themes/stable9/css/system/components/system-status-counter.css
  8. 9 core/themes/seven/css/components/system-status-counter.css
  9. 9 core/themes/claro/css/components/system-status-counter.css
  10. 9 core/themes/stable/css/system/components/system-status-counter.css
  11. 9 core/modules/system/css/components/system-status-counter.css
  12. 8.9.x core/themes/seven/css/components/system-status-counter.css
  13. 8.9.x core/themes/claro/css/components/system-status-counter.css
  14. 8.9.x core/themes/stable/css/system/components/system-status-counter.css
  15. 8.9.x core/modules/system/css/components/system-status-counter.css
  16. 11.x core/themes/admin/css/components/system-status-counter.css
  17. 11.x core/themes/default_admin/css/components/system-status-counter.css

Styles for the system status counter component.

File

core/themes/default_admin/css/components/system-status-counter.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. * Styles for the system status counter component.
  10. */
  11. .system-status-counter {
  12. --system-status-counter-status-icon: #e6e4df;
  13. display: inline-block;
  14. overflow-y: hidden;
  15. box-sizing: border-box;
  16. height: auto;
  17. padding: var(--gin-spacing-m) 0;
  18. white-space: nowrap;
  19. border-radius: var(--gin-border-m);
  20. background: var(--gin-bg-layer);
  21. inline-size: 100%;
  22. }
  23. .system-status-counter__status-icon {
  24. display: inline-block;
  25. block-size: 4.0625rem;
  26. inline-size: 3.75rem;
  27. vertical-align: middle;
  28. background-color: transparent;
  29. box-shadow: none;
  30. &::before {
  31. display: block;
  32. block-size: 100%;
  33. inline-size: 100%;
  34. content: "";
  35. mask-repeat: no-repeat;
  36. mask-position: center 1rem;
  37. mask-size: 2rem;
  38. &:dir(rtl) {
  39. mask-position: left center;
  40. }
  41. @media (forced-colors: active) {
  42. background-color: canvastext;
  43. }
  44. }
  45. @media screen and (min-width: 61rem) {
  46. inline-size: 4.0625rem;
  47. }
  48. }
  49. .system-status-counter__status-icon--error::before {
  50. background-color: var(--gin-color-danger);
  51. mask-image: var(--admin-icon-error);
  52. }
  53. .system-status-counter__status-icon--warning::before {
  54. background-color: var(--gin-color-warning);
  55. mask-image: var(--admin-icon-warning);
  56. }
  57. .system-status-counter__status-icon--checked::before {
  58. background-color: var(--gin-color-green);
  59. mask-image: var(--admin-icon-status);
  60. }
  61. .system-status-counter__status-title {
  62. display: inline-block;
  63. padding: 0 1.125rem;
  64. padding-inline-start: 0;
  65. vertical-align: middle;
  66. font-size: 1.125em;
  67. font-weight: bold;
  68. line-height: 1em;
  69. }
  70. .system-status-counter__title-count {
  71. display: block;
  72. margin-block-end: 0.5rem;
  73. font-weight: var(--gin-font-weight-semibold);
  74. }
  75. .system-status-counter__details {
  76. display: block;
  77. text-transform: none;
  78. font-size: var(--font-size-s);
  79. font-weight: normal;
  80. line-height: 1.5;
  81. }

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