Classes de estilo do toolkit GTK e Libadwaita

Aqui estão listados diversos exemplos de classes de estilo que podem ser aplicadas no tookit GTK e na biblioteca Libadwaita.

Os estilos apresentados neste texto foram criados e testados utilizando-se o IDE Gnome Builder e o modelo de projeto selecionado foi Aplicativo do GNOME.

Gnome Builder o IDE para desenvolvimento de aplicativos GTK.

Exemplos estão disponíveis em:

https://github.com/natorsc/gui-python-pygobject-gtk.

Classes de estilo

Background

Libadwaita style class background

Python:

button = Gtk.Button.new_with_label(label='Lorem...')
button.add_css_class(css_class="background")

Gnome Blueprint:

Gtk.Button {
    label: 'Lorem...';
    styles [
        "background",
    ]
}

XML:

<object class="GtkButton">
   <property name="label">Lorem...</property>
   <style>
      <class name="background" />
   </style>
</object>

Body

Libadwaita style class body

Python:

label = Gtk.Label.new(str='Loremm...')
label.add_css_class(css_class='body')

Gnome Blueprint:

Gtk.Label {
    label: "Lorem...";    
    styles [
        "body",
    ]
}

XML:

<object class="GtkLabel">
   <property name="label">Lorem...</property>
   <style>
      <class name="body" />
   </style>
</object>

Boxed-list

Libadwaita style class boxed-list

Python:

listbox = Gtk.ListBox.new()
listbox.set_selection_mode(mode=False)
listbox.add_css_class(css_class='boxed-list')

Gnome Blueprint:

Gtk.ListBox {
    selection-mode: none;
    styles [
        "boxed-list",
    ]
}

XML:

<object class="GtkListBox">
    <property name="selection-mode">0</property>
    <style>
        <class name="boxed-list"/>
    </style>
</object>

Caption

Libadwaita style class caption

Python:

label = Gtk.Label.new(str='Lorem...')
label.add_css_class(css_class='caption')

Gnome Blueprint:

Gtk.Label {
    label: "Lorem...";
    styles [
        "caption",
    ]
}

XML:

<object class="GtkLabel">
    <property name="label">Lorem...</property>
    <style>
        <class name="caption"/>
    </style>
</object>

Caption-heading

Libadwaita style class caption-heading

Python:

label = Gtk.Label.new(str='Lorem...')
label.add_css_class(css_class='caption-heading')

Gnome Blueprint:

Gtk.Label {
    label: "Lorem...";
    styles [
        "caption-heading",
    ]
}

XML:

<object class="GtkLabel">
    <property name="label">Lorem...</property>
    <style>
        <class name="caption-heading"/>
    </style>
</object>

Card

Libadwaita style class card

label = Gtk.Label.new(str='Lorem...')
label.add_css_class(css_class='card')

Gnome Blueprint:

Gtk.Label {
    label: "Lorem...";
    styles [
        "card",
    ]
}

XML:

<object class="GtkLabel">
    <property name="label">Lorem...</property>
    <style>
        <class name="card"/>
    </style>
</object>

Circular

Libadwaita style class circular

button = Gtk.Button.new_with_label(label='Lorem...')
button.add_css_class(css_class='circular')

Gnome Blueprint:

Gtk.Button {
    label: "Lorem...";
    styles [
        "circular",
    ]
}

XML:

<object class="GtkButton">
    <property name="label">Lorem...</property>
    <style>
        <class name="circular"/>
    </style>
</object>

Colors

Libadwaita style class colors

entry = Gtk.Entry.new()
entry(text='Lorem...')
entry.add_css_class(css_class='accent')

Gnome Blueprint:

Gtk.Entry {
    text: "Lorem...";
    styles [
        "accent",
    ]
}

XML:

<object class="GtkEntry">
    <property name="text">Lorem...</property>
    <style>
        <class name="accent"/>
    </style>
</object>

Compact

Libadwaita style class compact

status_page = Adw.StatusPage.new()
status_page.set_icon_name(icon_name='face-smile-big-symbolic')
status_page.set_title(title='Lorem...')
status_page.set_description(description='Lorem...')
status_page.add_css_class(css_class='compact')

