]> Shamusworld >> Repos - ardour-manual-diverged/blob - source/css/app.css
CSS: swap column widths for bindings <dl>: 65% for the description, 30% for the key...
[ardour-manual-diverged] / source / css / app.css
1 #tree {
2   background-color: #eee;
3   height: 100%;
4   overflow: scroll;
5   position: fixed;
6   top: 0;
7   bottom: 0;
8   left: 0;
9   width: 300px;
10 }
11
12 #tree-inner {
13   padding: 15px 20px 30px 30px;  
14 }
15
16 #tree h1.title {
17   font-size: 28px;
18   margin-bottom: 20px;
19   font-weight: normal;
20 }
21
22 #tree h1.title a:hover {
23   border-bottom: none;
24 }
25
26 #tree a {
27   font-size: 14px; 
28   line-height: 28px;
29 }
30
31 #tree dd.other {
32   display: none;
33 }
34
35 #tree .level-1,
36 #tree .parent,
37 #tree .child,
38 #tree .parent *,
39 #tree .child * {
40   display: inherit; 
41   color: inherit;
42 }
43
44 #tree dd.child-1,
45 #tree .child-2,
46 #tree .child-3,
47 #tree .child-4 {
48   display: none; 
49 }
50
51
52 #search {
53   height: 70px;
54 }
55
56 #content {
57     padding: 10px 30px 30px 350px;
58     margin-left: 0;
59 }
60
61 #content-main {
62   padding-top: 10px;
63   padding-left: 10px;
64 }
65
66 #content p,
67 #content li,
68 #content dt,
69 #content dd {
70   font-size: 16px;
71   line-height: 28px; 
72 }
73
74
75 #tree a {
76     display: inline !important;
77     font-weight: normal; 
78     color: #666;
79     border-bottom: 1px solid transparent;
80     padding-bottom: 2px;
81 }
82
83 #tree a:hover {
84     text-decoration: none;
85     border-bottom: 1px solid #aaa;
86 }
87
88 #tree .active > a {
89     display: inline;
90     color: #000;
91     border-bottom: 1px solid #555;
92
93 }
94
95 #content,
96 #tree {
97   font-family: Junge;
98 }
99
100 #content h1,
101 #content h2,
102 #content h3,
103 #content h4 {
104     font-weight: normal;
105 }
106
107 #content h1.title {
108  border-bottom: 2px solid #ccc;
109   padding-bottom: 10px;
110   margin-bottom: 40px;
111 }
112
113 #content h2 {
114   margin: 30px 0 20px 0;
115   padding-bottom: 5px;
116   font-size: 22px;
117   border-bottom: 2px solid #ddd;
118 }
119
120 #content h3 {
121  margin: 20px 0 10px 0; 
122   padding-bottom: 5px;
123   font-size: 20px;
124   border-bottom: 1px solid #eee;
125 }
126
127
128 #content h4 {
129   font-size: 18px;
130  margin: 20px 0 10px 0; 
131   padding-bottom: 10px;
132   border-bottom: 1px solid #eee;
133 }
134
135 #content code {
136   font-size: 14px;
137   color: #555;
138 }
139
140 #content dl
141 {
142     float:none;
143     clear:both;
144     width:100%;
145     margin: 1em 0;
146     padding: 0;
147 }
148
149 #content dl:after {
150     content:' ';
151     display:block;
152     clear:both;
153 }
154     
155 #content dt
156 {
157     clear: left;
158     float: left;
159     width: 25%;
160     margin: 0;
161     padding: 5px;
162     font-weight: normal;
163 }
164     
165 #content dd
166 {
167     float: left;
168     width: 65%;
169     margin: 0;
170     padding: 5px;
171     font-weight: normal;
172 }
173
174 /* Keyboard binding layout */
175 #content dl.bindings
176 {
177     float: left;
178     width: 100%;
179     margin: 1em 0;
180     padding: 0;
181 }
182     
183 #content .bindings dt
184 {
185     clear: left;
186     float: left;
187     width: 65%;
188     margin: 0;
189     padding: 0px;
190     font-size: 100%;
191     font-family: "Trebuchet MS", "Bitstream Vera Sans", Verdana, Arial, Helvetica, sans-serif;
192     font-weight: normal;
193 }
194     
195 #content .bindings dd
196 {
197     float: left;
198     width: 30%;
199     margin: 0;
200     padding: 0px;
201     font-size: 110%;
202     font-family: "Bitstream Vera Sans Mono", "Courier New", monospace;
203     font-weight: normal;
204 }
205
206
207 #content dl.wide-table
208 {
209     float: left;
210     width: 100%;
211     margin: 1em 0;
212     padding: 0;
213 }
214     
215 #content .wide-table dt
216 {
217         font-weight: normal;
218     clear: left;
219     float: left;
220     width: 30%;
221     margin: 0;
222     padding: 5px;
223 }
224
225 #content dt,
226 #content dd {
227     border-top: 2px solid #eee;
228 }
229
230 #content dt:first-child,
231 #content dd:nth-child(2) {
232     border-top: none;
233 }
234     
235 #content .wide-table dd
236 {
237     float: left;
238     width: 60%;
239     margin: 0;
240     padding: 5px;
241 }
242
243 #content dl.narrower-table
244 {
245     float: left;
246     width: 100%;
247     margin: 1em 0;
248     padding: 0;
249 }
250     
251 #content .narrower-table dt
252 {
253     clear: left;
254     float: left;
255     width: 20%;
256     margin: 0;
257     padding: 5px;
258 }
259     
260 #content .narrower-table dd
261 {
262     float: left;
263     width: 70%;
264     margin: 0;
265     padding: 5px;
266 }
267
268 kbd {
269     -moz-background-clip:border;
270     -moz-background-inline-policy:continuous;
271     -moz-background-origin:padding;
272     background:#EEEEEE none repeat scroll 0 0;
273     border-color:#CCCCCC #AAAAAA #888888 #BBBBBB;
274     border-style:solid;
275     border-width:2px 2px 4px 4px;
276     color:#000000;
277     padding:1px 2px;
278     white-space:nowrap;
279     text-transform:capitalize;
280 }
281
282 kbd.input,kbd.cmd,kbd.osc {
283     font-family:mono;
284     border-width:0;
285     text-transform:none;
286
287 }
288
289 kbd.cmd {
290     display:block;
291     width:100%;
292     margin-bottom:1ex;
293     text-transform:none;
294 }
295
296 kbd.cmd.lin:before {
297     content: 'user@linux:~ ';
298     color:#999999;
299 }
300
301 kbd.cmd.mac:before {
302     content: 'MacBook:~/Desktop User\$ ';
303     color:#999999;
304 }
305
306 kbd.cmd.win:before {
307     content: 'C:\\Users\\myAccount> ';
308     color:#999999;
309 }
310
311 kbd.mouse {
312     -moz-border-radius:10px;
313     border-radius:10px;
314 }
315
316 /*
317 .mouse:after {
318     position:relative;
319     top:-1em;
320     left:-1em;
321     content:url('/images/mouse-tail.png');
322 }
323 */
324
325 kbd.menu,kbd.option,kbd.optoff {
326     border:none;
327     background-color:transparent;
328     font-weight:bold;
329     font-stretch:extra-condensed;
330     white-space:normal;
331 }
332
333 kbd.option:after,kbd.optoff:after {
334     font-family:mono;
335     font-weight:lighter;
336     text-align:center;
337     border:solid 1px black;
338     margin-left:0.3em;
339 }
340 kbd.option:after {
341     content:'X';
342
343 }
344 kbd.osc {
345 }
346 kbd.optoff:after {
347     content:'    ';
348 }
349
350
351 kbd.fader, kbd.knob, kbd.button {
352     border-color:#ccccff #aaaadd #8888bb #bbbbee;
353     background-color:#ddddff;
354     color:#000044;
355 }
356
357 kbd.fader {
358     border-width: 1px 1px 9px 9px;
359 }
360
361 kbd.knob {
362     -moz-border-radius:12px;
363     border-radius:12px; 
364     border-width: 1px 1px 9px 9px;
365 }
366
367 kbd.button {
368     -moz-border-radius:8px;
369     border-radius:8px;
370     border-width: 1px 1px 3px 3px;
371 }
372
373 samp {
374     font-family:mono;
375     font-style:italic;
376     color:#333333;
377     background-color:transparent;
378     margin-left: 1ex;
379     margin-right: 1ex;
380 }
381
382 samp:before {
383     content:"\BB";
384 }
385
386 samp:after {
387     content:"\AB";
388 }
389
390 #content td {
391     padding: 0 1em 0 1em;
392 }
393
394 #content .small {
395     width:150px;
396 }
397
398 #subtopics ul {
399     font-size:20px;
400     font-weight:bold;
401 }
402
403 #content dfn {
404     font-weight: bold;
405     font-style: normal;
406 }
407
408 #content img.right {
409     margin: 0 0 1em 1em;
410     float:right;
411     clear:right;
412 }
413
414 #content img.left {
415     margin:0 1em 1em 0;
416     float:left;
417     clear:left;
418 }
419
420 #content .note,.warning,.fixme {
421     min-height: 20px;
422     padding: 19px;
423     margin-bottom: 20px;
424     border-style: solid;
425     border-width: 1px 1px 1px 8px; 
426     -webkit-border-radius: 4px;
427        -moz-border-radius: 4px;
428             border-radius: 4px;
429     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
430        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
431             box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
432
433 }
434
435 #content .note {
436     border-color: #e3e3e3;
437     background-color: #f5f5f5;
438 }
439
440 #content .warning {
441     border-color: #995555;
442     background-color: #ffeeee;
443 }
444
445 #content .fixme {
446     border-color: #999944;
447     background-color: #f0f0e0;
448     font-weight:bold;
449 }
450
451 .fixme:before {
452     content:'FIXME: ';
453     font-style: italic;
454     font-size:200%;
455 }
456
457
458
459
460 .mod1:before {
461     content: "Ctrl ";
462 }
463 .mod2:before {
464     content: "Alt ";
465 }
466 .mod3:before {
467     content: "Shift ";
468 }
469 .mod4:before {
470     content: "Win ";
471 }
472 .mod12:before {
473     content: "Ctrl Alt ";
474 }
475 .mod13:before {
476     content: "Ctrl Shift ";
477 }
478 .mod14:before {
479     content: "Ctrl Win ";
480 }
481 .mod23:before {
482     content: "Alt Shift ";
483 }
484 .kp:before {
485     content: "Keypad ";
486 }
487
488 .mac .mod1:before {
489     content: "Cmd ";
490 }
491 .mac .mod2:before {
492     content: "Ctrl ";
493 }
494 .mac .mod3:before {
495     content: "Shift ";
496 }
497 .mac .mod4:before {
498     content: "Opt ";
499 }
500 .mac .mod12:before {
501     content: "Cmd Ctrl ";
502 }
503 .mac .mod13:before {
504     content: "Cmd Shift ";
505 }
506 .mac .mod14:before {
507     content: "Cmd Opt ";
508 }
509 .mac .mod23:before {
510     content: "Ctrl Shift ";
511 }
512
513 #gs_tti0 {
514
515   padding-top: 2px;
516   padding-bottom: 0;
517
518 }
519
520
521
522
523