Extension docs server: CSS and content tweaks.

chrome/common/extensions/docs/server2/static/css/site.css

Index: chrome/common/extensions/docs/server2/static/css/site.css
diff --git a/chrome/common/extensions/docs/server2/static/css/site.css b/chrome/common/extensions/docs/server2/static/css/site.css
index 07d057dda441d8872cc176c15b848f2cc9abff95..433fabd7df3b2b67c7f07573b6d47e7a08f78878 100644
--- a/chrome/common/extensions/docs/server2/static/css/site.css
+++ b/chrome/common/extensions/docs/server2/static/css/site.css
@@ -3,6 +3,10 @@
  * found in the LICENSE file.
  */
 
+.hidden {
+  display: none;
+}
+
 body {
   color: #333;
   font: 13px/22px 'Open Sans',arial,sans-serif;
@@ -23,23 +27,27 @@ p.caution,
 p.warning {
   margin: 1em 0 0 0;
   padding: .2em .5em .2em .9em;
-  background-color: #EFEFEF;
+  background-color: whiteSmoke;
   border-top: 1px solid;
   border-bottom: 1px solid;
+  overflow: hidden;
 }
 
 p.note {
   border-color: #36C;
 }
-
 p.caution {
   border-color: #FC3;
 }
-
 p.warning {
   border-color: #A03;
 }
 
+p.warning em,
+p.warning strong {
+  color: #A03;
+}
+
 a, a:link {
   text-decoration: none;
   color: black;
@@ -66,7 +74,18 @@ a:hover {
 
 #cse {
   width: 450px;
-  float: right;
+  position: absolute;
+  right: 0;
+  z-index: 1;

[cduvall, 2012/08/20 22:06:06]

This might need a higher z-index. Search for something on the apps/index.html
page, the video is on top of the search results.

[not at google - send to devlin, 2012/08/21 02:21:28]

As discussed in person, this might be a flash linux problem because I don't see
it on my mac.

+}
+
+/*
+ * Without a border, the results from the custom search are hard to tell apart
+ * from the rest of the content
+ */
+.gsc-resultsbox-visible {
+  border-left: 1px solid #E9E9E9;
+  border-bottom: 1px solid #E9E9E9;
 }
 
 li {
@@ -134,13 +153,14 @@ span.displayModeWarning {
   margin-right: 2ex;
 }
 
-.greytext {
+#cseSampleText {
   position: absolute;
   top: 95px;
   right: 250px;
   color: #AAA;
   font-size: 11px;
   height: 14px;
+  z-index: 1;
 }
 
 #gc-container {
@@ -194,6 +214,9 @@ span.displayModeWarning {
 #gc-topnav li a {
   color: #333;
 }
+#gc-topnav li a:hover {
+  color: #39f;
+}
 
 #gc-topnav div {
   border-top: 10px solid white;
@@ -255,97 +278,72 @@ span.displayModeWarning {
   margin: 0 0 0 0;
 }
 
-#gc-toc {
+#gc-sidebar {
   margin: 0;
+  margin-top: 2.5em;
   width: 180px;
   float: left;
 }
 
-#gc-toc * {
-  vertical-align: middle;
+#gc-sidebar span,
+#gc-sidebar a {
   color: #767676;
+  display: block;
+  position: relative;
 }
-
-#gc-toc span {
-  cursor: pointer;
+#gc-sidebar a:visited {
+  color: #767676;
 }
-
-#gc-toc ul {
-  border-bottom: 1px solid #E5E5E5;
-  padding: 2.9em 0 0;
-  margin: 0;
-  line-height: 120%;
-  list-style: none;
+#gc-sidebar a:hover,
+#gc-sidebar a.selected {
+  color: #39F;
 }
-
-#gc-toc > ul {
-  border-bottom: none;
+#gc-sidebar a.button {
+  color: #767676;
 }
 
-#gc-toc ul li {
-  padding-bottom: 10px;
-  margin: 0;
-  position: relative;
+#gc-sidebar ul {
+  list-style: none;
+  padding: 0;
 }
-
-#gc-toc ul li ul li ul {
-  margin-top: 10px;
-  margin-left: 25px;
-  padding-left: 0;
-  border-bottom: 0;
-  list-style: url(../images/sidearrow.png);
+#gc-sidebar ul.level2 {
+  margin-left: 10px;
+  padding-top: 10px;
 }
-
-#gc-toc ol ul {
-  color: #767676;
+#gc-sidebar ul.level3 {
+  margin-left: 20px;
+  padding-top: 10px;
 }
 
-#gc-toc ul li li {
-  /* Cancel the border-bottom on #gc-toc ul. */
-  border-bottom: none;
-  padding-left: 10px;
+#gc-sidebar li {
+  margin: 0;
+  padding: 8px 0;
+  line-height: 120%;
 }
 
-#gc-toc h2 {
+#gc-sidebar li.level2 {
+  border-top: 1px solid #E5E5E5;
+}
+#gc-sidebar span.level2,
+#gc-sidebar a.level2 {
   font-weight: bold;
-  font-size: 100%;
-  margin: 0;
-  padding: .2em 0 8px .2em;
-  border: none;
-  background: white;
 }
-
-#gc-toc ul ul {
-  padding: 0;
-  margin: 0;
+#gc-sidebar ul.level3 {
+  list-style: url(../images/sidearrow.png);
 }
 
-#gc-toc .toggle {
-  background: url(../images/toggle_sprite.png) no-repeat 0px 0px;
-  width: 9px;
-  height: 9px;
+#gc-sidebar .toggleIndicator {
   position: absolute;
-  top: -1px;
-  right: 4px;
-  text-decoration: none;
-  margin: 8px 1px 4px -13px;
-  cursor: pointer;
+  right: 0;
+  top: 3px;
+  background: url(../images/toggle_sprite.png) no-repeat 0 0;
+  height: 8px;
+  width: 8px;
 }
-
-#gc-toc .toggle.selected {
+#gc-sidebar .toggleIndicator.toggled {
   background-position: 0 -9px;
 }
 
-#gc-toc .toggle:active {
-  top: 0px;
-}
-
-#gc-toc .leftNavSelected {
-  color: #39F;
-  text-decoration: none;
-  position: relative;
-}
-
 #gc-toc div.line {
   border-top: thin solid #FAFAFA;
   height: 1px;
@@ -354,7 +352,7 @@ span.displayModeWarning {
 }
 
 #toc {
-  background-color: #E8EDEB;
+  background-color: whiteSmoke;
   float: right;
   margin: 5px 0px 5px 20px;
   padding: 5px;
@@ -364,6 +362,7 @@ span.displayModeWarning {
 #toc * {
   padding: 0;
   list-style: none;
+  font-weight: 600;
 }
 
 #toc h2 {
@@ -371,7 +370,7 @@ span.displayModeWarning {
   font-size: 100%;
   margin: 0;
   border: none;
-  background-color: #E8EDEB;
+  background-color: whiteSmoke;
   padding: 0;
 }