[libadwaita/wip/exalm/card: 2/2] demo: Add a style classes demo page
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/card: 2/2] demo: Add a style classes demo page
- Date: Fri, 22 Oct 2021 16:14:16 +0000 (UTC)
commit 3a69e4673fd73ca0dfe5fe2ae8f7768917f233c7
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Tue Oct 19 23:14:29 2021 +0500
demo: Add a style classes demo page
Currently style classes are easter eggs. Some of them are documented in GTK
widgets (e.g. button.suggested-action), but most aren't, and the ones
libadwaita adds can't be documented like that. Later we'll have stylesheet
docs for this, but for now let's have at least some reference.
This is missing a few style classes, but most should be present.
demo/adw-demo-window.c | 12 +
demo/adw-demo-window.ui | 23 +
demo/adw-style-demo-window.c | 223 ++++
demo/adw-style-demo-window.h | 13 +
demo/adw-style-demo-window.ui | 1321 ++++++++++++++++++++
demo/adwaita-demo.gresources.xml | 4 +
.../scalable/actions/style-classes-symbolic.svg | 152 +++
demo/icons/scalable/apps/org.gnome.Boxes.svg | 1 +
demo/meson.build | 1 +
demo/style-dark.css | 7 +
demo/style.css | 24 +
11 files changed, 1781 insertions(+)
---
diff --git a/demo/adw-demo-window.c b/demo/adw-demo-window.c
index 9e199db8..049e77be 100644
--- a/demo/adw-demo-window.c
+++ b/demo/adw-demo-window.c
@@ -2,6 +2,7 @@
#include <glib/gi18n.h>
#include "adw-flap-demo-window.h"
+#include "adw-style-demo-window.h"
#include "adw-tab-view-demo-window.h"
#include "adw-view-switcher-demo-window.h"
@@ -389,6 +390,16 @@ tab_view_demo_clicked_cb (GtkButton *btn,
gtk_window_present (GTK_WINDOW (window));
}
+static void
+style_classes_demo_clicked_cb (GtkButton *btn,
+ AdwDemoWindow *self)
+{
+ AdwStyleDemoWindow *window = adw_style_demo_window_new ();
+
+ gtk_window_set_transient_for (GTK_WINDOW (window), GTK_WINDOW (self));
+ gtk_window_present (GTK_WINDOW (window));
+}
+
static void
adw_demo_window_class_init (AdwDemoWindowClass *klass)
{
@@ -431,6 +442,7 @@ adw_demo_window_class_init (AdwDemoWindowClass *klass)
gtk_widget_class_bind_template_callback (widget_class, avatar_save_to_file_cb);
gtk_widget_class_bind_template_callback (widget_class, flap_demo_clicked_cb);
gtk_widget_class_bind_template_callback (widget_class, tab_view_demo_clicked_cb);
+ gtk_widget_class_bind_template_callback (widget_class, style_classes_demo_clicked_cb);
}
static void
diff --git a/demo/adw-demo-window.ui b/demo/adw-demo-window.ui
index 04db9c4c..b503c4b3 100644
--- a/demo/adw-demo-window.ui
+++ b/demo/adw-demo-window.ui
@@ -900,6 +900,29 @@
</property>
</object>
</child>
+ <child>
+ <object class="GtkStackPage">
+ <property name="name">style-classes</property>
+ <property name="title" translatable="yes">Style Classes</property>
+ <property name="child">
+ <object class="AdwStatusPage">
+ <property name="icon-name">style-classes-symbolic</property>
+ <property name="title" translatable="yes">Style Classes</property>
+ <property name="description" translatable="yes">Various widget styles available
for use.</property>
+ <property name="child">
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Run the demo</property>
+ <property name="halign">center</property>
+ <signal name="clicked" handler="style_classes_demo_clicked_cb" swapped="no"/>
+ <style>
+ <class name="pill"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </property>
+ </object>
+ </child>
</object>
</child>
</object>
diff --git a/demo/adw-style-demo-window.c b/demo/adw-style-demo-window.c
new file mode 100644
index 00000000..13e1748e
--- /dev/null
+++ b/demo/adw-style-demo-window.c
@@ -0,0 +1,223 @@
+#include "adw-style-demo-window.h"
+
+#include <glib/gi18n.h>
+
+struct _AdwStyleDemoWindow
+{
+ AdwWindow parent_instance;
+
+ gboolean progress;
+
+ GtkWindow *header_bar_window;
+ GtkWindow *status_page_window;
+ GtkWindow *sidebar_window;
+ GtkRevealer *app_notification_revealer;
+ AdwLeaflet *sidebar_leaflet;
+};
+
+G_DEFINE_TYPE (AdwStyleDemoWindow, adw_style_demo_window, ADW_TYPE_WINDOW)
+
+enum {
+ PROP_0,
+ PROP_DEVEL,
+ PROP_PROGRESS,
+ LAST_PROP,
+};
+
+static GParamSpec *props[LAST_PROP];
+
+static void
+header_bar_cb (GtkWidget *sender,
+ const char *name,
+ GVariant *param)
+{
+ AdwStyleDemoWindow *self = ADW_STYLE_DEMO_WINDOW (sender);
+
+ gtk_window_present (self->header_bar_window);
+}
+
+static void
+status_page_cb (GtkWidget *sender,
+ const char *name,
+ GVariant *param)
+{
+ AdwStyleDemoWindow *self = ADW_STYLE_DEMO_WINDOW (sender);
+
+ gtk_window_present (self->status_page_window);
+}
+
+static void
+sidebar_cb (GtkWidget *sender,
+ const char *name,
+ GVariant *param)
+{
+ AdwStyleDemoWindow *self = ADW_STYLE_DEMO_WINDOW (sender);
+
+ gtk_window_present (self->sidebar_window);
+}
+
+static void
+app_notification_cb (GtkWidget *sender,
+ const char *name,
+ GVariant *param)
+{
+ AdwStyleDemoWindow *self = ADW_STYLE_DEMO_WINDOW (sender);
+ gboolean show = g_variant_get_boolean (param);
+
+ gtk_revealer_set_reveal_child (self->app_notification_revealer, show);
+}
+
+static void
+dummy_cb (GtkWidget *sender,
+ const char *name,
+ GVariant *param)
+{
+}
+
+static void
+set_devel_style (AdwStyleDemoWindow *self,
+ gboolean devel)
+{
+ if (devel) {
+ gtk_widget_add_css_class (GTK_WIDGET (self), "devel");
+ gtk_widget_add_css_class (GTK_WIDGET (self->header_bar_window), "devel");
+ gtk_widget_add_css_class (GTK_WIDGET (self->status_page_window), "devel");
+ } else {
+ gtk_widget_remove_css_class (GTK_WIDGET (self), "devel");
+ gtk_widget_remove_css_class (GTK_WIDGET (self->header_bar_window), "devel");
+ gtk_widget_remove_css_class (GTK_WIDGET (self->status_page_window), "devel");
+ }
+}
+
+static void
+sidebar_back_cb (AdwStyleDemoWindow *self)
+{
+ adw_leaflet_navigate (self->sidebar_leaflet, ADW_NAVIGATION_DIRECTION_BACK);
+}
+
+static void
+sidebar_forward_cb (AdwStyleDemoWindow *self)
+{
+ adw_leaflet_navigate (self->sidebar_leaflet, ADW_NAVIGATION_DIRECTION_FORWARD);
+}
+
+static GtkSelectionMode
+selection_mode_for_folded (gpointer data,
+ gboolean folded)
+{
+ return folded ? GTK_SELECTION_NONE : GTK_SELECTION_BROWSE;
+}
+
+static void
+adw_style_demo_window_get_property (GObject *object,
+ guint prop_id,
+ GValue *value,
+ GParamSpec *pspec)
+{
+ AdwStyleDemoWindow *self = ADW_STYLE_DEMO_WINDOW (object);
+
+ switch (prop_id) {
+ case PROP_DEVEL:
+ g_value_set_boolean (value, gtk_widget_has_css_class (GTK_WIDGET (self), "devel"));
+ break;
+ case PROP_PROGRESS:
+ g_value_set_boolean (value, self->progress);
+ break;
+ default:
+ G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
+ }
+}
+
+static void
+adw_style_demo_window_set_property (GObject *object,
+ guint prop_id,
+ const GValue *value,
+ GParamSpec *pspec)
+{
+ AdwStyleDemoWindow *self = ADW_STYLE_DEMO_WINDOW (object);
+
+ switch (prop_id) {
+ case PROP_DEVEL:
+ set_devel_style (self, g_value_get_boolean (value));
+ break;
+ case PROP_PROGRESS:
+ self->progress = g_value_get_boolean (value);
+ break;
+ default:
+ G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
+ }
+}
+
+static void
+adw_style_demo_window_dispose (GObject *object)
+{
+ AdwStyleDemoWindow *self = ADW_STYLE_DEMO_WINDOW (object);
+
+ if (self->header_bar_window)
+ gtk_window_destroy (self->header_bar_window);
+
+ if (self->status_page_window)
+ gtk_window_destroy (self->status_page_window);
+
+ if (self->sidebar_window)
+ gtk_window_destroy (self->sidebar_window);
+
+ G_OBJECT_CLASS (adw_style_demo_window_parent_class)->dispose (object);
+}
+
+static void
+adw_style_demo_window_class_init (AdwStyleDemoWindowClass *klass)
+{
+ GObjectClass *object_class = G_OBJECT_CLASS (klass);
+ GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
+
+ object_class->get_property = adw_style_demo_window_get_property;
+ object_class->set_property = adw_style_demo_window_set_property;
+ object_class->dispose = adw_style_demo_window_dispose;
+
+ props[PROP_DEVEL] =
+ g_param_spec_boolean ("devel",
+ "Development style",
+ "Development style",
+ FALSE,
+ G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS);
+
+ props[PROP_PROGRESS] =
+ g_param_spec_boolean ("progress",
+ "Progress",
+ "Progress",
+ FALSE,
+ G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS);
+
+ g_object_class_install_properties (object_class, LAST_PROP, props);
+
+ gtk_widget_class_set_template_from_resource (widget_class,
"/org/gnome/Adwaita1/Demo/ui/adw-style-demo-window.ui");
+ gtk_widget_class_bind_template_child (widget_class, AdwStyleDemoWindow, header_bar_window);
+ gtk_widget_class_bind_template_child (widget_class, AdwStyleDemoWindow, status_page_window);
+ gtk_widget_class_bind_template_child (widget_class, AdwStyleDemoWindow, sidebar_window);
+ gtk_widget_class_bind_template_child (widget_class, AdwStyleDemoWindow, app_notification_revealer);
+ gtk_widget_class_bind_template_child (widget_class, AdwStyleDemoWindow, sidebar_leaflet);
+ gtk_widget_class_bind_template_callback (widget_class, selection_mode_for_folded);
+ gtk_widget_class_bind_template_callback (widget_class, sidebar_back_cb);
+ gtk_widget_class_bind_template_callback (widget_class, sidebar_forward_cb);
+
+ gtk_widget_class_install_property_action (widget_class, "style.devel", "devel");
+ gtk_widget_class_install_property_action (widget_class, "style.progress", "progress");
+ gtk_widget_class_install_action (widget_class, "style.header-bar", NULL, header_bar_cb);
+ gtk_widget_class_install_action (widget_class, "style.status-page", NULL, status_page_cb);
+ gtk_widget_class_install_action (widget_class, "style.sidebar", NULL, sidebar_cb);
+ gtk_widget_class_install_action (widget_class, "style.app-notification", "b", app_notification_cb);
+ gtk_widget_class_install_action (widget_class, "style.dummy", NULL, dummy_cb);
+}
+
+static void
+adw_style_demo_window_init (AdwStyleDemoWindow *self)
+{
+ gtk_widget_init_template (GTK_WIDGET (self));
+}
+
+AdwStyleDemoWindow *
+adw_style_demo_window_new (void)
+{
+ return g_object_new (ADW_TYPE_STYLE_DEMO_WINDOW, NULL);
+}
diff --git a/demo/adw-style-demo-window.h b/demo/adw-style-demo-window.h
new file mode 100644
index 00000000..d54a1a49
--- /dev/null
+++ b/demo/adw-style-demo-window.h
@@ -0,0 +1,13 @@
+#pragma once
+
+#include <adwaita.h>
+
+G_BEGIN_DECLS
+
+#define ADW_TYPE_STYLE_DEMO_WINDOW (adw_style_demo_window_get_type())
+
+G_DECLARE_FINAL_TYPE (AdwStyleDemoWindow, adw_style_demo_window, ADW, STYLE_DEMO_WINDOW, AdwWindow)
+
+AdwStyleDemoWindow *adw_style_demo_window_new (void);
+
+G_END_DECLS
diff --git a/demo/adw-style-demo-window.ui b/demo/adw-style-demo-window.ui
new file mode 100644
index 00000000..5b373c85
--- /dev/null
+++ b/demo/adw-style-demo-window.ui
@@ -0,0 +1,1321 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk" version="4.0"/>
+ <requires lib="libadwaita" version="1.0"/>
+ <template class="AdwStyleDemoWindow" parent="AdwWindow">
+ <property name="modal">True</property>
+ <property name="title" translatable="yes">Style Classes</property>
+ <property name="default-width">800</property>
+ <property name="default-height">640</property>
+ <property name="content">
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <child>
+ <object class="GtkHeaderBar"/>
+ </child>
+ <child>
+ <object class="GtkOverlay">
+ <child type="overlay">
+ <object class="GtkRevealer" id="app_notification_revealer">
+ <property name="valign">start</property>
+ <property name="halign">center</property>
+ <property name="can-focus">False</property>
+ <property name="child">
+ <object class="GtkFrame">
+ <property name="tooltip-text">app-notification</property>
+ <style>
+ <class name="app-notification"/>
+ </style>
+ <property name="child">
+ <object class="GtkBox">
+ <property name="spacing">12</property>
+ <property name="margin-start">12</property>
+ <property name="width-request">300</property>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">In-App Notification</property>
+ <property name="ellipsize">end</property>
+ <property name="xalign">0</property>
+ <property name="hexpand">True</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Action</property>
+ <property name="action-name">style.app-notification</property>
+ <property name="action-target">false</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">window-close-symbolic</property>
+ <property name="action-name">style.app-notification</property>
+ <property name="action-target">false</property>
+ <style>
+ <class name="flat"/>
+ <class name="circular"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child type="overlay">
+ <object class="GtkProgressBar">
+ <property name="valign">start</property>
+ <property name="fraction">0.5</property>
+ <property name="tooltip-text">osd</property>
+ <binding name="visible">
+ <lookup name="progress">AdwStyleDemoWindow</lookup>
+ </binding>
+ <style>
+ <class name="osd"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="AdwPreferencesPage">
+ <property name="vexpand">True</property>
+ <property name="width-request">360</property>
+ <child>
+ <object class="AdwPreferencesGroup">
+ <property name="description" translatable="yes">Hover over widgets to see their exact
style class names.</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwPreferencesGroup">
+ <property name="title" translatable="yes">Buttons</property>
+ <property name="description" translatable="yes">The "flat", "outline",
"suggested-action" and "destructive" style classes action can be used together with "pill" or "circular".
+
+The "opaque" style class allows to create buttons with custom colors that look similar to
"suggested-action".</property>
+ <child>
+ <object class="GtkFlowBox">
+ <property name="min-children-per-line">1</property>
+ <property name="max-children-per-line">6</property>
+ <property name="column-spacing">6</property>
+ <property name="row-spacing">6</property>
+ <property name="selection-mode">none</property>
+ <property name="homogeneous">True</property>
+ <style>
+ <class name="inline"/>
+ </style>
+ <child>
+ <object class="GtkFlowBoxChild">
+ <property name="focusable">False</property>
+ <child>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="homogeneous">True</property>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Regular</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Outline</property>
+ <property name="tooltip-text">outline</property>
+ <style>
+ <class name="outline"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Flat</property>
+ <property name="tooltip-text">flat</property>
+ <style>
+ <class name="flat"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkFlowBoxChild">
+ <property name="focusable">False</property>
+ <child>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="homogeneous">True</property>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Suggested</property>
+ <property name="tooltip-text">suggested-action</property>
+ <style>
+ <class name="suggested-action"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Destructive</property>
+ <property name="tooltip-text">destructive-action</property>
+ <style>
+ <class name="destructive-action"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkFlowBoxChild">
+ <property name="focusable">False</property>
+ <child>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="homogeneous">True</property>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Custom</property>
+ <property name="name">custom-button-1</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Custom</property>
+ <property name="name">custom-button-2</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkFlowBoxChild">
+ <property name="focusable">False</property>
+ <child>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="homogeneous">True</property>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Custom</property>
+ <property name="name">custom-button-3</property>
+ <property name="tooltip-text">opaque</property>
+ <style>
+ <class name="opaque"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Custom</property>
+ <property name="name">custom-button-4</property>
+ <property name="tooltip-text">opaque</property>
+ <style>
+ <class name="opaque"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkFlowBox">
+ <property name="min-children-per-line">1</property>
+ <property name="max-children-per-line">3</property>
+ <property name="column-spacing">6</property>
+ <property name="row-spacing">6</property>
+ <property name="selection-mode">none</property>
+ <property name="margin-top">12</property>
+ <style>
+ <class name="inline"/>
+ </style>
+ <child>
+ <object class="GtkFlowBoxChild">
+ <property name="focusable">False</property>
+ <child>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
+ <property name="tooltip-text">circular</property>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">list-add-symbolic</property>
+ <style>
+ <class name="circular"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="label">A</property>
+ <property name="tooltip-text">circular</property>
+ <style>
+ <class name="circular"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkFlowBoxChild">
+ <property name="focusable">False</property>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Pill Button</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
+ <property name="tooltip-text">pill</property>
+ <style>
+ <class name="pill"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkFlowBoxChild">
+ <property name="focusable">False</property>
+ <child>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">go-previous-symbolic</property>
+ <property name="tooltip-text">osd</property>
+ <style>
+ <class name="osd"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">go-next-symbolic</property>
+ <property name="tooltip-text">osd</property>
+ <style>
+ <class name="osd"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwPreferencesGroup">
+ <property name="title" translatable="yes">Entries</property>
+ <child>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="homogeneous">True</property>
+ <child>
+ <object class="GtkEntry">
+ <property name="placeholder-text" translatable="yes">Regular</property>
+ <property name="text" translatable="yes">Regular</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkEntry">
+ <property name="placeholder-text" translatable="yes">Warning</property>
+ <property name="text" translatable="yes">Warning</property>
+ <property name="tooltip-text">warning</property>
+ <style>
+ <class name="warning"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkEntry">
+ <property name="placeholder-text" translatable="yes">Error</property>
+ <property name="text" translatable="yes">Error</property>
+ <property name="tooltip-text">error</property>
+ <style>
+ <class name="error"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwPreferencesGroup">
+ <property name="title" translatable="yes">Linked Controls</property>
+ <property name="description" translatable="yes">The "linked" style on GtkBox and similar
containers allows to visually join related button-like and entry-like widgets.</property>
+ <child>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkBox">
+ <property name="tooltip-text">linked</property>
+ <style>
+ <class name="linked"/>
+ </style>
+ <child>
+ <object class="GtkToggleButton" id="toggle">
+ <property name="icon-name">view-grid-symbolic</property>
+ <property name="active">True</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkToggleButton">
+ <property name="icon-name">view-list-symbolic</property>
+ <property name="group">toggle</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="tooltip-text">linked</property>
+ <style>
+ <class name="linked"/>
+ </style>
+ <child>
+ <object class="GtkEntry">
+ <property name="placeholder-text" translatable="yes">Entry</property>
+ <property name="hexpand">True</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkEntry">
+ <property name="placeholder-text" translatable="yes">Entry</property>
+ <property name="hexpand">True</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Button</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="margin-top">6</property>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="tooltip-text">linked</property>
+ <style>
+ <class name="linked"/>
+ </style>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">edit-cut-symbolic</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">edit-copy-symbolic</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">edit-paste-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="hexpand">True</property>
+ <property name="tooltip-text">linked</property>
+ <style>
+ <class name="linked"/>
+ </style>
+ <child>
+ <object class="GtkEntry">
+ <property name="placeholder-text" translatable="yes">Street</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkEntry">
+ <property name="placeholder-text" translatable="yes">City</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkEntry">
+ <property name="placeholder-text" translatable="yes">Province</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwPreferencesGroup">
+ <property name="title" translatable="yes">Labels</property>
+ <child>
+ <object class="GtkFlowBox">
+ <property name="min-children-per-line">1</property>
+ <property name="max-children-per-line">2</property>
+ <property name="column-spacing">12</property>
+ <property name="row-spacing">18</property>
+ <property name="selection-mode">none</property>
+ <style>
+ <class name="inline"/>
+ </style>
+ <child>
+ <object class="GtkFlowBoxChild">
+ <property name="focusable">False</property>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="spacing">12</property>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Large Title</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">large-title</property>
+ <style>
+ <class name="large-title"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Title 1</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">title-1</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Title 2</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">title-2</property>
+ <style>
+ <class name="title-2"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Title 3</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">title-3</property>
+ <style>
+ <class name="title-3"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Title 4</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">title-4</property>
+ <style>
+ <class name="title-4"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Monospace</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">monospace</property>
+ <style>
+ <class name="monospace"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Numeric (1234567890)</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">numeric</property>
+ <style>
+ <class name="numeric"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Accent</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">accent</property>
+ <style>
+ <class name="accent"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Error</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">error</property>
+ <style>
+ <class name="error"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkFlowBoxChild">
+ <property name="focusable">False</property>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="spacing">12</property>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Heading</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">heading</property>
+ <style>
+ <class name="heading"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">This is a paragraph of a body
copy. You would use this style for most text in interfaces. It can also include <b>styling</b> or
<a href="https://os.gnome.org/";>links</a>.</property>
+ <property name="use-markup">True</property>
+ <property name="xalign">0</property>
+ <property name="wrap">True</property>
+ <property name="wrap-mode">word-char</property>
+ <property name="max-width-chars">25</property>
+ <property name="tooltip-text">body</property>
+ <style>
+ <class name="body"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Caption Heading</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">caption-heading</property>
+ <style>
+ <class name="caption-heading"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Caption body text, to be used
for body copy on image captions and the like.</property>
+ <property name="xalign">0</property>
+ <property name="wrap">True</property>
+ <property name="wrap-mode">word-char</property>
+ <property name="max-width-chars">25</property>
+ <property name="tooltip-text">caption</property>
+ <style>
+ <class name="caption"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwPreferencesGroup">
+ <property name="title" translatable="yes">Cards and Boxed Lists</property>
+ <property name="description" translatable="yes">The "content" style class can be used
with GtkListBox to create boxed lists.
+
+The "card" style class can be used to achieve the same style with GtkBox or similar containers, and with
GtkButton. If used together with "activatable" style class, or on a GtkButton, the card will also have hover
and press styles.
+ </property>
+ <child>
+ <object class="GtkBox">
+ <property name="homogeneous">True</property>
+ <property name="height-request">100</property>
+ <property name="margin-bottom">12</property>
+ <property name="spacing">12</property>
+ <child>
+ <object class="AdwBin">
+ <property name="tooltip-text">card</property>
+ <style>
+ <class name="card"/>
+ </style>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Card</property>
+ <property name="wrap">True</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwBin">
+ <property name="tooltip-text">card, activatable</property>
+ <property name="focusable">True</property>
+ <style>
+ <class name="card"/>
+ <class name="activatable"/>
+ </style>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Card (activatable)</property>
+ <property name="wrap">True</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="tooltip-text">card</property>
+ <style>
+ <class name="card"/>
+ </style>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Card (button)</property>
+ <property name="wrap">True</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkListBox">
+ <property name="selection-mode">none</property>
+ <property name="tooltip-text">content</property>
+ <style>
+ <class name="content"/>
+ </style>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title" translatable="yes">Row</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title" translatable="yes">Row (activatable)</property>
+ <property name="activatable">True</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwPreferencesGroup">
+ <property name="title" translatable="yes">App Icons</property>
+ <property name="description" translatable="yes">The "icon-dropshadow" style class
ensures legibility when displaying app icons. For 32x32 and smaller app icons, "lowres-icon" should be used
instead.</property>
+ <child>
+ <object class="GtkGrid">
+ <property name="row-spacing">6</property>
+ <property name="column-spacing">12</property>
+ <child>
+ <object class="GtkImage">
+ <property name="icon-name">org.gnome.Boxes</property>
+ <property name="pixel-size">128</property>
+ <property name="halign">center</property>
+ <property name="tooltip-text">icon-dropshadow</property>
+ <style>
+ <class name="icon-dropshadow"/>
+ </style>
+ <layout>
+ <property name="column">0</property>
+ <property name="row">0</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">128</property>
+ <property name="halign">center</property>
+ <property name="valign">end</property>
+ <layout>
+ <property name="column">0</property>
+ <property name="row">1</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkImage">
+ <property name="icon-name">org.gnome.Boxes</property>
+ <property name="pixel-size">64</property>
+ <property name="halign">center</property>
+ <property name="valign">end</property>
+ <property name="tooltip-text">icon-dropshadow</property>
+ <style>
+ <class name="icon-dropshadow"/>
+ </style>
+ <layout>
+ <property name="column">1</property>
+ <property name="row">0</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">64</property>
+ <property name="halign">center</property>
+ <layout>
+ <property name="column">1</property>
+ <property name="row">1</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkImage">
+ <property name="icon-name">org.gnome.Boxes</property>
+ <property name="pixel-size">32</property>
+ <property name="halign">center</property>
+ <property name="valign">end</property>
+ <property name="tooltip-text">lowres-icon</property>
+ <style>
+ <class name="lowres-icon"/>
+ </style>
+ <layout>
+ <property name="column">2</property>
+ <property name="row">0</property>
+ </layout>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">32</property>
+ <property name="halign">center</property>
+ <layout>
+ <property name="column">2</property>
+ <property name="row">1</property>
+ </layout>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwPreferencesGroup">
+ <property name="title" translatable="yes">Toolbars</property>
+ <property name="description" translatable="yes">The "toolbar" style class on GtkBox and
similar containers gives the same padding, spacing and button appearance as GtkHeaderBar and GtkActionBar
have. A toolbar can additionally have the "osd" style class, useful for floating media controls.
+
+The "raised" style class can be used to make a button inside a toolbar use default appearance
instead.</property>
+ <child>
+ <object class="GtkFrame">
+ <property name="margin-bottom">12</property>
+ <child>
+ <object class="GtkBox">
+ <property name="tooltip-text">toolbar</property>
+ <style>
+ <class name="toolbar"/>
+ </style>
+ <child>
+ <object class="GtkMenuButton">
+ <property name="label" translatable="yes">Open</property>
+ <property name="menu-model">demo_menu</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">tab-new-symbolic</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkSeparator">
+ <property name="hexpand">True</property>
+ <style>
+ <class name="spacer"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">edit-undo-symbolic</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">edit-redo-symbolic</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkSeparator">
+ <style>
+ <class name="spacer"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkMenuButton">
+ <property name="icon-name">view-more-symbolic</property>
+ <property name="menu-model">demo_menu</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="tooltip-text">toolbar, osd</property>
+ <style>
+ <class name="toolbar"/>
+ <class name="osd"/>
+ </style>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">media-skip-backward-symbolic</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">media-playback-pause-symbolic</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">media-skip-forward-symbolic</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkScale">
+ <property name="hexpand">True</property>
+ <property name="adjustment">
+ <object class="GtkAdjustment">
+ <property name="lower">0</property>
+ <property name="upper">100</property>
+ <property name="value">50</property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkVolumeButton"/>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwPreferencesGroup">
+ <property name="title" translatable="yes">Backgrounds</property>
+ <property name="description" translatable="yes">These style classes can be applied to
any widgets that need the specific background and text color.</property>
+ <child>
+ <object class="GtkBox">
+ <property name="homogeneous">True</property>
+ <property name="height-request">100</property>
+ <child>
+ <object class="AdwBin">
+ <property name="tooltip-text">background</property>
+ <style>
+ <class name="background"/>
+ </style>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Background</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwBin">
+ <property name="tooltip-text">view</property>
+ <style>
+ <class name="view"/>
+ </style>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">View</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwBin">
+ <property name="tooltip-text">osd</property>
+ <style>
+ <class name="osd"/>
+ </style>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">OSD</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwPreferencesGroup">
+ <property name="title" translatable="yes">Misc</property>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title" translatable="yes">Flat Header Bar</property>
+ <property name="activatable">True</property>
+ <property name="action-name">style.header-bar</property>
+ <child>
+ <object class="GtkImage">
+ <property name="icon-name">go-next-symbolic</property>
+ <style>
+ <class name="dim-label"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title" translatable="yes">Status Pages</property>
+ <property name="activatable">True</property>
+ <property name="action-name">style.status-page</property>
+ <child>
+ <object class="GtkImage">
+ <property name="icon-name">go-next-symbolic</property>
+ <style>
+ <class name="dim-label"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title" translatable="yes">Sidebar</property>
+ <property name="activatable">True</property>
+ <property name="action-name">style.sidebar</property>
+ <child>
+ <object class="GtkImage">
+ <property name="icon-name">go-next-symbolic</property>
+ <style>
+ <class name="dim-label"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title" translatable="yes">Development Window</property>
+ <property name="subtitle" translatable="yes">"devel" style class on
GtkWindow</property>
+ <property name="activatable-widget">devel_switch</property>
+ <child>
+ <object class="GtkSwitch" id="devel_switch">
+ <property name="action-name">style.devel</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="outline"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title" translatable="yes">OSD Progress Bar</property>
+ <property name="subtitle" translatable="yes">"osd" style class on
GtkProgressBar</property>
+ <property name="activatable-widget">progress_switch</property>
+ <child>
+ <object class="GtkSwitch" id="progress_switch">
+ <property name="action-name">style.progress</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="outline"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title" translatable="yes">In-App Notification</property>
+ <property name="subtitle" translatable="yes">"app-notification" style class on
GtkFrame</property>
+ <child>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Show</property>
+ <property name="action-name">style.app-notification</property>
+ <property name="action-target">true</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="outline"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </property>
+ </template>
+ <object class="GtkWindow" id="header_bar_window">
+ <property name="modal">True</property>
+ <property name="transient-for">AdwStyleDemoWindow</property>
+ <property name="title" translatable="yes">Flat Header Bar</property>
+ <property name="hide-on-close">True</property>
+ <child type="titlebar">
+ <object class="GtkHeaderBar">
+ <property name="tooltip-text">flat</property>
+ <property name="title-widget">
+ <object class="AdwWindowTitle"/>
+ </property>
+ <style>
+ <class name="flat"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="use-markup">True</property>
+ <property name="label" translatable="yes">The header bar in this window has the "flat" style
class.</property>
+ <property name="wrap">True</property>
+ <property name="margin-start">48</property>
+ <property name="margin-end">48</property>
+ <property name="margin-bottom">48</property>
+ </object>
+ </child>
+ </object>
+ <object class="GtkWindow" id="status_page_window">
+ <property name="modal">True</property>
+ <property name="transient-for">AdwStyleDemoWindow</property>
+ <property name="title" translatable="yes">Status Pages</property>
+ <property name="hide-on-close">True</property>
+ <property name="default-width">640</property>
+ <property name="default-height">480</property>
+ <child type="titlebar">
+ <object class="GtkHeaderBar">
+ <child>
+ <object class="GtkRevealer">
+ <property name="transition-type">crossfade</property>
+ <property name="reveal-child" bind-source="status_page_flap" bind-property="folded"
bind-flags="sync-create"/>
+ <property name="child">
+ <object class="GtkToggleButton">
+ <property name="icon-name">view-sidebar-start</property>
+ <property name="active" bind-source="status_page_flap" bind-property="reveal-flap"
bind-flags="sync-create|bidirectional"/>
+ </object>
+ </property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwFlap" id="status_page_flap">
+ <property name="width-request">360</property>
+ <property name="flap">
+ <object class="AdwStatusPage">
+ <property name="width-request">250</property>
+ <property name="icon-name">org.gnome.Adwaita1.Demo-symbolic</property>
+ <property name="title" translatable="yes">Compact</property>
+ <property name="description" translatable="yes">This status page has the "compact" style
class.</property>
+ <property name="tooltip-text">compact</property>
+ <style>
+ <class name="compact"/>
+ <class name="background"/>
+ </style>
+ <property name="child">
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Button</property>
+ <property name="halign">center</property>
+ <style>
+ <class name="pill"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </property>
+ <property name="separator">
+ <object class="GtkSeparator"/>
+ </property>
+ <property name="content">
+ <object class="AdwStatusPage">
+ <property name="hexpand">True</property>
+ <property name="icon-name">org.gnome.Adwaita1.Demo-symbolic</property>
+ <property name="title" translatable="yes">Regular</property>
+ <property name="description" translatable="yes">This is a regular status page.</property>
+ <property name="child">
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Button</property>
+ <property name="halign">center</property>
+ <style>
+ <class name="pill"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </property>
+ </object>
+ </child>
+ </object>
+ <object class="AdwWindow" id="sidebar_window">
+ <property name="modal">True</property>
+ <property name="transient-for">AdwStyleDemoWindow</property>
+ <property name="title" translatable="yes">Sidebar</property>
+ <property name="hide-on-close">True</property>
+ <property name="default-width">720</property>
+ <property name="default-height">480</property>
+ <property name="content">
+ <object class="AdwLeaflet" id="sidebar_leaflet">
+ <property name="can-swipe-back">True</property>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="width-request">200</property>
+ <child>
+ <object class="AdwHeaderBar">
+ <binding name="show-end-title-buttons">
+ <lookup name="folded">sidebar_leaflet</lookup>
+ </binding>
+ <property name="title-widget">
+ <object class="AdwWindowTitle"/>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkScrolledWindow">
+ <property name="hscrollbar-policy">never</property>
+ <property name="vexpand">True</property>
+ <property name="child">
+ <object class="GtkViewport">
+ <property name="scroll-to-focus">False</property>
+ <property name="child">
+ <object class="GtkListBox">
+ <property name="tooltip-text">navigation-sidebar</property>
+ <binding name="selection-mode">
+ <closure type="GtkSelectionMode" function="selection_mode_for_folded">
+ <lookup name="folded">sidebar_leaflet</lookup>
+ </closure>
+ </binding>
+ <signal name="row-activated" handler="sidebar_forward_cb" swapped="yes"/>
+ <style>
+ <class name="navigation-sidebar"/>
+ </style>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Item 1</property>
+ <property name="ellipsize">end</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Item 2</property>
+ <property name="ellipsize">end</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Item 3</property>
+ <property name="ellipsize">end</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Item 4</property>
+ <property name="ellipsize">end</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Item 5</property>
+ <property name="ellipsize">end</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+ </property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwLeafletPage">
+ <property name="navigatable">False</property>
+ <property name="child">
+ <object class="GtkSeparator"/>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="hexpand">True</property>
+ <property name="width-request">360</property>
+ <child>
+ <object class="AdwHeaderBar">
+ <binding name="show-start-title-buttons">
+ <lookup name="folded">sidebar_leaflet</lookup>
+ </binding>
+ <child>
+ <object class="GtkButton">
+ <property name="icon-name">go-previous-symbolic</property>
+ <signal name="clicked" handler="sidebar_back_cb" swapped="yes"/>
+ <binding name="visible">
+ <lookup name="folded">sidebar_leaflet</lookup>
+ </binding>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwStatusPage">
+ <property name="vexpand">True</property>
+ <property name="title" translatable="yes">Sidebar</property>
+ <property name="description" translatable="yes">"navigation-sidebar" style class on
GtkListBox or GtkListView</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+ <menu id="demo_menu">
+ <section>
+ <item>
+ <attribute name="label" translatable="yes">Item 1</attribute>
+ <attribute name="action">style.dummy</attribute>
+ </item>
+ <item>
+ <attribute name="label" translatable="yes">Item 2</attribute>
+ <attribute name="action">style.dummy</attribute>
+ </item>
+ <item>
+ <attribute name="label" translatable="yes">Item 3</attribute>
+ <attribute name="action">style.dummy</attribute>
+ </item>
+ </section>
+ </menu>
+</interface>
diff --git a/demo/adwaita-demo.gresources.xml b/demo/adwaita-demo.gresources.xml
index a046240e..83ef277e 100644
--- a/demo/adwaita-demo.gresources.xml
+++ b/demo/adwaita-demo.gresources.xml
@@ -17,6 +17,7 @@
<file preprocess="xml-stripblanks">icons/scalable/actions/row-forbidden-symbolic.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/actions/row-preferences-symbolic.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/actions/row-shutdown-symbolic.svg</file>
+ <file preprocess="xml-stripblanks">icons/scalable/actions/style-classes-symbolic.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/actions/tab-new-symbolic.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/actions/view-sidebar-start-symbolic.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/actions/view-sidebar-start-symbolic-rtl.svg</file>
@@ -29,16 +30,19 @@
<file preprocess="xml-stripblanks">icons/scalable/actions/widget-list-symbolic.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/actions/widget-tab-view-symbolic.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/actions/widget-view-switcher-symbolic.svg</file>
+ <file preprocess="xml-stripblanks">icons/scalable/apps/org.gnome.Boxes.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/status/dark-mode-symbolic.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/status/light-mode-symbolic.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/status/tab-audio-playing-symbolic.svg</file>
<file preprocess="xml-stripblanks">icons/scalable/status/tab-audio-muted-symbolic.svg</file>
<file compressed="true">style.css</file>
+ <file compressed="true">style-dark.css</file>
</gresource>
<gresource prefix="/org/gnome/Adwaita1/Demo/ui">
<file preprocess="xml-stripblanks">adw-demo-preferences-window.ui</file>
<file preprocess="xml-stripblanks">adw-demo-window.ui</file>
<file preprocess="xml-stripblanks">adw-flap-demo-window.ui</file>
+ <file preprocess="xml-stripblanks">adw-style-demo-window.ui</file>
<file preprocess="xml-stripblanks">adw-tab-view-demo-window.ui</file>
<file preprocess="xml-stripblanks">adw-view-switcher-demo-window.ui</file>
</gresource>
diff --git a/demo/icons/scalable/actions/style-classes-symbolic.svg
b/demo/icons/scalable/actions/style-classes-symbolic.svg
new file mode 100644
index 00000000..d53b10c9
--- /dev/null
+++ b/demo/icons/scalable/actions/style-classes-symbolic.svg
@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <filter id="a" height="100%" width="100%" x="0%" y="0%">
+ <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+ </filter>
+ <mask id="b">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.3"/>
+ </g>
+ </mask>
+ <clipPath id="c">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="d">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
+ </g>
+ </mask>
+ <clipPath id="e">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="f">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
+ </g>
+ </mask>
+ <clipPath id="g">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="h">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
+ </g>
+ </mask>
+ <clipPath id="i">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="j">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
+ </g>
+ </mask>
+ <clipPath id="k">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="l">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
+ </g>
+ </mask>
+ <clipPath id="m">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="n">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.05"/>
+ </g>
+ </mask>
+ <clipPath id="o">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="p">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.3"/>
+ </g>
+ </mask>
+ <clipPath id="q">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="r">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.5"/>
+ </g>
+ </mask>
+ <clipPath id="s">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="t">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.4"/>
+ </g>
+ </mask>
+ <clipPath id="u">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="v">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.4"/>
+ </g>
+ </mask>
+ <clipPath id="w">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="x">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.5"/>
+ </g>
+ </mask>
+ <clipPath id="y">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <mask id="z">
+ <g filter="url(#a)">
+ <path d="m 0 0 h 16 v 16 h -16 z" fill-opacity="0.5"/>
+ </g>
+ </mask>
+ <clipPath id="A">
+ <path d="m 0 0 h 1024 v 800 h -1024 z"/>
+ </clipPath>
+ <g clip-path="url(#c)" mask="url(#b)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 562.460938 212.058594 h 10.449218 c -1.183594 0.492187 -1.296875 2.460937 0 3 h
-10.449218 z m 0 0" fill="#2e3436"/>
+ </g>
+ <g clip-path="url(#e)" mask="url(#d)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 16 632 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
+ </g>
+ <g clip-path="url(#g)" mask="url(#f)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 17 631 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
+ </g>
+ <g clip-path="url(#i)" mask="url(#h)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 18 634 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
+ </g>
+ <g clip-path="url(#k)" mask="url(#j)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 16 634 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
+ </g>
+ <g clip-path="url(#m)" mask="url(#l)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 17 635 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
+ </g>
+ <g clip-path="url(#o)" mask="url(#n)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 19 635 h 1 v 1 h -1 z m 0 0" fill="#2e3436" fill-rule="evenodd"/>
+ </g>
+ <g clip-path="url(#q)" mask="url(#p)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 136 660 v 7 h 7 v -7 z m 0 0" fill="#2e3436"/>
+ </g>
+ <g clip-path="url(#s)" mask="url(#r)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 199 642 h 3 v 12 h -3 z m 0 0" fill="#2e3436"/>
+ </g>
+ <path d="m 7.996094 0 c -1.109375 0 -2 0.890625 -2 2 v 3.003906 c 0 0.632813 -0.480469 0.996094 -1
0.996094 h -1 c -1.109375 0 -2 0.890625 -2 2 v 1 h 12 v -1 c 0 -1.109375 -0.894532 -2 -2 -2 h -0.976563 c
-0.53125 0 -1.023437 -0.359375 -1.023437 -1 v -3 c 0 -1.109375 -0.894532 -2 -2 -2 z m 0 1.40625 c 0.324218 0
0.59375 0.265625 0.59375 0.59375 s -0.269532 0.59375 -0.59375 0.59375 c -0.328125 0 -0.59375 -0.265625
-0.59375 -0.59375 s 0.265625 -0.59375 0.59375 -0.59375 z m 0 0" fill="#2e3436"/>
+ <path d="m 2 10 h 12 l -0.800781 4.003906 c -0.199219 0.820313 -0.699219 0.996094 -1.246094 0.996094 h
-1.953125 v -2 l -1.125 2 h -1.847656 l -0.027344 -2 l -1.035156 2 h -0.964844 v -1.5 l -1 1.5 h -3 l
0.210938 -1.046875 z m 0 0" fill="#2e3436"/>
+ <path d="m 134.9375 529.0625 l -5.625 -3.3125" fill="none" stroke="#2e3436" stroke-linecap="round"
stroke-width="2" transform="matrix(0 -1 1 0 -538 136)"/>
+ <g clip-path="url(#u)" mask="url(#t)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 209.5 144.160156 c 0.277344 0 0.5 0.222656 0.5 0.5 v 1 c 0 0.277344 -0.222656 0.5 -0.5
0.5 s -0.5 -0.222656 -0.5 -0.5 v -1 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0" fill="#2e3436"/>
+ </g>
+ <g clip-path="url(#w)" mask="url(#v)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 206.5 144.160156 c 0.277344 0 0.5 0.222656 0.5 0.5 v 1 c 0 0.277344 -0.222656 0.5 -0.5
0.5 s -0.5 -0.222656 -0.5 -0.5 v -1 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0" fill="#2e3436"/>
+ </g>
+ <g clip-path="url(#y)" mask="url(#x)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 229.5 143.160156 c -0.546875 0 -1 0.457032 -1 1 c 0 0.546875 0.453125 1 1 1 s 1 -0.453125
1 -1 c 0 -0.542968 -0.453125 -1 -1 -1 z m 0 0" fill="#2e3436"/>
+ </g>
+ <g clip-path="url(#A)" mask="url(#z)" transform="matrix(1 0 0 1 -256 -660)">
+ <path d="m 226.453125 143.160156 c -0.519531 0 -0.953125 0.433594 -0.953125 0.953125 v 0.09375 c 0
0.519531 0.433594 0.953125 0.953125 0.953125 h 0.09375 c 0.519531 0 0.953125 -0.433594 0.953125 -0.953125 v
-0.09375 c 0 -0.519531 -0.433594 -0.953125 -0.953125 -0.953125 z m 0 0" fill="#2e3436"/>
+ </g>
+</svg>
diff --git a/demo/icons/scalable/apps/org.gnome.Boxes.svg b/demo/icons/scalable/apps/org.gnome.Boxes.svg
new file mode 100644
index 00000000..bb0a94f4
--- /dev/null
+++ b/demo/icons/scalable/apps/org.gnome.Boxes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; width="128" height="128"
version="1.0"><defs><linearGradient id="a"><stop offset="0" stop-color="#fff"/><stop offset=".4"
stop-color="#fff"/><stop offset="1" stop-color="#f6f5f4"/></linearGradient><radialGradient xlink:href="#a"
id="i" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4 0 0 4 -492.799 -641.952)" cx="134.2"
cy="222.988" fx="134.2" fy="222.988" r="2"/><radialGradient xlink:href="#a" id="h"
gradientUnits="userSpaceOnUse" gradientTransform="matrix(4 0 0 4 -492.799 -681.952)" cx="134.2" cy="222.988"
fx="134.2" fy="222.988" r="2"/><radialGradient xlink:href="#a" id="g" gradientUnits="userSpaceOnUse"
gradientTransform="matrix(6 0 0 6 -785.198 -1065.928)" cx="134.2" cy="222.988" fx="134.2" fy="222.988"
r="2"/><radialGradient xlink:href="#a" id="f" cx="134.2" cy="222.988" fx="134.2" fy="222.988" r="2"
gradientUnits="userSpaceOnUse" gradientTransform="matrix(6 0 0 6 -785.198 -1153.928)"/
<radialGradient xlink:href="#a" id="e" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4 0 0 4
-452.799 -681.952)" cx="134.2" cy="222.988" fx="134.2" fy="222.988" r="2"/><radialGradient xlink:href="#a"
id="d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4 0 0 4 -452.799 -641.952)" cx="134.2"
cy="222.988" fx="134.2" fy="222.988" r="2"/><radialGradient xlink:href="#a" id="c"
gradientUnits="userSpaceOnUse" gradientTransform="matrix(6 0 0 6 -697.198 -1065.928)" cx="134.2"
cy="222.988" fx="134.2" fy="222.988" r="2"/><radialGradient xlink:href="#a" id="b"
gradientUnits="userSpaceOnUse" gradientTransform="matrix(6 0 0 6 -697.198 -1153.928)" cx="134.2"
cy="222.988" fx="134.2" fy="222.988" r="2"/></defs><g transform="translate(0 -172)"><path
style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;tex
t-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;marker:none"
d="M22.352 194.352h82.687v82.687H22.352z" color="#000" font-weight="400" font-family="sans-serif"
overflow="visible" fill="none"/><g color="#000" fill="none" stroke="#f6f5f4" stroke-width="8"><path
style="marker:none" d="M84 256l24 24M84 216l24-24M44 256l-24 24M44 216l-24-24M44 216h40v40H44z"
overflow="visible"/><path style="marker:none" overflow="visible" d="M20 192h88v88H20z"/></g><path
style="marker:none" fill="#d5d3cf" d="M98.5 194v2h-69v-2z"/><path style="marker:none" d="M120 192c0
6.627-5.373 12-12 12-1.85 0-3.222-.095-5.165-1.166-1.092-1.726-3.55-4.584-5.668-5.666C96.096 195.224 96
193.85 96 192c0-6.627 5.373-12 12-12s12 5.373 12 12z" color="#000" overflow="visible" fill="#d5d3cf"/><path
style="marker:none" fill="#d5d3cf" d="M110 203h2v69h-2
z"/><circle style="marker:none" cx="108" cy="280" r="12" color="#000" overflow="visible"
fill="#d5d3cf"/><path style="marker:none" fill="#d5d3cf" d="M79 258v2H49v-2zM99.604 274.425l-1.414
1.415-15-15 1.415-1.415zM103.058 199.793l1.414 1.414-15 15-1.414-1.414z"/><circle style="marker:none"
cx="108" cy="190" r="12" color="#000" overflow="visible" fill="url(#b)"/><path style="marker:none"
fill="#d5d3cf" d="M86 222h2v26h-2zM79 218v2H49v-2z"/><circle style="marker:none" cx="84" cy="216" r="8"
color="#000" overflow="visible" fill="#d5d3cf"/><path style="marker:none" fill="#d5d3cf" d="M98.5
282v2h-69v-2z"/><circle r="12" cy="278" cx="108" style="marker:none" color="#000" overflow="visible"
fill="url(#c)"/><path style="marker:none" d="M92 256c0 .666 0 1-.235 1.932-1.165.59-4.765 4.542-5.787
5.822-.502.246-1.295.246-1.978.246a8 8 0 1 1 8-8z" color="#000" overflow="visible" fill="#d5d3cf"/><circle
style="marker:none" cx="84" cy="254" r="8" color="#000" overflow="visible" fill="url(#d)"/><circ
le r="8" cy="214" cx="84" style="marker:none" color="#000" overflow="visible" fill="url(#e)"/><path
style="marker:none" fill="#d5d3cf" d="M22 203h2v69h-2z"/><circle r="12" cy="280" cx="20" style="marker:none"
color="#000" overflow="visible" fill="#d5d3cf"/><path style="marker:none" fill="#d5d3cf" d="M46
222h2v26h-2z"/><circle r="8" cy="216" cx="44" style="marker:none" color="#000" overflow="visible"
fill="#d5d3cf"/><path style="marker:none" fill="#d5d3cf" d="M43.586 259.586L45 261l-15
15-1.414-1.414z"/><path d="M7.912 192c0 6.627 5.372 12 12 12 1.849 0 3.222-.095 5.165-1.166 1.092-1.726
3.55-4.584 5.668-5.666 1.071-1.944 1.167-3.318 1.167-5.168 0-6.627-5.373-12-12-12-6.628 0-12 5.373-12 12z"
style="marker:none" color="#000" overflow="visible" fill="#d5d3cf"/><path style="marker:none" fill="#d5d3cf"
d="M40.077 214.953l-1.414 1.415-15-15 1.415-1.414z"/><circle r="12" cy="190" cx="20" style="marker:none"
color="#000" overflow="visible" fill="url(#f)"/><circle style="marker:none" cx="20
" cy="278" r="12" color="#000" overflow="visible" fill="url(#g)"/><circle style="marker:none" cx="44"
cy="214" r="8" color="#000" overflow="visible" fill="url(#h)"/><path d="M36 256c0 .666 0 1 .235 1.932
1.165.59 4.765 4.542 5.787 5.822.502.246 1.295.246 1.978.246a8 8 0 1 0-8-8z" style="marker:none" color="#000"
overflow="visible" fill="#d5d3cf"/><circle r="8" cy="254" cx="44" style="marker:none" color="#000"
overflow="visible" fill="url(#i)"/></g></svg>
\ No newline at end of file
diff --git a/demo/meson.build b/demo/meson.build
index 9239178e..5cd05f0e 100644
--- a/demo/meson.build
+++ b/demo/meson.build
@@ -15,6 +15,7 @@ adwaita_demo_sources = [
'adw-demo-preferences-window.c',
'adw-demo-window.c',
'adw-flap-demo-window.c',
+ 'adw-style-demo-window.c',
'adw-tab-view-demo-window.c',
'adw-view-switcher-demo-window.c',
libadwaita_generated_headers,
diff --git a/demo/style-dark.css b/demo/style-dark.css
new file mode 100644
index 00000000..8086e9f4
--- /dev/null
+++ b/demo/style-dark.css
@@ -0,0 +1,7 @@
+#custom-button-1 {
+ color: @red_1;
+}
+
+#custom-button-2 {
+ color: @purple_1;
+}
diff --git a/demo/style.css b/demo/style.css
index c294ce7c..b5b15a39 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -7,3 +7,27 @@ box.avatar-page { margin: 36px 12px; }
box.avatar-page > box > avatar { margin-bottom: 36px; }
box.avatar-page > box > label.title { margin-bottom: 12px; }
box.avatar-page > box > label.description { margin-bottom: 36px; }
+
+flowbox.inline flowboxchild {
+ padding: 0;
+ background: none;
+ color: inherit;
+}
+
+#custom-button-1 {
+ color: @red_3;
+}
+
+#custom-button-2 {
+ color: @purple_3;
+}
+
+#custom-button-3 {
+ color: white;
+ background-color: @green_5;
+}
+
+#custom-button-4 {
+ color: white;
+ background-color: @orange_4;
+}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
