Switch to minimal ironbar implementation

Save reference for later
Enable upower daemon and add simple bar with the essentials for now,
TODO more later

home/hyprland/ironbar/config/config.toml

@@ -0,0 +1,44 @@
+anchor_to_edges = true
+icon_theme = "Delta"
+position = "bottom"
+
+[[start]]
+all_monitors = false
+type = "workspaces"
+
+[start.name_map]
+1 = "󰟀" # [t]erminal
+2 = "󰳼" # [d]ev
+3 = "󰖟" # [b]rowser
+4 = "󰃭" # [a]genda (or c[a]lendar)
+5 = "󰝰" # [f]iles
+6 = "󰲸" # [s]potify (or mu[s]ic)
+7 = "󰭹" # [c]hat
+8 = "󰢹" # [r]emote
+9 = "󰊗" # [g]aming
+default = "󰛡"
+special = "󰓎"
+urgent = "󰣘"
+
+[[center]]
+favorites = [ "emacs", "firefox"]
+show_icons = true
+show_names = false
+type = "launcher"
+
+[[end]]
+player_type = "mpris"
+type = "music"
+
+[end.truncate]
+max_length = 100
+mode = "end"
+
+[[end]]
+type = "upower"
+
+[[end]]
+type = "clock"
+
+[[end]]
+type = "tray"

home/hyprland/ironbar/config/style.css

@@ -1,266 +1,40 @@
-.container {
+@define-color base   #24273a;
-  font-family: cjkFonts;
+@define-color mantle #1e2030;
-  font-weight: bold;
+@define-color crust  #181926;
-  font-size: 23px;
-}
 
-#cava {
+@define-color text     #cad3f5;
-  font-family: renogare;
+@define-color subtext0 #a5adcb;
-}
+@define-color subtext1 #b8c0e0;
 
-.time {
+@define-color surface0 #363a4f;
-  font-size: 23px;
+@define-color surface1 #494d64;
-  font-weight: normal;
+@define-color surface2 #5b6078;
-  padding: 0px 10px 0px 10px;
-  background: linear-gradient(45deg, rgb(254, 240, 224) 0%, rgb(244, 169, 158) 50%, rgb(238, 214, 215) 100%);
-  background-size: 300% 300%;
-  animation: gradient 5s ease infinite;
-  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
-  box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
-  border-radius: 16px;
-  margin: 10px 10px 10px 10px;
-  font-family: Renogare;
-}
 
-.clock_date {
+@define-color overlay0 #6e738d;
-  font-family: Renogare;
+@define-color overlay1 #8087a2;
-  font-weight: normal;
+@define-color overlay2 #939ab7;
-  font-size: 18;
-  color: rgb(49, 50, 68);
-}
 
+@define-color blue      #8aadf4;
+@define-color lavender  #b7bdf8;
+@define-color sapphire  #7dc4e4;
+@define-color sky       #91d7e3;
+@define-color teal      #8bd5ca;
+@define-color green     #a6da95;
+@define-color yellow    #eed49f;
+@define-color peach     #f5a97f;
+@define-color maroon    #ee99a0;
+@define-color red       #ed8796;
+@define-color mauve     #c6a0f6;
+@define-color pink      #f5bde6;
+@define-color flamingo  #f0c6c6;
+@define-color rosewater #f4dbd6;
 
