# HG changeset patch # User Adrien Vigneron # Date 1308402799 -7200 # Node ID 4b4c0b9e2533523374d63ec6aeab73582d4e0a37 # Parent 3df602cf700a42ea2093dd3ffc71c887bce8ede0 browser side: CSS: redesigned dialog boxes, and contacts diff -r 3df602cf700a -r 4b4c0b9e2533 browser_side/panels.py --- 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('Adding contact') + _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('Updating contact') + _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('Group discussions') + _dialog.setHTML('Group discussions') _dialog.setWidget(_main_panel) _dialog.show() diff -r 3df602cf700a -r 4b4c0b9e2533 public/libervia.css --- 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͸, 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͸, 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͸, 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 */