From c1a4cceee17cb57f6447d47b5e38de457363e59f Mon Sep 17 00:00:00 2001
From: ralf <rb@egroupware.org>
Date: Thu, 19 Sep 2024 14:59:22 +0200
Subject: [PATCH] fix and align (+) icon for mobile

---
 pixelegg/less/def_mobile.less  | 20 ++++++++++++++++++--
 pixelegg/mobile/fw_mobile.css  | 24 +++++++++++++++++++++---
 pixelegg/mobile/fw_mobile.less | 14 +++++++++++---
 3 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/pixelegg/less/def_mobile.less b/pixelegg/less/def_mobile.less
index 9a1bc75b06..50581b7c12 100644
--- a/pixelegg/less/def_mobile.less
+++ b/pixelegg/less/def_mobile.less
@@ -10,7 +10,23 @@
  * @version $Id: $
  */
 
-
+/* bootstrap-icons as font use with content taken from node_modules/bootstrap-icons/font/bootstrap-icons.css
+div::before {
+    .bootstrap-icons;
+    content: "\f231";	// caret-right-fill
+} */
+.bootstrap-icons {
+  display: inline-block;
+  font-family: bootstrap-icons !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: -.125em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 @mobile-fontsize-base : 10pt;
 
 .mob-fontsize-xxs {font-size: @mobile-fontsize-base*0.6;}
@@ -29,4 +45,4 @@
 .mob-bg-applist-header {background-color:#486F93;}
 
 
-/*border colors*/
+/*border colors*/
\ No newline at end of file
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 089957dba7..51343c6ba8 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -7,7 +7,6 @@
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Hadi Nategh <hn@stylite.de>
  * @package pixelegg
- * @version $Id$
  */
 /**
  * EGroupware: Darkmode theme
@@ -8429,6 +8428,16 @@ table.egwGridView_grid img.et2_appicon {
     display: block;
   }
   body et2-button.plus_button {
+    display: inline-block;
+    font-family: bootstrap-icons !important;
+    font-style: normal;
+    font-weight: normal !important;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    vertical-align: -0.125em;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     position: fixed !important;
     right: 15px;
     bottom: 15px;
@@ -8439,9 +8448,7 @@ table.egwGridView_grid img.et2_appicon {
     z-index: 100;
     background-color: #0c5da5;
     border: none;
-    background-image: url(../../node_modules/bootstrap-icons/icons/plus-lg.svg) !important;
     background-repeat: no-repeat;
-    background-size: 24px 24px;
     margin: 0;
     padding: 0;
   }
@@ -8449,6 +8456,17 @@ table.egwGridView_grid img.et2_appicon {
   body et2-button.plus_button:active {
     background-color: #0c5da5;
   }
+  body et2-button.plus_button::before {
+    color: white;
+    content: "\f64d";
+    font-size: 32px;
+    line-height: 60px;
+    color: #fff;
+    text-align: center;
+    width: 60px;
+    font-weight: bolder;
+    display: inline-block;
+  }
   body et2-button.plus_button::part(base) {
     display: none;
   }
diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less
index 8cdde14e57..5c74508189 100644
--- a/pixelegg/mobile/fw_mobile.less
+++ b/pixelegg/mobile/fw_mobile.less
@@ -7,7 +7,6 @@
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Hadi Nategh <hn@stylite.de>
  * @package pixelegg
- * @version $Id$
  */
 @import "../less/darkmode.less";
 @import "../css/mobile.less";
@@ -676,6 +675,7 @@
 		  display: block;
 	  }
 	  et2-button.plus_button {
+		.bootstrap-icons;
 		position: fixed !important;
 		right: 15px;
 		bottom: 15px;
@@ -686,15 +686,23 @@
 		z-index: 100;
 		background-color: #0c5da5;
 		border: none;
-		background-image: url(../../node_modules/bootstrap-icons/icons/plus-lg.svg) !important;
 		background-repeat: no-repeat;
-		background-size: 24px 24px;
 		margin: 0;
 		padding: 0;
 
 		&:hover, &:active {
 		  background-color: #0c5da5;
 		}
+		&::before {
+			color: white;
+			content: "\f64d";	// plus-lg
+			font-size: 32px;
+			line-height: 60px;
+			color: #fff;
+			text-align: center;
+			width: 60px;
+			font-weight: bolder;
+			display: inline-block		}
 	  }
 
 	  et2-button.plus_button::part(base) {