Mobile dialog style changes

- dialog takes full width x height
- footer on top with large, white icon-only buttons
- header has no close button

pixelegg/mobile/fw_mobile.css

@@ -8324,64 +8324,48 @@ table.egwGridView_grid img.et2_appicon {
   }
   body et2-dialog::part(panel) {
     max-width: 100%;
+    max-height: 100%;
+    height: 100%;
   }
-  body div.ui-dialog {
+  body et2-dialog::part(header) {
-    width: 100% !important;
+    color: white;
-    height: 100% !important;
+    background: #0c5da5;
-    left: 0 !important;
+    height: 35px;
-    top: 0 !important;
+    padding: 0;
+    padding-left: 5px;
+    padding-top: 15px;
+    border-radius: 0;
   }
-  body div.ui-dialog-content {
+  body et2-dialog::part(close-button) {
-    height: 87% !important;
+    display: none;
-    margin-top: 60px !important;
-    padding: 0 !important;
-    font-size: 12pt;
   }
-  body .ui-dialog .ui-dialog-buttonpane {
+  body et2-dialog::part(footer) {
-    position: fixed !important;
+    order: -1;
-    bottom: 0 !important;
-    left: 0 !important;
-    display: block !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    height: 50px;
     box-shadow: 0px 4px 5px 2px silver;
     width: 100%;
-    z-index: 1;
+    margin-top: 0px;
     background: #0c5da5;
   }
-  body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+  body et2-dialog et2-button[slot="footer"] {
-    float: right;
+    padding-left: 500px;
+    width: 50px;
     height: 50px;
   }
-  body .ui-dialog .ui-dialog-buttonpane button {
+  body et2-dialog et2-button[slot="footer"] et2-image {
-    height: 35px;
+    height: 24px;
+    width: 24px;
+    max-width: initial;
+    position: absolute;
+    left: 0;
     -webkit-filter: brightness(0) invert(1) !important;
     filter: brightness(0) invert(1) !important;
     background-color: transparent !important;
     background-size: 24px 24px !important;
     border: none;
-    float: right !important;
   }
-  body .ui-dialog .ui-dialog-buttonpane button span {
+  body et2-dialog et2-button[slot="footer"] et2-image span {
     padding-left: 20px;
   }
-  body .ui-dialog .ui-dialog-titlebar {
-    position: fixed;
-    color: white;
-    z-index: 100;
-    background: #0c5da5;
-    width: 100%;
-    height: 35px;
-    padding: 0;
-    padding-left: 5px;
-    margin: -3px;
-    padding-top: 15px;
-    border-radius: 0;
-  }
-  body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
-    display: none;
-  }
   body et2-button.plus_button {
     position: fixed !important;
     right: 15px;

pixelegg/mobile/fw_mobile.less

@@ -591,56 +591,53 @@
 
 	  et2-dialog::part(panel) {
 		max-width: 100%;
-	  }
+		max-height: 100%;
-	  div.ui-dialog {
+		height: 100%;
-		width: 100% !important;
-		height: 100% !important;
-		left: 0 !important;
-		top: 0 !important;
 	  }
 
-	  div.ui-dialog-content {
+	  et2-dialog::part(header) {
-		height: 87% !important;
-		margin-top: 60px !important;
-		padding: 0 !important;
-			.mob-fontsize-l;
-		}
-		.ui-dialog .ui-dialog-buttonpane {
-			position: fixed !important;
-			bottom:0 !important;
-			left:0 !important;
-			display:block !important;
-			padding:0 !important;
-			margin: 0 !important;
-			height: 50px;
-			box-shadow: 0px 4px 5px 2px silver;
-			width: 100%;
-			z-index:1;
-			.ui-dialog-buttonset {float:right;height:50px;}
-			button {
-				height:35px;
-				.white-svg;
-				float: right !important;
-				span {padding-left: 20px;}
-			}
-			background: #0c5da5;
-		}
-		.ui-dialog .ui-dialog-titlebar {
-			position: fixed;
 		color: white;
-			z-index: 100;
 		background: #0c5da5;
-			width: 100%;
 		height: 35px;
 		padding: 0;
 		padding-left: 5px;
-			margin: -3px;
 		padding-top: 15px;
 		border-radius: 0;
-			.ui-dialog-titlebar-close {
+
+	  }
+
+	  et2-dialog::part(close-button) {
 		display: none;
 	  }
+
+	  et2-dialog::part(footer) {
+		order: -1;
+		box-shadow: 0px 4px 5px 2px silver;
+		width: 100%;
+		margin-top: 0px;
+
+		background: #0c5da5;
 	  }
+
+	  et2-dialog et2-button[slot="footer"] {
+		padding-left: 500px;
+		width: 50px;
+		height: 50px;
+
+		et2-image {
+		  height: 24px;
+		  width: 24px;
+		  max-width: initial;
+		  position: absolute;
+		  left: 0;
+		  .white-svg;
+
+		  span {
+			padding-left: 20px;
+		  }
+		}
+	  }
+
 	  et2-button.plus_button {
 		position: fixed !important;
 		right: 15px;
@@ -657,31 +654,42 @@
 		background-size: 24px 24px;
 		margin: 0;
 		padding: 0;
+
 		&:hover, &:active {
 		  background-color: #0c5da5;
 		}
 	  }
-		et2-button.plus_button::part(base) {display: none;}
+
+	  et2-button.plus_button::part(base) {
+		display: none;
+	  }
+
 	  .et2_nextmatch {
 		.nextmatch_sortheader {
 		  padding-right: 0px;
 		  margin-right: 0px;
 		}
-			.nextmatch_header_row, .nextmatch_header
+
-			{
+		.nextmatch_header_row, .nextmatch_header {
 		  flex-direction: column;
+
 		  div.header_row_right {
 			position: absolute;
 			display: block;
-					top:0;
+			top: 0;
 			flex-direction: column;
 		  }
+
 		  .filtersContainer {
-					width:100%;
+			width: 100%;
-					margin-top:50px;
+			margin-top: 50px;
 			flex-direction: column;
-					et2-select, et2-select-cat {max-width: 100%}
+
+			et2-select, et2-select-cat {
+			  max-width: 100%
 			}
+		  }
+
 		  background-color: background-color-egw-dark;
 
 		  et2-select, et2-select-cat {
@@ -694,12 +702,13 @@
 			border-right: none;
 			border-radius: 0;
 			border-bottom: none;
-					padding-left:10px;
+			padding-left: 10px;
-					max-width:none;
+			max-width: none;
 			background-color: transparent;
 		  }
+
 		  label {
-					display:block;
+			display: block;
 					width: 100%;
 					float: left;
 					.mob-fontsize-l;