GTK+ CSS

Узлы CSS

GTK+ применяет информацию о стиле, найденную в таблице стилей, сопоставляя селекторы с деревом узлов. Каждый узел в дереве имеет имя, состояние и, возможно, классы стилей. Потомки каждого узла упорядочены линейно.

Каждый виджет имеет один или несколько таких узлов CSS, определяющих их имя, состояние, классы стилей и то, как они расположены как дети и братья в общем дереве узлов. Документация по каждому виджету объясняет, какие узлы CSS он имеет.

Таблицы стилей

Основная структура таблиц стилей, понятных GTK+, представляет собой серию инструкций, которые являются либо наборами правил, либо «@-правилами», разделенными пробелами.

Набор правил состоит из селектора и блока объявлений, который представляет собой серию объявлений, заключенных в фигурные скобки. Объявления разделяются точкой с запятой. Несколько селекторов могут совместно использовать один и тот же блок объявлений, поместив все разделители перед блоком, разделенные запятыми.

Импортирование таблиц стилей

GTK+ поддерживает правило CSS @import для загрузки другой таблицы стилей в дополнение к текущей.

Синтаксис для правил @import:

〈import rule〉 = @import [ 〈url〉 | 〈string〉] ;

〈url〉 = url( 〈string〉)

Чтобы узнать больше о правиле @import, вы можете обратиться к модулю каскадирования спецификации CSS.

Селекторы

Селекторы работают очень похоже на селекторы в CSS.

Все виджеты имеют один или несколько узлов CSS с именами элементов и классами стилей. При использовании классов стилей в селекторах, они должны быть префиксрованы точкой. Имена виджетов могут использоваться в селекторах как идентификаторы. При использовании в селекторе, имена виджетов должны быть префиксрованы символом #.

В более сложных ситуациях селекторы могут комбинироваться различными способами. Чтобы потребовать, чтобы узел удовлетворял нескольким условиям, объедините несколько селекторов в один, склеив их. Чтобы сопоставить узел только тогда, когда он встречается внутри другого узла, запишите два селектора друг за другом, разделив их пробелом. Чтобы ограничить сопоставление прямыми дочерними узлами родительского узла, вставьте символ > между двумя селекторами.

Можно выбрать узлы CSS в зависимости от их позиции среди своих братьев, применяя псевдоклассы к селектору, такие как :first-child, :last-child или :nth-child(even). При использовании в селекторах псевдоклассы должны быть префиксрованы символом :.

Другое использование псевдоклассов — сопоставление виджетов в зависимости от их состояния. Доступные псевдоклассы для состояний виджетов — :active, :hover, :disabled, :selected, :focus, :indeterminate, :checked и :backdrop. Кроме того, следующие псевдоклассы не имеют прямого эквивалента как состояния виджета: :dir(ltr) и :dir(rtl) (для направления текста), :link и :visited (для ссылок) и :drop(active) (для выделения целей перетаскивания). Псевдоклассы состояния виджетов могут применяться только к последнему элементу в селекторе.

Для определения эффективного стиля для виджета все сопоставляемые наборы правил объединяются. Как и в CSS, правила применяются по специфичности, поэтому правила, селекторы которых более точно соответствуют узлу, будут иметь приоритет перед другими.

Полный синтаксис селекторов, поддерживаемых GTK+, можно найти в таблице ниже. Основное отличие от CSS состоит в том, что GTK+ в настоящее время не поддерживает селекторы атрибутов.

〈nth-child〉 = even | odd | 〈integer〉 | 〈integer〉n | 〈integer〉n [ + | - ] 〈integer〉

Чтобы узнать больше о селекторах в CSS, прочтите модуль Селекторы спецификации CSS.

Цвета

CSS позволяет указывать цвета различными способами, используя числовые значения или имена из предопределенного списка цветов.

〈color〉 = currentColor | transparent | 〈color name〉 | 〈rgb color〉 | 〈rgba color〉 | 〈hex color〉 | 〈gtk color〉

