From b7f258948dd76b232ba659861b72cca0730d72f8 Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Fri, 6 Aug 2021 19:30:49 +0200
Subject: [PATCH] add empty page design and inactive input buttons

---
 input.scss   |  9 +++++++++
 section.scss | 15 +++++++++++++++
 styles.css   | 18 ++++++++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/input.scss b/input.scss
index 27a1fa6..08bba02 100644
--- a/input.scss
+++ b/input.scss
@@ -385,6 +385,15 @@ input[type="range"] {
         &:hover, &:focus {
             background: var(--button-colored-background-hover);
         }
+
+        &.inactive {
+            background: #ccc;
+            cursor: default;
+
+            &:hover, &:focus {
+                background: #ccc;
+            }
+        }
     }
 
     input {
diff --git a/section.scss b/section.scss
index 91fbcc2..8a26441 100644
--- a/section.scss
+++ b/section.scss
@@ -1,4 +1,19 @@
 
+.emptyPage {
+    width: 80%;
+    font-size: 15rem;
+    margin: 0 auto;
+    margin: 5rem;
+    padding: 3rem;
+    text-align: center;
+    border: 1rem solid rgba(0, 0, 0, 0.1);
+
+    &:before {
+        font-family: 'FontAwesome', serif;
+        content: '\f03a';
+        color: rgba(0, 0, 0, 0.1);
+    }
+}
 
 .box {
     box-sizing: border-box;
diff --git a/styles.css b/styles.css
index 1dc2797..1bc3777 100644
--- a/styles.css
+++ b/styles.css
@@ -3910,6 +3910,11 @@ input[type="range"] {
     flex-shrink: 0; }
     .input button:hover, .input button:focus {
       background: var(--button-colored-background-hover); }
+    .input button.inactive {
+      background: #ccc;
+      cursor: default; }
+      .input button.inactive:hover, .input button.inactive:focus {
+        background: #ccc; }
   .input input {
     box-sizing: border-box;
     font-size: 1rem;
@@ -4460,6 +4465,19 @@ body > nav {
     line-height: 60px;
     font-size: 9px; }
 
+.emptyPage {
+  width: 80%;
+  font-size: 15rem;
+  margin: 0 auto;
+  margin: 5rem;
+  padding: 3rem;
+  text-align: center;
+  border: 1rem solid rgba(0, 0, 0, 0.1); }
+  .emptyPage:before {
+    font-family: 'FontAwesome', serif;
+    content: '\f03a';
+    color: rgba(0, 0, 0, 0.1); }
+
 .box {
   box-sizing: border-box;
   margin-top: 1rem;