--- doc/tmpl/css/main.css	2015/07/24 12:26:01	2831
+++ doc/tmpl/css/main.css	2021/05/16 11:11:11	3905
@@ -1,6 +1,6 @@
 /*
   CrudeDoc CSS Style
-  Copyright (c) 2015 Christian Schoenebeck. All rights reserved.
+  Copyright (c) 2015 - 2021 Christian Schoenebeck. All rights reserved.
   http://www.crudebyte.com
  */
 
@@ -12,18 +12,32 @@
     font-weight:200;
     font-size:17px;
     line-height:1.2;
+    background-color:#c1b5b5;
+    background: -webkit-linear-gradient(left, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Safari 5.1 to 6.0 */
+    background:      -o-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Opera 11.1 to 12.0 */
+    background:    -moz-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Firefox 3.6 to 15 */
+    background:         linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */
 }
 
 body {
     padding:0;
     margin:0;
-    background-color:#cbc3c2; /* fallback (non CSS3 browsers) */
+    background-color:#c1b5b5; /* fallback (non CSS3 browsers) */
     background: -webkit-linear-gradient(left, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Safari 5.1 to 6.0 */
     background:      -o-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Opera 11.1 to 12.0 */
     background:    -moz-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Firefox 3.6 to 15 */
     background:         linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */
     counter-reset:oli;
     counter-reset:codeline;
+    -webkit-text-size-adjust:100%;
+}
+
+.no-effect {
+    -webkit-transition: none !important;
+       -moz-transition: none !important;
+        -ms-transition: none !important;
+         -o-transition: none !important;
+            transition: none !important;
 }
 
 
@@ -82,7 +96,10 @@
             transition: text-shadow 0.9s linear, color 0.9s linear;
 }
 
