Change Certificate Viewer WebUI to match new style.

ui/webui/resources/css/tabs.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 tabbox {
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
 
 tabs {
   -webkit-padding-start: 8px;
   background: -webkit-linear-gradient(white, rgb(243, 243, 243));
   border-bottom: 1px solid rgb(160, 160, 160);
   display: -webkit-box;
   margin: 0;
 }
 
+/* New users of tabs.css should add 'new-style-tabs' to the class list of any
+ * 'tabs' or 'tabpanels' elements.
+ *
+ * TODO(rfevang): Remove when all users are converted to the new style.
+ *                (crbug.com/247772).
+ */
+tabs.new-style-tabs {
+  -webkit-padding-start: 9px;
+  background: #fbfbfb;
+  border-bottom: 1px solid #c8c8c8;
+  padding-top: 14px;
+}
+
 tabs > * {
   -webkit-margin-start: 5px;
   -webkit-transition: border-color 150ms, background-color 150ms;
   background: rgba(160, 160, 160, .3);
   border: 1px solid rgba(160, 160, 160, .3);
   border-bottom: 0;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   cursor: default;
   display: block;
   min-width: 4em;
   padding: 2px 10px;
   text-align: center;
 }
 
+tabs.new-style-tabs > * {
+  -webkit-margin-start: 0;
+  -webkit-transition: none;
+  background: #fbfbfb;
+  border: 1px solid #fbfbfb;
+  border-bottom: 0;
+  border-radius: 0;
+  min-width: 0;
+  padding: 4px 9px 4px 10px;
+}
+
 tabs > :not([selected]) {
   background: rgba(238, 238, 238, .3);
 }
 
+tabs.new-style-tabs > :not([selected]) {
+  background: #fbfbfb;
+  color: #646464;
+}
+
 tabs > :not([selected]):hover {
   background: rgba(247, 247, 247, .3);
 }
 
+tabs.new-style-tabs > :not([selected]):hover {
+  background: #fbfbfb;
+  color: black;
+}
+
 tabs > [selected] {
   -webkit-transition: none;
   background: white;
   border-color: rgb(160, 160, 160);
   margin-bottom: -1px;
   position: relative;
   z-index: 0;
 }
 
+tabs.new-style-tabs > [selected] {
+  background: #fbfbfb;
+  border-color: #c8c8c8;
+  font-weight: bold;
+}
+
 tabs:focus {
   outline: none;
 }
 
 html.focus-outline-visible tabs:focus > [selected] {
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
 
 tabpanels {
   -webkit-box-flex: 1;
   background: white;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
   display: -webkit-box;
   padding: 5px 15px 0 15px;
 }
 
+tabpanels.new-style-tabs {
+  background: #fbfbfb;
+  box-shadow: none;
+  padding: 0 20px;
+}
+
 tabpanels > * {
   -webkit-box-flex: 1;
   display: none;
 }
 
 tabpanels > [selected] {
   display: block;
 }