waybar: integrate base16

diff --git a/config/dot-config/waybar/colors.css b/config/dot-config/waybar/colors.css
new file mode 100644 (file)
index 0000000..06875a4
--- /dev/null
+++ b/config/dot-config/waybar/colors.css
@@ -0,0 +1,23 @@
+/*
+*
+* Base16 Ocean
+* Author: Chris Kempson (http://chriskempson.com)
+*
+*/
+
+@define-color base00 #2b303b;
+@define-color base01 #343d46;
+@define-color base02 #4f5b66;
+@define-color base03 #65737e;
+@define-color base04 #a7adba;
+@define-color base05 #c0c5ce;
+@define-color base06 #dfe1e8;
+@define-color base07 #eff1f5;
+@define-color base08 #bf616a;
+@define-color base09 #d08770;
+@define-color base0A #ebcb8b;
+@define-color base0B #a3be8c;
+@define-color base0C #96b5b4;
+@define-color base0D #8fa1b3;
+@define-color base0E #b48ead;
+@define-color base0F #ab7967;
\ No newline at end of file

diff --git a/config/dot-config/waybar/config.jsonc b/config/dot-config/waybar/config.jsonc
index 2ab84aacbc31ff9d885dba267c4780629982acf3..3068c5ea092b02d1d4203fcba7ec5df684e6ad19 100644 (file)
--- a/config/dot-config/waybar/config.jsonc
+++ b/config/dot-config/waybar/config.jsonc
@@ -3,10 +3,10 @@
   "layer": "top", // Waybar at top layer
   "position": "top", // Waybar position (top|bottom|left|right)
   "width": 3440, // Waybar width
-  "height": 32, // Waybar height, leave blank for auto
+  "height": 20, // Waybar height, leave blank for auto
   "spacing": 1, // Gaps between modules (4px)
-  "modules-left": ["custom/launcher", "hyprland/workspaces", "mpd"],
-  "modules-center": ["hyprland/window"],
+  "modules-left": ["custom/launcher", "hyprland/workspaces", "custom/pipespacer", "hyprland/window"],
+  "modules-center": ["mpd"],
   "modules-right": [
     "tray",
     "custom/pipespacer",
@@ -17,7 +17,7 @@
     "custom/pipespacer",
     "group/gammarelay",
     "custom/pipespacer",
-    "pulseaudio",
+    "wireplumber",
     "custom/pipespacer",
     "idle_inhibitor",
     "custom/pipespacer",
@@ -169,35 +169,35 @@
   "temperature": {
     "hwmon-path": "/sys/class/hwmon/hwmon4/temp6_input",
     "critical-threshold": 42,
-    "format": ":{temperatureC}°C {icon}",
+    "format": "h2o: {temperatureC}°C {icon}",
     "format-icons": ["", "", ""],
   },
 
   "temperature#cpu": {
     "hwmon-path": "/sys/class/hwmon/hwmon3/temp1_input",
     "critical-threshold": 75,
-    "format": "CPU:{temperatureC}°C ",
+    "format": "CPU: {temperatureC}°C ",
     "format-icons": ["", "", ""],
   },
 
   "temperature#chipset": {
     "hwmon-path": "/sys/class/hwmon/hwmon4/temp5_input",
     "critical-threshold": 75,
-    "format": "Chipset:{temperatureC}°C ",
+    "format": "Chipset: {temperatureC}°C ",
     "format-icons": ["", "", ""],
   },
 
   "temperature#vrm": {
     "hwmon-path": "/sys/class/hwmon/hwmon4/temp9_input",
     "critical-threshold": 95,
-    "format": "VRM:{temperatureC}°C ",
+    "format": "VRM: {temperatureC}°C ",
     "format-icons": ["", "", ""],
   },
 
   "temperature#gpu": {
     "hwmon-path": "/sys/class/drm/card0/device/hwmon/hwmon0/temp2_input",
     "critical-threshold": 110,
-    "format": "GPU:{temperatureC}°C ",
+    "format": "GPU: {temperatureC}°C ",
     "format-icons": ["", "", ""],
   },
 
@@ -231,6 +231,26 @@
     "on-click": "pavucontrol",
   },
 
