Created message.css, moved most message related css there, updated message look,...

Message header looks cleaner now, maybe we need to talk about proportions of username, date and edit buttons.
Corrected #content starting position (streamlined it with yesterdays banner shortening).
Added a little space between navbar/banner and actual content at the top.
Moved morepromt style to content.css, adapted moreprompt colors.
Removed unneeded stuff from iconbar which i added for testing reasons yesterday.
Removed an empty line from navbar.css

Sorry for the huge commit, I did it in the wrong way, edited message stuff first and later did the rest...
Other way around would make cherry picking simpler, but I think it looks damn good now. ;)
Checked with Opera11 and FF3.6, looks and works consistent.
IE6 login seems broken (at least with iexplorer running in wine...)

diff --git a/webcit/static/styles/content.css b/webcit/static/styles/content.css
index d02c15338475788a232d098527a0ab3b6d582d7b..01e70b3155e996cb7548e12afcac21f33d861741 100644 (file)
--- a/webcit/static/styles/content.css
+++ b/webcit/static/styles/content.css
@@ -1,13 +1,14 @@
 #content {
        position: fixed;
-       top: 120px;             /* when changing this, also change #banner and #iconbar */
+       top: 100px;             /* when changing this, also change #banner and #iconbar */
        left: 16%;              /* when changing this, also change #banner and #iconbar */
        bottom: 0;
        width: 84%;             /* when changing this, also change #banner and #iconbar */
        background: #F3F6F2;
        color: #000;
        z-index: 2;
-       overflow-y: auto;                               
+       overflow-y: auto;
+       padding-top: 0.5em;
 }
 
 .boxcontent table {
@@ -36,3 +37,33 @@
        text-align: center;
 }
 
+.moreprompt {
+       margin: 0 1em;
+       text-align: center;
+       font-size: small;
+       background-color: #4d555c;
+       color: #ddd;
+       border: 2px solid #4d555c; /*in order to make the hover effect pop out nice */
+       /*border-radius: 5px;
+       -webkit-border-radius: 5px;
+       -moz-border-radius: 5px; */
+}
+ 
+.moreprompt_link {
+       color: #ddd;
+       font-weight: bold;
+}
+ 
+.moreprompt_link:hover {
+       background-color: #ddd;
+       color: #4d555c;
+       border: 0px solid #5c646b;
+       border-radius: 5px;
+       -webkit-border-radius: 5px;
+       -moz-border-radius: 5px;
+}
+
+/* a > div.moreprompt { 
+       border: none;
+       border-radius: 0; } */
+

diff --git a/webcit/static/styles/iconbar.css b/webcit/static/styles/iconbar.css
index 4db15abd5a1ace83544cb40857639244b664fab1..26a7aa9e96e55817a59f72350a5d3698d25cdd26 100644 (file)
--- a/webcit/static/styles/iconbar.css
+++ b/webcit/static/styles/iconbar.css
@@ -47,7 +47,7 @@
 
 li.ib_button a img { border: none; } /* FF draws borders around the expand/collapse buttons */
 