〈rgb color 〉 = rgb( 〈number〉, 〈number〉, 〈number〉 ) | rgb( 〈percentage〉, 〈percentage〉, 〈percentage〉 )

〈rgba color 〉 = rgba(〈number〉, 〈number〉, 〈number〉, 〈alpha value〉) | rgba( 〈percentage〉, 〈percentage〉, 〈percentage〉, 〈alpha value〉 )

〈hex color〉 = #〈hex digits〉

〈alpha value〉 = 〈number〉

Ключевое слово currentColor разрешает текущее значение свойства color при использовании в другом свойстве и унаследованное значение свойства color при использовании в самом свойстве color.

Ключевое слово transparent можно рассматривать как сокращение для rgba(0,0,0,0).

Список допустимых имен цветов и дополнительную информацию о цветах в CSS см. в модуле Цвета спецификации CSS.

GTK+ добавляет несколько дополнительных способов указания цветов.

〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉| 〈win32 color〉

Первый — ссылка на цвет, определенный правилом @define-color. Синтаксис правил @define-color следующий:

〈define color rule〉 = @define-color 〈name〉 〈color〉

Чтобы сослаться на цвет, определенный правилом @define-color, используйте имя из правила, префикс которого @.

〈symbolic color〉 = @〈name〉

GTK+ также позволяет формировать цветовые выражения, которые могут быть вложенными и обеспечивать богатый язык для определения цветов, которые получены из набора базовых цветов.

〈color expression〉 = ligher(〈color〉) | darker(〈color〉) | shade(〈number〉,〈color〉) | alpha(〈number〉,〈color〉) | mix(〈number〉,〈color〉,〈color〉)

В Windows GTK+ позволяет ссылаться на системные цвета следующим образом:

〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉)

Изображения

CSS позволяет задавать изображения различными способами, для фонов и границ.

〈image〉 = 〈url〉 | 〈crossfade〉 | 〈alternatives〉 | 〈gradient〉 | 〈gtk image〉

〈crossfade〉 = cross-fade( 〈percentage〉, 〈image〉, 〈image〉)

〈alternatives〉 = image([ 〈image〉, ]* [ 〈image〉 | 〈color〉 ])

〈gradient〉 = 〈linear gradient〉 | 〈radial gradient〉

〈linear gradient〉 = [ linear-gradient | repeating-linear-gradient ] (

                      [ [ 〈angle〉 | to 〈side or corner〉 ] , ]?

                      〈color stops〉 )

〈radial gradient〉 = [ radial‑gradient | repeating‑radial‑gradient ] (

                      [ [ 〈shape〉 || 〈size〉 ] [ at 〈position〉 ]? , | at 〈position〉, ]?

                      〈color stops〉 )

〈side or corner〉 = [ left | right ] || [ top | bottom ]

〈color stops〉 =  〈color stop〉 [ , 〈color stop〉]+

〈color stop〉 = 〈color〉 [ 〈percentage〉 | 〈length〉 ]?

〈shape〉 = circle | ellipse

〈size〉 = 〈extent keyword〉 | 〈length〉 | [ 〈length〉 | 〈percentage〉 ]{1,2}

〈extent keyword〉 = closest-size | farthest-side | closest-corner | farthest-corner

Самый простой способ указать изображение в CSS — загрузить файл изображения из URL. CSS не определяет какие форматы файлов поддерживаются; в GTK+ вы можете ожидать, что по крайней мере PNG, JPEG и SVG будут работать. Полный список поддерживаемых форматов изображений определяется доступными загрузчиками изображений gdk-pixbuf и может различаться в разных системах.

Переход с плавным затемнением позволяет указать изображение как промежуточное значение между двумя изображениями. Переходы с плавным затемнением определяются в проекте модуля Изображение уровня 4 спецификации CSS.

