summary refs log tree commit diff
path: root/.config/waybar/style.css
diff options
context:
space:
mode:
Diffstat (limited to '.config/waybar/style.css')
-rw-r--r--.config/waybar/style.css340
1 files changed, 186 insertions, 154 deletions
diff --git a/.config/waybar/style.css b/.config/waybar/style.css
index 02b6893..af8cdc5 100644
--- a/.config/waybar/style.css
+++ b/.config/waybar/style.css
@@ -1,43 +1,28 @@
-@define-color color00 #1c1c1c;
-@define-color color01 #db4d6d;
-@define-color color02 #5dac81;
-@define-color color03 #fad689;
-@define-color color04 #58b2dc;
-@define-color color05 #70649a;
-@define-color color06 #69b0ac;
-@define-color color07 #bdc0ba;
-@define-color color08 #0c0c0c;
-@define-color color09 #cb1b45;
-@define-color color10 #86c166;
-@define-color color11 #f7d94c;
-@define-color color12 #2ea9df;
-@define-color color13 #8a6bbe;
-@define-color color14 #81c7d4;
-@define-color color15 #fffffb;
-
-@define-color accent #8a6bbe;
-@define-color accentdarker #70649a;
-
-@define-color foreground @color07;
+@import "colors.css";
+
+@define-color accent @base06;
+@define-color accentdarker @base0E;
+@define-color foreground @base07;
 @define-color background rgba(12, 12, 12, 0.96);
 @define-color dimmed #5e5e5e;
 @define-color dimmeddarker #434343;
-@define-color urgent #9f353a;
+@define-color urgent @base09;
 
 * {
-  border: none;
-  border-radius: 0;
-  font-family: Iosevka Aile, Sarasa Fixed J, Material Design Icons, Font Awesome;
-  font-size: 10pt;
+    border: none;
+    border-radius: 0;
+    font-family: Iosevka Aile, Sarasa Fixed J, Material Design Icons, Font Awesome;
+    font-size: 10pt;
 }
 
 window#waybar {
-  background: @background;
-  color: @foreground;
-  /* padding: 0 0.3rem; */
+    background: @background;
+    color: @foreground;
+    /* padding: 0 0.3rem; */
 }
+
 window#waybar.hidden {
-  opacity: 0;
+    opacity: 0;
 }
 
 
@@ -53,6 +38,7 @@ window#waybar.hidden {
 #idle_inhibitor,
 #network,
 #pulseaudio,
+#wireplumber,
 #custom-toggl,
 #custom-gammastep,
 #custom-weather,
@@ -61,10 +47,10 @@ window#waybar.hidden {
 #custom-covid,
 #custom-timetracked,
 #tray {
-  /* border-top: 1px solid @dimmeddarker; */
-  padding: 0 0.1rem;
-  margin: 0 0.2rem;
-  color: @dimmed;
+    /* border-top: 1px solid @dimmeddarker; */
+    padding: 0 0.1rem;
+    margin: 0 0.2rem;
+    color: @dimmed;
 }
 
 #cpu:hover,
@@ -74,260 +60,306 @@ window#waybar.hidden {
 #network:hover,
 #network.tailscale:hover,
 #pulseaudio:hover,
+#wireplumber:hover,
 #custom-mpris:hover,
 #custom-gammastep:hover,
 #custom-todo:hover {
-  color: @foreground;
-  transition-property: background;
-  transition-duration: 0.1s;
+    color: @foreground;
+    transition-property: background;
+    transition-duration: 0.1s;
 }
 
 #tags button,
 #workspaces button {
-  padding: 0 5px;
-  background: transparent;
-  color: @dimmed;
-  /* border-bottom: 3px solid transparent; */
+    padding: 0 5px;
+    background: transparent;
+    color: @dimmed;
+    /* border-bottom: 3px solid transparent; */
 }
+
 #tags button {
-  color: @dimmeddarker;
+    color: @dimmeddarker;
 }
+
 #tags button.occupied {
-  color: @dimmed;
+    color: @dimmed;
 }
+
 #workspaces button.visible {
-  color: @dimmeddarker;
-  background: @accentdarker;
+    color: @dimmeddarker;
+    background: @accentdarker;
 }
+
 #tags button.focused,
 #workspaces button.focused {
-  font-weight: bold;
-  color: @foreground;
-  background: @accentdarker;
-  transition-property: background;
-  transition-duration: 0.01s;
+    font-weight: bold;
+    color: @foreground;
+    background: @accent;
+    transition-property: background;
+    transition-duration: 0.01s;
 }
