[pages] added styling & improved components

2 files changed, 103 insertions, 0 deletions

diff --git a/src/public/css/dashboard.css b/src/public/css/dashboard.css
new file mode 100644
index 0000000..10b25ca
--- /dev/null
+++ b/src/public/css/dashboard.css
@@ -0,0 +1,89 @@
+/*
+ * ~~~ dashboard css styling
+*/
+
+body {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 256px auto;
+    gap: 8px;
+}
+
+h1 {
+    padding: 32px 0 16px 0;
+}
+
+aside {
+    background-color: var(--color-surface);
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+
+    ul {
+        padding: 4px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        list-style-type: none;
+
+        li {
+            display: flex;
+
+            a {
+                width: 100%;
+                padding: 6px 12px;
+                display: inline-block;
+                color: var(--color-text);
+                border-radius: 8px;
+                text-decoration: none;
+                transition: var(--trans) background-color, color;
+
+                &:hover {
+                    background-color: var(--color-accent);
+                    color: var(--color-accent-text);
+                }
+            }
+        }
+    }
+}
+
+section.devices,
+section.actions {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+article.device,
+article.action {
+    padding: 12px 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--color-surface);
+
+    &:first-child {
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+    }
+
+    &:last-child {
+        border-bottom-left-radius: 12px;
+        border-bottom-right-radius: 12px;
+    }
+
+    div {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        button {
+            padding: 4px 8px;
+            cursor: pointer;
+        }
+
+        a {
+            color: var(--color-text);
+        }
+    }
+}
diff --git a/src/public/css/global.css b/src/public/css/global.css
index 95fdd00..70a26c6 100644
--- a/src/public/css/global.css
+++ b/src/public/css/global.css
@@ -19,8 +19,22 @@
     font-family: OpenSans;
 }
 
+:root {
+    color-scheme: light dark;
+
+    --color-background: light-dark(#ffffff, #18191b);
+    --color-surface: light-dark(#eeeff0, #252629);
+    --color-text: light-dark(#090909, #e0e1e4);
+    --color-accent: light-dark(#18191b, #e0e1e4);
+    --color-accent-text: light-dark(#e0e1e4, #18191b);
+
+    --trans: 0.15s ease;
+}
+
 body {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
+    background-color: var(--color-background);
+    color: var(--color-text);
 }