From bd06005650121b28e904060a5ab4da7c0b99529a Mon Sep 17 00:00:00 2001 From: paul Date: Wed, 19 Aug 2015 18:19:37 +0000 Subject: [PATCH] some css restructuring, animated filter boxes svn path=/trunk/; revision=84 --- templates/common.css.sh | 154 ++++++++++++++++++++++++++-------------- 1 file changed, 101 insertions(+), 53 deletions(-) diff --git a/templates/common.css.sh b/templates/common.css.sh index f870219..f77a2ea 100755 --- a/templates/common.css.sh +++ b/templates/common.css.sh @@ -18,8 +18,10 @@ cat < * { +/* == Panel Elements == */ + +.panel#advfilter .quicklinks, +.panel#advfilter .filter, +.panel#tagger .newtag, +.panel#tagger input[type=submit], +.panel#preferences > * { display: inline-block; vertical-align: top; margin-top: 1em; } + +/* == Advanced Filters == */ + +/* == Filter Boxes == */ #advfilter .filter { border: solid 1px #FFF; border-radius: .25em; padding: .25em .5em; } -#advfilter > label.tabhandle { - text-align: right; - width: 4em; - margin-left: 4em; -} -#advfilter > .tabhandle + label { display: none; } -#advfilter > .tabhandle + label + .tabcontent { display: none; } -#advfilter > .tabhandle:checked + label + .tabcontent { display: inline-block; } -#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle + label{ display: inline-block; } -#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle:checked + label{ display: none; } - #advfilter .filter .tabcontainer { position: relative; width: 16em; + font-weight:normal; } -#advfilter .filter .category.tabhandle { display: block; } -#advfilter .filter input:checked + .category.tabhandle { +#advfilter .filter .tabcontainer input + .category.tabhandle { + display: block; + width: 50%; +} +#advfilter .filter .tabcontainer input:checked + .category.tabhandle { background: #FFF; color: #000; } -#advfilter .filter .category.tabcontent { +#advfilter .filter .tabcontainer .category.tabcontent { position: absolute; top: 0; right: 0; - width: 10em; + width: 50%; height: 100%; min-height: 4em; + border: 2px #FFF solid; + border-radius: 0 .25em .25em 0; +} + +#advfilter > label.tabhandle { + text-align: right; + width: 4em; + margin-left: 4em; +} + +/* == Dynamic Appearance of Boxes == */ +.panel#advfilter > .tabhandle + label { display: none; } +.panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle + label { display: inline-block; } +.panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle:checked + label { display: none; } +.panel#advfilter > .tabhandle + label + .tabcontent { + display: inline-block; + overflow: hidden; + max-width: 0; + max-height: 0; + padding: 0; + border: none; +} +.panel#advfilter > .tabhandle:checked + label + .tabcontent { + max-width: 100%; + max-height: 100%; + padding: .25em .5em; + border: solid 1px #FFF; } #advfilter .filter.final { @@ -169,6 +214,9 @@ a.clearsearch, word-wrap: break-word; } + +/* == Thumblist == */ + #thumblist { width: 100%; padding: .5em 0 3em 0; @@ -208,17 +256,17 @@ a.clearsearch, margin: .75em .5em; } -#tagger .newtag select, -#tagger .newtag .label{ +.panel#tagger .newtag select, +.panel#tagger .newtag .label{ display: block; width: 10em; } -#preferences > fieldset { +.panel#preferences > fieldset { border: solid 1px; border-radius: .25em; } -#preferences > input { display: block; } +.panel#preferences > input { display: block; } #videoview a.panel { position: absolute; -- 2.39.2