Doc: CSS: Add space between top-levels in sidebar

[lilypond.git] / Documentation / css / lilypond-manuals.css

diff --git a/Documentation/css/lilypond-manuals.css b/Documentation/css/lilypond-manuals.css
index b5e7a0cf9312e0bf2532ee44e4531dcd46909b68..e4db8cde03cc5272e80e44a7f2e3f3afa09d6dea 100644 (file)
--- a/Documentation/css/lilypond-manuals.css
+++ b/Documentation/css/lilypond-manuals.css
@@ -1,3 +1,31 @@
+/**********************************************************/
+/*                  GENERAL INFORMATION                   */
+/**********************************************************/
+
+/* Each web manual is styled using a different color. Each
+   one has been assigned a hue value on the HSB color chart.
+   All specific colors for a manual are shades and tints
+   of that hue.
+
+   The brown of the usage manual does not follow this scheme.
+   Neither does the 'default' olive green of the glossary,
+   essay, snippets, and changes manuals.
+
+   Manual            Color          Hue
+   learning          green          120
+   music-glossary
+   essay
+
+   notation          blue           205
+   usage             brown
+   snippets
+
+   changes
+   extending         red            0
+   internals         purple         280
+
+   contributor       black          doesn't matter - desat
+
 /**********************************************************/
 /*                  PAGE-WIDE SETTINGS                    */
 /**********************************************************/
@@ -12,7 +40,7 @@ body {
   height: 100%;
   font-size: 100%;
   line-height: 1.125;
-  color: #000;
+  color: #222;
   background-color: #fff;
 }
 
@@ -24,42 +52,41 @@ body {
 .appendix, .appendixsec, .appendixsubsec,
 .unnumbered, .unnumberedsec, .unnumberedsubsec, .unnumberedsubsubsec,
 .subheading, .subsubheading {
-  color: #204a87;
-  border-bottom: 1px dashed black;
+  color: rgb(32, 74, 135);
   padding-bottom: 0.15em;
   margin-top: 0.6em;
-  margin-bottom: 1em;
+  margin-bottom: 0.6em;
 }
 
 .settitle {
-  background: #b1d281;
   font-size: 2em;
   text-align: center;
-  padding: 0.4em 0.5em;
-  border: solid #7b925a;
-  border-width: 1px 0;
+  padding: 0.8em 0.5em;
   margin: 0;
 }
 
-.chapter, .appendix, .unnumbered {
-  font-size: 1.8em;
-}
-
-.section, .appendixsec, .unnumberedsec {
-  font-size: 1.6em;
+.chapter, .appendix, .unnumbered,
+.section, .appendixsec, .unnumberedsec,
+.subsection, .appendixsubsec, .unnumberedsubsec,
+.subsubsection {
+  font-size: 1.7em;
+  margin-top: 0.9em;
 }
 
-.subsection, .appendixsubsec, .unnumberedsubsec {
-  font-size: 1.4em;
+.subheading, .unnumberedsubsubsec {
+  font-size: 1.5em;
+  margin-top: 0.9em;
 }
 
-.subheading, .subsubsection, .unnumberedsubsubsec {
-  font-size: 1.25em;
+.subheading {
+  border-top: 1px solid rgb(200, 200, 200);
+  padding-top: 0.8em;
 }
 
 .subsubheading {
-  font-size: 1em;
+  font-size: 1.15em;
   font-weight: bold;
+  margin-top: 1.6em;
 }
 
 .chapheading {
@@ -93,12 +120,15 @@ a:hover {
 /*                  BLOCK FORMATTING                       */
 /***********************************************************/
 
-blockquote, .smallexample {
+blockquote,
+.smallexample {
   width: 96%;
   padding: 0;
-  border: solid #b1d281;
-  border-width: 1px 1px 1px 5px;
+  border: solid #d5d7d6;
+  border-width: 1px 1px 1px 3px;
+  border-radius: 5px;
   margin: 1em auto;
+  background-color: white;
 }
 
 blockquote p, pre.smallexample {
@@ -125,11 +155,11 @@ blockquote blockquote {
 }
 
 table.cartouche {
-  background: #f5f5dc;
+  background: #eef;
   width: 85%;
   border-collapse: collapse;
   padding: 0 0.5em;
-  border: 2px solid #8f5902;
+  border: 1px solid #c8c8c8;
   margin: 0 auto 1em;
 }
 
@@ -167,8 +197,8 @@ div#main ul {
 }
 
 h1, h2, h3, h4, p, table, address, dt {
-  padding-left: 1em;
-  padding-right: 1em;
+  padding-left: 18px;
+  padding-right: 18px;
 }
 
 p {
@@ -176,7 +206,8 @@ p {
 }
 
 #languages {
-  padding: 0.5em 1em;
+  font-size: 0.8em;
+  padding: 0.9em 18px;
   margin: 0;
 }
 
@@ -195,6 +226,15 @@ pre.menu-comment {
   margin-bottom: 1em;
 }
 
+table th {
+  text-align: left;
+}
+
+table td {
+    vertical-align: top;
+    padding-bottom: .5em;
+}
+
 /***********************************************************/
 /*                    TOC SIDEBAR                          */
 /***********************************************************/
@@ -208,47 +248,44 @@ div#tocframe {
   padding: 0;
   margin: 0;
   overflow: auto;
-  background: #f5f5dc;
+  background: #657f40;
   z-index: 100;
   list-style-type: none;
   font-size: 0.83em;
   line-height: 1.3;
 }
 
+body.learning    #tocframe { background-color: #407f40; }
+body.notation    #tocframe { background-color: #40657f; }
+body.usage       #tocframe { background-color: #7d765a; }
+body.extending   #tocframe { background-color: #7f4040; }
+body.internals   #tocframe { background-color: #6a407f; }
+body.contributor #tocframe { background-color: #333333; }
+
 @media screen {
   body > div#tocframe {
     position: fixed
   }
 }
 
-div#tocframe a:link, div#tocframe a:visited {
-  color: #454532;
+div#tocframe a:link,
+div#tocframe a:visited {
+  color: #eee;
   text-decoration: none;
 }
 
 div#tocframe a:hover {
-  color: #232b16;
+  color: #fff;
   text-decoration: underline;
 }
 
 div#tocframe p.toc_uplink {
   font-size: 1em;
   line-height: 1.125;
-  background: #c9ccc4;
   padding: 0.25em 1em 0.25em 0.5em;
-  border-bottom: 1px solid #a0a087;
   margin: 0;
 }
 
-div#tocframe p.toc_uplink a:link,
-div#tocframe p.toc_uplink a:visited {
-  color: #1c1c1b;
-}
-
-div#tocframe p.toc_uplink a:hover {
-  color: #000;
-}
-
 div#tocframe h4 {
   font-size: 1em;
   line-height: 1.125;
