Cross-browser styling of buttons and inputs

css file additions (x-css classes) based on https://github.com/filamentgroup/select-css

3 files changed, 184 insertions, 18 deletions

diff --git a/default.css b/default.css
index 01a5209..517b08d 100644
--- a/default.css
+++ b/default.css
@@ -307,6 +307,10 @@ table.reportdata tr.pinned {
 	background-color: var(--background);

 }

 

+form {

+	vertical-align: bottom;

+	}

+

 .optionblock {

 	white-space: nowrap;

 	overflow: auto;

@@ -327,6 +331,8 @@ table.reportdata tr.pinned {
 	border-right: 1px solid var(--text);

 	padding-right: 1em;

 	cursor: default;

+	text-align: center;

+	vertical-align: bottom;

 }

 

 .menu_icon {

@@ -470,3 +476,156 @@ table.reportdata tr.pinned {
 	height: 30px;

 	cursor: ew-resize;

 }

+

+/* Cross-browser (hopefully) styling of buttons and inputs

+	Based on https://github.com/filamentgroup/select-css */

+

+/* class applies to select element itself, not a wrapper element */

+.x-css {

+	font-size: inherit;

+	font-family: inherit;

+	display: block;

+	margin: auto;

+	color: var(--text);

+	padding: .2em 1.4em .2em .3em;

+	box-sizing: border-box;

+	border: .2em solid var(--header);

+	border-radius: .3em;

+	transition: 0.15s all linear;

+	-moz-appearance: none;

+	-webkit-appearance: none;

+	appearance: none;

+	background-image:

+	/* Note: background-image uses 2 urls.

+		The first is an svg data uri for the arrow icon.

+		The second is the gradient for the icon.

+			If you want to change the color, be sure to use `%23` instead of `#`, since it's a url.

+		You can also swap in a different svg icon or an external image reference */

+		url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%233DAEE9%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),

+		linear-gradient(to bottom, var(--background) 0%,var(--selected) 100%);

+	background-repeat: no-repeat, repeat;

+	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/

+	background-position: right .5em top 50%, 0 0;

+	/* icon size, then gradient */

+	background-size: .65em auto, 100%;

+}

+

+.x-css-left-align {

+	margin: 0;

+}

+.x-css option {

+	color: var(--text_over_colorbg);

+}

+

+.x-css label {

+	padding: 0 .5em 0 0;

+}

+

+div.x-css,

+button.x-css,

+input[type=submit].x-css,

+input[type=number].x-css,

+input[type=radio].x-css {

+	display: inline-block;

+	padding: .2em .5em;

+	background-image: linear-gradient(to bottom, var(--background) 0%,var(--selected) 100%);

+	background-repeat: repeat;

+	background-position: 0 0;

+	background-size: 100%;

+}

+

+input[type=radio].x-css {

+	margin: 0 0 0 .15em;

+}

+

+/* button.x-css,

+input[type=submit].x-css {

+	border: 2px outset var(--shadow);

+} */

+

+div.x-css {

+	padding: .25em .3em .1em .3em;

+}

+

+input[type=number].x-css {

+	padding: .1em .3em;

+}

+

+input[type=radio].x-css,

+label.x-css {

+	background-image: unset;

+	padding: 0;

+	border-radius: 49%;

+	width: .8em;

+	height: .8em;

+	border: .15em solid var(--text);

+	}

+

+button:active,

+input[type=submit]:active {

+	transform: translate(0.08em, 0.1em);

+}

+

+input[type=radio].x-css:checked {

+		background-color: #3daee9;

+	}

+

+/* Hide arrow icon in IE browsers */

+.x-css::-ms-expand {

+	display: none;

+}

+

+/* Hover style */

+.x-css:hover {

+	border-color: var(--shadow);

+}

+

+.x-css:focus,

+.menu_icon:focus,

+button:focus,

+input[type=number]:focus,

+input[type=submit]:focus,

+input[type=radio]:focus {

+	/* border-color: #aaa; */

+	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */

+	box-shadow: 0 0 1px 2px rgba(59, 153, 252, .7);

+	box-shadow: 0 0 0 2px -moz-mac-focusring;

+	color: var(--text);

+	outline: none;

+}

+

+/* Support for rtl text, explicit support for Arabic and Hebrew */

+*[dir="rtl"] .x-css,

+:root:lang(ar) .x-css,

+:root:lang(iw) .x-css {

+	background-position: left .7em top 50%, 0 0;

+	padding: .6em .8em .5em 1.4em;

+}

+

+/* Disabled styles */

+select.x-css:disabled,

+select.x-css[aria-disabled=true] {

+	color: var(--shadow);

+	background-image:

+	/* Note: background-image uses 2 urls.

+		The first is an svg data uri for the arrow icon.

+		The second is the gradient for the icon.

+			If you want to change the color, be sure to use `%23` instead of `#`, since it's a url.

+		You can also swap in a different svg icon or an external image reference */

+		url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),

+		linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);

