* Room info popup now uses Scriptactulous appear and fade effects

[citadel.git] / webcit / static / webcit.css

diff --git a/webcit/static/webcit.css b/webcit/static/webcit.css
index 7a109bfde8821c2049f712d20ac37a66f115d021..ecb79e36af36594bc3b8731b89e6a4ddafd48f03 100644 (file)
--- a/webcit/static/webcit.css
+++ b/webcit/static/webcit.css
@@ -35,6 +35,18 @@ body {
        background: #ffffee;
 }
 
+.logo, .logo_citadel {
+        display: block;
+        text-align: center;
+        border-bottom: 1px solid #aaaaaa;
+        margin: 0;
+        padding: 0;
+}
+
+.logo_citadel a, .logo_citadel img {
+        border: none;
+}
+
 #banner {
        position:fixed;
        display:block;
@@ -58,7 +70,7 @@ body {
 
 #banner .room_banner {
         float: left;
-        width: 58%;
+        width: 48%;
 }
 
 .room_banner img {
@@ -77,17 +89,39 @@ body {
         padding: 2px;
 }
 
-.room_banner div {
+.room_banner .infos {
         font-size: 8pt;
-        color: #FFFFEE;
+       color: #FFFFEE;
         text-align: center;
-        margin: 0;
         padding: 2px;
+       cursor: help;
+}
+
+#room_infos {
+        position: absolute;
+        top: 0px;
+        left: 50%;
+        width: 45%;
+        padding: 11px;
+        margin: 0px;
+        z-index: 100;
+        color: #666;
+        background: white;
+}
+
+#room_infos .close_infos {
+       cursor: pointer;
+        font-size: 8pt;
+       color: black;
+        text-align: right;
+        padding: 2px;
+       margin-top: 5px;
 }
 
 #banner ul {
         float: right;
-        width: 40%;
+        text-align: right;
+        width: 48%;
         margin: 0;
         padding: 0;
 }
