# HG changeset patch
# User Adrien Vigneron <adrienvigneron@mailoo.org>
# Date 1308355446 -7200
# Node ID 3df602cf700a42ea2093dd3ffc71c887bce8ede0
# Parent  447dc8ac181b00dd8fd2fa1b4e64cca13b3e9cab
browser side: groups design

diff -r 447dc8ac181b -r 3df602cf700a browser_side/contact.py
--- a/browser_side/contact.py	Sat Jun 18 01:21:45 2011 +0200
+++ b/browser_side/contact.py	Sat Jun 18 02:04:06 2011 +0200
@@ -79,6 +79,7 @@
 
     def __init__(self, parent):
         VerticalPanel.__init__(self)
+        self.setStyleName('groupList')
         self._parent = parent
 
     def add(self, group):
diff -r 447dc8ac181b -r 3df602cf700a public/libervia.css
--- a/public/libervia.css	Sat Jun 18 01:21:45 2011 +0200
+++ b/public/libervia.css	Sat Jun 18 02:04:06 2011 +0200
@@ -272,19 +272,66 @@
 }
 /* Contact List */
 
+div.contactBox {
+    margin-left: 20px;
+}
+
 .contactTitle {
-    font-style: italic;
-    border-bottom: 1px solid gray;
-    text-align: center;
+	color: #fff;
+	font-weight: bold;
+	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
+	font: normal 1.2em/1.4em Arial, Helvetica, sans-serif;
+	text-indent: 15px;
+	width: 200px;
+	height: 30px;
+	border-right: 1px solid #ddd; 
+	border-radius: 10px 0 0 0; 
+	-webkit-border-radius: 10px 0 0 0; 
+	-moz-border-radius: 10px 0 0 0; 
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’); 
+	background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 
+	background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important; 
+	background-image: -o-linear-gradient(#cf2828,#b01e1e);	
+}
+.groupList {
+	font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
+	/*width: 200px;*/
+	margin-top: 10px;
+	border: 1px solid #fff;
+	background-color: #fff;	
 }
 
 .group {
-    font-weight: bold;
-    font-size: small;
+	padding: 2px 20px;
+    margin: 0.2em 0 0.2em 1em;
+    display: inline-block;
+	text-decoration: none;     
+	font-weight: bold; 
+	color: #e7e5e5;
+	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 
+	-webkit-transition: color 0.2s linear;  
+	-moz-transition: color 0.2s linear;  
+	-o-transition: color 0.2s linear;
+	border-radius: 1em; 
+	-webkit-border-radius: 1em; 
+	-moz-border-radius: 1em; 
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa&#888;); 
+	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); 
+	background: -moz-linear-gradient(top, #eee, #aaa); 
+	background-image: -o-linear-gradient(#eee,#aaa);
+	color: #444; 
+	border-top: solid 1px #fff; 
+
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);   
 }
 
 div.group:hover {
-    text-decoration:underline;
+	color: #fff;
+	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’); 
+	background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); 
+	background: -moz-linear-gradient(top, #cf2828, #981a1a); 
+	background-image: -o-linear-gradient(#cf2828,#981a1a);    
 }
 .contact {
     font-size: small;
@@ -306,6 +353,7 @@
 }
 
 .uniBox {
+    margin-top: 1em;
 	width: 100%;
 	height: 50px;
 	padding: 5px;