From: the_mgt Date: Mon, 16 May 2011 13:20:04 +0000 (+0200) Subject: Created message.css, moved most message related css there, updated message look,... X-Git-Tag: v8.11~742 X-Git-Url: https://code.citadel.org/?p=citadel.git;a=commitdiff_plain;h=4fbf6c2082ad1d649622b741b8a3d1fde47357fd Created message.css, moved most message related css there, updated message look, they now have round-corners and dropshadow. 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 d02c15338..01e70b315 100644 --- 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 4db15abd5..26a7aa9e9 100644 --- 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 index 000000000..f71bb0b73 --- /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 600550415..58aa094e2 100644 --- 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 a92b5ae9e..e29f7b520 100644 --- 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 }