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