diff --git a/css/Dawn-Theme.css b/css/Dawn-Theme.css
deleted file mode 100644
index 2adf6cd..0000000
--- a/css/Dawn-Theme.css
+++ /dev/null
@@ -1,25 +0,0 @@
-@charset "UTF-8";
-.dawn
-{
- --theme-bg-color: #FAFAFA;
- --theme-fg-color: rgba(0, 0, 0, 0.7);
-
- --theme-light-bg-color: #FFFFFF;
- --theme-light-fg-color: var(--theme-fg-color);
-
- --theme-dark-bg-color: #F5F5F5;
- --theme-dark-fg-color: var(--theme-fg-color);
-
- --accent-primary-bg-color: #03A9F4;
- --accent-primary-fg-color: #000;
-
- --accent-secondary-bg-color: #03A9F4;
- --accent-secondary-fg-color: #000;
-
- --fieldset-color: var(--accent-secondary-bg-color);
-
- --checkbox-icon: url(../res/ui/dawn/checkbox.svg);
- --checkbox-icon-checked: url(../res/ui/dawn/checkbox-checked.svg);
-
- --dropdown-icon: url(../res/ui/dawn/select-arrow.svg);
-}
diff --git a/css/Default-Theme.css b/css/Default-Theme.css
index 2e4799a..080d53a 100644
--- 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
deleted file mode 100644
index 40564b1..0000000
--- a/css/Dusk-Theme.css
+++ /dev/null
@@ -1,26 +0,0 @@
-@charset "UTF-8";
-.dusk
-{
- --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;
-
- --fieldset-color: var(--accent-secondary-bg-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);
-}
diff --git a/index.html b/index.html
index 9f65f65..10c75b2 100644
--- a/index.html
+++ b/index.html
@@ -3,13 +3,11 @@
-
+
Neo New card maker
-
-
-
-
-
+
+
+