@@ -98,6 +132,7 @@ body {
         list-style: none;
         margin: 0;
         padding: 2px;
+        white-space: nowrap;
 }
 
 li.search {
@@ -112,6 +147,11 @@ li.view {
         color: #FFFFFF;
 }
 
+li.search form, li.view form {
+       margin: 0;
+       padding: 0;
+}
+
 li.nummsgs {
         font-size: 10pt;
         color: #DDDDCC;
@@ -134,6 +174,8 @@ li.start_page {
        width: 95%;
         margin: 0;
         padding: 0;
+        white-space: nowrap;
+        text-align: left;
 }
 
 #navbar ul li {
@@ -143,6 +185,7 @@ li.start_page {
        margin-right: 5px;
        margin-bottom:0 ;
        margin-left: 20px;
+        white-space: nowrap;
 }
 
 #navbar ul li img {
@@ -168,10 +211,10 @@ li.start_page {
 #content {
        position:fixed;
        display:block;
-       top: 15%;
+       top: 16%;
        left: 15%;
        width: 85%;
-       height: 85%;
+       height: 84%;
        overflow: auto;
        /* overflow-x: hidden; */
 }
@@ -179,10 +222,10 @@ li.start_page {
 * html #content {
        position:absolute;
        display:block;
-       top: 15%;
+       top: 16%;
        left: 15%;
        width: 85%;
-       height: 85%;
+       height: 84%;
        overflow: auto;
        /* overflow-x: hidden; */
 }
@@ -190,7 +233,7 @@ li.start_page {
 #message_list_hdr {
        position:fixed;
        display:block;
-       top: 15%;
+       top: 16%;
        left: 15%;
        width: 85%;
        height: 5%;
@@ -200,7 +243,7 @@ li.start_page {
 * html #message_list_hdr {
        position:absolute;
        display:block;
-       top: 15%;
+       top: 16%;
        left: 15%;
        width: 85%;
        height: 5%;
@@ -210,7 +253,7 @@ li.start_page {
 #message_list {
        position:fixed;
        display:block;
-       top: 20%;
+       top: 21%;
        left: 15%;
        width: 85%;
        height: 20%;
@@ -221,7 +264,7 @@ li.start_page {
 * html #message_list {
        position:absolute;
        display:block;
-       top: 20%;
+       top: 21%;
        left: 15%;
        width: 85%;
        height: 20%;
@@ -232,7 +275,7 @@ li.start_page {
 #resize_msglist {
        position:fixed;
        display:block;
-       top: 40%;
+       top: 41%;
        left: 15%;
        width: 85%;
        height: 1%;
@@ -243,7 +286,7 @@ li.start_page {
 * html #resize_msglist {
        position:absolute;
        display:block;
-       top: 40%;
+       top: 41%;
        left: 15%;
        width: 85%;
        height: 1%;
@@ -254,20 +297,20 @@ li.start_page {
 #preview_pane {
        position:fixed;
        display:block;
-       top: 41%;
+       top: 42%;
        left: 15%;
        width: 85%;
-       height: 59%;
+       height: 58%;
        overflow: auto;
 }
 
 * html #preview_pane {
        position:absolute;
        display:block;
-       top: 41%;
+       top: 42%;
        left: 15%;
        width: 85%;
-       height: 59%;
+       height: 58%;
        overflow: auto;
 }
 
@@ -279,25 +322,24 @@ li.start_page {
 
 #button {
        width: 100%;
-       padding: 0 0 1em 0;
-       margin-bottom: 1em;
        background-color: #ffffee;
        color: #aaaaaa;
        font-size: 8pt;
-}
-
-#button ul {
        list-style: none;
        margin: 0;
        padding: 0;
        border: none;
 }
 
-#button li {
+#button li, #button li.switch {
        border-bottom: 1px solid #aaaaaa;
        margin: 0;
 }
 
+#button li.switch {
+       text-align: center;
+}
+
 #button img {
        vertical-align: middle;
        padding-left: 2px;
@@ -689,7 +731,7 @@ div.auto_complete ul strong.highlight {
         background-color: #ffffff;
 }
 
-.smtpqueue_background, .tabs_background, .useredit_background, .userlist_background, .vcard_edit_background, .who_background   {
+.smtpqueue_background, .tabs_background, .useredit_background, .userlist_background, .downloads_background, .vcard_edit_background, .who_background   {
         border: 0;
         width: 100%;
         background-color: #ffffff;
@@ -707,7 +749,7 @@ div.auto_complete ul strong.highlight {
         background-color: #444455;
 }
 
-.smtpqueue_banner, .summary_banner, .useredit_banner, .userlist_banner, .vcard_edit_banner, .who_banner, .room_banner   {
+.smtpqueue_banner, .summary_banner, .useredit_banner, .userlist_banner, .downloads_banner, .vcard_edit_banner, .who_banner, .room_banner   {
         border: 0;
         width: 100%;
         background-color: #444455;
@@ -745,37 +787,45 @@ div.auto_complete ul strong.highlight {
 }
 
 .login_message, .login_hello {
+        position: relative;
         margin-left: auto;
         margin-right: auto;
         width: 80%;
         text-align: center;
 }
 
+.login_image {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+}
+
 .login_message {
        color: red;
        font-weight: bold;
        font-size: 16px;
 }
 
-
-.login_form {
+#login_form {
+        position: relative;
         display: block;
         margin-top: 20px;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 20px;
         padding: 6px;
-        width: 290px;
+        width: 300px;
         background-color: #DDDDDD;
 }
 
-.login_form input, .login_form label, .login_form select {
+#login_form input, #login_form label, #login_form select {
         display: block;
         float: left;
         margin: 6px;
 }
 
-.login_form label {
+#login_form label {
         width: 130px;
         text-align: left;
 }
@@ -785,16 +835,16 @@ div.auto_complete ul strong.highlight {
         text-align: left;
 }
 
-.login_form br {
+#login_form br {
         clear: left;
 }
 
-.login_form .logbuttons {
+#login_form .logbuttons {
         margin-left: auto;
         margin-right: auto;
 }
 
-.login_form .logbutton {
+#login_form .logbutton {
        width: auto;
         text-align: center;
 }
@@ -808,3 +858,25 @@ div.auto_complete ul strong.highlight {
         text-align: left;
 }
 
+#address_book_popup {
+        position: absolute;
+        top: 100px;
+        left: 25%;
+        width: 320px;
+       height: 320px;
+        padding: 11px;
+        margin: 0px;
+        z-index: 100;
+        color: #666;
+        background: white;
+}
+
+#address_book_popup .close_popup {
+       cursor: pointer;
+        font-size: 8pt;
+       color: black;
+        text-align: right;
+        padding: 2px;
+       margin-top: 5px;
+}
+