Shamusworld >> Repos - ardour-manual/blob - source/css/app.css

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