egroupware_official/mail/templates/mobile/app.css

/**
 *
 * 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 "../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;
  }
  body #popupMainDiv .et2_toolbar.et2_head_toolbar {
    padding: 1px 5px 5px 10px !important;
  }
  body #popupMainDiv .et2_toolbar.et2_head_toolbar et2-button {
    width: 46px;
    height: 46px;
    background-size: 18px 18px;
  }
  body #popupMainDiv .et2_toolbar.et2_head_toolbar .et2_toolbar_hasCaption {
    width: auto;
  }
  body #popupMainDiv .et2_toolbar.et2_head_toolbar .et2_toolbar_actionlist {
    margin-left: 50px;
  }
  body #popupMainDiv #mail-compose_composeToolbar #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;
  }
  body #popupMainDiv #mail-compose_composeToolbar #composeToolbar-send:hover {
    box-shadow: none;
    background-color: none;
  }
  body #popupMainDiv #mail-compose_composeToolbar #composeToolbar-send:disabled {
    background-color: none;
  }
  body #popupMainDiv .mail-d-h1 {
    position: relative;
    padding-bottom: 15px;
    border-bottom: 1px solid silver;
    font-size: 12pt;
    padding-top: 10px;
    font-weight: bold;
  }
  body #popupMainDiv .mail-d-h1 span {
    font-size: 12pt;
  }
  body #popupMainDiv .mail-d-h2 {
    padding-top: 5px;
    font-size: 10pt;
    color: grey;
  }
  body #popupMainDiv .mail-d-h2 a,
  body #popupMainDiv .mail-d-h2 span,
  body #popupMainDiv .mail-d-h2 .et2_label {
    color: grey;
    font-size: 10pt;
  }
  body #popupMainDiv .mail-d-h2 a#mail-display_FROM > * {
    color: black;
    padding-top: 15px;
    font-size: 12pt;
  }
  body #popupMainDiv .et2_details {
    width: 100%;
    display: block;
  }
  body #popupMainDiv .et2_details.et2_details_expanded {
    width: 100%;
    display: block;
  }
  body #popupMainDiv span.et2_details_title {
    color: #26537c;
    font-size: 10pt;
  }
  body #popupMainDiv div#mail-display_mailDisplayHeadersFrom > * {
    color: black;
    padding-top: 15px;
  }
  body #popupMainDiv .mailDisplayAttachments {
    position: initial;
    padding: 0;
    margin-top: 10px;
  }
  body #popupMainDiv button[id="displayToolbar-delete"] {
    margin-left: 0;
  }
  body #popupMainDiv .mailDisplay {
    position: initial;
    margin-top: 20px;
  }
  body #popupMainDiv div#mail-view > div {
    height: 100%;
  }
  body #popupMainDiv div#mail-view {
    height: 100%;
    box-sizing: border-box;
  }
  body #popupMainDiv div#mail-view div > et2-vbox {
    height: 100%;
  }
  body #popupMainDiv div#mail-view #mail-view_subject {
    font-size: 12pt;
  }
  body #popupMainDiv div#mail-view .mailContent {
    flex-grow: 1;
  }
  body #popupMainDiv #mail-view_toaddressdetails {
    color: #26537c;
    float: right;
  }
  body #popupMainDiv #tempPrintDiv {
    display: block;
  }
  body #popupMainDiv #tempPrintDiv div:first-child {
    height: auto !important;
  }
  body #popupMainDiv #tempPrintDiv td,
  body #popupMainDiv #tempPrintDiv textarea {
    font-family: Verdana, Arial, Helvetica, sans-serif;
  }
  body #popupMainDiv #tempPrintDiv .td_display {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 120%;
    color: black;
    background-color: #FFFFFF;
  }
  body #mail-compose .cke_chrome {
    border: none;
    box-shadow: none;
  }
  body #mail-compose .mailComposeBodySection,
  body #mail-compose .mailComposeBodySection .mailComposeBody {
    height: calc(100% - 180px);
  }
  body #mail-compose .mailComposeHeaderSection > table {
    padding: 0;
  }
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders.subjectContainer td:first-child::after {
    content: '';
  }
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders {
    border-bottom: 1px solid silver;
  }
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span {
    font-size: 10pt;
  }
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders .subjectContainer:first-child::after {
    content: ':';
  }
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders:first-child {
    border-top: 1px solid silver;
  }
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders #mail-compose_cc_expander,
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_cc_expander,
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders #mail-compose_bcc_expander,
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_bcc_expander,
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders #mail-compose_folder_expander,
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_folder_expander,
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders #mail-compose_replyto_expander,
  body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_replyto_expander {
    background: transparent;
    border: none;
    color: #26537c;
    font-size: 10pt;
    width: 65px;
    height: 25px;
    margin-left: initial;
  }
  body #mail-compose .mailComposeHeaderSection > table div.et2_taglist > *,
  body #mail-compose .mailComposeHeaderSection > table #mail-compose_subject,
  body #mail-compose .mailComposeHeaderSection > table #mail-compose_mailaccount {
    border: none;
    box-shadow: none;
    font-size: 10pt;
  }
  body #mail-compose .mailComposeHeaderSection > table #mail-compose_subject:focus {
    outline-color: transparent;
  }
  body #mail-compose .tox-tinymce {
    border: none;
  }
  body #mail-compose .dialogHeadbar {
    z-index: 2;
  }
  #mail-index {
    margin-right: 0px;
  }
  #mail-index span.et2_date_ro.et2_label {
    font-size: 9px;
  }
  #mail-index td {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #mail-index td a[id^='mail-index_'][id$='fromaddress]'] {
    color: #373737;
    font-size: 12pt;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 95%;
    display: inline-block;
  }
  #mail-index td .icons et2-image {
    padding: initial;
  }
  #mail-index td .icons et2-image img {
    padding: initial;
    height: initial;
  }
  #mail-index td span[id^='mail-index_'][id$='attachments]'] {
    margin-left: auto;
    order: 1;
    text-align: initial;
  }
  #mail-index td span[id^='mail-index_'][id$='attachments]'] img {
    width: 16px;
    height: 16px;
    padding: initial;
  }
  #mail-index td et2-description[id^='mail-index_'][id$='subject]'] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 95%;
    font-size: 10pt;
    font-weight: normal !important;
  }
  #mail-index td label[id^='mail-index_'][id$='date]'] {
    padding-top: 0;
  }
  #mail-index tr {
    height: 55px;
  }
  #mail-index tr div.recent,
  #mail-index tr span.recent,
  #mail-index tr time.recent,
  #mail-index tr a.recent,
  #mail-index tr div.unseen,
  #mail-index tr span.unseen,
  #mail-index tr time.unseen,
  #mail-index tr a.unseen {
    color: black !important;
    font-weight: bold;
  }
  #mail-index tr span.mail.mobile_cat_col {
    background: #F5F5F5;
  }
  #mail-index tr span.mail.label1.mobile_cat_col {
    background: #ff0080;
  }
  #mail-index tr span.mail.label2.mobile_cat_col {
    background: #ff8000;
  }
  #mail-index tr span.mail.label3.mobile_cat_col {
    background: #008000;
  }
  #mail-index tr span.mail.label4.mobile_cat_col {
    background: #0000ff;
  }
  #mail-index tr span.mail.label5.mobile_cat_col {
    background: #8000ff;
  }
  #mail-index tr span.mail.flagged.mobile_cat_col {
    background: #ff0000;
  }
  #mail-index tr span.mail.deleted.mobile_cat_col {
    background: silver;
    text-decoration: line-through;
  }
  #mail-index tr span.status_img {
    padding: 0 2px 2px 0;
  }
  #mail-index tr span.deleted.status_img {
    background-image: url(../../../node_modules/bootstrap-icons/icons/x-lg.svg);
  }
  #mail-index tr span.unseen.status_img {
    background-image: url(../../../node_modules/bootstrap-icons/icons/envelope.svg);
  }
  #mail-index tr span.flagged_seen.status_img {
    background-image: url(../../../node_modules/bootstrap-icons/icons/flag.svg);
  }
  #mail-index tr span.flagged_unseen.status_img {
    background-image: url(../../../node_modules/bootstrap-icons/icons/flag-fill.svg);
  }
  #mail-index tr span.recent.status_img {
    background-image: url(../../../node_modules/bootstrap-icons/icons/envelope-plus.svg);
  }
  #mail-index tr span.replied.status_img {
    background-image: url(../../../node_modules/bootstrap-icons/icons/reply.svg);
  }
  #mail-index tr span.forwarded.status_img {
    background-image: url(../../../node_modules/bootstrap-icons/icons/forward.svg);
  }
  #mail-index tr span.bodypreview {
    text-overflow: ellipsis;
    padding-left: 2px;
    font-style: normal;
    font-size: 10pt;
  }
  #mail-index .mail-index_quotabox {
    position: absolute;
    top: 8px;
    right: 74px;
    width: 200px !important;
    z-index: 99;
  }
  #mail-index .mail-index_vacation {
    position: absolute;
    top: 3px;
    right: 190px;
    width: 250px !important;
    z-index: 99;
  }
  #mail-index .mail-index_vacation div {
    text-align: center;
  }
  #mail-index #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;
  }
}