home/natto/ags: init

Signed-off-by: Amneesh Singh <natto@weirdnatto.in>

home/natto/ags/styles/bar.scss

@@ -0,0 +1,40 @@
+.bar {
+  background: $background;
+
+  .hyprland {
+    background: none;
+
+    button.focused {
+      transition-duration: 0;
+      color: $mauve;
+      box-shadow: 0 0 0 9999px rgba($mauve, 0.08) inset;
+    }
+
+    button.unfocused {
+      background: none;
+      color: $flamingo;
+    }
+  }
+
+  .music {
+    .music-title {
+      color: $sapphire;
+    }
+
+    .music-controls button {
+      color: $yellow;
+    }
+  }
+
+  .network .network-icon {
+    color: $lavender;
+  }
+
+  .date-wrapper {
+    color: $text;
+  }
+
+  .tray-button {
+    color: $flamingo;
+  }
+}

home/natto/ags/styles/calendar.scss

@@ -0,0 +1,8 @@
+.calendar {
+  .calendar-unwrapped {
+    margin-top: 10px;
+    border: 2px solid $mauve;
+    border-radius: 4px;
+    background: rgba($base, 0.9);
+  }
+}

home/natto/ags/styles/global.scss

@@ -0,0 +1,57 @@
+$rosewater: #f5e0dc;
+$flamingo: #f2cdcd;
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$text: #cdd6f4;
+$subtext1: #bac2de;
+$subtext0: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: #6c7086;
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: #313244;
+$base: #1e1e2e;
+$mantle: #181825;
+$crust: #11111b;
+
+$background: $base;
+$foreground: $text;
+
+* {
+  font-weight: bold;
+}
+
+button {
+  background: none;
+  border-radius: 0px;
+}
+
+icon {
+  font-size: 24px;
+}
+
+.bar,
+.music-box,
+.calendar,
+.settings {
+  font-size: 16px;
+  font-family: "Fira Mono";
+}
+
+.bar {
+  .hyprland {
+    font-size: 18px;
+    font-family: "Lohit Gurmukhi";
+  }
+}

home/natto/ags/styles/music-box.scss

@@ -0,0 +1,79 @@
+.music-box {
+  .music-box-unwrapped {
+    margin-top: 15px;
+    .music-player {
+      background: $base;
+      border: 2px solid $mauve;
+      border-radius: 13px;
+      .cover-art {
+        margin: 2em;
+        border-radius: 13px;
+        background-size: cover;
+        background-position: center;
+      }
+      .music-details {
+        $shadow: 0px 0px 10px rgba(black, 0.8);
+        padding: 2em;
+        .title {
+          font-size: 30px;
+          color: $pink;
+          text-shadow: $shadow;
+        }
+        .icon-wrapper {
+          .icon {
+            font-size: 24px;
+            color: $yellow;
+          }
+          .artist {
+            color: $yellow;
+            text-shadow: $shadow;
+          }
+        }
+
+        .length-label,
+        .position-label {
+          text-shadow: $shadow;
+        }
+        .music-controls {
+          border-radius: 20px 8px 20px 8px;
+          padding: 5px;
+          margin: 0px 10px;
+          background: rgba($base, 0.5);
+          button {
+            font-size: 30px;
+            &:hover {
+              box-shadow: none;
+            }
+          }
+        }
+
+        scale trough {
+          min-height: 10px;
+          margin: 0 15px;
+
+          highlight {
+            background-image: linear-gradient(to right, $sapphire, $blue);
+          }
+
+          slider {
+            border-radius: 4px;
+            background: $background;
+            margin: -10px -10px;
+            transition: 0.1s;
+
+            &:hover {
+              border: 2px $mauve solid;
+              box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1);
+            }
+
+            &:active {
+              box-shadow:
+                0 0 0 1px inset,
+                0 0 0 8px rgba(255, 255, 255, 0.1);
+            }
+          }
+        }
+      }
+    }
+  }
+}

home/natto/ags/styles/settings.scss

@@ -0,0 +1,112 @@
+.settings {
+  .settings-unwrapped {
+    margin-top: 10px;
+    border: 2px solid $mauve;
+    border-radius: 4px;
+    background: $base;
+
+    .metrics {
+      & > * {
+        background-color: rgba(255, 255, 255, 0.03);
+        border-radius: 4px;
+        margin: 10px;
+        padding: 10px;
+        .metric-progress {
+          min-width: 40px;
+          min-height: 40px;
+          font-size: 4px;
+          margin: 4px;
+          .metric-icon {
+            font-size: 15px;
+          }
+        }
+      }
+      .cpu-metric {
+        color: $mauve;
+      }
+      .memory-metric {
+        color: $flamingo;
+      }
+      .disk-metric {
+        color: $pink;
+      }
+      .battery-metric {
+        color: $yellow;
+      }
+    }
+
+    .settings-col {
+      .sliders {
+        $icon-size: 15px;
+        $scale-height: 20px;
+
+        margin: 10px;
+        scale trough {
+          min-height: $scale-height;
+          min-width: 160px;
+          border-radius: 3px;
+
+          highlight {
+            all: unset;
+            border-radius: 3px;
+          }
+
+          slider {
+            $slider-height: $scale-height + 5px;
+
+            min-width: $slider-height;
+            min-height: $slider-height;
+            border-radius: $slider-height;
+            background: $text;
+            box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.1);
+          }
+        }
+
+        .volume {
+          .volume-icon {
+            font-size: $icon-size;
+            color: $green;
+          }
+
+          scale trough highlight {
+            background-color: $green;
+          }
+        }
+
+        .brightness {
+          .brightness-icon {
+            font-size: $icon-size;
+            color: $yellow;
+          }
+
+          scale trough highlight {
+            background-color: $yellow;
+          }
+        }
+      }
+
+      .settings-col-temps {
+        .temperature {
+          color: $blue;
+        }
+        .temperature-hot {
+          color: $red;
+        }
+        .weather {
+          color: $rosewater;
+        }
+      }
+
+      .power-menu {
+        margin: 20px;
+        button {
+          &:hover {
+            color: $red;
+            box-shadow: none;
+          }
+          font-size: 24px;
+        }
+      }
+    }
+  }
+}