Синтаксис image() предоставляет способ указать резервные варианты, на случай если формат изображения не поддерживается. Можно указать несколько резервных изображений, и они будут пробоваться по очереди, пока одно из них не будет загружено успешно. Последнее резервное изображение может быть цветом, который будет отображаться как однотонное изображение.

Градиенты — это изображения, плавно переходящие от одного цвета к другому. CSS предоставляет способы определения повторяющихся и не повторяющихся линейных и радиальных градиентов. Радиальные градиенты могут быть круговыми или ориентированными на оси эллипсами. В дополнение к CSS-градиентам GTK+ имеет свои собственные расширения -gtk-gradient.

Линейный градиент создаётся путём задания линии градиента и затем нескольких цветов, расположенных вдоль этой линии. Линию градиента можно указать с помощью угла или с помощью ключевых слов направления.

Радиальный градиент создаётся путём задания центральной точки и одного или двух радиусов. Радиусы могут быть заданы явно как длины или проценты, или косвенно — с помощью ключевых слов, определяющих, как конечная окружность или эллипс должны быть расположены относительно области, в которой они отрисовываются.

Чтобы узнать больше о градиентах в CSS, в том числе о том, как размещаются цветовые точки на линии градиента и о ключевых словах для задания размеров радиусов, вы можете прочитать модуль Изображение спецификации CSS.

GTK+ расширяет синтаксис CSS для изображений и также использует его для задания значков.

〈gtk image〉 = 〈gtk gradient〉 | 〈themed icon〉 | 〈scaled image〉 | 〈recolored image〉 | 〈win32 theme part〉

GTK+ поддерживает альтернативный синтаксис для линейных и радиальных градиентов (который был реализован до того, как были поддерживаемы CSS-градиенты).

〈gtk gradient〉 = 〈gtk linear gradient〉 | 〈gtk radial gradient〉

〈gtk linear gradient〉 = -gtk-gradient(linear,

                          [ 〈x position〉 〈y position〉 , ]{2}

                          〈gtk color stops〉 )

〈gtk radial gradient〉 = -gtk-gradient(radial,

                          [ 〈x position〉 〈y position〉 , 〈radius〉 , ]{2}

                          〈gtk color stops〉 )

〈x position〉 = left | right | center | 〈number〉

〈y position〉 = top | bottom | center | 〈number〉

〈radius 〉 = 〈number〉

〈gtk color stops〉 = 〈gtk color stop〉 [ , 〈gtk color stop〉 ]+

〈gtk color stop〉 = color-stop( 〈number〉 , 〈color〉 ) | from( 〈color〉 ) | to( 〈color〉 )

Числа, используемые для задания положений x и y, радиусов, а также положений цветовых остановок, должны быть в диапазоне от 0 до 1. Ключевые слова для положений x и y (слева, справа, сверху, снизу, по центру) отображаются в числовых значениях 0, 1 и 0,5 очевидным образом. Цветовые остановки, использующие синтаксис от() и до(), являются сокращениями для цветовых остановок с числовыми позициями 0 и 1 соответственно.

GTK+ имеет полную поддержку загрузки значков из тем значков. К нему можно получить доступ из CSS с помощью синтаксиса -gtk-icontheme.

〈themed icon〉 = -gtk-icontheme( 〈icon name〉 )

Указанное имя значка используется для поиска значка темы с учётом значений свойств -gtk-icon-theme и -gtk-icon-palette. Этот вид изображения используется в основном в качестве значения свойства -gtk-icon-source.

GTK+ поддерживает масштабирование отрисовки на дисплеях с высоким разрешением. Это работает наилучшим образом, если изображения могут указывать варианты нормального и высокого разрешения. Из CSS это можно сделать с помощью синтаксиса -gtk-scaled.

〈scaled image〉 = -gtk-scaled( 〈image〉[, 〈image〉]* )

