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 #content table {
  90   line-height: 2em;
  91 }
  92
  93 #content h1,
  94 #content h2,
  95 #content h3,
  96 #content h4 {
  97   font-weight: normal;
  98   padding-bottom: .3ex;
  99 }
 100
 101 #content h1.title {
 102   font-size: 1.8em;
 103   margin: 0 0 2ex 0;
 104   padding-bottom: .8ex;
 105   border-bottom: 2px solid #ccc;
 106 }
 107
 108 #content h2 {
 109   font-size: 1.3em;
 110   margin: 2ex 0 1ex 0;
 111   border-bottom: 2px solid #ddd;
 112 }
 113
 114 #content h3 {
 115   font-size: 1.2em;
 116   margin: 1.5ex 0 1ex 0;
 117   border-bottom: 1px solid #eee;
 118 }
 119
 120 #content h4 {
 121   font-size: 1.1em;
 122   margin: 1.5ex 0 .5ex 0;
 123   border-bottom: 1px solid #eee;
 124 }
 125
 126 #content table,
 127 #content table.dl {
 128   width:100%;
 129   margin: 1em 0;
 130   padding: 0;
 131   font-weight: normal;
 132   text-align: left;
 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   -moz-user-select: none;
 291   -webkit-user-select: none;
 292   user-select: none;
 293   background: rgb(250, 250, 250);
 294   background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
 295   background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
 296   color:  rgb(50, 50, 50);
 297   text-shadow: 0 0 2px rgb(255, 255, 255);
 298   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);
 299   white-space:nowrap;
 300   text-transform:capitalize;
 301 }
 302
 303 kbd.input,
 304 kbd.cmd,
 305 kbd.osc {
 306   font-family:mono;
 307   border-width:0;
 308   text-transform:none;
 309 }
 310
 311 kbd.input {
 312   background:none;
 313   border-radius: 0;
 314 }
 315
 316 kbd.cmd {
 317   display:block;
 318   width:100%;
 319   margin-bottom:1ex;
 320   text-transform:none;
 321   background: rgb(220, 220, 220);
 322   text-shadow: none;
 323   box-shadow: none;
 324   text-align:left;
 325 }
 326
 327 kbd.cmd.lin:before {
 328   content: 'user@linux:~ ';
 329   color:#999999;
 330 }
 331
 332 kbd.cmd.mac:before {
 333   content: 'MacBook:~/Desktop User\$ ';
 334   color:#999999;
 335 }
 336
 337 kbd.cmd.win:before {
 338   content: 'C:\\Users\\myAccount> ';
 339   color:#999999;
 340 }
 341
 342 kbd.optoff,
 343 kbd.option {
 344   border:none;
 345   background:none;
 346 }
 347
 348 kbd.optoff:before {
 349   content:url('/images/checkbox-unchecked.png');
 350   margin: 0 1em 0 0;
 351   vertical-align:middle;
 352 }
 353
 354 kbd.option:before {
 355   content:url('/images/checkbox-checked.png');
 356   margin: 0 1em 0 0;
 357   vertical-align:middle;
 358 }
 359
 360 kbd.menu {
 361   border:none;
 362   background:none;
 363   font-weight:bold;
 364   font-stretch:extra-condensed;
 365   white-space:normal;
 366 }
 367
 368 kbd.osc {
 369   border:none;
 370   background: rgb(208, 208, 243);
 371   font-stretch:extra-condensed;
 372   white-space: nowrap;
 373   text-align:left;
 374 }
 375
 376 kbd.fader,
 377 kbd.knob,
 378 kbd.button {
 379   background: rgb(174, 174, 217);
 380   background: -moz-linear-gradient(top, rgb(174, 174, 217), rgb(221, 221, 255));
 381   background: -webkit-gradient(linear, left top, left bottom, from(rgb(174, 174, 217)), to(rgb(221, 221, 255)));
 382   color:#000044;
 383 }
 384
 385 kbd.fader {
 386   border-width: 1px 1px 9px 9px;
 387 }
 388
 389 kbd.knob {
 390   border-radius:12px;
 391   border-width: 1px 1px 9px 9px;
 392 }
 393
 394 kbd.button {
 395   border-radius:8px;
 396   border-width: 1px 1px 3px 3px;
 397 }
 398
 399 kbd.mouse {
 400   border-radius:10px;
 401 }
 402
 403 samp {
 404   font-family:mono;
 405   font-style:italic;
 406   color:#333333;
 407   background-color:transparent;
 408   margin-left: 1em;
 409   margin-right: 1em;
 410 }
 411
 412 samp:before {
 413   content:"\BB";
 414 }
 415
 416 samp:after {
 417   content:"\AB";
 418 }
 419
 420 #subtopics ul {
 421   font-weight:bold;
 422 }
 423
 424 #content dfn {
 425   font-weight: bold;
 426   font-style: normal;
 427 }
 428
 429 #content img.right {
 430   margin: 0 0 1em 1em;
 431   float:right;
 432   clear:right;
 433 }
 434
 435 #content img.left {
 436   margin:0 1em 1em 0;
 437   float:left;
 438   clear:left;
 439 }
 440
 441 #content img.center {
 442   display: block;
 443   margin:1em auto 1em auto;
 444         clear: both;
 445 }
 446
 447 #content p.center {
 448         text-align:center;
 449 }
 450
 451 #content .note,
 452 #content .warning,
 453 #content .fixme {
 454   min-height: 1.5ex;
 455   padding: 1em;
 456   margin-bottom: 1em;
 457   border-style: solid;
 458   border-width: 1px 1px 1px 8px;
 459   -webkit-border-radius: 4px;
 460      -moz-border-radius: 4px;
 461           border-radius: 4px;
 462   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 463      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 464           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 465 }
 466
 467 #content code {
 468   font-size: .9em;
 469   color: #555;
 470 }
 471
 472 #content .note {
 473   border-color: #e3e3e3;
 474   background-color: #f5f5f5;
 475 }
 476
 477 #content .warning {
 478   border-color: #995555;
 479   background-color: #ffeeee;
 480 }
 481
 482 #content .fixme {
 483   border-color: #999944;
 484   background-color: #f0f0e0;
 485   font-weight:bold;
 486 }
 487
 488 .fixme:before {
 489   content:'FIXME: ';
 490   font-style: italic;
 491   font-size:2em;
 492 }
 493
 494 /* Keyboard modifiers */
 495 .mod1:before {        content: "Ctrl ";}
 496 .mod2:before {        content: "Alt ";}
 497 .mod3:before {        content: "Shift ";}
 498 .mod4:before {        content: "Win ";}
 499 .mod12:before {       content: "Ctrl Alt ";}
 500 .mod13:before {       content: "Ctrl Shift ";}
 501 .mod14:before {       content: "Ctrl Win ";}
 502 .mod23:before {       content: "Alt Shift ";}
 503 .kp:before {          content: "Keypad ";}
 504 /* Variants *without* space after them (yes, these are needed!) */
 505 .mod1n:before {       content: "Ctrl";}
 506 .mod2n:before {       content: "Alt";}
 507 .mod3n:before {       content: "Shift";}
 508 .mod4n:before {       content: "Win";}
 509 .mod12n:before {      content: "Ctrl Alt";}
 510 .mod13n:before {      content: "Ctrl Shift";}
 511 .mod14n:before {      content: "Ctrl Win";}
 512 .mod23n:before {      content: "Alt Shift";}
 513 /* Automagic translation for Mac based display */
 514 .mac .mod1:before {   content: "Cmd ";}
 515 .mac .mod2:before {   content: "Ctrl ";}
 516 .mac .mod3:before {   content: "Shift ";}
 517 .mac .mod4:before {   content: "Opt ";}
 518 .mac .mod12:before {  content: "Cmd Ctrl ";}
 519 .mac .mod13:before {  content: "Cmd Shift ";}
 520 .mac .mod14:before {  content: "Cmd Opt ";}
 521 .mac .mod23:before {  content: "Ctrl Shift ";}
 522 /* No space variants (Mac based) */
 523 .mac .mod1n:before {  content: "Cmd";}
 524 .mac .mod2n:before {  content: "Ctrl";}
 525 .mac .mod3n:before {  content: "Shift";}
 526 .mac .mod4n:before {  content: "Opt";}
 527 .mac .mod12n:before { content: "Cmd Ctrl";}
 528 .mac .mod13n:before { content: "Cmd Shift";}
 529 .mac .mod14n:before { content: "Cmd Opt";}
 530 .mac .mod23n:before { content: "Ctrl Shift";}
 531
 532 /* google search : reset style for the search field */
 533 #search table,
 534 #search input,
 535 #search tr,
 536 #search td,
 537 #search th,
 538 #search thead,
 539 #search tbody{
 540   margin: inherit;
 541   padding: inherit;
 542   color: inherit;
 543   border: inherit;
 544   background: inherit;
 545   line-height: inherit;
 546   font-size: inherit;
 547   font-weight: inherit;
 548   box-shadow: inherit;
 549 }
 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 { padding-top: 1em; padding-left: 1em; }
 566 #subchapter { padding-left: 4em; }
 567 #section { padding-left: 6em; }
 568 #subsection { padding-left: 8em; }
 569
 570 /* for images sliced in divs, as in http://manual.ardour.org/ardours-interface/about/ */
 571 .container { position:relative; border: none;}
 572 .hoverimg { position: absolute; border: none;  }
 573 .hoverimg:hover{ z-index:100; box-shadow: 0 0 .2em .2em lightgreen; }