3 files changed, 132 insertions, 9 deletions
diff --git a/scss/bar.scss b/scss/bar.scss
index 0afd02a..ead4d9e 100644
--- a/scss/bar.scss
+++ b/scss/bar.scss
@@ -114,14 +114,5 @@
         color: scheme.$red;
         font-weight: bold;
         font-size: lib.s(16);
-
-        &:hover,
-        &:focus {
-            background-color: scheme.$surface1;
-        }
-
-        &:active {
-            background-color: scheme.$surface2;
-        }
     }
 }
diff --git a/scss/popdowns/index.scss b/scss/popdowns/index.scss
index cae1473..524505e 100644
--- a/scss/popdowns/index.scss
+++ b/scss/popdowns/index.scss
@@ -4,3 +4,4 @@
 @forward "networks";
 @forward "media";
 @forward "sideright";
+@forward "sideleft";
diff --git a/scss/popdowns/sideleft.scss b/scss/popdowns/sideleft.scss
new file mode 100644
index 0000000..7b84ada
--- /dev/null
+++ b/scss/popdowns/sideleft.scss
@@ -0,0 +1,131 @@
+@use "sass:color";
+@use "../scheme";
+@use "../lib";
+@use "../font";
+
+$-accent: scheme.$yellow;
+
+.sideleft {
+    @include lib.rounded(8);
+    @include lib.border($-accent, 0.4, 2);
+    @include lib.shadow;
+    @include font.mono;
+
+    background-color: scheme.$crust;
+    color: $-accent;
+    padding: lib.s(12);
+    font-size: lib.s(14);
+
+    @include lib.spacing(10, true);
+
+    & > * {
+        @include lib.rounded(5);
+
+        background-color: scheme.$base;
+        padding: lib.s(16) lib.s(20);
+    }
+
+    .user {
+        @include lib.spacing(15);
+
+        .face {
+            @include lib.rounded(1000);
+
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            min-width: lib.s(48);
+            min-height: lib.s(48);
+            font-size: lib.s(24);
+        }
+
+        .details {
+            font-size: lib.s(14);
+
+            @include lib.spacing(3, true);
+
+            .name {
+                font-size: lib.s(18);
+                color: scheme.$text;
+            }
+        }
+
+        .power {
+            @include lib.element-decel;
+            @include font.icon;
+
+            font-size: lib.s(24);
+            color: scheme.$red;
+
+            &:hover,
+            &:focus {
+                color: color.mix(scheme.$red, scheme.$base, 80%);
+            }
+
+            &:active {
+                color: color.mix(scheme.$red, scheme.$base, 60%);
+            }
+        }
+    }
+
+    .locations {
+        @include lib.spacing(30);
+
+        & > * {
+            @include lib.spacing(8, true);
+        }
+
+        $-colours: scheme.$pink, scheme.$yellow, scheme.$maroon, scheme.$green, scheme.$mauve, scheme.$lavender;
+        @for $i from 1 through 6 {
+            .loc#{$i} {
+                @include lib.element-decel;
+
+                color: nth($-colours, $i);
+
+                &:hover,
+                &:focus {
+                    color: color.mix(nth($-colours, $i), scheme.$base, 80%);
+                }
+
+                &:active {
+                    color: color.mix(nth($-colours, $i), scheme.$base, 60%);
+                }
+            }
+        }
+    }
+
+    .hw-resources {
+        @include lib.spacing(10, true);
+
+        .resource {
+            font-size: lib.s(13);
+
+            .inner {
+                font-size: lib.s(16);
+
+                @include lib.spacing(20);
+            }
+
+            .slider {
+                @include lib.rounded(5);
+                @include lib.fluent-decel(1000ms);
+
+                min-height: lib.s(10);
+                background-color: scheme.$surface0;
+                color: scheme.$red;
+            }
+
+            $-names: gpu, cpu, memory, storage;
+            $-colours: scheme.$green, scheme.$maroon, scheme.$yellow, scheme.$pink;
+            @for $i from 1 through length($-names) {
+                &.#{nth($-names, $i)} {
+                    color: nth($-colours, $i);
+
+                    .slider {
+                        color: nth($-colours, $i);
+                    }
+                }
+            }
+        }
+    }
+}