From 90cd3b7a46123203a6fb75fb4914d586f863cc1f Mon Sep 17 00:00:00 2001
From: Lewin Probst <info@emirror.de>
Date: Mon, 3 Feb 2020 16:09:41 +0100
Subject: [PATCH] Added basic styling.

---
 css/01-form.css                 | 10 ++++++++
 css/02-input-textarea-label.css | 43 +++++++++++++++++++++++++++++++++
 css/03-button.css               | 28 +++++++++++++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 css/01-form.css
 create mode 100644 css/02-input-textarea-label.css
 create mode 100644 css/03-button.css

diff --git a/css/01-form.css b/css/01-form.css
new file mode 100644
index 0000000..32faf30
--- /dev/null
+++ b/css/01-form.css
@@ -0,0 +1,10 @@
+form {
+    --textarea-height: 6em;
+    --label-height: 1.5em;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding-top: 2em;
+    padding-bottom: 2em;
+    height: calc(9 * 1.5 * var(--label-height) + var(--textarea-height));
+}
diff --git a/css/02-input-textarea-label.css b/css/02-input-textarea-label.css
new file mode 100644
index 0000000..2d19387
--- /dev/null
+++ b/css/02-input-textarea-label.css
@@ -0,0 +1,43 @@
+.fieldwrapper {
+    position: relative;
+}
+
+.fieldwrapper label {
+    position: absolute;
+    font-size: 1em;
+    left: 2ch;
+    padding: 0;
+    margin: 0;
+    color: #666;
+}
+
+.fieldwrapper input:focus ~ label,
+.fieldwrapper input:not(:placeholder-shown) ~ label,
+.fieldwrapper textarea:focus ~ label,
+.fieldwrapper textarea:not(:placeholder-shown) ~ label {
+    left: auto;
+    right: 1ch;
+    top: -.4em;
+    font-size: .8em;
+}
+
+input, textarea {
+    width: 100%;
+    border: none;
+}
+
+input:invalid, textarea:invalid {
+    box-shadow: 0 0 .2em #f00;
+}
+
+input:valid, textarea:valid {
+    box-shadow: 0 0 .2em #0f0;
+}
+
+input, img#captcha {
+    height: 2em;
+}
+
+textarea {
+    height: var(--textarea-height);
+}
diff --git a/css/03-button.css b/css/03-button.css
new file mode 100644
index 0000000..9efa158
--- /dev/null
+++ b/css/03-button.css
@@ -0,0 +1,28 @@
+button {
+    width: 100%;
+    padding: 5px;
+    /*border: thin solid #333333;
+    background: radial-gradient(#888888, #666666);
+    box-shadow: 1px 2px 1px #333333;*/
+
+    border-radius: 5px;
+    font-weight: bold;
+    font-size: 12px;
+    color: #FFFFFF;
+    text-transform: uppercase;
+    cursor: pointer;
+
+    background: radial-gradient(#00EE00, #00CC00);
+    box-shadow: 1px 2px 1px #006600;
+    border: thin solid #006600;
+}
+/*
+button.green {
+}
+
+button.red {
+    background: radial-gradient(#EE0000, #CC0000);
+    box-shadow: 1px 2px 1px #660000;
+    border: thin solid #660000;
+}
+*/