diff --git a/core/includes/install.core.inc b/core/includes/install.core.inc
index 74f82baca84..d335e651d78 100644
--- a/core/includes/install.core.inc
+++ b/core/includes/install.core.inc
@@ -910,7 +910,6 @@ function install_display_output($output, $install_state) {
       '#theme' => 'task_list',
       '#items' => install_tasks_to_display($install_state),
       '#active' => $active_task,
-      '#variant' => 'install',
     );
     drupal_add_region_content('sidebar_first', drupal_render($task_list));
   }
diff --git a/core/includes/theme.maintenance.inc b/core/includes/theme.maintenance.inc
index d3023b9a65f..57183d6d4ba 100644
--- a/core/includes/theme.maintenance.inc
+++ b/core/includes/theme.maintenance.inc
@@ -109,23 +109,16 @@ function _drupal_maintenance_theme() {
  *   An associative array containing:
  *   - items: An associative array of maintenance tasks.
  *   - active: The key for the currently active maintenance task.
- *   - variant: A variant name to be used for a CSS class.
  *
  * @ingroup themeable
  */
 function theme_task_list($variables) {
   $items = $variables['items'];
   $active = $variables['active'];
-  if (isset($variables['variant'])) {
-    $class = $variables['variant'] . '-task-list';
-  }
-  else {
-    $class = 'task-list';
-  }
 
   $done = isset($items[$active]) || $active == NULL;
   $output = '<h2 class="visually-hidden">Installation tasks</h2>';
-  $output .= '<ol class="' . $class . '">';
+  $output .= '<ol class="task-list">';
 
   foreach ($items as $k => $item) {
     if ($active == $k) {
diff --git a/core/themes/seven/install-page.css b/core/themes/seven/install-page.css
index 7981932a6db..5c3bf83c48f 100644
--- a/core/themes/seven/install-page.css
+++ b/core/themes/seven/install-page.css
@@ -23,171 +23,6 @@
   background-position: left top, 50% 50%;
   min-height: 100%;
 }
-.install-page {
-  background: none;
-}
-.name-and-slogan h1 {
-  font-size: 2em;
-  line-height: 1.2em;
-  color: #0074bd;
-}
-
-/**
- * Layout
- */
-.install-page .l-container {
-  background: #fff;
-  width: auto;
-  margin-left: 1.25em;
-  margin-right: 1.25em;
-}
-.install-page .l-container:after { /* no reason for a clearfix in the markup */
-  content: "";
-  display: table;
-  clear: both;
-}
-@media all and (max-width: 48em) { /* 768px */
-  .install-page .l-container {
-    margin-top: 1.25em;
-    padding: 10px 20px 0;
-  }
-  .install-page .name-and-slogan {
-    margin: 0 0 1.45em 0;
-  }
-}
-
-@media all and (min-width: 48em) { /* 768px */
-  html {
-    display: table;
-  }
-  .install-page {
-    display: table-cell;
-    padding: 1em 0;
-    vertical-align: middle;
-  }
-  html, .install-page {
-    margin: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .install-page .l-container {
-    margin: 0 auto;
-    max-width: 770px;
-    width: 75%;
-    border-radius: 5px;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-    padding: 20px 0 40px 0;
-  }
-
-  /* Positioning sidebar & content */
-  .install-page [role="main"] {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    clear: none;
-    float: left;
-    padding-left: 3.85em;
-    padding-right: 3.85em;
-    width: 65%;
-  }
-  [dir="rtl"] .install-page [role="main"] {
-    float: right;
-  }
-  ul {
-    padding: 15px;
-    margin: 0.25em 0;
-  }
-  .install-page .l-sidebar-first {
-    float: left;
-    width: 35%;
-  }
-  [dir="rtl"] .install-page .l-sidebar-first {
-    float: right;
-  }
-
-  /* Margins for sitename */
-  .install-page .name-and-slogan h1 {
-    margin: 0.75em 0 0.75em 1.9em; /* LTR */
-  }
-  [dir="rtl"] .install-page .name-and-slogan h1 {
-    margin: 0.75em 1.9em 0.75em 0;
-  }
-}
-
-/**
- * Task list & step indicator
- */
-@media all and (max-width: 48em) { /* 768px */
-  header[role="banner"] {
-    position: relative;
-  }
-  .step-indicator {
-    display: block;
-    font-size: 1.385em;
-    position: absolute;
-    top: 0.2em;
-    right: 0.5em;
-  }
-  [dir="rtl"] .step-indicator {
-    left: 2em;
-    right: auto;
-  }
-  .install-task-list {
-    display: none;
-  }
-}
-
-@media all and (min-width: 48em) { /* 768px */
-  .step-indicator {
-    display: none;
-  }
-  .install-task-list {
-    margin-left: 0; /* LTR */
-    list-style-type: none;
-    list-style-image: none;
-    padding-left: 0; /* LTR */
-    padding-bottom: 1em;
-  }
-  [dir="rtl"] .install-task-list {
-    margin-right: 0;
-    padding-right: 0;
-  }
-  .install-task-list li {
-    padding: 0.5em 1em 0.5em 3.85em; /* LTR */
-    color: #1a1a1a;
-  }
-  [dir="rtl"] .install-task-list li {
-    padding: 0.5em 1em 0.5em 1em;
-  }
-  .install-task-list .active {
-    background: #ebeae4;
-    position: relative;
-    font-weight: normal;
-  }
-  .install-task-list .active:after {
-    left: 100%; /* LTR */
-    border: solid transparent;
-    border-color: rgba(235, 234, 228, 0);
-    border-left-color: #ebeae4; /* LTR */
-    border-width: 1.35em;
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    top: 50%;
-    margin-top: -1.32em;
-  }
-  [dir="rtl"] .install-task-list .active:after {
-    left: auto;
-    right: 100%;
-    border-left-color: transparent;
-    border-right-color: #ebeae4;
-  }
-  .install-task-list .done {
-    color: #adadad;
-  }
-}
 
 /**
  * Password widget
diff --git a/core/themes/seven/js/mobile.install.js b/core/themes/seven/js/mobile.install.js
index 2326c241f62..28268bfe0d7 100644
--- a/core/themes/seven/js/mobile.install.js
+++ b/core/themes/seven/js/mobile.install.js
@@ -16,7 +16,7 @@
   }
 
   function installStepsSetup () {
-    var steps = document.querySelectorAll('.install-task-list li');
+    var steps = document.querySelectorAll('.task-list li');
     if (steps.length) {
       var header = document.querySelector('header[role="banner"]');
       var stepIndicator = document.createElement('div');
diff --git a/core/themes/seven/maintenance-page.css b/core/themes/seven/maintenance-page.css
new file mode 100644
index 00000000000..bc56fa065b5
--- /dev/null
+++ b/core/themes/seven/maintenance-page.css
@@ -0,0 +1,184 @@
+/**
+ * @file
+ * Maintenance theming.
+ */
+.maintenance-background {
+  background-color: #e0e0d8;
+  background-image: -webkit-radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
+  background-image: -moz-radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
+  background-image: -o-radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
+  background-image: radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
+  background-repeat: repeat;
+  background-position: left top, 50% 50%;
+  min-height: 100%;
+}
+
+/* Maintenance theming */
+.install-page,
+.in-maintenance {
+  background: none;
+}
+.name-and-slogan h1 {
+  font-size: 2em;
+  line-height: 1.2em;
+  color: #0074bd;
+}
+
+/**
+ * Task list & step indicator
+ */
+@media all and (max-width: 48em) { /* 768px */
+  header[role="banner"] {
+    position: relative;
+  }
+  .step-indicator {
+    display: block;
+    font-size: 1.385em;
+    position: absolute;
+    top: 0.2em;
+    right: 0.5em;
+  }
+  [dir="rtl"] .step-indicator {
+    left: 2em;
+    right: auto;
+  }
+  .task-list {
+    display: none;
+  }
+}
+
+@media all and (min-width: 48em) { /* 768px */
+  .step-indicator {
+    display: none;
+  }
+  .task-list {
+    margin-left: 0; /* LTR */
+    list-style-type: none;
+    list-style-image: none;
+    padding-left: 0; /* LTR */
+    padding-bottom: 1em;
+  }
+  [dir="rtl"] .task-list {
+    margin-right: 0;
+    padding-right: 0;
+  }
+  .task-list li {
+    padding: 0.5em 1em 0.5em 3.85em; /* LTR */
+    color: #1a1a1a;
+  }
+  [dir="rtl"] .task-list li {
+    padding: 0.5em 1em 0.5em 1em;
+  }
+  .task-list .active {
+    background: #ebeae4;
+    position: relative;
+    font-weight: normal;
+  }
+  .task-list .active:after {
+    left: 100%; /* LTR */
+    border: solid transparent;
+    border-color: rgba(235, 234, 228, 0);
+    border-left-color: #ebeae4; /* LTR */
+    border-width: 1.35em;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -1.32em;
+  }
+  [dir="rtl"] .task-list .active:after {
+    left: auto;
+    right: 100%;
+    border-left-color: transparent;
+    border-right-color: #ebeae4;
+  }
+  .task-list .done {
+    color: #adadad;
+  }
+}
+
+/**
+ * Layout
+ */
+.l-container {
+  background: #fff;
+  width: auto;
+  margin-left: 1.25em;
+  margin-right: 1.25em;
+}
+.l-container:after { /* no reason for a clearfix in the markup */
+  content: "";
+  display: table;
+  clear: both;
+}
+@media all and (max-width: 48em) { /* 768px */
+  .l-container {
+    margin: 1.25em;
+    padding: 10px 20px;
+  }
+  .name-and-slogan {
+    margin: 0 0 1.45em 0;
+  }
+}
+
+@media all and (min-width: 48em) { /* 768px */
+  html {
+    display: table;
+  }
+  .in-maintenance,
+  .install-page {
+    display: table-cell;
+    padding: 1em 0;
+    vertical-align: middle;
+  }
+  html, .install-page, .in-maintenance {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .l-container {
+    margin: 0 auto;
+    max-width: 770px;
+    width: 75%;
+    border-radius: 5px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    padding: 20px 0 40px 0;
+  }
+
+  /* Positioning sidebar & content */
+  main {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    clear: none;
+    float: left;
+    padding-left: 3.85em;
+    padding-right: 3.85em;
+    width: 65%;
+  }
+  [dir="rtl"] main {
+    float: right;
+  }
+  ul {
+    padding: 15px;
+    margin: 0.25em 0;
+  }
+  .l-sidebar-first {
+    float: left;
+    width: 35%;
+  }
+  [dir="rtl"] .l-sidebar-first {
+    float: right;
+  }
+
+  /* Margins for sitename */
+  h1.page-title,
+  .name-and-slogan h1 {
+    margin: 0.75em 0 0.75em 1.9em; /* LTR */
+  }
+  [dir="rtl"] .name-and-slogan h1 {
+    margin: 0.75em 1.9em 0.75em 0;
+  }
+}
diff --git a/core/themes/seven/seven.base.css b/core/themes/seven/seven.base.css
index 59f4d5e5f5a..844712dad19 100644
--- a/core/themes/seven/seven.base.css
+++ b/core/themes/seven/seven.base.css
@@ -116,6 +116,7 @@ ul {
 ol {
   list-style-type: decimal;
   margin: 0.25em 0 0.25em 2em; /* LTR */
+  padding: 0;
 }
 [dir="rtl"] ol {
   margin: 0.25em 2em 0.25em 0;
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index 4d0dac11c48..fb22ac1287a 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -1,3 +1,13 @@
+maintenance-page:
+  version: VERSION
+  js:
+    js/mobile.install.js: {}
+  css:
+    theme:
+      maintenance-page.css: {}
+  dependencies:
+    - system/maintenance
+
 install-page:
   version: VERSION
   js:
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 6f5ce6b3f0c..c0a5a086817 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -274,7 +274,32 @@ function seven_preprocess_install_page(&$variables) {
 
   // Normally we could attach libraries via hook_page_alter(), but when the
   // database is inactive it's not called so we add them here.
-  $libraries['#attached']['library'][] = 'seven/install-page';
+  $libraries = array(
+    '#attached' => array(
+      'library' => array(
+        'seven/maintenance-page',
+        'seven/install-page',
+      ),
+    ),
+  );
+  drupal_render($libraries);
+}
+
+/**
+ * Implements hook_preprocess_maintenance_page().
+ */
+function seven_preprocess_maintenance_page(&$variables) {
+  $variables['styles'] = new RenderWrapper('drupal_get_css');
+  $variables['scripts'] = new RenderWrapper('drupal_get_js');
+  // // Normally we could attach libraries via hook_page_alter(), but when the
+  // // database is inactive it's not called so we add them here.
+  $libraries = array(
+    '#attached' => array(
+      'library' => array(
+        'seven/maintenance-page',
+      ),
+    ),
+  );
   drupal_render($libraries);
 }
 
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 5bd29b00f97..95daa960596 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -999,87 +999,6 @@ div.admin-options div.form-item {
   border: none;
 }
 
-/* Maintenance theming */
-body.in-maintenance #sidebar-first {
-  float: left; /* LTR */
-  max-width: 200px;
-  width: 25%;
-}
-[dir="rtl"] body.in-maintenance #sidebar-first {
-  float: right;
-}
-body.in-maintenance #content {
-  float: right; /* LTR */
-  clear: none;
-  width: 72%;
-}
-[dir="rtl"] body.in-maintenance #content {
-  float: left;
-}
-body.in-maintenance #page {
-  max-width: 770px;
-  margin: 0 auto;
-  padding-top: 2em;
-  width: 90%;
-}
-body.in-maintenance .branding__inner {
-  max-width: 770px;
-  margin: 0 auto;
-  float: none;
-  width: 90%;
-}
-body.in-maintenance .form-radios .form-type-radio {
-  padding: 2px 0;
-}
-body.in-maintenance div.form-item:after {
-  content: "";
-  display: none;
-  clear: none;
-}
-body.in-maintenance .form-submit {
-  display: block;
-}
-body.in-maintenance #logo {
-  margin-bottom: 1.5em;
-  max-width: 180px;
-}
-@media all and (max-width: 768px) {
-  body.in-maintenance #sidebar-first,
-  body.in-maintenance #content {
-    float: none;
-    max-width: none;
-    width: auto;
-  }
-}
-.task-list {
-  margin-left: 0; /* LTR */
-  list-style-type: none;
-  list-style-image: none;
-}
-[dir="rtl"] .task-list {
-  margin-right: 0;
-}
-.task-list li {
-  padding: 0.5em 1em 0.5em 20px; /* LTR */
-  color: #adadad;
-}
-[dir="rtl"] .task-list li {
-  padding: 0.5em 20px 0.5em 1em;
-}
-.task-list li.active {
-  background: transparent url(images/task-item.png) no-repeat 3px 50%; /* LTR */
-  padding: 0.5em 1em 0.5em 20px; /* LTR */
-  color: #000;
-}
-[dir="rtl"] .task-list li.active {
-  background: transparent url(images/task-item-rtl.png) no-repeat right 50%;
-  padding: 0.5em 20px 0.5em 1em;
-}
-.task-list li.done {
-  background: transparent url(images/task-check.png) no-repeat 0 50%;
-  color: green;
-}
-
 /* Field UI */
 
 #field-display-overview input.field-plugin-settings-edit {