Хотя -gtk-scaled принимает несколько вариантов более высокого разрешения, на практике он в основном будет использоваться для указания обычного изображения и одного варианта для масштаба 2.

〈recolored image〉 = -gtk-recolored( 〈url〉[, 〈color palette〉] )

Символьные значки из темы значков перекрашиваются в соответствии со свойством -gtk-icon-palette. Перекрашивание иногда требуется для изображений, которые не являются частью темы значков, и синтаксис -gtk-recolor делает это доступным. -gtk-recolor требует URL в качестве первого аргумента. Остальные аргументы задают палитру цветов, которую следует использовать. Если палитра не указана явно, используется текущее значение свойства -gtk-icon-palette.

В Windows GTK+ позволяет ссылаться на части системной темы как на изображения следующим образом:

〈win32 theme part〉 = -gtk-win32-theme-part( 〈name〉, 〈integer〉 〈integer〉

                                              [, [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉]? ) | margins( 〈integer〉{1,4} ) ] ]* )

Переходы

CSS определяет механизм, с помощью которого изменения значений свойств CSS могут быть выполнены постепенно, а не сразу. GTK+ также поддерживает эти переходы.

Чтобы включить переход для свойства, когда правило набора правил вступает в силу, его необходимо указать в свойстве transition-property в этом наборе правил. Можно указать только анимируемые свойства.

Детали перехода можно изменить с помощью свойств transition-duration, transition-timing-function и transition-delay.

Чтобы узнать больше о переходах, вы можете прочитать модуль Переходы спецификации CSS.

Анимации

В дополнение к переходам, которые вызываются изменениями основного дерева узлов, CSS также поддерживает определённые анимации. В то время как переходы указывают, как значения свойств изменяются от одного значения к новому значению, анимации явно определяют промежуточные значения свойств в ключевых кадрах.

Ключевые кадры определяются с помощью правила @-rule, которое содержит один или несколько наборов правил со специальными селекторами. Декларации свойств для неанимируемых свойств игнорируются в этих наборах правил (за исключением свойств анимации).

〈keyframe rule〉 = @keyframes 〈name〉 { 〈animation rule〉 }

〈animation rule〉 = 〈animation selector〉 { 〈declaration〉* }

〈animation selector〉 = 〈single animation selector〉 [ , 〈single animation selector  ]*

〈single animation selector〉 = from | to | 〈percentage〉

Чтобы включить анимацию, имя ключевых кадров должно быть установлено в качестве значения свойства animation-name. Детали анимации можно изменить с помощью свойств animation-time, animation-timing-function, animation-iteration-count и других свойств анимации.

Чтобы узнать больше об анимациях, вы можете прочитать модуль Анимации спецификации CSS.

Связывание с клавишами

Для расширения связывания с клавишами, влияющих на различные виджеты, GTK+ поддерживает правило @binding-set для анализа набора директив bind/unbind. Обратите внимание, что для вступления в силу наборы связываний, определённые таким образом, должны быть связаны с наборами правил путём установки свойства -gtk-key-bindings.

Синтаксис правил @binding-set следующий:

〈binding set rule〉 = @binding-set 〈binding name〉{ [ [ 〈binding〉 | 〈unbinding〉] ; ]* }

〈binding〉 = bind "〈accelerator〉" { 〈signal emission〉* }

〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉[ , 〈argument〉]* ]? }

〈unbinding〉 = unbind "〈accelerator〉" ;

где 〈ускоритель〉 — строка, которую можно проанализировать с помощью gtk_accelerator_parse(), 〈имя сигнала〉 — имя сигнала связывания с клавишей соответствующего виджета, а список 〈аргументов〉 должен соответствовать декларации сигналов.

scale[.fine-tune]
├── marks.top
│   ├── mark
┊   ┊
│   ╰── mark
├── trough
│   ├── slider
│   ├── [highlight]
│   ╰── [fill]
╰── marks.bottom
    ├── mark
    ┊
    ╰── mark