+}

+

+.x-css:disabled,

+.x-css[aria-disabled=true] {

+	background-image: linear-gradient(to bottom, var(--selected) 0%,var(--hover) 100%);

+	color: var(--shadow);

+}

+

+.x-css:disabled:hover,

+.x-css[aria-disabled=true] {

+	border: .1em solid var(--hover);

+}

+

+/* Will have to work on this if ever need to disable radio buttons */

+/* input[type=radio].x-css {} */

diff --git a/dmarcts-report-viewer-options.php b/dmarcts-report-viewer-options.php
index 7aed408..f33cba0 100644
--- a/dmarcts-report-viewer-options.php
+++ b/dmarcts-report-viewer-options.php
@@ -101,10 +101,10 @@ function html ($domains = array(), $orgs = array(), $dmarc_result_select = array
 	$html[] = "			</table>";
 
 	$html[] = "			<div style='text-align: center;'>";
-	$html[] = "				<button type=\"button\" onclick=\"cancelOptions();\" title=\"Cancel changes and return to reports.\">Cancel</button>";
+	$html[] = "				<button type=\"button\" class=\"x-css\" onclick=\"cancelOptions();\" title=\"Cancel changes and return to reports.\">Cancel</button>";
 
-	$html[] = "				<button type=\"button\" onclick=\"resetOptions()\" title=\"Reset all options to their default values.\">Reset</button>";
-	$html[] = "				<input type=\"submit\" title=\"Save changes and return to reports.\" value=\"Save\">";
+	$html[] = "				<button type=\"button\" class=\"x-css\" onclick=\"resetOptions()\" title=\"Reset all options to their default values.\">Reset</button>";
+	$html[] = "				<input type=\"submit\" class=\"x-css\" title=\"Save changes and return to reports.\" value=\"Save\">";
 	$html[] = "			</div>";
 	$html[] = "		</form>";
 	$html[] = "		<br /><br />";
@@ -165,7 +165,7 @@ function create_input_text($option_name, $option = array()) {
 			break;
 	}
 
-	$html[] = "						<input $value type=" . $option["option_type"] . " id=" . $option_name . " name=" . $option_name . $extra_options . ">" . $after . "<br>";
+	$html[] = "						<input $value type=" . $option["option_type"] . " class='x-css' id=" . $option_name . " name=" . $option_name . $extra_options . ">" . $after . "<br>";
 	$html[] = "					</td>";
 	$html[] = "				</tr>";
 }
@@ -184,9 +184,12 @@ function create_input_radio($option_name) {
 	$html[] = "						<span class='option_description'>" . $options[$option_name]["option_description"] . "</span>";
 	$html[] = "					</td>";
 	$html[] = "					<td class='right_column'>";
+	$html[] = "					<div class='x-css'>";
 	for ($i = 0; $i < sizeof($values); $i+=2) {
-		$html[] =	"						<input type=" . $options[$option_name]["option_type"] . " id=" . strtolower(str_replace(" ", "_", $values[$i+1])) . " name=" . $option_name . ($options[$option_name]["option_type"] == "checkbox" ? "[]" : "" ) . " value='" . $values[$i] . "'" . checked($option_name, $values[$i]) . "><label for=" . $option_name . ">" . $values[$i+1] . " </label><br />";
+		$html[] =	"						<input type=" . $options[$option_name]["option_type"] . " class='x-css' id=" . $option_name . $i . " name=" . $option_name . ($options[$option_name]["option_type"] == "checkbox" ? "[]" : "" ) . " value='" . $values[$i] . "'" . checked($option_name, $values[$i]) . ">";
+		$html[] =	"						<label for=" . $option_name . $i . ">" . $values[$i+1] . " </label>";
 	}
+	$html[] = "					</div>";
 	$html[] = "					</td>";
 	$html[] = "				</tr>";
 }