-.ib_button {
+.ib_button, .floor {
        margin: 3px;
        padding: 0;
        display: block;
@@ -73,6 +73,10 @@ li.ib_button a img { border: none; } /* FF draws borders around the expand/colla
 
 #iconbar #button { width: 100% }
 
+#button li:hover, #ib_logoff:hover {
+       background-color: #5c646b;
+}
+
 #online_users {
        display: none; /* Hide by default */
        border: 0;
@@ -127,9 +131,3 @@ li.ib_button a img { border: none; } /* FF draws borders around the expand/colla
         background-color: #5c646b;
 }
 
-#ib_users {
-       -khtml-border-radius: 5px;
-       -moz-border-radius: 5px;
-       border-radius: 5px;
-       behavior: url(border-radius.htc);
-}

diff --git a/webcit/static/styles/message.css b/webcit/static/styles/message.css
new file mode 100644 (file)
index 0000000..f71bb0b
--- /dev/null
+++ b/webcit/static/styles/message.css
@@ -0,0 +1,74 @@
+.message {
+       background-color: #deded0;
+       margin: 1em;
+       border: 1px solid #5C646B;
+       border-radius: 8px;
+       -webkit-border-radius: 8px;
+       -moz-border-radius: 8px; 
+       -webkit-box-shadow: #666 0px 1px 2px;
+       -moz-box-shadow: #666 0px 2px 3px;
+       box-shadow: #666 0px 2px 3px;
+       behavior: url(/static/styles/PIE.htc);
+}
+
+.message_header {
+       font-size: x-small;
+       padding: 0.5em;
+        border-top: 1px solid transparent;
+        border-radius: 8px 8px 0 0;
+        -webkit-border-radius: 8px 8px 0 0;
+        -moz-border-radius: 8px 8px 0 0; 
+        behavior: url(/static/styles/PIE.htc);
+}
+
+.message_content {
+       background-color: #fff;
+       padding: 0.5em;
+       clear: both;
+       border-bottom: 1px solid transparent;
+       border-radius: 0 0 8px 8px;
+       -webkit-border-radius: 0 0 8px 8px;
+       -moz-border-radius: 0 0 8px 8px; 
+       behavior: url(/static/styles/PIE.htc);
+}
+
+
+.message_subject {
+       font-size: medium;
+       font-style: italic;
+       float: left;
+}
+
+.message_header span, .message_header a { font-weight: bold; }
+
+.message_header p {
+        margin: 3px 0;
+        padding: 0;
+}
+
+
+.message_content > div > div { text-align: justify !important }
+
+.message form div label, .entmsg form div label {
+       display: block;
+       float: left;
+       margin: 0.3em;
+       width: 9em;
+       text-align: right;
+}
+ 
+.message form div input, .message form div select, .entmsg form div input, .entmsg form div select {
+       margin: 0.3em
+}
+
+.msgbuttons {
+       float: right;
+       font-size: 80%;
+       line-height: 2em;
+}
+
+.msgbuttons a {
+       font-size: x-small;
+       display: inline-block;
+       margin-left: 0.3em;
+}

diff --git a/webcit/static/styles/navbar.css b/webcit/static/styles/navbar.css
index 600550415a25283bbc4b16750bbccb2f5a7c17fc..58aa094e22ec3ecf719124e2a48408012db03c30 100644 (file)
--- a/webcit/static/styles/navbar.css
+++ b/webcit/static/styles/navbar.css
@@ -37,7 +37,6 @@
         border-radius: 5px;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
-
 }
 
 #navbar ul li img {

diff --git a/webcit/static/styles/webcit.css b/webcit/static/styles/webcit.css
index a92b5ae9e21e43eb9169723d8f58a99038ea19e5..e29f7b5200c8614bc7ecf7a0f834ed836f6737b9 100644 (file)
--- a/webcit/static/styles/webcit.css
+++ b/webcit/static/styles/webcit.css
@@ -12,6 +12,7 @@
 @import url("navbar.css");
 @import url("content.css");
 @import url("box.css");
+@import url("message.css");
 @import url("modal.css");
 
 @media print {
@@ -29,7 +30,7 @@ html, body {
 
 .address_book_popup_title { font-size: 130% }
 
-#button, #content .button_link a, input#delbutton,.attachfile,.logbuttons input,.buttons input, .buttons a, .customize, .menubar_link, .roomlist_floor, .ib_roomlist_floor, .roomlist_new, .ib_roomlist_new, .roomlist_old, .ib_roomlist_old, #banner ul.room_actions li, .selector_top, .selector_bottom, .banner .infos,li.search,li.view, .room_actions form select option, .selectbox, .message_header, ul.adminitems li span, #message_list tr > td {
+#button, #content .button_link a, input#delbutton,.attachfile,.logbuttons input,.buttons input, .buttons a, .customize, .menubar_link, .roomlist_floor, .ib_roomlist_floor, .roomlist_new, .ib_roomlist_new, .roomlist_old, .ib_roomlist_old, #banner ul.room_actions li, .selector_top, .selector_bottom, .banner .infos,li.search,li.view, .room_actions form select option, .selectbox, ul.adminitems li span, #message_list tr > td {
        font-size: 100%;
 }
 
@@ -51,12 +52,12 @@ body {
        background-color: #69aaff !important;
 }
 
-.service form div,table.altern .odd, #message_list, .message_content, #roomlist_div,.editednode,.mailbox_summary, .auth_validate, .event_background, .calendar_background, .calendar_view_background, .graphics_background, .messages_background, .paging_background, .preferences_background, .roomops_background, .sieve_background, .siteconfig_background, .smtpqueue_background, .tabs_background, .useredit_background, .userlist_background, .wiki_history_background, .wiki_pagelist_background, .downloads_background, .vcard_edit_background, div.auto_complete, div.auto_complete ul, #summary_view {
+.service form div,table.altern .odd, #message_list, #roomlist_div,.editednode,.mailbox_summary, .auth_validate, .event_background, .calendar_background, .calendar_view_background, .graphics_background, .messages_background, .paging_background, .preferences_background, .roomops_background, .sieve_background, .siteconfig_background, .smtpqueue_background, .tabs_background, .useredit_background, .userlist_background, .wiki_history_background, .wiki_pagelist_background, .downloads_background, .vcard_edit_background, div.auto_complete, div.auto_complete ul, #summary_view {
        background-color: #FFF;
        color: #000;
 }
 
-#message_list_hdr table, #resize_msglist, .message, .entmsg, .message_header, .vcard_edit_background_alt,.roomops_background_alt {
+#message_list_hdr table, #resize_msglist, .entmsg, .vcard_edit_background_alt,.roomops_background_alt {
        background-color: #CCC;
 }
 
@@ -107,7 +108,7 @@ body {
        height: 3px;
 }
 
-.message, .entmsg {
+.entmsg {
        border: 1px outset #999;
        clear: both;
        margin: 1%;
@@ -120,11 +121,6 @@ body {
        width: 98%;
 }
 
-.message_header .message_subject {
-       font-style: italic;
-       float: left;    
-}
-
 .adminlist { list-style: none }
 
 .customize {
@@ -445,29 +441,10 @@ body {
        text-align: center;
 }
 
-.moreprompt {
-       text-align: center;
-       font-size: 100%;
-       background-color: #004E79;
-       color: #dddddd;
-}
-
-.moreprompt_link {
-       color: #dddddd;
-       font-weight: bold;
-}
-
-.moreprompt_link:hover {
-       background-color: #3E65AF;
-       color: #3E65AF;
-}
-
 #validate { text-align: center }
 
 #iconbar, #banner, #content, #message_list_hdr, #message_list, #preview_pane  { text-align: left }
 
-.message_content > div > div { text-align: justify !important }
-
 /* Please avoid setting heights for any of the mailbox view elements (except summary_view
  * and resize). In particular, do NOT set any for message_list_hdr as its not good feng shui
  */
@@ -595,11 +572,6 @@ body {
        padding: 2px;
 }
 
-.message_header p {
-       margin: 2px 0 2px 0;
-       padding: 0 0 2px 0;
-}
-
 .button_link a, .attachfile, .logbuttons input,.buttons input .logbutton {
        margin: 3px;
        padding: 2px 4px 2px 4px;
@@ -658,32 +630,8 @@ input#delbutton {
        clear: both;
 }
 
-.msgbuttons {
-       float: right;
-       padding: 2px;
-       font-size: 80%;
-}
-
 .buttons a { text-align: center }
 
-.message_content {
-       margin: 0;
-       padding: 0.3em;
-       clear: both;
-}
-
-.message form div label, .entmsg form div label {
-       display: block;
-       float: left;
-       margin: 0.3em;
-       width: 9em;
-       text-align: right;
-}
-
-.message form div input, .message form div select, .entmsg form div input, .entmsg form div select {
-       margin: 0.3em
-}
-
 .imgedit {
        vertical-align: middle
 }