tazpanel diff styles/default/style.css @ rev 41

Better CSS for pkgs.cgi and handle packages category as fast as we can
author Christophe Lincoln <pankso@slitaz.org>
date Wed Apr 06 19:02:07 2011 +0200 (2011-04-06)
parents fa59528e8bdf
children a7b1d69663c3
line diff
     1.1 --- a/styles/default/style.css	Tue Apr 05 06:06:09 2011 +0200
     1.2 +++ b/styles/default/style.css	Wed Apr 06 19:02:07 2011 +0200
     1.3 @@ -14,11 +14,11 @@
     1.4  	margin: 25px 0 0;
     1.5  }
     1.6  
     1.7 -h1 { color: #d66018; padding: 18px 0 0 40px;}
     1.8 +h1 { color: #d66018; padding: 10px 0 0 40px;}
     1.9  h2 { color: #444; margin: 10px 0 10px; }
    1.10  h3 { color: #666; font-size: 140%; }
    1.11  h4 { color: #888; font-size: 120%; }
    1.12 -img { border: 0pt none; vertical-align: middle; padding: 0 6px 0 0;}
    1.13 +img { border: 0pt none; vertical-align: middle; padding: 0px 6px 2px 0;}
    1.14  p { margin: 6px 0; }
    1.15  ul { list-style-type: none; padding: 0; }
    1.16  li { padding: 4px 0; }
    1.17 @@ -28,69 +28,10 @@
    1.18  /* Header and main title */
    1.19  
    1.20  #header {
    1.21 -	height: 68px;
    1.22 +	height: 52px;
    1.23  	border-bottom: 1px dotted #ddd;
    1.24  }
    1.25  
    1.26 -/* Blocks */
    1.27 -
    1.28 -#block { float: left; }
    1.29 -
    1.30 -#sub_block { margin: 20px 0; }
    1.31 -
    1.32 -/* Content */
    1.33 -
    1.34 -#content { margin: 20px 80px; }
    1.35 -#wrapper { margin: 20px 0 20px; }
    1.36 -
    1.37 -.search {
    1.38 -	position: absolute;
    1.39 -	right: 80px;
    1.40 -	top: 39px;
    1.41 -}
    1.42 -
    1.43 -#actions {
    1.44 -	
    1.45 -}
    1.46 -
    1.47 -#actions p { padding: 0; }
    1.48 -
    1.49 -.box {
    1.50 -	margin: 10px 0;
    1.51 -	padding: 12px;
    1.52 -	background: #f8f8f8;
    1.53 -	border: 1px solid #ddd;
    1.54 -}
    1.55 -
    1.56 -.debug {
    1.57 -	position: fixed;
    1.58 -	top: 20px;
    1.59 -	left: 5px;
    1.60 -	padding: 6px 20px;
    1.61 -	background-color: #f8f8f8;
    1.62 -	border: 1px solid #ddd;
    1.63 -}
    1.64 -
    1.65 -.float_left { float: right; }
    1.66 -.float_right { float: right; }
    1.67 -
    1.68 -/* Table */
    1.69 -
    1.70 -table {
    1.71 -	background-color: #f8f8f8;
    1.72 -	border: 1px solid #ddd;
    1.73 -	padding: 10px;
    1.74 -	width: 100%;
    1.75 -}
    1.76 -
    1.77 -td.pkg { max-width: 160px; }
    1.78 -td.desc { max-width: 300px; }
    1.79 -
    1.80 -#thead, thead {
    1.81 -	height: 10px;
    1.82 -	font-weight: bold;
    1.83 -}
    1.84 -
    1.85  /* Desktop gui style bar */
    1.86  
    1.87  #toolbar {
    1.88 @@ -113,9 +54,120 @@
    1.89  
    1.90  .progress { cursor: progress; }
    1.91  
    1.92 +/* Blocks */
    1.93 +
    1.94 +#block { float: left; }
    1.95 +
    1.96 +/* Sidebar menus */
    1.97 +
    1.98 +#sidebar {
    1.99 +	position: fixed;
   1.100 +	top: 187px;
   1.101 +	right: 5px;
   1.102 +	width: 116px;
   1.103 +}
   1.104 +
   1.105 +#sidebar a {
   1.106 +	display: block;
   1.107 +	padding: 1px 0 1px 12px;
   1.108 +	margin:0;
   1.109 +}
   1.110 +
   1.111 +#sidebar a.active {
   1.112 +	color: #000;
   1.113 +	font-weight: bold;
   1.114 +	/* Vertical tab alike menu
   1.115 +	background-color: #f8f8f8;
   1.116 +	border-top: 1px solid #ddd;
   1.117 +	border-bottom: 1px solid #ddd;
   1.118 +	border-right: 1px solid #ddd;
   1.119 +	border-top-right-radius: 4px;
   1.120 +	border-bottom-right-radius: 4px; */
   1.121 +}
   1.122 +#sidebar h4 { margin: 0 0 2px 12px; }
   1.123 +
   1.124 +/* Content */
   1.125 +
   1.126 +#content { margin: 20px 40px 20px 40px; }
   1.127 +#content-sidebar { margin: 20px 120px 20px 40px; }
   1.128 +#wrapper { margin: 10px 0 20px; }
   1.129 +
   1.130 +.search {
   1.131 +	position: absolute;
   1.132 +	right: 40px;
   1.133 +	top: 32px;
   1.134 +}
   1.135 +
   1.136 +.search input[type=submit] {
   1.137 +	padding: 4px;
   1.138 +	margin-left: -5px;
   1.139 +	background-color: #f1f1f1;
   1.140 +	border: 1px solid #ddd;
   1.141 +	cursor: pointer;
   1.142 +	color: #000;
   1.143 +	font-weight: bold;
   1.144 +	border-top-right-radius: 4px;
   1.145 +	border-bottom-right-radius: 4px;
   1.146 +	border-top-left-radius: 0px;
   1.147 +	border-bottom-left-radius: 0px;
   1.148 +}
   1.149 +
   1.150 +.search input[type=text] {
   1.151 +	border: 1px solid #ddd;
   1.152 +	padding: 4px;
   1.153 +	height: 17px;
   1.154 +	margin: 0;
   1.155 +	border-top-left-radius: 4px;
   1.156 +	border-bottom-left-radius: 4px;
   1.157 +}
   1.158 +
   1.159 +#actions {
   1.160 +	height: 20px;
   1.161 +	margin: 16px 0;
   1.162 +}
   1.163 +
   1.164 +.box {
   1.165 +	margin: 10px 0;
   1.166 +	padding: 12px;
   1.167 +	background: #f8f8f8;
   1.168 +	border: 1px solid #ddd;
   1.169 +}
   1.170 +
   1.171 +.debug {
   1.172 +	position: fixed;
   1.173 +	top: 20px;
   1.174 +	left: 5px;
   1.175 +	padding: 6px 20px;
   1.176 +	background-color: #f8f8f8;
   1.177 +	border: 1px solid #ddd;
   1.178 +}
   1.179 +
   1.180 +.float-left { float: left;  }
   1.181 +.float-right { float: right; }
   1.182 +
   1.183 +/* Table */
   1.184 +
   1.185 +table {
   1.186 +	background-color: #f8f8f8;
   1.187 +	border: 1px solid #ddd;
   1.188 +	padding: 10px;
   1.189 +	width: 100%;
   1.190 +	margin: 0 0 6px 0;
   1.191 +}
   1.192 +
   1.193 +table a { color: #000; }
   1.194 +table a:hover { color: #666; }
   1.195 +td.pkg { max-width: 160px; }
   1.196 +td.desc { max-width: 300px; }
   1.197 +
   1.198 +#thead, thead {
   1.199 +	height: 10px;
   1.200 +	font-weight: bold;
   1.201 +}
   1.202 +
   1.203  /* Misc */
   1.204  
   1.205 -pre { 
   1.206 +pre, .pre-main { 
   1.207  	background-color: #f8f8f8; 
   1.208  	border: 1px solid #ddd; 
   1.209  	padding: 10px;
   1.210 @@ -123,25 +175,38 @@
   1.211  	overflow: auto;
   1.212  }
   1.213  
   1.214 -input[type=submit], select {
   1.215 -	padding: 2px 4px;
   1.216 -	margin: 4px 0 0;
   1.217 +.pre-main { margin: 16px 0; }
   1.218 +
   1.219 +input[type=submit], select, .button {
   1.220 +	padding: 4px;
   1.221 +	margin: 0;
   1.222  	background-color: #f1f1f1;
   1.223  	border: 1px solid #ddd;
   1.224  	cursor: pointer;
   1.225 +	color: #000;
   1.226  }
   1.227  
   1.228 -input[type=submit]:hover, select:hover {
   1.229 +input[type=submit]:hover, select:hover, .button:hover {
   1.230  	background-color: #ddd;
   1.231  	border: 1px solid #999;
   1.232  }
   1.233  
   1.234 -input[type=text] { height: 15px; }
   1.235 +input[type=text] { height: 18px; }
   1.236  
   1.237  /* Round corner */
   1.238  
   1.239 -table, pre, input[type=submit], .debug, .box {
   1.240 -	-moz-border-radius: 4px;
   1.241 -	-webkit-border-radius: 4px;
   1.242 +table, pre, input[type=submit], .debug, .box, .button {
   1.243 +	/*-moz-border-radius: 4px;
   1.244 +	-webkit-border-radius: 4px; */
   1.245  	border-radius: 4px;
   1.246  }
   1.247 +
   1.248 +/* Footer */
   1.249 +
   1.250 +#footer {
   1.251 +	/* border-bottom: 1px solid #c1baad; */
   1.252 +	height: 25px;
   1.253 +	text-align: center;
   1.254 +	padding: 40px 10px;
   1.255 +	font-size: 11px;
   1.256 +}