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;
 }
 
+tabs.new-style-tabs {

[Evan Stade, 2013/06/04 23:46:59]

add docs about .new-style-tabs: do we want to move all tabs to this style? If
not, .new-style-tabs might not be the best class name

[Rune Fevang, 2013/06/07 19:43:11]

I talked to one of the UX people, and he said the other uses should move to this
style too.

Where would I add documentation? Are there any examples?

[Rune Fevang, 2013/06/07 21:23:39]

Done.

+  -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;
 }