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..d691f3e216d7b5bcd65e281eac3728c26851b036 100644
--- a/ui/webui/resources/css/tabs.css
+++ b/ui/webui/resources/css/tabs.css
@@ -15,6 +15,13 @@ tabs {
   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;
@@ -30,14 +37,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 +75,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 +98,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;