system-status-report.css

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

Claro styles for the System Status Report.

File

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.claro-details__wrapper--system-status-report {

  67.   margin: 0;

  68. }

  69. 

  70. .system-status-report__row {

  71.   display: flex;

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

  73. }

  74. 

  75. .system-status-report__row:last-of-type {

  76.   border-bottom: none;

  77. }

  78. 

  79. .system-status-report__requirements-group {

  80.   padding-block-start: 1.25rem;

  81. }

  82. 

  83. .system-status-report__entry {

  84.   overflow: auto;

  85.   width: 100%;

  86.   margin: 0;

  87.   border: 0;

  88.   border-radius: 0;

  89.   background-color: transparent;

  90. }

  91. 

  92. .system-status-report__entry h3 {

  93.   margin-block: 0.625rem;

  94.   font-size: 1.231em;

  95. }

  96. 

  97. .system-status-report__entry--error {

  98.   background-color: transparent;

  99. }

  100. 

  101. .system-status-report__entry--warning {

  102.   background-color: transparent;

  103. }

  104. 

  105. .system-status-report .claro-details {

  106.   border: none;

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

  108.   box-shadow: none;

  109. }

  110. 

  111. .system-status-report__status-title {

  112.   position: relative;

  113.   box-sizing: border-box;

  114.   width: 100%;

  115.   padding-block: 1em;

  116.   padding-inline: 3em 1em;

  117.   font-weight: bold;

  118. }

  119. 

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

  121.   position: absolute;

  122.   inset-block-start: 1em;

  123.   inset-inline-start: 0.625rem;

  124.   display: inline-block;

  125.   width: 1.5rem;

  126.   height: 1.5rem;

  127.   margin-inline-end: 0.625rem;

  128.   content: "";

  129.   vertical-align: top;

  130.   background-repeat: no-repeat;

  131.   background-position: top center;

  132.   background-size: contain;

  133. }

  134. 

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

  136.   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");

  137. }

  138. 

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

  140.   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");

  141. }

  142. 

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

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

  145.     background-color: canvastext;

  146.     background-image: none;

  147.     mask-repeat: no-repeat;

  148.     mask-position: top center;

  149.     mask-size: contain;

  150.   }

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

  152.     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");

  153.   }

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

  155.     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");

  156.   }

  157. }

  158. 

  159. .system-status-report__entry__value {

  160.   box-sizing: border-box;

  161.   padding-block: 0 1em;

  162.   padding-inline: 3em 1em;

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

  164. }

  165. 

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

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

  168. }

  169. 

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

  171.   .system-status-report {

  172.     word-wrap: break-word;

  173.   }

  174. }

  175. 

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

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

  178.     display: table;

  179.     clear: both;

  180.     content: "";

  181.   }

  182.   .system-status-report__status-title {

  183.     width: 18rem;

  184.     cursor: default;

  185.   }

  186. 

  187.   .system-status-report__status-title:hover,

  188.   .system-status-report__status-title:focus {

  189.     -webkit-text-decoration: none;

  190.     text-decoration: none;

  191.   }

  192. 

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

  194.     display: none;

  195.   }

  196.   .system-status-report__entry__value {

  197.     display: block;

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

  199.     padding-block-start: 1em;

  200.     padding-inline-start: 0;

  201.   }

  202. }

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