tazpkg diff tazpanel/pkgs.css @ rev 747
Add and use icons from Faenza icon theme (new light look and feel); fix last recharge date (pay respect to timezone time offset); add few comments; stylize search toolbar; fix "up" command; admin: select mirror as standard way to select item from list; open external links in the new tab (or new window); and a ton of other small changes.
author | Aleksej Bobylev <al.bobylev@gmail.com> |
---|---|
date | Wed Jan 21 17:53:26 2015 +0200 (2015-01-21) |
parents | c4c2d523a719 |
children | f2975370bd27 |
line diff
1.1 --- a/tazpanel/pkgs.css Sun Jan 11 11:51:31 2015 +0200 1.2 +++ b/tazpanel/pkgs.css Wed Jan 21 17:53:26 2015 +0200 1.3 @@ -1,51 +1,61 @@ 1.4 +body { -webkit-appearance: window; } 1.5 1.6 -/* Sidebar menus */ 1.7 +/** 1.8 + * Sidebar menus 1.9 + */ 1.10 1.11 -#content-sidebar { margin: 20px 144px 20px 20px; } 1.12 +#content-sidebar { 1.13 + margin-right: 138px; /* sidebar width */ 1.14 + padding: 10px; 1.15 +} 1.16 1.17 -#sidebar { 1.18 - position: fixed; 1.19 - top: 60px; 1.20 - right: 0; 1.21 - padding: 5px 5px 0 0; 1.22 - width: 132px; 1.23 - height: 100%; 1.24 +#sidebar { /* full width = width(132) + h-padding(5) + border(1) = 138px */ 1.25 + position: fixed; top: 60px; bottom: 0; right: 0; 1.26 + width: 132px; padding: 5px 5px 0 0; 1.27 border-left: 1pt solid #AAA; 1.28 background-color: #EEE; 1.29 + overflow-y: auto; overflow-x: hidden; /* for tiny screens */ 1.30 } 1.31 1.32 #sidebar h4 { 1.33 - margin: 0; 1.34 + margin: 0; padding: 0; 1.35 font-size: 16px; color: #222; 1.36 text-align: center; 1.37 } 1.38 1.39 +/* hack to remove unwanted scrollbar from multiline selector */ 1.40 .select_wrap { 1.41 display: inline-block; 1.42 vertical-align: top; 1.43 overflow: hidden; 1.44 } 1.45 - 1.46 .select_wrap select { 1.47 padding: 5px; 1.48 margin:-5px -20px -5px -5px; 1.49 - width: 162px; 1.50 + width: 162px; /* sidebar:(138px) + this h-margin:(20px+5px) */ 1.51 font-size: small; 1.52 } 1.53 1.54 +/* zebra on selector */ 1.55 select option:nth-child(even) { 1.56 background-color: rgba(0,0,0,0.05); 1.57 } 1.58 1.59 +option:checked { color: red; font-weight: bold; background-color: orange; } 1.60 + 1.61 +/* sidebar links */ 1.62 #sidebar a { 1.63 display: inline-block; 1.64 padding: 0 0 0 0.5em; margin: 0; 1.65 - color: #666; 1.66 + color: #000; 1.67 font-size: small; 1.68 width: 100%; 1.69 } 1.70 1.71 1.72 +/** 1.73 + * List of packages 1.74 + */ 1.75 1.76 /* links classes: 1.77 * pkg - package (not installed); 1.78 @@ -56,78 +66,86 @@ 1.79 * you can style links using icons and/or color 1.80 */ 1.81 1.82 -a.pkg { 1.83 - background: url(images/tazpkg.png) no-repeat left; } 1.84 -a.pkgi, a.pkgib { 1.85 - background: url(images/tazpkg-installed.png) no-repeat left; } 1.86 -/* 1.87 -a.pkgi { 1.88 - color: green; } 1.89 -*/ 1.90 -a.pkgib { 1.91 - color: red; } 1.92 +a.pkg { background: url(images/tp-new.png) no-repeat left; } 1.93 +a.pkgi { background: url(images/tp-pkgi.png) no-repeat left; } 1.94 +a.pkgib { background: url(images/tp-pkgib.png) no-repeat left; color: red; } 1.95 a.w, .pkglist td:nth-child(4) a { 1.96 - background: url(images/browser.png) no-repeat left; } 1.97 + background: url(images/tp-web.png) no-repeat left; } 1.98 1.99 a.pkg, a.pkgi, a.pkgib, a.w, .pkglist td:nth-child(4) a { 1.100 margin: 0; padding: 0 0 0 17px; 1.101 min-height: 16px; min-width: 16px; 1.102 - display: inline-block; } 1.103 + display: inline-block; 1.104 +} 1.105 1.106 +/* not break the line */ 1.107 +.pkglist td:nth-child(1), 1.108 +.filelist td:nth-child(1) { white-space: nowrap; } 1.109 1.110 -.pkglist td:nth-child(1), .filelist td:nth-child(1) { 1.111 - white-space: nowrap; 1.112 - } 1.113 +.pkglist td:nth-child(1) a, 1.114 +.filelist td:nth-child(1) a { max-width: 12em; } 1.115 +.pkglist td:nth-child(2) { max-width: 7em; } 1.116 +.filelist td:nth-child(2) { max-width: 30em; } 1.117 1.118 -.pkglist td:nth-child(1) a, .filelist td:nth-child(1) a { 1.119 - max-width: 12em; 1.120 - } 1.121 - 1.122 -.pkglist td:nth-child(2) { 1.123 - max-width: 7em; 1.124 - } 1.125 - 1.126 -.pkglist td:nth-child(1) a, .pkglist td:nth-child(2), 1.127 -.filelist td:nth-child(1) a, .filelist td:nth-child(2) { 1.128 +/* ellipsize content of 1st and 2nd columns */ 1.129 +.pkglist td:nth-child(1) a, 1.130 +.pkglist td:nth-child(2), 1.131 +.filelist td:nth-child(1) a, 1.132 +.filelist td:nth-child(2) { 1.133 white-space: nowrap; 1.134 overflow: hidden; 1.135 text-overflow: ellipsis; -o-text-overflow: ellipsis; 1.136 - } 1.137 +} 1.138 1.139 -.filelist td:nth-child(2) { 1.140 - max-width: 30em; 1.141 - } 1.142 1.143 .pkglist tr { border-bottom: 1pt solid #DDD; } 1.144 1.145 -.pkglist, .pkglist thead, .summary { border: 1.5pt solid #BBB!important; } 1.146 +.pkglist, .pkglist thead { border: 1.5pt solid #BBB!important; } 1.147 1.148 -.summary td:nth-child(1) { 1.149 - width:10%; white-space: nowrap; /* to have minimal width of first column */ 1.150 - } 1.151 1.152 -#actions { overflow: auto; } 1.153 + 1.154 +/** 1.155 + * Summary table 1.156 + */ 1.157 + 1.158 +/* to have minimal width of first column */ 1.159 +.summary td:nth-child(1) { width:10%; white-space: nowrap; } 1.160 + 1.161 +/* light blue links on summary table */ 1.162 +.summary a { color: #248; } 1.163 + 1.164 + 1.165 + 1.166 +/** 1.167 + * Pager 1.168 + */ 1.169 1.170 a.pages { 1.171 + display: inline-block; 1.172 padding: 0.5ex; 1.173 margin: 0.5ex 0; 1.174 border: 1px solid #AAA; 1.175 width: 3ex; 1.176 - display: inline-block; 1.177 text-align: center; 1.178 - } 1.179 +} 1.180 a.pages:hover { 1.181 border: 1px solid #F94; 1.182 background: #F94; 1.183 color: black; 1.184 - } 1.185 +} 1.186 a.pages.current, a.pages.current:hover { 1.187 font-weight: bold; 1.188 border: 1px solid #07F; 1.189 background: #07F; 1.190 color: #eee; 1.191 - } 1.192 +} 1.193 1.194 + 1.195 + 1.196 +/* 1.197 + * Tags 1.198 + */ 1.199 +#tags { text-align: center; } 1.200 a.tag1 { font-size: 0.9em; color: #678; } 1.201 a.tag2 { font-size: 1.0em; color: #444; } 1.202 a.tag3 { font-size: 1.1em; color: #16A; } 1.203 @@ -136,22 +154,86 @@ 1.204 a.tag6 { font-size: 1.8em; color: #862; } 1.205 a.tag7 { font-size: 2.1em; color: #FA0; } 1.206 a.tag8 { font-size: 2.4em; color: #F00; } 1.207 -a.tag1, a.tag2, a.tag3, a.tag4, a.tag5, a.tag6, a.tag7, a.tag8 { 1.208 +#tags a { 1.209 display: inline-block; 1.210 white-space: nowrap; 1.211 vertical-align: middle; 1.212 padding: 0.2em 0.5em; 1.213 } 1.214 -a.tag1:hover, a.tag2:hover, a.tag3:hover, a.tag4:hover, a.tag5:hover, a.tag6:hover, a.tag7:hover, a.tag8:hover { 1.215 - outline: 1.5pt solid #FC8; } 1.216 +#tags a:hover { 1.217 + outline: 1.5pt solid #FC8; 1.218 +} 1.219 1.220 + 1.221 + 1.222 +/* 1.223 + * Action buttons panel 1.224 + */ 1.225 #actions { 1.226 - background-color: #EEE; 1.227 - margin: 0; padding: 0 0.5ex!important; 1.228 - border: 1pt solid #DDD; 1.229 - border-radius: 0.5ex; 1.230 + background-color: rgba(229,229,229,0.5); 1.231 + margin: 0; padding: 0.2rem 0.3rem!important; 1.232 + border: 1pt solid #CCC; 1.233 + border-radius: 0.3rem; 1.234 + overflow: auto; /* provide break after floated objects */ 1.235 } 1.236 .button img { 1.237 padding: 0 4px 0 0; 1.238 } 1.239 1.240 + 1.241 +/* "articles" are used in the admin page */ 1.242 +article, fieldset { 1.243 + display: block; 1.244 + border: 1pt solid rgba(128, 128, 128, 0.5); 1.245 + border-radius: 0.3rem; 1.246 + padding: 0.3rem 0.3rem 0 0.3rem; 1.247 + margin: 0.5rem 0; 1.248 + background-color: rgba(128, 128, 128, 0.2); 1.249 +} 1.250 +article h3 { 1.251 + padding: 0.3rem; margin: -0.3rem; 1.252 + border-bottom: 1pt solid rgba(128, 128, 128, 0.5); 1.253 + border-radius: 0.3rem 0.3rem 0 0; 1.254 + background-color: rgba(128, 128, 128, 0.3); 1.255 +} 1.256 +legend { 1.257 + font-weight: bold; 1.258 +} 1.259 +/* Disable too much borders */ 1.260 +article pre, article table { border: none } 1.261 + 1.262 + 1.263 +/* 1.264 + * Search block 1.265 + */ 1.266 +.search { 1.267 + position: fixed; right: 10px; top: 8px; 1.268 + height: 25px; 1.269 + border-radius: 4px; 1.270 + background-color: #FFF; 1.271 + padding: 0; margin: 0; 1.272 +} 1.273 +.search input { 1.274 + height: 100%; 1.275 + margin: 0; padding: 4px; 1.276 + /*outline: none;*/ 1.277 +} 1.278 +.search input:nth-child(1) { 1.279 + width: 200px; 1.280 + border: none; 1.281 + -webkit-appearance: none; /* remove borders for input type="search" */ 1.282 +} 1.283 +.search input:nth-child(2), .search input:nth-child(3) { -webkit-appearance: push-button; } 1.284 + 1.285 +.search input:nth-child(1) { 1.286 + border-radius: 4px 0 0 4px; 1.287 + -moz-border-radius: 4px 0 0 4px; 1.288 + -webkit-border-radius: 4px 0 0 4px; 1.289 +} 1.290 +.search input:nth-child(2) { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } 1.291 +.search input:nth-child(3) { 1.292 + border-top-left-radius: 0; border-bottom-left-radius: 0; 1.293 + -moz-border-top-left-radius: 0; -moz-border-bottom-left-radius: 0; 1.294 + -webkit-border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; 1.295 +} 1.296 +