mobsenpai

I always use all:unset in my css files and I did the same when configuring the swaync notification but somehow when using it inside global selector *{} it doesn't show the volumeslider which is shows in a notification, related pictures will be attached. I wanna use all:unset and so I want to know how to re-enable volumeslider without removing all:unset. I've found this config to also use it but its in scss so I didn't test it.

with all:unset

without all:unset

Full style.css ->

* {
  all: unset;
  font-family: "FiraMono Nerd Font";
  font-size: 10pt;
  font-weight: normal;
}

.notification {
  background: #3c3836;
  border: 1px solid #504945;
  border-radius: 8px;
  padding: 7px;
}

.notification-content {
  background: #3c3836;
  color: #ebdbb2;
}

.notification-row {
  margin: 2px;
}

.close-button {
  background: #cc241d;
  border-radius: 50%;
  color: #282828;
}

.close-button:hover {
  background: #fb4934;
  transition: all 0.15s ease-in-out;
}

.time {
  color: #98971a;
  font-size: 9pt;
  margin-right: 24px;
}

.control-center {
  background: #3c3836;
  border: 1px solid #504945;
  border-radius: 8px;
  padding: 8px;
}

.control-center-list-placeholder {
  background: #3c3836;
  color: #7c6f64;
}

.widget-title {
  background: #3c3836;
  color: #ebdbb2;
}

.widget-title > button {
  background: #98971a;
  color: #282828;
  border-radius: 4px;
  padding: 2px;
}

.widget-title > button:hover {
  background: #b8bb26;
  color: #282828;
  transition: all 0.15s ease-in-out;
}

.widget-dnd {
  background: #3c3836;
  color: #ebdbb2;
}

.widget-dnd > switch {
  background: #665c54;
  border-radius: 4px;
}

.widget-dnd > switch:checked {
  background: #d65d0e;
}

.widget-dnd > switch slider {
  background: #282828;
  border-radius: 4px;
}

Edit: ended up removing the submenu functionality by adding no_actions=true in wofi's config.

My style.css ->

* {
  all: unset;
  font-family: "FiraMono Nerd Font";
  font-size: 10pt;
  font-weight: normal;
}

#window {
  background: #3c3836;
  border-radius: 8px;
  border: 1px solid #504945;
}

#input {
  background: #3c3836;
  border-bottom: 1px solid #504945;
  color: #ebdbb2;
  margin-bottom: 4px;
  padding: 4px;
}

#input > image.left {
  margin-right: 4px;
}

#input > image.right {
  margin-left: 4px;
}

#outer-box {
  padding: 4px;
}

#text {
  color: #ebdbb2;
}

#entry {
  border-radius: 4px;
  padding: 4px;
}

#entry:selected {
  background: #504945;
}

Are there any classes or a config option to set the icon to whatever I want?

cross-posted from: https://lemmy.world/post/13968470

I am extremely pleased with how it looks. Initially, I was quite concerned about achieving a similar appearance and after two unsuccessful attempts, I felt defeated and abandoned the effort. However, thanks to the helpful individuals in the Matrix chat who assured me that achieving the desired look with Waybar was indeed possible, I decided to give it another shot, initially to prove them wrong. To my surprise, I was met with significant progress. While there are still some finishing touches and refactoring to be done, I plan to address these gradually as time permits. Currently, it is functioning perfectly and is user-friendly.