/[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 3272 by schoenebeck, Sat Jun 3 15:38:32 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  }  }
17    
18  body {  body {
# Line 24  body { Line 25  body {
25      background:         linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */      background:         linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */
26      counter-reset:oli;      counter-reset:oli;
27      counter-reset:codeline;      counter-reset:codeline;
28        -webkit-text-size-adjust:100%;
29    }
30    
31    .no-effect {
32        -webkit-transition: none !important;
33           -moz-transition: none !important;
34            -ms-transition: none !important;
35             -o-transition: none !important;
36                transition: none !important;
37  }  }
38    
39    
# Line 82  header > menu a { Line 92  header > menu a {
92              transition: text-shadow 0.9s linear, color 0.9s linear;              transition: text-shadow 0.9s linear, color 0.9s linear;
93  }  }
94    
95  header > menu a:hover {  .no-touch header > menu a:hover,
96    .touch header > menu a:focus,
97    .touch header > menu a:active
98    {
99      color:#ffffff;      color:#ffffff;
100      text-shadow: 0px 0px 13px #ff9999;      text-shadow: 0px 0px 13px #ff9999;
101      -webkit-transition: text-shadow 0.31s, color 0.31s; /* Safari */      -webkit-transition: text-shadow 0.31s, color 0.31s; /* Safari */
# Line 115  nav { Line 128  nav {
128      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 */
129      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 */
130      box-shadow: 0px 10px 8px rgba(15,15,15,0.25);      box-shadow: 0px 10px 8px rgba(15,15,15,0.25);
131    
132        -webkit-transition: -webkit-transform 0.16s ease, padding-left 0.2s ease;
133             -o-transition:      -o-transform 0.16s ease, padding-left 0.2s ease;
134            -ms-transition:     -ms-transform 0.16s ease, padding-left 0.2s ease;
135           -moz-transition:    -moz-transform 0.16s ease, padding-left 0.2s ease;
136                transition:         transform 0.16s ease, padding-left 0.2s ease;
137    }
138    
139    .no-effect nav {
140        -webkit-transition: none !important;
141           -moz-transition: none !important;
142            -ms-transition: none !important;
143             -o-transition: none !important;
144                transition: none !important;
145    }
146    
147    .no-toc nav {
148        padding-left:56px;
149    
150        -webkit-transition: -webkit-transform 0.16s ease, padding-left 0.2s ease;
151             -o-transition:      -o-transform 0.16s ease, padding-left 0.2s ease;
152            -ms-transition:     -ms-transform 0.16s ease, padding-left 0.2s ease;
153           -moz-transition:    -moz-transform 0.16s ease, padding-left 0.2s ease;
154                transition:         transform 0.16s ease, padding-left 0.2s ease;
155    }
156    
157    .no-effect
158    .no-toc nav {
159        -webkit-transition: none !important;
160           -moz-transition: none !important;
161            -ms-transition: none !important;
162             -o-transition: none !important;
163                transition: none !important;
164    }
165    
166    nav > div.foldbtn {
167        display:block;
168        position:fixed;
169        top:33;
170        left:10;
171        color:#998952;
172        font-weight:200;
173        font-size:28px;
174  }  }
175    
176  nav > ul {  nav > ul {
# Line 131  nav > ul > li { Line 187  nav > ul > li {
187      padding:4px 4px 4px 3px;      padding:4px 4px 4px 3px;
188  }  }
189    
190  nav > ul > li:hover {  .no-touch nav > ul > li:hover,
191    .touch nav > ul > li.active
192    {
193      color:white;      color:white;
194      background-color:rgba(80,80,80,0.5);      background-color:rgba(80,80,80,0.5);
195      border-left-style:solid;      border-left-style:solid;
# Line 151  nav > ul > li:last-child { Line 209  nav > ul > li:last-child {
209      font-weight:500;      font-weight:500;
210  }  }
211    
212  nav > ul > li:last-child:hover {  .no-touch nav > ul > li:last-child:hover,
213    .touch nav > ul > li:last-child.active
214    {
215      color:white;      color:white;
216  }  }
217    
# Line 162  nav > ul > li::before { Line 222  nav > ul > li::before {
222      padding-right:5px;      padding-right:5px;
223  }  }
224    
225    .iOS
226    nav > ul > li::before {
227        font-family:"Hiragino Mincho ProN";
228    }
229    
230  nav > ul > li:first-child::before {  nav > ul > li:first-child::before {
231      content: "";      content: "";
232  }  }
# Line 226  nav > ul > li ul { /* rule extension for Line 291  nav > ul > li ul { /* rule extension for
291              transition:         transform 0.16s ease, opacity 0.2s ease;              transition:         transform 0.16s ease, opacity 0.2s ease;
292  }  }
293    
294  .hasTransform  
295  nav > ul > li:hover ul { /* rule extension for drop down menu */  .no-touch .hasTransform nav > ul > li:hover ul,
296    .touch .hasTransform nav > ul > li.active ul
297    { /* rule extension for drop down menu */
298      display:block;      display:block;
299      opacity:1;      opacity:1;
300    
# Line 301  aside { Line 368  aside {
368      -webkit-border-bottom-left-radius: 11px;      -webkit-border-bottom-left-radius: 11px;
369      -moz-border-radius-bottomleft: 11px;      -moz-border-radius-bottomleft: 11px;
370      border-bottom-left-radius: 11px;      border-bottom-left-radius: 11px;
371    
372        -webkit-transition: -webkit-transform 0.16s ease, width 0.2s ease;
373             -o-transition:      -o-transform 0.16s ease, width 0.2s ease;
374            -ms-transition:     -ms-transform 0.16s ease, width 0.2s ease;
375           -moz-transition:    -moz-transform 0.16s ease, width 0.2s ease;
376                transition:         transform 0.16s ease, width 0.2s ease;
377    }
378    
379    .no-effect aside {
380        -webkit-transition: none !important;
381           -moz-transition: none !important;
382            -ms-transition: none !important;
383             -o-transition: none !important;
384                transition: none !important;
385    }
386    
387    .no-toc aside {
388        overflow:hidden;
389        width:0;
390    
391        -webkit-transition: -webkit-transform 0.16s ease, width 0.2s ease;
392             -o-transition:      -o-transform 0.16s ease, width 0.2s ease;
393            -ms-transition:     -ms-transform 0.16s ease, width 0.2s ease;
394           -moz-transition:    -moz-transform 0.16s ease, width 0.2s ease;
395                transition:         transform 0.16s ease, width 0.2s ease;
396    }
397    
398    .no-effect
399    .no-toc aside {
400        -webkit-transition: none !important;
401           -moz-transition: none !important;
402            -ms-transition: none !important;
403             -o-transition: none !important;
404                transition: none !important;
405  }  }
406    
407  aside > div.toc {  aside > div.toc {
# Line 384  aside > div.toc > ul > li > ul > li.curr Line 485  aside > div.toc > ul > li > ul > li.curr
485      text-shadow: 0px 0px 8px #fbf1f1;      text-shadow: 0px 0px 8px #fbf1f1;
486  }  }
487    
488  aside > div.toc > ul > li:hover {  
489    .no-touch aside > div.toc > ul > li:hover,
490    .touch aside > div.toc > ul > li:focus,
491    .touch aside > div.toc > ul > li:active
492    {
493      background-color:rgba(255,0,0,0.22);      background-color:rgba(255,0,0,0.22);
494      -webkit-transition: background-color 0.25s; /* Safari */      -webkit-transition: background-color 0.25s; /* Safari */
495         -moz-transition: background-color 0.25s;         -moz-transition: background-color 0.25s;
# Line 393  aside > div.toc > ul > li:hover { Line 498  aside > div.toc > ul > li:hover {
498              transition: background-color 0.25s linear;              transition: background-color 0.25s linear;
499  }  }
500    
501  aside > div.toc > ul > li > ul > li:hover {  .no-touch aside > div.toc > ul > li > ul > li:hover,
502    .touch aside > div.toc > ul > li > ul > li:focus,
503    .touch aside > div.toc > ul > li > ul > li:active
504    {
505      list-style-type:disc;      list-style-type:disc;
506  }  }
507    
# Line 470  aside > div.toc > div.buttons > *:last-c Line 578  aside > div.toc > div.buttons > *:last-c
578      border-bottom-right-radius: 11px;      border-bottom-right-radius: 11px;
579  }  }
580    
581  aside > div.toc > div.buttons > *:not(.disabled):hover {  .no-touch aside > div.toc > div.buttons > *:not(.disabled):hover,
582    .touch aside > div.toc > div.buttons > *:not(.disabled):focus,
583    .touch aside > div.toc > div.buttons > *:not(.disabled):active
584    {
585      background-color:rgba(255,0,0,0.21);      background-color:rgba(255,0,0,0.21);
586      -webkit-transition: background-color 0.25s; /* Safari */      -webkit-transition: background-color 0.25s; /* Safari */
587         -moz-transition: background-color 0.25s;         -moz-transition: background-color 0.25s;
# Line 484  aside > div.toc > div.buttons .arrow { Line 595  aside > div.toc > div.buttons .arrow {
595      font-size:15px;      font-size:15px;
596  }  }
597    
598    .iOS
599    aside > div.toc > div.buttons .arrow {
600        font-family:"Hiragino Mincho ProN";
601    }
602    
603    
604    
605  /* Article */  /* Article */
# Line 503  article { Line 619  article {
619      border-left-style:solid;      border-left-style:solid;
620      border-left-width:1px;      border-left-width:1px;
621      border-left-color:#898989;      border-left-color:#898989;
622    
623        -webkit-transition: -webkit-transform 0.16s ease, margin-left 0.2s ease;
624             -o-transition:      -o-transform 0.16s ease, margin-left 0.2s ease;
625            -ms-transition:     -ms-transform 0.16s ease, margin-left 0.2s ease;
626           -moz-transition:    -moz-transform 0.16s ease, margin-left 0.2s ease;
627                transition:         transform 0.16s ease, margin-left 0.2s ease;
628    }
629    
630    .no-effect article {
631        -webkit-transition: none !important;
632           -moz-transition: none !important;
633            -ms-transition: none !important;
634             -o-transition: none !important;
635                transition: none !important;
636    }
637    
638    .no-toc article {
639        margin-left:0px;
640    
641        -webkit-transition: -webkit-transform 0.16s ease, margin-left 0.2s ease;
642             -o-transition:      -o-transform 0.16s ease, margin-left 0.2s ease;
643            -ms-transition:     -ms-transform 0.16s ease, margin-left 0.2s ease;
644           -moz-transition:    -moz-transform 0.16s ease, margin-left 0.2s ease;
645                transition:         transform 0.16s ease, margin-left 0.2s ease;
646    }
647    
648    .no-effect
649    .no-toc article {
650        -webkit-transition: none !important;
651           -moz-transition: none !important;
652            -ms-transition: none !important;
653             -o-transition: none !important;
654                transition: none !important;
655  }  }
656    
657  article h1 {  article h1 {
# Line 551  article p { Line 700  article p {
700      clear:both;      clear:both;
701  }  }
702    
703    /* automatically center the 1st paragraph (block) directly after a h1 type header (since that header type is centered as well) */
704    article h1 + p {
705        display:table; /*HACK: "block" would stretch the entire page width */
706        margin-left:auto;
707        margin-right:auto;
708    }
709    
710  article a {  article a {
711      font-weight:400;      font-weight:400;
712      color:#1ba1dd;      color:#1ba1dd;
# Line 568  article li img { Line 724  article li img {
724      float:left;      float:left;
725  }  }
726    
727  article a:hover {  .no-touch article a:hover,
728    .touch article a:focus,
729    .touch article a:active
730    {
731      text-decoration:underline;      text-decoration:underline;
732  }  }
733    
# Line 746  article tr { Line 905  article tr {
905  }  }
906    
907  article th {  article th {
908      background-color:#e8e2e2;      background-color:#e0e0ff;
909      padding:0px 8px 0px 8px;      padding:0px 8px 0px 8px;
910      margin:0 0 0 0;      margin:0 0 0 0;
911      border:3px solid white;      border:3px solid white;
# Line 795  article note { Line 954  article note {
954      max-width:         calc(100% - 145px);      max-width:         calc(100% - 145px);
955  }  }
956    
957    article td > note {
958        display:block; /*HACK: override "table" default value assigned above in the context of a table cell, otherwise padding will be ignored */
959    }
960    
961  article note.important {  article note.important {
962      border-left:solid 10px #ff4141;      border-left:solid 10px #ff4141;
963  }  }
# Line 929  article > ul.docpager > li:nth-child(1) Line 1092  article > ul.docpager > li:nth-child(1)
1092      content: "◀ ";      content: "◀ ";
1093  }  }
1094    
1095    .iOS
1096    article > ul.docpager > li:nth-child(1) > a:before {
1097        font-family:"Hiragino Mincho ProN";
1098    }
1099    
1100  article > ul.docpager > li:nth-child(2) {  article > ul.docpager > li:nth-child(2) {
1101      text-align:center;      text-align:center;
1102      padding-left:10px;      padding-left:10px;
# Line 939  article > ul.docpager > li:nth-child(2) Line 1107  article > ul.docpager > li:nth-child(2)
1107      content: "▲ ";      content: "▲ ";
1108  }  }
1109    
1110    .iOS
1111    article > ul.docpager > li:nth-child(2) > a:before {
1112        font-family:"Hiragino Mincho ProN";
1113    }
1114    
1115  article > ul.docpager > li:nth-child(3) {  article > ul.docpager > li:nth-child(3) {
1116      text-align:right;      text-align:right;
1117      padding-left:10px;      padding-left:10px;
# Line 948  article > ul.docpager > li:nth-child(3) Line 1121  article > ul.docpager > li:nth-child(3)
1121      content: " ▶";      content: " ▶";
1122  }  }
1123    
1124    .iOS
1125    article > ul.docpager > li:nth-child(3) > a:after {
1126        font-family:"Hiragino Mincho ProN";
1127    }
1128    
1129  article > .endline {  article > .endline {
1130      font-family:CRDSans;      font-family:CRDSans;
1131      font-size:16px;      font-size:16px;
# Line 994  footer a { Line 1172  footer a {
1172      border:0;      border:0;
1173  }  }
1174    
1175  footer a:hover {  .no-touch footer a:hover,
1176    .touch footer a:focus,
1177    .touch footer a:active
1178    {
1179      text-decoration:underline;      text-decoration:underline;
1180  }  }
Legend:
Removed from v.2831  
changed lines
  Added in v.3272
  ViewVC Help
Powered by ViewVC