From 07e45e8d63aa5e2a0c49ca3622e6587c893ff411 Mon Sep 17 00:00:00 2001
From: milan <mk@egroupware.org>
Date: Thu, 28 Nov 2024 16:43:12 +0100
Subject: [PATCH] mobile styling changes according to ticket #100951 and some
 styling cleanup

---
 pixelegg/css/fancy.css              |   2 +-
 pixelegg/css/mobile.css             |  64 ++++++++++++++----
 pixelegg/css/mobile.less            |  65 +++++++++++++-----
 pixelegg/css/pixelegg.css           |   2 +-
 pixelegg/less/layout_loginPage.less |   2 +-
 pixelegg/mobile/fw_mobile.css       | 100 +++++++++++++++-------------
 pixelegg/mobile/fw_mobile.less      |  35 +---------
 7 files changed, 156 insertions(+), 114 deletions(-)

diff --git a/pixelegg/css/fancy.css b/pixelegg/css/fancy.css
index 808605d579..394f443ed9 100644
--- a/pixelegg/css/fancy.css
+++ b/pixelegg/css/fancy.css
@@ -2226,7 +2226,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg);
 }
 #loginMainDiv div#centerBox form table.divLoginbox input[type="checkbox"] {
-  height: 25px;
+  height: 25px !important;
   margin-top: 7px;
   width: auto;
 }
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index ca2e9d6bd2..a9c80683d4 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -2229,7 +2229,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg);
 }
 #loginMainDiv div#centerBox form table.divLoginbox input[type="checkbox"] {
-  height: 25px;
+  height: 25px !important;
   margin-top: 7px;
   width: auto;
 }
@@ -4413,10 +4413,10 @@ body.scrollVertical {
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items .timezone span {
   width: 100%;
-  text-align: center;
+  text-align: left;
   display: inline-block;
   background-color: #fafafa;
-  padding: 5px 0px 5px 0px;
+  padding: 5px 0px 5px 10px;
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items .timezone select {
   width: calc(100% - 20px);
@@ -6063,8 +6063,9 @@ table.egwGridView_grid img {
   height: 16px;
 }
 table.egwGridView_grid et2-image {
-  width: 16px;
-  font-size: 16px;
+  width: 1em;
+  font-size: 1.5em;
+  display: flex;
 }
 table.egwGridView_grid tbody {
   border-bottom: 1px solid #000000;
@@ -6871,6 +6872,13 @@ table.egwGridView_grid img.et2_appicon {
   border-top-color: #003366;
   border-top-width: 4px !important;
 }
+/**
+Addressbook sidebox grid table
+ */
+#egw_fw_sidemenu table.addressbook_view {
+  table-layout: fixed;
+  width: 100%;
+}
 #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #admin_sidebox_header.egw_fw_ui_sidemenu_entry_header_active {
   background-color: rgba(51, 51, 51, 0.3);
   border-left: 4px solid #333333 !important;
@@ -7158,6 +7166,10 @@ img.et2_button_icon[src*="svg"]:hover {
   --et2-button-image-padding-left: 0;
   padding-inline-start: 0;
 }
+/*New favorite hide groups if no rights */
+et2-dialog div#add_favorite et2-select-account_ro {
+  display: none;
+}
 @keyframes fw-firstload {
   0%,
   20%,
@@ -7356,6 +7368,7 @@ img.et2_button_icon[src*="svg"]:hover {
     list-style-type: none;
     width: 100%;
     backgroud-color: white;
+    /*darkmode*/
   }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul li {
     display: -webkit-inline-box;
@@ -7385,37 +7398,60 @@ img.et2_button_icon[src*="svg"]:hover {
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home {
     display: none;
   }
-  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home {
-    background-image: url(../../node_modules/bootstrap-icons/icons/house-door.svg);
-    display: none;
-  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_prefs {
     background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_prefs et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl {
     background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_cats {
     background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_cats et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_password {
     background-image: url(../../node_modules/bootstrap-icons/icons/key.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_password et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_search {
     background-image: url(../../node_modules/bootstrap-icons/icons/search.svg);
   }
-  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl {
-    background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg);
-  }
-  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_calls {
-    background-image: url(../../node_modules/bootstrap-icons/icons/telephone.svg);
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_search et2-image {
+    display: none;
   }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout {
     background-image: url(../../node_modules/bootstrap-icons/icons/power.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_current_user {
     background-image: url(../../node_modules/bootstrap-icons/icons/people.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_current_user et2-image {
+    display: none;
+  }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode {
+    background-image: url(../../node_modules/bootstrap-icons/icons/moon-stars-fill.svg);
+  }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode et2-image {
+    display: none;
+  }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode.darkmode_on {
+    background-image: url(../../node_modules/bootstrap-icons/icons/brightness-high.svg);
+  }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode.darkmode_on et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer #egw_fw_userinfo {
     height: 50px;
     z-index: 1000;
diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less
index c5cdf20b03..a804e5521d 100644
--- a/pixelegg/css/mobile.less
+++ b/pixelegg/css/mobile.less
@@ -259,36 +259,69 @@
 						}
 					}
 					a#topmenu_home {display: none;}
-					a#topmenu_home {
-						background-image: url(../../node_modules/bootstrap-icons/icons/house-door.svg);
-						display: none;
-					}
+
 					a#topmenu_prefs {
-							background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg);
+						background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg);
+
+						et2-image {
+							display: none;
+						}
 					}
 					a#topmenu_acl {
 						background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg);
+
+						et2-image {
+							display: none;
+						}
 					}
 					a#topmenu_cats {
-						background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg);
-					}
+						 background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg);
+
+						 et2-image {
+							 display: none;
+						 }
+					 }
 					a#topmenu_password {
 						background-image: url(../../node_modules/bootstrap-icons/icons/key.svg);
+
+						et2-image {
+							display: none;
+						}
 					}
-					a#topmenu_search{
-							background-image: url(../../node_modules/bootstrap-icons/icons/search.svg);
+					a#topmenu_search {
+						background-image: url(../../node_modules/bootstrap-icons/icons/search.svg);
+						et2-image {
+							display: none;
+						}
 					}
-					a#topmenu_acl {
-						background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg);
-					}
-					a#topmenu_calls {
-						background-image: url(../../node_modules/bootstrap-icons/icons/telephone.svg);
-					}
-					a#topmenu_logout{
+
+					a#topmenu_logout {
 						background-image: url(../../node_modules/bootstrap-icons/icons/power.svg);
