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