Gnome Blueprint:

Adw.StatusPage {
    icon-name: "face-smile-big-symbolic";
    title: "Lorem...";
    description: "Lorem...";
    styles [
        "compact",
    ]
}

XML:

<object class="AdwStatusPage">
    <property name="icon-name">face-smile-big-symbolic</property>
    <property name="title">Lorem...</property>
    <property name="description">Lorem...</property>
    <style>
        <class name="compact"/>
    </style>
</object>

Destructive-action

Libadwaita style class destructive-action

button = Gtk.Button.new_with_label(label='Lorem...')
button.add_css_class(css_class='destructive-action')

Gnome Blueprint:

Gtk.Button {
    label: "Lorem...";
    styles [
        "destructive-action",
    ]
}

XML:

<object class="GtkButton">
    <property name="label">Lorem...</property>
    <style>
        <class name="destructive-action"/>
    </style>
</object>

Devel

Libadwaita style class devel

class ExampleWindow(Adw.ApplicationWindow):

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.add_css_class(css_class='devel')

Gnome Blueprint:

template $ExampleWindow : Adw.ApplicationWindow {
    styles [
        "devel",
    ]
}

XML:

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk" version="4.0"/>
  <template class="ExampleWindow" parent="AdwApplicationWindow">
    <style>
      <class name="devel"/>
    </style>
    <child></child>
  </template>
</interface>

Dim-label

Libadwaita style class dim-label

label = Gtk.Label.new(str='Lorem...')
label.add_css_class(css_class='dim-label')

Gnome Blueprint:

Gtk.Label {
    label: "Lorem...";
    styles [
        "dim-label",
    ]
}

XML:

<object class="GtkLabel">
    <property name="label">Lorem...</property>
    <style>
        <class name="dim-label"/>
    </style>
</object>

Flat

Libadwaita style class flat

button = Gtk.Button.new_with_label(label='Lorem...')
button.add_css_class(css_class='flat')

Gnome Blueprint:

Gtk.Button {
    label: "Lorem...";
    styles [
        "flat",
    ]
}

XML:

<object class="GtkButton">
    <property name="label">Lorem...</property>
    <style>
        <class name="flat"/>
    </style>
</object>

Flat headerbar

Libadwaita style class flat headerbar

header_bar = Gtk.HeaderBar.new()
header_bar.add_css_class(css_class='flat')

Gnome Blueprint:

Gtk.HeaderBar {
    styles [
        "flat",
    ]
}

XML:

<object class="GtkHeaderBar">
    <style>
        <class name="flat"/>
    </style>
</object>

Frame

Libadwaita style class frame

label = Gtk.Label.new(str='Lorem...')
label.add_css_class(css_class='frame')

Gnome Blueprint:

Gtk.Label {
    label: "Lorem...";
    styles [
        "frame",
    ]
}

XML:

<object class="GtkLabel">
    <property name="label">Lorem...</property>
    <style>
        <class name="frame"/>
    </style>
</object>

Heading

Libadwaita style class heading

label = Gtk.Label.new(str='Lorem...')
label.add_css_class(css_class='heading')

Gnome Blueprint:

Gtk.Label {
    label: "Lorem...";
    styles [
        "heading",
    ]
}

XML:

<object class="GtkLabel">
    <property name="label">Lorem...</property>
    <style>
        <class name="heading"/>
    </style>
</object>

Icon-dropshadow

icon = Gtk.Image.new_from_icon_name(
    icon_name='software-update-urgent-symbolic',
)
icon.set_pixel_size(pixel_size=64)
icon.add_css_class(css_class='icon-dropshadow')

Gnome Blueprint:

Gtk.Image {
    icon-name: "software-update-urgent-symbolic";
    pixel-size: 64;
    styles [
        "icon-dropshadow",
    ]
}

XML:

<object class="GtkImage">
    <property name="icon-name">software-update-urgent-symbolic</property>
    <property name="pixel-size">64</property>
    <style>
        <class name="icon-dropshadow"/>
    </style>
