Version 1.1.2

Resolved issue with Microsoft Edge not showing the custom checkboxes. The ability to select a theme has been removed however, as it would become unmaintainable.
Yemachu · Feb 9, 2019 · fae3143 · fae3143
2 parents 025eae7 + 041fbbb
commit fae3143
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 134 deletions.
diff --git a/css/Dawn-Theme.css b/css/Dawn-Theme.css
diff --git a/css/Default-Theme.css b/css/Default-Theme.css
@@ -1,38 +1,4 @@
 @charset "UTF-8";
-:root
-{
-	--theme-bg-color: #303030;
-	--theme-fg-color: rgba(255, 255, 255, 0.7);
-
-	/* Used to specify a lighter/darker shade of the main theme color. */
-	--theme-light-bg-color: #424242;
-	--theme-light-fg-color: var(--theme-fg-color);
-
-	--theme-dark-bg-color: #212121;
-	--theme-dark-fg-color: var(--theme-fg-color);
-
-	--accent-primary-bg-color: #FFC107;
-	--accent-primary-fg-color: #000;
-
-	--accent-secondary-bg-color: #FFC107;
-	--accent-secondary-fg-color: #000;
-
-	--input-bg-color: var(--theme-dark-bg-color);
-	--input-fg-color: var(--theme-dark-fg-color);
-
-	--button-bg-color: var(--input-bg-color);
-	--button-fg-color: var(--input-fg-color);
-
-	--fieldset-color: var(--accent-primary-bg-color);
-
-	--selection-bg-color: var(--accent-primary-bg-color);
-	--selection-fg-color: var(--accent-primary-fg-color);
-
-	--checkbox-icon: url(../res/ui/dusk/checkbox.svg);
-	--checkbox-icon-checked: url(../res/ui/dusk/checkbox-checked.svg);
-
-	--dropdown-icon: url(../res/ui/dusk/select-arrow.svg);
-}
 
 /******************************************************************************/
 /* A dark color theme for websites.                                           */
@@ -42,29 +8,23 @@
 body
 {
 	background-color: #303030;
-	background-color: var(--theme-bg-color);
 	color: #fff; /* fallback in case rgba() doesn't work. */
 	color: rgba(255,255,255, 0.7);
-	color: var(--theme-fg-color);
 	/* Default font on most browsers is serif, which looks somewhat dated. */
 	font-family: sans-serif;
 }
 
 /* Make the selection the accent color, and maintain contrast. */
-::selection 
+::selection
 {
-	color: #000; 
-	color: var(--selection-fg-color);
-	background-color: #FFC107; 
-	background-color: var(--selection-bg-color);
+	color: #000;
+	background-color: #FFC107;
 }
 /* Firefox wants to be special. */
 ::-moz-selection
 {
-	color: #000; 
-	color: var(--selection-fg-color);
-	background-color: #FFC107; 
-	background-color: var(--selection-bg-color);
+	color: #000;
+	background-color: #FFC107;
 }
 
 /******************************************************************************/
@@ -73,14 +33,11 @@ body
 body > header
 {
 	z-index: 1;
-
-	color: #000; 
-	color: var(--theme-dark-fg-color);
-	background-color: #FFC107; 
-	background-color: var(--theme-dark-bg-color);
-
+
+	color: rgba(255, 255, 255, 0.7);
+	background-color: #212121;
 	box-shadow: 0 0px 8px #000;
-	
+
 }
 
 /******************************************************************************/
@@ -90,7 +47,6 @@ fieldset
 {
 	/* Make the border slightly more sublte. */
 	border: solid thin #212121;
-	border: solid thin var(--fieldset-color);
 	margin-bottom: 0.5em;
 }
 
@@ -113,25 +69,22 @@ button
 	display: block;
 	box-sizing: border-box;
 	width: 100%;
-	
+
 	/* Let the styling on the rest of the page affect input elements as well. */
 	font-family: inherit;
 	font-size: inherit;
-	
+
 	color: inherit;
