.button-container { line-height: 1.1; background-color: #{@{this} == @{this.on}? '#4793AF' : 'rgba(0,0,0,0)'}; color: #{@{this} == @{this.on}? 'black' : 'white'}; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; text-shadow: 1px 1px 1px rgba(20,20,20,0.2); } .Title { font-size: 150%; transform: translateY(60%); font-weight: thin; } .SubTitle { font-size: 80%; transform: translateY(70%); font-weight: thin; }"
Hi there! I currently have this code, it was originally on every button, I use @{this} to get their own values.
But then I want to move the code to a higher level so I don't have to copy&paste the code every time when I change the style. And it seem the @{this} will refer to the panel(higher level is a panel), instead of the buttons.
So I've been wondering, if there's any way to detect every button's on/off state from a higher level css code?
The code is totally messed up, so here's an image of that code
In the forums you can use triple backticks to format code, for example (minus the backslashes):
\```css
code goes here
\```
And it seem the
@{this}will refer to the panel(higher level is a panel), instead of the buttons.
Indeed, that's what this aims to do: refer to the widget that contains this code. You could address any button's value indivually by writing their id (@{button_id}) but I don't think it'll do in your case. The good news is you don't need @{} at all here, buttons have a specific class when they are on which can be used to apply different styles based on their state:
.button-container {
/* default rules */
--color-widget: transparent;
--color-text: white;
--color-text-on: black;
}
.button-container.on {
/* overrides for when they are on */
--color-widget: #4793AF;
}
Thank you for such detailed explanation!
I end up using the normal
color:
than
--color-widget:
cus --color-widget isn't working correctly for me