X-Git-Url: http://git.plutz.net/?p=serve0;a=blobdiff_plain;f=style.css;h=0eba5175dcef460eee0efd58c479ec92f2c04e02;hp=dd5a23173ab0d702cfcbff1874c53b1aefd00d22;hb=bbf0a951d1ff6106d1d2dd8032333b1b1ccd67f2;hpb=ca9072b5b140d1a78f4c38f0751a9256fdc8f28d diff --git a/style.css b/style.css index dd5a231..0eba517 100644 --- a/style.css +++ b/style.css @@ -5,20 +5,42 @@ button { padding: .125em .5em; } a { color: inherit; text-decoration: none;} +input { + border: 1px solid; + padding: .25em .5em; + line-height: 1em; + vertical-align: bottom; +} +input[type=number] { padding-right: 0; } +input[type=radio], input[type=checkbox] { vertical-align: baseline; } +select { + border: 1px solid; + padding: .125em .5em; +} +select[multiple] { padding: 0; } +select[multiple] option { padding: .25em .5em; } + body { - position: relative; color: white; background-color: black; + min-height: 100%; } -#prefs, #bookmarks { +#prefs, #bookmarks, +#multitag, #advsearch { display: block; + position: relative; overflow: hidden; height: 0; + text-align: left; + background-color: #333; } #prefs:target, +#advsearch:target, +#multitag:target, #bookmarks:target { height: auto; + overflow: visible; } #navigation{ @@ -50,38 +72,39 @@ a[href="#advsearch"]:before { margin: 0 .5em; } -#prefs:target { +#prefs { position: absolute; right: 0; width: 13em; margin-left: auto; margin-top: -1px; - background-color: #333; border: 1px solid; border-top: none; border-right: none; - padding: .5em 1em; + padding: 0 1em; z-index: 1; - overflow: visible; } -#prefs:target a[href="#"] { - position: absolute; - right: .25em; margin-top: -1.5em; +#prefs a[href="#"] { + display: block; + position: relative; + top: -1.125em; + margin-right: -.5em; + margin-bottom: -1em; + text-align: right; font-size: 1.5em; - padding: 0 .25em; - background-color: #333; - z-index: 1; + padding-right: .25em; + background-color: inherit; } #prefs label[for=prefs_ps] { font-weight: bold; } #prefs #prefs_ps { - max-width: 3em; + max-width: 4em; margin-bottom: 1em; } #prefs button { - margin-top: 1em; + margin: 1em 0; } #prefs input { vertical-align: top; } #prefs input[type=radio] + label, @@ -91,7 +114,101 @@ a[href="#advsearch"]:before { max-width: 85%; } -.itemlist { display: block; overflow: hidden; } +#advsearch:target { + display: block; + position: relative; + text-align: center; + border-bottom: 1px solid; +} +#advsearch a[href="#"] { + display: block; + line-height: 2em; + background-color: inherit; + border-bottom: 1px solid; + text-align: left; + padding-left: .5em; + position: relative; + top: -2em; +} +#advsearch .help { + display: block; + margin: -1em .625em 1em .625em; + padding: .5em 1em; + background-color: #444; + line-height: 1.5em; + text-align: left; +} + +#advsearch input.and {display: none;} +#advsearch input.and + label {display: none} +#advsearch input.and + label + .select {display: none;} + +#advsearch input.and + label:nth-of-type(2), +#advsearch input.and:checked + label + .select + input + label { + display: inline-block; + vertical-align: top; + margin: 0 .5% 1em .5%; + width: 4%; min-width: 4em; + padding: .5em 0; + text-align: center; + font-weight: bold; + border: 1px solid; +} + +#advsearch input.and:checked + label + .select + input:checked + label, +#advsearch input.and:checked + label:nth-of-type(2), +#advsearch input.and:checked + label { display: none; } + +#advsearch .submit, +#advsearch input.and + label + .select:first-of-type, +#advsearch input.and:checked + label + .select { + display: inline-block; + position: relative; + width: 19%; + margin: 0 .5% 1em .5%; + min-width: 200px; + min-height: 12em; + overflow: hidden; + text-align: left; + vertical-align: top; +} + +#advsearch .submit { min-height: 0; } +#advsearch .submit * { width: 50%; } + +#advsearch .select input.pol { + margin: .5em .25em 0 .5em; +} +#advsearch .select input.pol + label { + font-weight: bold; +} +#advsearch .select label.head { + display: block; + font-weight: bold; + padding: .5em 0 0 .5em; + border-bottom: 1px solid; +} + +#advsearch .select select {display: none;} +#advsearch .select input.cat { display: none; } +#advsearch .select input.cat + label { + display: block; + margin-right: 50%; + padding: .25em .5em; + font-size: 1.125em; + border-bottom: 1px solid; +} +#advsearch .select input.cat:checked + label { + background-color: #444; +} +#advsearch .select input.cat:checked + label + select { + display: block; + position: absolute; + top: 3.5em; bottom: 0; + right: 0; left: 50%; + width: 50%; +} + .list { position: relative; display: inline-block; @@ -102,6 +219,7 @@ a[href="#advsearch"]:before { word-wrap: break-word; vertical-align: top; color: black; + overflow: hidden; } .list.dir { padding: .5em 1em; @@ -130,12 +248,35 @@ a[href="#advsearch"]:before { background-color: rgba(0,0,0,.625); } +.list.file .time, +.list.file .dim, +.list.file .tag, +.list.file label { + display: inline-block; + margin-top: .125em; +} .list.file .time, .list.file .dim { color: white; background-color: #004; padding: .125em .5em; } +.list.file .tag { + color: white; + background-color: #400; + padding: .125em .5em; +} + +.list.file input[type="checkbox"] { display: none; } +.list.file input[type="checkbox"] + label { + border: 1px solid; + border-radius: .125em; + padding: 0 .25em; + background-color: #FBB; +} +.list.file input[type="checkbox"]:checked + label { + background-color: #4F4; +} .pagination { display: block; @@ -152,7 +293,8 @@ a[href="#advsearch"]:before { } #editing { - width: 100%; bottom: 0; + text-align: left; + width: 100%; background-color: #333; border-top: 1px solid; padding: .25em; @@ -160,3 +302,19 @@ a[href="#advsearch"]:before { #index label:first-of-type { font-weight: bold; } #index input, #index button { margin-left: 1em;} + +#multitag:target a[href="#"] { + position: relative; + top: -1em; + padding-right: 10em; + background-color: inherit; +} +#multitag fieldset{ + display: inline-block; + width: 25%; min-width: 250px; + vertical-align: top; + padding: 0 .25em; + border: none; +} +#multitag fieldset * { width: 100%; } +#multitag fieldset button { width: 50%; }