+						et2-image {
+							display: none;
+						}
 					}
 					a#topmenu_current_user{
 						background-image: url(../../node_modules/bootstrap-icons/icons/people.svg);
+						et2-image {
+							display: none;
+						}
+					}
+
+					/*darkmode*/
+
+					a#topmenu_darkmode {
+						background-image: url(../../node_modules/bootstrap-icons/icons/moon-stars-fill.svg);
+						et2-image {
+							display: none;
+						}
+					}
+
+					a#topmenu_darkmode.darkmode_on {
+						background-image: url(../../node_modules/bootstrap-icons/icons/brightness-high.svg);
+						et2-image {
+							display: none;
+						}
 					}
 				}
 			}
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index f36ddb2ac8..74fda7ba79 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -2219,7 +2219,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg);
 }
 #loginMainDiv div#centerBox form table.divLoginbox input[type="checkbox"] {
-  height: 25px;
+  height: 25px !important;
   margin-top: 7px;
   width: auto;
 }
diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less
index 76a706dd6b..399eb6b848 100644
--- a/pixelegg/less/layout_loginPage.less
+++ b/pixelegg/less/layout_loginPage.less
@@ -365,7 +365,7 @@ div#loginMainDiv.stockLoginBackground {
 				span.field_icons.domain {background-image: url(../../node_modules/bootstrap-icons/icons/globe2.svg);}
 				span.field_icons.language {background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg);}
 				input[type="checkbox"] {
-					height: 25px;
+					height: 25px !important;
 					margin-top: 7px;
 					width: auto;
 				}
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 4c9cce28aa..f0efb9bca4 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -2239,7 +2239,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background-image: url(../../node_modules/bootstrap-icons/icons/translate.svg);
 }
 #loginMainDiv div#centerBox form table.divLoginbox input[type="checkbox"] {
-  height: 25px;
+  height: 25px !important;
   margin-top: 7px;
   width: auto;
 }
@@ -3227,6 +3227,7 @@ div#popupMainDiv {
   padding: 8px;
   background-color: #FFFFFF;
   background-repeat: repeat-x;
+  overflow: auto;
 }
 div#popupMainDiv > * {
   margin: 0px;
