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