Skip to content

allows styling group drawers in css based on state #4750

Open
multyfora wants to merge 2 commits into
Alexays:masterfrom
multyfora:master
Open

allows styling group drawers in css based on state #4750
multyfora wants to merge 2 commits into
Alexays:masterfrom
multyfora:master

Conversation

@multyfora

@multyfora multyfora commented Jan 1, 2026

Copy link
Copy Markdown

upper one is base waybar
lower one is with this change

example 1

region-2026-01-02_03-20-42.mp4

code:

#tray.drawer-open #custom-traybtn { 
    opacity: 1.0;
    background-color: red;
}

example 2

region-2026-01-02_03-19-59.mp4

code:

#tray.drawer-open #custom-traybtn { 
    opacity: 1.0;
}
#tray.drawer-closed #custom-traybtn { 
opacity: 0.6; 
}

the config code is

    "group/tray": {
        "orientation": "inherit",
        "drawer": {
            "click-to-reveal": true
        },

        "modules": [
            "custom/traybtn",                
            "tray"
        ]

    },

    "custom/traybtn": {
        "format": ""
    },

    "tray": {
        "icon-size": 16,
        "spacing": 8,
        "show-passive-items": true,
        "reverse-direction": false
    },

…o you can style them based on its state in css
@C0LD-96

C0LD-96 commented Jan 5, 2026

Copy link
Copy Markdown

would you be able to invert the arrow bracket through animation or something? Thanks!

@multyfora

Copy link
Copy Markdown
Author

would you be able to invert the arrow bracket through animation or something? Thanks!

in this state no, only styling, css can't change it's text afaik, it'll need a bit more work to make that work, right now it's only styling the module

@Frestein

Copy link
Copy Markdown

Oh, cool! I was just thinking about how to implement a similar tray!

@Alexays

Alexays commented Feb 4, 2026

Copy link
Copy Markdown
Owner

LGTM :)

@Alexays

Alexays commented Feb 4, 2026

Copy link
Copy Markdown
Owner

can you update the man?

@multyfora

Copy link
Copy Markdown
Author

can you update the man?

update the what?

@multyfora

Copy link
Copy Markdown
Author

ooh, to add this to the manual? i got it, ill do this today

Add documentation for drawer CSS state classes.
@multyfora

Copy link
Copy Markdown
Author

done :)

@multyfora

Copy link
Copy Markdown
Author

bump :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants