system-status-report-general-info.css

Same filename in this branch
  1. 8.9.x core/themes/seven/css/components/system-status-report-general-info.css
  2. 8.9.x core/themes/stable/css/system/components/system-status-report-general-info.css
  3. 8.9.x core/modules/system/css/components/system-status-report-general-info.css
Same filename in other branches
  1. 9 core/themes/stable9/css/system/components/system-status-report-general-info.css
  2. 9 core/themes/seven/css/components/system-status-report-general-info.css
  3. 9 core/themes/claro/css/components/system-status-report-general-info.css
  4. 9 core/themes/stable/css/system/components/system-status-report-general-info.css
  5. 9 core/modules/system/css/components/system-status-report-general-info.css
  6. 10 core/themes/stable9/css/system/components/system-status-report-general-info.css
  7. 10 core/themes/claro/css/components/system-status-report-general-info.css
  8. 10 core/modules/system/css/components/system-status-report-general-info.css
  9. 11.x core/themes/stable9/css/system/components/system-status-report-general-info.css
  10. 11.x core/themes/claro/css/components/system-status-report-general-info.css
  11. 11.x core/modules/system/css/components/system-status-report-general-info.css

Claro styles for the System Status general info.

File

core/themes/claro/css/components/system-status-report-general-info.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 general info.
  10. */
  11. .system-status-general-info {
  12. border: 1px solid #ccc;
  13. border-radius: 3px;
  14. }
  15. .system-status-general-info__header {
  16. overflow: hidden;
  17. margin: 0;
  18. padding: 10px;
  19. text-transform: uppercase;
  20. border-top-left-radius: 3px;
  21. border-top-right-radius: 3px;
  22. background-color: #f5f5f2;
  23. font-size: 14px;
  24. }
  25. .system-status-general-info__item {
  26. overflow-x: auto;
  27. box-sizing: border-box;
  28. padding: 10px 10px 20px;
  29. border-top: 1px solid #ccc;
  30. background: #fcfcfa;
  31. }
  32. .system-status-general-info__item-icon {
  33. display: inline-block;
  34. width: 45px;
  35. height: 45px;
  36. vertical-align: top;
  37. }
  38. .system-status-general-info__item-icon:before {
  39. display: block;
  40. width: 100%;
  41. height: 100%;
  42. content: "";
  43. background-repeat: no-repeat;
  44. background-position: 50% center;
  45. background-size: 35px;
  46. }
  47. .system-status-general-info__item-icon--d8:before {
  48. background-image: url(../../images/core/cccccc/d8-logo.svg);
  49. }
  50. .system-status-general-info__item-icon--clock:before {
  51. background-image: url(../../images/core/cccccc/clock.svg);
  52. }
  53. .system-status-general-info__item-icon--server:before {
  54. background-image: url(../../images/core/cccccc/server.svg);
  55. }
  56. .system-status-general-info__item-icon--php:before {
  57. background-image: url(../../images/core/cccccc/php-logo.svg);
  58. background-size: 45px;
  59. }
  60. .system-status-general-info__item-icon--database:before {
  61. background-image: url(../../images/core/cccccc/database.svg);
  62. background-size: 30px;
  63. }
  64. .system-status-general-info__item-details {
  65. position: relative;
  66. display: inline-block;
  67. box-sizing: border-box;
  68. width: calc(100% - 60px);
  69. padding-left: 10px; /* LTR */
  70. }
  71. [dir="rtl"] .system-status-general-info__item-details {
  72. padding-right: 10px;
  73. padding-left: 0;
  74. }
  75. .system-status-general-info__item-title {
  76. margin-top: 10px;
  77. margin-bottom: 0;
  78. font-size: 1.231em;
  79. }
  80. .system-status-general-info__sub-item-title {
  81. margin: 0;
  82. font-size: 1.154em;
  83. }
  84. .system-status-general-info__sub-item__title {
  85. font-weight: bold;
  86. }
  87. .system-status-general-info__sub-item__value {
  88. display: block;
  89. }
  90. .system-status-general-info__run-cron {
  91. margin: 1em 0 0;
  92. }
  93. @media screen and (min-width: 48em) {
  94. .system-status-general-info__items {
  95. display: flex;
  96. overflow-x: hidden;
  97. flex-wrap: wrap;
  98. }
  99. .system-status-general-info__item {
  100. flex: 1;
  101. flex-basis: 33%;
  102. width: 33%;
  103. }
  104. .system-status-general-info__item:nth-child(2) {
  105. flex: 2;
  106. flex-basis: 66%;
  107. }
  108. .system-status-general-info__item:nth-child(2),
  109. .system-status-general-info__item:nth-child(4),
  110. .system-status-general-info__item:nth-child(5) {
  111. border-left: 1px solid #ccc; /* LTR */
  112. }
  113. [dir="rtl"] .system-status-general-info__item:nth-child(1),
  114. [dir="rtl"] .system-status-general-info__item:nth-child(3) {
  115. border-left: 1px solid #ccc;
  116. }
  117. [dir="rtl"] .system-status-general-info__item:nth-child(2),
  118. [dir="rtl"] .system-status-general-info__item:nth-child(5) {
  119. border-left: 0;
  120. }
  121. .system-status-general-info__run-cron {
  122. margin: 15px 0 5px;
  123. }
  124. }
  125. @media screen and (min-width: 60em) {
  126. .system-status-general-info__item-icon {
  127. width: 55px;
  128. height: 55px;
  129. }
  130. .system-status-general-info__item-icon:before {
  131. background-size: 35px;
  132. }
  133. .system-status-general-info__item-icon--php:before {
  134. background-size: 55px;
  135. }
  136. .system-status-general-info__run-cron {
  137. position: absolute;
  138. top: 1em;
  139. right: 1em; /* LTR */
  140. margin-top: 0;
  141. }
  142. [dir="rtl"] .system-status-general-info__run-cron {
  143. right: auto;
  144. left: 1em;
  145. }
  146. }
  147. @media screen and (max-width: 48em) {
  148. .system-status-general-info__header {
  149. display: none;
  150. }
  151. .system-status-general-info {
  152. margin-top: 25px;
  153. border-top: 0;
  154. }
  155. }

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