X-Git-Url: https://git.plutz.net/?p=confetti;a=blobdiff_plain;f=style.css;fp=style.css;h=e466cb71f9b780af65256da6916e6324595cc4a8;hp=0000000000000000000000000000000000000000;hb=d5fb0b81bce3f19153b9c74f4bc17fe7a3043a7c;hpb=da89c059ba413f8dbc01409aa883dfc1b4be1f9e diff --git a/style.css b/style.css new file mode 100644 index 0000000..e466cb7 --- /dev/null +++ b/style.css @@ -0,0 +1,101 @@ +* { + font-family: sans-serif; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + z-index: 0; +} +body { + background: #EEE; + margin: 0; + padding: 0; + padding-top: 2.5em; + position: absolute; + min-height: 100%; + width: 100%; + padding-bottom: 2em; +} +.NAVIGATION { + position: fixed; + top: 0; + display: inline-block; + border-style: none solid solid solid; + border-width: 0 1px 1px 1px; + border-radius: 0 0 4px 4px; + margin: 0 2em; + padding: .5em 1ex; + background: #FFF; + z-index: 1; +} +.NAVIGATION label, +.NAVIGATION a { + color: #008; + border: solid 1px #BBF; + margin: .5em .5ex .25em .5ex; + padding: .2em 3ex .2em 3ex; + background: #EFF; +} +.NAVIGATION label:hover, +.NAVIGATION a:hover { + border-width: 2px 1px; + background: #F3FFFF; +} + +#CONFIGURE label[for="navigationconfig"] { display: none; } +#CONFIGURE:target label[for="navigationconfig"] { display: inline; } + +.NAVIGATION input#navigationconfig { display: none; } +.NAVIGATION input + form.config { + position: static; + display: none; +} + +.NAVIGATION .config a { display: block; } +.NAVIGATION .config a:hover { border-width: 1px 2px; } +.NAVIGATION input:checked + form.config { display: block; } +.NAVIGATION .config input[type=text], +.NAVIGATION .config button { + font-size: .875em; + line-height: 1.5em; + height: 1.75em; + padding: 0 .25em; + vertical-align: bottom; + border: 1px solid #000; + background-color: #FFF; +} +.NAVIGATION .config input[type=text] { + margin: .25em 0 0 .375em; + border-right: none; + width: 70%; +} +.NAVIGATION .config button { + min-width: 2.5em; + text-align: center; + max-width: 30%; +} +.NAVIGATION .config button[value=del] { + background: #FCC; +} + + +.trailbtn { display: none; } +.trailbtn + .trailbox { display: none; } +.trailbtn:checked + .trailbox { display: inline-block; } +.trailbtn:checked + .trailbox + .trailbtn { display: block; } +.trailbtn:checked + .trailbox + .trailbtn:before { + display: block; content: '+'; + width: 3ex; text-align: center; + margin-top: .25em; padding: .25em 0; + background-color: #FFF; + border-width: 1px; border-style: solid; +} +.trailbtn:checked + .trailbox + .trailbtn:checked, +.trailbtn:checked { display: none; } + +#footer { + width: 100%; + background-color: #FFF; + border-top: 1px solid #BBF; + margin: 0; padding: .5em 2em; + position: absolute; bottom: 0; +}