+
 #tags button.urgent,
 #workspaces button.urgent {
-  color: @background;
-  background: @urgent;
+    color: @background;
+    background: @urgent;
 }
+
 #tags button:hover,
 #tags button.focused:hover,
 #workspaces button:hover,
 #workspaces button.focused:hover {
-  background: @accent;
-  color: @foreground;
-  transition-property: background, color;
-  transition-duration: 0.01s;
+    background: @accent;
+    color: @foreground;
+    transition-property: background, color;
+    transition-duration: 0.01s;
 
-  /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
-  box-shadow: inherit;
-  text-shadow: inherit;
+    /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+    box-shadow: inherit;
+    text-shadow: inherit;
 }
+
 #tags button.urgent:hover,
 #workspaces button.urgent:hover {
-  background: @foreground;
-  transition-property: background;
-  transition-duration: 0.01s;
+    background: @foreground;
+    transition-property: background;
+    transition-duration: 0.01s;
 }
 
 #mode {
-  /* font-style: italic; */
-  color: @background;
-  background: @color03;
-  margin: 3px 6px;
-  border-radius: 2px;
+    /* font-style: italic; */
+    color: @background;
+    background: @base03;
+    margin: 3px 6px;
+    border-radius: 2px;
 }
 
 #clock {}
+
 #clock.local {
-  color: @foreground;
-}
-#clock.utc {
+    color: @foreground;
 }
 
+#clock.utc {}
+
 #disk.root {}
+
 #disk.home {
-  /* margin-left: 0; */
-  /* padding-left: 0; */
+    /* margin-left: 0; */
+    /* padding-left: 0; */
 }
 
 #battery {}
+
 #battery.charging {
-  color: @background;
-  background: @color10;
+    color: @background;
+    background: @base0A;
 }
+
 @keyframes blink {
-  to {
-    background: @foreground;
-    color: @background;
-  }
+    to {
+        background: @foreground;
+        color: @background;
+    }
 }
+
 #battery.critical:not(.charging) {
-  color: @foreground;
-  background: @urgent;
-  animation-name: blink;
-  animation-duration: 0.5s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
+    color: @foreground;
+    background: @urgent;
+    animation-name: blink;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
 }
 
 label:focus {
-  background: @background;
+    background: @background;
 }
 
 #cpu {}
+
 #memory {}
+
 #backlight {}
+
 #backlight.off {
-  color: @dimmed;
+    color: @dimmed;
 }
+
 #network {}
+
 #network.disconnected {
-  border-top: 1px solid @urgent;
-  color: @dimmed;
+    border-top: 1px solid @urgent;
+    color: @dimmed;
 }
+
 #network.tailscale.disabled,
 #network.tailscale.disconnected,
 #network.mullvad.disabled,
 #network.mullvad.disconnected {
-  border-top: 1px solid @dimmeddarker;
+    border-top: 1px solid @dimmeddarker;
 }
 
 #network.tailscale.ethernet,
 #network.tailscale.linked,
 #network.mullvad.ethernet,
 #network.mullvad.linked {
-  color: @foreground;
-  border-top: 1px solid @color14;
+    color: @foreground;
+    border-top: 1px solid @base0E;
 }
+
 #pulseaudio {}
+
 #pulseaudio.muted {
-  border-top: 1px solid @urgent;
-  color: @dimmed;
+    border-top: 1px solid @urgent;
+    color: @dimmed;
 }
+
 #pulseaudio.bluetooth {
-  border-top: 1px solid @color04;
+    border-top: 1px solid @base04;
+}
+
+#wireplumber {}
+
+#wireplumber.muted {
+    border-top: 1px solid @urgent;
+    color: @dimmed;
+}
+
+#wireplumber.bluetooth {
+    border-top: 1px solid @base04;
 }
 
 #temperature {}
+
 #temperature.critical {
-  color: @foreground;
-  background: @urgent;
-  border-top: none;
+    color: @foreground;
+    background: @urgent;
+    border-top: none;
 }
 
 #tray {}
 
 #idle_inhibitor {}
+
 #idle_inhibitor.activated {
-  color: @foreground;
-  border-top: 1px solid @color02;
+    color: @foreground;
+    border-top: 1px solid @base02;
 }
 
