feat: added a lot of styling, new inc/dec widget, new folder structure for widgets

src/ui/Root/Root.css

@@ -1,14 +1,77 @@
+:root {
+    --color-ui-accent-light: #07afb6;
+    --color-ui-accent-dark: #00888b;
+    --color-ui-neutral-light: #fdfdfe;
+    --color-ui-neutral-dark: #8b8b8b;
+    --color-ui-neutral-dark-hover: #a1a1a1;
+    --color-bg-light: #464646;
+    --color-bg-dark: #282828;
+    --color-p-light: #fafafa;
+    --color-p-dark: #282828;
+    --color-title-light: #fafafa;
+    --color-title-dark: #282828;
+}
+
+body {
+    background-color: var(--color-bg-dark);
+    color: var(--color-p-light);
+}
+
 .root {
+    background-color: var(--color-bg-light);
     margin-left: 10em;
     margin-right: 10em;
 }
 
-.root .title {
+.root-title {
+    color: var(--color-title-light);
     text-align: center;
 }
 
-.root input[type="number"] {
-    width: 5em;
+input[type="checkbox"] {
+    position: relative;
+    width: 2em;
+    height: 1em;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+input[type="checkbox"]::before {
+    width: 2em;
+    height: 1em;
+    border-radius: 1em;
+    background-color: var(--color-ui-accent-dark);
+    display: block;
+    content: "";
+    z-index: 0;
+    position: absolute;
+    transition: background-color 200ms;
+}
+
+input[type="checkbox"]:checked::before {
+    background-color: var(--color-ui-accent-light);
+}
+
+input[type="checkbox"]::after {
+    position: absolute;
+    width: 1em;
+    height: 1em;
+    border-radius: 1em;
+    border-color: var(--color-ui-neutral-dark);
+    border-width: 1px;
+    background-color: var(--color-ui-neutral-light);
+    display: block;
+    content: "";
+    z-index: 1;
+    right: 1em;
+    transition: right 200ms;
+}
+
+input[type="checkbox"]:checked::after {
+    right: 0;
 }
 
 * {