@@ -232,7 +235,7 @@ function create_select($option_name, $option = array(), $var) {
 		$js = " onchange='change_stylesheet();'";
 	}
 
-	$html[] = "						<select name='" . $option_name . "' id='sel" . $option_name . "'" . $js . ">";
+	$html[] = "						<select class='x-css x-css-left-align' name='" . $option_name . "' id='sel" . $option_name . "'" . $js . ">";
 	foreach ($var as $key => $value) {
 		if ( $cookie_options[$option_name] == $key ) {
 			$selected = "selected";
diff --git a/dmarcts-report-viewer.php b/dmarcts-report-viewer.php
index 2599b0f..87b089e 100644
--- a/dmarcts-report-viewer.php
+++ b/dmarcts-report-viewer.php
@@ -78,16 +78,20 @@ function html ($domains = array(), $orgs = array(), $periods = array() ) {
 
 	//	Host lookup option
 	//	--------------------------------------------------------------------------
-	$html[] = "<div class='options'><span class='optionlabel'>Hostname(s):</span><br>";
-	$html[] = "	<input type=\"radio\" name=\"HostLookup\" value=\"1\" onclick=\"showReport(current_report)\"" . ($cookie_options['HostLookup'] ? " checked=\"checked\"" : "" ) . "> on";
-	$html[] = "	<input type=\"radio\" name=\"HostLookup\" value=\"0\" onclick=\"showReport(current_report)\"" . ($cookie_options['HostLookup'] ? "" : " checked=\"checked\"" ) . "> off";
-	$html[] = "</div>";
+	$html[] = "		<div class='options'><span class='optionlabel'>Hostname(s):</span><br>";
+	$html[] = "			<div class='x-css'>";
+	$html[] = "				<input type=\"radio\" class='x-css' id='HostLookupOn' name=\"HostLookup\" value=\"1\" onclick=\"showReport(current_report)\"" . ($cookie_options['HostLookup'] ? " checked=\"checked\"" : "" ) . ">";
+	$html[] = "				<label for='HostLookupOn'>On</label>";
+	$html[] = "				<input type=\"radio\" class='x-css' id='HostLookupOff' name=\"HostLookup\" value=\"0\" onclick=\"showReport(current_report)\"" . ($cookie_options['HostLookup'] ? "" : " checked=\"checked\"" ) . ">";
+	$html[] = "				<label for='HostLookupOff'>Off</label>";
+	$html[] = "			</div>";
+	$html[] = "		</div>";
 
 
 	// 	DMARC select
 	// 	--------------------------------------------------------------------------
 		$html[] = "<div class='options'><span class='optionlabel'>DMARC Result:</span><br>";
-		$html[] = "<select name=\"DMARC\" id=\"selDMARC\" onchange=\"showReportlist('reportlistTbl')\">";
+		$html[] = "<select class='x-css' name=\"DMARC\" id=\"selDMARC\" onchange=\"showReportlist('reportlistTbl')\">";
 		$html[] = "<option " . ( $cookie_options['DMARC'] ? "" : "selected=\"selected\" " ) . "value=\"all\">[all]</option>";
 		foreach($dmarc_result as $key => $value) {
 			$html[] = sprintf("<option class='" . $value['color'] . "' %s value=\"%s\">%s</option>",
@@ -103,7 +107,7 @@ function html ($domains = array(), $orgs = array(), $periods = array() ) {
 		// 	Report Status select
 		// 	--------------------------------------------------------------------------
 			$html[] = "<div class='options'><span class='optionlabel'>Report Status:</span><br>";
-			$html[] = "<select name=\"ReportStatus\" id=\"selReportStatus\" onchange=\"showReportlist('reportlistTbl')\">";
+			$html[] = "<select class='x-css' name=\"ReportStatus\" id=\"selReportStatus\" onchange=\"showReportlist('reportlistTbl')\">";
 			$html[] = "<option " . ( $cookie_options['ReportStatus'] ? "" : "selected=\"selected\" " ) . "value=\"all\">[all]</option>";
 			foreach($dmarc_result as $key => $value) {
 				$html[] = sprintf("<option class='color: " . $value['color'] . "' %s value=\"%s\">%s</option>",
@@ -120,7 +124,7 @@ function html ($domains = array(), $orgs = array(), $periods = array() ) {
 	// 	--------------------------------------------------------------------------
 	if ( count( $periods ) > 0 ) {
 		$html[] = "<div class='options'><span class='optionlabel'>Month:</span><br>";
-		$html[] = "<select name=\"Period\" id=\"selPeriod\" onchange=\"showReportlist('reportlistTbl')\">";
+		$html[] = "<select class='x-css' name=\"Period\" id=\"selPeriod\" onchange=\"showReportlist('reportlistTbl')\">";
 		$html[] = "<option value=\"all\"" . ($cookie_options['Period'] ? "" : " selected=\"selected\"") . ">[all]</option>";
 
 		for ($p = 0; $p < sizeof($periods); $p++) {
@@ -140,7 +144,7 @@ function html ($domains = array(), $orgs = array(), $periods = array() ) {
 	//	--------------------------------------------------------------------------
 	if ( count( $domains ) >= 1 ) {
 		$html[] = "<div class='options'><span class='optionlabel'>Domain(s):</span><br>";
-		$html[] = "<select name=\"Domain\" id=\"selDomain\" onchange=\"showReportlist('reportlistTbl')\">";
+		$html[] = "<select class='x-css' name=\"Domain\" id=\"selDomain\" onchange=\"showReportlist('reportlistTbl')\">";
 		$html[] = "<option " . ( $cookie_options['Domain'] ? "" : "selected=\"selected\" " ) . "value=\"all\">[all]</option>";
 
 		foreach( $domains as $d) {
@@ -156,7 +160,7 @@ function html ($domains = array(), $orgs = array(), $periods = array() ) {
 	//	--------------------------------------------------------------------------
 	if ( count( $orgs ) > 0 ) {
 		$html[] = "<div class='options'><span class='optionlabel'>Reporter(s):</span><br>";
-		$html[] = "<select name=\"Organisation\" id=\"selOrganisation\" onchange=\"showReportlist('reportlistTbl')\">";
+		$html[] = "<select class='x-css' name=\"Organisation\" id=\"selOrganisation\" onchange=\"showReportlist('reportlistTbl')\">";
 		$html[] = "<option " . ( $cookie_options['Organisation'] ? "" : "selected=\"selected\" " ) . "selected=\"selected\" value=\"all\">[all]</option>";
 
 		foreach( $orgs as $o) {
@@ -170,18 +174,18 @@ function html ($domains = array(), $orgs = array(), $periods = array() ) {
 	//	Refresh button
 	//	--------------------------------------------------------------------------
 	$html[] = "<div class='options'>";
-	$html[] = "&nbsp;<br><button type=\"button\" onclick=\"refresh_report_list()\" title=\"Refreshes data with current filter.\">Refresh</button>";
+	$html[] = "&nbsp;<br><button type=\"button\" class=\"x-css\" onclick=\"refresh_report_list()\" title=\"Refreshes data with current filter.\" tabindex='0'>Refresh</button>";
 	$html[] = "</div>";
 
 	//	Reset button
 	//	--------------------------------------------------------------------------
 	$html[] = "<div class='options'>";
-	$html[] = "&nbsp;<br><button type=\"button\" onclick=\"reset_report_list()\" title=\"Resets the filter to show all records and refreshes the data.\">Reset</button>";
+	$html[] = "&nbsp;<br><button type=\"button\" class=\"x-css\" onclick=\"reset_report_list()\" title=\"Resets the filter to show all records and refreshes the data.\" tabindex='0'>Reset</button>";
 	$html[] = "</div>";
 
 	// Configuration Settings icon
 	//	--------------------------------------------------------------------------
-	$html[] = "<div class='menu_icon' onclick=\"optionMenu(this);\">&#8801;</div>";
+	$html[] = "<img class='menu_icon' src='menu_icon_" . $cookie_options['cssfile'] . ".png' tabindex='0' onclick='optionMenu(this);'>";
 
 	//	End optionblock
 	//	--------------------------------------------------------------------------