waybar: use order instead of id for rounded corners

This is supposed to be handled by the Gruvbox GTK theme

sway/.config/sway/config

@@ -224,7 +224,7 @@ include /home/peter/.config/sway/local.d/*
 
 output "*" bg $wallpaper fill
 
-bindsym Ctrl+Mod1+l exec swaylock -i $wallpaper --clock --fade-in 1 --indicator --indicator-thickness 6 --ring-color 5af78e --inside-color 00000055 --key-hl-color 4d4d4d --line-uses-ring --separator-color 00000000 --text-color ffffff --timestr "%H:%M"
+bindsym Ctrl+Mod1+l exec swaylock -i $wallpaper --clock --fade-in 1 --indicator --indicator-thickness 6 --ring-color ebdbb2 --inside-color 00000055 --key-hl-color 4d4d4d --line-uses-ring --separator-color 00000000 --text-color ffffff --timestr "%H:%M"
 bindsym $mod+x exec bemenu-run | xargs swaymsg exec --
 
 bindsym Print exec grimshot --notify save area

sway/.config/waybar/style.css

@@ -1,18 +1,25 @@
 * {
     border: none;
     border-radius: 0;
-    font-family: JetBrains Mono;
-    font-size: 14px;
+    font-family: inherit;
+    font-size: inherit;
     min-height: 0;
     margin: 0 0px;
 }
 
+tooltip, tooltip *, menu {
+    font-family: 'sans-serif';
+    font-size: 14px;
+}
+
 window#waybar {
     background-color: #3c3836;
     border-bottom: none;
     color: #ebdbb2;
     transition-property: background-color;
     transition-duration: 0.5s;
+    font-family: 'JetBrainsMono Nerd Font', 'JetBrains Mono', 'Hack Nerd Font Mono', 'monospace';
+    font-size: 14px;
 }
 
 window#waybar.hidden {
@@ -20,7 +27,9 @@ window#waybar.hidden {
 }
 
 #workspaces button {
-    padding: 0 5px;
+    /* This padding top also increases the height of the entire bar */
+    /* horizontal padding is set to 0px to compensate for the Gruvbox GTK theme (it increases padding for buttons) */
+    padding: 3px 0px;
     color: #ebdbb2;
     border-radius: 5px;
 }
@@ -49,6 +58,11 @@ window#waybar.hidden {
     border-bottom: 3px solid #ffffff;
 }
 
+/* Rounded corner for the leftmost non-tray module on the right side */
+.modules-right > :nth-child(2) > * {
+    border-radius: 5px 0px 0px 5px;
+}
+
 #clock,
 #battery,
 #cpu,
@@ -120,7 +134,6 @@ label:focus {
 #network {
     background-color: #ebdbb2;
     color: #000000;
-    border-radius: 5px 0px 0px 5px;
 }
 
 #network.disconnected {
@@ -160,9 +173,14 @@ label:focus {
     background-color: #eb4d4b;
 }
 
-#tray, #custom-power {
+#tray {
     background-color: #3c3836;
-    padding: 0 8px;
+    padding: 0 12px;
+}
+
+#custom-power {
+    background-color: #3c3836;
+    padding: 0 16px;
 }
 
 #idle_inhibitor {

sway/.local/share/color-schemes/Gruvbox.colors

