egroupware_official/mail/templates/mobile/app.less

/**
 *
 * Mail - Mobile
 *
 * Please do NOT change app.css directly, instead change app.less and compile it!
 * Pixleegg Template app.css
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Hadi Nategh <hn@egroupware.org>
 * @package Mail
 * @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
 */



@import (reference) "../../../pixelegg/less/def_buttons.less";
@import (reference) "../../../pixelegg/less/def_mobile.less";
@import "../default/app.css";
/* import */
/* tablets and smartphones  */
@media all {
	div.mailDisplayContainer{
		margin-top: 30px;
		margin-left:0;
		height: auto;
	}

	#mail-display.et2_container {
		min-height: initial;
		padding: 0;
	}

	.mailDisplayAttachments > * {
		font-size: large !important;
	}
	/*compose dialog*/
	body {
		#popupMainDiv {
			padding: 1px 8px 0 8px;
			background: none;

			.et2_toolbar.et2_head_toolbar {
				padding: 1px 5px 5px 10px !important;
				et2-button {
					width:46px;
					height:46px;
					background-size: 18px 18px;
				}
				.et2_toolbar_hasCaption {
					width:auto;
				}
				.et2_toolbar_actionlist {
					margin-left: 50px;
				}

			}
			#mail-compose_composeToolbar{
				// Senden Button
				#composeToolbar-send{
					height: 46px;
					width: auto;
					margin-top: 0.7px !important;
					padding: 0 3px 0 0;
					text-align: left;
					font-weight: normal;
					padding-left: 20px;
					background-image: url(../../../node_modules/bootstrap-icons/icons/send.svg);
					background-position: left;
					background-repeat: no-repeat;
					background-size: 16px 16px;
					background-color: #fafafa;
					color: black;
					&:hover {box-shadow: none; background-color:none;}
					&:disabled {background-color: none;}
				}
			}



			.mail-d-h1{
				position: relative;
				padding-bottom: 15px;
				border-bottom: 1px solid silver;
				span {
					.mob-fontsize-l;
				}
				.mob-fontsize-l;
				padding-top: 10px;
				font-weight: bold;
			}
			.mail-d-h2{
				padding-top: 5px;
				.mob-fontsize-n;
				color: grey;
				a,span,.et2_label {
					color: grey;
					.mob-fontsize-n;
				}
				a#mail-display_FROM>* {
					color:black;
					padding-top: 15px;
					.mob-fontsize-l;
				}

			}
			.et2_details {
				width: 100%;
				display: block;
			}
			.et2_details.et2_details_expanded {
				width: 100%;
				display: block;
			}
			span.et2_details_title {
					color:#26537c;
					.mob-fontsize-n;
				}
			div#mail-display_mailDisplayHeadersFrom>* {
				color:black;
				padding-top: 15px;
			}
			.mailDisplayAttachments {
				position: initial;
				padding: 0;
				margin-top: 10px;
			}
			button[id="displayToolbar-delete"] {
				margin-left: 0;
			}

			.mailDisplay {
				position: initial;
				margin-top: 20px;
			}
			div#mail-view> div {
				height: 100%;
			}
			div#mail-view {
				height: 100%;
				box-sizing: border-box;

				div > et2-vbox {
				  height: 100%
				}
				#mail-view_subject
				{
					.mob-fontsize-l;
				}

			  .mailContent {
				flex-grow: 1;
			  }
			}
			#mail-view_toaddressdetails {
				color: #26537c;
				float: right;
			}
			#tempPrintDiv {
				display:block;
				div:first-child {
					height:auto !important;
				}
				td, textarea {
					font-family: Verdana, Arial, Helvetica, sans-serif;

				}
				.td_display {
					font-family: Verdana, Arial, Helvetica, sans-serif;
					font-size: 120%;
					color: black;
					background-color: #FFFFFF;
				}
			}

		}

		#mail-compose {
			.cke_chrome {
				border:none;
				box-shadow: none;
			}
			.mailComposeBodySection, .mailComposeBodySection .mailComposeBody{
				height: ~"calc(100% - 180px)";
			}
			.mailComposeHeaderSection > table {
				padding: 0;
				tr.mailComposeHeaders.subjectContainer td:first-child::after {
					content: '';
				}
				tr.mailComposeHeaders {
					span {
						.mob-fontsize-n;
					}
					border-bottom: 1px solid silver;
					.subjectContainer:first-child::after{
						content: ':';
					}
					&:first-child {
						border-top: 1px solid silver;
					}

				  #mail-compose_cc_expander, span#mail-compose_cc_expander,
				  #mail-compose_bcc_expander, span#mail-compose_bcc_expander,
				  #mail-compose_folder_expander, span#mail-compose_folder_expander,
				  #mail-compose_replyto_expander, span#mail-compose_replyto_expander
					{
						background: transparent;
						border: none;
						color: #26537c;
						.mob-fontsize-n;
						width: 65px;
						height:25px;
						margin-left: initial;
					}
				}
				div.et2_taglist > *, #mail-compose_subject, #mail-compose_mailaccount {
					border:none;
					box-shadow: none;
					.mob-fontsize-n;
				}
				#mail-compose_subject:focus {
					outline-color: transparent;
				}
			}
			.tox-tinymce {border:none}
			.dialogHeadbar{z-index: 2}
		}
	}

	#mail-index {
		margin-right: 0px;
		span.et2_date_ro.et2_label {
			font-size: 9px;
		}
		td {
			padding-top: 8px;
			padding-bottom: 8px;
			a[id^='mail-index_'][id$='fromaddress]']{
				color:@gray_80;
				.mob-fontsize-l;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 95%;
				display: inline-block;
			}

		  .icons {
			et2-image {
			  padding: initial;

			  img {
				padding: initial;
				height: initial;
			  }
			}
		  }
			span[id^='mail-index_'][id$='attachments]'] {
			  margin-left: auto;
			  order: 1;
			  text-align: initial;
				img {
					width: 16px;
					height: 16px;
				  padding: initial;
				}
			}
			et2-description[id^='mail-index_'][id$='subject]'] {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 95%;
				.mob-fontsize-n;
				font-weight: normal !important;
			}
			label[id^='mail-index_'][id$='date]']{
				padding-top: 0;
			}
		}
		tr{
			height:55px;
			div.recent ,
			span.recent ,
			time.recent ,
			a.recent,
			div.unseen ,
			span.unseen ,
			time.unseen ,
			a.unseen  {
				color: black !important;
				font-weight: bold;
			}
			span.mail.mobile_cat_col {
				background: #F5F5F5;
			}
			span.mail.label1.mobile_cat_col  {
				background: #ff0080;
			}
			span.mail.label2.mobile_cat_col{
				background: #ff8000;
			}
			span.mail.label3.mobile_cat_col {
				background: #008000;
			}
			span.mail.label4.mobile_cat_col {
				background: #0000ff;
			}
			span.mail.label5.mobile_cat_col {
				background: #8000ff;
			}

			span.mail.flagged.mobile_cat_col  {
				background: #ff0000;
			}

			span.mail.deleted.mobile_cat_col {
				background: silver;
				text-decoration : line-through;
			}
			span.status_img {
				padding:0 2px 2px 0;
			}
			span.deleted.status_img {
				background-image: url(../../../node_modules/bootstrap-icons/icons/x-lg.svg);
			}
			span.unseen.status_img {
				background-image: url(../../../node_modules/bootstrap-icons/icons/envelope-fill.svg);
			}
			span.flagged_seen.status_img {
				background-image: url(../../../node_modules/bootstrap-icons/icons/flag.svg);
			}
			span.flagged_unseen.status_img {
				background-image: url(../../../node_modules/bootstrap-icons/icons/flag-fill.svg);
			}
			span.recent.status_img {
				background-image: url(../../../node_modules/bootstrap-icons/icons/envelope-plus.svg);
			}
			span.replied.status_img {
				background-image: url(../../../node_modules/bootstrap-icons/icons/reply.svg);
			}
			span.forwarded.status_img {
				background-image: url(../../../node_modules/bootstrap-icons/icons/forward.svg);
			}
			span.bodypreview {
				text-overflow: ellipsis;
				padding-left: 2px;
				font-style: normal;
				.mob-fontsize-n;
			}
		}
		.mail-index_quotabox {
			position: absolute;
			top: 8px;
			right: 74px;
			width: 200px !important;
			z-index: 99;
		}
		.mail-index_vacation {
			position: absolute;
			top: 3px;
			right: 190px;
			width: 250px !important;
			z-index: 99;
			div {
				text-align: center;
			}
		}

		#mail-index_nm div.search{
			margin-top:3px;
		}

	}
	#mail-index_buttonmailcreate {display:none;}
	div.aclDetails {display:none;}
	#mail-acl_grid {
		.row{border-bottom: 1px solid silver;}
	}
	.mailPreviewHeaders et2-lavatar {position: inherit}
}