diff --git a/core/modules/outside_in/css/outside_in.form.css b/core/modules/outside_in/css/outside_in.form.css
index 90dc280..764d4ae 100644
--- a/core/modules/outside_in/css/outside_in.form.css
+++ b/core/modules/outside_in/css/outside_in.form.css
@@ -11,12 +11,19 @@
 }
 .ui-dialog-offcanvas .description,
 .ui-dialog-offcanvas .form-item .description,
-.ui-dialog-offcanvas .details-description {
+.ui-dialog-offcanvas .details-description,
+.ui-dialog-offcanvas .machine-name-label,
+.ui-dialog-offcanvas .machine-name-value {
   color: #ddd;
   margin-top: 5px;
   font-size: 12px;
   font-style: normal;
 }
+.ui-dialog-offcanvas small button.link {
+  margin: 0 5px;
+  font-size: 12px;
+  font-style: normal;
+}
 .ui-dialog-offcanvas .details-wrapper .description {
   color: #bbb;
 }
@@ -108,3 +115,4 @@
 .ui-dialog-offcanvas .form-actions {
   text-align: center;
 }
+
diff --git a/core/modules/outside_in/css/outside_in.verticaltabs.css b/core/modules/outside_in/css/outside_in.verticaltabs.css
new file mode 100644
index 0000000..58b0a5e
--- /dev/null
+++ b/core/modules/outside_in/css/outside_in.verticaltabs.css
@@ -0,0 +1,114 @@
+
+/*
+ * @file
+ * Override vertical tabs for settings tray.
+ */
+
+.ui-dialog-offcanvas .form-type-vertical-tabs label {
+  margin-bottom: 10px;
+}
+.ui-dialog-offcanvas .vertical-tabs {
+  margin: 0 -20px;
+  border: 0;
+  background: #333;
+}
+.ui-dialog-offcanvas .vertical-tabs__menu {
+  float: left; /* LTR */
+  width: 140px; /* fixed width so tabs dont 'bounce' if scroll is triggered */
+  margin: 0;
+  padding: 0;
+  border: 0;
+  list-style: none;
+}
+[dir="rtl"] .ui-dialog-offcanvas .vertical-tabs__menu {
+  float: right;
+  margin: 0;
+}
+.ui-dialog-offcanvas .vertical-tabs__pane {
+  float: right; /* LTR */
+  width: calc(100% - 140px); /* 140 is the width of tabs menu */
+  margin: 0;
+  border: 0;
+}
+[dir="rtl"] .ui-dialog-offcanvas .vertical-tabs__pane {
+  float: left;
+  margin: 0;
+  padding: 20px;
+}
+.ui-dialog-offcanvas .vertical-tabs .details-wrapper {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+.ui-dialog-offcanvas .vertical-tabs details {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 10px;
+}
+.ui-dialog-offcanvas .vertical-tabs fieldset.fieldgroup {
+  margin: 0;
+  padding: 0;
+}
+.ui-dialog-offcanvas .vertical-tabs__pane > summary {
+  display: none;
+}
+.ui-dialog-offcanvas details[open].vertical-tabs__pane {
+  background: transparent;
+}
+.ui-dialog-offcanvas .vertical-tabs_pane fieldset {
+  padding-top: 0;
+}
+
+/* Layout of each tab. */
+.ui-dialog-offcanvas .vertical-tabs__menu-item {
+  border: 0;
+  border-top: 0;
+  padding: 10px 5px 10px 20px; /* LTR */
+  background: transparent;
+  outline: none;
+  box-shadow: none;
+  transition: background 0.5s;
+}
+.ui-dialog-offcanvas .vertical-tabs__menu-item:hover {
+  background: #222;
+}
+[dir="rtl"] .ui-dialog-offcanvas .vertical-tabs__menu-item {
+  padding: 10px 20px 10px 5px; /* LTR */
+}
+.ui-dialog-offcanvas .vertical-tabs__menu-item a {
+  display: block;
+  padding: 0;
+  text-decoration: none;
+  color: #ddd;
+}
+.ui-dialog-offcanvas strong.vertical-tabs__menu-item-title {
+  font-weight: normal;
+}
+.ui-dialog-offcanvas .vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title,
+.ui-dialog-offcanvas .vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,
+.ui-dialog-offcanvas .vertical-tabs__menu-item a:hover .vertical-tabs__menu-item-title {
+  text-decoration: none;
+}
+.ui-dialog-offcanvas .vertical-tabs__menu-item a:hover,
+.ui-dialog-offcanvas .vertical-tabs__menu-item a:focus,
+.ui-dialog-offcanvas .vertical-tabs__menu-item a:active {
+  color: #fff;
+  outline: none;
+}
+.ui-dialog-offcanvas .vertical-tabs__menu-item.is-selected {
+  border: 0;
+  background-color: #111;
+}
+[dir="rtl"] .ui-dialog-offcanvas .vertical-tabs__menu-item.is-selected {
+  border: 0;
+}
+.ui-dialog-offcanvas .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title {
+  color: inherit;
+}
+.ui-dialog-offcanvas .vertical-tabs__menu-item-summary {
+  display: block;
+  margin-bottom: 0;
+  font-size: 0.85em;
+  color: #bbb;
+  line-height: inherit;
+}
diff --git a/core/modules/outside_in/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml
index 5eddea4..a52a005 100644
--- a/core/modules/outside_in/outside_in.libraries.yml
+++ b/core/modules/outside_in/outside_in.libraries.yml
@@ -9,6 +9,7 @@ drupal.outside_in:
       css/outside_in.form.css: {}
       css/outside_in.table.css: {}
       css/outside_in.details.css: {}
+      css/outside_in.verticaltabs.css: {}
       css/outside_in.tabledrag.css: {}
     theme:
       # @todo Set the group higher than CSS_AGGREGATE_THEME so that it overrides