I have now run into this case twice where I want to create a color variable in a style.css file and I either get multiple false errors, or the code doesn't work. For a little bit more background: I'm trying to configure Waybar and Wofi ---------------------------------------------------------------------------------------------------------------------------------- This works, but I get in-line error messages: @define-color background #24283b; Unknown at rule @define-color window { background-color: @background; property values expected } at-rule or selector expected ..read more

so i have this string of css that im trying to modify: .chatimage { display: inline-flex; width:20px; height:20px; background : {{usernameColor}}; -webkit-mask:url('https://i.imgur.com/YwurIKy.png') center/contain; } it comes from a custom StreamElements chat widget for Twitch, and this part is an image with a mask over it to make it the same color as the username of the person thats typing in chat. I'm trying to make it just the raw image (a cute green mushroom) and I have very little css experience. I've tried deleting the background portion entirely, ive tried changing it to background ..read more

Each time I use <h> a mini scrollbar appears next to it. This appeared after I added the overflow-x: hidden; how can I fix this please submitted by /u/Born-Newspaper1592 [visit reddit] [comments ..read more

submitted by /u/OhDearGod666 [visit reddit] [comments ..read more

I have a page/component. I have divided it into two vertical sections which have a fixed height. Those two sections (lets say 1 and 2) have some items in them. (1's item are in green and 2's items are red in color). There will always be some items in both the sections. Now if the items in the first column exceeds the length of the section(as in image 1), that/those item/s should go to the next section(as in image 2). How can we do that? https://preview.redd.it/nh9jo7s73iwc1.png?width=542&format=png&auto=webp&s=d4e955e562e441dc1dc617c6d102850d2524bf7e https://preview.redd.it/v5 ..read more

Newbie here, so do I use grids? submitted by /u/Rimspix [visit reddit] [comments ..read more

I'm starting to learn css right know how to start low level to high level submitted by /u/IllustriousEye0011 [visit reddit] [comments ..read more

submitted by /u/robson_muniz [visit reddit] [comments ..read more

I need to select elements with classes based on their order relative to other child elements within different parent containers. I tried using nth-child selectors, but I couldn't figure out a way to get them to repeat. Currently, I just have a bunch of elements with classes being selected. Not optimal, but it works. .container1:has(input[type="radio"].1:checked) ~ .container2 .1, :has(input[type="radio"].2:checked) ~ .container2 .2, :has(input[type="radio"].3:checked) ~ .container2 .3 { background-color: red; } I would really prefer not to use JavaScript. Is there any way to do this withou ..read more

I'm relatively new to using `@container` queries. I love them. Makes responsive work so much easier. That said...I rant into a problem today. We use some JS frameworks one of which creates pop-up menus for us (which, in turn, is based on popper.js believe). Like a lot of pop-up scripts, it gets the position of the element clicked on relative to the viewport and then positions the menu accordingly with position: fixed. The catch is that because I am using `container-type: inline-size`, the menu it is positioning is actually relative to the container--not the viewport. So it's actually position ..read more