X-Git-Url: http://shamusworld.gotdns.org/cgi-bin/gitweb.cgi?a=blobdiff_plain;f=source%2Fcss%2Fapp.css;h=84cefd0dd3d707e7deec630eb38764c8eb6aeed9;hb=d26989c791fc8af686619457925bf7391944f316;hp=8fe18fe0f2978026ca933e0e5c9e78bdef1d30b6;hpb=e5387b177a785ae68840fc498a32875c253d38cb;p=ardour-manual diff --git a/source/css/app.css b/source/css/app.css index 8fe18fe..84cefd0 100644 --- a/source/css/app.css +++ b/source/css/app.css @@ -1,21 +1,28 @@ +body { + font-family: Junge; + font-size: 16px; + line-height: 2ex; +} + #tree { background-color: #212A30; + line-height: 1.8ex; height: 100%; overflow: scroll; position: fixed; top: 0; bottom: 0; left: 0; - width: 300px; + width: 20em; } #tree-inner { - padding: 15px 20px 30px 30px; + padding: 1em 1em 2em 1.5em; } #tree h1.title { - font-size: 28px; - margin-bottom: 20px; + font-size: 1.75em; + margin-bottom: 1em; font-weight: normal; } @@ -23,11 +30,6 @@ border-bottom: none; } -#tree a { - font-size: 14px; - line-height: 28px; -} - #tree dd.other { display: none; } @@ -48,475 +50,394 @@ display: none; } +#tree a { + display: inline !important; + font-size: 0.88em; + font-weight: normal; + line-height: 2em; + color: #E4E4E4; + border-bottom: 1px solid transparent; + padding-bottom: .1ex; +} -#search { - height: 70px; +#tree a:hover { + text-decoration: none; + border-bottom: 1px solid #aaa; +} + +#tree .active > a { + display: inline; + color: #da0808; + border-bottom: 1px solid #FFF; } #content { - padding: 10px 30px 30px 350px; - margin-left: 0; + padding: 1em 2em 2ex 21em; + margin-left: 0; } #content-main { - padding-top: 10px; - padding-left: 10px; + padding-top: 1ex; + padding-left: .5em; } + #content p, #content li, #content dt, #content dd { - font-size: 16px; - line-height: 28px; -} - - -#tree a { - display: inline !important; - font-weight: normal; - color: #E4E4E4; - border-bottom: 1px solid transparent; - padding-bottom: 2px; -} - -#tree a:hover { - text-decoration: none; - border-bottom: 1px solid #aaa; -} - -#tree .active > a { - display: inline; - color: #da0808; - border-bottom: 1px solid #FFF; - -} - -#content, -#tree { - font-family: Junge; + line-height: 2em; } #content h1, #content h2, #content h3, #content h4 { - font-weight: normal; + font-weight: normal; + padding-bottom: .3ex; } #content h1.title { - border-bottom: 2px solid #ccc; - padding-bottom: 10px; - margin-bottom: 40px; + font-size: 1.8em; + margin: 0 0 2ex 0; + padding-bottom: .8ex; + border-bottom: 2px solid #ccc; } #content h2 { - margin: 30px 0 20px 0; - padding-bottom: 5px; - font-size: 22px; + font-size: 1.3em; + margin: 2ex 0 1ex 0; border-bottom: 2px solid #ddd; } #content h3 { - margin: 20px 0 10px 0; - padding-bottom: 5px; - font-size: 20px; + font-size: 1.2em; + margin: 1.5ex 0 1ex 0; border-bottom: 1px solid #eee; } - #content h4 { - font-size: 18px; - margin: 20px 0 10px 0; - padding-bottom: 10px; + font-size: 1.1em; + margin: 1.5ex 0 .5ex 0; border-bottom: 1px solid #eee; } -#content code { - font-size: 14px; - color: #555; +#content table, +#content table.dl { + width:100%; + margin: 1em 0; + padding: 0; + font-weight: normal; + text-align: left; + line-height: 2ex; } -#content dl -{ - float:none; - clear:both; - width:100%; - margin: 1em 0; - padding: 0; +#content table tr { + border-bottom: 2px solid #eeeeee; } -#content dl:after { - content:' '; - display:block; - clear:both; +#content table tr:nth-child(odd){ + background-color: white; } -#content dt -{ - clear: left; - float: left; - width: 25%; - margin: 0; - padding: 5px; - font-weight: normal; +#content table tr:nth-child(even){ + background-color: #f5f5f5; } -#content dd -{ - float: left; - width: 65%; - margin: 0; - padding: 5px; - font-weight: normal; +#content table tr:hover { + background-color: #F2F9FF; } -#content dt.sub1 { - padding-left: 2em; +#content table td, +#content table th { + margin: 0; + padding: .5em; + font-weight: normal; } -#content dt.sub2 { - padding-left: 4em; +#content table th.sub1 { + padding-left: 2em; } - -#content figure { - display: table; +#content table th.sub2 { + padding-left: 4em; } -#content figcaption { - display: table-caption; - caption-side: bottom; - font-style: italic; +#content table thead { + font-weight:bold; } -#content figcaption.center { - display: table-caption; - text-align: center; - caption-side: bottom; - font-style: italic; +#content table.dl th { + /* dl class (definition list) is for 2-columns tables that describe properties: + maximmizes the width of the 2nd (description) column */ + min-width: 20%; + vertical-align: top; + white-space:nowrap } -#content figcaption.titleover { - caption-side: top ; +#content table.dl td { + width: 100%; } -#content figure.right { - margin: 0 0 1em 1em; - float: right; - clear: right; +#content dl +{ + float:none; + clear:both; + width:100%; + margin: 1em 0; + padding: 0; + display:inline-block; } -#content figure.left { - margin: 0 1em 1em 0; - float: left; - clear: left; +#content dl:after { + content:' '; + display:block; + clear:both; } -#content figure.center { - margin: 1em auto 1em auto; - clear: both; +#content dt, +#content dd { + border-top: 2px solid #eee; + float: left; + margin: 0; + padding: .5em; + font-weight: normal; } -.multicol2 { - width: 48%; - float:left; - padding:0 0 0 2%; - margin:0; +#content dt { + clear: left; + width: 25%; } -.multicol3 { - width: 31%; - float:left; - padding:0 0 0 2%; - margin:0; +#content dd { + width: 65%; } -.multicol4 { - width: 23%; - float:left; - padding:0 0 0 2%; - margin:0; +#content dt.sub1 { + padding-left: 2em; } -.multicol5 { - width: 18%; - float:left; - padding:0 0 0 2%; - margin:0; +#content dt.sub2 { + padding-left: 4em; } -/* Keyboard binding layout */ -#content dl.bindings -{ - float: left; - width: 100%; - margin: 1em 0; - padding: 0; +#content dt:first-child, +#content dd:nth-child(2) { + border-top: none; } -#content .bindings dt -{ - clear: left; - float: left; - width: 65%; - margin: 0; - padding: 0px; - font-size: 100%; - font-family: "Trebuchet MS", "Bitstream Vera Sans", Verdana, Arial, Helvetica, sans-serif; - font-weight: normal; -} -#content .bindings dd -{ - float: left; - width: 30%; - margin: 0; - padding: 0px; - font-size: 110%; - font-family: "Bitstream Vera Sans Mono", "Courier New", monospace; - font-weight: normal; +#content figure { + display: table; } - -#content dl.wide-table -{ - float: left; - width: 100%; - margin: 1em 0; - padding: 0; +#content figcaption { + display: table-caption; + caption-side: bottom; + font-style: italic; } -#content .wide-table dt -{ - font-weight: normal; - clear: left; - float: left; - width: 30%; - margin: 0; - padding: 5px; +#content figcaption.center { + text-align: center; + caption-side: bottom; } -#content dt, -#content dd { - border-top: 2px solid #eee; +#content figcaption.titleover { + text-align: center; + caption-side: top ; } -#content dt:first-child, -#content dd:nth-child(2) { - border-top: none; +#content figure.right { + margin: 0 0 1em 1em; + float: right; + clear: right; } -#content .wide-table dd -{ - float: left; - width: 60%; - margin: 0; - padding: 5px; +#content figure.left { + margin: 0 1em 1em 0; + float: left; + clear: left; } -#content dl.narrower-table -{ - float: left; - width: 100%; - margin: 1em 0; - padding: 0; +#content figure.center { + margin: 1em auto 1em auto; + clear: both; } -#content .narrower-table dt -{ - clear: left; - float: left; - width: 20%; - margin: 0; - padding: 5px; +.multicol2 { + width: 48%; + float:left; + padding:0 0 0 2%; + margin:0; } -#content .narrower-table dd -{ - float: left; - width: 70%; - margin: 0; - padding: 5px; +.multicol3 { + width: 31%; + float:left; + padding:0 0 0 2%; + margin:0; } kbd { - display: inline; display: inline-block; min-width: 1em; padding: .2em .3em; font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif; text-align: center; text-decoration: none; - -moz-border-radius: .3em; - -webkit-border-radius: .3em; border-radius: .3em; - border: none; cursor: default; - -moz-user-select: none; - -webkit-user-select: none; - user-select: none; background: rgb(250, 250, 250); background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)); background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255))); color: rgb(50, 50, 50); text-shadow: 0 0 2px rgb(255, 255, 255); - -moz-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); - -webkit-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); 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); - + white-space:nowrap; + text-transform:capitalize; } -kbd.input,kbd.cmd,kbd.osc { - font-family:mono; - border-width:0; - text-transform:none; +kbd.input, +kbd.cmd, +kbd.osc { + font-family:mono; + border-width:0; + text-transform:none; +} +kbd.input { + background:none; + border-radius: 0; } kbd.cmd { - display:block; - width:100%; - margin-bottom:1ex; - text-transform:none; - background: rgb(220, 220, 220); - text-shadow: none; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; - text-align:left; - - + display:block; + width:100%; + margin-bottom:1ex; + text-transform:none; + background: rgb(220, 220, 220); + text-shadow: none; + box-shadow: none; + text-align:left; } kbd.cmd.lin:before { - content: 'user@linux:~ '; - color:#999999; + content: 'user@linux:~ '; + color:#999999; } kbd.cmd.mac:before { - content: 'MacBook:~/Desktop User\$ '; - color:#999999; + content: 'MacBook:~/Desktop User\$ '; + color:#999999; } kbd.cmd.win:before { - content: 'C:\\Users\\myAccount> '; - color:#999999; + content: 'C:\\Users\\myAccount> '; + color:#999999; } -kbd.optoff, kbd.option { - border:none; - background:none; - /*-moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none;*/ - +kbd.optoff, +kbd.option { + border:none; + background:none; } kbd.optoff:before { - content:url('/images/checkbox-unchecked.png'); - margin: 0 5px 0 0; - vertical-align:middle; + content:url('/images/checkbox-unchecked.png'); + margin: 0 1em 0 0; + vertical-align:middle; } kbd.option:before { - content:url('/images/checkbox-checked.png'); - margin: 0 5px 0 0; - vertical-align:middle; + content:url('/images/checkbox-checked.png'); + margin: 0 1em 0 0; + vertical-align:middle; } kbd.menu { - border:none; - background:none; - font-weight:bold; - font-stretch:extra-condensed; - white-space:normal; + border:none; + background:none; + font-weight:bold; + font-stretch:extra-condensed; + white-space:normal; } - kbd.osc { + border:none; + background: rgb(208, 208, 243); + font-stretch:extra-condensed; + white-space: nowrap; + text-align:left; } - - -kbd.fader, kbd.knob, kbd.button { - border-color:#ccccff #aaaadd #8888bb #bbbbee; - background-color:#ddddff; - color:#000044; +kbd.fader, +kbd.knob, +kbd.button { + background: rgb(174, 174, 217); + background: -moz-linear-gradient(top, rgb(174, 174, 217), rgb(221, 221, 255)); + background: -webkit-gradient(linear, left top, left bottom, from(rgb(174, 174, 217)), to(rgb(221, 221, 255))); + color:#000044; } kbd.fader { - border-width: 1px 1px 9px 9px; + border-width: 1px 1px 9px 9px; } kbd.knob { - -moz-border-radius:12px; - border-radius:12px; - border-width: 1px 1px 9px 9px; + border-radius:12px; + border-width: 1px 1px 9px 9px; } kbd.button { - -moz-border-radius:8px; - border-radius:8px; - border-width: 1px 1px 3px 3px; + border-radius:8px; + border-width: 1px 1px 3px 3px; } kbd.mouse { - -moz-border-radius:10px; - border-radius:10px; + border-radius:10px; } - samp { - font-family:mono; - font-style:italic; - color:#333333; - background-color:transparent; - margin-left: 1ex; - margin-right: 1ex; + font-family:mono; + font-style:italic; + color:#333333; + background-color:transparent; + margin-left: 1em; + margin-right: 1em; } samp:before { - content:"\BB"; + content:"\BB"; } samp:after { - content:"\AB"; -} - -#content td { - padding: 0 1em 0 1em; -} - -#content .small { - width:150px; + content:"\AB"; } #subtopics ul { - font-size:20px; - font-weight:bold; + font-weight:bold; } #content dfn { - font-weight: bold; - font-style: normal; + font-weight: bold; + font-style: normal; } #content img.right { - margin: 0 0 1em 1em; - float:right; - clear:right; + margin: 0 0 1em 1em; + float:right; + clear:right; } #content img.left { - margin:0 1em 1em 0; - float:left; - clear:left; + margin:0 1em 1em 0; + float:left; + clear:left; } #content img.center { - display: block; - margin:1em auto 1em auto; + display: block; + margin:1em auto 1em auto; clear: both; } @@ -524,162 +445,104 @@ samp:after { text-align:center; } -#content .note,.warning,.fixme { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; - border-style: solid; - border-width: 1px 1px 1px 8px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +#content .note, +#content .warning, +#content .fixme { + min-height: 1.5ex; + padding: 1em; + margin-bottom: 1em; + border-style: solid; + border-width: 1px 1px 1px 8px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} +#content code { + font-size: .9em; + color: #555; } #content .note { - border-color: #e3e3e3; - background-color: #f5f5f5; + border-color: #e3e3e3; + background-color: #f5f5f5; } #content .warning { - border-color: #995555; - background-color: #ffeeee; + border-color: #995555; + background-color: #ffeeee; } #content .fixme { - border-color: #999944; - background-color: #f0f0e0; - font-weight:bold; + border-color: #999944; + background-color: #f0f0e0; + font-weight:bold; } .fixme:before { - content:'FIXME: '; - font-style: italic; - font-size:200%; + content:'FIXME: '; + font-style: italic; + font-size:2em; } - /* Keyboard modifiers */ - -.mod1:before { - content: "Ctrl "; -} -.mod2:before { - content: "Alt "; -} -.mod3:before { - content: "Shift "; -} -.mod4:before { - content: "Win "; -} -.mod12:before { - content: "Ctrl Alt "; -} -.mod13:before { - content: "Ctrl Shift "; -} -.mod14:before { - content: "Ctrl Win "; -} -.mod23:before { - content: "Alt Shift "; -} -.kp:before { - content: "Keypad "; -} - +.mod1:before { content: "Ctrl ";} +.mod2:before { content: "Alt ";} +.mod3:before { content: "Shift ";} +.mod4:before { content: "Win ";} +.mod12:before { content: "Ctrl Alt ";} +.mod13:before { content: "Ctrl Shift ";} +.mod14:before { content: "Ctrl Win ";} +.mod23:before { content: "Alt Shift ";} +.kp:before { content: "Keypad ";} /* Variants *without* space after them (yes, these are needed!) */ - -.mod1n:before { - content: "Ctrl"; -} -.mod2n:before { - content: "Alt"; -} -.mod3n:before { - content: "Shift"; -} -.mod4n:before { - content: "Win"; -} -.mod12n:before { - content: "Ctrl Alt"; -} -.mod13n:before { - content: "Ctrl Shift"; -} -.mod14n:before { - content: "Ctrl Win"; -} -.mod23n:before { - content: "Alt Shift"; -} - - +.mod1n:before { content: "Ctrl";} +.mod2n:before { content: "Alt";} +.mod3n:before { content: "Shift";} +.mod4n:before { content: "Win";} +.mod12n:before { content: "Ctrl Alt";} +.mod13n:before { content: "Ctrl Shift";} +.mod14n:before { content: "Ctrl Win";} +.mod23n:before { content: "Alt Shift";} /* Automagic translation for Mac based display */ - -.mac .mod1:before { - content: "Cmd "; -} -.mac .mod2:before { - content: "Ctrl "; -} -.mac .mod3:before { - content: "Shift "; -} -.mac .mod4:before { - content: "Opt "; -} -.mac .mod12:before { - content: "Cmd Ctrl "; -} -.mac .mod13:before { - content: "Cmd Shift "; -} -.mac .mod14:before { - content: "Cmd Opt "; -} -.mac .mod23:before { - content: "Ctrl Shift "; -} - +.mac .mod1:before { content: "Cmd ";} +.mac .mod2:before { content: "Ctrl ";} +.mac .mod3:before { content: "Shift ";} +.mac .mod4:before { content: "Opt ";} +.mac .mod12:before { content: "Cmd Ctrl ";} +.mac .mod13:before { content: "Cmd Shift ";} +.mac .mod14:before { content: "Cmd Opt ";} +.mac .mod23:before { content: "Ctrl Shift ";} /* No space variants (Mac based) */ - -.mac .mod1n:before { - content: "Cmd"; -} -.mac .mod2n:before { - content: "Ctrl"; -} -.mac .mod3n:before { - content: "Shift"; -} -.mac .mod4n:before { - content: "Opt"; -} -.mac .mod12n:before { - content: "Cmd Ctrl"; -} -.mac .mod13n:before { - content: "Cmd Shift"; -} -.mac .mod14n:before { - content: "Cmd Opt"; -} -.mac .mod23n:before { - content: "Ctrl Shift"; -} - - -#gs_tti0 { - - padding-top: 2px; - padding-bottom: 0; - +.mac .mod1n:before { content: "Cmd";} +.mac .mod2n:before { content: "Ctrl";} +.mac .mod3n:before { content: "Shift";} +.mac .mod4n:before { content: "Opt";} +.mac .mod12n:before { content: "Cmd Ctrl";} +.mac .mod13n:before { content: "Cmd Shift";} +.mac .mod14n:before { content: "Cmd Opt";} +.mac .mod23n:before { content: "Ctrl Shift";} + +/* google search : reset style for the search field */ +#search table, +#search input, +#search tr, +#search td, +#search th, +#search thead, +#search tbody{ + margin: inherit; + padding: inherit; + color: inherit; + border: inherit; + background: inherit; + line-height: inherit; + font-size: inherit; + font-weight: inherit; + box-shadow: inherit; } @media (max-width: 800px) { @@ -695,17 +558,13 @@ samp:after { } } +/* for the TOC */ #chapter { padding-top: 1em; padding-left: 1em; } #subchapter { padding-left: 4em; } #section { padding-left: 6em; } #subsection { padding-left: 8em; } -#content table.alternate{ border-collapse:collapse; } -.alternate td{ padding:7px; border:#4e95f4 1px solid; } -.alternate tr{ background: #b8d1f3; } -.alternate tr:nth-child(odd){ background: #b8d1f3; } -.alternate tr:nth-child(even){ background: #dae5f4; } - +/* for images sliced in divs, as in http://manual.ardour.org/ardours-interface/about/ */ .container { position:relative; border: none;} .hoverimg { position: absolute; border: none; } -.hoverimg:hover{ z-index:100; box-shadow: 0 0 5px 5px lightgreen; } +.hoverimg:hover{ z-index:100; box-shadow: 0 0 .2em .2em lightgreen; }