@@ -4422,10 +4423,10 @@ body.scrollVertical {
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items .timezone span {
   width: 100%;
-  text-align: center;
+  text-align: left;
   display: inline-block;
   background-color: #fafafa;
-  padding: 5px 0px 5px 0px;
+  padding: 5px 0px 5px 10px;
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items .timezone select {
   width: calc(100% - 20px);
@@ -6072,8 +6073,9 @@ table.egwGridView_grid img {
   height: 16px;
 }
 table.egwGridView_grid et2-image {
-  width: 16px;
-  font-size: 16px;
+  width: 1em;
+  font-size: 1.5em;
+  display: flex;
 }
 table.egwGridView_grid tbody {
   border-bottom: 1px solid #000000;
@@ -6677,6 +6679,13 @@ span.egw_tutorial_title {
   border-top-color: #003366;
   border-top-width: 4px !important;
 }
+/**
+Addressbook sidebox grid table
+ */
+#egw_fw_sidemenu table.addressbook_view {
+  table-layout: fixed;
+  width: 100%;
+}
 #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #admin_sidebox_header.egw_fw_ui_sidemenu_entry_header_active {
   background-color: rgba(51, 51, 51, 0.3);
   border-left: 4px solid #333333 !important;
@@ -6964,6 +6973,10 @@ img.et2_button_icon[src*="svg"]:hover {
   --et2-button-image-padding-left: 0;
   padding-inline-start: 0;
 }
+/*New favorite hide groups if no rights */
+et2-dialog div#add_favorite et2-select-account_ro {
+  display: none;
+}
 @keyframes fw-firstload {
   0%,
   20%,
@@ -7162,6 +7175,7 @@ img.et2_button_icon[src*="svg"]:hover {
     list-style-type: none;
     width: 100%;
     backgroud-color: white;
+    /*darkmode*/
   }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul li {
     display: -webkit-inline-box;
@@ -7191,37 +7205,60 @@ img.et2_button_icon[src*="svg"]:hover {
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home {
     display: none;
   }
-  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home {
-    background-image: url(../../node_modules/bootstrap-icons/icons/house-door.svg);
-    display: none;
-  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_prefs {
     background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_prefs et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl {
     background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_cats {
     background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_cats et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_password {
     background-image: url(../../node_modules/bootstrap-icons/icons/key.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_password et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_search {
     background-image: url(../../node_modules/bootstrap-icons/icons/search.svg);
   }
-  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl {
-    background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg);
-  }
-  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_calls {
-    background-image: url(../../node_modules/bootstrap-icons/icons/telephone.svg);
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_search et2-image {
+    display: none;
   }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout {
     background-image: url(../../node_modules/bootstrap-icons/icons/power.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_current_user {
     background-image: url(../../node_modules/bootstrap-icons/icons/people.svg);
   }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_current_user et2-image {
+    display: none;
+  }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode {
+    background-image: url(../../node_modules/bootstrap-icons/icons/moon-stars-fill.svg);
+  }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode et2-image {
+    display: none;
+  }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode.darkmode_on {
+    background-image: url(../../node_modules/bootstrap-icons/icons/brightness-high.svg);
+  }
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_darkmode.darkmode_on et2-image {
+    display: none;
+  }
   body #egw_fw_basecontainer #egw_fw_userinfo {
     height: 50px;
     z-index: 1000;
@@ -8224,39 +8261,8 @@ table.egwGridView_grid img.et2_appicon {
     margin-top: 4px;
     margin-left: 0px;
   }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul {
-    border-left: 6px solid silver;
-  }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li {
-    /*darkmode*/
-  }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_logout {
-    background-image: url(../../node_modules/bootstrap-icons/icons/power.svg);
-  }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_home {
-    background-image: url(../../node_modules/bootstrap-icons/icons/house-door.svg);
-  }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_prefs {
-    background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg);
-  }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_acl {
-    background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg);
-  }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_cats {
-    background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg);
-  }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_password {
-    background-image: url(../../node_modules/bootstrap-icons/icons/key.svg);
-  }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_search {
-    background-image: url(../../node_modules/bootstrap-icons/icons/search.svg);
-  }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_darkmode {
-    background-image: url(../../node_modules/bootstrap-icons/icons/moon-stars-fill.svg);
-  }
-  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_darkmode.darkmode_on {
-    background-image: url(../../node_modules/bootstrap-icons/icons/brightness-high.svg);
-    filter: invert(1) hue-rotate(180deg);
+  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items {
+    /*in mobile.less*/
   }
   body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_menu {
     background-image: url(../../node_modules/bootstrap-icons/icons/arrow-left.svg);
diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less
index 9a34bed6ce..be5bbb0aa0 100644
--- a/pixelegg/mobile/fw_mobile.less
+++ b/pixelegg/mobile/fw_mobile.less
@@ -445,40 +445,7 @@
 					}
 				}
 				div#egw_fw_topmenu_items {
-					ul {
-						border-left: 6px solid silver;
-						li{
-							a#topmenu_logout{
-								background-image: url(../../node_modules/bootstrap-icons/icons/power.svg);
-							}
-							a#topmenu_home {
-								background-image: url(../../node_modules/bootstrap-icons/icons/house-door.svg);
-							}
-							a#topmenu_prefs {
-								background-image: url(../../node_modules/bootstrap-icons/icons/gear.svg);
-							}
-							a#topmenu_acl {
-								background-image: url(../../node_modules/bootstrap-icons/icons/lock.svg);
-							}
-							a#topmenu_cats {
-								background-image: url(../../node_modules/bootstrap-icons/icons/tag.svg);
-							}
-							a#topmenu_password {
-								background-image: url(../../node_modules/bootstrap-icons/icons/key.svg);
-							}
-							a#topmenu_search {
-								background-image: url(../../node_modules/bootstrap-icons/icons/search.svg);
-							}
-							/*darkmode*/
-							a#topmenu_darkmode {
-								background-image: url(../../node_modules/bootstrap-icons/icons/moon-stars-fill.svg);
-							}
-							a#topmenu_darkmode.darkmode_on {
-								background-image: url(../../node_modules/bootstrap-icons/icons/brightness-high.svg);
-								filter:invert(1) hue-rotate(180deg);
-							}
-						}
-					}
+					/*in mobile.less*/
 				}
 				div#egw_fw_menu {
 					background-image: url(../../node_modules/bootstrap-icons/icons/arrow-left.svg);