Add styling for waybar

roles/desktop-environment/files/.config/waybar/style.css

@@ -0,0 +1,216 @@
+/* Inspired by https://github.com/JaKooLit/Hyprland-Dots/blob/main/config/waybar/style/%5BDark%5D%20Half-Moon.css */
+
+* {
+    font-family: "JetBrainsMono Nerd Font";
+    font-weight: bold;
+    min-height: 0;  
+    /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
+    font-size: 97%;
+    font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
+}
+
+
+window#waybar {
+    background-color: rgba(26,27,38,0);
+    border-bottom: 1px solid rgba(26,27,38,0);
+    border-radius: 0px;
+    color: #E6B673;
+}
+
+#waybar.empty, #waybar.tiled, #waybar.floating {
+    background-color: transparent;
+}
+
+window#waybar.empty,
+window#waybar.empty #window {
+    background-color: transparent;
+}
+
+#taskbar,
+#workspaces {
+    background: #0F1419;
+    margin: 5px;
+    padding: 0px 1px;
+    border-radius: 15px;
+    border: 0px;
+    font-style: normal;
+    color: #0F1419;
+}
+
+#taskbar button,
+#workspaces button {
+    padding: 0px 5px;
+    margin: 4px 3px;
+    border-radius: 15px;
+    border: 0px;
+    color: #0F1419;
+    background: linear-gradient(45deg, #95E6CB, #59C2FF, #D2A6FF);
+    opacity: 0.5;
+    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
+}
+
+#taskbar button.active,
+#workspaces button.active {
+    padding: 0px 5px;
+    margin: 4px 3px;
+    border-radius: 15px;
+    border: 0px;
+    color: #0F1419;
+    background: linear-gradient(45deg, #59C2FF, #D2A6FF);
+    opacity: 1.0;
+    min-width: 40px;
+    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
+}
+
+#workspaces button:hover {
+    border-radius: 15px;
+    color: #0F1419;
+    background: linear-gradient(45deg, #59C2FF, #D2A6FF);
+    opacity: 0.8;
+    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
+}
+
+@keyframes gradient_horizontal {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@keyframes swiping {
+    0% {
+        background-position: 0% 200%;
+    }
+    100% {
+        background-position: 200% 200%;
+    }
+}
+
+tooltip {
+    background: #0F1419;
+    border: 1px solid #D2A6FF;
+    border-radius: 10px;
+}
+
+tooltip label {
+    color: #F3F4F5;
+}
+
+#window {
+    color: #E6E1CF;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}
+
+#temperature,
+#memory {
+    color: #FF8F40;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}
+
+#idle_inhibitor,
+#clock {
+    color: #F3F4F5;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}
+
+/*-----Indicators----*/
+#idle_inhibitor.activated {
+    color: #39FF14;
+}
+
+#bluetooth {
+    color: blue;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}
+
+#cpu {
+    color: #FF8F40;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}
+
+#disk {
+    color: #B8CC52;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}
+
+#backlight,
+#battery {
+    color: #F07178;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}
+
+#battery.critical:not(.charging) {
+    color: #f53c3c;
+    animation-name: blink;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+#mpris {
+    color: #F07178;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding-left: 8px;
+    padding-right: 2px;
+}
+
+#backlight {
+    color: white;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}
+
+#network {
+    color: #B8CC52;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}
+
+#tray {
+    color: #E6E1CF;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}
+
+#pulseaudio {
+    color: #59C2FF;
+    background: #0F1419;
+    border-radius: 50px 50px;
+    margin: 5px;
+    padding: 2px 15px;
+}

roles/desktop-environment/templates/.config/hypr/hyprland.conf.j2

@@ -31,7 +31,7 @@ general {
     # See https://wiki.hyprland.org/Configuring/Variables/ for more
 
     gaps_in = 5
-    gaps_out = 10
+    gaps_out = 2,10,10,10
     border_size = 2
     col.active_border = rgba(33ccffee) rgba(00ff99ee) 45deg
     col.inactive_border = rgba(595959aa)