From f8f04071be38584426220e0dce09e1805053a38f Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Fri, 22 Apr 2022 13:07:22 -0600
Subject: [PATCH] CSS / Layout cleanup - Remove margin from input,button,select
 - Fix some spacing issues - Switch selects from display:inline-block to
 display:block so they take up all parent's space - Let background (required)
 color show through select tag - Some layout tweaks on mail account template

---
 admin/templates/default/mailaccount.xet    | 35 +++++------
 api/js/etemplate/Et2Select/Et2Select.ts    |  2 +-
 api/templates/default/etemplate2.css       |  7 ---
 pixelegg/css/mobile.css                    |  2 +-
 pixelegg/css/monochrome.css                | 16 ++---
 pixelegg/css/pixelegg.css                  | 70 ++++++++++------------
 pixelegg/less/etemplate2.less              |  6 --
 pixelegg/less/layout_content_elements.less | 16 ++---
 8 files changed, 69 insertions(+), 85 deletions(-)

diff --git a/admin/templates/default/mailaccount.xet b/admin/templates/default/mailaccount.xet
index 61b16385fa..92db55609f 100644
--- a/admin/templates/default/mailaccount.xet
+++ b/admin/templates/default/mailaccount.xet
@@ -75,14 +75,14 @@
 					<textbox blur="Hostname or IP" id="acc_imap_host" size="32" maxlength="128" span="all"/>
 				</row>
 				<row>
-					<description for="acc_imap_ssl" value="Secure connection"/>
-					<hbox>
-						<select class="emailadmin_ssl" id="acc_imap_ssl" needed="1" onchange="app.admin.wizard_imap_ssl_onchange"/>
-						<textbox type="integer" label="Port" id="acc_imap_port" needed="1" class="emailadmin_port"/>
-					</hbox>
-					<description/>
-					<description/>
-				</row>
+                    <description for="acc_imap_ssl" value="Secure connection"/>
+                    <hbox>
+                        <select class="emailadmin_ssl" id="acc_imap_ssl" needed="1"
+                                onchange="app.admin.wizard_imap_ssl_onchange"/>
+                    </hbox>
+                    <description for="acc_imap_port" value="Port"/>
+                    <textbox type="integer" id="acc_imap_port" needed="1" class="emailadmin_port"/>
+                </row>
 				<row class="emailadmin_no_single">
 					<groupbox span="all" class="emailadmin_imap_admin">
 						<caption label="IMAP administration"/>
@@ -327,7 +327,7 @@
 			<rows>
 				<row disabled="!@accounts" class="dialogHeader">
 					<description for="acc_id" value="Mail account"/>
-					<select id="acc_id" onchange="app.admin.change_account" class="et2_fullWidth"/>
+                    <select id="acc_id" onchange="app.admin.change_account" class="et2_fullWidth" span="2"/>
 					<description/>
 				</row>
 				<row class="dialogHeader">
@@ -335,14 +335,15 @@
 					<textbox id="acc_name" needed="1" size="80" class="et2_fullWidth"/>
 					<description align="right" value="$cont[acc_id]" class="emailadmin_diagnostic"/>
 				</row>
-				<row class="emailadmin_no_user dialogHeader2">
-					<description for="account_id" value="Valid for"/>
-					<hbox>
-						<select-account account_type="both" id="account_id" onchange="app.admin.account_hide_not_applying" empty_label="Everyone" expand_multiple_rows="4"/>
-						<checkbox label="account editable by user" id="acc_user_editable"/>
-					</hbox>
-					<description/>
-				</row>
+                <row class="emailadmin_no_user dialogHeader2">
+                    <description for="account_id" value="Valid for"/>
+                    <hbox span="all">
+                        <select-account account_type="both" id="account_id"
+                                        onchange="app.admin.account_hide_not_applying" empty_label="Everyone"
+                                        expand_multiple_rows="4"/>
+                        <checkbox label="account editable by user" id="acc_user_editable"/>
+                    </hbox>
+                </row>
 				<row>
 					<tabbox id="tabs" span="all" tab_height="420">
 						<tabs>
diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts
index 6f308ba903..764d14ffb3 100644
--- a/api/js/etemplate/Et2Select/Et2Select.ts
+++ b/api/js/etemplate/Et2Select/Et2Select.ts
@@ -27,7 +27,7 @@ export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
 			...super.styles,
 			css`
 			:host {
-				display: inline-block;
+				display: block;
 			}
 			select {
 				width: 100%
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 6d9b7835b5..ef5212d29e 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -36,12 +36,6 @@
 /**
  * Basic rules
  */
-input,
-button,
-select {
-    margin: 1px;
-    padding: 0px;
-}
 
 /*Hide element*/
 .hideme {
@@ -588,7 +582,6 @@ ul.et2_selectbox {
 /* padding between selectbox/textbox and it's label */
 input, select {
     text-indent: 5px;
-    max-width: 99% !important;
 }
 
 .et2_selectbox li {
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 0258cd701c..cdaf9c8dbc 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -3098,7 +3098,7 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
   margin: 0;
-  background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
+  background: url(../images/arrow_down.svg) no-repeat center right;
   background-size: 8px auto;
   background-position-x: calc(100% - 8px);
 }
diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css
index b99af04645..f622e6df2c 100644
--- a/pixelegg/css/monochrome.css
+++ b/pixelegg/css/monochrome.css
@@ -3073,14 +3073,14 @@ div.selectbox-wrapper ul li {
   cursor: pointer;
 }
 select {
-  position: relative;
-  padding-right: 20px !important;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  margin: 0;
-  background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
-  background-size: 8px auto;
-  background-position-x: calc(100% - 8px);
+    position: relative;
+    padding-right: 20px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    margin: 0;
+    background: url(../images/arrow_down.svg) no-repeat center right;
+    background-size: 8px auto;
+    background-position-x: calc(100% - 8px);
 }
 select:active {
   background: #ffffff url(../images/arrow_up.svg) no-repeat center right;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index d01ee5f7ae..b7da79dad3 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -178,35 +178,31 @@
   /**
  * Top level
  */
-  .et2_container {
-    padding: 0px;
-    background-color: transparent;
-  }
-  .et2_container > div:not([class]) {
-    height: 100%;
-  }
-  /**
- * Basic rules
- */
-  input,
-  button,
-  select {
-    margin: 1px;
-    /*-webkit-appearance: none;*/
-  }
-  /**
- * img gray filter
- */
-  img.et2_appicon,
-  .et2_appicon img,
-  table.egwGridView_grid img.et2_appicon {
-    /*filter grey*/
-    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-    -webkit-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-    -moz-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-    -ms-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-    -o-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-    filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
+    .et2_container {
+        padding: 0px;
+        background-color: transparent;
+    }
+
+    .et2_container > div:not([class]) {
+        height: 100%;
+    }
+
+    /**
+   * Basic rules
+   */
+    /**
+   * img gray filter
+   */
+    img.et2_appicon,
+    .et2_appicon img,
+    table.egwGridView_grid img.et2_appicon {
+        /*filter grey*/
+        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
+        -webkit-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
+        -moz-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
+        -ms-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
+        -o-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
+        filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
     /*filter: url(grayscale.svg);  Firefox 4+ */
     filter: gray;
     /* IE 6-9 */
@@ -3082,14 +3078,14 @@ div.selectbox-wrapper ul li {
   cursor: pointer;
 }
 select {
-  position: relative;
-  padding-right: 20px !important;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  margin: 0;
-  background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
-  background-size: 8px auto;
-  background-position-x: calc(100% - 8px);
+    position: relative;
+    padding-right: 20px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    margin: 0;
+    background: url(../images/arrow_down.svg) no-repeat center right;
+    background-size: 8px auto;
+    background-position-x: calc(100% - 8px);
 }
 select:active {
   background: #ffffff url(../images/arrow_up.svg) no-repeat center right;
diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less
index eb2ad0a303..b262b526ac 100755
--- a/pixelegg/less/etemplate2.less
+++ b/pixelegg/less/etemplate2.less
@@ -29,12 +29,6 @@
 /**
  * Basic rules
  */
-input,button,select {
-    margin: 1px;
-    //padding: 0px;
-    // switch off for Safari + Chrome
-    /*-webkit-appearance: none;*/
-}
 
 /**
  * img gray filter
diff --git a/pixelegg/less/layout_content_elements.less b/pixelegg/less/layout_content_elements.less
index a2559871e0..deb3508432 100755
--- a/pixelegg/less/layout_content_elements.less
+++ b/pixelegg/less/layout_content_elements.less
@@ -96,14 +96,14 @@ div.selectbox-wrapper {
 }
 
 select {
-	position:relative;
-	padding-right: 20px !important;
-	-webkit-appearance:none;
-	-moz-appearance: none;
-	margin:0;
-	background:  #ffffff url(../images/arrow_down.svg) no-repeat center right;
-	background-size: 8px auto;
-	background-position-x: ~"calc(100% - 8px)";
+  position: relative;
+  padding-right: 20px !important;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  margin: 0;
+  background: url(../images/arrow_down.svg) no-repeat center right;
+  background-size: 8px auto;
+  background-position-x: ~"calc(100% - 8px)";
 }
 select:active {
 	background:  #ffffff url(../images/arrow_up.svg) no-repeat center right;