From 35a454accc09edc959df218bf905ff3566a717fa Mon Sep 17 00:00:00 2001 From: Andre Ramnitz Date: Sun, 15 Sep 2024 01:00:56 +0200 Subject: [PATCH] waybar: integrate base16 --- config/dot-config/waybar/colors.css | 23 ++++ config/dot-config/waybar/config.jsonc | 38 ++++-- config/dot-config/waybar/style.css | 175 +++++++++++++------------- 3 files changed, 136 insertions(+), 100 deletions(-) create mode 100644 config/dot-config/waybar/colors.css diff --git a/config/dot-config/waybar/colors.css b/config/dot-config/waybar/colors.css new file mode 100644 index 00000000..06875a4b --- /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 2ab84aac..3068c5ea 100644 --- 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": "{:%Y %B}\n{calendar}", diff --git a/config/dot-config/waybar/style.css b/config/dot-config/waybar/style.css index 0bfa74bb..df6a8160 100644 --- 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; } -- 2.51.2