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