From: Paul Morris <paulwmorris@gmail.com>
Date: Mon, 22 May 2017 19:02:52 +0000 (-0400)
Subject: lilypond-manuals.css: edit color scheme and some spacing
X-Git-Url: https://git.donarmstrong.com/lilypond.git?a=commitdiff_plain;h=90e4d7057f3857da049dfda3d130017d4719bd6b;p=lilypond.git

lilypond-manuals.css: edit color scheme and some spacing

Simplifies the color scheme. Main motivation is to avoid fully
saturated bright colors on code box borders, which distract from
the content, and to use stronger/darker colors in table of
contents sidebars instead of lighter pastel colors.

Affects table of contents sidebars, borders around code boxes,
footers, note boxes, advanced boxes, main/top page for a manual,
and grey navigation bars/rows/strips.
---

diff --git a/Documentation/css/lilypond-manuals.css b/Documentation/css/lilypond-manuals.css
index e0e8eca9b6..d444792955 100644
--- a/Documentation/css/lilypond-manuals.css
+++ b/Documentation/css/lilypond-manuals.css
@@ -2,10 +2,14 @@
 /*                  GENERAL INFORMATION                   */
 /**********************************************************/
 
-/* It has been requested that each web manual be styled using a
-   different color. To faciliate that, each manual is being
-   assigned a hue value on the HSB color chart. All specific
-   colors for a manual will be shades and tints of that hue.
+/* 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
@@ -13,7 +17,7 @@
    essay
 
    notation          blue           205
-   usage             yellow         50
+   usage             brown
    snippets
 
    changes
@@ -36,7 +40,7 @@ body {
   height: 100%;
   font-size: 100%;
   line-height: 1.125;
-  color: #000;
+  color: #222;
   background-color: #fff;
 }
 
@@ -55,23 +59,12 @@ body {
 }
 
 .settitle {
-  background: #657f40;
-  color: white;
   font-size: 2em;
   text-align: center;
-  padding: 0.4em 0.5em;
-  border: solid black;
-  border-width: 1px 0;
-  margin: 0 0 10px 0;
+  padding: 0.8em 0.5em;
+  margin: 0;
 }
 
-body.learning    .settitle { background-color: #407f40; }
-body.notation    .settitle { background-color: #40657f; }
-body.usage       .settitle { background-color: #7f7f33; }
-body.extending   .settitle { background-color: #7f4040; }
-body.internals   .settitle { background-color: #6a407f; }
-body.contributor .settitle { background-color: #000000; }
-
 .chapter, .appendix, .unnumbered,
 .section, .appendixsec, .unnumberedsec,
 .subsection, .appendixsubsec, .unnumberedsubsec,
@@ -127,22 +120,17 @@ 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;
 }
 
-body.learning    blockquote, body.learning .smallexample { border-color: #00ff00; }
-body.notation    blockquote, body.notation .smallexample { border-color: #0095ff; }
-body.usage       blockquote, body.usage .smallexample { border-color: #ffff00; }
-body.extending   blockquote, body.extending .smallexample { border-color: #ff0000; }
-body.internals   blockquote, body.internals .smallexample { border-color: #aa00ff; }
-body.contributor blockquote, body.contributor .smallexample { border-color: #000000; }
-
 blockquote p, pre.smallexample {
   padding: 1em;
   margin: 0;
@@ -167,21 +155,14 @@ 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;
 }
 
-body.learning    table.cartouche { background-color: #cfe5cf; border: 2px solid #7db27d; }
-body.notation    table.cartouche { background-color: #cfdce5; border: 2px solid #7d9cb2; }
-body.usage       table.cartouche { background-color: #e5e2b8; border: 2px solid #b2b27d; }
-body.extending   table.cartouche { background-color: #e5cfcf; border: 2px solid #b27d7d; }
-body.internals   table.cartouche { background-color: #decfe5; border: 2px solid #a17db2; }
-body.contributor table.cartouche { background-color: #e5e5e5; border: 2px solid #b2b2b2; }
-
 table.cartouche p {
   padding: 1em;
   margin: 0;
@@ -225,7 +206,8 @@ p {
 }
 
 #languages {
-  padding: 0.5em 1em;
+  font-size: 0.8em;
+  padding: 0.9em 18px;
   margin: 0;
 }
 
@@ -244,6 +226,10 @@ pre.menu-comment {
   margin-bottom: 1em;
 }
 
+table th {
+  text-align: left;
+}
+
 table td {
     vertical-align: top;
     padding-bottom: .5em;
@@ -262,19 +248,19 @@ div#tocframe {
   padding: 0;
   margin: 0;
   overflow: auto;
-  background: #dce35cf;
+  background: #657f40;
   z-index: 100;
   list-style-type: none;
   font-size: 0.83em;
   line-height: 1.3;
 }
 
-body.learning    div#tocframe { background-color: #cfe5cf; }
-body.notation    div#tocframe { background-color: #cfdce5; }
-body.usage       div#tocframe { background-color: #e5e5b8; }
-body.extending   div#tocframe { background-color: #e5cfcf; }
-body.internals   div#tocframe { background-color: #decfe5; }
-body.contributor div#tocframe { background-color: #e5e5e5; }
+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 {
@@ -282,34 +268,24 @@ body.contributor div#tocframe { background-color: #e5e5e5; }
   }
 }
 
-div#tocframe a:link, div#tocframe a:visited {
-  color: black;
+div#tocframe a:link,
+div#tocframe a:visited {
+  color: #eee;
   text-decoration: none;
 }
 
 div#tocframe a:hover {
-  color: #666666;
+  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 black;
   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;
@@ -368,16 +344,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;
 }
 
@@ -386,13 +364,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;
 }
 
@@ -443,28 +422,13 @@ table .title {
 }
 
 .footer {
-  background: #657f40;
   font-size: 0.8em;
   padding: 0.2em 0;
-  border: solid white;
-  border-width: 0 0 5px 0;
   margin: 0;
-  color: white;
-}
-
-body.learning    .footer { background-color: #407f40; }
-body.notation    .footer { background-color: #40657f; }
-body.usage       .footer { background-color: #7f7f33; }
-body.extending   .footer { background-color: #7f4040; }
-body.internals   .footer { background-color: #6a407f; }
-body.contributor .footer { background-color: #000000; }
-
-.footer a:link {
-  color: white;
 }
 
 .footer p {
-  padding: 0 1.25em;
+  padding: 0 18px;
   margin: 0.4em 0;
 }
 
@@ -518,26 +482,16 @@ div#search p, div#search form {
   background: #eef;
   text-align: left;
   padding: 0;
-  border: 1px solid green;
-  /* Experimental rounded corners */
-  border-radius: 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 5px;
   margin: 1em;
 }
 
-body.learning    .warning { border-color: #00ff00; }
-body.notation    .warning { border-color: #0095ff; }
-body.usage       .warning { border-color: #ffff00; }
-body.extending   .warning { border-color: #ff0000; }
-body.internals   .warning { border-color: #aa00ff; }
-body.contributor .warning { border-color: #000000; }
-
-
 .advanced {
-  background: #eeffcc;
+  background: #ffffc8;
   text-align: left;
   padding: 0;
-  border: 1px solid green;
-  /* Experimental rounded corners */
-  border-radius: 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 5px;
   margin: 0.5em 0.5em 2em 3em;
 }