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