Mercurial > libervia-web
diff public/libervia.css @ 82:bd575203d456
browser side: widgets CSS
author | Adrien Vigneron <adrienvigneron@mailoo.org> |
---|---|
date | Sun, 26 Jun 2011 03:02:10 +0200 |
parents | a40a12583ba4 |
children | a8f027738c16 |
line wrap: on
line diff
--- a/public/libervia.css Wed Jun 22 17:19:50 2011 +0200 +++ b/public/libervia.css Sun Jun 26 03:02:10 2011 +0200 @@ -98,6 +98,10 @@ /* CSS Reset END */ +body { + background: #fff url('media/libervia/worldmap_gray.jpg') repeat-x; +} + /* Misc Pyjamas stuff */ .menuContainer { @@ -326,12 +330,15 @@ } .groupList { font: normal 0.8em/1.4em Arial, Helvetica, sans-serif; - /*width: 200px;*/ - margin-top: 10px; + width: 100%; border: 1px solid #fff; background-color: #fff; } +.groupList tr:first-child td { + padding-top: 10px; +} + .group { padding: 2px 15px; margin: 0.2em 0 0.2em 5px; @@ -512,6 +519,101 @@ .registerPanel_content .red.button, .registerPanel_content .red.button:visited { background-color: #000; } .registerPanel_content .red.button:hover { background-color: #bc0000; } +/* Widgets */ + +.widgetsPanel td { + vertical-align: top; +} + +.widgetsPanel > table { + border-collapse: separate !important; + border-spacing: 7px; +} + +.widgetHeader { + margin: auto; + height: 30px; + /*border: 1px solid #ddd;*/ + 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=’#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); +} + +.widgetHeader_title { + color: #fff; + text-align: center; + z-index: 0; + margin-top: 5px; +} + +.widgetHeader_buttonsWrapper { + position: absolute; + top: 0; + height: 100%; + width: 100%; +} + +.widgetHeader_buttonGroup { + float: right; + z-index: 1; +} + +.widgetHeader_buttonGroup img { + background-color: transparent; + /*width: 25px;*/ + height: 22px; + padding: 0; + border-bottom: 1px solid #666; + border-left: 1px solid #666; + border-top: 0; + border-right: 0; + border-radius: 0 10px 0 0; + -webkit-border-radius: 0 10px 0 0; + -moz-border-radius: 0 10px 0 0; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#555͸, endColorstr=’#333’); + background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); + background: -moz-linear-gradient(top, #555, #333); + background-image: -o-linear-gradient(#555,#333); + z-index: 10; +} + +.widgetHeader_closeButton { + border-radius: 0 10px 0 0 !important; + -webkit-border-radius: 0 10px 0 0 !important; + -moz-border-radius: 0 10px 0 0 !important; + z-index: 50; +} + +.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; + z-index: 50; +} + +.widgetHeader_buttonGroup img:hover { + 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); + z-index: 50; +} + +.widgetBody { + border: 1px solid #ddd; + border-radius: 0 0 10px 10px; + -webkit-border-radius: 0 0 10px 10px; + -moz-border-radius: 0 0 10px 10px; + 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); +} + /* Microblog */ .microblogPanel { @@ -519,16 +621,6 @@ width: 95% !important; } -.mb_panel_header{ - text-align: center; - background-color: lightGray; - font-style: italic; - margin-top: 5px; - -moz-border-radius: 50px; - -webkit-border-radius: 50px; - border-radius: 50px; -} - .microblogEntry { text-align:center; @@ -629,10 +721,26 @@ /* Drag and drop */ .dragover { - background: #cf2828; - border-radius: 1em; - -webkit-border-radius: 1em; - -moz-border-radius: 1em; + background: #cf2828 !important; + border-radius: 1em !important; + -webkit-border-radius: 1em !important; + -moz-border-radius: 1em !important; +} + +.dragover .widgetHeader, .dragover .widgetBody, .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; } /* Warning message */