Testing theme changer

4 files changed, 535 insertions, 0 deletions

diff --git a/styles/input.css b/styles/input.css
new file mode 100644
index 0000000..0b56982
--- /dev/null
+++ b/styles/input.css
@@ -0,0 +1,461 @@
+/*    Begin Input CSS    */
+
+/*    All input    */
+
+input, select
+{
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+
+	margin: 5px;
+
+	display: block;
+
+	box-sizing: border-box;
+}
+
+/*    Button input    */
+
+input[type=button], input[type=submit], button, a
+{
+	padding: 10px;
+
+	border: none;
+	border-radius: 5px;
+
+	background-color: var(--input-bg-button);
+	color: var(--input-color-button);
+
+	font-size: medium;
+
+	transition-duration: 0.2s;
+
+	cursor: pointer;
+}
+
+input[type=button]:hover, input[type=submit]:hover, button:hover, a:hover
+{
+	background-color: var(--input-bg-button-hover);
+}
+
+input[type=button]:active, input[type=submit]:active, button:active, a:active
+{
+	background-color: var(--input-bg-button-active);
+}
+
+/*    Text, date, number, and time input    */
+
+input[type=text], input[type=date], input[type=time], input[type="number"]
+{
+	border: 2px solid var(--input-border-text);
+	border-radius: 3px;
+	padding: 5px;
+	background-color: var(--input-bg-text);
+	color: var(--input-color-text);
+	font-size: 1em;
+}
+
+input[type=text]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover
+{
+	border-color: var(--input-border-text-hover);
+}
+
+input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus
+{
+	border-color: var(--input-border-text-active);
+}
+
+/*    Radial input    */
+
+input[type=radio]
+{	
+	width: 20px;
+	height: 20px;
+
+	border: 3px solid var(--input-border-bool);
+	border-radius: 50%;
+
+	transition-duration: 0.2s;
+
+	background-color: var(--input-bg-bool);
+
+	cursor: pointer;
+
+	display: inline-block;
+	vertical-align: middle;
+}
+
+input[type=radio]:checked, input[type=radio]:hover{
+	border-width: 6px;
+}
+
+input[type=radio]:checked
+{
+	background-color: var(--input-bg-bool-true);
+	border-color: var(--input-border-bool-true);
+}
+
+input[type=radio]:hover
+{
+	background-color: var(--input-bg-bool-hover);
+	border-color: var(--input-border-bool-hover);
+}
+
+input[type=radio]:active
+{
+	background-color: var(--input-bg-bool-active);
+	border-color: var(--input-border-bool-active);
+}
+
+/*    Checkbox input    */
+
+input[type=checkbox]
+{
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+
+	display: inline-block;
+	vertical-align: middle;
+
+	width: 20px;
+	height: 20px;
+
+	border: 3px solid var(--input-border-bool);
+
+	border-radius: 2px;
+
+	transition-duration: 0.2s;
+
+	background-color: var(--input-bg-bool);
+
+	cursor: pointer;
+}
+
+input[type=checkbox]:checked
+{
+	border-width: 10px;
+	background-color: var(--input-border-bool-true);
+	border-color: var(--input-border-bool-true);
+}
+
+input[type=checkbox]:hover
+{
+	background-color: var(--input-bg-bool-hover);
+	border-color: var(--input-border-bool-hover);
+}
+
+input[type=checkbox]:active
+{
+	background-color: var(--input-bg-bool-active);
+	border-color: var(--input-border-bool-active);
+}
+
+input[type=checkbox]::after
+{
+	height: 15px;
+	width: 10px;
+
+	box-sizing: border-box;
+
+	position: relative;
+
+	display: block;
+
+	border-color: var(--input-bg-bool-true);
+	border-style: solid;
+	border-width: 0px 0px 0px 0px;
+
+	top: calc(50% - 10px);
+	left: calc(50% - 5px);
+
+	transform-origin: center;
+	transform: rotate(45deg);
+
+	content: '';
+}
+
+input[type=checkbox]:checked::after
+{
+	border-width: 0px 3px 3px 0px;
+}
+
+/*    Color input    */
+
+input[type=color]
+{	
+	display: inline-block;
+
+	vertical-align: middle;
+
+	height: 20px;
+	width: 20px;
+
+	margin: 0;
+	padding: 0;
+
+	border: 0;
+
+	cursor: pointer;
+}
+
+/*    File input    */
+
+input[type=file]
+{
+	display: none;
+}
+
+/*    Custom select    */
+
+div.input-select
+{
+	font-size: 1em;
+
+	display: block;
+	position: absolute;
+	z-index: 0;
+
+	pointer-events: none;
+
+	overflow-y: auto;
+	overflow-x: hidden;
+
+	max-height: 8em;
+
+	border-radius: 3px;
+}
+
+div.input-select > div
+{
+	display: none;
+	pointer-events: none;
+}
+
+div.input-select > div[selected=true]
+{
+	display: block;
+}
+
+div.input-container:focus > div.input-select
+{
+	transform: translate(0, 2em);
+
+	pointer-events: all;
+	z-index: 1;
+
+	border: 2px solid var(--input-border-select-active);
+	background-color: var(--input-bg-select-active);
+}
+
+div.input-container:focus > div.input-select > div
+{
+	pointer-events: all;
+	display: block;
+	padding: 5px;
+	width: 6em;
+}
+
+div.input-container:focus > div.input-select > div:hover
+{
+	background-color: var(--input-bg-select-hover);
+	color: var(--input-color-select-hover);
+}
+
+div.input-container:focus > div.input-select > div[selected=true]:after
+{
+	font-family: "IcoFont";
+	content: '\eed8';
+	font-size: medium;
+}
+
+/*    Input container    */
+
+*.input-container {
+	margin: 5px;
+	padding: 5px;
+
+	border-radius: 3px;
+
+	display: inline-block;
+}
+
+/*    Color container    */
+
+div.input-container[type=color]
+{
+	text-align: center;
+
+	background-color: var(--input-bg-button);
+	color: var(--input-color-button);
+
+	transition-duration: 0.2s;
+
+	cursor: pointer;
+
+	width: max-content;
+}
+
+div.input-container[type=color]::after
+{
+	display: inline;
+
+	vertical-align: middle;
+
+	content: ' Pick a color';
+}
+
+div.input-container[type=color]:hover
+{
+	background-color: var(--input-bg-button-hover);
+}
+
+div.input-container[type=color]:active
+{
+	background-color: var(--input-bg-button-active);
+}
+
+/*    File input container    */
+
+div.input-container[type=file]
+{
+	background-color: var(--input-bg-button);
+	color: var(--input-color-button);
+
+	transition-duration: 0.2s;
+
+	cursor: pointer;
+
+	text-align: center;
+
+	width: max-content;
+	height: max-content;
+}
+
+div.input-container[type=file]:hover
+{
+	background-color: var(--input-bg-button-hover);
+}
+
+div.input-container[type=file]:active
+{
+	background-color: var(--input-bg-button-active);
+}
+
+div.input-container[type=file]::after
+{
+	display: inline;
+
+	vertical-align: middle;
+
+	content: attr(data-files);
+}
+
+/*    Radio input container    */
+
+div.input-container[type=radio]::before
+{
+	display: block;
+	content: attr(data-prompt) ":";
+	transition-duration: 0.2s;
+}
+
+div.input-container[type=radio]
+{
+	background-color: var(--input-bg-multi);
+}
+
+div.input-container[type=radio]:hover
+{
+	background-color: var(--input-bg-multi);
+}
+
+/*	  Select input container    */
+
+div.input-container[type=select]
+{
+	border: 2px solid var(--input-border-select);
+	background-color: var(--input-bg-select);
+	min-height: 1.25em;
+	min-width: 8em;
+	width: calc(100% - 2em);
+
+	color: var(--input-color-select);
+
+	cursor: pointer;
+
+	text-align: left;
+}
+
+div.input-container[type=select]:hover
+{
+	border-color: var(--input-border-select-hover);
+	background-color: var(--input-bg-select-hover);
+
+	color: var(--input-color-select-hover);
+}
+
+div.input-container[type=select]:focus
+{
+	border-color: var(--input-border-select-active);
+	background-color: var(--input-bg-select-active);
+
+	color: var(--input-color-select-active);
+
+	overflow: visible;
+}
+
+div.input-container[type=select]:after
+{
+	font-family: "IcoFont";
+	font-size: medium;
+	content: '\eab2';
+	display: block;
+	height: 100%;
+	width: 100%;
+	color: var(--input-color-select);
+	text-align: right;
+}
+
+div.input-container[type=select]:after:hover
+{
+	color: var(--input-color-select-hover);
+}
+
+div.input-container[type=select]:focus::after
+{
+	content: '\eab9';
+	color: var(--input-color-select-active);
+}
+
+/*    Input Title Wrapper    */
+
+div.input-title-wrapper::before
+{
+	color: var(--main-color);
+	content: attr(data-title);
+	display: block;
+}
+
+div.input-title-wrapper
+{
+	background-color: var(--main-bg);
+	box-shadow: var(--gui-shadow-game) 3px 3px 2px;
+	border-radius: 5px;
+	margin: 10px;
+	padding: 5px;
+}
+
+div.input-title-wrapper[type=checkbox]
+{
+	cursor: pointer;
+}
+
+div.input-title-wrapper[type=checkbox] > input
+{
+	pointer-events: none;
+}
+
+
+/*    End Input CSS    */
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000..e778134
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,47 @@
+* {
+    font-family: "Roboto", sans-serif;
+	background-color: var(--main-bg);
+	color: var(--main-color);
+}
+
+h1::after {
+    display: block;
+
+    width: 100%;
+    height: 3px;
+
+    background-color: var(--divider-color);
+
+    content: '';
+}
+
+a {
+    color: var(--link-color);
+    text-decoration: none;
+    transition-duration: 0.2s;
+}
+
+a:hover {
+    color: var(--link-color);
+}
+
+a:active {
+	color: var(--link-color);
+}
+
+span.end {
+    display: block;
+    margin-top: 10px;
+    text-emphasis: bold;
+}
+
+span.end::before {
+    display: block;
+
+    width: 100%;
+    height: 3px;
+
+    background-color: var(--divider-color);
+
+    content: '';
+}
diff --git a/styles/themes/colors-base.css b/styles/themes/colors-base.css
new file mode 100644
index 0000000..3dab58b
--- /dev/null
+++ b/styles/themes/colors-base.css
@@ -0,0 +1,14 @@
+* {
+	/*  Main  */
+	--main-bg: white;
+	--main-color: black;
+
+	/*  Underline  */
+	--divider-color: #bbb;
+
+	/*  Links  */
+	--link-color: #0084ff;
+	--link-color-hover: #3ea2ff;
+	--link-color-active:#0056a7;
+
+}
\ No newline at end of file
diff --git a/styles/themes/colors-dark.css b/styles/themes/colors-dark.css
new file mode 100644
index 0000000..64a33d1
--- /dev/null
+++ b/styles/themes/colors-dark.css
@@ -0,0 +1,13 @@
+* {
+	/*  Main  */
+	--main-bg: #333;
+	--main-color: white;
+
+	/*  Underline  */
+	--divider-color: #555;
+
+	/*  Links  */
+	--link-color: #0084ff;
+	--link-color-hover: #3ea2ff;
+	--link-color-active:#0056a7;
+}
\ No newline at end of file