Issue #3085219 by mherchel, jwilson3, lauriii, andy-blum, javi-er, deviantintegral, raman.b, kostyashupenko, komalk, rootwork, rkoller, saschaeggi, Abhijith S, cindytwilliams, benjifisher, AaronMcHale, nod_, Gábor Hojtsy, ckrina, alexpott, huzooka: Installer is not very usable in Claro
Cristina Chumillas
parent
7700a2d18a
commit
2ed8bcf0e9
|
|
@ -52,7 +52,8 @@
|
|||
"composer/installers": true,
|
||||
"drupal/core-project-message": true,
|
||||
"drupal/core-vendor-hardening": true,
|
||||
"dealerdirect/phpcodesniffer-composer-installer": true
|
||||
"dealerdirect/phpcodesniffer-composer-installer": true,
|
||||
"phpstan/extension-installer": true
|
||||
}
|
||||
},
|
||||
"extra": {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -34,7 +34,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 {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ class InstallerTest extends InstallerTestBase {
|
|||
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.
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ class StandardInstallerTest extends ConfigAfterInstallerTestBase {
|
|||
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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
*/
|
||||
/*
|
||||
* Typography.
|
||||
*/ /* 18px */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
*/ /* 18px */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~36px */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
|
||||
/**
|
||||
* Spaces.
|
||||
*/ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
}
|
||||
|
||||
.messages {
|
||||
overflow: auto; /* Required to prevent text clipping. */
|
||||
box-sizing: border-box;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
}
|
||||
|
||||
.messages {
|
||||
overflow: auto; /* Required to prevent text clipping. */
|
||||
box-sizing: border-box;
|
||||
margin-top: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Installation styling.
|
||||
|
|
@ -11,37 +12,37 @@
|
|||
* 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: #dedfe4;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: #919297;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -5,20 +5,12 @@
|
|||
* Unfortunately we have to make our styling quite strong, to override the
|
||||
* .maintenance-page styling.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -38,8 +30,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) {
|
||||
|
|
|
|||
|
|
@ -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: #dedfe4;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
h1,
|
||||
h2 {
|
||||
font-size: 1.602rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.424rem;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
word-wrap: break-word;
|
||||
color: #232429;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.site-name--subtle {
|
||||
margin-top: 0.75rem;
|
||||
color: #55565b;
|
||||
font-size: 1.424rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
font-size: 1.602rem;
|
||||
}
|
||||
|
||||
.title--broad {
|
||||
font-size: 2.027rem;
|
||||
}
|
||||
|
||||
.site-name,
|
||||
.title {
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -33,17 +55,22 @@
|
|||
|
||||
.content {
|
||||
margin-bottom: 1rem;
|
||||
color: #232429;
|
||||
}
|
||||
|
||||
.content--subtle {
|
||||
color: #55565b;
|
||||
}
|
||||
|
||||
.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: #232429;
|
||||
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 li:before {
|
||||
margin-right: 0.375rem;
|
||||
content: counter(steps);
|
||||
}
|
||||
[dir="rtl"] .task-list li:before {
|
||||
margin-right: 0;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.task-list .is-active {
|
||||
position: relative;
|
||||
background: #ebeae4;
|
||||
font-weight: normal;
|
||||
}
|
||||
.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;
|
||||
color: #003ecc;
|
||||
border: 1px solid transparent; /* Required for forced-colors mode. */
|
||||
background: #e5edff;
|
||||
font-weight: 500;
|
||||
}
|
||||
.task-list .done {
|
||||
color: #adadad;
|
||||
color: #75767b;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -126,12 +145,13 @@
|
|||
margin-right: 1.25em;
|
||||
margin-left: 1.25em;
|
||||
padding: 3rem;
|
||||
border: 1px solid transparent; /* Required for forced-colors mode. */
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.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: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.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: 0.75rem;
|
||||
border: 1px solid #dedfe4;
|
||||
border-radius: 2px;
|
||||
background: #f3f4f9;
|
||||
}
|
||||
|
||||
.update-results > h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.update-results .failure strong {
|
||||
color: #dc2323;
|
||||
}
|
||||
|
||||
.item-list > h3 {
|
||||
font-size: 1.266rem;
|
||||
}
|
||||
|
||||
.item-list > ul {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/**
|
||||
* @file
|
||||
* Maintenance theming.
|
||||
*
|
||||
* These styles affect the installation UI, maintenance page, and the database update UI.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
|
@ -10,17 +12,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);
|
||||
|
|
@ -28,17 +48,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"] {
|
||||
|
|
@ -55,9 +79,6 @@
|
|||
right: auto;
|
||||
left: 0.5em;
|
||||
}
|
||||
.task-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 48em) { /* 768px */
|
||||
|
|
@ -65,49 +86,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 li:before {
|
||||
margin-right: 0.375rem;
|
||||
content: counter(steps);
|
||||
}
|
||||
[dir="rtl"] .task-list li:before {
|
||||
margin-right: 0;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.task-list .is-active {
|
||||
position: relative;
|
||||
background: #ebeae4;
|
||||
font-weight: normal;
|
||||
}
|
||||
.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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,11 +135,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: "";
|
||||
|
|
@ -134,6 +151,10 @@
|
|||
margin: 1.25em;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
}
|
||||
|
||||
.layout-sidebar-first {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 48em) { /* 768px */
|
||||
|
|
@ -166,8 +187,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%;
|
||||
|
|
@ -175,19 +198,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;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -207,3 +233,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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue