system-status-report.css

Same filename in this branch
  1. 8.9.x core/themes/seven/css/components/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. 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/2815083
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Claro styles for the System Status Report.
  10. */
  11. .system-status-report__requirements-group {
  12. padding-top: 20px;
  13. }
  14. .system-status-report__entry {
  15. overflow: auto;
  16. width: 100%;
  17. margin: 0;
  18. border: 0;
  19. border-radius: 0;
  20. background-color: transparent;
  21. }
  22. .system-status-report__entry--error {
  23. background-color: transparent;
  24. }
  25. .system-status-report__entry--warning {
  26. background-color: transparent;
  27. }
  28. .system-status-report__entry h3 {
  29. margin-top: 10px;
  30. margin-bottom: 10px;
  31. font-size: 1.231em;
  32. }
  33. /* Account for native and poly-filled details element */
  34. .system-status-report__status-title {
  35. position: relative;
  36. box-sizing: border-box;
  37. width: 100%;
  38. padding: 1em 1em 1em 3em; /* LTR */
  39. font-weight: bold;
  40. }
  41. .system-status-report__status-title .details-title {
  42. text-transform: none;
  43. color: inherit;
  44. }
  45. .system-status-report__status-title .details-title {
  46. padding-left: 3em; /* LTR */
  47. }
  48. [dir="rtl"] .system-status-report__status-title .details-title {
  49. padding-right: 3em;
  50. padding-left: 0;
  51. }
  52. [dir="rtl"].details .system-status-report__status-title {
  53. padding: 1em 3em 1em 1em;
  54. }
  55. .collapse-processed > .system-status-report__status-title:before {
  56. float: right; /* LTR */
  57. }
  58. .system-status-report__status-title::-webkit-details-marker {
  59. float: right; /* LTR */
  60. }
  61. [dir="rtl"] .collapse-processed > .system-status-report__status-title:before {
  62. float: left;
  63. }
  64. [dir="rtl"] .system-status-report__status-title::-webkit-details-marker {
  65. float: left;
  66. }
  67. /* Make poly-filled details and summary elements behave correctly. */
  68. .system-status-report summary:first-child ~ * {
  69. display: none;
  70. }
  71. .system-status-report details[open] > *,
  72. .system-status-report details > summary:first-child {
  73. display: block;
  74. color: inherit;
  75. }
  76. .system-status-report__status-title .details-title:before,
  77. .details .system-status-report__status-icon:before {
  78. position: absolute;
  79. top: 1em;
  80. left: 10px; /* LTR */
  81. display: inline-block;
  82. width: 16px;
  83. height: 16px;
  84. margin-right: 10px; /* LTR */
  85. content: "";
  86. vertical-align: top;
  87. background-repeat: no-repeat;
  88. background-position: top center;
  89. background-size: contain;
  90. }
  91. [dir="rtl"] .system-status-report__status-title .details-title:before,
  92. [dir="rtl"].details .system-status-report__status-title:before {
  93. right: 10px;
  94. left: auto;
  95. margin-right: 0;
  96. }
  97. .system-status-report__status-icon--error .details-title:before,
  98. .details .system-status-report__status-icon--error:before {
  99. background-image: url(../../images/core/e32700/error.svg);
  100. }
  101. .system-status-report__status-icon--warning .details-title:before,
  102. .details .system-status-report__status-icon--warning:before {
  103. background-image: url(../../images/core/e29700/warning.svg);
  104. }
  105. .system-status-report__entry__value {
  106. box-sizing: border-box;
  107. padding: 0 1em 1em 3em; /* LTR */
  108. }
  109. [dir="rtl"] .system-status-report__entry__value {
  110. padding-right: 3em;
  111. padding-left: 1em;
  112. }
  113. @media screen and (max-width: 48em) {
  114. .system-status-report {
  115. word-wrap: break-word;
  116. }
  117. }
  118. @media screen and (min-width: 48em) {
  119. .system-status-report__entry::after {
  120. display: table;
  121. clear: both;
  122. content: "";
  123. }
  124. .system-status-report__status-title {
  125. float: left; /* LTR */
  126. width: 18rem;
  127. cursor: default;
  128. }
  129. .system-status-report__status-title:hover,
  130. .system-status-report__status-title:focus {
  131. text-decoration: none;
  132. }
  133. [dir="rtl"] .system-status-report__status-title {
  134. float: right;
  135. }
  136. html.js .system-status-report__status-title::-webkit-details-marker {
  137. display: none;
  138. }
  139. .collapse-processed > .system-status-report__status-title:before {
  140. position: relative;
  141. top: 3px;
  142. }
  143. .system-status-report__entry__value {
  144. display: block;
  145. float: right;
  146. width: calc(100% - 23em);
  147. padding-top: 1em;
  148. padding-left: 0; /* LTR */
  149. }
  150. [dir="rtl"] .system-status-report__entry__value {
  151. padding-right: 3em;
  152. padding-left: 0;
  153. }
  154. }

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