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.def {
 323   font-weight:bolder;
 324         margin-right:.2em;
 325 }
 326
 327 kbd.input,
 328 kbd.cmd,
 329 kbd.osc {
 330   font-family:mono;
 331   border-width:0;
 332   text-transform:none;
 333 }
 334
 335 kbd.input {
 336   background:none;
 337   border-radius: 0;
 338 }
 339
 340 kbd.cmd {
 341   display:block;
 342   width:100%;
 343   margin-bottom:1ex;
 344   text-transform:none;
 345   background: rgb(220, 220, 220);
 346   text-shadow: none;
 347   box-shadow: none;
 348   text-align:left;
 349 }
 350
 351 kbd.cmd.lin:before {
 352   content: 'user@linux:~ ';
 353   color:#999999;
 354 }
 355
 356 kbd.cmd.mac:before {
 357   content: 'MacBook:~/Desktop User\$ ';
 358   color:#999999;
 359 }
 360
 361 kbd.cmd.win:before {
 362   content: 'C:\\Users\\myAccount> ';
 363   color:#999999;
 364 }
 365
 366 kbd.optoff,
 367 kbd.option {
 368   border:none;
 369   background:none;
 370 }
 371
 372 kbd.optoff:before {
 373   content:url('/images/checkbox-unchecked.png');
 374   margin: 0 1em 0 0;
 375   vertical-align:middle;
 376 }
 377
 378 kbd.option:before {
 379   content:url('/images/checkbox-checked.png');
 380   margin: 0 1em 0 0;
 381   vertical-align:middle;
 382 }
 383
 384 kbd.menu {
 385   border:none;
 386   background:none;
 387   font-weight:bold;
 388   font-stretch:extra-condensed;
 389   white-space:normal;
 390 }
 391
 392 kbd.osc {
 393   border:none;
 394   background: rgb(208, 208, 243);
 395   font-stretch:extra-condensed;
 396   white-space: nowrap;
 397   text-align:left;
 398 }
 399
 400 kbd.fader,
 401 kbd.knob,
 402 kbd.button {
 403   background: rgb(174, 174, 217);
 404   background: -moz-linear-gradient(top, rgb(174, 174, 217), rgb(221, 221, 255));
 405   background: -webkit-gradient(linear, left top, left bottom, from(rgb(174, 174, 217)), to(rgb(221, 221, 255)));
 406   color:#000044;
 407 }
 408
 409 kbd.fader {
 410   border-width: 1px 1px 9px 9px;
 411 }
 412
 413 kbd.knob {
 414   border-radius:12px;
 415   border-width: 1px 1px 9px 9px;
 416 }
 417
 418 kbd.button {
 419   border-radius:8px;
 420   border-width: 1px 1px 3px 3px;
 421 }
 422
 423 kbd.mouse {
 424   border-radius:10px;
 425 }
 426
 427 samp {
 428   font-family:mono;
 429   font-style:italic;
 430   color:#333333;
 431   background-color:transparent;
 432   margin-left: 1em;
 433   margin-right: 1em;
 434 }
 435
 436 samp:before {
 437   content:"\BB";
 438 }
 439
 440 samp:after {
 441   content:"\AB";
 442 }
 443
 444 #subtopics ul {
 445   font-weight:bold;
 446 }
 447
 448 #content dfn {
 449   font-weight: bold;
 450   font-style: normal;
 451 }
 452
 453 #content img.right {
 454   margin: 0 0 1em 1em;
 455   float:right;
 456   clear:right;
 457 }
 458
 459 #content img.left {
 460   margin:0 1em 1em 0;
 461   float:left;
 462   clear:left;
 463 }
 464
 465 #content img.center {
 466   display: block;
 467   margin:1em auto 1em auto;
 468         clear: both;
 469 }
 470
 471 #content p.center {
 472         text-align:center;
 473 }
 474
 475 #content .note,
 476 #content .warning,
 477 #content .fixme {
 478   min-height: 1.5ex;
 479   padding: 1em;
 480   margin-bottom: 1em;
 481   border-style: solid;
 482   border-width: 1px 1px 1px 8px;
 483   -webkit-border-radius: 4px;
 484      -moz-border-radius: 4px;
 485           border-radius: 4px;
 486   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 487      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 488           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 489 }
 490
 491 #content code {
 492   font-size: .9em;
 493   color: #555;
 494 }
 495
 496 #content .note {
 497   border-color: #e3e3e3;
 498   background-color: #f5f5f5;
 499 }
 500
 501 #content .warning {
 502   border-color: #995555;
 503   background-color: #ffeeee;
 504 }
 505
 506 #content .fixme {
 507   border-color: #999944;
 508   background-color: #f0f0e0;
 509   font-weight:bold;
 510 }
 511
 512 .fixme:before {
 513   content:'FIXME: ';
 514   font-style: italic;
 515   font-size:2em;
 516 }
 517
 518 /* Keyboard modifiers */
 519 .mod1:before {        content: "Ctrl ";}
 520 .mod2:before {        content: "Alt ";}
 521 .mod3:before {        content: "Shift ";}
 522 .mod4:before {        content: "Win ";}
 523 .mod12:before {       content: "Ctrl Alt ";}
 524 .mod13:before {       content: "Ctrl Shift ";}
 525 .mod14:before {       content: "Ctrl Win ";}
 526 .mod23:before {       content: "Alt Shift ";}
 527 .kp:before {          content: "Keypad ";}
 528 /* Variants *without* space after them (yes, these are needed!) */
 529 .mod1n:before {       content: "Ctrl";}
 530 .mod2n:before {       content: "Alt";}
 531 .mod3n:before {       content: "Shift";}
 532 .mod4n:before {       content: "Win";}
 533 .mod12n:before {      content: "Ctrl Alt";}
 534 .mod13n:before {      content: "Ctrl Shift";}
 535 .mod14n:before {      content: "Ctrl Win";}
 536 .mod23n:before {      content: "Alt Shift";}
 537 /* Automagic translation for Mac based display */
 538 .mac .mod1:before {   content: "Cmd ";}
 539 .mac .mod2:before {   content: "Ctrl ";}
 540 .mac .mod3:before {   content: "Shift ";}
 541 .mac .mod4:before {   content: "Opt ";}
 542 .mac .mod12:before {  content: "Cmd Ctrl ";}
 543 .mac .mod13:before {  content: "Cmd Shift ";}
 544 .mac .mod14:before {  content: "Cmd Opt ";}
 545 .mac .mod23:before {  content: "Ctrl Shift ";}
 546 /* No space variants (Mac based) */
 547 .mac .mod1n:before {  content: "Cmd";}
 548 .mac .mod2n:before {  content: "Ctrl";}
 549 .mac .mod3n:before {  content: "Shift";}
 550 .mac .mod4n:before {  content: "Opt";}
 551 .mac .mod12n:before { content: "Cmd Ctrl";}
 552 .mac .mod13n:before { content: "Cmd Shift";}
 553 .mac .mod14n:before { content: "Cmd Opt";}
 554 .mac .mod23n:before { content: "Ctrl Shift";}
 555
 556 @media (max-width: 800px) {
 557   #tree {
 558     position: relative;
 559     height: 250px;
 560     width: 100%;
 561     margin-top: 20px;
 562   }
 563   #content {
 564     padding-left: 20px;
 565     margin-top: 0px;
 566   }
 567 }
 568
 569 /* for the TOC */
 570 #chapter,
 571 #subchapter,
 572 #section,
 573 #subsection {
 574   line-height:1.5em;
 575 }
 576 #chapter { padding-top: 1em; padding-left: 1em; }
 577 #subchapter { padding-left: 4em; }
 578 #section { padding-left: 6em; }
 579 #subsection { padding-left: 8em; }
 580
 581 /* for images sliced in divs, as in http://manual.ardour.org/ardours-interface/about/ */
 582 .container { position: relative; border: none; }
 583 .hoverimg { position: absolute; border: none; }
 584 .hoverimg:hover{ z-index:100; box-shadow: 0 0 .2em .2em lightgreen; }