Extension docs server: CSS and content tweaks.

chrome/common/extensions/docs/server2/static/css/site.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.
  */
 
+.hidden {
+  display: none;
+}
+
 body {
   color: #333;
   font: 13px/22px 'Open Sans',arial,sans-serif;
   font-weight: 400;
   background-color: white;
   margin: 0;
   padding: 0;
 }
 
 p {
   margin: 1em 0 0 0;
   color: #767676;
   font-size: 14px;
 }
 
 p.note,
 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;
 }
 
 a:visited {
   color: #61C;
 }
 
 a:active,
 a:hover {
   color: #39F;
 }
 
 #header {
   margin: 1em 0 1em 14px;
   height: 64px;
 }
 
 #logo {
   float: left;
   padding-top: 10px;
 }
 
 #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 {
   margin: .3em 0 0 1.5em;
   padding: 0;
 }
 
 ol li {
   margin-top: 1em;
 }
@@ skipping 47 matching lines @@
   background-color: #FF7735;
   color: white;
   font-weight: bold;
   padding: 6px 8px;
 }
 
 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 {
   margin: 0 auto;
   padding: 0;
   max-width: 1160px;
   position: relative;
   height: auto;
 }
 
@@ skipping 33 matching lines @@
   font-size: 12px;
   height: 45px;
   text-align: right;
   list-style: none;
   margin: 0;
 }
 
 #gc-topnav li a {
   color: #333;
 }
+#gc-topnav li a:hover {
+  color: #39f;
+}
 
 #gc-topnav div {
   border-top: 10px solid white;
   margin: 0 30px;
   position: relative;
   height: 29px;
 }
 
 .pageData {
   display: none;
@@ skipping 41 matching lines @@
   margin: 0;
   color: #666;
 }
 
 #gc-footer .text {
   text-align: center;
   padding: 30px 0;
   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-sidebar a:visited {
+  color: #767676;
+}
+#gc-sidebar a:hover,
+#gc-sidebar a.selected {
+  color: #39F;
+}
+#gc-sidebar a.button {
   color: #767676;
 }
 
-#gc-toc span {
-  cursor: pointer;
+#gc-sidebar ul {
+  list-style: none;
+  padding: 0;
+}
+#gc-sidebar ul.level2 {
+  margin-left: 10px;
+  padding-top: 10px;
+}
+#gc-sidebar ul.level3 {
+  margin-left: 20px;
+  padding-top: 10px;
 }
 
-#gc-toc ul {
-  border-bottom: 1px solid #E5E5E5;
-  padding: 2.9em 0 0;
+#gc-sidebar li {
   margin: 0;
+  padding: 8px 0;
   line-height: 120%;
-  list-style: none;
 }
 
-#gc-toc > ul {
-  border-bottom: none;
+#gc-sidebar li.level2 {
+  border-top: 1px solid #E5E5E5;
 }
-
-#gc-toc ul li {
-  padding-bottom: 10px;
-  margin: 0;
-  position: relative;
+#gc-sidebar span.level2,
+#gc-sidebar a.level2 {
+  font-weight: bold;
 }
-
-#gc-toc ul li ul li ul {
-  margin-top: 10px;
-  margin-left: 25px;
-  padding-left: 0;
-  border-bottom: 0;
+#gc-sidebar ul.level3 {
   list-style: url(../images/sidearrow.png);
 }
 
-#gc-toc ol ul {
-  color: #767676;
+#gc-sidebar .toggleIndicator {
+  position: absolute;
+  right: 0;
+  top: 3px;
+  background: url(../images/toggle_sprite.png) no-repeat 0 0;
+  height: 8px;
+  width: 8px;
 }
-
-#gc-toc ul li li {
-  /* Cancel the border-bottom on #gc-toc ul. */
-  border-bottom: none;
-  padding-left: 10px;
-}
-
-#gc-toc h2 {
-  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-toc .toggle {
-  background: url(../images/toggle_sprite.png) no-repeat 0px 0px;
-  width: 9px;
-  height: 9px;
-  position: absolute;
-  top: -1px;
-  right: 4px;
-  text-decoration: none;
-  margin: 8px 1px 4px -13px;
-  cursor: pointer;
-}
-
-#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;
   margin: 1.3em 1em 0 0;
   padding: 0;
 }
 
 #toc {
-  background-color: #E8EDEB;
+  background-color: whiteSmoke;
   float: right;
   margin: 5px 0px 5px 20px;
   padding: 5px;
   width: 250px;
 }
 
 #toc * {
   padding: 0;
   list-style: none;
+  font-weight: 600;
 }
 
 #toc h2 {
   font-weight: bold;
   font-size: 100%;
   margin: 0;
   border: none;
-  background-color: #E8EDEB;
+  background-color: whiteSmoke;
   padding: 0;
 }
 
 #toc ol {
   margin: 1em 0 0 0;
 }
 
 #toc ol li {
   margin: .4em 0 0 1em;
 }
@@ skipping 15 matching lines @@
 }
 
 /* Specificity hack to override the "a" rule. */
 #filtered_apis * {
   color: #50A9D5;
 }
 
 #skipto {
   display: none;
 }