system-status-report.css

Same filename in this branch
  1. 9 core/themes/seven/css/components/system-status-report.css
Same filename in other branches
  1. 8.9.x core/themes/seven/css/components/system-status-report.css
  2. 8.9.x core/themes/claro/css/components/system-status-report.css
  3. 10 core/themes/claro/css/components/system-status-report.css
  4. 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. .system-status-report__requirements-group {

  14.   padding-top: 1.25rem;

  15. }

  16. 

  17. .system-status-report__entry {

  18.   overflow: auto;

  19.   width: 100%;

  20.   margin: 0;

  21.   border: 0;

  22.   border-radius: 0;

  23.   background-color: transparent;

  24. }

  25. 

  26. .system-status-report__entry--error {

  27.   background-color: transparent;

  28. }

  29. 

  30. .system-status-report__entry--warning {

  31.   background-color: transparent;

  32. }

  33. 

  34. .system-status-report__entry__value h3 {

  35.   margin-top: 0.625rem;

  36.   margin-bottom: 0.625rem;

  37.   font-size: 1.231em;

  38. }

  39. 

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

  41.   border: none;

  42.   border-bottom: 1px solid #dedfe4;

  43.   box-shadow: none;

  44. }

  45. 

  46. /* Account for native and poly-filled details element */

  47. 

  48. .system-status-report__status-title {

  49.   position: relative;

  50.   box-sizing: border-box;

  51.   width: 100%;

  52.   padding: 1em 1em 1em 3em; /* LTR */

  53.   font-weight: bold;

  54. }

  55. 

  56. .system-status-report__status-title .details-title {

  57.   text-transform: none;

  58.   color: inherit;

  59. }

  60. 

  61. .system-status-report__status-title .details-title {

  62.   padding-left: 3em; /* LTR */

  63. }

  64. 

  65. [dir="rtl"] .system-status-report__status-title .details-title {

  66.   padding-right: 3em;

  67.   padding-left: 0;

  68. }

  69. 

  70. [dir="rtl"].details .system-status-report__status-title {

  71.   padding: 1em 3em 1em 1em;

  72. }

  73. 

  74. .system-status-report__status-title .details-title:before,

  75. .details .system-status-report__status-icon:before {

  76.   position: absolute;

  77.   top: 1em;

  78.   left: 0.625rem; /* LTR */

  79.   display: inline-block;

  80.   width: 1.5rem;

  81.   height: 1.5rem;

  82.   margin-right: 0.625rem; /* LTR */

  83.   content: "";

  84.   vertical-align: top;

  85.   background-repeat: no-repeat;

  86.   background-position: top center;

  87.   background-size: contain;

  88. }

  89. 

  90. [dir="rtl"] .system-status-report__status-title .details-title:before,

  91. [dir="rtl"].details .system-status-report__status-title:before {

  92.   right: 0.625rem;

  93.   left: auto;

  94.   margin-right: 0;

  95. }

  96. 

  97. .system-status-report__status-icon--error .details-title:before,

  98. .details .system-status-report__status-icon--error:before {

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

  100. }

  101. 

  102. .system-status-report__status-icon--warning .details-title:before,

  103. .details .system-status-report__status-icon--warning:before {

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

  105. }

  106. 

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

  108.   .system-status-report__status-title .details-title:before,

  109.   .details .system-status-report__status-icon:before {

  110.     background-color: canvastext;

  111.     background-image: none;

  112.     -webkit-mask-repeat: no-repeat;

  113.     mask-repeat: no-repeat;

  114.     -webkit-mask-position: top center;

  115.     mask-position: top center;

  116.     -webkit-mask-size: contain;

  117.     mask-size: contain;

  118.   }

  119.   .system-status-report__status-icon--error .details-title:before,

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

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

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

  123.   }

  124.   .system-status-report__status-icon--warning .details-title:before,

  125.   .details .system-status-report__status-icon--warning:before {

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

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

  128.   }

  129. }

  130. 

  131. .system-status-report__entry__value {

  132.   box-sizing: border-box;

  133.   padding: 0 1em 1em 3em; /* LTR */

  134.   font-size: 0.875rem;

  135. }

  136. 

  137. [dir="rtl"] .system-status-report__entry__value {

  138.   padding-right: 3em;

  139.   padding-left: 1em;

  140. }

  141. 

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

  143.   background: #f3f4f9;

  144. }

  145. 

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

  147.   .system-status-report {

  148.     word-wrap: break-word;

  149.   }

  150. }

  151. 

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

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

  154.     display: table;

  155.     clear: both;

  156.     content: "";

  157.   }

  158.   .system-status-report__status-title {

  159.     width: 18rem;

  160.     cursor: default;

  161.   }

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

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

  164.     text-decoration: none;

  165.   }

  166. 

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

  168.     display: none;

  169.   }

  170.   .collapse-processed > .system-status-report__status-title:before {

  171.     position: relative;

  172.     top: 0.1875rem;

  173.   }

  174.   .system-status-report__entry__value {

  175.     display: block;

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

  177.     padding-top: 1em;

  178.     padding-left: 0; /* LTR */

  179.   }

  180.   [dir="rtl"] .system-status-report__entry__value {

  181.     padding-right: 3em;

  182.     padding-left: 0;

  183.   }

  184. }

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