diff --git a/core/themes/seven/templates/maintenance-page.html.twig b/core/themes/seven/templates/maintenance-page.html.twig
index dc691c17b31..a3d78d1461c 100644
--- a/core/themes/seven/templates/maintenance-page.html.twig
+++ b/core/themes/seven/templates/maintenance-page.html.twig
@@ -12,47 +12,53 @@
  */
 #}
 <!DOCTYPE html>
-<html{{ html_attributes }}>
-  <head>
-    <title>{{ head_title }}</title>
-    {{ head }}
-    {{ styles }}
-    {{ scripts }}
-  </head>
-  <body{{ attributes }}>
+<html{{ html_attributes }} class="maintenance-background">
+<head>
+  {{ head }}
+  <title>{{ head_title }}</title>
+  {{ styles }}
+  {{ scripts }}
+</head>
+<body{{ attributes }}>
+
+<div class="l-container">
 
   {{ page_top }}
 
-  <header id="branding">
-    <div class="branding__inner">
-      {% if title %}<h1 class="page-title">{{ title }}</h1>{% endif %}
-    </div>
+  <header role="banner">
+    {% if site_name or site_slogan %}
+      <div class="name-and-slogan">
+        {% if site_name %}
+          <h1>{{ site_name }}</h1>
+        {% endif %}
+        {% if site_slogan %}
+          <div class="site-slogan">{{ site_slogan }}</div>
+        {% endif %}
+      </div>{# /.name-and-slogan #}
+    {% endif %}
   </header>
 
-  <div id="page">
-    <div id="sidebar-first" class="sidebar">
-      {% if logo %}
-        <img id="logo" src="{{ logo }}" alt="{{ site_name }}" />
-      {% endif %}
+  {% if sidebar_first %}
+    <aside class="l-sidebar-first" role="complementary">
       {{ sidebar_first }}
-    </div>
+    </aside>{# /.l-sidebar-first #}
+  {% endif %}
 
-    <main id="content" class="clearfix">
-      {% if messages %}
-        <div id="console">{{ messages }}</div>
-      {% endif %}
-      {% if help %}
-        <div id="help">
-          {{ help }}
-        </div>
-      {% endif %}
-      {{ content }}
-    </main>
-  </div>
+  <main role="main">
+    {% if title %}
+      <h1>{{ title }}</h1>
+    {% endif %}
+    {{ messages }}
+    {{ content }}
+  </main>
 
-  <footer role="contentinfo">
-    {{ page_bottom }}
-  </footer>
+  {% if footer %}
+    <footer role="contentinfo">
+      {{ footer }}
+    </footer>
+  {% endif %}
 
-  </body>
+</div>{# /.l-container #}
+
+</body>
 </html>
diff --git a/core/update.php b/core/update.php
index cd94972eafa..8f7c325707b 100644
--- a/core/update.php
+++ b/core/update.php
@@ -211,7 +211,7 @@ function update_info_page() {
   $output .= "</ol>\n";
   $output .= "<p>When you have performed the steps above, you may proceed.</p>\n";
   $form_action = check_url(drupal_current_script_url(array('op' => 'selection', 'token' => $token)));
-  $output .= '<form method="post" action="' . $form_action . '"><p><input type="submit" value="Continue" class="form-submit button button-primary" /></p></form>';
+  $output .= '<form method="post" action="' . $form_action . '"><div class="form-actions form-wrapper" id="edit-actions"><input type="submit" value="Continue" class="button button--primary form-submit" /></div></form>';
   $output .= "\n";
 
   $build = array(