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