From c19064f6a72608baad2f7cb922ba89bebb1c2bc1 Mon Sep 17 00:00:00 2001
From: Cristina Chumillas <ckrina@1206650.no-reply.drupal.org>
Date: Fri, 22 Jul 2022 16:19:25 +0200
Subject: [PATCH] =?UTF-8?q?Issue=20#3085219=20by=20mherchel,=20jwilson3,?=
=?UTF-8?q?=20lauriii,=20andy-blum,=20javi-er,=20deviantintegral,=20raman.?=
=?UTF-8?q?b,=20kostyashupenko,=20komalk,=20rootwork,=20rkoller,=20saschae?=
=?UTF-8?q?ggi,=20Abhijith=20S,=20cindytwilliams,=20benjifisher,=20AaronMc?=
=?UTF-8?q?Hale,=20nod=5F,=20G=C3=A1bor=20Hojtsy,=20ckrina,=20alexpott,=20?=
=?UTF-8?q?huzooka:=20Installer=20is=20not=20very=20usable=20in=20Claro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
(cherry picked from commit 748dd31935033c400929ff7297b0777cd2d9c3fa)
---
core/includes/install.core.inc | 2 +-
core/includes/theme.maintenance.inc | 2 +-
.../Installer/InstallerTest.php | 2 +-
.../Installer/StandardInstallerTest.php | 2 +-
core/themes/claro/claro.theme | 21 +++
core/themes/claro/css/base/variables.css | 1 +
core/themes/claro/css/base/variables.pcss.css | 1 +
core/themes/claro/css/components/messages.css | 1 +
.../claro/css/components/messages.pcss.css | 1 +
core/themes/claro/css/theme/install-page.css | 51 ++++--
.../claro/css/theme/install-page.pcss.css | 47 ++++--
.../claro/css/theme/maintenance-page.css | 148 ++++++++++++------
.../claro/css/theme/maintenance-page.pcss.css | 141 +++++++++++------
.../claro/templates/install-page.html.twig | 6 +-
.../maintenance-page--front.html.twig | 45 ++++++
.../templates/maintenance-page.html.twig | 8 +-
16 files changed, 357 insertions(+), 122 deletions(-)
create mode 100644 core/themes/claro/templates/maintenance-page--front.html.twig
diff --git a/core/includes/install.core.inc b/core/includes/install.core.inc
index d3af268cc691..d947254701b9 100644
--- a/core/includes/install.core.inc
+++ b/core/includes/install.core.inc
@@ -246,7 +246,7 @@ function install_state_defaults() {
// An array of available installation profiles.
'profiles' => [],
// The name of the theme to use during installation.
- 'theme' => 'seven',
+ 'theme' => 'claro',
// The server URL where the interface translation files can be downloaded.
// Tokens in the pattern will be replaced by appropriate values for the
// required translation file.
diff --git a/core/includes/theme.maintenance.inc b/core/includes/theme.maintenance.inc
index aa2a248750a6..32102337b4e8 100644
--- a/core/includes/theme.maintenance.inc
+++ b/core/includes/theme.maintenance.inc
@@ -33,7 +33,7 @@ function _drupal_maintenance_theme() {
$custom_theme = $GLOBALS['install_state']['theme'];
}
else {
- $custom_theme = Settings::get('maintenance_theme', 'seven');
+ $custom_theme = Settings::get('maintenance_theme', 'claro');
}
}
else {
diff --git a/core/tests/Drupal/FunctionalTests/Installer/InstallerTest.php b/core/tests/Drupal/FunctionalTests/Installer/InstallerTest.php
index af85b7e7fd22..4d1df63869e4 100644
--- a/core/tests/Drupal/FunctionalTests/Installer/InstallerTest.php
+++ b/core/tests/Drupal/FunctionalTests/Installer/InstallerTest.php
@@ -53,7 +53,7 @@ public function testInstaller() {
protected function setUpLanguage() {
// Test that \Drupal\Core\Render\BareHtmlPageRenderer adds assets and
// metatags as expected to the first page of the installer.
- $this->assertSession()->responseContains("core/themes/seven/css/components/buttons.css");
+ $this->assertSession()->responseContains("core/themes/claro/css/components/button.css");
$this->assertSession()->responseContains('<meta charset="utf-8" />');
// Assert that the expected title is present.
diff --git a/core/tests/Drupal/FunctionalTests/Installer/StandardInstallerTest.php b/core/tests/Drupal/FunctionalTests/Installer/StandardInstallerTest.php
index 432cb723c71f..7f9c0ae16a93 100644
--- a/core/tests/Drupal/FunctionalTests/Installer/StandardInstallerTest.php
+++ b/core/tests/Drupal/FunctionalTests/Installer/StandardInstallerTest.php
@@ -29,7 +29,7 @@ public function testInstaller() {
protected function setUpSite() {
// Test that the correct theme is being used.
$this->assertSession()->responseNotContains('olivero');
- $this->assertSession()->responseContains('themes/seven/css/theme/install-page.css');
+ $this->assertSession()->responseContains('themes/claro/css/theme/install-page.css');
parent::setUpSite();
}
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index d7c49a793ea1..3447ff861961 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -326,6 +326,27 @@ function claro_preprocess_maintenance_page(&$variables) {
$variables['#attached']['library'][] = 'claro/maintenance-page';
}
+/**
+ * Implements hook_theme_suggestions_maintenance_page_alter().
+ */
+function claro_theme_suggestions_maintenance_page_alter(&$suggestions) {
+ try {
+ $is_front = \Drupal::service('path.matcher')->isFrontPage();
+ }
+ catch (Exception $e) {
+ // An exception could mean that the database is offline. This scenario
+ // should also be rendered using the frontpage template.
+ $is_front = TRUE;
+ }
+
+ if ($is_front) {
+ // Add theme suggestion for maintenance page rendered as front page. This
+ // allows separating different applications such as update.php from the
+ // actual maintenance page.
+ $suggestions[] = 'maintenance_page__front';
+ }
+}
+
/**
* Implements hook_preprocess_HOOK() for details.
*
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 74128d431cf5..bd525b89e2be 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -90,6 +90,7 @@
--line-height-heading: 1.3;
--line-height-form-label: calc(18rem / 16); /* 18px */
--font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
+ --font-size-xl: 2.25rem; /* ~36px */
--font-size-h1: 2.027rem; /* ~32px */
--font-size-h2: 1.802rem; /* ~29px */
--font-size-h3: 1.602rem; /* ~26px */
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 65cadda5799d..727fc94e35ce 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -84,6 +84,7 @@
--line-height-heading: 1.3;
--line-height-form-label: calc(18rem / 16); /* 18px */
--font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
+ --font-size-xl: 2.25rem; /* ~36px */
--font-size-h1: 2.027rem; /* ~32px */
--font-size-h2: 1.802rem; /* ~29px */
--font-size-h3: 1.602rem; /* ~26px */
diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index 3ae2d2adf750..0faa9b708bf5 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -39,6 +39,7 @@
}
.messages {
+ overflow: auto; /* Required to prevent text clipping. */
box-sizing: border-box;
margin-top: var(--space-m);
margin-bottom: var(--space-m);
diff --git a/core/themes/claro/css/components/messages.pcss.css b/core/themes/claro/css/components/messages.pcss.css
index ce1057efc423..c3f8a53f37c6 100644
--- a/core/themes/claro/css/components/messages.pcss.css
+++ b/core/themes/claro/css/components/messages.pcss.css
@@ -32,6 +32,7 @@
}
.messages {
+ overflow: auto; /* Required to prevent text clipping. */
box-sizing: border-box;
margin-top: var(--space-m);
margin-bottom: var(--space-m);
diff --git a/core/themes/claro/css/theme/install-page.css b/core/themes/claro/css/theme/install-page.css
index 830f5b305149..5b0057224a08 100644
--- a/core/themes/claro/css/theme/install-page.css
+++ b/core/themes/claro/css/theme/install-page.css
@@ -4,6 +4,7 @@
* https://www.drupal.org/node/3084859
* @preserve
*/
+
/**
* @file
* Installation styling.
@@ -11,37 +12,67 @@
* Unfortunately we have to make our styling quite strong, to override the
* .maintenance-page styling.
*/
+
.install-page {
min-height: 100%;
- background-color: #1275b2;
- background-image:
- url(../../images/noise-low.png),
- radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
- background-repeat: repeat;
- background-position: left top, 50% 50%; /* LTR */
-}
-[dir="rtl"] .install-page {
- background-position: right top, 50% 50%;
+ background-color: var(--color-gray-100)
}
+
+.install-page h1,
+ .install-page h2 {
+ font-size: var(--font-size-h3);
+ }
+
+.install-page h3 {
+ font-size: var(--font-size-h4);
+ }
+
+.install-page .site-name {
+ margin-top: var(--space-s);
+ color: var(--color-gray);
+ font-size: var(--font-size-xl);
+ }
+
+.install-page .title {
+ margin-top: 0;
+ font-size: var(--font-size-h3);
+ }
+
+.install-page .content {
+ color: var(--color-gray);
+ }
+
+.install-page .site-name,
+ .install-page .title,
+ .install-page .content {
+ max-width: 34rem;
+ }
+
/**
* Password widget
*/
+
.install-page .password-parent,
.install-page .confirm-parent {
width: auto;
}
+
.install-page .form-item .password-suggestions {
float: none;
width: auto;
}
+
.install-page table td {
word-break: break-all;
}
+
.install-page .site-version {
vertical-align: super;
- color: #595959;
+ color: var(--color-gray-500);
font-size: 0.5em;
+ font-weight: 500;
}
+
@media all and (max-width: 63.125rem) and (min-width: 48em) {
.install-page .password-strength,
.install-page .confirm-parent {
diff --git a/core/themes/claro/css/theme/install-page.pcss.css b/core/themes/claro/css/theme/install-page.pcss.css
index b616b418d96f..6f727b4ba79a 100644
--- a/core/themes/claro/css/theme/install-page.pcss.css
+++ b/core/themes/claro/css/theme/install-page.pcss.css
@@ -5,20 +5,40 @@
* Unfortunately we have to make our styling quite strong, to override the
* .maintenance-page styling.
*/
+
.install-page {
min-height: 100%;
- background-color: #1275b2;
- background-image:
- url(../../images/noise-low.png),
- -webkit-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
- background-image:
- url(../../images/noise-low.png),
- radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
- background-repeat: repeat;
- background-position: left top, 50% 50%; /* LTR */
-}
-[dir="rtl"] .install-page {
- background-position: right top, 50% 50%;
+ background-color: var(--color-gray-100);
+
+ & h1,
+ & h2 {
+ font-size: var(--font-size-h3);
+ }
+
+ & h3 {
+ font-size: var(--font-size-h4);
+ }
+
+ & .site-name {
+ margin-top: var(--space-s);
+ color: var(--color-gray);
+ font-size: var(--font-size-xl);
+ }
+
+ & .title {
+ margin-top: 0;
+ font-size: var(--font-size-h3);
+ }
+
+ & .content {
+ color: var(--color-gray);
+ }
+
+ & .site-name,
+ & .title,
+ & .content {
+ max-width: 34rem;
+ }
}
/**
@@ -38,8 +58,9 @@
.install-page .site-version {
vertical-align: super;
- color: #595959;
+ color: var(--color-gray-500);
font-size: 0.5em;
+ font-weight: 500;
}
@media all and (max-width: 1010px) and (min-width: 48em) {
diff --git a/core/themes/claro/css/theme/maintenance-page.css b/core/themes/claro/css/theme/maintenance-page.css
index 33257028f75c..c57b4b7abb91 100644
--- a/core/themes/claro/css/theme/maintenance-page.css
+++ b/core/themes/claro/css/theme/maintenance-page.css
@@ -8,6 +8,8 @@
/**
* @file
* Maintenance theming.
+ *
+ * These styles affect the installation UI, maintenance page, and the database update UI.
*/
.maintenance-page {
@@ -15,17 +17,37 @@
background-color: var(--color-gray-100);
}
-.title {
- margin-top: 0;
+h1,
+h2 {
+ font-size: var(--font-size-h3);
+}
+
+h3 {
+ font-size: var(--font-size-h4);
}
.site-name {
- margin-top: var(--space-m);
+ margin-top: var(--space-s);
word-wrap: break-word;
+ color: var(--color-gray);
+ font-size: var(--font-size-xl);
+}
+
+.site-name--subtle {
+ margin-top: var(--space-s);
color: var(--color-gray-800);
font-size: var(--font-size-h4);
}
+.title {
+ margin-top: 0;
+ font-size: var(--font-size-h3);
+}
+
+.title--broad {
+ font-size: var(--font-size-h1);
+}
+
.site-name,
.title {
margin-bottom: var(--space-l);
@@ -33,17 +55,22 @@
.content {
margin-bottom: var(--space-m);
+ color: var(--color-gray);
+}
+
+.content--subtle {
color: var(--color-gray-800);
}
.site-name,
.title,
.content {
- max-width: 32rem;
+ max-width: 34rem;
}
/**
- * Task list & step indicator
+ * Task list & step indicator.
+ * Shows on both the install screen and the database update page.
*/
@media all and (max-width: 48em) { /* 768px */
@@ -61,9 +88,6 @@
right: auto;
left: 0.5em;
}
- .task-list {
- display: none;
- }
}
@media all and (min-width: 48em) { /* 768px */
@@ -71,49 +95,44 @@
display: none;
}
.task-list {
- margin-left: 0; /* LTR */
- padding-bottom: 1em;
- padding-left: 0; /* LTR */
+ margin-left: -3rem; /* LTR */
+ padding: 0;
list-style-type: none;
+ counter-reset: steps;
+ font-weight: bold;
}
[dir="rtl"] .task-list {
- margin-right: 0;
- padding-right: 0;
+ margin-right: -3rem;
+ margin-left: 0;
}
.task-list li {
- padding: 0.5em 1em 0.5em 3.85em; /* LTR */
- color: #1a1a1a;
+ padding: 1rem 1rem 1rem 3rem; /* LTR */
+ counter-increment: steps;
+ color: var(--color-gray);
+ border-radius: 0 2rem 2rem 0 /* LTR */;
+ font-weight: 500;
}
[dir="rtl"] .task-list li {
- padding: 0.5em 3.85em 0.5em 1em;
+ padding: 1rem 3rem 1rem 1rem;
+ border-radius: 2rem 0 0 2rem;
}
- .task-list .is-active {
- position: relative;
- background: #ebeae4;
- font-weight: normal;
+ .task-list li:before {
+ margin-right: 0.375rem;
+ content: counter(steps);
}
- .task-list .is-active:after {
- position: absolute;
- top: 50%;
- left: 100%; /* LTR */
- width: 0;
- height: 0;
- margin-top: -1.269em;
- content: " ";
- pointer-events: none;
- border: solid transparent;
- border-width: 1.269em;
- border-color: rgba(235, 234, 228, 0);
- border-left-color: #ebeae4; /* LTR */
- }
- [dir="rtl"] .task-list .is-active:after {
- right: 100%;
- left: auto;
- border-right-color: #ebeae4;
- border-left-color: transparent;
+ [dir="rtl"] .task-list li:before {
+ margin-right: 0;
+ margin-left: 0.375rem;
+ }
+
+ .task-list .is-active {
+ color: var(--color-absolutezero);
+ border: 1px solid transparent; /* Required for forced-colors mode. */
+ background: var(--color-bgblue-active);
+ font-weight: 500;
}
.task-list .done {
- color: #adadad;
+ color: var(--color-gray-700);
}
}
@@ -126,12 +145,13 @@
margin-right: 1.25em;
margin-left: 1.25em;
padding: var(--space-xl);
+ border: 1px solid transparent; /* Required for forced-colors mode. */
border-radius: 0.5rem;
background: #fff;
box-shadow: var(--shadow-z3);
}
-.layout-container:after { /* no reason for a clearfix in the markup */
+.layout-container:after { /* No reason for a clearfix in the markup. */
display: table;
clear: both;
content: "";
@@ -142,6 +162,10 @@
margin: 1.25em;
padding: var(--space-m) var(--space-l);
}
+
+ .layout-sidebar-first {
+ display: none;
+ }
}
@media all and (min-width: 48em) { /* 768px */
@@ -174,8 +198,10 @@
padding: 0.9375rem;
}
[dir="rtl"] ul {
- margin-right: 0; /* Overrides default [dir="rtl"] ul margin */
+ margin-right: 0; /* Overrides default [dir="rtl"] ul margin. */
}
+
+ /* Positioning sidebar & content. */
.layout-sidebar-first {
float: left; /* LTR */
width: 35%;
@@ -183,19 +209,22 @@
[dir="rtl"] .layout-sidebar-first {
float: right;
}
- /* Positioning sidebar & content */
- main {
+
+ .main-content {
float: left; /* LTR */
clear: none;
box-sizing: border-box;
width: 65%;
padding-left: 3.85em; /* LTR */
}
- [dir="rtl"] main {
+ [dir="rtl"] .main-content {
float: right;
padding-right: 3.85em;
padding-left: 0;
}
+ .main-content--attached {
+ padding-left: 0;
+ }
}
/**
@@ -218,3 +247,32 @@
padding-right: 3em;
padding-left: 1em;
}
+
+/**
+ * Updates list customization for update page.
+ */
+
+.update-results {
+ overflow: auto; /* Required to prevent text clipping. */
+ margin-top: 0;
+ padding: var(--space-s);
+ border: 1px solid var(--color-gray-100);
+ border-radius: var(--base-border-radius);
+ background: var(--color-gray-050);
+}
+
+.update-results > h3:first-child {
+ margin-top: 0;
+}
+
+.update-results .failure strong {
+ color: var(--color-maximumred);
+}
+
+.item-list > h3 {
+ font-size: var(--font-size-h5);
+}
+
+.item-list > ul {
+ margin-left: 0;
+}
diff --git a/core/themes/claro/css/theme/maintenance-page.pcss.css b/core/themes/claro/css/theme/maintenance-page.pcss.css
index 8e3784728b87..5814d6c1c933 100644
--- a/core/themes/claro/css/theme/maintenance-page.pcss.css
+++ b/core/themes/claro/css/theme/maintenance-page.pcss.css
@@ -1,6 +1,8 @@
/**
* @file
* Maintenance theming.
+ *
+ * These styles affect the installation UI, maintenance page, and the database update UI.
*/
.maintenance-page {
@@ -8,17 +10,35 @@
background-color: var(--color-gray-100);
}
-.title {
- margin-top: 0;
+h1,
+h2 {
+ font-size: var(--font-size-h3);
+}
+
+h3 {
+ font-size: var(--font-size-h4);
}
.site-name {
- margin-top: var(--space-m);
+ margin-top: var(--space-s);
word-wrap: break-word;
+ color: var(--color-gray);
+ font-size: var(--font-size-xl);
+}
+.site-name--subtle {
+ margin-top: var(--space-s);
color: var(--color-gray-800);
font-size: var(--font-size-h4);
}
+.title {
+ margin-top: 0;
+ font-size: var(--font-size-h3);
+}
+.title--broad {
+ font-size: var(--font-size-h1);
+}
+
.site-name,
.title {
margin-bottom: var(--space-l);
@@ -26,17 +46,21 @@
.content {
margin-bottom: var(--space-m);
+ color: var(--color-gray);
+}
+.content--subtle {
color: var(--color-gray-800);
}
.site-name,
.title,
.content {
- max-width: 512px;
+ max-width: 34rem;
}
/**
- * Task list & step indicator
+ * Task list & step indicator.
+ * Shows on both the install screen and the database update page.
*/
@media all and (max-width: 48em) { /* 768px */
header[role="banner"] {
@@ -53,9 +77,6 @@
right: auto;
left: 0.5em;
}
- .task-list {
- display: none;
- }
}
@media all and (min-width: 48em) { /* 768px */
@@ -63,49 +84,44 @@
display: none;
}
.task-list {
- margin-left: 0; /* LTR */
- padding-bottom: 1em;
- padding-left: 0; /* LTR */
+ margin-left: -3rem; /* LTR */
+ padding: 0;
list-style-type: none;
+ counter-reset: steps;
+ font-weight: bold;
}
[dir="rtl"] .task-list {
- margin-right: 0;
- padding-right: 0;
+ margin-right: -3rem;
+ margin-left: 0;
}
.task-list li {
- padding: 0.5em 1em 0.5em 3.85em; /* LTR */
- color: #1a1a1a;
+ padding: 1rem 1rem 1rem 3rem; /* LTR */
+ counter-increment: steps;
+ color: var(--color-gray);
+ border-radius: 0 2rem 2rem 0 /* LTR */;
+ font-weight: 500;
}
[dir="rtl"] .task-list li {
- padding: 0.5em 3.85em 0.5em 1em;
+ padding: 1rem 3rem 1rem 1rem;
+ border-radius: 2rem 0 0 2rem;
}
- .task-list .is-active {
- position: relative;
- background: #ebeae4;
- font-weight: normal;
+ .task-list li:before {
+ margin-right: 0.375rem;
+ content: counter(steps);
}
- .task-list .is-active:after {
- position: absolute;
- top: 50%;
- left: 100%; /* LTR */
- width: 0;
- height: 0;
- margin-top: -1.269em;
- content: " ";
- pointer-events: none;
- border: solid transparent;
- border-width: 1.269em;
- border-color: rgba(235, 234, 228, 0);
- border-left-color: #ebeae4; /* LTR */
- }
- [dir="rtl"] .task-list .is-active:after {
- right: 100%;
- left: auto;
- border-right-color: #ebeae4;
- border-left-color: transparent;
+ [dir="rtl"] .task-list li:before {
+ margin-right: 0;
+ margin-left: 0.375rem;
+ }
+
+ .task-list .is-active {
+ color: var(--color-absolutezero);
+ border: 1px solid transparent; /* Required for forced-colors mode. */
+ background: var(--color-bgblue-active);
+ font-weight: 500;
}
.task-list .done {
- color: #adadad;
+ color: var(--color-gray-700);
}
}
@@ -117,11 +133,12 @@
margin-right: 1.25em;
margin-left: 1.25em;
padding: var(--space-xl);
+ border: 1px solid transparent; /* Required for forced-colors mode. */
border-radius: 8px;
background: #fff;
box-shadow: var(--shadow-z3);
}
-.layout-container:after { /* no reason for a clearfix in the markup */
+.layout-container:after { /* No reason for a clearfix in the markup. */
display: table;
clear: both;
content: "";
@@ -132,6 +149,10 @@
margin: 1.25em;
padding: var(--space-m) var(--space-l);
}
+
+ .layout-sidebar-first {
+ display: none;
+ }
}
@media all and (min-width: 48em) { /* 768px */
@@ -164,8 +185,10 @@
padding: 15px;
}
[dir="rtl"] ul {
- margin-right: 0; /* Overrides default [dir="rtl"] ul margin */
+ margin-right: 0; /* Overrides default [dir="rtl"] ul margin. */
}
+
+ /* Positioning sidebar & content. */
.layout-sidebar-first {
float: left; /* LTR */
width: 35%;
@@ -173,19 +196,22 @@
[dir="rtl"] .layout-sidebar-first {
float: right;
}
- /* Positioning sidebar & content */
- main {
+
+ .main-content {
float: left; /* LTR */
clear: none;
box-sizing: border-box;
width: 65%;
padding-left: 3.85em; /* LTR */
}
- [dir="rtl"] main {
+ [dir="rtl"] .main-content {
float: right;
padding-right: 3.85em;
padding-left: 0;
}
+ .main-content--attached {
+ padding-left: 0;
+ }
}
/**
@@ -205,3 +231,28 @@
padding-right: 3em;
padding-left: 1em;
}
+
+/**
+ * Updates list customization for update page.
+ */
+.update-results {
+ overflow: auto; /* Required to prevent text clipping. */
+ margin-top: 0;
+ padding: var(--space-s);
+ border: 1px solid var(--color-gray-100);
+ border-radius: var(--base-border-radius);
+ background: var(--color-gray-050);
+}
+.update-results > h3:first-child {
+ margin-top: 0;
+}
+.update-results .failure strong {
+ color: var(--color-maximumred);
+}
+
+.item-list > h3 {
+ font-size: var(--font-size-h5);
+}
+.item-list > ul {
+ margin-left: 0;
+}
diff --git a/core/themes/claro/templates/install-page.html.twig b/core/themes/claro/templates/install-page.html.twig
index c51fe6369967..bd22c5a94598 100644
--- a/core/themes/claro/templates/install-page.html.twig
+++ b/core/themes/claro/templates/install-page.html.twig
@@ -13,7 +13,7 @@
<header role="banner">
{% if site_name %}
- <h1 class="page-title">
+ <h1 class="site-name">
{{ site_name }}
{% if site_version %}
<span class="site-version">{{ site_version }}</span>
@@ -28,9 +28,9 @@
</aside>{# /.layout-sidebar-first #}
{% endif %}
- <main role="main">
+ <main role="main" class="main-content">
{% if title %}
- <h2 class="heading-a">{{ title }}</h2>
+ <h2 class="heading-c">{{ title }}</h2>
{% endif %}
{{ page.highlighted }}
{{ page.content }}
diff --git a/core/themes/claro/templates/maintenance-page--front.html.twig b/core/themes/claro/templates/maintenance-page--front.html.twig
new file mode 100644
index 000000000000..12a364ee6a00
--- /dev/null
+++ b/core/themes/claro/templates/maintenance-page--front.html.twig
@@ -0,0 +1,45 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation to display the maintenance page as frontpage.
+ *
+ * This is template used for rendering the page displayed for users when the
+ * site is under maintenance.
+ *
+ * All available variables are mirrored in page.html.twig.
+ * Some may be blank but they are provided for consistency.
+ *
+ * @see template_preprocess_maintenance_page()
+ */
+#}
+<div class="layout-container">
+
+ <header role="banner">
+ {% if site_name %}
+ <h2 class="site-name site-name--subtle">{{ site_name }}</h2>
+ {% endif %}
+ </header>
+
+ {% if page.sidebar_first %}
+ <aside class="layout-sidebar-first" role="complementary">
+ {{ page.sidebar_first }}
+ </aside>{# /.layout-sidebar-first #}
+ {% endif %}
+
+ <main role="main" class="main-content main-content--attached">
+ {% if title %}
+ <h1 class="title title--broad">{{ title }}</h1>
+ {% endif %}
+ {{ page.highlighted }}
+ <div class="content content--subtle">
+ {{ page.content }}
+ </div>
+ </main>
+
+ {% if page.page_bottom %}
+ <footer role="contentinfo">
+ {{ page.page_bottom }}
+ </footer>
+ {% endif %}
+
+</div>{# /.layout-container #}
diff --git a/core/themes/claro/templates/maintenance-page.html.twig b/core/themes/claro/templates/maintenance-page.html.twig
index 49e809cd85ea..9bbb9a0e0ce4 100644
--- a/core/themes/claro/templates/maintenance-page.html.twig
+++ b/core/themes/claro/templates/maintenance-page.html.twig
@@ -1,12 +1,16 @@
{#
/**
* @file
- * Claro's theme implementation to display a single Drupal page while offline.
+ * Claro's theme implementation for maintenance page.
+ *
+ * This template is used for rendering non-frontpage maintenance pages. An
+ * example of this is /update.php.
*
* All available variables are mirrored in page.html.twig.
* Some may be blank but they are provided for consistency.
*
* @see template_preprocess_maintenance_page()
+ * @see maintenance-page--front.html.twig
*/
#}
<div class="layout-container">
@@ -23,7 +27,7 @@
</aside>{# /.layout-sidebar-first #}
{% endif %}
- <main role="main">
+ <main role="main" class="main-content">
{% if title %}
<h1 class="title">{{ title }}</h1>
{% endif %}
--
GitLab