Merge pull request #1678 from pom2ter/message-tweaks

fix(frontend): css adjustments for messages

Author: marclaporte

modules/core/site.css

@@ -503,8 +503,8 @@ button {
   margin-top: 0px;
   border-bottom: solid 1px var(--bs-secondary-bg);
   border-top: solid 1px var(--bs-secondary-bg);
-  padding-bottom: 10px;
-  padding-top: 20px;
+  padding-bottom: 15px;
+  padding-top: 15px;
   letter-spacing: -1px;
   gap: 1rem;
   font-size: 1.25rem;
@@ -656,13 +656,15 @@ button {
   color: var(--bs-body-color);
 }
 .prevnext {
-  font-size: 1.3rem;
+  font-size: 1.2rem;
   margin-right: 5px;
   vertical-align: -3px;
 }
 .plink,
 .nlink {
   color: #666;
+  font-size: 0.95rem;
+  margin-top: 0.25rem;
 }
 .plink:hover,
 .nlink:hover {
@@ -995,8 +997,9 @@ div.unseen,
   width: 100%;
 }
 .mobile .content_title {
-  padding-top: 12px;
   display: flex;
+  padding-top: 12px;
+  padding-bottom: 12px;
   max-height: 35rem;
   align-items: center;
   flex-wrap: wrap;
@@ -1078,9 +1081,8 @@ div.unseen,
   text-overflow: ellipsis;
 }
 .mobile .msg_text_inner {
-  padding-left: 10px !important;
   font-size: 120%;
-  padding: 10px !important;
+  padding: 5px !important;
 }
 .mobile .list_meta {
   display: none;
@@ -1621,6 +1623,14 @@ a[disabled] {
   display: none;
 }
 
+.add_contact_row {
+  background-color: white;
+}
+
+.add_contact_row #add_contact {
+  white-space: nowrap;
+}
+
 .mobile .folders {
   margin-top: 1rem;
   margin-left: 1rem !important;
@@ -1652,19 +1662,19 @@ a[disabled] {
   }
 
   .msg_actions a {
-    color: #495057;
     font-size: 0.85rem;
   }
 
   .mobile nav.folder_cell { width: 50%; }
+  .mobile .news_cell .subject div { padding-bottom: 0px !important; }
 }
 
 @media (max-width: 575px) {
   .mobile nav.folder_cell { width: 100%; }
   .mobile #list_controls_menu.show { left: auto; right: 0px; }
   .mobile .calendar .month_label { padding: 1rem !important; }
   .mobile .calendar .border.m-4 { margin: 1rem !important; }
-  .mobile .content_title { gap: 0.25rem; }
+  .mobile .content_title { gap: 0.25rem; padding-bottom: 10px !important; }
   .mobile .message_list { position: relative; }
   .mobile .message_list .list_controls.on_mobile {
     position: absolute; top: 12px; right: 15px;

modules/imap/output_modules.php

@@ -410,7 +410,7 @@ protected function output() {
                     $sender_blocked = in_array($sender, $blocked_senders);
                     $domain_blocked = in_array($domain, $blocked_senders);
                     if(!in_array($sender, $existing_emails)){
-                        $txt .= '<div class="dropdown d-inline-block"><a class="block_sender_link hlink dropdown-toggle text-decoration-none'.($domain_blocked || $sender_blocked ? '" id="unblock_sender" data-target="'.($domain_blocked? 'domain':'sender').'"' : '"').' href="#" aria-labelledby="dropdownMenuBlockSender" data-bs-toggle="dropdown"><i class="bi bi-lock-fill"></i> <span id="filter_block_txt">'.$this->trans($domain_blocked ? 'Unblock Domain' : ($sender_blocked ? 'Unblock Sender' : 'Block Sender')).'</span></a>';
+                        $txt .= '<div class="dropdown d-inline-block"><a class="block_sender_link hlink dropdown-toggle text-decoration-none btn btn-sm btn-outline-danger '.($domain_blocked || $sender_blocked ? '" id="unblock_sender" data-target="'.($domain_blocked? 'domain':'sender').'"' : '"').' href="#" aria-labelledby="dropdownMenuBlockSender" data-bs-toggle="dropdown"><i class="bi bi-lock-fill"></i> <span id="filter_block_txt">'.$this->trans($domain_blocked ? 'Unblock Domain' : ($sender_blocked ? 'Unblock Sender' : 'Block Sender')).'</span></a>';
                         $txt .= block_filter_dropdown($this);
                     }
                 } else {

modules/imap/site.css

@@ -69,6 +69,7 @@
   min-height: 600px;
   background-color: #fff;
   height: 100%;
+  padding: calc(var(--bs-gutter-x) * .5);
   /* max-width: 95% !important; */
 }
 .msg_text_inner {
@@ -399,6 +400,7 @@
 }
 .block_sender_link {
   color: brown;
+  margin-right: 8px;
 }
 
 .msg_part_desc {

modules/tags/site.css

@@ -1,4 +1,4 @@
-.tag_icon { position: absolute; right: 50px; top: 18px; }
+.tag_icon { position: absolute; right: 50px; top: 15px; }
 .mobile .tag_icon { display: none; }
 .tags_action_btn { width: 30px !important; height: 30px !important; }
 .mr-4 { margin-right: 4px !important; }