egroupware/mail/templates/pixelegg/app.less

/**
 * 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 <stefan.reinhard@pixelegg.de>
 * @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
	#mail-index_mailPreview {
		margin: 0;
		// From
		#mail-index_mailPreviewHeadersFrom {
			width: 50%;
		}

		// An
		#mail-index_mailPreviewHeadersTo {
			width: 50%;
		}

		// Date
		#mail-index_mailPreviewHeadersDate {
			position: absolute;
			right: 0px;
			margin: 3px 5px 0 0;
		}

		// Subject
		#mail-index_mailPreviewHeadersSubject {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		#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*/
		#mail-compose_cc_expander,
		/*Blindkopie*/
		#mail-compose_bcc_expander,
		#mail-compose_folder_expander,
		#mail-compose_replyto_expander
		{
			background: transparent;
			border: none;
			color: #26537c;
			text-decoration: underline;
			float: none;
			width: auto;
			white-space: nowrap;
			text-align: left;
			cursor: pointer;
		}
		/*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;

	.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 {
		background-color: #fafafa !important;
		.et2_dropdown {
			.box_shadow_none;
			border: none !important;
			height: 24px !important;

			button {
				.box_shadow_none;
				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
		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;
}

.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 .status_img {
	background-image: url(../pixelegg/images/kmmsgdel.svg);
}

tr.unseen .status_img {
	background-image: url(../pixelegg/images/kmmsgunseen.svg);
}

tr.flagged_seen .status_img {
	background-image: url(../pixelegg/images/read_flagged_small.svg) !important;
}

tr.flagged_unseen .status_img {
	background-image: url(../pixelegg/images/unread_flagged_small.svg) !important;
}

tr.recent .status_img {
	background-image: url(../pixelegg/images/kmmsgnew.svg) !important;
}

tr.replied .status_img {
	background-image: url(../pixelegg/images/mail_reply.svg) !important;
}

tr.forwarded .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;
	overflow-y: auto;
}


.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;
}

/*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;}

#mail-index_nm.et2_nextmatch .egwGridView_outer thead tr.row_category td:first-child > div {
	margin-left: 0px;
	padding-left: 0px;

}