system-status-report.css

Same filename and directory in other branches
  1. 10 core/themes/claro/css/components/system-status-report.css
  2. 11.x core/themes/claro/css/components/system-status-report.css
  3. 9 core/themes/seven/css/components/system-status-report.css
  4. 9 core/themes/claro/css/components/system-status-report.css
  5. 8.9.x core/themes/seven/css/components/system-status-report.css
  6. 8.9.x core/themes/claro/css/components/system-status-report.css

Claro styles for the System Status Report.

File

View on git.drupalcode.org

core/themes/claro/css/components/system-status-report.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. /**

  9.  * @file

  10.  * Claro styles for the System Status Report.

  11.  */

  12. 

  13. :root {

  14.   --system-admin-status-report-border-color: var(--color-gray-200);

  15. }

  16. 

  17. .system-status-report {

  18.   position: relative;

  19.   padding-block-start: var(--space-m);

  20. }

  21. 

  22. @media screen and (min-width: 38em) {

  23.   .system-status-report {

  24.     padding-block-start: var(--space-l);

  25.   }

  26. }

  27. 

  28. .system-status-report__status-title {

  29.   position: relative;

  30.   box-sizing: border-box;

  31.   width: 100%;

  32.   padding-block: 0.625em;

  33.   padding-inline: 2.5em 0.375em;

  34.   vertical-align: top;

  35.   background-color: transparent;

  36.   font-weight: normal;

  37. }

  38. 

  39. .system-status-report__status-icon::before {

  40.   position: absolute;

  41.   inset-block-start: 0.75rem;

  42.   inset-inline-start: 0.75rem;

  43.   display: block;

  44.   width: 1rem;

  45.   height: 1rem;

  46.   content: "";

  47.   background-repeat: no-repeat;

  48. }

  49. 

  50. .system-status-report__status-icon--error::before {

  51.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");

  52. }

  53. 

  54. .system-status-report__status-icon--warning::before {

  55.   background-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");

  56. }

  57. 

  58. .system-status-report__entry__value {

  59.   padding: 1em 0.5em;

  60. }

  61. 

  62. .cron-description__run-cron {

  63.   display: block;

  64. }

  65. 

  66. .claro-details__wrapper {

  67.   &.claro-details__wrapper--system-status-report {

  68.     margin: 0;

  69.   }

  70. }

  71. 

  72. .system-status-report__row {

  73.   display: flex;

  74.   border-bottom: 1px solid var(--system-admin-status-report-border-color);

  75. 

  76.   &:last-of-type {

  77.     border-bottom: none;

  78.   }

  79. }

  80. 

  81. .system-status-report__requirements-group {

  82.   padding-block-start: 1.25rem;

  83. }

  84. 

  85. .system-status-report__entry {

  86.   overflow: auto;

  87.   width: 100%;

  88.   margin: 0;

  89.   border: 0;

  90.   border-radius: 0;

  91.   background-color: transparent;

  92. 

  93.   & h3 {

  94.     margin-block: 0.625rem;

  95.     font-size: 1.231em;

  96.   }

  97. }

  98. 

  99. .system-status-report__entry--error {

  100.   background-color: transparent;

  101. }

  102. 

  103. .system-status-report__entry--warning {

  104.   background-color: transparent;

  105. }

  106. 

  107. .system-status-report {

  108.   & .claro-details {

  109.     border: none;

  110.     border-block-end: var(--details-border-size) solid var(--details-border-color);

  111.     box-shadow: none;

  112.   }

  113. }

  114. 

  115. .system-status-report__status-title {

  116.   position: relative;

  117.   box-sizing: border-box;

  118.   width: 100%;

  119.   padding-block: 1em;

  120.   padding-inline: 3em 1em;

  121.   font-weight: bold;

  122. }

  123. 

  124. .system-status-report__status-icon::before {

  125.   position: absolute;

  126.   inset-block-start: 1em;

  127.   inset-inline-start: 0.625rem;

  128.   display: inline-block;

  129.   width: 1.5rem;

  130.   height: 1.5rem;

  131.   margin-inline-end: 0.625rem;

  132.   content: "";

  133.   vertical-align: top;

  134.   background-repeat: no-repeat;

  135.   background-position: top center;

  136.   background-size: contain;

  137. }

  138. 

  139. .system-status-report__status-icon--error::before {

  140.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");

  141. }

  142. 

  143. .system-status-report__status-icon--warning::before {

  144.   background-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");

  145. }

  146. 

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

  148.   .system-status-report__status-icon::before {

  149.     background-color: canvastext;

  150.     background-image: none;

  151.     mask-repeat: no-repeat;

  152.     mask-position: top center;

  153.     mask-size: contain;

  154.   }

  155.   .system-status-report__status-icon--error::before {

  156.     mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");

  157.   }

  158.   .system-status-report__status-icon--warning::before {

  159.     mask-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");

  160.   }

  161. }

  162. 

  163. .system-status-report__entry__value {

  164.   box-sizing: border-box;

  165.   padding-block: 0 1em;

  166.   padding-inline: 3em 1em;

  167.   font-size: var(--font-size-s);

  168. }

  169. 

  170. .claro-details__summary--system-status-report {

  171.   background: var(--color-gray-050);

  172. }

  173. 

  174. @media screen and (max-width: 48em) {

  175.   .system-status-report {

  176.     word-wrap: break-word;

  177.   }

  178. }

  179. 

  180. @media screen and (min-width: 48em) {

  181.   .system-status-report__entry::after {

  182.     display: table;

  183.     clear: both;

  184.     content: "";

  185.   }

  186.   .system-status-report__status-title {

  187.     width: 18rem;

  188.     cursor: default;

  189. 

  190.     &:hover,

  191.     &:focus {

  192.       -webkit-text-decoration: none;

  193.       text-decoration: none;

  194.     }

  195.   }

  196. 

  197.   html.js .system-status-report__status-title::-webkit-details-marker {

  198.     display: none;

  199.   }

  200.   .system-status-report__entry__value {

  201.     display: block;

  202.     width: calc(100% - 23em);

  203.     padding-block-start: 1em;

  204.     padding-inline-start: 0;

  205.   }

  206. }

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