From b8c6629672e745cc0b4f138bbee900f6e34b1494 Mon Sep 17 00:00:00 2001
From: Julian Hurst <julian.hurst92@gmail.com>
Date: Sun, 10 Jan 2021 00:33:31 +0100
Subject: Support light/dark color scheme prefs

---
 static/dark.css            | 73 ++++++++++++++++++++++++++++++++++++++++++++
 static/light.css           | 75 ++++++++++++++++++++++++++++++++++++++++++++++
 static/style-halloween.css | 64 ---------------------------------------
 static/style.css           | 63 ++------------------------------------
 4 files changed, 150 insertions(+), 125 deletions(-)
 create mode 100644 static/dark.css
 create mode 100644 static/light.css
 delete mode 100644 static/style-halloween.css

diff --git a/static/dark.css b/static/dark.css
new file mode 100644
index 0000000..aa19a5a
--- /dev/null
+++ b/static/dark.css
@@ -0,0 +1,73 @@
+a {
+	color: orange;
+}
+
+a:hover {
+	color: darkorange;
+}
+
+p {
+	margin: 5px;
+}
+
+li {
+	list-style-type: none;
+}
+
+body {
+	margin: 0 auto;
+	margin-top: 10px;
+	max-width: 80ex;
+	background-color: #111;
+	color: antiquewhite;
+}
+
+table {
+	border-collapse: collapse;
+	width: 100%;
+}
+
+tr {
+	border-bottom: 1px solid #666;
+	border-top: 1px solid #666;
+}
+
+td {
+	padding-top: 10px;
+	padding-bottom: 10px;
+	/*vertical-align: top;*/
+}
+
+form {
+	margin-bottom: 10px;
+}
+
+input {
+	width: 100%;
+}
+
+tr:hover {
+	background-color: #222;
+}
+
+iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.comments {
+	font-size: small;
+}
+
+input#term {
+	width: 70%;
+}
+
+select#lang {
+	width: calc(10% - 10px);
+}
+
+select#order {
+	width: calc(20% - 10px);
+}
diff --git a/static/light.css b/static/light.css
new file mode 100644
index 0000000..cbf3596
--- /dev/null
+++ b/static/light.css
@@ -0,0 +1,75 @@
+a {
+	color: black;
+}
+
+p {
+	margin: 5px;
+}
+
+
+li {
+	list-style-type: none;
+}
+
+body {
+	margin: 0 auto;
+	margin-top: 10px;
+	max-width: 80ex;
+}
+
+table {
+	border-collapse: collapse;
+	width: 100%;
+}
+
+tr {
+	border-bottom: 1px solid black;
+	border-top: 1px solid black;
+}
+
+td {
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+form {
+	margin-bottom: 10px;
+}
+
+input {
+	width: 100%;
+}
+
+iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.comments {
+	font-size: small;
+}
+
+input#term {
+	width: 70%;
+	height: 22px;
+	border: 1px solid black;
+	padding: 0px;
+	margin: 0px;
+}
+
+select#lang {
+	width: calc(10% - 8px);
+	height: 22px;
+	border: 1px solid black;
+	padding: 0px;
+	margin: 0px;
+}
+
+select#order {
+	width: calc(20% - 10px);
+	height: 22px;
+	border: 1px solid black;
+	padding: 0px;
+	margin: 0px;
+}
diff --git a/static/style-halloween.css b/static/style-halloween.css
deleted file mode 100644
index 0598e83..0000000
--- a/static/style-halloween.css
+++ /dev/null
@@ -1,64 +0,0 @@
-a {
-	color: orange;
-}
-
-a:hover {
-	color: darkorange;
-}
-
-li {
-	list-style-type: none;
-}
-
-body {
-	margin: 0 auto;
-	margin-top: 10px;
-	max-width: 80ex;
-	background-color: #111;
-	color: antiquewhite;
-}
-
-table {
-	border-collapse: collapse;
-	width: 100%;
-}
-
-tr {
-	border-bottom: 1px solid #666;
-	border-top: 1px solid #666;
-}
-
-td {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
-
-form {
-	margin-bottom: 10px;
-}
-
-input {
-	width: 100%;
-}
-
-tr:hover {
-	background-color: #222;
-}
-
-iframe {
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-
-.comments {
-	font-size: small;
-}
-
-input#term {
-	width: 90%;
-}
-
-select#lang {
-	width: calc(10% - 10px);
-}
diff --git a/static/style.css b/static/style.css
index a4f71c5..420e9c2 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,62 +1,3 @@
-a {
-	color: black;
-}
+@import "light.css" screen;
 
-li {
-	list-style-type: none;
-}
-
-body {
-	margin: 0 auto;
-	margin-top: 10px;
-	max-width: 80ex;
-}
-
-table {
-	border-collapse: collapse;
-	width: 100%;
-}
-
-tr {
-	border-bottom: 1px solid black;
-	border-top: 1px solid black;
-}
-
-td {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
-
-form {
-	margin-bottom: 10px;
-}
-
-input {
-	width: 100%;
-}
-
-iframe {
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-
-.comments {
-	font-size: small;
-}
-
-input#term {
-	width: 90%;
-	height: 22px;
-	border: 1px solid black;
-	padding: 0px;
-	margin: 0px;
-}
-
-select#lang {
-	width: calc(10% - 8px);
-	height: 22px;
-	border: 1px solid black;
-	padding: 0px;
-	margin: 0px;
-}
+@import "dark.css" screen and (prefers-color-scheme: dark);
-- 
cgit v1.2.3