+  "pipewire": {
+    "scroll-step": 5, // %, can be a float
+    "format": "{volume} {icon}",
+    "format-bluetooth": "{icon} {volume}%",
+    "format-bluetooth-muted": " {icon}",
+    "format-muted": " ",
+    "format-source": "{volume} ",
+    "format-source-muted": "",
+    "format-icons": {
+      "headphone": "",
+      "hands-free": "",
+      "headset": "",
+      "phone": "",
+      "portable": "",
+      "car": "",
+      "default": ["", "", ""],
+    },
+    "on-click": "pavucontrol",
+  },
+
   "clock": {
     "timezone": "Europe/Berlin",
     "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",

diff --git a/config/dot-config/waybar/style.css b/config/dot-config/waybar/style.css
index 0bfa74bb4e49b727d964d14c45b1d9ba9e6f6913..df6a8160483328f2e1fd523a17111cbe4c6a66dd 100644 (file)
--- a/config/dot-config/waybar/style.css
+++ b/config/dot-config/waybar/style.css
@@ -1,13 +1,11 @@
 /* -----------------------------------  import ----------------------------------- */
-@import "../colors/colorscheme.css";
+@import "colors.css";
 
 /* -----------------------------------  window ----------------------------------- */
 * {
-  font-family: "Iosevka Nerd Font Propo";
-  font-size: 12pt;
-  min-height: 0px;
-  font-weight: 500;
-  font-stretch: expanded;
+  font-family: "SF Mono Nerd Font";
+  font-size: 11pt;
+  min-height: 12px;
   padding: 0;
   margin: 0;
 }
@@ -15,11 +13,11 @@
 /* -----------------------------------  waybar ----------------------------------- */
 #waybar {
   border-radius: 0px 0px 8px 8px;
-  border-top: 1px @brightblack;
-  border-bottom: 1px @brightblack;
-  border-left: 1px @brightblack;
-  border-right: 1px @brightblack;
-  color: @foreground;
+  border-top: 1px @base00;
+  border-bottom: 1px @base00;
+  border-left: 1px @base00;
+  border-right: 1px @base00;
+  color: @base05;
   background-color: transparent;
 }
 
@@ -30,14 +28,13 @@
 }
 
 tooltip {
-  background: @background;
-  border: 1px @brightblack;
+  background: @base00;
+  border: 1px @base02;
   border-radius: 4px;
 }
 tooltip label {
   padding: 8px;
-  color: @text;
-  font-size: 15pt;
+  color: @base05;
 }
 
 /* ------------------------------------ modules left ------------------------------- */
@@ -48,67 +45,68 @@ tooltip label {
   margin-left: 1px;
   margin-right: 1px;
   margin-bottom: 3px;
-  color: @background;
-  background: @yellow;
-  border: 1px solid alpha(@brightblack, 0.5);
-  border-radius: 2px 8px 2px 8px;
-  font-size: 14pt;
+  color: @base00;
+  background: @base09;
+  border: 1px solid alpha(@base02, 0.9);
+  border-radius: 4px 8px 4px 8px;
+  font-size: 13pt;
+  font-weight: 500;
 }
 
 #workspaces {
   border-radius: 0px;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 5px;
+  padding-right: 5px;
   margin-top: 2px;
-  margin-left: 1px;
-  margin-right: 1px;
+  margin-left: 0px;
+  margin-right: 0px;
   margin-bottom: 2px;
-  background-color: alpha(@brightblack, 0.3);
   font-size: 13pt;
   background: none;
 }
 
 #workspaces button {
-  border-radius: 12px;
-  background: @brightblack;
-  color: @bt5;
-  border: 0px solid @brightblack;
-  padding-left: 8px;
-  padding-right: 8px;
+  border-radius: 8px;
+  background: @base03;
+  color: @base00;
+  border: 1px solid @base02;
+  padding: 0 8px;
   margin-top: 1px;
   margin-left: 1px;
   margin-right: 1px;
   margin-bottom: 2px;
-  transition: all 0.3s ease;
   font-weight: 500;
+  transition: all 0.3s ease;
 }
 
 #workspaces button:hover {
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: inherit;
   text-shadow: inherit;
-  color: @background;
+  color: @base01;
   opacity: 0.8;
-  background: @cyan;
-  border: 0px solid @brightblack;
+  background: @base0F;
+  border: inherit;
+  padding: 0 8px;
   transition: all 0.3s ease;
+  animation: colored-gradient 10s ease infinite;
 }
 
 #workspaces button.focused,
 #workspaces button.active {
-  border-radius: 12px;
-  background: @cyan;
-  border: 0px solid @brightblack;
-  color: @background;
+  border-radius: 8px;
+  background: @base09;
+  border: 1px solid @base02;
+  padding: 0 8px;
+  color: @base00;
   transition: all 0.3s ease;
-  animation: colored-gradient 10s ease infinite;
 }
 
 #workspaces button.urgent {
   border-radius: 8px;
-  background: @red;
-  border: 0px solid @brightblack;
-  color: @background;
+  background: @base0A;
+  border: 1px solid @base02;
+  color: @base00;
   transition: all 0.3s ease;
 }
 
@@ -120,9 +118,7 @@ tooltip label {
   margin-left: 1px;
   margin-right: 1px;
   margin-bottom: 2px;
-  color: @foreground;
-  background-color: alpha(@cyan, 0.3);
-  border: 1px solid alpha(@brightblack, 0.5);
+  color: @base05;
   background: none;
   border: none;
 }
@@ -130,8 +126,7 @@ tooltip label {
 #mpris {
   padding-left: 8px;
   padding-right: 8px;
-  color: @brightblack;
-  background-color: alpha(@brightblack, 0.3);
+  color: @base00;
   background: none;
   border: none;
 }
