Change Certificate Viewer WebUI to match new style.

ui/webui/resources/css/tabs.css

Index: ui/webui/resources/css/tabs.css
diff --git a/ui/webui/resources/css/tabs.css b/ui/webui/resources/css/tabs.css
index 5db2d76227d3aa985266fc83a30291c5ff3dd417..1b0ffeb73f495450c8d40b2474efc8d7a6a3db87 100644
--- a/ui/webui/resources/css/tabs.css
+++ b/ui/webui/resources/css/tabs.css
@@ -15,6 +15,19 @@ tabs {
   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;
@@ -30,14 +43,35 @@ tabs > * {
   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;
@@ -47,6 +81,12 @@ tabs > [selected] {
   z-index: 0;
 }
 
+tabs.new-style-tabs > [selected] {
+  background: #fbfbfb;
+  border-color: #c8c8c8;
+  font-weight: bold;
+}
+
 tabs:focus {
   outline: none;
 }
@@ -64,6 +104,12 @@ tabpanels {
   padding: 5px 15px 0 15px;
 }
 
+tabpanels.new-style-tabs {
+  background: #fbfbfb;
+  box-shadow: none;
+  padding: 0 20px;
+}
+
 tabpanels > * {
   -webkit-box-flex: 1;
   display: none;