maintenance-page.css

Same filename in this branch
  1. 9 core/themes/olivero/css/components/maintenance-page.css
  2. 9 core/themes/seven/css/theme/maintenance-page.css
  3. 9 core/themes/bartik/css/maintenance-page.css
Same filename in other branches
  1. 7.x themes/bartik/css/maintenance-page.css
  2. 8.9.x core/themes/seven/css/theme/maintenance-page.css
  3. 8.9.x core/themes/claro/css/theme/maintenance-page.css
  4. 8.9.x core/themes/bartik/css/maintenance-page.css
  5. 10 core/themes/olivero/css/components/maintenance-page.css
  6. 10 core/themes/claro/css/theme/maintenance-page.css
  7. 11.x core/themes/olivero/css/components/maintenance-page.css
  8. 11.x core/themes/claro/css/theme/maintenance-page.css

Maintenance theming.

These styles affect the installation UI, maintenance page, and the database update UI.

File

core/themes/claro/css/theme/maintenance-page.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. * @file
  9. * Maintenance theming.
  10. *
  11. * These styles affect the installation UI, maintenance page, and the database update UI.
  12. */
  13. .maintenance-page {
  14. min-height: 100%;
  15. background-color: #dedfe4;
  16. }
  17. h1,
  18. h2 {
  19. font-size: 1.602rem;
  20. }
  21. h3 {
  22. font-size: 1.424rem;
  23. }
  24. .site-name {
  25. margin-top: 0.75rem;
  26. word-wrap: break-word;
  27. color: #232429;
  28. font-size: 2.25rem;
  29. }
  30. .site-name--subtle {
  31. margin-top: 0.75rem;
  32. color: #55565b;
  33. font-size: 1.424rem;
  34. }
  35. .title {
  36. margin-top: 0;
  37. font-size: 1.602rem;
  38. }
  39. .title--broad {
  40. font-size: 2.027rem;
  41. }
  42. .site-name,
  43. .title {
  44. margin-bottom: 1.5rem;
  45. }
  46. .content {
  47. margin-bottom: 1rem;
  48. color: #232429;
  49. }
  50. .content--subtle {
  51. color: #55565b;
  52. }
  53. .site-name,
  54. .title,
  55. .content {
  56. max-width: 34rem;
  57. }
  58. /**
  59. * Task list & step indicator.
  60. * Shows on both the install screen and the database update page.
  61. */
  62. @media all and (max-width: 48em) { /* 768px */
  63. header[role="banner"] {
  64. position: relative;
  65. }
  66. .step-indicator {
  67. position: absolute;
  68. top: 0.2em;
  69. right: 0.5em; /* LTR */
  70. display: block;
  71. font-size: 1.385em;
  72. }
  73. [dir="rtl"] .step-indicator {
  74. right: auto;
  75. left: 0.5em;
  76. }
  77. }
  78. @media all and (min-width: 48em) { /* 768px */
  79. .step-indicator {
  80. display: none;
  81. }
  82. .task-list {
  83. margin-left: -3rem; /* LTR */
  84. padding: 0;
  85. list-style-type: none;
  86. counter-reset: steps;
  87. font-weight: bold;
  88. }
  89. [dir="rtl"] .task-list {
  90. margin-right: -3rem;
  91. margin-left: 0;
  92. }
  93. .task-list li {
  94. padding: 1rem 1rem 1rem 3rem; /* LTR */
  95. counter-increment: steps;
  96. color: #232429;
  97. border-radius: 0 2rem 2rem 0 /* LTR */;
  98. font-weight: 500;
  99. }
  100. [dir="rtl"] .task-list li {
  101. padding: 1rem 3rem 1rem 1rem;
  102. border-radius: 2rem 0 0 2rem;
  103. }
  104. .task-list li:before {
  105. margin-right: 0.375rem;
  106. content: counter(steps);
  107. }
  108. [dir="rtl"] .task-list li:before {
  109. margin-right: 0;
  110. margin-left: 0.375rem;
  111. }
  112. .task-list .is-active {
  113. color: #003ecc;
  114. border: 1px solid transparent; /* Required for forced-colors mode. */
  115. background: #e5edff;
  116. font-weight: 500;
  117. }
  118. .task-list .done {
  119. color: #75767b;
  120. }
  121. }
  122. /**
  123. * Layout
  124. */
  125. .layout-container {
  126. width: auto;
  127. margin-right: 1.25em;
  128. margin-left: 1.25em;
  129. padding: 3rem;
  130. border: 1px solid transparent; /* Required for forced-colors mode. */
  131. border-radius: 0.5rem;
  132. background: #fff;
  133. box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
  134. }
  135. .layout-container:after { /* No reason for a clearfix in the markup. */
  136. display: table;
  137. clear: both;
  138. content: "";
  139. }
  140. @media all and (max-width: 48em) { /* 768px */
  141. .layout-container {
  142. margin: 1.25em;
  143. padding: 1rem 1.5rem;
  144. }
  145. .layout-sidebar-first {
  146. display: none;
  147. }
  148. }
  149. @media all and (min-width: 48em) { /* 768px */
  150. html {
  151. display: table;
  152. }
  153. .install-page,
  154. .maintenance-page {
  155. display: table-cell;
  156. padding: 1em 0;
  157. vertical-align: middle;
  158. }
  159. html,
  160. .install-page,
  161. .maintenance-page {
  162. width: 100%;
  163. height: 100%;
  164. margin: 0;
  165. }
  166. /**
  167. * Needed to override rules from system-admin--layout.pcss.
  168. */
  169. .layout-container.layout-container.layout-container {
  170. width: 75%;
  171. max-width: 58.75rem;
  172. margin: 0 auto;
  173. }
  174. ul {
  175. margin: 0.25em 0;
  176. padding: 0.9375rem;
  177. }
  178. [dir="rtl"] ul {
  179. margin-right: 0; /* Overrides default [dir="rtl"] ul margin. */
  180. }
  181. /* Positioning sidebar & content. */
  182. .layout-sidebar-first {
  183. float: left; /* LTR */
  184. width: 35%;
  185. }
  186. [dir="rtl"] .layout-sidebar-first {
  187. float: right;
  188. }
  189. .main-content {
  190. float: left; /* LTR */
  191. clear: none;
  192. box-sizing: border-box;
  193. width: 65%;
  194. padding-left: 3.85em; /* LTR */
  195. }
  196. [dir="rtl"] .main-content {
  197. float: right;
  198. padding-right: 3.85em;
  199. padding-left: 0;
  200. }
  201. .main-content--attached {
  202. padding-left: 0;
  203. }
  204. }
  205. /**
  206. * Status report customization for install and update page.
  207. */
  208. .system-status-report__status-title {
  209. float: none;
  210. width: 100%;
  211. }
  212. .system-status-report__entry__value {
  213. float: none;
  214. width: 100%;
  215. padding-top: 0;
  216. padding-left: 3em; /* LTR */
  217. }
  218. [dir="rtl"] .system-status-report__entry__value {
  219. padding-right: 3em;
  220. padding-left: 1em;
  221. }
  222. /**
  223. * Updates list customization for update page.
  224. */
  225. .update-results {
  226. overflow: auto; /* Required to prevent text clipping. */
  227. margin-top: 0;
  228. padding: 0.75rem;
  229. border: 1px solid #dedfe4;
  230. border-radius: 2px;
  231. background: #f3f4f9;
  232. }
  233. .update-results > h3:first-child {
  234. margin-top: 0;
  235. }
  236. .update-results .failure strong {
  237. color: #dc2323;
  238. }
  239. .item-list > h3 {
  240. font-size: 1.266rem;
  241. }
  242. .item-list > ul {
  243. margin-left: 0;
  244. }

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