-#custom-mpris {
-  color: @foreground;
-}
-#custom-mpris.playing,
-#custom-mpris.paused {
-  border-top: 1px solid @color04;
-}
-#custom-mpris.paused {
-  font-style: italic;
-}
 #mpris {
-  color: @foreground;
+    color: @foreground;
 }
+
 #mpris.playing,
 #mpris.paused {
-  border-top: 1px solid @color04;
+    border-top: 1px solid @base04;
 }
+
 #mpris.paused {
-  font-style: italic;
+    font-style: italic;
+}
+
+#mpris.spotify {
+    border-top: 1px solid #1db954;
+}
+
+#mpris.mpv {
+    border-top: 1px solid #8f008f;
 }
 
 #custom-toggl {
-  color: @foreground;
-  border-top: 1px solid @urgent;
+    color: @foreground;
+    border-top: 1px solid @urgent;
 }
 
 #custom-todo.off {
-  color: @dimmed;
-  border-top: 1px solid @dimmeddarker;
-  padding: 0 0 0 0.4rem;
+    color: @dimmed;
+    border-top: 1px solid @dimmeddarker;
+    padding: 0 0 0 0.4rem;
 }
+
 #custom-todo.on {
-  color: @foreground;
-  border-top: 1px solid @urgent;
-  font-weight: bold;
-  padding: 0 0.6rem 0 0.4rem;
+    color: @foreground;
+    border-top: 1px solid @urgent;
+    font-weight: bold;
+    padding: 0 0.6rem 0 0.4rem;
 }
+
 #custom-todo.work {
-  background: @urgent;
+    background: @urgent;
 }
 
 #custom-timetracked {
-  color: @urgent;
-  border-top: 1px solid @urgent;
+    color: @urgent;
+    border-top: 1px solid @urgent;
 }
 
 @keyframes flash {
-  50% {
-    background: rgba(255,174,66, 0.7);
-    color: @background;
-  }
+    50% {
+        background: rgba(255, 174, 66, 0.7);
+        color: @background;
+    }
 }
+
 #custom-gamma.night {
-  border-top: 1px solid @color12;
-  color: @foreground;
-  animation-name: flash;
-  animation-duration: 0.3s;
-  animation-timing-function: linear;
-  animation-iteration-count: 1;
+    border-top: 1px solid @base0C;
+    color: @foreground;
+    animation-name: flash;
+    animation-duration: 0.3s;
+    animation-timing-function: linear;
+    animation-iteration-count: 1;
 }
+
 #custom-gamma.day {
-  color: @dimmed;
+    color: @dimmed;
 }
+
 #custom-gamma.off {
-  border-top: 1px solid @urgent;
-  color: @dimmed;
+    border-top: 1px solid @urgent;
+    color: @dimmed;
 }
 
 #custom-weather {
-  color: @dimmed;
+    color: @dimmed;
 }
 
 #custom-covid.green {
-  /* border-top: 1px solid #00cc00; */
-  /* color: #00cc00; */
+    /* border-top: 1px solid #00cc00; */
+    /* color: #00cc00; */
 }
+
 #custom-covid.yellow {
-  /* border-top: 1px solid #f7dd31; */
-  /* color: #f7dd31; */
+    /* border-top: 1px solid #f7dd31; */
+    /* color: #f7dd31; */
 }
+
 #custom-covid.orange {
-  /* border-top: 1px solid #faa31b; */
-  /* color: #faa31b; */
+    /* border-top: 1px solid #faa31b; */
+    /* color: #faa31b; */
 }
+
 #custom-covid.red {
-  /* border-top: 1px solid #f92206; */
-  /* color: #f92206; */
+    /* border-top: 1px solid #f92206; */
+    /* color: #f92206; */
 }
+
 #custom-covid.darkred {
-  /* border-top: 1px solid #c01a00; */
-  /* color: #c01a00; */
+    /* border-top: 1px solid #c01a00; */
+    /* color: #c01a00; */
 }
+
 #custom-covid.darkdarkred {
-  /* border-top: 1px solid #941100; */
-  /* color: #941100; */
+    /* border-top: 1px solid #941100; */
+    /* color: #941100; */
 }
 
 #custom-hotspots {
-  border-top: 1px solid @urgent;
-  color: @dimmed;
+    border-top: 1px solid @urgent;
+    color: @dimmed;
 }
+
 #custom-hotspots.soon {
-  color: @urgent;
+    color: @urgent;
 }
generated by cgit-pink 1.4.1 (git 2.36.1) at 2026-08-05 19:59:19 +0000