Support light/dark color scheme prefs

3 files changed, 87 insertions, 62 deletions

diff --git a/static/style-halloween.css b/static/dark.css
index 0598e83..aa19a5a 100644
--- a/static/style-halloween.css
+++ b/static/dark.css
@@ -6,6 +6,10 @@ a:hover {
 	color: darkorange;
 }
 
+p {
+	margin: 5px;
+}
+
 li {
 	list-style-type: none;
 }
@@ -31,6 +35,7 @@ tr {
 td {
 	padding-top: 10px;
 	padding-bottom: 10px;
+	/*vertical-align: top;*/
 }
 
 form {
@@ -56,9 +61,13 @@ iframe {
 }
 
 input#term {
-	width: 90%;
+	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.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);