X-Git-Url: http://shamusworld.gotdns.org/cgi-bin/gitweb.cgi?a=blobdiff_plain;f=source%2Fcss%2Fapp.css;h=a1f961913645be0c955570a9f645c8eb88395343;hb=49e5d68129377abe690f4d07e7b8cc5b12c2831c;hp=6e7eb3409238c47cd5d4727bc8c14e5f84301adb;hpb=ed6dd533f0317fdde938e86a30bc301cef8775ac;p=ardour-manual diff --git a/source/css/app.css b/source/css/app.css index 6e7eb34..a1f9619 100644 --- a/source/css/app.css +++ b/source/css/app.css @@ -1,5 +1,5 @@ #tree { - background-color: #eee; + background-color: #212A30; height: 100%; overflow: scroll; position: fixed; @@ -10,7 +10,7 @@ } #tree-inner { - padding: 15px 20px 30px 30px; + padding: 15px 20px 30px 30px; } #tree h1.title { @@ -24,7 +24,7 @@ } #tree a { - font-size: 14px; + font-size: 14px; line-height: 28px; } @@ -37,7 +37,7 @@ #tree .child, #tree .parent *, #tree .child * { - display: inherit; + display: inherit; color: inherit; } @@ -45,7 +45,7 @@ #tree .child-2, #tree .child-3, #tree .child-4 { - display: none; + display: none; } @@ -68,14 +68,14 @@ #content dt, #content dd { font-size: 16px; - line-height: 28px; + line-height: 28px; } #tree a { display: inline !important; - font-weight: normal; - color: #666; + font-weight: normal; + color: #E4E4E4; border-bottom: 1px solid transparent; padding-bottom: 2px; } @@ -87,8 +87,8 @@ #tree .active > a { display: inline; - color: #000; - border-bottom: 1px solid #555; + color: #da0808; + border-bottom: 1px solid #FFF; } @@ -118,7 +118,7 @@ } #content h3 { - margin: 20px 0 10px 0; + margin: 20px 0 10px 0; padding-bottom: 5px; font-size: 20px; border-bottom: 1px solid #eee; @@ -127,7 +127,7 @@ #content h4 { font-size: 18px; - margin: 20px 0 10px 0; + margin: 20px 0 10px 0; padding-bottom: 10px; border-bottom: 1px solid #eee; } @@ -151,7 +151,7 @@ display:block; clear:both; } - + #content dt { clear: left; @@ -161,7 +161,7 @@ padding: 5px; font-weight: normal; } - + #content dd { float: left; @@ -171,6 +171,81 @@ font-weight: normal; } +#content dt.sub1 { + padding-left: 2em; +} + +#content dt.sub2 { + padding-left: 4em; +} + + +#content figure { + display: table; +} + +#content figcaption { + display: table-caption; + caption-side: bottom; + font-style: italic; +} + +#content figcaption.center { + display: table-caption; + text-align: center; + caption-side: bottom; + font-style: italic; +} + +#content figcaption.titleover { + caption-side: top ; +} + +#content figure.right { + margin: 0 0 1em 1em; + float: right; + clear: right; +} + +#content figure.left { + margin: 0 1em 1em 0; + float: left; + clear: left; +} + +#content figure.center { + margin: 1em auto 1em auto; + clear: both; +} + +.multicol2 { + width: 48%; + float:left; + padding:0 0 0 2%; + margin:0; +} + +.multicol3 { + width: 31%; + float:left; + padding:0 0 0 2%; + margin:0; +} + +.multicol4 { + width: 23%; + float:left; + padding:0 0 0 2%; + margin:0; +} + +.multicol5 { + width: 18%; + float:left; + padding:0 0 0 2%; + margin:0; +} + /* Keyboard binding layout */ #content dl.bindings { @@ -179,23 +254,23 @@ margin: 1em 0; padding: 0; } - + #content .bindings dt { clear: left; float: left; - width: 30%; + 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: 65%; + width: 30%; margin: 0; padding: 0px; font-size: 110%; @@ -211,10 +286,10 @@ margin: 1em 0; padding: 0; } - + #content .wide-table dt { - font-weight: normal; + font-weight: normal; clear: left; float: left; width: 30%; @@ -231,7 +306,7 @@ #content dd:nth-child(2) { border-top: none; } - + #content .wide-table dd { float: left; @@ -247,7 +322,7 @@ margin: 1em 0; padding: 0; } - + #content .narrower-table dt { clear: left; @@ -256,7 +331,7 @@ margin: 0; padding: 5px; } - + #content .narrower-table dd { float: left; @@ -266,24 +341,35 @@ } kbd { - -moz-background-clip:border; - -moz-background-inline-policy:continuous; - -moz-background-origin:padding; - background:#EEEEEE none repeat scroll 0 0; - border-color:#CCCCCC #AAAAAA #888888 #BBBBBB; - border-style:solid; - border-width:2px 2px 4px 4px; - color:#000000; - padding:1px 2px; - white-space:nowrap; - text-transform:capitalize; -} - -kbd.input,kbd.cmd { + 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; + border-radius: .3em; + 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); + 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); + +} + +kbd.input,kbd.cmd,kbd.osc { font-family:mono; border-width:0; text-transform:none; +} +kbd.input { + background:none; + border-radius: 0; } kbd.cmd { @@ -291,6 +377,10 @@ kbd.cmd { 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 { @@ -308,44 +398,39 @@ kbd.cmd.win:before { color:#999999; } -kbd.mouse { - -moz-border-radius:10px; - border-radius:10px; +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; } -/* -.mouse:after { - position:relative; - top:-1em; - left:-1em; - content:url('/images/mouse-tail.png'); +kbd.option:before { + content:url('/images/checkbox-checked.png'); + margin: 0 5px 0 0; + vertical-align:middle; } -*/ -kbd.menu,kbd.option,kbd.optoff { +kbd.menu { border:none; - background-color:transparent; + background:none; font-weight:bold; font-stretch:extra-condensed; white-space:normal; } -kbd.option:after,kbd.optoff:after { - font-family:mono; - font-weight:lighter; - text-align:center; - border:solid 1px black; - margin-left:0.3em; -} -kbd.option:after { - content:'X'; - -} -kbd.optoff:after { - content:' '; +kbd.osc { + border:none; + background:none; + font-stretch:extra-condensed; + white-space:normal; + text-align:left; } - kbd.fader, kbd.knob, kbd.button { border-color:#ccccff #aaaadd #8888bb #bbbbee; background-color:#ddddff; @@ -357,17 +442,20 @@ kbd.fader { } kbd.knob { - -moz-border-radius:12px; - border-radius:12px; + border-radius:12px; border-width: 1px 1px 9px 9px; } kbd.button { - -moz-border-radius:8px; border-radius:8px; border-width: 1px 1px 3px 3px; } +kbd.mouse { + border-radius:10px; +} + + samp { font-family:mono; font-style:italic; @@ -403,14 +491,26 @@ samp:after { font-style: normal; } -#content .right { +#content img.right { margin: 0 0 1em 1em; float:right; + clear:right; } -#content .left { +#content img.left { margin:0 1em 1em 0; float:left; + clear:left; +} + +#content img.center { + display: block; + margin:1em auto 1em auto; + clear: both; +} + +#content p.center { + text-align:center; } #content .note,.warning,.fixme { @@ -418,7 +518,7 @@ samp:after { padding: 19px; margin-bottom: 20px; border-style: solid; - border-width: 1px 1px 1px 8px; + border-width: 1px 1px 1px 8px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -451,64 +551,117 @@ samp:after { } - +/* 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 "; +} + +/* 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"; +} + + +/* 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 "; +} +/* 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 { @@ -518,7 +671,30 @@ samp:after { } - - - - +@media (max-width: 800px) { + #tree { + position: relative; + height: 250px; + width: 100%; + margin-top: 20px; + } + #content { + padding-left: 20px; + margin-top: 0px; + } +} + +#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; } + +.container { position:relative; border: none;} +.hoverimg { position: absolute; border: none; } +.hoverimg:hover{ z-index:100; box-shadow: 0 0 5px 5px lightgreen; }