@@ -0,0 +1,105 @@
+[ColorEffects:Disabled]
+Color=56,56,56
+ColorAmount=0
+ColorEffect=0
+ContrastAmount=0.65000000000000002
+ContrastEffect=1
+IntensityAmount=0.10000000000000001
+IntensityEffect=2
+
+[ColorEffects:Inactive]
+ChangeSelectionColor=true
+Color=112,111,110
+ColorAmount=0.025000000000000001
+ColorEffect=2
+ContrastAmount=0.10000000000000001
+ContrastEffect=2
+Enable=true
+IntensityAmount=0
+IntensityEffect=0
+
+[Colors:Button]
+BackgroundAlternate=60,56,54
+BackgroundNormal=40,40,40
+DecorationFocus=131,165,152
+DecorationHover=131,165,152
+ForegroundActive=142,192,124
+ForegroundInactive=189,195,199
+ForegroundLink=184,187,38
+ForegroundNegative=218,68,83
+ForegroundNeutral=246,116,0
+ForegroundNormal=235,219,178
+ForegroundPositive=39,174,96
+ForegroundVisited=127,140,141
+
+[Colors:Selection]
+BackgroundAlternate=142,192,124
+BackgroundNormal=131,165,152
+DecorationFocus=131,165,152
+DecorationHover=131,165,152
+ForegroundActive=252,252,252
+ForegroundInactive=235,219,178
+ForegroundLink=253,188,75
+ForegroundNegative=218,68,83
+ForegroundNeutral=246,116,0
+ForegroundNormal=235,219,178
+ForegroundPositive=39,174,96
+ForegroundVisited=189,195,199
+
+[Colors:Tooltip]
+BackgroundAlternate=60,56,54
+BackgroundNormal=40,40,40
+DecorationFocus=131,165,152
+DecorationHover=131,165,152
+ForegroundActive=184,187,38
+ForegroundInactive=189,195,199
+ForegroundLink=142,192,124
+ForegroundNegative=218,68,83
+ForegroundNeutral=246,116,0
+ForegroundNormal=235,219,178
+ForegroundPositive=39,174,96
+ForegroundVisited=127,140,141
+
+[Colors:View]
+BackgroundAlternate=60,56,54
+BackgroundNormal=40,40,40
+DecorationFocus=131,165,152
+DecorationHover=131,165,152
+ForegroundActive=184,187,38
+ForegroundInactive=189,195,199
+ForegroundLink=142,192,124
+ForegroundNegative=218,68,83
+ForegroundNeutral=246,116,0
+ForegroundNormal=235,219,178
+ForegroundPositive=39,174,96
+ForegroundVisited=127,140,141
+
+[Colors:Window]
+BackgroundAlternate=60,56,54
+BackgroundNormal=40,40,40
+DecorationFocus=131,165,152
+DecorationHover=131,165,152
+ForegroundActive=184,187,38
+ForegroundInactive=189,195,199
+ForegroundLink=142,192,124
+ForegroundNegative=218,68,83
+ForegroundNeutral=246,116,0
+ForegroundNormal=235,219,178
+ForegroundPositive=39,174,96
+ForegroundVisited=127,140,141
+
+[General]
+ColorScheme=Gruvbox
+Name=Gruvbox
+shadeSortColumn=true
+
+[KDE]
+contrast=4
+
+[WM]
+activeBackground=39,39,39
+activeBlend=235,219,178
+activeForeground=235,219,178
+inactiveBackground=40,40,40
+inactiveBlend=60,56,54
+inactiveForeground=204,190,155

sway/.local/share/qt5ct/colors/gruvbox.conf

@@ -0,0 +1,4 @@
+[ColorScheme]
+active_colors=#ffffffff, #ff7c6f64, #ffebdbb2, #ffd5c4a1, #ff32302f, #ff665c54, #ffebdbb2, #fffbf1c7, #fffbf1c7, #ff282828, #ff1d2021, #ffe7e4e0, #ffa89984, #fffbf1c7, #ff458588, #ff458588, #ff3c3836, #ffebdbb2, #ff3c3836, #ffebdbb2, #80ffffff
+disabled_colors=#ff808080, #ff7c6f64, #ffebdbb2, #ffd5c4a1, #ff32302f, #ff665c54, #ff808080, #fffbf1c7, #ff808080, #ff282828, #ff1d2021, #ffe7e4e0, #ffa89984, #ff808080, #ff458588, #ff458588, #ff3c3836, #ffebdbb2, #ff3c3836, #ffebdbb2, #80ffffff
+inactive_colors=#ffffffff, #ff7c6f64, #ffebdbb2, #ffd5c4a1, #ff32302f, #ff665c54, #ffebdbb2, #fffbf1c7, #fffbf1c7, #ff282828, #ff1d2021, #ffe7e4e0, #ffa89984, #fffbf1c7, #ff458588, #ff458588, #ff3c3836, #ffebdbb2, #ff3c3836, #ffebdbb2, #80ffffff