Merge pull request #70 from jnew-gh/css-styling

Cross-browser css styling

6 files changed, 221 insertions, 48 deletions

diff --git a/default.css b/default.css
index 4627e0e..517b08d 100644
--- a/default.css
+++ b/default.css
@@ -22,19 +22,21 @@ this program.  If not, see <http://www.gnu.org/licenses/>.
 

 /* All colors are controlled by the following section */

 :root {

-  --background: white;

-  --text: black;

-  --text_over_colorbg: #000000;

-  --header: silver;

-  --link: #0000EE;

-  --link_visited: #551A8B;

-  --hover: whitesmoke;

-  --shadow: grey;

-  --selected: gainsboro;

-  --green: #00FF00;

-  --yellow: #FFFF00;

-  --orange: #FFA500;

-  --red: #FF0000;

+	/* Ordered from darkest the lightest */

+	--text: black;

+	--text_over_colorbg: #000000;

+	--shadow: grey;

+	--header: silver;

+	--selected: gainsboro;

+	--hover: whitesmoke;

+	--background: white;

+

+	--link: #0000EE;

+	--link_visited: #551A8B;

+	--green: #00FF00;

+	--yellow: #FFFF00;

+	--orange: #FFA500;

+	--red: #FF0000;

 	--xml_highlighted: lightcyan;

 	--xml_pinned: #99ffff;

 }

@@ -305,6 +307,10 @@ table.reportdata tr.pinned {
 	background-color: var(--background);

 }

 

+form {

+	vertical-align: bottom;

+	}

+

 .optionblock {

 	white-space: nowrap;

 	overflow: auto;

@@ -325,17 +331,22 @@ table.reportdata tr.pinned {
 	border-right: 1px solid var(--text);

 	padding-right: 1em;

 	cursor: default;

+	text-align: center;

+	vertical-align: bottom;

 }

 

 .menu_icon {

-	display: inline-block;

+	width: 1.5em;

 	cursor: default;

-	font-size: 300%;

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

+	border-radius: .3em;

+	padding: .3em;

+	vertical-align: bottom;

+	transition: 0.15s all linear;

 }

 

 .menu_icon:hover{

-	/* font-weight: bold; */

-	background-color: var(--selected);

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

 }

 

 .menu {

@@ -465,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 ba3ec40..180fee9 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
 	//	--------------------------------------------------------------------------
diff --git a/dusk2dawn.css b/dusk2dawn.css
index 87afb77..da96437 100644
--- a/dusk2dawn.css
+++ b/dusk2dawn.css
@@ -25,19 +25,21 @@ this program.  If not, see <http://www.gnu.org/licenses/>.
 
 /* All colors are controlled by the following section */
 :root {
-  --background: #292c2f;
-  --text: #ffffff;
-  --text_over_colorbg: #000000;
-  --header: #4f555b;
-  --link: #ff69b4;
-  --link_visited: #ff69b4;
-  --hover: #9aa1a8;
-  --shadow: #e1e9f0;
-  --selected: #767c83;
-  --green: #85ff6a;
-  --yellow: #ffff64;
-  --orange: #ffb826;
-  --red: #ff4444;
+	/* Ordered from darkest to lightest */
+	--text_over_colorbg: #000000;
+	--background: #292c2f;
+	--header: #4f555b;
+	--selected: #767c83;
+	--hover: #9aa1a8;
+	--shadow: #e1e9f0;
+	--text: #ffffff;
+
+	--link: #ff69b4;
+	--link_visited: #ff69b4;
+	--green: #85ff6a;
+	--yellow: #ffff64;
+	--orange: #ffb826;
+	--red: #ff4444;
 	--xml_highlighted: var(--hover);
 	--xml_pinned: var(--selected);
 }
diff --git a/menu_icon_default.css.png b/menu_icon_default.css.png
new file mode 100644
index 0000000..d282753
--- /dev/null
+++ b/menu_icon_default.css.png
diff --git a/menu_icon_dusk2dawn.css.png b/menu_icon_dusk2dawn.css.png
new file mode 100644
index 0000000..f3a9db4
--- /dev/null
+++ b/menu_icon_dusk2dawn.css.png