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 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; }