@@ -139,18 +134,18 @@ tooltip label {
 /* ------------------------------------ modules center ----------------------------- */
 #window {
   border-radius: 0px;
-  color: @cyan;
-  background-color: alpha(@brightblack, 0.3);
-  border: 1px solid alpha(@brightblack, 0.5);
+  color: @base05;
   background: none;
   border: none;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 window#waybar {
-  border-left: 1px solid @brightblack;
-  border-right: 1px solid @brightblack;
-  border-bottom: 1px solid @brightblack;
-  background-color: alpha(@background, 0.8);
+  border-left: 1px solid @base00;
+  border-right: 1px solid @base00;
+  border-bottom: 1px solid @base00;
+  background-color: alpha(@base01, 0.95);
   transition-property: background-color;
   transition-duration: 0.5s;
   /*background-image: url("/home/andy/dotfiles/config/waybar/textures/D_0.65.png");
@@ -163,8 +158,8 @@ window#waybar {
 #tray {
   padding-left: 8px;
   padding-right: 8px;
-  color: @brightblack;
-  background-color: alpha(@brightblack, 0.3);
+  color: @base00;
+  background-color: alpha(@base00, 0.3);
   background: none;
   border: none;
 }
@@ -172,19 +167,19 @@ window#waybar {
 #pulseaudio {
   padding-left: 8px;
   padding-right: 8px;
-  color: @blue;
-  background-color: alpha(@yellow, 0.3);
+  color: @base0C;
+  background-color: alpha(@base09, 0.3);
   font-weight: 600;
-  font-size: 13pt;
   background: none;
   border: none;
 }
 
-#mpd#volume {
-  padding-left: 0px;
-  color: @white;
-  background: alpha(@brightblack, 0.3);
-  padding-right: 4px;
+#wireplumber {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base0C;
+  background-color: alpha(@base09, 0.3);
+  font-weight: 600;
   background: none;
   border: none;
 }
@@ -192,20 +187,18 @@ window#waybar {
 #cpu {
   padding-left: 8px;
   padding-right: 4px;
-  color: @orange;
-  background-color: alpha(@orange, 0.3);
+  color: @base0A;
+  background-color: alpha(@base0A, 0.3);
   font-weight: 600;
-  font-size: 13pt;
   background: none;
   border: none;
 }
 #memory {
   padding-left: 4px;
   padding-right: 8px;
-  color: @orange;
-  background-color: alpha(@orange, 0.3);
+  color: @base0A;
+  background-color: alpha(@base0A, 0.3);
   font-weight: 600;
-  font-size: 13pt;
   background: none;
   border: none;
 }
@@ -213,10 +206,9 @@ window#waybar {
 #clock {
   padding-left: 8px;
   padding-right: 12px;
-  color: @foreground;
-  background-color: alpha(@brightblack, 0.3);
+  color: @base05;
+  background-color: alpha(@base00, 0.3);
   font-weight: 600;
-  font-size: 13pt;
   background: none;
   border: none;
 }
@@ -228,8 +220,8 @@ window#waybar {
 #temperature#gpu {
   padding-left: 8px;
   padding-right: 8px;
-  color: @green;
-  background-color: alpha(@green, 0.3);
+  color: @base0D;
+  background-color: alpha(@base0D, 0.3);
   background: none;
   border: none;
 }
@@ -241,8 +233,8 @@ window#waybar {
 #temperature#gpu.critical {
   padding-left: 8px;
   padding-right: 8px;
-  color: @red;
-  background-color: alpha(@red, 0.3);
+  color: @base08;
+  background-color: alpha(@base08, 0.3);
   background: none;
   border: none;
 }
@@ -252,8 +244,8 @@ window#waybar {
 #custom-gammarelay-brightness {
   padding-left: 8px;
   padding-right: 8px;
-  color: @yellow;
-  background-color: alpha(@yellow, 0.3);
+  color: @base09;
+  background-color: alpha(@base09, 0.3);
   background: none;
   border: none;
 }
@@ -262,8 +254,8 @@ window#waybar {
 #custom-wallpaper {
   padding-left: 8px;
   padding-right: 8px;
-  color: @purple;
-  background-color: alpha(@purple, 0.3);
+  color: @base0E;
+  background-color: alpha(@base0E, 0.3);
   background: none;
   border: none;
 }
@@ -271,8 +263,8 @@ window#waybar {
 #custom-powermenu {
   padding-left: 8px;
   padding-right: 8px;
-  color: @yellow;
-  background-color: alpha(@yellow, 0.3);
+  color: @base09;
+  background-color: alpha(@base09, 0.3);
   background: none;
   border: none;
 }
@@ -280,7 +272,7 @@ window#waybar {
 #custom-pipespacer {
   background: none;
   border: none;
-  color: @foreground;
+  color: @base04;
 }
 
 #custom-notification {
@@ -290,9 +282,10 @@ window#waybar {
   margin-left: 1px;
   margin-right: 1px;
   margin-bottom: 3px;
-  color: @background;
-  background: @yellow;
-  border: 1px solid alpha(@brightblack, 0.5);
-  border-radius: 8px 2px 8px 2px;
-  font-size: 14pt;
+  color: @base00;
+  background: @base09;
+  border: 1px solid alpha(@base02, 0.5);
+  border-radius: 8px 4px 8px 4px;
+  font-size: 13pt;
+  font-weight: 500;
 }