From 002edf53da30cfd378a6ffca3ae2794361670090 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Paul=20H=C3=A4nsch?= Date: Thu, 19 Jul 2018 00:33:00 +0200 Subject: [PATCH] various style improvements --- list.sh | 2 +- style.css | 122 +++++++++++++++++++++++++++-------------------------- widgets.sh | 2 +- 3 files changed, 64 insertions(+), 62 deletions(-) diff --git a/list.sh b/list.sh index 8b8ea8e..18799f3 100644 --- a/list.sh +++ b/list.sh @@ -17,7 +17,7 @@ list_item() { $(meta_info "$_DATA/$ITEM/$1") EOF printf '[div .list .file - [a href="%s" [img src="%s?a=thumbnail"][label %s]] + [a href="%s" [img src="%s?a=thumbnail"]][label %s] [span .time %i:%imin] [span .dim %ix%i] %s [checkbox "select" "%s" id="select_%s"][label for="select_%s" +] ]' \ diff --git a/style.css b/style.css index c19ee48..4849e34 100644 --- a/style.css +++ b/style.css @@ -27,35 +27,46 @@ body { min-height: 100%; } + +/* ### Main Page Elements ### */ + #navigation{ + position: relative; text-align: center; - background-color: #333; - padding: .25em; border-bottom: 1px solid; + background-color: #333; } -#search { display: inline; } - -a[href="#prefs"] { - position: absolute; - top: 0; right: .25em; - font-size: 1.5em; +#editing, +#multitag { + position: fixed; + bottom: 0; width: 100%; + padding: .25em 0; + border-top: 1px solid; + background-color: #333; } +#search { display: inline; } + +a[href="#prefs"], a[href="#bookmarks"] { position: absolute; - top: 0; left: .25em; + top: 0; + margin: 0 .25em; font-size: 1.5em; } +a[href="#prefs"] { right: 0; } +a[href="#bookmarks"] { left: 0; } -a[href="#advsearch"] { - margin-left: .5em; -} +a[href="#advsearch"] { margin-left: .5em; } a[href="#advsearch"]:before { content: '\25b8'; margin: 0 .5em; } + +/* ### Expandable Drawers ### */ + #prefs, #bookmarks, #multitag, #advsearch { display: block; position: absolute; height: 0; width: 100%; max-width: 100%; @@ -93,16 +104,17 @@ a[href="#advsearch"]:before { #bookmarks a[href="#"], #prefs a[href="#"] { display: block; - position: relative; + position: absolute; top: -2em; line-height: 2em; - margin: 0 -1em -1.5em -1em; padding: 0 .75em; font-weight: bold; background-color: inherit; + left: 0; right: 0; } -#prefs a[href="#"] { text-align: right; } +#prefs a[href="#"] { width: 2.5em; left: auto; } +#bookmarks a[href="#"] { width: 2.5em; right: auto; } #advsearch a[href="#"] { border-bottom: 1px solid; } -#multitag a[href="#"] { top: -1em; line-height: 1em; } +#multitag a[href="#"] { position: normal; border-top: 1px solid;} /* ### Preferences Drawer ### */ @@ -135,6 +147,8 @@ a[href="#advsearch"]:before { #bookmarks label { display: block; font-weight: bold; + word-break: break-word; + overflow: hidden; } #bookmarks a.link { display: inline-block; @@ -148,7 +162,7 @@ a[href="#advsearch"]:before { #advsearch .help { display: block; - margin: -1em .5em 1em .5em; + margin: 1em .5em 1em .5em; padding: .5em 1em; background-color: #444; line-height: 1.5em; @@ -229,70 +243,64 @@ a[href="#advsearch"]:before { .list { position: relative; display: inline-block; - width: 25%; - min-width: 250px; - padding: .25em; - overflow: none; - word-wrap: break-word; + width: 25%; min-width: 250px; + padding: .375em; vertical-align: top; - color: black; overflow: hidden; } -.list.dir { - padding: .5em 1em; -} +.list.dir { padding: .5em 1em; } .list:before { position: absolute; top: .25em; left: .25em; bottom: .25em; right: .25em; - z-index: -2; content: ''; + z-index: -2; } -.list.dir:before { background-color: #CCF; } -.list.file:before { background-color: #FDD; } +.list.dir:before { background-color: #CCF; color: black; } +.list.file:before { background-color: #333; } .list.file:first-of-type { clear: left; } .list.file a img{ display: block; width: 100%; min-height: 4em; + border-bottom: 1px solid black; } -.list.file a label{ - position: absolute; - top: 0; padding: .25em .5em; - color: white; - background-color: rgba(0,0,0,.625); +.list.file a + label{ + display: inline-block; + width: 100%; max-height: 2.5em; + margin-right: -10em; + padding: .25em .5em; + word-break: break-word; + background-color: #222; } -.list.file .time, -.list.file .dim, -.list.file .tag, -.list.file label { +.list.file .time, .list.file .dim { + float: right; position: relative; display: inline-block; - margin-top: .125em; -} -.list.file .time, -.list.file .dim { - color: white; - background-color: #004; - padding: .125em .5em; + top: -1.5em; bottom: 1.5; + margin-right: .125em; + padding: .125em .25em; + background-color: rgba(0,0,0,.75); } -.list.file .tag { - color: white; - background-color: #400; + +.list.file .tag, +.list.file input + label { + display: inline-block; + margin: .125em -.125em 0 0; padding: .125em .5em; + color: black; + background-color: #DCC; } .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; + background-color: #ECC; } .list.file input[type="checkbox"]:checked + label { - background-color: #4F4; + background-color: #8F8; } .itemlist, @@ -301,20 +309,14 @@ a[href="#advsearch"]:before { text-align: center; margin-top: 1em; } +.pagination { margin-bottom: 3em;} .page { display: inline-block; + margin: 0 .125em; padding: .25em .5em; color: black; background-color: #FDD; border: 1px solid; - margin: 0 .125em; -} - -#editing { - width: 100%; - background-color: #333; - border-top: 1px solid; - padding: .25em 0; } #index label:first-of-type { font-weight: bold; } diff --git a/widgets.sh b/widgets.sh index 9bb6d93..cb5cf97 100644 --- a/widgets.sh +++ b/widgets.sh @@ -61,7 +61,7 @@ w_bookmarks(){ [a .link target=blank href="?o=Date&s=%s&f=%s" by Date] [a .link target=blank href="?o=Length&s=%s&f=%s" by Length] [br]' \ - "$(HTML "$name")" \ + "$(HTML "$name" |sed 's;,\;;&[wbr];g;')" \ "$search" "$filter" \ "$search" "$filter" \ "$search" "$filter" -- 2.39.2