@@ -286,6 +323,10 @@ div#tocframe h4 {
   font-size: 1em;
 }
 
+#tocframe .contents > ul.toc > li {
+  margin-top: 0.5em;
+}
+
 #tocframe ul.toc li li {
   padding-left: 1em;
 }
@@ -307,16 +348,18 @@ li.toc_current ul {
 
 .nav_table {
   width: 100%;
-  background: #c9ccc4;
+  background-color: #d5d7d6;
+  color: #505050;
   font-size: 0.83em;
-  border-collapse: collapse;
-  padding: 0;
+  border-collapse: separate;
+  padding: 5px 18px;
   border: none;
   margin: 0;
 }
 
-.nav_table a:link, .nav_table a:visited {
-  color: #1c1c1b;
+.nav_table a:link,
+.nav_table a:visited {
+  color: #505050;
   text-decoration: none;
 }
 
@@ -325,13 +368,14 @@ li.toc_current ul {
   text-decoration: underline;
 }
 
-.nav_table tr, .nav_table a {
+.nav_table tr,
+.nav_table a {
   padding: 0;
   margin: 0;
 }
 
 .nav_table td {
-  padding: 0.25em;
+  padding: 0.1em 0px;
   margin: 0;
 }
 
@@ -382,20 +426,13 @@ table .title {
 }
 
 .footer {
-  background: #e5f5ce;
   font-size: 0.8em;
   padding: 0.2em 0;
-  border: solid #b1d281;
-  border-width: 0 0 5px 0;
   margin: 0;
 }
 
-.footer a:link {
-  color: #0308fc;
-}
-
 .footer p {
-  padding: 0 1.25em;
+  padding: 0 18px;
   margin: 0.4em 0;
 }
 
@@ -408,9 +445,10 @@ table.menu {
 /***********************************************************/
 
 @media print {
-  /* Hide the sidebar: */
-  body { padding-left: 0; }
-  #tocframe { display: none; }
+  /* Hide the sidebar and make the main contents take up the full width */
+  div#main { position: static; overflow: visible; left: 0; }
+  div#tocframe { display: none; }
+  /* Also don't show the navigation toolbars between all sections */
   .nav_table { display: none; }
 }
 
@@ -448,20 +486,16 @@ div#search p, div#search form {
   background: #eef;
   text-align: left;
   padding: 0;
-  border: 1px solid green;
-  /* Experimental rounded corners */
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 5px;
   margin: 1em;
 }
 
 .advanced {
-  background: #eeffcc;
+  background: #ffffc8;
   text-align: left;
   padding: 0;
-  border: 1px solid green;
-  /* Experimental rounded corners */
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 5px;
   margin: 0.5em 0.5em 2em 3em;
 }