/[svn]/doc/tmpl/css/main.css
ViewVC logotype

Diff of /doc/tmpl/css/main.css

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 2831 by schoenebeck, Fri Jul 24 12:26:01 2015 UTC revision 3905 by schoenebeck, Sun May 16 11:11:11 2021 UTC
# Line 1  Line 1 
1  /*  /*
2    CrudeDoc CSS Style    CrudeDoc CSS Style
3    Copyright (c) 2015 Christian Schoenebeck. All rights reserved.    Copyright (c) 2015 - 2021 Christian Schoenebeck. All rights reserved.
4    http://www.crudebyte.com    http://www.crudebyte.com
5   */   */
6    
# Line 12  html { Line 12  html {
12      font-weight:200;      font-weight:200;
13      font-size:17px;      font-size:17px;
14      line-height:1.2;      line-height:1.2;
15        background-color:#c1b5b5;
16        background: -webkit-linear-gradient(left, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Safari 5.1 to 6.0 */
17        background:      -o-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Opera 11.1 to 12.0 */
18        background:    -moz-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Firefox 3.6 to 15 */
19        background:         linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */
20  }  }
21    
22  body {  body {
23      padding:0;      padding:0;
24      margin:0;      margin:0;
25      background-color:#cbc3c2; /* fallback (non CSS3 browsers) */      background-color:#c1b5b5; /* fallback (non CSS3 browsers) */
26      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: -webkit-linear-gradient(left, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Safari 5.1 to 6.0 */
27      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:      -o-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Opera 11.1 to 12.0 */
28      background:    -moz-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Firefox 3.6 to 15 */      background:    -moz-linear-gradient(right, rgba(203,195,194,1.0), rgba(171,154,151,1.0)); /* For Firefox 3.6 to 15 */
29      background:         linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */      background:         linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */
30      counter-reset:oli;      counter-reset:oli;
31      counter-reset:codeline;      counter-reset:codeline;
32        -webkit-text-size-adjust:100%;
33    }
34    
35    .no-effect {
36        -webkit-transition: none !important;
37           -moz-transition: none !important;
38            -ms-transition: none !important;
39             -o-transition: none !important;
40                transition: none !important;
41  }  }
42    
43    
# Line 82  header > menu a { Line 96  header > menu a {
96              transition: text-shadow 0.9s linear, color 0.9s linear;              transition: text-shadow 0.9s linear, color 0.9s linear;
97  }  }
98    
99  header > menu a:hover {  .no-touch header > menu a:hover,
100    .touch header > menu a:focus,
101    .touch header > menu a:active
102    {
103      color:#ffffff;      color:#ffffff;
104      text-shadow: 0px 0px 13px #ff9999;      text-shadow: 0px 0px 13px #ff9999;
105      -webkit-transition: text-shadow 0.31s, color 0.31s; /* Safari */      -webkit-transition: text-shadow 0.31s, color 0.31s; /* Safari */
# Line 115  nav { Line 132  nav {
132      background:    -moz-linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* For Firefox 3.6 to 15 */      background:    -moz-linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* For Firefox 3.6 to 15 */
133      background:         linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* Standard syntax */      background:         linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* Standard syntax */
134      box-shadow: 0px 10px 8px rgba(15,15,15,0.25);      box-shadow: 0px 10px 8px rgba(15,15,15,0.25);
135    
136        -webkit-transition: -webkit-transform 0.16s ease, padding-left 0.2s ease;
137             -o-transition:      -o-transform 0.16s ease, padding-left 0.2s ease;
138            -ms-transition:     -ms-transform 0.16s ease, padding-left 0.2s ease;
139           -moz-transition:    -moz-transform 0.16s ease, padding-left 0.2s ease;
140                transition:         transform 0.16s ease, padding-left 0.2s ease;
141    }
142    
143    .no-effect nav {
144        -webkit-transition: none !important;
145           -moz-transition: none !important;
146            -ms-transition: none !important;
147             -o-transition: none !important;
148                transition: none !important;
149    }
150    
151    .no-toc nav {
152        padding-left:56px;
153    
154        -webkit-transition: -webkit-transform 0.16s ease, padding-left 0.2s ease;
155             -o-transition:      -o-transform 0.16s ease, padding-left 0.2s ease;
156            -ms-transition:     -ms-transform 0.16s ease, padding-left 0.2s ease;
157           -moz-transition:    -moz-transform 0.16s ease, padding-left 0.2s ease;
158                transition:         transform 0.16s ease, padding-left 0.2s ease;
159    }
160    
161    .no-effect
162    .no-toc nav {
163        -webkit-transition: none !important;
164           -moz-transition: none !important;
165            -ms-transition: none !important;
166             -o-transition: none !important;
167                transition: none !important;
168    }
169    
170    nav > div.foldbtn {
171        display:block;
172        position:fixed;
173        top:33;
174        left:10;
175        color:#998952;
176        font-weight:200;
177        font-size:28px;
178  }  }
179    
180  nav > ul {  nav > ul {
# Line 131  nav > ul > li { Line 191  nav > ul > li {
191      padding:4px 4px 4px 3px;      padding:4px 4px 4px 3px;
192  }  }
193    
194  nav > ul > li:hover {  .no-touch nav > ul > li:hover,
195    .touch nav > ul > li.active
196    {
197      color:white;      color:white;
198      background-color:rgba(80,80,80,0.5);      background-color:rgba(80,80,80,0.5);
199      border-left-style:solid;      border-left-style:solid;
# Line 151  nav > ul > li:last-child { Line 213  nav > ul > li:last-child {
213      font-weight:500;      font-weight:500;
214  }  }
215    
216  nav > ul > li:last-child:hover {  .no-touch nav > ul > li:last-child:hover,
217    .touch nav > ul > li:last-child.active
218    {
219      color:white;      color:white;
220  }  }
221    
# Line 162  nav > ul > li::before { Line 226  nav > ul > li::before {
226      padding-right:5px;      padding-right:5px;
227  }  }
228    
229    .iOS
230    nav > ul > li::before {
231        font-family:"Hiragino Mincho ProN";
232    }
233    
234  nav > ul > li:first-child::before {  nav > ul > li:first-child::before {
235      content: "";      content: "";
236  }  }
# Line 226  nav > ul > li ul { /* rule extension for Line 295  nav > ul > li ul { /* rule extension for
295              transition:         transform 0.16s ease, opacity 0.2s ease;              transition:         transform 0.16s ease, opacity 0.2s ease;
296  }  }
297    
298  .hasTransform  
299  nav > ul > li:hover ul { /* rule extension for drop down menu */  .no-touch .hasTransform nav > ul > li:hover ul,
300    .touch .hasTransform nav > ul > li.active ul
301    { /* rule extension for drop down menu */
302      display:block;      display:block;
303      opacity:1;      opacity:1;
304    
# Line 301  aside { Line 372  aside {
372      -webkit-border-bottom-left-radius: 11px;      -webkit-border-bottom-left-radius: 11px;
373      -moz-border-radius-bottomleft: 11px;      -moz-border-radius-bottomleft: 11px;
374      border-bottom-left-radius: 11px;      border-bottom-left-radius: 11px;
375    
376        -webkit-transition: -webkit-transform 0.16s ease, width 0.2s ease;
377             -o-transition:      -o-transform 0.16s ease, width 0.2s ease;
378            -ms-transition:     -ms-transform 0.16s ease, width 0.2s ease;
379           -moz-transition:    -moz-transform 0.16s ease, width 0.2s ease;
380                transition:         transform 0.16s ease, width 0.2s ease;
381    }
382    
383    .no-effect aside {
384        -webkit-transition: none !important;
385           -moz-transition: none !important;
386            -ms-transition: none !important;
387             -o-transition: none !important;
388                transition: none !important;
389    }
390    
391    .no-toc aside {
392        overflow:hidden;
393        width:0;
394    
395        -webkit-transition: -webkit-transform 0.16s ease, width 0.2s ease;
396             -o-transition:      -o-transform 0.16s ease, width 0.2s ease;
397            -ms-transition:     -ms-transform 0.16s ease, width 0.2s ease;
398           -moz-transition:    -moz-transform 0.16s ease, width 0.2s ease;
399                transition:         transform 0.16s ease, width 0.2s ease;
400    }
401    
402    .no-effect
403    .no-toc aside {
404        -webkit-transition: none !important;
405           -moz-transition: none !important;
406            -ms-transition: none !important;
407             -o-transition: none !important;
408                transition: none !important;
409  }  }
410    
411  aside > div.toc {  aside > div.toc {
# Line 384  aside > div.toc > ul > li > ul > li.curr Line 489  aside > div.toc > ul > li > ul > li.curr
489      text-shadow: 0px 0px 8px #fbf1f1;      text-shadow: 0px 0px 8px #fbf1f1;
490  }  }
491    
492  aside > div.toc > ul > li:hover {  
493    .no-touch aside > div.toc > ul > li:hover,
494    .touch aside > div.toc > ul > li:focus,
495    .touch aside > div.toc > ul > li:active
496    {
497      background-color:rgba(255,0,0,0.22);      background-color:rgba(255,0,0,0.22);
498      -webkit-transition: background-color 0.25s; /* Safari */      -webkit-transition: background-color 0.25s; /* Safari */
499         -moz-transition: background-color 0.25s;         -moz-transition: background-color 0.25s;
# Line 393  aside > div.toc > ul > li:hover { Line 502  aside > div.toc > ul > li:hover {
502              transition: background-color 0.25s linear;              transition: background-color 0.25s linear;
503  }  }
504    
505  aside > div.toc > ul > li > ul > li:hover {  .no-touch aside > div.toc > ul > li > ul > li:before {
506      list-style-type:disc;          visibility:hidden;
507            content:url('../pix/disc.png');
508            padding-right:6px;
509    }
510    
511    .no-touch aside > div.toc > ul > li > ul > li:hover:before
512    {
513            visibility:visible;
514  }  }
515    
516  aside > div.toc > div.buttons {  aside > div.toc > div.buttons {
# Line 470  aside > div.toc > div.buttons > *:last-c Line 586  aside > div.toc > div.buttons > *:last-c
586      border-bottom-right-radius: 11px;      border-bottom-right-radius: 11px;
587  }  }
588    
589  aside > div.toc > div.buttons > *:not(.disabled):hover {  .no-touch aside > div.toc > div.buttons > *:not(.disabled):hover,
590    .touch aside > div.toc > div.buttons > *:not(.disabled):focus,
591    .touch aside > div.toc > div.buttons > *:not(.disabled):active
592    {
593      background-color:rgba(255,0,0,0.21);      background-color:rgba(255,0,0,0.21);
594      -webkit-transition: background-color 0.25s; /* Safari */      -webkit-transition: background-color 0.25s; /* Safari */
595         -moz-transition: background-color 0.25s;         -moz-transition: background-color 0.25s;
# Line 484  aside > div.toc > div.buttons .arrow { Line 603  aside > div.toc > div.buttons .arrow {
603      font-size:15px;      font-size:15px;
604  }  }
605    
606    .iOS
607    aside > div.toc > div.buttons .arrow {
608        font-family:"Hiragino Mincho ProN";
609    }
610    
611    
612    
613  /* Article */  /* Article */
# Line 503  article { Line 627  article {
627      border-left-style:solid;      border-left-style:solid;
628      border-left-width:1px;      border-left-width:1px;
629      border-left-color:#898989;      border-left-color:#898989;
630    
631        -webkit-transition: -webkit-transform 0.16s ease, margin-left 0.2s ease;
632             -o-transition:      -o-transform 0.16s ease, margin-left 0.2s ease;
633            -ms-transition:     -ms-transform 0.16s ease, margin-left 0.2s ease;
634           -moz-transition:    -moz-transform 0.16s ease, margin-left 0.2s ease;
635                transition:         transform 0.16s ease, margin-left 0.2s ease;
636    }
637    
638    .no-effect article {
639        -webkit-transition: none !important;
640           -moz-transition: none !important;
641            -ms-transition: none !important;
642             -o-transition: none !important;
643                transition: none !important;
644    }
645    
646    .no-toc article {
647        margin-left:0px;
648    
649        -webkit-transition: -webkit-transform 0.16s ease, margin-left 0.2s ease;
650             -o-transition:      -o-transform 0.16s ease, margin-left 0.2s ease;
651            -ms-transition:     -ms-transform 0.16s ease, margin-left 0.2s ease;
652           -moz-transition:    -moz-transform 0.16s ease, margin-left 0.2s ease;
653                transition:         transform 0.16s ease, margin-left 0.2s ease;
654    }
655    
656    .no-effect
657    .no-toc article {
658        -webkit-transition: none !important;
659           -moz-transition: none !important;
660            -ms-transition: none !important;
661             -o-transition: none !important;
662                transition: none !important;
663  }  }
664    
665  article h1 {  article h1 {
# Line 551  article p { Line 708  article p {
708      clear:both;      clear:both;
709  }  }
710    
711    /* automatically center the 1st paragraph (block) directly after a h1 type header (since that header type is centered as well) */
712    article h1 + p {
713        display:table; /*HACK: "block" would stretch the entire page width */
714        margin-left:auto;
715        margin-right:auto;
716    }
717    
718  article a {  article a {
719      font-weight:400;      font-weight:400;
720      color:#1ba1dd;      color:#1ba1dd;
# Line 568  article li img { Line 732  article li img {
732      float:left;      float:left;
733  }  }
734    
735  article a:hover {  .no-touch article a:hover,
736    .touch article a:focus,
737    .touch article a:active
738    {
739      text-decoration:underline;      text-decoration:underline;
740  }  }
741    
# Line 673  article .code .k, article code .k { /*ke Line 840  article .code .k, article code .k { /*ke
840      color:black;      color:black;
841  }  }
842    
843    article .code .ql, article code .ql { /*qualifier keyword*/
844        font-weight:bold;
845        color:#ff4ff3;
846    }
847    
848  article .code .n, article code .n { /*number*/  article .code .n, article code .n { /*number*/
849      color:#c4950c;      color:#c4950c;
850  }  }
851    
852    article .code .ut, article code .ut { /*std measuring unit type*/
853        color:#50bc00;
854    }
855    
856    article .code .up, article code .up { /*metric prefix of unit*/
857        color:#000000;
858    }
859    
860  article .code .i, article code .i { /*identifier (function name)*/  article .code .i, article code .i { /*identifier (function name)*/
861      /*color:#0c4fc4;*/      /*color:#0c4fc4;*/
862      color:#1ba1dd;      color:#1ba1dd;
# Line 746  article tr { Line 926  article tr {
926  }  }
927    
928  article th {  article th {
929      background-color:#e8e2e2;      background-color:#e0e0ff;
930      padding:0px 8px 0px 8px;      padding:0px 8px 0px 8px;
931      margin:0 0 0 0;      margin:0 0 0 0;
932      border:3px solid white;      border:3px solid white;
# Line 780  article note.important:before { Line 960  article note.important:before {
960      font-weight:500;      font-weight:500;
961  }  }
962    
963    article note.remark:before {
964        white-space:pre-wrap;
965        content:'Remark:   ';
966        font-weight:500;
967    }
968    
969  article note {  article note {
970      display:table; /*HACK: "block" would stretch the entire page width */      display:table; /*HACK: "block" would stretch the entire page width */
971      background-color:#ede8e8;      background-color:#ede8e8;
# Line 795  article note { Line 981  article note {
981      max-width:         calc(100% - 145px);      max-width:         calc(100% - 145px);
982  }  }
983    
984    article td > note {
985        display:block; /*HACK: override "table" default value assigned above in the context of a table cell, otherwise padding will be ignored */
986    }
987    
988  article note.important {  article note.important {
989      border-left:solid 10px #ff4141;      border-left:solid 10px #ff4141;
990  }  }
# Line 929  article > ul.docpager > li:nth-child(1) Line 1119  article > ul.docpager > li:nth-child(1)
1119      content: "◀ ";      content: "◀ ";
1120  }  }
1121    
1122    .iOS
1123    article > ul.docpager > li:nth-child(1) > a:before {
1124        font-family:"Hiragino Mincho ProN";
1125    }
1126    
1127  article > ul.docpager > li:nth-child(2) {  article > ul.docpager > li:nth-child(2) {
1128      text-align:center;      text-align:center;
1129      padding-left:10px;      padding-left:10px;
# Line 939  article > ul.docpager > li:nth-child(2) Line 1134  article > ul.docpager > li:nth-child(2)
1134      content: "▲ ";      content: "▲ ";
1135  }  }
1136    
1137    .iOS
1138    article > ul.docpager > li:nth-child(2) > a:before {
1139        font-family:"Hiragino Mincho ProN";
1140    }
1141    
1142  article > ul.docpager > li:nth-child(3) {  article > ul.docpager > li:nth-child(3) {
1143      text-align:right;      text-align:right;
1144      padding-left:10px;      padding-left:10px;
# Line 948  article > ul.docpager > li:nth-child(3) Line 1148  article > ul.docpager > li:nth-child(3)
1148      content: " ▶";      content: " ▶";
1149  }  }
1150    
1151    .iOS
1152    article > ul.docpager > li:nth-child(3) > a:after {
1153        font-family:"Hiragino Mincho ProN";
1154    }
1155    
1156  article > .endline {  article > .endline {
1157      font-family:CRDSans;      font-family:CRDSans;
1158      font-size:16px;      font-size:16px;
# Line 994  footer a { Line 1199  footer a {
1199      border:0;      border:0;
1200  }  }
1201    
1202  footer a:hover {  .no-touch footer a:hover,
1203    .touch footer a:focus,
1204    .touch footer a:active
1205    {
1206      text-decoration:underline;      text-decoration:underline;
1207  }  }
Legend:
Removed from v.2831  
changed lines
  Added in v.3905
  ViewVC Help
Powered by ViewVC