Issue #1989488 by echoz, LewisNyman: Vertical tabs style update.

core/misc/vertical-tabs-rtl.css

@@ -3,12 +3,12 @@
   margin-left: 0;
   margin-right: 15em;
 }
-.vertical-tabs .vertical-tabs-list {
+.vertical-tabs-list {
+  float: right;
   margin-left: 0;
   margin-right: -15em;
-  float: right;
 }
-.vertical-tabs .vertical-tabs-list .selected {
+.vertical-tab-button.selected {
   border-left-width: 0;
   border-right-width: 1px;
 }

core/misc/vertical-tabs.css

@@ -3,15 +3,15 @@
   margin: 1em 0 1em 15em; /* LTR */
   border: 1px solid #ccc;
 }
-.vertical-tabs .vertical-tabs-list {
+.vertical-tabs-list {
+  float: left; /* LTR */
   width: 15em;
-  list-style: none;
-  border-top: 1px solid #ccc;
-  padding: 0;
   margin: -1px 0 -1px -15em; /* LTR */
-  float: left; /* LTR */
+  padding: 0;
+  border-top: 1px solid #ccc;
+  list-style: none;
 }
-.vertical-tabs .vertical-tabs-pane {
+.vertical-tabs-pane {
   margin: 0;
   border: 0;
 }
@@ -20,37 +20,35 @@
 }
 
 /* Layout of each tab */
-.vertical-tabs .vertical-tabs-list li {
-  background: #eee;
+.vertical-tab-button {
+  margin: 0;
+  padding: 0;
   border: 1px solid #ccc;
   border-top: 0;
-  padding: 0;
-  margin: 0;
+  background: #eee;
 }
-.vertical-tabs .vertical-tabs-list a {
+.vertical-tab-button a {
   display: block;
-  text-decoration: none;
   padding: 0.5em 0.6em;
+  text-decoration: none;
 }
-.vertical-tabs .vertical-tabs-list a:focus strong,
-.vertical-tabs .vertical-tabs-list a:active strong,
-.vertical-tabs .vertical-tabs-list a:hover strong {
+.vertical-tab-button a:focus strong,
+.vertical-tab-button a:active strong,
+.vertical-tab-button a:hover strong {
   text-decoration: underline;
 }
-.vertical-tabs .vertical-tabs-list a:hover {
+.vertical-tab-button a:hover {
   outline: 1px dotted;
 }
-.vertical-tabs .vertical-tabs-list .selected {
-  background-color: #fff;
+.vertical-tab-button.selected {
   border-right-width: 0; /* LTR */
+  background-color: #fff;
 }
-.vertical-tabs .vertical-tabs-list .selected strong {
+.vertical-tab-button.selected strong {
   color: #000;
 }
-.vertical-tabs .vertical-tabs-list .summary {
+.vertical-tab-button .summary {
   display: block;
-}
-.vertical-tabs .vertical-tabs .vertical-tabs-list .summary {
-  line-height: normal;
   margin-bottom: 0;
+  line-height: normal;
 }

core/themes/seven/vertical-tabs-rtl.css

-
 /**
  * Override of misc/vertical-tabs-rtl.css.
  */
-.vertical-tabs {
-  background: #fff url(images/fc-rtl.png) repeat-y right 0;
-}
-.vertical-tabs .vertical-tabs-list {
+.vertical-tabs-list {
   float: right;
   margin: 0 0 -1px -100%;
 }
-.vertical-tabs .selected a,
-.vertical-tabs .selected a:hover,
-.vertical-tabs .selected a:focus,
-.vertical-tabs .selected a:active {
-  border-left-color: #fff;
+.vertical-tab-button.selected {
+  border-left: 1px solid #fcfcfa;
 }
-.vertical-tabs .vertical-tabs-panes {
-  margin: 0 245px 0 0;
+.vertical-tabs-panes {
+  margin: 0 240px 0 0;
+  border-right: 1px solid #a6a5a1;
 }

core/themes/seven/vertical-tabs.css

-
 /**
  * Override of misc/vertical-tabs.css.
  */
 .vertical-tabs {
-  background: #fff url(images/fc.png) repeat-y 0 0; /* LTR */
-  border: 1px solid #ccc;
-  margin: 10px 0;
   position: relative;
+  overflow: hidden;
+  margin: 10px 0;
+  border: 1px solid #bdbdbd;
+  border-radius: 4px;
+  background: #e6e5e1;
 }
-.vertical-tabs-pane {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-.vertical-tabs .vertical-tabs-list {
-  border-bottom: 1px solid #ccc;
+.vertical-tabs-list {
   float: left; /* LTR */
-  font-size: 1em;
-  line-height: 1;
+  width: 240px;
   margin: 0 -100% -1px 0; /* LTR */
   padding: 0;
-  width: 240px;
+  border-bottom: 1px solid #ccc;
+  line-height: 1;
 }
-.vertical-tabs .vertical-tab-button {
+.vertical-tab-button {
+  position: relative;
+  margin: 0;
   list-style: none;
   list-style-image: none;
-  margin: 0;
 }
-.vertical-tabs .vertical-tab-button a {
-  border-top: 1px solid #ccc;
-  display: block;
-  padding: 10px;
+.vertical-tab-button.selected {
+  z-index: 1;
+  overflow-x: hidden;
+  width: 100%;
+  border-right: 1px solid #fcfcfa; /* LTR */
+  box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
 }
-.vertical-tabs .first a {
-  border-top: 0;
+.vertical-tab-button:focus,
+.vertical-tab-button:active {
+  z-index: 2;
 }
-.vertical-tabs .vertical-tab-button strong {
-  font-size: 0.923em;
-}
-.vertical-tabs .vertical-tab-button .summary {
-  color: #666;
+.vertical-tab-button a {
   display: block;
-  font-size: 0.846em;
-  padding-top: 0.4em;
+  padding: 10px 15px 15px;
+  border-bottom: 1px solid #b3b2ad;
+  background-color: #f2f2f0;
+  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+  text-decoration: none;
 }
-.vertical-tabs .vertical-tab-button a:hover,
-.vertical-tabs .vertical-tab-button a:focus {
-  background: #d5d5d5;
+.vertical-tab-button.last a {
+  border-bottom: 0;
+}
+.vertical-tab-button.selected a,
+.vertical-tab-button a:hover,
+.vertical-tab-button a:focus {
+  background: #fcfcfa;
+  text-shadow: none;
   text-decoration: none;
-  outline: 0;
 }
-.vertical-tabs .selected a,
-.vertical-tabs .selected a:hover,
-.vertical-tabs .selected a:focus,
-.vertical-tabs .selected a:active {
-  background: #fff;
-  border-right-color: #fff; /* LTR */
-  border-top: 1px solid #ccc;
+.vertical-tab-button.selected a {
+  border-bottom-color: #b3b2ad;
+  color: #004f80;
 }
-.vertical-tabs .first.selected a,
-.vertical-tabs .first.selected a:hover {
-  border-top: 0;
+.vertical-tab-button.selected a:hover,
+.vertical-tab-button.selected a:focus {
+  color: #007ecc;
 }
-.vertical-tabs .selected a:focus strong {
-  text-decoration: underline;
+.vertical-tabs-panes {
+  margin: 0 0 0 240px; /* LTR */
+  padding: 10px 15px 10px 15px;
+  border-left: 1px solid #a6a5a1; /* LTR */
+  background-color: #fcfcfa;
 }
-.vertical-tabs .vertical-tabs-panes {
-  margin: 0 0 0 245px; /* LTR */
+.vertical-tabs-panes:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.vertical-tabs-pane {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: #595959;
+}
+.vertical-tab-button strong {
+  font-size: 0.923em;
+}
+.vertical-tab-button .summary {
+  display: block;
+  padding-top: 0.4em;
+  color: #666;
+  font-size: 0.846em;
+}
+.vertical-tab-button.selected a:focus strong {
+  text-decoration: underline;
 }
 .vertical-tabs-pane > summary {
   display: none;