]> Shamusworld >> Repos - ardour-manual/blob - source/css/app.css
A bit of styling for the 1-page version
[ardour-manual] / source / css / app.css
1 @font-face {
2     font-family: 'junge-regular';
3     src: url('junge-regular-webfont.woff2') format('woff2'),
4          url('junge-regular-webfont.woff') format('woff'),
5          url('junge-regular-webfont.ttf')  format('truetype');
6     font-weight: normal;
7     font-style: normal;
8 }
9
10 body {
11   font-family: 'junge-regular';
12   font-size: 16px;
13   line-height: 2ex;
14 }
15
16 div.clearer {
17   clear:both;
18 }
19
20 ul.inside li, ol.inside li {
21         left: 1em;
22         position: relative;
23         padding-right: 1em;
24 }
25
26 #tree {
27   background-color: #212A30;
28   line-height: 1.8ex;
29   height: 100%;
30   overflow: scroll;
31   position: fixed;
32   top: 0;
33   bottom: 0;
34   left: 0;
35   width: 20em;
36 }
37
38 #tree-inner {
39   padding: 1em 1em 2em 1.5em;
40 }
41
42 #tree h1.title {
43   font-size: 1.75em;
44   margin-bottom: 1em;
45   font-weight: normal;
46 }
47
48 #tree dl {
49   margin-left: 1em;
50 }
51
52 #tree ul {
53   padding-left: 1em;
54   list-style-type: none;
55 }
56
57 #tree h1.title a:hover {
58   border-bottom: none;
59 }
60
61 #tree dd.other {
62   display: none;
63 }
64
65 #tree .level-1,
66 #tree .parent,
67 #tree .child,
68 #tree .parent *,
69 #tree .child * {
70   display: inherit;
71   color: inherit;
72 }
73
74 #tree dd.child-1,
75 #tree .child-2,
76 #tree .child-3,
77 #tree .child-4 {
78   display: none;
79 }
80
81 #tree a {
82   display: inline !important;
83   font-size: 0.88em;
84   font-weight: normal;
85   line-height: 2em;
86   color: #E4E4E4;
87   border-bottom: 1px solid transparent;
88   padding-bottom: .1ex;
89 }
90
91 #tree a:hover {
92   text-decoration: none;
93   border-bottom: 1px solid #aaa;
94 }
95
96 #tree .active > a {
97   display: inline;
98   color: #da0808;
99   border-bottom: 1px solid #FFF;
100 }
101
102 #content {
103   padding: 1em 2em 2ex 21em;
104   margin-left: 0;
105 }
106
107 #content-main {
108   padding-top: 1ex;
109   padding-left: .5em;
110 }
111
112
113 #content p,
114 #content li,
115 #content dt,
116 #content dd,
117 #content td,
118 #content th{
119   line-height: 2em;
120 }
121
122 #content h1,
123 #content h2,
124 #content h3,
125 #content h4 {
126   font-weight: normal;
127   padding-bottom: .3ex;
128 }
129
130 #content h1.clear,
131 #content h2.clear,
132 #content h3.clear,
133 #content h4.clear {
134         clear:both;
135 }
136
137 #content h1.title {
138   font-size: 1.8em;
139   margin: 0 0 2ex 0;
140   padding-bottom: .8ex;
141   border-bottom: 2px solid #ccc;
142 }
143
144 #content h2 {
145   font-size: 1.3em;
146   margin: 2ex 0 1ex 0;
147   border-bottom: 2px solid #ddd;
148 }
149
150 #content h3 {
151   font-size: 1.2em;
152   margin: 1.5ex 0 1ex 0;
153   border-bottom: 1px solid #eee;
154 }
155
156 #content h4 {
157   font-size: 1.1em;
158   margin: 1.5ex 0 .5ex 0;
159   border-bottom: 1px solid #eee;
160 }
161
162 #content table,
163 #content table.dl {
164   width:100%;
165   margin: 1em 0;
166   padding: 0;
167   font-weight: normal;
168   text-align: left;
169   line-height: 2ex;
170 }
171
172 #content table tr {
173   border-bottom: 2px solid #eeeeee;
174 }
175
176 #content table tr:nth-child(odd){
177   background-color: white;
178 }
179
180 #content table tr:nth-child(even){
181   background-color: #f5f5f5;
182 }
183
184 #content table tr:hover {
185   background-color: #F2F9FF;
186 }
187
188 #content table td,
189 #content table th {
190   margin: 0;
191   padding: .5em;
192 }
193
194 #content table th {
195   font-weight: bold;
196 }
197
198 #content table td {
199   font-weight: normal;
200 }
201
202
203 #content table th.sub1 {
204   padding-left: 2em;
205 }
206
207 #content table th.sub2 {
208   padding-left: 4em;
209 }
210
211 #content table thead {
212   font-weight:bold;
213 }
214
215 #content table.dl th {
216   /* dl class (definition list) is for 2-columns tables that describe properties:
217   maximmizes the width of the 2nd (description) column */
218   vertical-align: top;
219   min-width: 20%;
220   white-space:nowrap
221 }
222
223 #content table.dl td {
224   vertical-align: top;
225   width: 100%;
226 }
227
228 #content dl
229 {
230   float:none;
231   clear:both;
232   width:100%;
233   margin: 1em 0;
234   padding: 0;
235   display:inline-block;
236 }
237
238 #content dl:after {
239   content:' ';
240   display:block;
241   clear:both;
242 }
243
244 #content dt,
245 #content dd {
246   border-top: 2px solid #eee;
247   float: left;
248   margin: 0;
249   padding: .5em;
250   font-weight: normal;
251 }
252
253 #content dt {
254   clear: left;
255   width: 25%;
256 }
257
258 #content dd {
259   width: 65%;
260 }
261
262 #content dt.sub1 {
263   padding-left: 2em;
264 }
265
266 #content dt.sub2 {
267   padding-left: 4em;
268 }
269
270 #content dt:first-child,
271 #content dd:nth-child(2) {
272   border-top: none;
273 }
274
275
276 #content figure {
277   display: table;
278 }
279
280 #content figcaption {
281         display: table-caption;
282         caption-side: bottom;
283         font-style: italic;
284   padding-top: 0.5em;
285   padding-bottom: 1em;
286 }
287
288 #content figcaption.center {
289         text-align: center;
290         caption-side: bottom;
291 }
292
293 #content figcaption.titleover {
294   text-align: center;
295         caption-side: top ;
296 }
297
298 #content figure.right {
299   margin: 0 0 1em 1em;
300   float: right;
301   clear: right;
302 }
303
304 #content figure.left {
305   margin: 0 1em 1em 0;
306   float: left;
307   clear: left;
308 }
309
310 #content figure.center {
311   margin: 1em auto 1em auto;
312   clear: both;
313 }
314
315 .multicol2 {
316   width: 48%;
317         float:left;
318         padding:0 0 0 2%;
319         margin:0;
320 }
321
322 .multicol3 {
323   width: 31%;
324         float:left;
325         padding:0 0 0 2%;
326         margin:0;
327 }
328
329 kbd {
330   display: inline-block;
331   min-width: 1em;
332   padding: .2em .3em;
333   font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
334   text-align: center;
335   text-decoration: none;
336   border-radius: .3em;
337   cursor: default;
338   background: rgb(250, 250, 250);
339   background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
340   background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
341   color:  rgb(50, 50, 50);
342   text-shadow: 0 0 2px rgb(255, 255, 255);
343   box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
344   white-space:nowrap;
345   text-transform:capitalize;
346 }
347
348 kbd.def {
349   font-weight:bolder;
350         margin-right:.2em;
351 }
352
353 kbd.input,
354 kbd.cmd,
355 kbd.osc {
356   font-family:mono;
357   border-width:0;
358   text-transform:none;
359 }
360
361 kbd.input {
362   background:none;
363   border-radius: 0;
364 }
365
366 kbd.cmd {
367   display:block;
368   width:100%;
369   margin-bottom:1ex;
370   text-transform:none;
371   background: rgb(220, 220, 220);
372   text-shadow: none;
373   box-shadow: none;
374   text-align:left;
375 }
376
377 kbd.cmd.lin:before {
378   content: 'user@linux:~ ';
379   color:#999999;
380 }
381
382 kbd.cmd.mac:before {
383   content: 'MacBook:~/Desktop User\$ ';
384   color:#999999;
385 }
386
387 kbd.cmd.win:before {
388   content: 'C:\\Users\\myAccount> ';
389   color:#999999;
390 }
391
392 kbd.optoff,
393 kbd.option {
394   border:none;
395   background:none;
396 }
397
398 kbd.optoff:before {
399   content:url('/images/checkbox-unchecked.png');
400   margin: 0 1em 0 0;
401   vertical-align:middle;
402 }
403
404 kbd.option:before {
405   content:url('/images/checkbox-checked.png');
406   margin: 0 1em 0 0;
407   vertical-align:middle;
408 }
409
410 kbd.menu {
411   border:none;
412   background:none;
413   font-weight:bold;
414   font-stretch:extra-condensed;
415   white-space:normal;
416 }
417
418 kbd.osc {
419   border:none;
420   background: rgb(208, 208, 243);
421   font-stretch:extra-condensed;
422   white-space: nowrap;
423   text-align:left;
424 }
425
426 kbd.fader,
427 kbd.knob,
428 kbd.button {
429   background: rgb(174, 174, 217);
430   background: -moz-linear-gradient(top, rgb(174, 174, 217), rgb(221, 221, 255));
431   background: -webkit-gradient(linear, left top, left bottom, from(rgb(174, 174, 217)), to(rgb(221, 221, 255)));
432   color:#000044;
433 }
434
435 kbd.fader {
436   border-width: 1px 1px 9px 9px;
437 }
438
439 kbd.knob {
440   border-radius:12px;
441   border-width: 1px 1px 9px 9px;
442 }
443
444 kbd.button {
445   border-radius:8px;
446   border-width: 1px 1px 3px 3px;
447 }
448
449 kbd.mouse {
450   border-radius:10px;
451 }
452
453 samp {
454   font-family:mono;
455   font-style:italic;
456   color:#333333;
457   background-color:transparent;
458   margin-left: 1em;
459   margin-right: 1em;
460 }
461
462 samp:before {
463   content:"\BB";
464 }
465
466 samp:after {
467   content:"\AB";
468 }
469
470 #subtopics ul {
471   font-weight:bold;
472 }
473
474 #content dfn {
475   font-weight: bold;
476   font-style: normal;
477 }
478
479 #content img.right {
480   margin: 0 0 1em 1em;
481   float:right;
482   clear:right;
483 }
484
485 #content img.left {
486   margin:0 1em 1em 0;
487   float:left;
488   clear:left;
489 }
490
491 #content img.center {
492   display: block;
493   margin:1em auto 1em auto;
494         clear: both;
495 }
496
497 #content img.mini {
498   width:200px;
499 }
500
501 #content img.mini:hover {
502   width: 100%;
503   /*transition: width .5s ease; doesn't work on right-floated figures */
504 }
505
506 #content p.center {
507         text-align:center;
508 }
509
510 #content .note,
511 #content .warning,
512 #content .fixme {
513   min-height: 1.5ex;
514   padding: 1em;
515   margin-bottom: 1em;
516   border-style: solid;
517   border-width: 1px 1px 1px 8px;
518   -webkit-border-radius: 4px;
519      -moz-border-radius: 4px;
520           border-radius: 4px;
521   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
522      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
523           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
524 }
525
526 #content code {
527   font-size: .9em;
528   color: #555;
529 }
530
531 #content .note {
532   border-color: #e3e3e3;
533   background-color: #f5f5f5;
534 }
535
536 #content .warning {
537   border-color: #995555;
538   background-color: #ffeeee;
539 }
540
541 #content .fixme {
542   border-color: #999944;
543   background-color: #f0f0e0;
544   font-weight:bold;
545 }
546
547 .fixme:before {
548   content:'FIXME: ';
549   font-style: italic;
550   font-size:2em;
551 }
552
553 /* Keyboard modifiers */
554 .mod1:before {        content: "Ctrl ";}
555 .mod2:before {        content: "Alt ";}
556 .mod3:before {        content: "Shift ";}
557 .mod4:before {        content: "Win ";}
558 .mod12:before {       content: "Ctrl Alt ";}
559 .mod13:before {       content: "Ctrl Shift ";}
560 .mod14:before {       content: "Ctrl Win ";}
561 .mod23:before {       content: "Alt Shift ";}
562 .kp:before {          content: "Keypad ";}
563 /* Variants *without* space after them (yes, these are needed!) */
564 .mod1n:before {       content: "Ctrl";}
565 .mod2n:before {       content: "Alt";}
566 .mod3n:before {       content: "Shift";}
567 .mod4n:before {       content: "Win";}
568 .mod12n:before {      content: "Ctrl Alt";}
569 .mod13n:before {      content: "Ctrl Shift";}
570 .mod14n:before {      content: "Ctrl Win";}
571 .mod23n:before {      content: "Alt Shift";}
572 /* Automagic translation for Mac based display */
573 .mac .mod1:before {   content: "Cmd ";}
574 .mac .mod2:before {   content: "Ctrl ";}
575 .mac .mod3:before {   content: "Shift ";}
576 .mac .mod4:before {   content: "Opt ";}
577 .mac .mod12:before {  content: "Cmd Ctrl ";}
578 .mac .mod13:before {  content: "Cmd Shift ";}
579 .mac .mod14:before {  content: "Cmd Opt ";}
580 .mac .mod23:before {  content: "Ctrl Shift ";}
581 /* No space variants (Mac based) */
582 .mac .mod1n:before {  content: "Cmd";}
583 .mac .mod2n:before {  content: "Ctrl";}
584 .mac .mod3n:before {  content: "Shift";}
585 .mac .mod4n:before {  content: "Opt";}
586 .mac .mod12n:before { content: "Cmd Ctrl";}
587 .mac .mod13n:before { content: "Cmd Shift";}
588 .mac .mod14n:before { content: "Cmd Opt";}
589 .mac .mod23n:before { content: "Ctrl Shift";}
590
591 @media (max-width: 800px) {
592   #tree {
593     position: relative;
594     height: 250px;
595     width: 100%;
596     margin-top: 20px;
597   }
598   #content {
599     padding-left: 20px;
600     margin-top: 0px;
601   }
602 }
603
604 /* for the TOC */
605 #content p.chapter,
606 #content p.subchapter,
607 #content p.section,
608 #content p.subsection {
609   line-height:1em;
610 }
611 #content p.chapter { padding-top: 1em; padding-left: 1em; padding-bottom:1em; }
612 #content p.subchapter { padding-left: 4em; }
613 #content p.section { padding-left: 6em; }
614 #content p.subsection { padding-left: 8em; }
615
616 /* for images sliced in divs, as in http://manual.ardour.org/ardours-interface/about/ */
617 .container { position: relative; border: none; }
618 .hoverimg { position: absolute; border: none; }
619 .hoverimg:hover{ z-index:100; box-shadow: 0 0 .2em .2em lightgreen; }