First Commit

style/_widgets.scss

@@ -0,0 +1,68 @@
+@use "colors" as *;
+
+.icon {
+  color: $orange;
+}
+
+.icon-slider {
+  color: $foreground;
+  padding: 0 6px 0 6px;
+}
+
+.slider-button {
+  color: $orange;
+  border-radius: 20px;
+  padding: 0 8px 0 6px;
+}
+
+.slider-button:hover {
+  background: $background1;
+}
+
+.icon-slider scale trough {
+  all: unset;
+  background-color: $gray;
+  border-radius: 10px;
+  min-height: 5px;
+  min-width: 50px;
+  margin-left: 2px;
+
+  highlight {
+    background-color: $orange;
+    color: $background;
+  }
+}
+
+.wifi-button {
+  padding: 6px 10px;
+  border-radius: 20px;
+  border: 1px solid transparent;
+}
+
+.wifi-button:hover {
+  background: $background1;
+}
+
+.wifi-button:focus {
+  border: 1px solid $gray;
+}
+
+.wifi-button.connected {
+  border: 1px solid $orange;
+}
+
+spinner {
+  color: $orange;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+entry {
+  border: 1px solid $background1;
+  border-radius: 5px;
+  padding: 3px;
+}
+
+.password {
+  all: unset;
+}

style/action_centre.scss

@@ -0,0 +1,13 @@
+@use "colors" as *;
+
+.action-centre {
+  background: $background;
+  opacity: 0.9;
+  border-radius: 10px;
+  border: 2px solid $gray;
+  padding: 6px;
+}
+
+.action-centre:focus-within {
+  border: 2px solid $orange;
+}

style/bar.scss

@@ -0,0 +1,274 @@
+@use "colors" as *;
+
+* {
+  all: unset;
+  font-size: 16px;
+  font-family: "JetBrains Mono", monospace;
+}
+
+button {
+  background: transparent;
+  color: $foreground;
+  border: unset;
+  padding: unset;
+  border-radius: unset;
+}
+
+.bar {
+  padding: 0 20px;
+}
+
+.dock {
+}
+
+.workspaces {
+  color: $foreground;
+  background: $background;
+  border-radius: 20px;
+  padding: 0 12px;
+}
+
+.workspace-button {
+  padding: 0 9px 0;
+  border-bottom: 3px solid transparent;
+}
+
+.workspace-button:hover {
+  background: $background1;
+  border-radius: 20px;
+}
+
+.workspace-button.active {
+  margin-bottom: 0;
+  border-radius: 0;
+  border-bottom: 3px solid $orange;
+}
+
+.submap {
+  padding: 0;
+}
+
+.submap.active {
+  background: $red;
+  border-radius: 20px;
+  padding: 0 4px;
+}
+
+.submap.active:hover {
+  background: $lightred;
+}
+
+.title {
+  color: $foreground;
+  background: $background;
+  border-radius: 20px;
+  padding: 0 12px;
+}
+
+.title.media {
+  background: $orange;
+}
+
+.title.media:hover {
+  background: $lightorange;
+}
+
+.title.media.playing {
+  background: $green;
+}
+
+.title.media.playing:hover {
+  background: $lightgreen;
+}
+
+.utilities {
+  color: $foreground;
+  background: $background;
+  border-radius: 20px;
+  padding: 0 12px;
+}
+
+.bt-icon {
+  color: $blue;
+}
+
+.bt-icon.muted {
+  color: $lightblue;
+}
+
+.brightness {
+  color: $foreground;
+  padding: 0 6px 0 6px;
+}
+
+.brightness-button {
+  color: $orange;
+  border-radius: 20px;
+  padding: 0 8px 0 6px;
+}
+
+.brightness-button:hover {
+  color: $orange;
+  background: $background1;
+  border-radius: 20px;
+}
+
+.caffeine {
+  color: $foreground;
+  padding: 0 8px;
+  border-radius: 20px;
+  margin: 3px 0 3px 6px;
+}
+
+.caffeine:hover {
+  color: $lightred;
+  background: $background1;
+}
+
+.caffeine.on {
+  background: $red;
+}
+
+.stats {
+  padding: 0 6px;
+}
+
+.stats:hover {
+  background: $background1;
+  border-radius: 20px;
+}
+
+.stats .expandable-content {
+  padding: 0 0 0 8px;
+}
+
+.stat-icon {
+  color: $orange;
+}
+
+.network {
+  border-radius: 20px;
+  padding: 0 6px;
+}
+
+.network:hover {
+  background: $background1;
+}
+
+.network-label {
+  padding-left: 6px;
+}
+
+.vpn-icon {
+  color: $red;
+  padding: 0 4px;
+}
+
+.vpn-icon:hover {
+  color: $lightred;
+}
+
+.vpn-icon.on {
+  color: $green;
+}
+
+.vpn-icon.on:hover {
+  color: $lightgreen;
+}
+
+.vpn {
+  color: $background;
+  background: $red;
+  border-radius: 20px;
+  padding: 0 8px;
+  margin: 3px 2px;
+}
+
+.vpn:hover {
+  background: $lightred;
+}
+
+.vpn.on {
+  background: $green;
+}
+
+.vpn.starting {
+  background: $yellow;
+}
+
+@keyframes blink_vpn {
+  to {
+    background-color: $yellow;
+  }
+}
+
+.vpn.unknown {
+  background: $red;
+  animation-name: blink_vpn;
+  animation-duration: 0.5s;
+  animation-timing-function: steps(12);
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+.vpn.on:hover {
+  background: $lightgreen;
+}
+
+.battery:hover {
+  background: $background1;
+  border-radius: 20px;
+}
+
+.battery {
+  color: $foreground;
+  padding: 0 6px;
+}
+
+.battery.charging {
+  color: $green;
+}
+
+.battery.medium {
+  color: $yellow;
+}
+
+.battery.low {
+  color: $red;
+}
+
+@keyframes blink_battery {
+  to {
+    background-color: $urgent;
+    color: #282828;
+  }
+}
+
+.battery.critical {
+  color: $red;
+  border-radius: 20px;
+  animation-name: blink_battery;
+  animation-duration: 0.5s;
+  animation-timing-function: steps(12);
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+.clock {
+  color: $foreground;
+  padding: 0 6px;
+}
+
+.clock:hover {
+  background: $background1;
+  border-radius: 20px;
+}
+
+.power-button {
+  color: $foreground;
+  padding: 0 0 0 6px;
+}
+
+.power-button:hover {
+  color: $lightred;
+}

style/colors.scss

@@ -0,0 +1,25 @@
+$background: #232320;
+$background1: #3c3836;
+
+$foreground: #ebdbb2;
+
+$orange: #d65d0e;
+$lightorange: #d77331;
+$green: #98971a;
+$lightgreen: #b8bb26;
+$yellow: #d79921;
+$lightyellow: #fabd2d;
+$red: #cc241d;
+$lightred: #fb4934;
+$blue: #0db7ed;
+$lightblue: #83a598;
+$magenta: #b16286;
+$lightmagenta: #d3869b;
+$cyan: #689d6a;
+$lightcyan: #8ec07c;
+$gray: #928374;
+$lightgray: #a89984;
+
+$warning: $yellow;
+$error: $red;
+$urgent: $red;

style/style.scss

@@ -0,0 +1,3 @@
+@use "widgets";
+@use "bar";
+@use "action_centre";