changeset 82:bd575203d456

browser side: widgets CSS
author Adrien Vigneron <adrienvigneron@mailoo.org>
date Sun, 26 Jun 2011 03:02:10 +0200
parents a40a12583ba4
children 68d360caeecb
files public/libervia.css
diffstat 1 files changed, 124 insertions(+), 16 deletions(-) [+]
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&#888;, 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&#888;, 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&#888;, 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&#888;, 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 */