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 +