From: Robert Kaiser Date: Sun, 31 May 2015 18:52:31 +0000 (+0200) Subject: improve dirListing design X-Git-Tag: LCARStrek-2.36~2 X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=commitdiff_plain;h=e0a1501955cc9b54835c4e082921cead70292b4e improve dirListing design --- diff --git a/LCARStrek/global/dirListing/dirListing.css b/LCARStrek/global/dirListing/dirListing.css index ee4e1ddb..c3851e84 100644 --- a/LCARStrek/global/dirListing/dirListing.css +++ b/LCARStrek/global/dirListing/dirListing.css @@ -2,6 +2,8 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +@import url('chrome://global/skin/in-content/common.css'); + :root { background-color: #000000; color: #FF9F00; @@ -30,10 +32,14 @@ h1 { a { text-decoration: none; + color: #3333FF; } -a:hover { - background-color: #FFCF00; +td > a:visited { + color: #8050B0; +} + +body > table > tbody > tr:hover a { color: #000000; } @@ -46,6 +52,13 @@ p { float: left; } +#UI_goUp:hover { + background-color: #FFCF00; +} +#UI_goUp:hover > a { + color: #000000; +} + #UI_goUp:-moz-dir(rtl) { float: right; } @@ -59,6 +72,15 @@ p { float: left; } +/* HACK: as the checkbox is inside the label, we need to leave the ugle native checkbox */ +#UI_showHidden > label > input[type="checkbox"] { + opacity: 1; + position: static; +} +#UI_showHidden > label:hover { + color: #FFCF00; +} + table { clear: both; width: 90%; @@ -74,14 +96,17 @@ th:first-child { text-align: center !important; } -th:hover > a { +th:hover { background-color: #FFCF00; +} + +th:hover > a { color: #000000; } body > table > tbody > tr:hover { - outline: 1px solid #008484; - -moz-outline-radius: .3em; + background-color: #FFCF00; + color: #000000; } /* let 'Size' and 'Last Modified' take only as much space as they need and 'Name' all the rest */ @@ -100,3 +125,7 @@ td:not(:first-child) { vertical-align: middle; content: url("chrome://global/skin/dirListing/up.png"); } + +#UI_goUp:hover > .up::before { + content: url("chrome://global/skin/dirListing/up-hover.png"); +} diff --git a/LCARStrek/global/dirListing/up-hover.png b/LCARStrek/global/dirListing/up-hover.png new file mode 100644 index 00000000..21464329 Binary files /dev/null and b/LCARStrek/global/dirListing/up-hover.png differ diff --git a/LCARStrek/global/in-content/check.svg b/LCARStrek/global/in-content/check.svg new file mode 100644 index 00000000..b05b1d17 --- /dev/null +++ b/LCARStrek/global/in-content/check.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + diff --git a/LCARStrek/global/in-content/common.css b/LCARStrek/global/in-content/common.css index 4643c066..a7fda135 100644 --- a/LCARStrek/global/in-content/common.css +++ b/LCARStrek/global/in-content/common.css @@ -415,14 +415,13 @@ html|a:hover:active, } /* Checkboxes and radio buttons */ -/* -/ Hide the actual checkbox / +/* Hide the actual checkbox */ html|input[type="checkbox"] { opacity: 0; position: absolute; } -/ Create a box to style as the checkbox / +/* Create a box to style as the checkbox */ html|input[type="checkbox"] + html|label:before { display: inline-block; content: ""; @@ -432,47 +431,56 @@ html|input[type="checkbox"] + html|label:before { html|input[type="checkbox"] + html|label { line-height: 0px; } - +/* xul|checkbox { -moz-margin-start: 0; } - -xul|*.checkbox-check, +*/ +/* xul|*.checkbox-check, */ html|input[type="checkbox"] + html|label:before { -moz-appearance: none; width: 23px; height: 23px; - border-radius: 2px; - border: 1px solid #c1c1c1; + border-radius: 0; + border: 1px solid #FF9F00; -moz-margin-end: 10px; - background-color: #f1f1f1; - / !important needed to override toolkit checked !important rule / - background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important; + background-color: #000000; background-position: center center; background-repeat: no-repeat; - box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); } -xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, +/* xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, */ html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { - border-color: #0095dd; + border-color: #FFCF00; } - +html|input[type="checkbox"]:not(:disabled) + html|label:hover { + color: #FFCF00; +} +/* xul|*.checkbox-check[checked] { background-image: url("chrome://global/skin/in-content/check.png"), / * !important needed to override toolkit !important rule * / linear-gradient(#fff, rgba(255,255,255,0.8)) !important; } - +*/ html|input[type="checkbox"]:checked + html|label:before { - background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important; + background-image: url("chrome://global/skin/in-content/check.svg#check"); } -xul|checkbox[disabled="true"] > xul|*.checkbox-check, +/*xul|checkbox[checked][disabled="true"] > xul|*.checkbox-check,*/ +html|input[type="checkbox"]:checked:disabled + html|label:before { + background-image: url("chrome://global/skin/in-content/check.svg#check-disabled"); +} +html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { + background-image: url("chrome://global/skin/in-content/check.svg#check-hover"); +} +html|input[type="checkbox"]:disabled + html|label:before { + border-color: #8050B0; +} html|input[type="checkbox"]:disabled + html|label { - opacity: 0.5; + color: #8050B0; } - +/* xul|*.checkbox-label-box { -moz-margin-start: -1px; / * negative margin for the transparent border * / -moz-padding-start: 0;