Classes
Borders & shape Utilities
| Class | Behavior |
|---|---|
rounded-sm | Slightly rounded corners (4px) |
rounded | Normal rounded corners (10px) |
rounded-lg | Highly rounded corners for large boxes (16px) |
fully-rounded | Turns elements into circles or pill shapes |
border-thin | Adds a thin 1px outline border |
border-thick | Adds a thick 2px outline border |
Containers Utilities
| Class | Behavior |
|---|---|
surface-panel | Main background panel for widgets and layouts |
surface-card | Inner card background to group items inside a panel |
floating-overlay | Floating box with shadow for menus and notifications |
Interactive Utilities
| Class | Behavior |
|---|---|
btn | Standard clickable button style |
btn-primary | Colored button used for main actions |
btn-destructive | Red button used for delete or exit actions |
list-row-interactive | Clickable menu row that lights up when hovered or pressed |
Typography & badges Utilities
| Class | Behavior |
|---|---|
text-header | Large, bright text used for titles |
text-muted | Small, faded text used for secondary info |
badge | Small tag or label with a dark background pill shape |
badge-success | Green status label indicating success or active states |
Progress & sliders Utilities
| Class | Behavior |
|---|---|
progress-bar-fill | The filled portion of a progress tracker or battery level bar |
slider-trough | The empty background track of volume/brightness sliders |
Stateful components Utilities
| Class | Behavior |
|---|---|
switch-track-active | Background track of a toggle switch when flipped to ON |
list-row-selected | Highlighted background state for currently active menu choices or active workspaces |
Layout enhancements Utilities
| Class | Behavior |
|---|---|
separator-h | A thin horizontal divider line to break up content inside modules |
separator-v | A thin vertical divider line to separate side-by-side items |
Presentation Utilities
| Class | Behavior |
|---|---|
card-header | Top border highlight frame tailored for system graphs or hardware monitors |
input-field | Styling for custom user input boxes or terminal command runners |
Warnings Utilities
| Class | Behavior |
|---|---|
alert-banner | High-visibility danger strip for critically low battery or lost internet |
text-warning | Yellow-tinted typography scale for low urgency battery or update alerts |
Animations Utilities
| Class | Behavior |
|---|---|
ease-in-out | Easing transition that starts slow, accelerates, then slows down at the end |
ease-out | Easing transition that snaps instantly and slows to a smooth halt |
ease-in | Easing transition that starts slow and hits full speed dramatically at the finish |
fade-in | Smoothly fades an invisible element to completely visible |
fade-out | Smoothly fades an element to completely translucent |
scale-in | Pops a widget up into view by blowing it up from a smaller size scale |
scale-out | Shrinks a widget down until it collapses out of the presentation layer |
slide-up | Glides a hidden bottom module upwards into its active resting placement |
slide-down | Glides an active top module downwards into its active resting placement |
pulse-glow | Continuous breathing light effect tailored for indicators or low battery warnings |
duration-fast | Fast 150ms playback |
duration-normal | Standard 300ms playback |
duration-slow | Slow 500ms playback |
delay-none | Executes the animation immediately |
delay-short | Postpones the animation start by 100ms |
delay-long | Postpones the animation start by 300ms |
loop-infinite | Forces the keyframe loop to repeat forever |
loop-once | Restricts execution to run exactly once through the timeline sequence |
freeze-frame | Directs GTK to hold the visual elements on the very last keyframe when complete |
reset-frame | Instantly snaps elements back to their initial un-animated look once finished |