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?

Please check the above github issue for more info and photos.

What is skim?

Basically I press ctrl + r to show bash history in skim. Tho when I select an option the new line that gets printed with the completed sentence is weirdly printed.

Normally one defines all normal, bold, italic, bold italic font in alacritty. But since fira mono does not have italic font, how should the config structure look like?

"font": {
"normal": {"family": "FiraMono Nerd Font", "style": "Regular"},
"bold": {"family": "FiraMono Nerd Font", "style": "Bold"},
"size": 10
}

Should I define the fonts which are available like normal, bold and leave italic and bold italic. Or should I just define normal font?

Basically I am using this gtk.css file in ~/.config/gtk-4.0/gtk.css but it's weird that the sidebar is not themed correctly. If anyone knows about this, please do tell. My only lead at this moment is to find the class and add it in gtk.css file. For some reason I can't install the gtk inspector app, So if anyone has it already or knows the classname, please help.

gtk.css file ->

@define-color accent_color #fe8019;
@define-color accent_bg_color #d65d0e;
@define-color accent_fg_color #ebdbb2;

@define-color destructive_color #8ec07c;
@define-color destructive_bg_color #689d6a;
@define-color destructive_fg_color #ebdbb2;

@define-color success_color #b8bb26;
@define-color success_bg_color #98971a;
@define-color success_fg_color #ebdbb2;

@define-color warning_color #fabd2f;
@define-color warning_bg_color #d79921;
@define-color warning_fg_color #ebdbb2;

@define-color error_color #fb4934;
@define-color error_bg_color #cc241d;
@define-color error_fg_color #ebdbb2;

@define-color window_bg_color #282828;
@define-color window_fg_color #ebdbb2;

@define-color view_bg_color #282828;
@define-color view_fg_color #ebdbb2;

@define-color headerbar_bg_color #282828;
@define-color headerbar_fg_color #ebdbb2;
@define-color headerbar_border_color #ebdbb2;
@define-color headerbar_backdrop_color @window_bg_color;
@define-color headerbar_shade_color rgba(0, 0, 0, 0.36);

@define-color card_bg_color rgba(255, 255, 255, 0.08);
@define-color card_fg_color #ebdbb2;
@define-color card_shade_color rgba(0, 0, 0, 0.36);

@define-color dialog_bg_color #3c3836;
@define-color dialog_fg_color #ebdbb2;

@define-color popover_bg_color #3c3836;
@define-color popover_fg_color #ebdbb2;

@define-color shade_color rgba(0, 0, 0, 0.36);
@define-color scrollbar_outline_color rgba(0, 0, 0, 0.5);

Sidebar ->

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.