maintenance-page.css

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

Maintenance theming.

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/2815083
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Maintenance theming.
  10. */
  11. .maintenance-page {
  12. min-height: 100%;
  13. background-color: #e0e0d8;
  14. background-image: radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
  15. background-repeat: repeat;
  16. background-position: left top, 50% 50%; /* LTR */
  17. }
  18. [dir="rtl"] .maintenance-page {
  19. background-position: right top, 50% 50%;
  20. }
  21. .page-title {
  22. word-wrap: break-word;
  23. color: #0074bd;
  24. font-size: 2em;
  25. line-height: 1.2em;
  26. }
  27. /**
  28. * Task list & step indicator
  29. */
  30. @media all and (max-width: 48em) { /* 768px */
  31. header[role="banner"] {
  32. position: relative;
  33. }
  34. .step-indicator {
  35. position: absolute;
  36. top: 0.2em;
  37. right: 0.5em; /* LTR */
  38. display: block;
  39. font-size: 1.385em;
  40. }
  41. [dir="rtl"] .step-indicator {
  42. right: auto;
  43. left: 0.5em;
  44. }
  45. .task-list {
  46. display: none;
  47. }
  48. }
  49. @media all and (min-width: 48em) { /* 768px */
  50. .step-indicator {
  51. display: none;
  52. }
  53. .task-list {
  54. margin-left: 0; /* LTR */
  55. padding-bottom: 1em;
  56. padding-left: 0; /* LTR */
  57. list-style-type: none;
  58. }
  59. [dir="rtl"] .task-list {
  60. margin-right: 0;
  61. padding-right: 0;
  62. }
  63. .task-list li {
  64. padding: 0.5em 1em 0.5em 3.85em; /* LTR */
  65. color: #1a1a1a;
  66. }
  67. [dir="rtl"] .task-list li {
  68. padding: 0.5em 3.85em 0.5em 1em;
  69. }
  70. .task-list .is-active {
  71. position: relative;
  72. background: #ebeae4;
  73. font-weight: normal;
  74. }
  75. .task-list .is-active:after {
  76. position: absolute;
  77. top: 50%;
  78. left: 100%; /* LTR */
  79. width: 0;
  80. height: 0;
  81. margin-top: -1.269em;
  82. content: " ";
  83. pointer-events: none;
  84. border: solid transparent;
  85. border-width: 1.269em;
  86. border-color: rgba(235, 234, 228, 0);
  87. border-left-color: #ebeae4; /* LTR */
  88. }
  89. [dir="rtl"] .task-list .is-active:after {
  90. right: 100%;
  91. left: auto;
  92. border-right-color: #ebeae4;
  93. border-left-color: transparent;
  94. }
  95. .task-list .done {
  96. color: #adadad;
  97. }
  98. }
  99. /**
  100. * Layout
  101. */
  102. .layout-container {
  103. width: auto;
  104. margin-right: 1.25em;
  105. margin-left: 1.25em;
  106. background: #fff;
  107. }
  108. .layout-container:after { /* no reason for a clearfix in the markup */
  109. display: table;
  110. clear: both;
  111. content: "";
  112. }
  113. @media all and (max-width: 48em) { /* 768px */
  114. .layout-container {
  115. margin: 1.25em;
  116. padding: 10px 20px;
  117. }
  118. .page-title {
  119. margin-right: 2em; /* LTR */
  120. margin-bottom: 0.725em;
  121. }
  122. [dir="rtl"] .page-title {
  123. margin-right: 0;
  124. margin-left: 2em;
  125. }
  126. }
  127. @media all and (min-width: 48em) { /* 768px */
  128. html {
  129. display: table;
  130. }
  131. .install-page,
  132. .maintenance-page {
  133. display: table-cell;
  134. padding: 1em 0;
  135. vertical-align: middle;
  136. }
  137. html,
  138. .install-page,
  139. .maintenance-page {
  140. width: 100%;
  141. height: 100%;
  142. margin: 0;
  143. }
  144. .layout-container {
  145. width: 75%;
  146. max-width: 770px;
  147. margin: 0 auto;
  148. padding: 20px 0 40px 0;
  149. border-radius: 5px;
  150. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  151. }
  152. /* Positioning sidebar & content */
  153. main {
  154. float: left; /* LTR */
  155. clear: none;
  156. box-sizing: border-box;
  157. width: 65%;
  158. padding-right: 3.85em;
  159. padding-left: 3.85em;
  160. }
  161. [dir="rtl"] main {
  162. float: right;
  163. }
  164. ul {
  165. margin: 0.25em 0;
  166. padding: 15px;
  167. }
  168. [dir="rtl"] ul {
  169. margin-right: 0; /* Overrides default [dir="rtl"] ul margin */
  170. }
  171. .layout-sidebar-first {
  172. float: left; /* LTR */
  173. width: 35%;
  174. }
  175. [dir="rtl"] .layout-sidebar-first {
  176. float: right;
  177. }
  178. /* Margins for sitename */
  179. .page-title {
  180. margin: 0.75em 1.9em;
  181. }
  182. }
  183. /**
  184. * Status report customization for install and update page.
  185. */
  186. .system-status-report__status-title {
  187. float: none;
  188. width: 100%;
  189. }
  190. .system-status-report__entry__value {
  191. float: none;
  192. width: 100%;
  193. padding-top: 0;
  194. padding-left: 3em; /* LTR */
  195. }
  196. [dir="rtl"] .system-status-report__entry__value {
  197. padding-right: 3em;
  198. padding-left: 1em;
  199. }

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