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