Mercurial > libervia-web

changeset 75:4b4c0b9e2533

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
browser side: CSS: redesigned dialog boxes, and contacts
author Adrien Vigneron <adrienvigneron@mailoo.org>
date Sat, 18 Jun 2011 15:13:19 +0200
parents 3df602cf700a
children 8f097c1551f3
files browser_side/panels.py public/libervia.css
diffstat 2 files changed, 72 insertions(+), 32 deletions(-) [+]
line wrap: on
line diff
--- a/browser_side/panels.py	Sat Jun 18 02:04:06 2011 +0200
+++ b/browser_side/panels.py	Sat Jun 18 15:13:19 2011 +0200
@@ -156,7 +156,7 @@
         edit.setText('@libervia.org')
         edit.setWidth('100%')
         _dialog = dialog.GroupSelector([label, edit], self.host.contact_panel.getGroups(), [], addContactCb)
-        _dialog.setHTML('<b>Adding contact</b>')
+        _dialog.setHTML('Adding contact')
         _dialog.show()
 
     def onUpdateContact(self):
@@ -179,7 +179,7 @@
         _selected_groups = self.host.contact_panel.getContactGroups(_jid)
         _dialog = dialog.GroupSelector([Label('Which contact do you want to update ?'), _contacts_list],
                                        self.host.contact_panel.getGroups(), _selected_groups, updateContactCb)
-        _dialog.setHTML('<b>Updating contact</b>')
+        _dialog.setHTML('Updating contact')
         _dialog.show()
 
     def onRemoveContact(self):
@@ -233,7 +233,7 @@
         button_panel.add(Button("Cancel", onCancel))
         _main_panel.add(button_panel)
         _dialog = DialogBox(centered=True)
-        _dialog.setHTML('<b>Group discussions</b>')
+        _dialog.setHTML('Group discussions')
         _dialog.setWidget(_main_panel)
         _dialog.show()
         
--- a/public/libervia.css	Sat Jun 18 02:04:06 2011 +0200
+++ b/public/libervia.css	Sat Jun 18 15:13:19 2011 +0200
@@ -114,7 +114,7 @@
     font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
     padding: 5px 5px 0 5px;	
     line-height: 100%;
-    box-shadow:0px 1px 4px #000
+    box-shadow: 0px 1px 4px #000;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
     border: 1px solid #ddd;
@@ -135,16 +135,15 @@
     color: #e7e5e5;
     padding: 3px 15px;
     /*display: block;*/
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
     border-radius: 1em;
     -webkit-border-radius: 1em;
     -moz-border-radius: 1em;
+    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;
 }
 
-
 .gwt-MenuBar-horizontal .gwt-MenuItem-selected {
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′);
     background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
@@ -215,9 +214,9 @@
 }
 
 .gwt-MenuBar tr:last-child td {
-    border-radius: 0 0 9px 9px;
-    -webkit-border-radius: 0 0 9px 9px;
-    -moz-border-radius: 0 0 9px 9px;
+    border-radius: 0 0 9px 9px !important;
+    -webkit-border-radius: 0 0 9px 9px !important;
+    -moz-border-radius: 0 0 9px 9px !important;
 }
 
 .menuLastPopup div tr:first-child td{
@@ -238,21 +237,50 @@
   margin-top: 20px;
 }
 .gwt-DialogBox {
-  border: 2px outset;
-  background-color: white;
+  padding: 10px;
+  font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
+  border: 1px solid #aaa;
+  background-color: #fff;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’);
+  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
+  background: -moz-linear-gradient(top, #fff, #ccc);
+  background-image: -o-linear-gradient(#fff,#ccc);
+  border-radius: 9px; 
+  -webkit-border-radius: 9px; 
+  -moz-border-radius: 9px;
+  box-shadow: 0px 1px 4px #000;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
 }
 
 .gwt-DialogBox .Caption {
-  background-color: #C3D9FF;
+  height: 20px;
+  font-size: 1.3em !important;
+  background-color: #cf2828;
+  background: #cf2828 !important;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#b01e1e’);
+  background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)) !important;
+  background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important;
+  background-image: -o-linear-gradient(#cf2828,#b01e1e);
+  color: #fff;
   padding: 3px;
-  margin: 2px;
+  margin: -10px;
+  margin-bottom: 5px;
   font-weight: bold;
   cursor: default;
   text-align: center;
+  border-radius: 7px 7px 0 0; 
+  -webkit-border-radius: 7px 7px 0 0; 
+  -moz-border-radius: 7px 7px 0 0;
 }
 
 .gwt-ListBox {
     width: 100%;
+    background-color: #fff;
+    padding: 3px;
+    margin: 5px 0 5px 0;
+    border: 1px solid #aaa;
+
 }
 
 /* Custom Dialogs */
@@ -283,11 +311,10 @@
 	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; 
+	height: 30px; 
+	border-radius: 10px 10px 0 0; 
+	-webkit-border-radius: 10px 10px 0 0; 
+	-moz-border-radius: 10px 10px 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; 
@@ -302,16 +329,13 @@
 }
 
 .group {
-	padding: 2px 20px;
-    margin: 0.2em 0 0.2em 1em;
-    display: inline-block;
+	padding: 2px 15px;
+   margin: 0.2em 0 0.2em 5px;
+   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; 
@@ -319,9 +343,7 @@
 	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; 
-
+	color: #444;
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);   
 }
 
@@ -331,18 +353,33 @@
 	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);    
+	background-image: -o-linear-gradient(#cf2828,#981a1a);
+	-webkit-transition: color 0.1s linear; 
+   -moz-transition: color 0.1s linear; 
+   -o-transition: color 0.1s linear;  
 }
 .contact {
-    font-size: small;
+	 font-family: Arial, Helvetica, sans-serif;
+    font-size: 0.8em;
+    margin-top: 3px;
+    padding: 3px 10px 3px 10px;
 }
 
 .contactConnected {
-    color: blue;
+    color: #3c7e0c;
+    font-weight: bold;
 }
 
 .selected {
-    background-color: yellow;
+	color: #fff;
+   background-color: #cf2828;
+   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);
+	border-radius: 1em; 
+	-webkit-border-radius: 1em; 
+	-moz-border-radius: 1em; 
 }
 
 /* UniBox & Status */
@@ -581,7 +618,10 @@
 /* Drag and drop */
 
 .dragover {
-    background: #8f8;
+    background: #cf2828;
+    border-radius: 1em;
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
 }
 
 /* Warning message */