Add preliminary notifications UX in settings area

Not wired up to any server actions yet.

1 files changed, 42 insertions, 0 deletions

diff --git a/ui/styles/toggles.css b/ui/styles/toggles.css
new file mode 100644
index 0000000..c51d34a
--- /dev/null
+++ b/ui/styles/toggles.css
@@ -0,0 +1,42 @@
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 2rem;
+  height: 1rem;
+  border: 1px solid var(--colour-navbar-bg);
+  border-radius: 1rem;
+}
+
+.toggle input {
+  display: none;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #bbb;
+  transition: 0.4s;
+  border-radius: 1rem;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 1rem;
+  width: 1rem;
+  background-color: #fff;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: var(--colour-navbar-bg);
+}
+
+input:checked + .slider:before {
+  transform: translateX(1rem);
+}