zedfrigg/ironbar
1
0
Fork 0
mirror of https://github.com/Zedfrigg/ironbar.git synced 2025-04-19 19:34:24 +02:00
Code Activity

Merge pull request #328 from Schweber/patch-1

Browse source 
Update Styling guide: add sentences explaining how to increase specificity of entries
This commit is contained in:
Jake Stanger 2023-10-16 20:23:47 +01:00 • committed by GitHub
commit f93a66f83a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
docs/Styling guide.md
View file

@ -22,7 +22,7 @@ Information on styling individual modules can be found on their pages in the sid
| `.widget` | Any widget. | | `.widget` | Any widget. |
| `.popup` | Any popup box. | | `.popup` | Any popup box. |
Every widget can be selected using a `kebab-case` class name matching its name. Every Ironbar widget can be selected using a `kebab-case` class name matching its name.
You can also target popups by prefixing `popup-` to the name. For example, you can use `.clock` and `.popup-clock` respectively. You can also target popups by prefixing `popup-` to the name. For example, you can use `.clock` and `.popup-clock` respectively.
Setting the `name` option on a widget allows you to target that specific instance using `#name`. Setting the `name` option on a widget allows you to target that specific instance using `#name`.
@ -31,6 +31,13 @@ You can also add additional classes to re-use styles. In both cases, `popup-` is
You can also target all GTK widgets of a certain type directly using their name. For example, `label` will select all labels, and `button:hover` will select the hover state on *all* buttons. You can also target all GTK widgets of a certain type directly using their name. For example, `label` will select all labels, and `button:hover` will select the hover state on *all* buttons.
These names are all lower case with no separator, so `MenuBar` -> `menubar`. These names are all lower case with no separator, so `MenuBar` -> `menubar`.
> [!NOTE]
> If an entry takes no effect you might have to use a more specific selector.
> For example, attempting to set text size on `.popup-clipboard .item` will likely have no effect.
> Instead, you can target the more specific `.popup-clipboard .item label`.
Running `ironbar inspect` can be used to find out how to address an element.
GTK CSS does not support custom properties, but it does have its own custom `@define-color` syntax which you can use for re-using colours: GTK CSS does not support custom properties, but it does have its own custom `@define-color` syntax which you can use for re-using colours:
```css ```css