Mercurial > libervia-web
diff public/libervia.css @ 110:dfc02690deb4
browser side: CSS: header, unibox, tabs + drag'n' drop reworked
author | Adrien Vigneron <adrienvigneron@mailoo.org> |
---|---|
date | Wed, 29 Jun 2011 23:52:00 +0200 |
parents | c3fb3292f582 |
children | 5749e3970778 |
line wrap: on
line diff
--- a/public/libervia.css Wed Jun 29 20:24:09 2011 +0200 +++ b/public/libervia.css Wed Jun 29 23:52:00 2011 +0200 @@ -40,7 +40,6 @@ vertical-align: baseline; background: transparent; color: #444; - } ol, ul { list-style: none; } @@ -50,7 +49,6 @@ q:before, q:after { content: ''; content: none; - } :focus { outline: 0; } @@ -60,7 +58,6 @@ table { border-collapse: collapse; border-spacing: 0; - } /* pyjamas iframe hide */ @@ -99,13 +96,18 @@ /* CSS Reset END */ body { - background: #fff url('media/libervia/worldmap_gray.jpg'); + background-color: #fff; + font: normal 0.8em/1.5em Arial, Helvetica, sans-serif; +} + +.header { + background-color: #eee; } /* Misc Pyjamas stuff */ .menuContainer { - margin: 0 32px 0 20px; + margin: 0 32px 0 20px; } .gwt-MenuBar,.gwt-MenuBar-horizontal { @@ -115,7 +117,6 @@ width: 100%; height: 28px; margin: 0; - font: normal 0.8em/1.4em Arial, Helvetica, sans-serif; padding: 5px 5px 0 5px; line-height: 100%; box-shadow: 0px 1px 4px #000; @@ -208,10 +209,10 @@ .gwt-MenuBar .gwt-MenuItem-selected { background: #cf2828 !important; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#b01e1e’) !important; - 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) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#981a1a’) !important; + background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important; + background: -moz-linear-gradient(top, #cf2828, #981a1a) !important; + background-image: -o-linear-gradient(#cf2828,#981a1a) !important; color: #fff !important; -webkit-border-radius: 0 0 0 0; -moz-border-radius: 0 0 0 0; @@ -249,7 +250,6 @@ } .gwt-DialogBox { 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’); @@ -269,12 +269,12 @@ 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); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#981a1a’); + background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important; + background: -moz-linear-gradient(top, #cf2828, #981a1a) !important; + background-image: -o-linear-gradient(#cf2828,#981a1a); color: #fff; - padding: 3px; + padding: 3px 3px 4px 3px; margin: -10px; margin-bottom: 5px; font-weight: bold; @@ -304,16 +304,19 @@ margin: 10px 5px 10px 5px; color: #fff; font-weight: bold; - font: normal 1em/1.4em Arial, Helvetica, sans-serif; + font-size: 1em; border: none; + -webkit-transition: color 0.2s linear; + -moz-transition: color 0.2s linear; + -o-transition: color 0.2s linear; } .gwt-DialogBox .gwt-button:hover { background-color: #cf2828; - 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); - background-image: -o-linear-gradient(#cf2828,#b01e1e); + 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); color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.25); } @@ -328,9 +331,8 @@ -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); padding: 3px 5px 3px 5px; margin: 10px 5px 10px 5px; - color: #222; - font-weight: bold; - font: normal 1em/1.4em Arial, Helvetica, sans-serif; + color: #444; + font-size: 1em; border: none; } @@ -346,9 +348,8 @@ -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); padding: 3px 5px 3px 5px; margin: 10px 5px 10px 5px; - color: #222; - font-weight: bold; - font: normal 1em/1.4em Arial, Helvetica, sans-serif; + color: #444; + font-size: 1em; border: none; } @@ -375,19 +376,18 @@ div.contactBox { margin-left: 20px; + margin-top: 9px; } .contactTitle { color: #cf2828; - font-weight: bold; - font: normal 1.2em/1.4em Arial, Helvetica, sans-serif; + font-size: 1.7em; text-indent: 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); width: 200px; height: 30px; } .groupList { - font: normal 0.8em/1.4em Arial, Helvetica, sans-serif; width: 100%; } @@ -397,8 +397,8 @@ .group { padding: 2px 15px; - margin: 0.2em 0 0.2em 5px; - display: inline-block; + margin: 5px; + display: inline-block; text-decoration: none; font-weight: bold; color: #e7e5e5; @@ -413,9 +413,9 @@ background-image: -o-linear-gradient(#eee,#aaa); color: #444; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); - box-shadow:inset 0px 1px 1px #000; - -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 0px 1px 1px #000; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); } div.group:hover { @@ -431,8 +431,7 @@ -o-transition: color 0.1s linear; } .contact { - font-family: Arial, Helvetica, sans-serif; - font-size: 0.8em; + font-size: 1em; margin-top: 3px; padding: 3px 10px 3px 10px; } @@ -451,28 +450,24 @@ background-image: -o-linear-gradient(#cf2828,#981a1a); border-radius: 1em 1em 1em 1em; -webkit-border-radius: 1em 1em 1em 1em; - -moz-border-radius: 1em 1em 1em 1em; + -moz-border-radius: 1em 1em 1em 1em; + -webkit-transition: color 0.2s linear; + -moz-transition: color 0.2s linear; + -o-transition: color 0.2s linear; } /* UniBox & Status */ .uniBoxPanel { - margin: auto; - width: 80%; + margin: 15px 22px 0 22px; } .uniBox { - margin-top: 1em; - width: 100%; - height: 50px; + height: 45px; padding: 5px; - font-family: Arial, Helvetica, sans-serif; border: 1px solid #bbb; color: #444; - background: #fff url('media/libervia/unibox.png') top right no-repeat; - border-radius: 9px 9px 9px 9px; - -webkit-border-radius: 9px 9px 9px 9px; - -moz-border-radius: 9px 9px 9px 9px; + background: #fff url('media/libervia/unibox_2.png') top right no-repeat; box-shadow:inset 0 0 10px #ddd; -webkit-box-shadow:inset 0 0 10px #ddd; -moz-box-shadow:inset 0 0 10px #ddd; @@ -481,14 +476,19 @@ .statusPanel { margin: auto; text-align: center; - width: 80%; - padding-top: 10px; + width: 100%; + padding-top: 5px; min-height: 30px; text-shadow: 0 -1px 1px rgba(255,255,255,0.25); + font-size: 1.2em; + background-color: #eee; + border-bottom: 1px solid #ddd; } .status { font-style: italic; + font-weight: bold; + color: #666; } /* RegisterBox */ @@ -501,12 +501,15 @@ .registerPanel_main div, .registerPanel_main button { color: #fff; - font-family: Verdana, sans-serif; text-decoration: none; } .registerPanel_main{ height: 100%; + border: 5px solid #222; + box-shadow: 0px 1px 4px #000; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .registerPanel_tabs .gwt-Label { @@ -538,7 +541,7 @@ } .registerPanel_content div { - font-size: 0.8em; + font-size: 1em; margin-left: 10px; margin-top: 15px; font-style: bold; @@ -550,7 +553,7 @@ line-height: 25px; width: 200px; text-indent: 11px; - text-align:-webkit-center; + background: #000; color: #aaa; border: 1px solid #222; @@ -585,7 +588,7 @@ .registerPanel_content .button:hover { background-color: #111; color: #fff; } .registerPanel_content .button:active { top: 1px; } -.registerPanel_content .button, .registerPanel_content .button:visited { font-size: 14px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); padding: 7px 10px 8px; } +.registerPanel_content .button, .registerPanel_content .button:visited { font-size: 1em; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); padding: 7px 10px 8px; } .registerPanel_content .red.button, .registerPanel_content .red.button:visited { background-color: #000; } .registerPanel_content .red.button:hover { background-color: #bc0000; } @@ -602,7 +605,7 @@ .widgetHeader { margin: auto; - height: 30px; + height: 25px; /*border: 1px solid #ddd;*/ border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; @@ -611,13 +614,15 @@ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444͸, endColorstr=’#222’); background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); background: -moz-linear-gradient(top, #444, #222); - background-image: -o-linear-gradient(#444,#222); + background-image: -o-linear-gradient(#444,#222); } .widgetHeader_title { color: #fff; - text-align: center; - margin-top: 5px; + font-weight: bold; + text-align: left; + text-indent: 15px; + margin-top: 4px; } .widgetHeader_buttonsWrapper { @@ -633,13 +638,12 @@ .widgetHeader_buttonGroup img { background-color: transparent; - /*width: 25px;*/ - height: 22px; - padding: 0; - border-bottom: 1px solid #666; + width: 25px; + height: 20px; + padding-top: 2px; + padding-bottom: 3px; border-left: 1px solid #666; - border-top: 0; - border-right: 1px solid #666; + border-top: 0; border-radius: 0 10px 0 0; -webkit-border-radius: 0 10px 0 0; -moz-border-radius: 0 10px 0 0; @@ -656,30 +660,29 @@ } .widgetHeader_settingButton { - border-radius: 0 0 0 10px !important; - -webkit-border-radius: 0 0 0 10px !important; - -moz-border-radius: 0 0 0 10px !important; + border-radius: 0 0 0 0 !important; + -webkit-border-radius: 0 0 0 0 !important; + -moz-border-radius: 0 0 0 0 !important; } .widgetHeader_buttonGroup img:hover { background-color: #cf2828; - 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); - background-image: -o-linear-gradient(#cf2828,#b01e1e); + 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); } .widgetBody { border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; - 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); + background-color: #fff; min-width: 200px; min-height: 150px; + box-shadow:inset 0px 0 1px #444; + -webkit-box-shadow:inset 0 0 1px #444; + -moz-box-shadow:inset 0 0 1px #444; } /* BorderWidgets */ @@ -740,12 +743,11 @@ .chatContent { overflow: auto; + padding: 5px 15px 5px 15px; } .chatText { - /* font-size: smaller; */ - font: normal 0.8em/1.4em Arial, Helvetica, sans-serif; - margin-top: 5px; + margin-top: 7px; } .chatTextInfo { @@ -770,6 +772,8 @@ border-radius: 15px 0 0 15px; background-color: #eee; color: #888; + border: 1px solid #ddd; + border-right: none; } .chat_text_nick { @@ -778,20 +782,28 @@ -moz-border-radius: 0 15px 15px 0; -webkit-border-radius: 10 15px 15px 0; border-radius: 0 15px 15px 0; - background-color: #ddd; - color: #555; + background-color: #eee; + color: #b01e1e; + border: 1px solid #ddd; + border-left: none; } .chat_text_mymess { - color: blue; + color: #006600; } .occupant { - padding-right: 15px; + margin-top: 10px; + margin-right: 4px; + min-width: 120px; + padding: 5px 15px 5px 15px; + font-weight: bold; + background-color: #eee; + border: 1px solid #ddd; } .occupantsList { - border-right: 1px solid lightGray; + border-right: 2px dotted #ddd; margin-left: 5px; margin-right: 10px; height: 100%; @@ -811,54 +823,76 @@ /* Drag and drop */ .dragover { - background: #cf2828 !important; - border-radius: 1em 1em 1em 1em !important; - -webkit-border-radius: 1em 1em 1em 1em !important; - -moz-border-radius: 1em 1em 1em 1em !important; + background: #ffb2b2; + border-radius: 1em 1em 1em 1em; + -webkit-border-radius: 1em 1em 1em 1em; + -moz-border-radius: 1em 1em 1em 1em; + border: 2px dotted #cf2828; } .dragover .widgetHeader, .dragover .widgetBody, .dragover .widgetBody span, .dragover .widgetHeader img { - background: #cf2828 !important; -} - -.dragover.widgetHeader { - border-radius: 1em 1em 0 0 !important; - -webkit-border-radius: 1em 1em 0 0 !important; - -moz-border-radius: 1em 1em 0 0 !important; -} - -.dragover.widgetBody { - border-radius: 0 0 1em 1em !important; - -webkit-border-radius: 0 0 1em 1em !important; - -moz-border-radius: 0 0 1em 1em !important; + background: #eee; + border-radius: 0 0 0 0; + -webkit-border-radius: 0 0 0 0; + -moz-border-radius: 0 0 0 0; } /* Warning message */ .warningPopup { + font-size: 1em; width: 100%; + height: 26px; text-align: center; - background-color: white; - padding: 4px 0; + padding: 5px 0; + border-bottom: 1px solid #444; + 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); + } .warningTarget { font-weight: bold; + } .targetPublic { - background-color: red; + 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); } .targetGroup { - background-color: #00FFFB; + color: #fff; + background-color: #68ba0f; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’68ba0f′, endColorstr=’#40700d’); + background: -webkit-gradient(linear, left top, left bottom, from(#68ba0f), to(#40700d)); + background: -moz-linear-gradient(top, #68ba0f, #40700d); + background-image: -o-linear-gradient(#68ba0f,#40700d); } .targetOne2One { - background-color: #72FF06; + color: #fff; + background-color: #222; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’); + background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222)); + background: -moz-linear-gradient(top, #444444, #222222); + background-image: -o-linear-gradient(#444444,#222222); } .targetStatus { + color: #666; + 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); } /* Tab panel */ @@ -877,9 +911,9 @@ position: fixed; z-index: 10; bottom: 0; - font: normal 0.8em/1.4em Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; + border-bottom: 3px solid #a01c1c; } .gwt-TabBar .gwt-TabBarFirst { @@ -889,14 +923,12 @@ .gwt-TabBar .gwt-TabBarRest { } -.mainTabPanel .gwt-TabBar { - margin-left: 20px; +.mainTabPanel .gwt-TabBar {; } .mainTabPanel .gwt-TabBar .gwt-TabBarItem { cursor: pointer; margin-right: 5px; - } .mainTabPanel .gwt-TabBarItem div { @@ -913,9 +945,9 @@ box-shadow: 0px 1px 4px #000; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - padding: 3px 15px 3px 15px; - border-radius: 1em 1em 1em 1em; - -webkit-border-radius: 1em 1em 1em 1em; + padding: 4px 15px 4px 15px; + border-radius: 1em 1em 0 0; + -webkit-border-radius: 1em 1em 0 0; -moz-border-radius: 1em 1em 0 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); } @@ -923,16 +955,16 @@ .mainTabPanel .gwt-TabBarItem-selected { color: #fff; background-color: #cf2828; - 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); - background-image: -o-linear-gradient(#cf2828,#b01e1e); + 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); box-shadow: 0px 1px 4px #000; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - padding: 3px 15px 3px 15px; - border-radius: 1em 1em 1em 1em; - -webkit-border-radius: 1em 1em 1em 1em; + padding: 4px 15px 4px 15px; + border-radius: 1em 1em 0 0; + -webkit-border-radius: 1em 1em 0 0; -moz-border-radius: 1em 1em 0 0; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } @@ -940,18 +972,18 @@ .mainTabPanel div.gwt-TabBarItem:hover { color: #fff; background-color: #cf2828; - 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); - background-image: -o-linear-gradient(#cf2828,#b01e1e); + 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); box-shadow: 0px 1px 4px #000; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - padding: 3px 15px 3px 15px; - border-radius: 1em 1em 1em 1em; - -webkit-border-radius: 1em 1em 1em 1em; + padding: 4px 15px 4px 15px; + border-radius: 1em 1em 0 0; + -webkit-border-radius: 1em 1em 0 0; -moz-border-radius: 1em 1em 0 0; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } .mainTabPanel .gwt-TabBar .gwt-TabBarItem-selected { @@ -966,10 +998,10 @@ * (messages entered in unibox will be sent to this widget) */ background-color: #cf2828; - 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); - background-image: -o-linear-gradient(#cf2828,#b01e1e); + 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); } .infoFrame {