-	color: var(--input-fg-color);
-
 	background-color: #212121;
-	background-color: var(--input-bg-color);
-
+
 	/* No need for a border due to background color and drop shadow. */
 	border: none;
 	-moz-appearance: none;
 	appearance: none;
-	
+
 	/* The border tend to become somewhat snug by default. Add some space. */
 	padding: 0.5em;
-	
+
 	/* Add some space between the label and next element. */
 	margin-top: 0.25em;
 	margin-bottom: 1em;
@@ -143,7 +96,6 @@ textarea:focus
 	/* Provide some feedback as to which element has focus. */
 	/* The label should be closer to the object to which it applies. */
 	outline: solid medium #FFC107;
-	outline-color: var(--accent-secondary-bg-color);
 }
 
 /******************************************************************************/
@@ -156,10 +108,9 @@ textarea
 {
 	/* Slightly darker than the background to catch the eye. */
 	background-color: #212121;
-	background-color: var(--input-bg-color);
 	/* Shadow to suggest depth. */
 	box-shadow: inset 0 1px 2px #000;
-	
+
 	/* Default appearance for the element might not look too great. */
 	-moz-appearance: textfield;
 	appearance: textfield;
@@ -194,11 +145,11 @@ button + button
 }
 button:hover
 {
-	
+
 }
 button:active
 {
-	
+
 }
 
 /******************************************************************************/
@@ -231,15 +182,14 @@ input[type="checkbox"] + label:last-child::before
 		background-repeat: no-repeat;
 		/* Scale the image up or down based on the font size. */
 		background-size: contain;
-		background-image: url(../res/ui/dark/checkbox.svg);
-		background-image: var(--checkbox-icon);
+		background-image: url(../res/ui/dusk/checkbox.svg);
 }
 
 input[type="checkbox"]:checked + label:last-child::before
 {
 	/* Give the user feedback that it has been checked. */
-	background-image: url(../res/ui/dark/checkbox-checked.svg);
-	background-image: var(--checkbox-icon-checked);
+	background-image: url(../res/ui/dusk/checkbox-checked.svg);
+
 }
 
 
@@ -253,10 +203,9 @@ input[type="checkbox"]:checked + label:last-child::before
 select
 {
 	box-shadow: 0 1px 2px #000;
-	
+
 	/* Draw a custom arrow on the select element. */
-	background-image: url(../res/ui/dark/select-arrow.svg);
-	background-image: var(--dropdown-icon);
+	background-image: url(../res/ui/dusk/select-arrow.svg);
 	background-position: right;
 	background-size: contain;
 	background-repeat: no-repeat;
@@ -275,15 +224,12 @@ pre
 	padding: 10px;
 	line-height: 1em;
 	background-color: #212121;
-	background-color: var(--input-bg-color);
 	color: inherit;
-	color: var(--input-fg-color);
 }
 
 a
 {
 	color: #FFC107;
-	color: var(--accent-primary-bg-color);
 	text-decoration: none;
 }
 

diff --git a/css/Dusk-Theme.css b/css/Dusk-Theme.css
diff --git a/index.html b/index.html
@@ -3,13 +3,11 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		
+
 		<title>Neo New card maker</title>
-		<link rel="stylesheet" type="text/css" href="css/Style.css" />
-		<link rel="stylesheet" type="text/css" href="css/Default-Theme.css" />
-		<link rel="stylesheet" type="text/css" href="css/Dawn-Theme.css" />
-		<link rel="stylesheet" type="text/css" href="css/Dusk-Theme.css" />
-
+		<link rel="stylesheet" type="text/css" href="./css/Style.css" />
+		<link rel="stylesheet" type="text/css" href="./css/Default-Theme.css" />
+
 		<style>
 			/** Hide parts of the site based on whether JavaScript is available. */
 			/** This method should prevent issues with FOUT. */
@@ -31,7 +29,7 @@
 		})();
 		</script>
 	</head>
-	
+
 	<body lang="en">
 		<header>
 			<h1>Neo New Card maker</h1>