textual
textual copied to clipboard
(Text) Opacity isn't read from component classes styles.
(TL;DR: This is likely the cause of Textual#3304 and this will likely be fixed if Textual#3413 is fixed first.)
Following #3304, an investigation showed that there are widgets for which the (text-)opacity in component classes is ignored.
Here are said widgets:
- Checkbox
(ToggleButton
's fault)
- DirectoryTree
- Input
- OptionList
(as first reported in Textual#3304)
- RadioButton
(ToggleButton
's fault)
- Tree
Below you can find an app that showcases these:
myapp.py
from textual.app import App, ComposeResult
from textual.widgets import (
Checkbox,
RadioButton,
DirectoryTree,
Input,
Switch,
Tree,
)
class CCApp(App[None]):
CSS_PATH = "myapp.tcss"
def compose(self) -> ComposeResult:
yield Checkbox("checkbox")
yield DirectoryTree(".")
yield Input(placeholder="placeholder text")
yield RadioButton("radio button")
yield Switch()
tree = Tree("Dune", id="tree")
tree.root.expand()
characters = tree.root.add("Characters", expand=True)
characters.add_leaf("Paul")
characters.add_leaf("Jessica")
characters.add_leaf("Chani")
yield tree
if __name__ == "__main__":
CCApp().run()
myapp.tcss
Checkbox > .toggle--label {
opacity: 0%;
text-opacity: 0%;
color: #ffffff00; # alpha also ignored here.
}
DirectoryTree > .directory-tree--file {
text-opacity: 0%;
opacity: 0%;
color: #ffffff00; # alpha ignored here.
}
Input > .input--placeholder {
text-opacity: 0%;
opacity: 0%; # opacity of background is respected.
background: red; # invisible because opacity is 0%.
# color: #ffffff00; # alpha in color is respected.
}
RadioButton > .toggle--label {
text-opacity: 0%;
opacity: 0%;
background: #00000000; # alpha also ignored here.
color: #ffffff00; # alpha also ignored here.
}
Switch > .switch--slider {
opacity: 0%; # opacity of background is respected.
background: red; # invisible because opacity is 0%.
text-opacity: 0%;
# color: #ffffff00; # alpha in color is respected.
}
#tree > .tree--label {
opacity: 0%;
text-opacity: 0%;
color: #ffffff00; # alpha ignored here.
background: blue 0%; # alpha ignored here.
}
After more digging and experimentation, it looks like it's textual.dom.DOMNode.rich_style
that's not taking into account the style text-opacity
when calculating the text color and this is the root cause of #3304.