-header > menu a:hover {
+.no-touch header > menu a:hover,
+.touch header > menu a:focus,
+.touch header > menu a:active
+{
     color:#ffffff;
     text-shadow: 0px 0px 13px #ff9999;
     -webkit-transition: text-shadow 0.31s, color 0.31s; /* Safari */
@@ -115,6 +132,49 @@
     background:    -moz-linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* For Firefox 3.6 to 15 */
     background:         linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* Standard syntax */
     box-shadow: 0px 10px 8px rgba(15,15,15,0.25);
+
+    -webkit-transition: -webkit-transform 0.16s ease, padding-left 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, padding-left 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, padding-left 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, padding-left 0.2s ease;
+            transition:         transform 0.16s ease, padding-left 0.2s ease;
+}
+
+.no-effect nav {
+    -webkit-transition: none !important;
+       -moz-transition: none !important;
+        -ms-transition: none !important;
+         -o-transition: none !important;
+            transition: none !important;
+}
+
+.no-toc nav {
+    padding-left:56px;
+
+    -webkit-transition: -webkit-transform 0.16s ease, padding-left 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, padding-left 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, padding-left 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, padding-left 0.2s ease;
+            transition:         transform 0.16s ease, padding-left 0.2s ease;
+}
+
+.no-effect
+.no-toc nav {
+    -webkit-transition: none !important;
+       -moz-transition: none !important;
+        -ms-transition: none !important;
+         -o-transition: none !important;
+            transition: none !important;
+}
+
+nav > div.foldbtn {
+    display:block;
+    position:fixed;
+    top:33;
+    left:10;
+    color:#998952;
+    font-weight:200;
+    font-size:28px;
 }
 
 nav > ul {
@@ -131,7 +191,9 @@
     padding:4px 4px 4px 3px;
 }
 
-nav > ul > li:hover {
+.no-touch nav > ul > li:hover,
+.touch nav > ul > li.active
+{
     color:white;
     background-color:rgba(80,80,80,0.5);
     border-left-style:solid;
@@ -151,7 +213,9 @@
     font-weight:500;
 }
 
-nav > ul > li:last-child:hover {
+.no-touch nav > ul > li:last-child:hover,
+.touch nav > ul > li:last-child.active
+{
     color:white;
 }
 
@@ -162,6 +226,11 @@
     padding-right:5px;
 }
 
+.iOS
+nav > ul > li::before {
+    font-family:"Hiragino Mincho ProN";
+}
+
 nav > ul > li:first-child::before {
     content: "";
 }
@@ -226,8 +295,10 @@
             transition:         transform 0.16s ease, opacity 0.2s ease;
 }
 
-.hasTransform
-nav > ul > li:hover ul { /* rule extension for drop down menu */
+
+.no-touch .hasTransform nav > ul > li:hover ul,
+.touch .hasTransform nav > ul > li.active ul
+{ /* rule extension for drop down menu */
     display:block;
     opacity:1;
 
@@ -301,6 +372,40 @@
     -webkit-border-bottom-left-radius: 11px;
     -moz-border-radius-bottomleft: 11px;
     border-bottom-left-radius: 11px;
+
+    -webkit-transition: -webkit-transform 0.16s ease, width 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, width 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, width 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, width 0.2s ease;
+            transition:         transform 0.16s ease, width 0.2s ease;
+}
+
+.no-effect aside {
+    -webkit-transition: none !important;
+       -moz-transition: none !important;
+        -ms-transition: none !important;
+         -o-transition: none !important;
+            transition: none !important;
+}
+
+.no-toc aside {
+    overflow:hidden;
+    width:0;
+
+    -webkit-transition: -webkit-transform 0.16s ease, width 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, width 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, width 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, width 0.2s ease;
+            transition:         transform 0.16s ease, width 0.2s ease;
+}
+
+.no-effect
+.no-toc aside {
+    -webkit-transition: none !important;
+       -moz-transition: none !important;
+        -ms-transition: none !important;
+         -o-transition: none !important;
+            transition: none !important;
 }
 
 aside > div.toc {
@@ -384,7 +489,11 @@
     text-shadow: 0px 0px 8px #fbf1f1;
 }
 
-aside > div.toc > ul > li:hover {
+
+.no-touch aside > div.toc > ul > li:hover,
+.touch aside > div.toc > ul > li:focus,
+.touch aside > div.toc > ul > li:active
+{
     background-color:rgba(255,0,0,0.22);
     -webkit-transition: background-color 0.25s; /* Safari */
        -moz-transition: background-color 0.25s;
@@ -393,8 +502,15 @@
             transition: background-color 0.25s linear;
 }
 
-aside > div.toc > ul > li > ul > li:hover {
-    list-style-type:disc;
+.no-touch aside > div.toc > ul > li > ul > li:before {
+	visibility:hidden;
+	content:url('../pix/disc.png');
+	padding-right:6px;
+}
+
+.no-touch aside > div.toc > ul > li > ul > li:hover:before
+{
+	visibility:visible;
 }
 
 aside > div.toc > div.buttons {
@@ -470,7 +586,10 @@
     border-bottom-right-radius: 11px;
 }
 
-aside > div.toc > div.buttons > *:not(.disabled):hover {
+.no-touch aside > div.toc > div.buttons > *:not(.disabled):hover,
+.touch aside > div.toc > div.buttons > *:not(.disabled):focus,
+.touch aside > div.toc > div.buttons > *:not(.disabled):active
+{
     background-color:rgba(255,0,0,0.21);
     -webkit-transition: background-color 0.25s; /* Safari */
        -moz-transition: background-color 0.25s;
@@ -484,6 +603,11 @@
     font-size:15px;
 }
 
+.iOS
+aside > div.toc > div.buttons .arrow {
+    font-family:"Hiragino Mincho ProN";
+}
+
 
 
 /* Article */
@@ -503,6 +627,39 @@
     border-left-style:solid;
     border-left-width:1px;
     border-left-color:#898989;
+
+    -webkit-transition: -webkit-transform 0.16s ease, margin-left 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, margin-left 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, margin-left 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, margin-left 0.2s ease;
+            transition:         transform 0.16s ease, margin-left 0.2s ease;
+}
+
+.no-effect article {
+    -webkit-transition: none !important;
+       -moz-transition: none !important;
+        -ms-transition: none !important;
+         -o-transition: none !important;
+            transition: none !important;
+}
+
+.no-toc article {
+    margin-left:0px;
+
+    -webkit-transition: -webkit-transform 0.16s ease, margin-left 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, margin-left 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, margin-left 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, margin-left 0.2s ease;
+            transition:         transform 0.16s ease, margin-left 0.2s ease;
+}
+
+.no-effect
+.no-toc article {
+    -webkit-transition: none !important;
+       -moz-transition: none !important;
+        -ms-transition: none !important;
+         -o-transition: none !important;
+            transition: none !important;
 }
 
 article h1 {
@@ -551,6 +708,13 @@
     clear:both;
 }
 
+/* automatically center the 1st paragraph (block) directly after a h1 type header (since that header type is centered as well) */
+article h1 + p {
+    display:table; /*HACK: "block" would stretch the entire page width */
+    margin-left:auto;
+    margin-right:auto;
+}
+
 article a {
     font-weight:400;
     color:#1ba1dd;
@@ -568,7 +732,10 @@
     float:left;
 }
 
-article a:hover {
+.no-touch article a:hover,
+.touch article a:focus,
+.touch article a:active
+{
     text-decoration:underline;
 }
 
@@ -673,10 +840,23 @@
     color:black;
 }
 
+article .code .ql, article code .ql { /*qualifier keyword*/
+    font-weight:bold;
+    color:#ff4ff3;
+}
+
 article .code .n, article code .n { /*number*/
     color:#c4950c;
 }
 
+article .code .ut, article code .ut { /*std measuring unit type*/
+    color:#50bc00;
+}
+
+article .code .up, article code .up { /*metric prefix of unit*/
+    color:#000000;
+}
+
 article .code .i, article code .i { /*identifier (function name)*/
     /*color:#0c4fc4;*/
     color:#1ba1dd;
@@ -746,7 +926,7 @@
 }
 
 article th {
-    background-color:#e8e2e2;
+    background-color:#e0e0ff;
     padding:0px 8px 0px 8px;
     margin:0 0 0 0;
     border:3px solid white;
@@ -780,6 +960,12 @@
     font-weight:500;
 }
 
+article note.remark:before {
+    white-space:pre-wrap;
+    content:'Remark:   ';
+    font-weight:500;
+}
+
 article note {
     display:table; /*HACK: "block" would stretch the entire page width */
     background-color:#ede8e8;
@@ -795,6 +981,10 @@
     max-width:         calc(100% - 145px);
 }
 
+article td > note {
+    display:block; /*HACK: override "table" default value assigned above in the context of a table cell, otherwise padding will be ignored */
+}
+
 article note.important {
     border-left:solid 10px #ff4141;
 }
@@ -929,6 +1119,11 @@
     content: "◀ ";
 }
 
+.iOS
+article > ul.docpager > li:nth-child(1) > a:before {
+    font-family:"Hiragino Mincho ProN";
+}
+
 article > ul.docpager > li:nth-child(2) {
     text-align:center;
     padding-left:10px;
@@ -939,6 +1134,11 @@
     content: "▲ ";
 }
 
+.iOS
+article > ul.docpager > li:nth-child(2) > a:before {
+    font-family:"Hiragino Mincho ProN";
+}
+
 article > ul.docpager > li:nth-child(3) {
     text-align:right;
     padding-left:10px;
@@ -948,6 +1148,11 @@
     content: " ▶";
 }
 
+.iOS
+article > ul.docpager > li:nth-child(3) > a:after {
+    font-family:"Hiragino Mincho ProN";
+}
+
 article > .endline {
     font-family:CRDSans;
     font-size:16px;
@@ -994,6 +1199,9 @@
     border:0;
 }
 
-footer a:hover {
+.no-touch footer a:hover,
+.touch footer a:focus,
+.touch footer a:active
+{
     text-decoration:underline;
 }