search

JakeStanger / ironbar

Customisable Wayland gtk bar written in Rust.
https://crates.io/crates/ironbar
MIT License
567 stars 48 forks source link

Upower CSS selectors wrong on wiki #593

Closed ForgotMyPasswd closed 4 months ago

ForgotMyPasswd commented 4 months ago

Describe the bug I'm trying to change the background of the upower module to match the colours of my powerline segment. While I have been able to change the colour of the container as a whole using .upower { background-color: @shade4; }, I can't seem to change the icon background and the label background with any of the css properties listed in the wiki.

To Reproduce Steps to reproduce the behavior:

  1. Use .upower .button, .upower .button .contents, .upower .button .icon, .upower .button .label to set background-color or color
  2. Reload ironbar css
  3. See that there is no change

Expected behavior The background to change after setting background-color

System information:

Configuration

Config ``` anchor_to_edges: true position: top icon_theme: Papirus-Dark height: 42 start: - type: workspaces all_monitors: false name_map: '1': "" '2': "󰈹" '3': "" '4': "" '5': "" '6': "" - type: label label: "" class: pl-arrow-left1 end: - type: label label: "" class: pl-arrow-right5 - type: tray direction: right_to_left icon_size: 25 - type: clipboard icon: 󰅍 max_items: 10 icon_size: 30 truncate: mode: end length: 50 - type: label label: "" class: pl-arrow-right4 - type: "upower" format: "{percentage}%" icon_size: 25 name: upower-btn - type: label label: "" class: pl-arrow-right3 - type: clock - type: label label: "" class: pl-arrow-right2 - type: custom class: toggle-virtual-keyboard bar: - type: button name: toggle-virtual-keyboard-btn on_click: '!~/.config/ironbar/wvkbd-toggle.sh' widgets: - type: image src: icon:input-keyboard-symbolic size: 25 name: toggle-virtual-keyboard-btn-image - type: custom bar: - type: button name: window-actions-btn on_click: popup:toggle widgets: - type: image src: icon:preferences-system-windows size: 25 name: window-actions-btn-image class: window-action-menu popup: - orientation: vertical type: box widgets: - type: label label: Window Actions name: header - type: button label: Close Window 󰅗 on_click: '!hyprctl dispatch killactive' - type: button label: Toggle Floating 󰖲 on_click: '!hyprctl dispatch togglefloating' - type: button label: Move to Next Workspace 󰁔 on_click: '!hyprctl dispatch movetoworkspace +1' - type: button label: Move to Previous Workspace 󰁍 on_click: '!hyprctl dispatch movetoworkspace -1' - type: button label: Change Layout  on_click: '!hyprctl dispatch layoutmsg orientationcycle' - type: label label: "" class: pl-arrow-right1 - type: notifications show_count: true icons: closed_none: 󰍥 closed_some: 󱥂 closed_dnd: 󱅯 open_none: 󰍡 open_some: 󱥁 open_dnd: 󱅮 ```
Styles ```css @define-color color_bg #11111b; @define-color color_bg_alt #181825; @define-color color_bg_hover #313244; @define-color color_border #181825; @define-color color_border_active #cba6f7; @define-color color_text #cdd6f4; @define-color color_urgent #f38ba8; @define-color shade1 #311B92; @define-color shade2 #4527A0; @define-color shade3 #512DA8; @define-color shade4 #5E35B1; @define-color shade5 #673AB7; @define-color shade6 #7E57C2; @define-color shade7 #9575CD; @define-color shade8 #B39DDB; /* -- base styles -- */ * { font-family: Noto Sans Nerd Font, sans-serif; font-size: 16px; border: none; border-radius: 0; } box, menubar, button { background-color: @color_bg; background-image: none; box-shadow: none; } button, label { color: @color_text; } button:hover { background-color: @color_bg_hover; } scale trough { min-width: 1px; min-height: 2px; } #bar { border-top: 0px solid @color_border; } .popup { border: 1px solid @color_border; padding: 1em; } /* -- clipboard -- */ .clipboard { background-color: @shade5; margin-left: 0px; font-size: 1.1em; } .clipboard .btn .icon:hover { background-color: @color_bg_hover; color: @color_text; } .clipboard .btn .text-icon { background-color: @shade5; } .popup-clipboard { background-color: @color_bg_alt; color: @color_text; } .popup-clipboard .item { padding-bottom: 0.3em; background-color: @color_bg_alt; border-bottom: 1px solid @color_border; } .popup-clipboard .item .btn-remove { background-color: @color_bg_alt; color: @color_text; } .popup-clipboard .item .btn-remove:hover { background-color: @color_bg_hover; color: @color_text; } /* -- clock -- */ .clock { background-color: @shade3; font-weight: bold; } .popup-clock { background-color: @color_bg_alt; color: @color_text; } .popup-clock .calendar-clock { color: @color_text; font-size: 2.5em; padding-bottom: 0.1em; } .popup-clock .calendar { background-color: @color_bg_alt; color: @color_text; } .popup-clock .calendar .header { padding-top: 1em; border-top: 1px solid @color_border; font-size: 1.5em; } .popup-clock .calendar:selected { background-color: @color_border_active; } /* -- launcher -- */ .launcher .item { margin-right: 4px; } .launcher .ifix examtem:not(.focused):hover { background-color: @color_bg; } .launcher .open { border-bottom: 1px solid @color_text; } .launcher .focused { border-bottom: 1px solid @color_border_active; } .launcher .urgent { border-bottom-color: @color_urgent; } .popup-launcher { padding: 0; } .popup-launcher .popup-item:not(:first-child) { border-top: 1px solid @color_border; } /* -- music -- */ .music:hover * { background-color: @color_bg_alt; } .popup-music .album-art { margin-right: 1em; } .popup-music .icon-box { margin-right: 0.4em; } .popup-music .title .icon, .popup-music .title .label { font-size: 1.7em; } .popup-music .controls *:disabled { color: @color_border; } .popup-music .volume .slider slider { border-radius: 100%; } .popup-music .volume .icon { margin-left: 4px; } .popup-music .progress .slider slider { border-radius: 100%; } /* notifications */ .notifications .text-button{ background-color: @shade1; } .notifications .count { font-size: 0.6rem; background-color: @color_text; color: @color_bg; border-radius: 100%; margin-right: 3px; margin-top: 3px; padding-left: 4px; padding-right: 4px; opacity: 0.7; } /* -- script -- */ .script { padding-left: 10px; } /* -- sys_info -- */ .sysinfo { margin-left: 10px; } .sysinfo .item { margin-left: 5px; } /* -- tray -- */ .tray { background-color: @shade5; margin-left: 0px; } /* -- upower -- */ /* Attempting to theme the icon + label backgrounds*/ .upower { background-color: @shade4; color: @shade4; } .upower .button .contents{ background-color: @shade4; color: @shade4; } .upower .button .icon{ background-color: @shade4; color: @shade4; } .upower .button .label{ background-color: @shade4; color: @shade4; } .upower #upower-btn{ background-color: @shade4; color: @shade4; } .popup-upower { background-color: @color_bg_alt; color: @color_text; } /* -- volume -- */ .popup-volume .device-box { border-right: 1px solid @color_border; } /* -- workspaces -- */ .workspaces .item { background-color: @shade1; } .workspaces .item.focused { box-shadow: inset 0 -3px; background-color: @shade1; color: @color_border_active; } .workspaces .item:hover { box-shadow: inset 0 -3px; } /* -- custom: powerlines -- */ .pl-arrow-left1 { background-color: @color_bg; color: @shade1; font-size: 35px; margin: 0px; } .pl-arrow-right1 { background-color: @shade2; color: @shade1; font-size: 35px; margin: 0px; } .pl-arrow-right2 { background-color: @shade3; color: @shade2; font-size: 35px; margin: 0px; } .pl-arrow-right3 { background-color: @shade4; color: @shade3; font-size: 35px; margin: 0px; } .pl-arrow-right4 { background-color: @shade5; color: @shade4; font-size: 35px; margin: 0px; } .pl-arrow-right5 { color: @shade5; font-size: 35px; margin: 0px; } /* -- Virtual Keyboard --*/ .toggle-virtual-keyboard #toggle-virtual-keyboard-btn { background-color: @shade2; } .toggle-virtual-keyboard #toggle-virtual-keyboard-btn-image { background-color: @shade2; } /* -- Window Management Buttons -- */ .window-action-menu #window-actions-btn { background-color: @shade2; } .window-action-menu #window-actions-btn #window-actions-btn-image{ background-color: @shade2; } .popup-window-action-menu #header { color: @color_text; font-size: 1.2em; border-bottom: 1px solid @color_text; padding-bottom: 0.4em; margin-bottom: 0.8em; } ```

Screenshots image (the duplicate icon in the tray is due to me exiting and running the bar very quickly during testing)

ForgotMyPasswd commented 4 months ago

I managed to fix this by using

.upower .contents{
    background-color: @shade4;
    color: @shade4;
}

It seems that .buttons is not needed, the wiki should be updated to reflect this.

JakeStanger commented 4 months ago

Looks like there's a mistake in the wiki, .upower and .button are the same element. You can use ironbar inspect to open the inspector and view this.

I'll get the docs amended shortly.