Style Classes 800 360 150 start 0.5 osd False 360 Hover over widgets to see their exact style class names.Buttoms The "flat", "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".6 vertical 6 True 6 True Regular True Flat flat True 6 True Suggested suggested-action True Destructive destructive-action True 6 12 6 center center True circular Pill Button center center pill list-add-symbolic A circular Pill Button center center True pill True 6 center center True go-previous-symbolic osd go-next-symbolic osd Entries 6 vertical 6 True True Regular Regular edit-copy-symbolic Success Success success edit-copy-symbolic 6 True True Warning Warning warning edit-copy-symbolic Error Error error edit-copy-symbolic Toggle Groups The "flat", "round" and "osd" style classes action can all be used together.6 True flat Flat Flat round Round Round osd OSD OSD Linked Controls The "linked" style on GtkBox and similar containers allows to visually join related button-like and entry-like widgets.6 linked view-grid-symbolic True view-list-symbolic toggle linked Entry True Entry True Button True 6 6 vertical linked edit-cut-symbolic edit-copy-symbolic edit-paste-symbolic vertical True linked Street City Province Labels 18 vertical 12 True Title 1 0 end title-1 Title 2 0 end title-2 Title 3 0 end title-3 Title 4 0 end title-4 Monospace 0 end monospace Numeric (1234567890)0 end numeric Accent 0 end accent Success 0 end success Warning 0 end warning Error 0 end error vertical 12 True Heading 0 end heading 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> .True 0 True word-char 25 body Caption Heading 0 end caption-heading Caption body text, to be used for body copy on image captions and the like.0 True word-char 25 caption This is a dimmed paragraph, mostly used for secondary labels or descriptions.0 True word-char 25 dimmed Cards and Boxed Lists The "boxed-list" 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.True 100 12 12 card Card True word-char card, activatable True Card (activatable)True word-char card Card (button)True word-char none boxed-list Row Row (activatable)True App Icons The "icon-dropshadow" style class ensures legibility when displaying app icons. For 32x32 and smaller app icons, "lowres-icon" should be used instead.6 12 org.gnome.Boxes 128 end icon-dropshadow 0 0 128 0.5 0 1 org.gnome.Boxes 64 end icon-dropshadow 1 0 64 0.5 1 1 org.gnome.Boxes 32 end icon-dropshadow 2 0 32 0.5 2 1 Check Buttons The "selection-mode" style class can be used with GtkCheckButton to make them large and round.6 12 start end end True 0 0 start end 1 0 Regular 0.5 12 12 True word-char 0 1 2 end end True selection-mode 2 0 start end selection-mode 3 0 Selection Mode 0.5 12 12 True word-char 2 1 2 Toolbars 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.12 toolbar Open demo-menu tab-new-symbolic True edit-undo-symbolic edit-redo-symbolic view-more-symbolic demo-menu toolbar, osd media-skip-backward-symbolic media-playback-pause-symbolic media-skip-forward-symbolic True 0 100 50 audio-volume-muted audio-volume-high audio-volume-low audio-volume-medium Backgrounds These style classes can be applied to any widgets that need the specific background and text color.Truey100 background Background True word-char view View True word-char osd Osd True word-char Misc Status Pages True go-next-symbolic Sidebar True go-next-symbolic Development Window"devel" style class on GtkWindow OSD Progress Bar"osd" style class on GtkProgressBar max-width: 550sp vertical vertical vertical vertical vertical 12
Item 1
style.dummy
Item 2
style.dummy
Item 3
style.dummy
Status Pages 640 480 360 200 raised view-sidebar-start org.gnome.Adwaita1.Demo-symbolic Compact This status page has the "compact" style class.compact Buttom center True org.gnome.Adwaita1.Demo-symbolic Regular This is a regular status pag.Buttom center max-width: 450sp True True Sidebar 720 480 360 240 140 240 Bluefox False never navigation-sidebar browse Item 1 end 0 Item 2 end 0 Item 3 end 0 Item 4 end 0 Item 5 end 0 Sidebar content Sidebar"navigation-sidebar" style class on GtkListBox or GtkListView.max-width: 400sp True none