/[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 2734 by schoenebeck, Tue Apr 28 13:28:03 2015 UTC revision 3282 by schoenebeck, Wed Jun 7 12:34:29 2017 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 - 2017 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 547  article h3 { Line 704  article h3 {
704      font-weight:300;      font-weight:300;
705  }  }
706    
707    article p {
708        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 555  article a { Line 723  article a {
723      border:none;      border:none;
724  }  }
725    
726  article a:hover {  article a img {
727        border:none;
728        text-decoration:none;
729    }
730    
731    article li img {
732        float:left;
733    }
734    
735    .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 733  article tr { Line 913  article tr {
913  }  }
914    
915  article th {  article th {
916      background-color:#e8e2e2;      background-color:#e0e0ff;
917      padding:0px 8px 0px 8px;      padding:0px 8px 0px 8px;
918      margin:0 0 0 0;      margin:0 0 0 0;
919      border:3px solid white;      border:3px solid white;
# Line 782  article note { Line 962  article note {
962      max-width:         calc(100% - 145px);      max-width:         calc(100% - 145px);
963  }  }
964    
965    article td > note {
966        display:block; /*HACK: override "table" default value assigned above in the context of a table cell, otherwise padding will be ignored */
967    }
968    
969  article note.important {  article note.important {
970      border-left:solid 10px #ff4141;      border-left:solid 10px #ff4141;
971  }  }
# Line 800  article > img, example > img { Line 984  article > img, example > img {
984  article p img {  article p img {
985      display:inline-block;      display:inline-block;
986      float:left;      float:left;
987      margin:4px 20px 0px 0px;      margin:4px 20px 19px 0px;
988      padding:0 0 0 0;      padding:0 0 0 0;
989      /*border:solid 1px #8e8e8e;*/      /*border:solid 1px #8e8e8e;*/
990      border:none;      border:none;
# Line 854  article example { Line 1038  article example {
1038      padding:5px 15px 8px 24px;      padding:5px 15px 8px 24px;
1039  }  }
1040    
1041    article dir {
1042        display:block;
1043        list-style-type:none;
1044        background-image:url('../pix/folder.png');
1045        background-repeat:no-repeat;
1046        background-position:2px top;
1047        padding:0px;
1048        margin:0px;
1049        font-family:CRDCour;
1050        font-size:15px;
1051        color:#000000;
1052    }
1053    
1054    article > dir, example > dir {
1055        padding-left:66px;
1056        background-position:36px top;
1057    }
1058    
1059    article dir > * {
1060        padding-top:2px;
1061        padding-bottom:2px;
1062        padding-left:31px;
1063    }
1064    
1065    article dir file {
1066        display:block;
1067        list-style-type:none;
1068        background-image:url('../pix/file.png');
1069        background-repeat:no-repeat;
1070        background-position:2px top;
1071        font-family:CRDCour;
1072        font-size:15px;
1073        color:#6f6f6f;
1074    }
1075    
1076    
1077    
1078  /* article footer */  /* article footer */
# Line 881  article > ul.docpager > li:nth-child(1) Line 1100  article > ul.docpager > li:nth-child(1)
1100      content: "◀ ";      content: "◀ ";
1101  }  }
1102    
1103    .iOS
1104    article > ul.docpager > li:nth-child(1) > a:before {
1105        font-family:"Hiragino Mincho ProN";
1106    }
1107    
1108  article > ul.docpager > li:nth-child(2) {  article > ul.docpager > li:nth-child(2) {
1109      text-align:center;      text-align:center;
1110      padding-left:10px;      padding-left:10px;
# Line 891  article > ul.docpager > li:nth-child(2) Line 1115  article > ul.docpager > li:nth-child(2)
1115      content: "▲ ";      content: "▲ ";
1116  }  }
1117    
1118    .iOS
1119    article > ul.docpager > li:nth-child(2) > a:before {
1120        font-family:"Hiragino Mincho ProN";
1121    }
1122    
1123  article > ul.docpager > li:nth-child(3) {  article > ul.docpager > li:nth-child(3) {
1124      text-align:right;      text-align:right;
1125      padding-left:10px;      padding-left:10px;
# Line 900  article > ul.docpager > li:nth-child(3) Line 1129  article > ul.docpager > li:nth-child(3)
1129      content: " ▶";      content: " ▶";
1130  }  }
1131    
1132    .iOS
1133    article > ul.docpager > li:nth-child(3) > a:after {
1134        font-family:"Hiragino Mincho ProN";
1135    }
1136    
1137  article > .endline {  article > .endline {
1138      font-family:CRDSans;      font-family:CRDSans;
1139      font-size:16px;      font-size:16px;
# Line 946  footer a { Line 1180  footer a {
1180      border:0;      border:0;
1181  }  }
1182    
1183  footer a:hover {  .no-touch footer a:hover,
1184    .touch footer a:focus,
1185    .touch footer a:active
1186    {
1187      text-decoration:underline;      text-decoration:underline;
1188  }  }
Legend:
Removed from v.2734  
changed lines
  Added in v.3282
  ViewVC Help
Powered by ViewVC