-.background {
+* {
-  background-color: rgba(0, 0, 0, 0)
+    color: @text;
-}
+    font-family: "Fira Sans";
-
+    /* border: 1px solid @surface2; */
-.popup-clock {
-  font-weight: bolder;
-  background: rgb(36, 39, 58);
-}
-
-.popup-pwr {
-  background: rgb(234, 153, 156);
-  color: rgb(48, 52, 70);
-  background: rgb(238, 190, 190);
-  background: linear-gradient(45deg, rgb(129, 200, 190) 0%, rgb(244, 184, 228) 43%, rgb(153, 209, 219) 80%, rgb(202, 158, 230) 100%);
-  background-size: 300% 300%;
-  animation: gradient 10s ease infinite;
-  border: none;
-}
-
-#power-btn {
-  padding: 0px 20px 0px 20px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  margin-right: 15px;
-  margin-left: 0px;
-  border-radius: 15px;
-  background: rgb(238, 190, 190);
-  background: linear-gradient(45deg, rgb(129, 200, 190) 0%, rgb(244, 184, 228) 43%, rgb(153, 209, 219) 80%, rgb(202, 158, 230) 100%);
-  background-size: 300% 300%;
-  animation: gradient 10s ease infinite;
-  border: none;
-  font-weight: bolder;
-  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 5px 2px;
-}
-
-#shutdown {
-  background: rgb(238, 190, 190);
-}
-
-#reboot {
-  background: rgb(140, 170, 238);
-}
-
-#hibernation {
-  box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 5px 2px;
-  background: rgb(153, 209, 219);
-}
-
-/* base */
-.sysinfo .item,
-.script,
-.tray {
-  padding: 0px 10px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  margin-right: 10px;
-  border-radius: 15px;
-  background: #cdd6f4;
-  color: #516079;
-  box-shadow: rgba(0, 0, 0, 0.116) 2px 2px 5px 2px;
-}
-
-.scale,
-.internet,
-.script {
-  transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
-  margin-top: 10px;
-  margin-bottom: 10px;
-  margin-right: 10px;
-  padding-right: 20px;
-  padding-left: 20px;
-  padding-bottom: 3px;
-  box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
-  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
-  border-radius: 15px;
-  background: rgb(202, 158, 230);
-  background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
-  background-size: 300% 300%;
-  animation: gradient 5s ease infinite;
-  color: #fff;
-}
-
-
-scale trough {
-  border-radius: 16px;
-  background-color: #E7D4CB;
-  box-shadow: 0 2px 3px 2px rgba(00, 00, 00, 0.4);
-  min-height: 10px;
-  min-width: 70px;
-  margin: 0px 5px 10px 10px;
-}
-
-scale value {
-  color: #77a5bf;
-  font-size: 0px;
-}
-
-scale trough highlight {
-  background-image: linear-gradient(to right, #afcee0 30%, #92B6F4 50%, #77a5bf 100%);
-  border-radius: 10px;
-  background-color: #afcee0;
-}
-
-.focused {
-  color: rgb(84, 111, 175);
-  font-size: 20px;
-  padding: 0px 10px 0px 10px;
-  margin: 10px 10px 10px 0px;
-  background: rgb(238, 190, 190);
-  background: linear-gradient(45deg, rgb(244, 219, 214) 0%, rgb(223, 221, 238) 43%, rgb(245, 208, 225) 100%);
-  background-size: 300% 300%;
-  animation: gradient 5s ease infinite;
-  border-radius: 16px;
-}
-
-
-/* cpu */
-.sysinfo .item:nth-child(1) {
-  background: rgb(180, 190, 254);
-  background: linear-gradient(52deg, rgba(180, 190, 254, 1) 0%, rgba(137, 220, 235, 1) 32%, rgba(137, 180, 250, 1) 72%, rgba(166, 227, 161, 1) 100%);
-  background-size: 300% 300%;
-  animation: gradient 20s ease infinite;
-  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
-  /* background-color: #b4befe; */
-  color: #fff;
-}
-
-.clock {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  margin-right: 10px;
-  padding-right: 20px;
-  padding-left: 20px;
-  padding-bottom: 3px;
-  box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
-  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
-  border: none;
-  border-radius: 15px;
-  font-size: 24px;
-  background: rgb(202, 158, 230);
-  background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
-  background-size: 300% 300%;
-  animation: gradient 10s ease infinite;
-  color: #fff;
-}
-
-.tray {
-  color: rgb(84, 111, 175);
-  font-size: 15px;
-  padding: 0px 10px 0px 10px;
-  margin: 10px 10px 10px 0px;
-  background: rgb(238, 190, 190);
-  background: linear-gradient(45deg, rgb(244, 219, 214) 0%, rgb(223, 221, 238) 43%, rgb(245, 208, 225) 100%);
-  background-size: 300% 300%;
-  animation: gradient 5s ease infinite;
-  border-radius: 16px;
-}
-
-.tray>.passive {
-  -gtk-icon-effect: dim;
-}
-
-.tray>.needs-attention {
-  -gtk-icon-effect: highlight;
-  background-color: #eb4d4b;
 }
 
 .workspaces {
-  font-family: Renogare;
+    font-size: 24px;
-  font-weight: normal;
-  font-size: 25px;
-  font-weight: normal;
-  margin: 10px 0px 0px 20px;
-  border-radius: 16px;
-}
-
-.workspaces .item {
-  box-shadow: rgba(0, 0, 0, 0.116) 2 2 5 2px;
-  border: unset;
-  background: #fff;
-  border-radius: 15px;
-  margin: 10px 10px 15px 0px;
-  padding: 5px 20px 5px 20px;
-  color: #cba6f7;
-}
-
-.workspaces .item.focused {
-  border: unset;
-  font-size: 25px;
-  transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
-  box-shadow: rgba(0, 0, 0, 0.288) 2 2 5 2px;
-  text-shadow: 0 0 5px rgba(0, 0, 0, 0.377);
-  padding: 5px 10px 5px 10px;
-  border-radius: 16px;
-  margin: 10px 10px 15px 0px;
-  background: rgb(202, 158, 230);
-  background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
-  background-size: 300% 300%;
-  animation: gradient 10s ease infinite;
-  color: #fff;
-}
-
-
-@keyframes gradient {
-  0% {
-    background-position: 0% 50%;
-  }
-
-  50% {
-    background-position: 100% 50%;
-  }
-
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
-
-tooltip.background {
-  background-color: rgba(00, 00, 00, 0.5);
-  font-size: 18;
-  border-radius: 10px;
-  color: #FDFDFD;
-}
-
-tooltip * {
-  padding: 4px;
-  background-color: transparent;
-  color: white;
-}
-
-.host tooltip {
-  background-color: rgba(255, 00, 00, 0.5);
 }

home/hyprland/ironbar/reference/style.css

@@ -0,0 +1,266 @@
+.container {
+  font-family: cjkFonts;
+  font-weight: bold;
+  font-size: 23px;
+}
+
+#cava {
+  font-family: renogare;
+}
+
+.time {
+  font-size: 23px;
+  font-weight: normal;
+  padding: 0px 10px 0px 10px;
+  background: linear-gradient(45deg, rgb(254, 240, 224) 0%, rgb(244, 169, 158) 50%, rgb(238, 214, 215) 100%);
+  background-size: 300% 300%;
+  animation: gradient 5s ease infinite;
+  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
+  box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
+  border-radius: 16px;
+  margin: 10px 10px 10px 10px;
+  font-family: Renogare;
+}
+
+.clock_date {
+  font-family: Renogare;
+  font-weight: normal;
+  font-size: 18;
+  color: rgb(49, 50, 68);
+}
+
+
+.background {
+  background-color: rgba(0, 0, 0, 0)
+}
+
+.popup-clock {
+  font-weight: bolder;
+  background: rgb(36, 39, 58);
+}
+
+.popup-pwr {
+  background: rgb(234, 153, 156);
+  color: rgb(48, 52, 70);
+  background: rgb(238, 190, 190);
+  background: linear-gradient(45deg, rgb(129, 200, 190) 0%, rgb(244, 184, 228) 43%, rgb(153, 209, 219) 80%, rgb(202, 158, 230) 100%);
+  background-size: 300% 300%;
+  animation: gradient 10s ease infinite;
+  border: none;
+}
+
+#power-btn {
+  padding: 0px 20px 0px 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 15px;
+  margin-left: 0px;
+  border-radius: 15px;
+  background: rgb(238, 190, 190);
+  background: linear-gradient(45deg, rgb(129, 200, 190) 0%, rgb(244, 184, 228) 43%, rgb(153, 209, 219) 80%, rgb(202, 158, 230) 100%);
+  background-size: 300% 300%;
+  animation: gradient 10s ease infinite;
+  border: none;
+  font-weight: bolder;
+  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 5px 2px;
+}
+
+#shutdown {
+  background: rgb(238, 190, 190);
+}
+
+#reboot {
+  background: rgb(140, 170, 238);
+}
+
+#hibernation {
+  box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 5px 2px;
+  background: rgb(153, 209, 219);
+}
+
+/* base */
+.sysinfo .item,
+.script,
+.tray {
+  padding: 0px 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  border-radius: 15px;
+  background: #cdd6f4;
+  color: #516079;
+  box-shadow: rgba(0, 0, 0, 0.116) 2px 2px 5px 2px;
+}
+
+.scale,
+.internet,
+.script {
+  transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-bottom: 3px;
+  box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
+  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
+  border-radius: 15px;
+  background: rgb(202, 158, 230);
+  background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
+  background-size: 300% 300%;
+  animation: gradient 5s ease infinite;
+  color: #fff;
+}
+
+
+scale trough {
+  border-radius: 16px;
+  background-color: #E7D4CB;
+  box-shadow: 0 2px 3px 2px rgba(00, 00, 00, 0.4);
+  min-height: 10px;
+  min-width: 70px;
+  margin: 0px 5px 10px 10px;
+}
+
+scale value {
+  color: #77a5bf;
+  font-size: 0px;
+}
+
+scale trough highlight {
+  background-image: linear-gradient(to right, #afcee0 30%, #92B6F4 50%, #77a5bf 100%);
+  border-radius: 10px;
+  background-color: #afcee0;
+}
+
+.focused {
+  color: rgb(84, 111, 175);
+  font-size: 20px;
+  padding: 0px 10px 0px 10px;
+  margin: 10px 10px 10px 0px;
+  background: rgb(238, 190, 190);
+  background: linear-gradient(45deg, rgb(244, 219, 214) 0%, rgb(223, 221, 238) 43%, rgb(245, 208, 225) 100%);
+  background-size: 300% 300%;
+  animation: gradient 5s ease infinite;
+  border-radius: 16px;
+}
+
+
+/* cpu */
+.sysinfo .item:nth-child(1) {
+  background: rgb(180, 190, 254);
+  background: linear-gradient(52deg, rgba(180, 190, 254, 1) 0%, rgba(137, 220, 235, 1) 32%, rgba(137, 180, 250, 1) 72%, rgba(166, 227, 161, 1) 100%);
+  background-size: 300% 300%;
+  animation: gradient 20s ease infinite;
+  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
+  /* background-color: #b4befe; */
+  color: #fff;
+}
+
+.clock {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-bottom: 3px;
+  box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
+  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
+  border: none;
+  border-radius: 15px;
+  font-size: 24px;
+  background: rgb(202, 158, 230);
+  background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
+  background-size: 300% 300%;
+  animation: gradient 10s ease infinite;
+  color: #fff;
+}
+
+.tray {
+  color: rgb(84, 111, 175);
+  font-size: 15px;
+  padding: 0px 10px 0px 10px;
+  margin: 10px 10px 10px 0px;
+  background: rgb(238, 190, 190);
+  background: linear-gradient(45deg, rgb(244, 219, 214) 0%, rgb(223, 221, 238) 43%, rgb(245, 208, 225) 100%);
+  background-size: 300% 300%;
+  animation: gradient 5s ease infinite;
+  border-radius: 16px;
+}
+
+.tray>.passive {
+  -gtk-icon-effect: dim;
+}
+
+.tray>.needs-attention {
+  -gtk-icon-effect: highlight;
+  background-color: #eb4d4b;
+}
+
+.workspaces {
+  font-family: Renogare;
+  font-weight: normal;
+  font-size: 25px;
+  font-weight: normal;
+  margin: 10px 0px 0px 20px;
+  border-radius: 16px;
+}
+
+.workspaces .item {
+  box-shadow: rgba(0, 0, 0, 0.116) 2 2 5 2px;
+  border: unset;
+  background: #fff;
+  border-radius: 15px;
+  margin: 10px 10px 15px 0px;
+  padding: 5px 20px 5px 20px;
+  color: #cba6f7;
+}
+
+.workspaces .item.focused {
+  border: unset;
+  font-size: 25px;
+  transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
+  box-shadow: rgba(0, 0, 0, 0.288) 2 2 5 2px;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.377);
+  padding: 5px 10px 5px 10px;
+  border-radius: 16px;
+  margin: 10px 10px 15px 0px;
+  background: rgb(202, 158, 230);
+  background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
+  background-size: 300% 300%;
+  animation: gradient 10s ease infinite;
+  color: #fff;
+}
+
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+
+tooltip.background {
+  background-color: rgba(00, 00, 00, 0.5);
+  font-size: 18;
+  border-radius: 10px;
+  color: #FDFDFD;
+}
+
+tooltip * {
+  padding: 4px;
+  background-color: transparent;
+  color: white;
+}
+
+.host tooltip {
+  background-color: rgba(255, 00, 00, 0.5);
+}

system/default.nix

@@ -49,7 +49,10 @@ in {
   };
   console.keyMap = "uk";
   programs.ssh.startAgent = true;
-  services.power-profiles-daemon.enable = true;
+  services = {
+    upower.enable = true;
+    power-profiles-daemon.enable = true;
+  };
   virtualisation.podman.enable = true;
   time.timeZone = "Europe/London";
   i18n = let locale = "en_GB.UTF-8";