/** * EGroupware: CSS with less preprocessor * * Mail * * Please do NOT change app.css directly, instead change app.less and compile it! * * @link http://www.egroupware.org * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @author Stefan Reinhard * @package mail */ @import (reference) "../../../pixelegg/less/layout_definitions.less"; @import (reference) "../../../pixelegg/less/definitions.less"; @import (reference) "../../../pixelegg/less/def_mobile.less"; @import (less) "../default/app.css"; #popupMainDiv{ padding: 5px; .et2_grid{ tr{ td{ padding: 5px 0; } } } } /*############################################## # # # # # # # # # # # # # # # # # # # # # # # iframe # # # # # # # # # # # # # # # # # # # ############################################## */ /*Border around iframe*/ iframe#mail-display_mailDisplayBodySrc{ height: 99%; /*border: 4px solid yellow;*/ } /*Border around iframe*/ .mailDisplayContainer{ border: 0px; } body { background-color: white; } #mail-index { /* Keeps the scrollbar in the window in chrome */ margin-right: -10px; // Box mit Header und Liste div#mail-index_nm { // Header div.nextmatch_header { // Filter div.filters { // Fläche select {margin-top: 9px;} } // Ende Filter } // Ende Header // Bilder in den Listen tr.mail td img { max-height: 50px; .box_shadow_none; .border_none; } tr.mail div span {.box_shadow_none;} } // Ende: Box mit Header und Liste div.splitter-bar { border-right: 0; border-top: 0; border-bottom: 0; margin-left: 4px; } div.splitter-bar-horizontal { border-top:1px solid #B4B4B4; border-left:0; } // Ansicht der Emails div#mail-index_mailPreview { margin: 0; // From div#mail-index_mailPreviewHeadersFrom { width: 50%; } // An div#mail-index_mailPreviewHeadersTo { width: 50%; } // Date div#mail-index_mailPreviewHeadersDate { position: absolute; right: 0px; margin: 3px 5px 0 0; } // Subject div#mail-index_mailPreviewHeadersSubject { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } div#mail-index_mailPreviewHeadersSubject > span { white-space: nowrap; } } // Ende: Ansicht der Emails } // iframe /*############################################## # # # # # # # # # # # # # # # # # # # # # # Side # # # bar # # # # # # # # # # # # # # # # # ############################################## */ .egw_fw_ui_category_content { // Mail Liste der Postfächer span#mail-tree_target { max-height: 50%; } .dtree { .basefontfamily; } // color - selected tree item .selectedTreeRow, .selectedTreeRow_lor {background-color: @color_selected_row; color: @gray_90;text-decoration: none;} .standartTreeRow_lor {background-color: @color_hover_row; color: @gray_90;text-decoration: none;} } // Ende Sidebox /* ################################################################################## * E-Mail Dialog "Compose" * * ################################################################################## */ /*########################################### # # # # ############################################# # # # # # # # # # # # dialog # # # # # ############################################# # # # buttons # # # # # ##############################################*/ #mail-compose_mail_plaintext {white-space: pre-wrap !important} #mail-compose { padding: 5px; max-height: 99%; // ################################## // Identity .mailComposeHeaders:first-child { /*background-color: @gray-0;*/ /*.gradient_thead;*/ } .mailComposeBodySection { margin-top: -4px; } // ################################## // Toolbar .et2_toolbar button.toolbar_toggled { &:hover{ background-color: white !important; } } #mail-compose_composeToolbar { // Senden Button button#composeToolbar-send { } button#composeToolbar-to_tracker, button#composeToolbar-disposition { &:hover{background-color: @color_hover_row;box-shadow: none;} &:not(.toolbar_toggled){filter: grayscale(1) contrast(0.9999) opacity(0.9);} } button#composeToolbar-to_calendar, button#composeToolbar-to_infolog { &:hover{background-color: @color_hover_row;box-shadow: none;} &:not(.toolbar_toggled){filter: grayscale(1) contrast(0.9999) opacity(0.7);} } } // Toolbar Ende table.et2_grid {display: inline-block;} /*// ###############################################################################*/ /*// Mail Header*/ tr.mailComposeHeaders { border-bottom: 1px solid #c1c1c0; } .mailComposeHeaders,.mailComposeHeadersSection { margin: 2px 0; width: 98%; span { text-align: right; padding-right: 5px; } span.ms-close-btn, span.ms-edit-btn, span.ms-check-btn { padding-right: 0px; } div{ max-width: 770px; } // Automatische Auwahlliste span.ui-state-error {color: @color_error;} div.ms-res-item-active { background: @egw_color_2_a; span {color: #FFFFFF;} } /*Von*/ select#mail-compose_mailaccount {width: 100%; height: 30px;} /*An*/ #mail-compose_to input {width:auto;} /*Kopie*/ span#mail-compose_cc_expander, /*Blindkopie*/ span#mail-compose_cc_expander, span#mail-compose_cc_expander, span#mail-compose_bcc_expander, span#mail-compose_bcc_expander, span#mail-compose_folder_expander, span#mail-compose_folder_expander, span#mail-compose_replyto_expander, span#mail-compose_replyto_expander { background: transparent; border: none; color: #26537c; text-decoration: underline; float: none; width: auto; white-space: nowrap; text-align: left; } /*Betreff*/ input#mail-compose_subject { max-width: 716px; padding: 4px 0px 4px 5px; } /*HTML Box*/ input#mail-compose_mimeType {margin-left: 12px;} } // Ende Header // Mail Body // Signature fieldset.mailSignature { font-size: 0.8em; border: none; margin: 8px 0; select {} span {margin:0px 8px;} } // File sent as... div.mailUploadSection { border-top: 0px solid silver; margin-top: 16px; width: 99%; // File Compose Elements div.et2_hbox { margin: -11px 0 5px -4px; label { margin-right: 10%;} } // Table - attachments #mail-compose_attachments { border-top: 1px solid silver; } } fieldset.mailUploadSection { border-top: 0px solid silver; font-size: 0.8em; margin: 8px 0; border-bottom: none; border-left: none; border-right: none; width: 99%; } } // Ende Dialog /* ################################################################################## * E-Mail Dialog "Ansehen" * Preview * ################################################################################## */ #mail-display { // gesamtbreite min-height: 768px; padding: 5px; /*Toolbar*/ .et2_toolbar, #mail-display_toolbar, mail-display_displayToolbar { /*.gradient_thead;*/ background-color: transparent; .color_100_gray; clear: both; height: 36px; // all buttons div.et2_toolbar_actionlist { margin-top: 0px; margin-left: 0px; } button { .Complete_Button_Icon_normal; height: 24px; } span.ui-state-default { float: left; background-image: none; } // Button ? // Button antworten // allen antworten // Forward #mail-display_forward_wrapper { &:hover {} &:focus {} li { a { img { width: 16px;margin-right: 3px;} } } } // speichern #mail-display_save_wrapper { &:hover {} &:focus {} // das Wort speichern button#mail-display_save { background-image: url('../pixelegg/images/speichern.png'); background-position: left center; background-repeat: no-repeat; background-size: 16px 16px; box-shadow: none; &:hover { img {display: none; background-image: none;} } &:focus {box-shadow: none; } } li { a { img { width: 16px;margin-right: 3px;} } } } // anzeigen #mail-display_view_wrapper { &:hover {} &:focus {} button#mail-display_view { box-shadow: none; &:hover { img {display: none; background-image: none;} } &:focus {box-shadow: none; } } li { a { img { width: 16px;margin-right: 3px;} } } } // mark #mail-display_mark_wrapper { &:hover {} &:focus {} button#mail-display_mark{ box-shadow: none; &:hover { img {display: none; background-image: none;} } &:focus {box-shadow: none; } } li { a { img { width: 16px;margin-right: 3px;} } } } /*OPEN SINGLE WINDOW AFTER CLICK ON MAIL*/ // ###################### buttons############################## // # # # # # # # # # #### // # # # # # # # # # #### // ############################################################ #toolbar-actionlist { padding: 0px 3px; span[data-group] {margin: 0px 40px 0 0;} button { .Complete_Button_Icon_normal; height: 27px; } } } // Dateianhänge .mailDisplayAttachments { // background-color:#efefdf; max-height: 12%; position: fixed; border: 0px solid @egw_color_3_a; border-bottom: 0px; opacity: 1; -moz-opacity:1; // filter: Alpha(opacity=100); margin-left: 10px; width:98%; img {width: 16px;} } .mail_DisplayNone{ display: none; } } // Ende Display // Toolbar ...from Hadi /** * et2_toolbar */ .et2_toolbar-dropdown { background: @gray_10 !important; background-color: @gray_10 !important; button { background: @gray_10 !important; background-color: @gray_10 !important; &:hover{} } } .et2_toolbar-dropdown-menulist { button { background: @gray_10 !important; background-color: @gray_10 !important; &:nth-child(2){} } ul{ } } div.ui-toolbar-menulist { .border_normal; } .ui-toolbar-menulist { h { padding-bottom: 7px; margin: 0; } div{ background-color: @gray_10 !important; .border_normal; } } // all used button in toolbar .et2_toolbar_actionlist { // zusammengesetzte Buttons .et2_toolbar-dropdown { .rounded(3px); padding: 3px !important; background: #fafafa !important; background-color: #fafafa !important; .et2_dropdown { .box_shadow_none; border: none !important; height: 24px !important; button { margin: 0px; padding-top: -3px !important; .box_shadow_none; background: #fafafa !important; background-color: #fafafa !important; img { .dimension_width_height_s; vertical-align: text-bottom; } min-height: auto; } } .et2_button_icon { .dimension_height_xs; } } } // aufgeklappte Toolbar div#displayToolbar-menulist { .et2_dropdown { .box_shadow_none; border: none !important; button {.box_shadow_none;} } img {.dimension_width_height_sm; } } /* ################################################################################## * Dialog: Subscripe Folder * * ################################################################################## */ #mail-subscribe, #mail-folder_management { table.et2_grid tr td { padding: 0px; /*Label*/ .mail_subscription_header { .headline_h2; line-height: 2em; font-weight: bold; font-size: 150%; padding-bottom: 20px; } // Folder List div.et2_box { margin-top: 16px; height: 484px; overflow: auto; } } // color - selected tree item .selectedTreeRow,.selectedTreeRow_lor {background-color: @color_selected_row; color: @gray_90;text-decoration: none;} // color - hover over standard tree item .standartTreeRow_lor {background-color: @color_hover_row; color: @gray_90;text-decoration: none;} } // #mail-subscribe .mail_subscription_header, .mail_folder_management_header { font-weight: bold; font-size: 150%; padding-bottom: 20px; } /* ################################################################################## * E-Mail * * ################################################################################## */ /* felamimail uses the styledefinitions below to format navButton/navSeparator */ tr.navbarBackground { background-color:#dddddd; } div.navButton { background-color:#dddddd; float:left; padding: 2px; margin: 2px; border: solid #dddddd 1px; } div.navButton:hover, div.navButtonHover { background-color:#eeeeee; float:left; padding: 2px; margin: 2px; border: solid white 1px; border-right: solid black 1px; border-bottom: solid black 1px; position: relative; } div.navButton:active, div.navButtonActive { background-color:#dddddd; float:left; padding: 2px; margin: 2px; border: solid white 1px; border-left: solid black 1px; border-top: solid black 1px; position: relative; } div.navSeparator { background-color:#dddddd; float:left; padding: 0px; margin: 2px; border: solid silver 1px; height:24px; position: relative; } /* Fixes z-index problem with the calendar year selection (displays behind selectboxes)*/ .calendar .combo { z-index: 1 !important; } //############################################################################################# // mail/templates/app.css textarea { font-family: monospace, sans-serif; font-size: 110%; } .defaultProfile { color:#000000; font-weight:bold !important; } .quoted1 { color:#660066; } .quoted2 { color:#007777; } .quoted3 { color:#990000; } .quoted4 { color:#000099; } .quoted5 { color:#bb6600; } tr.mail div { cursor: default; white-space: normal; text-overflow: ellipsis; span {text-overflow: ellipsis;white-space: noWrap;} } tr.mail a { cursor: pointer; white-space: nowrap; text-overflow: ellipsis; } tr.recent div, tr.recent span, tr.recent time, tr.recent a, tr.unseen div, tr.unseen span, tr.unseen time, tr.unseen a { color: #003075; font-weight: bold; } tr.mail.label1 td:first-child { border-left:6px solid #ff0080 !important; } tr.mail.label2 td:first-child { border-left:6px solid #ff8000 !important; } tr.mail.label3 td:first-child { border-left:6px solid #008000 !important; } tr.mail.label4 td:first-child { border-left:6px solid #0000ff !important; } tr.mail.label5 td:first-child { border-left:6px solid #8000ff !important; } tr.mail.flagged td:first-child { border-left:6px solid #ff0000 !important; } tr.mail.prio_high td:first-child { border-left:6px solid #ac0000 !important; } tr.mail.deleted td:first-child { border-left:6px solid silver; text-decoration : line-through; } span.status_img { display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-image: url(../pixelegg/images/kmmsgread.svg); background-size: 16px 16px; } tr.deleted span.status_img { background-image: url(../pixelegg/images/kmmsgdel.svg); } tr.unseen span.status_img { background-image: url(../pixelegg/images/kmmsgunseen.svg); } tr.flagged_seen span.status_img { background-image: url(../pixelegg/images/read_flagged_small.svg) !important; } tr.flagged_unseen span.status_img { background-image: url(../pixelegg/images/unread_flagged_small.svg) !important; } tr.recent span.status_img { background-image: url(../pixelegg/images/kmmsgnew.svg) !important; } tr.replied span.status_img { background-image: url(../pixelegg/images/mail_reply.svg) !important; } tr.forwarded span.status_img { background-image: url(../pixelegg/images/mail_forward.svg) !important; } .subjectBold { font-size: 12px; font-weight : bold; font-family : Arial; } .subject { font-size: 12px; font-family : Arial; } TR.sieveRowActive { font-size: 11px; height : 20px; padding: 0; background : White; } A.sieveRowActive { font-size: 11px; height : 14px; padding: 0; } TR.sieveRowInActive { font-size: 11px; height : 20px; padding: 0; background : White; color: Silver; } A.sieveRowInActive { font-size: 11px; height : 14px; padding: 0; color: Silver; } .bodyDIV { position:absolute; background-color:white; top:134px; bottom:0px; width:100%; border-top: 1px solid #efefdf; } .bodyDIVAttachment { bottom:80px; } #attachmentSpanAllDIV{ background-color:#efefdf; height:260px; overflow:auto; } #attachmentDIV { position:fixed; background-color:#efefdf; bottom:0px; min-height:80px; max-height:239px; width:100%; border-top: 1px solid silver; overflow:auto; } #popupattachmentDIV { background-color:#efefdf; bottom:0px; min-height:80px; max-height:239px; width:100%; border-top: 1px solid silver; overflow:auto; } pre { white-space: pre-wrap; /* Mozilla, since 1999 */ white-space: -o-pre-wrap; /* Opera 7 */ width: 99%; } /* avoid the vertical scrollbar within the sidebox section (triggered by the vertical dimension of the tree) */ .divSidebox { overflow: hidden; } .textSidebox { overflow-x: hidden; overflow-y: auto; } /* avoid the vertical scrollbar within the actual tablecontainer (of the tree) */ .containerTableStyle { width: 100%; overflow: hidden; } .dtree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap; div { width: 100%; } img { border: 0px; vertical-align: middle; } a { color: #333; text-decoration: none; } a.node, a.nodeSel { white-space: nowrap; padding: 1px 2px 1px 2px; &:hover{ color: #333; text-decoration: underline; } } a.nodeSel { background-color: #c0d2ec; } .clip { overflow: hidden; } table, tr, td { border: none; } table { overflow: hidden; width: 100%; display: table-row; } // Ende dtree } .useEllipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; word-wrap: break-word; } #mail-index { position: relative } /* influence the tree display and scrolling behavior */ #mail-tree_target { min-height: 35px; max-height: 450px; display: block; display: -moz-inline-stack; display: -moz-box; width: 100%; overflow: hidden; overflow-y: auto; z-index:100; } /* we need the the image displayed with our buttons on the left side */ input[type=button] { background-position: left; } #mail-index_messageIFRAME { width: 100%; height: 100%; border: 0; } //#mail-index_button\[mailcreate\] #mail-index_button[id*="mailcreate"] { width: 99%; text-align: left; font-weight: bold; padding-left: 25px; background-image: url(../pixelegg/images/write_mail.png) !important; background-position: left; background-repeat: no-repeat; } //#mail-compose_button[id*="send"] { // text-align: left; // font-weight: bold; // padding-left: 30px; // width: 80px; // margin: 0px !important; // background-image: url(images/mail_send.png) !important; // background-position: left; // background-repeat: no-repeat; //} .mailDisplay { position: relative; background-color: transparent; width: 100%; } #mail-index_mail-index-header_right { display: inline-flex; } #mail-index_mailPreview { overflow: hidden; position: relative; margin-top: 5px; } #mail-compose_fileselector { width: 245px !important; } .mailPreviewIcons { position: absolute; right: 0; top: 0; } // Headerbereich grau hinterlegt #mail-index_mailPreviewContainer { position: absolute; border-top: 1px solid silver; bottom: 0; left: 0px; right: 5px; } /*#######################################################*/ /*# ICON # ICON # ICON # ICON #ICON # ICON# ICON # ICON #*/ /*#######################################################*/ /*Toolbar der Email*/ #mail-display_toolbar { padding: 0px; } #mail-display_toolbar > button > span { padding: .2em .4em; } #mail-display_toolbar > button > span > img { width: 16px; padding: 0px; height: auto; } // Button Toolbar - always visible #mail-index_toolbar { background: none; height:35px; // alle Buttons / drag + drop #toolbar-actionlist{ } /* Elemente */ button { height: 24px !important; span { padding: 0; img { .dimension_width_height_s ; padding: 0px; } } } } /*AN / To*/ div.mailPreviewHeaders div.mail_extraEmails { display: inline-block; max-height: 1.3em; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; img.et2_button_icon { .dimension_width_height_m; } } div.mailPreviewHeaders img.et2_button_icon { background-color: inherit; } // Anhänge an Email #mail-index_previewAttachmentArea { // background-color:#efefdf; .background_color_5_gray; max-height: 3.6em; border: none; // filter: Alpha(opacity=100); img {.dimension_width_height_s;} td{padding: 2px;} max-width: 80%; } #mail-index_previewAttachmentArea.noContent { border:0px !important; } /* Button after field*/ #mail-index_mailPreviewHeadersAttachments { padding-top: 5px; img.et2_button_icon { .dimension_width_height_s; .background_color_5_gray; left: -6px; top: 1px; } } /*######################################################*/ /*Diplay : View */ .mailDisplayContainer, .mailDisplayAttachments { display: block; display: -moz-inline-stack; display: -moz-box; width: 99%; overflow: hidden; overflow-y: auto; left: 3px; right: 3px; z-index: 100; } .mailDisplayContainer { position: fixed; overflow: hidden; overflow-y: auto; border-top: 2px solid silver; top: 120px; bottom: 108px; border-bottom: 1px solid silver; width: 98%; background-color: white; margin-left: 10px; } .mailDisplayHeaders { overflow: hidden; } .mailDisplayHeaderSection { position: absolute; top: 12px; } div.mailDisplayHeaders > div:first-parent { overflow: hidden; } div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailPreviewHeaders > span:first-child { width: 7em; display: inline-block; } div.mailComposeHeaders > span:first-child { width: 8em; } div.mailDisplayHeaders div.mail_extraEmails { display: inline-block; max-height: 1.3em; max-width: 50%; overflow: hidden; text-overflow: ellipsis; } div.mailDisplayHeaders div.mail_extraEmails.visible { position: fixed; left: 7em; display: block; max-height: 8em; min-width: 30em; z-index: 999; overflow-y: auto; background-color: white; } #mail-importMessage{ .et2_button_icon { height: auto; width: 24px; } } div.mailComposeHeaderSection > table { padding-top: 10px; } /* transition delay breaks splitter resize, because it doesn't get the right height in a right time. So we reduce the delay to 0.1 to fix the timing issue. The delay should not be set to 0 or none because it wil conflict with blueimp gallery plugin (Expose). */ :hover { -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } #mail-index_button\[mailcreate\], #composeToolbar-send { color: #5B5B5B; background-color: white; } /* width */ table#mail-index_previewAttachmentArea::-webkit-scrollbar { width: 5px; } /* Track */ table#mail-index_previewAttachmentArea::-webkit-scrollbar-track { background: #f2f2f2; } /* Handle */ table#mail-index_previewAttachmentArea::-webkit-scrollbar-thumb { background: #c1c2c1; } /* Handle on hover */ table#mail-index_previewAttachmentArea::-webkit-scrollbar-thumb:hover { background: #555; } #mail-index_nm.et2_nextmatch .egwGridView_outer thead tr {border-left: 12px solid @gray_30;}