Skip to content

allows styling group drawers in css based on state #4750

Open
multyfora wants to merge 2 commits intoAlexays:masterfrom
multyfora:master
Open

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

Conversation

@multyfora
Copy link

@multyfora multyfora commented Jan 1, 2026

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
Copy link

C0LD-96 commented Jan 5, 2026

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

@multyfora
Copy link
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

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

@Alexays
Copy link
Owner

Alexays commented Feb 4, 2026

LGTM :)

@Alexays
Copy link
Owner

Alexays commented Feb 4, 2026

can you update the man?

@multyfora
Copy link
Author

can you update the man?

update the what?

@multyfora
Copy link
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
Author

done :)

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