</object>

Inline

Libadwaita style class inline

search_bar = Gtk.SearchBar.new()
search_bar.add_css_class(css_class='inline')

Gnome Blueprint:

Gtk.SearchBar {
    styles [
        "inline",
    ]
}

XML:

<object class="GtkSearchBar">
    <style>
        <class name="inline"/>
    </style>
</object>

Linked

Libadwaita style class linked

hbox = Gtk.Box.new(orientation=Gtk.Orientation.HORIZONTAL, spacing=1)
hbox.add_css_class(css_class='linked')

Gnome Blueprint:

Gtk.Box {
    orientation: horizontal;
    styles [
        "linked",
    ]
}

XML:

<object class="GtkBox">
    <property name="orientation">0</property>
    <style>
        <class name="linked"/>
    </style>
</object>

Lowres-icon

icon = Gtk.Image.new_from_icon_name(
    icon_name='software-update-urgent-symbolic',
)
icon.set_pixel_size(pixel_size=32)
icon.add_css_class(css_class='lowres-icon')

Gnome Blueprint:

Gtk.Image {
    icon-name: "Lorem...";
    pixel-size: 32;
    styles [
        "lowres-icon",
    ]
}

XML:

<object class="GtkImage">
    <property name="icon-name">software-update-urgent-symbolic</property>
    <property name="pixel-size">32</property>
    <style>
        <class name="lowres-icon"/>
    </style>
</object>

popover = Gtk.Popover.new()
popover.add_css_class(css_class='menu')

Gnome Blueprint:

Gtk.Popover {
    styles [
        "menu",
    ]
}

XML:

<object class="GtkPopover">
    <style>
        <class name="menu"/>
    </style>
    <child></child>
</object>

Monospace

Libadwaita style class monospace

label = Gtk.Label.new(str='Lorem...')
label.add_css_class(css_class='monospace')

Gnome Blueprint:

Gtk.Label {
    label: "Lorem...";
    styles [
        "monospace",
    ]
}

XML:

<object class="GtkLabel">
    <property name="label">Lorem...</property>
    <style>
        <class name="monospace"/>
    </style>
</object>

Libadwaita style class navigation-sidebar

list_box = Gtk.ListBox.new()
list_box.set_selection_mode(mode=Gtk.SelectionMode.NONE)
list_box.add_css_class(css_class='navigation-sidebar')

Gnome Blueprint:

Gtk.ListBox {
    selection-mode: none;
    styles [
        "navigation-sidebar",
    ]
}

XML:

<object class="GtkListBox">
    <property name="selection-mode">0</property>
    <style>
        <class name="navigation-sidebar"/>
    </style>
    <child></child>
</object>

Numeric

Libadwaita style class numeric

label = Gtk.Label.new(str='1234567890')
label.add_css_class(css_class='numeric')

Gnome Blueprint:

Gtk.Label {
    label: "1234567890";
    styles [
        "numeric",
    ]
}

XML:

<object class="GtkLabel">
    <property name="label">1234567890</property>
    <style>
        <class name="numeric"/>
    </style>
</object>

Opaque

Libadwaita style class opaque

button = Gtk.Button.new_with_label(label='Lorem...')
button.add_css_class(css_class='opaque')

Gnome Blueprint:

Gtk.Button {
    label: "Lorem...";
    styles [
        "opaque",
    ]
}

XML:

<object class="GtkButton">
    <property name="label">Lorem...</property>
    <style>
        <class name="opaque"/>
    </style>
</object>

Osd

Libadwaita style class osd

button = Gtk.Button.new_with_label(label='Lorem...')
button.add_css_class(css_class='osd')

Gnome Blueprint:

Gtk.Button {
    label: "Lorem...";
    styles [
        "osd",
    ]
}

XML:

<object class="GtkButton">
    <property name="label">Lorem...</property>
    <style>
        <class name="osd"/>
    </style>
</object>

Pill

Libadwaita style class pill

button = Gtk.Button.new_with_label(label='Lorem...')
button.add_css_class(css_class='pill')

Gnome Blueprint:

Gtk.Button {
    label: "Lorem...";
    styles [
        "pill",
    ]
}

XML:

<object class="GtkButton">
    <property name="label">Lorem...</property>
    <style>
        <class name="pill"/>
    </style>
</object>

Selection-mode

Libadwaita style class selection-mode

check_button = Gtk.CheckButton.new_with_label(label='Lorem...')
check_button.add_css_class(css_class='selection-mode')

Gnome Blueprint:

Gtk.CheckButton {
    label: "Lorem...";
    styles [
        "selection-mode",
    ]
}

XML:

<object class="GtkCheckButton">
    <property name="label">Lorem...</property>
    <style>
        <class name="selection-mode"/>
    </style>
</object>

Spacer

separator = Gtk.Separator.new(orientation=Gtk.Orientation.VERTICAL)
separator.add_css_class(css_class='spacer')

Gnome Blueprint:

Gtk.Separator {
    orientation: vertical;
    styles [
        "spacer",
    ]
}

XML:

<object class="GtkSeparator">
    <property name="orientation">1</property>
    <style>
        <class name="spacer"/>
    </style>
</object>

Suggested-action

Libadwaita style class suggested-action

button = Gtk.Button.new_with_label(label='Lorem...')
button.add_css_class(css_class='suggested-action')

Gnome Blueprint:

Gtk.Button {
    label: "Lorem...";
    styles [
        "suggested-action",
    ]
}

XML:

<object class="GtkButton">
    <property name="label">Lorem...</property>
    <style>
        <class name="suggested-action"/>
    </style>
</object>

Title

Libadwaita style class title

label = Gtk.Label.new(str='Lorem...')
label.add_css_class(css_class='title-1')

Gnome Blueprint:

Gtk.Label {
    label: "Lorem...";
    styles [
        "title-1",
    ]
}

XML:

<object class="GtkLabel">
    <property name="label">Lorem...</property>
    <style>
        <class name="title-1"/>
    </style>
</object>

Libadwaita style class toolbar

hbox = Gtk.Box.new(orientation=Gtk.Orientation.HORIZONTAL, spacing=0)
hbox.add_css_class(css_class='toolbar')

Gnome Blueprint:

Gtk.Box {
    orientation: horizontal;
    styles [
        "toolbar",
    ]
}

XML:

<object class="GtkBox">
    <property name="orientation">0</property>
    <style>
        <class name="toolbar"/>
    </style>
    <child></child>
</object>

View

Libadwaita style class view

button = Gtk.Button.new_with_label(label='Lorem...')
button.add_css_class(css_class='view')

Gnome Blueprint:

Gtk.Button {
    label: "Lorem...";
    styles [
        "view",
    ]
}

XML:

<object class="GtkButton">
    <property name="label">Lorem...</property>
    <style>
        <class name="view"/>
    </style>
</object>

Classes de estilo do toolkit GTK e Libadwaita

Este texto é apenas um guia pessoal, não é um tutorial 😉.

Table of contents

Classes de estilo

Background

Body

Boxed-list

Caption

Caption-heading

Card

Circular

Colors

Compact

Destructive-action

Devel

Dim-label

Flat

Flat headerbar

Frame

Heading

Icon-dropshadow

Inline

Linked

Lowres-icon

Menu

Monospace

Navigation-sidebar

Numeric

Opaque

Osd

Pill

Selection-mode

Spacer

Suggested-action

Title

View

Classes de estilo do toolkit GTK e Libadwaita

Este texto é apenas um guia pessoal, não é um tutorial 😉.

Table of contents

Classes de estilo

Background

Body

Boxed-list

Caption

Caption-heading

Card

Circular

Colors

Compact

Destructive-action

Devel

Dim-label

Flat

Flat headerbar

Frame

Heading

Icon-dropshadow

Inline

Linked

Lowres-icon

Menu

Monospace

Navigation-sidebar

Numeric

Opaque

Osd

Pill

Selection-mode

Spacer

Suggested-action

Title

Toolbar

View

Did you find this article valuable?