From 84fd7cf7042656de0b24d5c26f4901bc9bb09e57 Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Sat, 18 Apr 2020 02:25:23 -0400 Subject: [PATCH] Shorten CSS docs Fold the two CSS chapters into one, make more compact tables of selectors and properties, and stop explaining general CSS syntax. --- docs/reference/gtk/css-overview.xml | 1777 ++++++++++++++----------- docs/reference/gtk/css-properties.xml | 1460 -------------------- docs/reference/gtk/gtk4-docs.xml | 1 - docs/reference/gtk/meson.build | 1 - 4 files changed, 1032 insertions(+), 2207 deletions(-) delete mode 100644 docs/reference/gtk/css-properties.xml diff --git a/docs/reference/gtk/css-overview.xml b/docs/reference/gtk/css-overview.xml index af2bb27262..627a2b0e76 100644 --- a/docs/reference/gtk/css-overview.xml +++ b/docs/reference/gtk/css-overview.xml @@ -1,4 +1,4 @@ - + @@ -12,49 +12,25 @@ GTK CSS Overview -Overview of CSS in GTK +The language used for style information in GTK - - - - - Overview of CSS in GTK + + CSS in GTK - This chapter describes in detail how GTK uses CSS for styling - and layout. + This chapter describes how GTK uses CSS for styling and layout. + It is not meant to be an explanation of CSS from first principles, + but focuses on listing supported CSS features and differences + between Web CSS and GTK. - We loosely follow the CSS - value definition - specification in the formatting of syntax productions. - - Nonterminals are enclosed in angle backets (〈〉), all other strings that are not listed here are literals - Juxtaposition means all components must occur, in the given order - A double ampersand (&&) means all components must occur, in any order - A double bar (||) means one or more of the components must occur, in any order - A single bar (|) indicates an alternative; exactly one of the components must occur - Brackets ([]) are used for grouping - A question mark (?) means that the preceding component is optional - An asterisk (*) means zero or more copies of the preceding component - A plus (+) means one or more copies of the preceding component - A number in curly braces ({n}) means that the preceding component occurs exactly n times - Two numbers in curly braces ({m,n}) mean that the preceding component occurs at least m times and at most n times - + There is plenty of introductory documentation available that + can be used to learn about CSS in general. In the tables below + we include links to the official specs that can be used to look + up the definition of individual selectors and properties. @@ -95,70 +71,11 @@ scale[.fine-tune] - - Style sheets - - - The basic structure of the style sheets understood by GTK is - a series of statements, which are either rule sets or “@-rules”, - separated by whitespace. - - - - A rule set consists of a selector and a declaration block, which is - a series of declarations enclosed in curly braces. The declarations - are separated by semicolons. Multiple selectors can share the same - declaration block, by putting all the separators in front of the block, - separated by commas. - - - - A rule set with two selectors - - - - - - - Importing style sheets - - - GTK supports the CSS @import rule, in order to load another - style sheet in addition to the currently parsed one. - - - - The syntax for @import rules is as follows: - - -〈import rule〉 = @import [ 〈url〉 | 〈string〉 ] -〈url〉 = url( 〈string〉 ) - - - An example for using the @import rule - - - - - To learn more about the @import rule, you can read the - Cascading - module of the CSS specification. - - - - Selectors - Selectors work very similar to the way they do in CSS. + Selectors work very similar to the way they do on the web. @@ -168,730 +85,1100 @@ button, entry { in a selector, widget names must be prefixed with a # character. - - In more complicated situations, selectors can be combined in various ways. - To require that a node satisfies several conditions, combine several selectors - into one by concatenating them. To only match a node when it occurs inside some - other node, write the two selectors after each other, separated by whitespace. - To restrict the match to direct children of the parent node, insert a > - character between the two selectors. - - - - Theme labels that are descendants of a window - - - - - Theme notebooks, and anything within - - - - - Theme combo boxes, and entries that are direct children of a notebook - entry { - color: @fg_color; - background-color: #1209a2; -} -]]> - - - - Theme any widget within a GtkBox - - - - - Theme a label named title-label - - - - - Theme any widget named main-entry - - - - - Theme all widgets with the style class entry - - - - - Theme the entry of a GtkSpinButton - - - - - It is possible to select CSS nodes depending on their position amongst - their siblings by applying pseudo-classes to the selector, like :first-child, - :last-child or :nth-child(even). When used in selectors, pseudo-classes - must be prefixed with a : character. - - - - Theme labels in the first notebook tab - - - - - Another use of pseudo-classes is to match widgets depending on their - state. The available pseudo-classes for widget states are :active, :hover - :disabled, :selected, :focus, :indeterminate, :checked and :backdrop. - In addition, the following pseudo-classes don't have a direct equivalent - as a widget state: :dir(ltr) and :dir(rtl) (for text direction), :link and - :visited (for links), :drop(active) (for highlighting drop targets) and - :focus-visible (for visible focus indication). Widget state pseudo-classes - may only apply to the last element in a selector. - - - - Theme pressed buttons - - - - - Theme buttons with the mouse pointer over it - - - - - Theme insensitive widgets - - - - - Theme checkbuttons that are checked - - - - - Theme focused labels - - - - - Theme indeterminate checkbuttons - - - - - To determine the effective style for a widget, all the matching rule - sets are merged. As in CSS, rules apply by specificity, so the rules - whose selectors more closely match a node will take precedence - over the others. - - - - The full syntax for selectors understood by GTK can be found in the - table below. The main difference to CSS is that GTK does not currently - support attribute selectors. - - - Selector syntax - + GTK CSS Selectors + - PatternMatchesReferenceNotes + PatternReferenceNotes - * - any node - CSS + * + CSS Selectors Level 3 - E - any node with name E - CSS + E + CSS Selectors Level 3 - E.class - any E node with the given style class - CSS + E.class + CSS Selectors Level 3 + - E#id - any E node with the given ID - CSS + E#id + CSS Selectors Level 3 GTK uses the widget name as ID - E:nth-child(〈nth-child〉) - any E node which is the n-th child of its parent node - CSS + E:nth-child(nth-child) + CSS Selectors Level 3 - E:nth-last-child(〈nth-child〉) - any E node which is the n-th child of its parent node, counting from the end - CSS + E:nth-last-child(nth-child) + CSS Selectors Level 3 - E:first-child - any E node which is the first child of its parent node - CSS + E:first-child + CSS Selectors Level 3 - E:last-child - any E node which is the last child of its parent node - CSS + E:last-child + CSS Selectors Level 3 - E:only-child - any E node which is the only child of its parent node - CSS + E:only-child + CSS Selectors Level 3 Equivalent to E:first-child:last-child - E:link, E:visited - any E node which represents a hyperlink, not yet visited (:link) or already visited (:visited) - CSS + E:link, E:visited + CSS Selectors Level 3 Corresponds to GTK_STATE_FLAG_LINK and GTK_STATE_FLAGS_VISITED - E:active, E:hover, E:focus - any E node which is part of a widget with the corresponding state - CSS - Correspond to GTK_STATE_FLAG_ACTIVE, GTK_STATE_FLAG_PRELIGHT and GTK_STATE_FLAGS_FOCUSED respectively + E:active, E:hover, E:focus + CSS Selectors Level 3 + Correspond to GTK_STATE_FLAG_ACTIVE, GTK_STATE_FLAG_PRELIGHT, GTK_STATE_FLAGS_FOCUSED - E:disabled - any E node which is part of a widget which is disabled - CSS + E:focus-within + CSS Selectors Level 4 + Set on all ancestors of the focus widget, unlike CSS + + + E:focus-visible + CSS Selectors Level 4 + Set on focus widget and all ancestors, unlike CSS + + + E:disabled + CSS Selectors Level 3 Corresponds to GTK_STATE_FLAG_INSENSITIVE - E:checked - any E node which is part of a widget (e.g. radio- or checkbuttons) which is checked - CSS + E:checked + CSS Selectors Level 3 Corresponds to GTK_STATE_FLAG_CHECKED - E:indeterminate - any E node which is part of a widget (e.g. radio- or checkbuttons) which is in an indeterminate state - CSS3, - CSS4 + E:indeterminate + CSS3 Selectors Level 3 Corresponds to GTK_STATE_FLAG_INCONSISTENT - E:backdrop, E:selected - any E node which is part of a widget with the corresponding state + E:backdrop, E:selected Corresponds to GTK_STATE_FLAG_BACKDROP, GTK_STATE_FLAG_SELECTED - E:not(〈selector〉) - any E node which does not match the simple selector 〈selector〉 - CSS + E:not(selector) + CSS Selectors Level 3 - E:dir(ltr), E:dir(rtl) - any E node that has the corresponding text direction - CSS4 + E:dir(ltr), E:dir(rtl) + CSS Selectors Level 4 - E:drop(active) - any E node that is an active drop target for a current DND operation - CSS4 + E:drop(active) + CSS Selectors Level 4 - E F - any F node which is a descendent of an E node - CSS + E F + CSS Selectors Level 3 - E > F - any F node which is a child of an E node - CSS + E > F + CSS Selectors Level 3 - E ~ F - any F node which is preceded by an E node - CSS + E ~ F + CSS Selectors Level 3 - E + F - any F node which is immediately preceded by an E node - CSS + E + F + CSS Selectors Level 3
-〈nth-child〉 = even | odd | 〈integer〉 | 〈integer〉n | 〈integer〉n [ + | - ] 〈integer〉 - - - - To learn more about selectors in CSS, read the - Selectors - module of the CSS specification. - - - - - - Colors - - - CSS allows to specify colors in various ways, using numeric - values or names from a predefined list of colors. - - -〈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〉, clamped to values between 0 and 1 - - - - The keyword currentColor resolves to the current value of the - color property when used in another property, and to the inherited value - of the color property when used in the color property itself. - - - - The keyword transparent can be considered a shorthand for rgba(0,0,0,0). - - - - For a list of valid color names and for more background on colors in - CSS, see the Color - module of the CSS specification. - - - - Specifying colors in various ways - - - - - GTK adds several additional ways to specify colors. - - -〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉 - - - - The first is a reference to a color defined via a @define-color rule. - The syntax for @define-color rules is as follows: - - -〈define color rule〉 = @define-color 〈name〉 〈color〉 - - - - To refer to the color defined by a @define-color rule, - use the name from the rule, prefixed with @. - - -〈symbolic color〉 = @〈name〉 - - - An example for defining colors - - - - - GTK also supports color expressions, which allow colors to be transformed - to new ones and can be nested, providing a rich language to define colors. - Color expressions resemble functions, taking 1 or more colors and in some - cases a number as arguments. - - - shade() leaves the color unchanged when the number is 1 and transforms it - to black or white as the number approaches 0 or 2 respectively. For mix(), - 0 or 1 return the unaltered 1st or 2nd color respectively; numbers between - 0 and 1 return blends of the two; and numbers below 0 or above 1 intensify - the RGB components of the 1st or 2nd color respectively. alpha() takes a - number from 0 to 1 and applies that as the opacity of the supplied color. - - -〈color expression〉 = lighter( 〈color〉 ) | darker( 〈color〉 ) | shade( 〈color〉, 〈number〉 ) | - alpha( 〈color〉, 〈number〉 ) | mix( 〈color〉, 〈color〉, 〈number〉 ) - - - - - - Images - - - CSS allows to specify images in various ways, for backgrounds - and borders. - - -〈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 - - - - The simplest way to specify an image in CSS is to load an image - file from a URL. CSS does not specify anything about supported file - formats; within GTK, you can expect at least PNG, JPEG and SVG to - work. The full list of supported image formats is determined by the - available gdk-pixbuf image loaders and may vary between systems. - - - - Loading an image file - - - - - A crossfade lets you specify an image as an intermediate between two - images. Crossfades are specified in the draft of the level 4 - Image - module of the CSS specification. - - - - - - - Crossfading two images - - - - - The image() syntax provides a way to specify fallbacks in case an image - format may not be supported. Multiple fallback images can be specified, - and will be tried in turn until one can be loaded successfully. The - last fallback may be a color, which will be rendered as a solid color - image. - - - - Image fallback - - - - - Gradients are images that smoothly fades from one color to another. CSS - provides ways to specify repeating and non-repeating linear and radial - gradients. Radial gradients can be circular, or axis-aligned ellipses. - - - - A linear gradient is created by specifying a gradient line and then several - colors placed along that line. The gradient line may be specified using - an angle, or by using direction keywords. - - - - Linear gradients - - - - - A radial gradient is created by specifying a center point and one or two - radii. The radii may be given explicitly as lengths or percentages or - indirectly, by keywords that specify how the end circle or ellipsis - should be positioned relative to the area it is derawn in. - - - - Radial gradients - - - - - To learn more about gradients in CSS, including details of how color stops - are placed on the gradient line and keywords for specifying radial sizes, - you can read the - Image - module of the CSS specification. - - - - GTK extends the CSS syntax for images and also uses it for specifying icons. - - -〈gtk image〉 = 〈themed icon〉 | 〈scaled image〉 | 〈recolored image〉 - - - - GTK has extensive support for loading icons from icon themes. It is - accessible from CSS with the -gtk-icontheme syntax. - - -〈themed icon〉 = -gtk-icontheme( 〈icon name〉 ) - - - - The specified icon name is used to look up a themed icon, while taking - into account the values of the -gtk-icon-theme and -gtk-icon-palette - properties. This kind of image is mainly used as value of the - -gtk-icon-source property. - - - - Using themed icons in CSS - - - - - GTK supports scaled rendering on hi-resolution displays. This works - best if images can specify normal and hi-resolution variants. From - CSS, this can be done with the -gtk-scaled syntax. - - -〈scaled image〉 = -gtk-scaled( 〈image〉[ , 〈image〉 ]* ) - - - - While -gtk-scaled accepts multiple higher-resolution variants, in - practice, it will mostly be used to specify a regular image and one - variant for scale 2. - - - - Scaled images in CSS - - - -〈recolored image〉 = -gtk-recolor( 〈url〉 [ , 〈color palette〉 ] ) - - - - Symbolic icons from the icon theme are recolored according to the - -gtk-icon-palette property. The recoloring is sometimes needed for images - that are not part of an icon theme, and the -gtk-recolor syntax makes - this available. -gtk-recolor requires a url as first argument. The - remaining arguments specify the color palette to use. If the palette - is not explicitly specified, the current value of the -gtk-icon-palette - property is used. - - - - Recoloring an image - - - - - - - Transitions - - - CSS defines a mechanism by which changes in CSS property values can - be made to take effect gradually, instead of all at once. GTK supports - these transitions as well. - - - - To enable a transition for a property when a rule set takes effect, it - needs to be listed in the transition-property property in that rule set. - Only animatable properties can be listed in the transition-property. - - - - The details of a transition can modified with the transition-duration, - transition-timing-function and transition-delay properties. - - - - To learn more about transitions, you can read the - Transitions - module of the CSS specification. - - - - - - Animations - - - In addition to transitions, which are triggered by changes of the underlying - node tree, CSS also supports defined animations. While transitions specify how - property values change from one value to a new value, animations explicitly - define intermediate property values in keyframes. - - - - Keyframes are defined with an @-rule which contains one or more of rule sets - with special selectors. Property declarations for nonanimatable properties - are ignored in these rule sets (with the exception of animation properties). - - -〈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〉 - - - - To enable an animation, the name of the keyframes must be set as the value - of the animation-name property. The details of the animation can modified - with the animation-duration, animation-timing-function, animation-iteration-count - and other animation properties. - - - - A CSS animation - - - - - To learn more about animations, you can read the - Animations - module of the CSS specification. - - + + + + GTK CSS Properties + + + GTK supports CSS properties and shorthands as far as they can be applied + in the context of widgets, and adds its own properties only when needed. + All GTK-specific properties have a -gtk prefix. + + + + Basic types + + + All properties support the following keywords: inherit, initial, unset, with + the same meaning as defined in the CSS Cascading and Inheritance spec. + + + + The following units are supported for basic datatypes: + + + + + Length px, pt, em, ex, rem, pc, in, cm, mm, calc() + + + Percentage %, calc() + + + Angle deg | grad | turn, calc() + + + Time s | ms, calc() + + + + + Length values with the em or ex units are resolved using the font + size value, unless they occur in setting the font-size itself, in + which case they are resolved using the inherited font size value. + + + + The rem unit is resolved using the initial font size value, which is + not quite the same as the CSS definition of rem. + + + + The calc() notation adds considerable expressive power. There are limits + on what types can be combined in such an expression (e.g. it does not make + sense to add a number and a time). For the full details, see the + CSS3 Values and + Units spec. + + + + A common pattern among shorthand properties (called 'four sides') is one + where one to four values can be specified, to determine a value for each + side of an area. In this case, the specified values are interpreted as + follows: + + + 4 values: top right bottom left + + + 3 values: top horizontal bottom + + + 2 values: vertical horizontal + + + 1 value: all + + + + + + + + Colors + + + GTK extends the CSS syntax with several additional ways to specify colors. + + + The first is a reference to a color defined via a @define-color rule in CSS. + The syntax for @define-color rules is as follows: + + @define-color Name Color + + + + To refer to the color defined by a @define-color rule, prefix the name with @. + + + GTK also supports color expressions, which allow colors to be transformed to + new ones. Color expressions can be nested, providing a rich language to + define colors. Color expressions resemble functions, taking 1 or more colors + and in some cases a number as arguments. + + lighter(Color) produces a brigher variant of Color + darker(Color) produces a darker variant of Color + shade(Color, Number) changes the lightness of Color. The number ranges from 0 for black to 2 for white. + alpha(Color, Number) replaces the alpha value of color with number (between 0 and 1) + mix(Color1, Color2, Number) interpolates between the two colors + + + + + + Images + + GTK extends the CSS syntax for images and also uses it for specifying icons. + To load a themed icon, use + + -gtk-icontheme(Name) + + The specified icon name is used to look up a themed icon, while taking into + account the values of the -gtk-icon-theme and -gtk-icon-palette properties. + This kind of image is mainly used as value of the -gtk-icon-source property. + + + Symbolic icons from the icon theme are recolored according to the + -gtk-icon-palette property, which defines a list of named colors. + The recognized names for colors in symbolic icons are error, warning + and success. The default palette maps these three names to symbolic + colors with the names @error_color, @warning_color and @success_color + respectively. The syntax for defining a custom palette is a comma-separated + list of name-color pairs, e.g. + + success blue, warning #fc3, error magenta + + + + Recoloring is sometimes needed for images that are not part of an icon theme, + and the + + -gtk-recolor(uri, palette) + + syntax makes this available. -gtk-recolor requires a url as first argument. + The remaining arguments specify the color palette to use. If the palette is + not explicitly specified, the current value of the -gtk-icon-palette property + is used. + + + GTK supports scaled rendering on hi-resolution displays. This works best if + images can specify normal and hi-resolution variants. From CSS, this can be + done with + + -gtk-scaled(Image1, Image2) + + + + + + + GTK CSS Properties + + + + + + + Color and Filter Properties + NameReferenceNotes + + + + color + + CSS Color Level 3 + + + + + opacity + + CSS Color Level 3 + + + + + filter + + CSS Filter Effects Level 1 + + + + Font Properties + + font-family + + CSS Fonts Level 3 + + defaults to gtk-font-name setting + + + font-size + + CSS Fonts Level 3 + + defaults to gtk-font-name setting + + + font-style + + CSS Fonts Level 3 + + + + + font-variant + + CSS Fonts Level 3 + + only CSS2 values supported + + + font-weight + + CSS Fonts Level 3 + + + + + font-stretch + + CSS Fonts Level 3 + + + + + font-kerning + + CSS Fonts Level 3 + + + + + font-variant-ligatures + + CSS Fonts Level 3 + + + + + font-variant-position + + CSS Fonts Level 3 + + + + + font-variant-caps + + CSS Fonts Level 3 + + + + + font-variant-numeric + + CSS Fonts Level 3 + + + + + font-variant-alternates + + CSS Fonts Level 3 + + + + + font-variant-east-asian + + CSS Fonts Level 3 + + + + + font-feature-settings + + CSS Fonts Level 3 + + + + + font-variation-settings + + CSS Fonts Level 4 + + + + + -gtk-dpi + Number + defaults to screen resolution + + + Font Shorthands + + font + + CSS Fonts Level 3 + + CSS allows line-height, etc + + + font-variant + + CSS Fonts Level 3 + + + + Text Caret Properties + + caret-color + + CSS Basic User Interface Level 3 + + CSS allows an auto value + + + -gtk-secondary-caret-color + Color + used for the secondary caret in bidirectional text + + Text Decoration Properties + + letter-spacing + + CSS Text Level 3 + + + + + text-decoration-line + + CSS Text Decoration Level 3 + + CSS allows overline + + + text-decoration-color + + CSS Text Decoration Level 3 + + + + + text-decoration-style + + CSS Text Decoration Level 3 + + CSS allows dashed and dotted + + + text-shadow + + CSS Text Decoration Level 3 + + + + Text Decoration Shorthands + + text-decoration + + CSS Text Decoration Level 3 + + + + Icon Properties + + -gtk-icon-source + Image, builtin or none + used for builtin icons in buttons and expanders + + + -gtk-icon-theme + Theme name + icon theme to use with -gtk-icontheme() + + + -gtk-icon-size + Length + size used for builtin icons in buttons and expanders + + + -gtk-icon-style + requested, regular or symbolic + preferred style for application-loaded icons + + + -gtk-icon-transform + + Transform list or none + + applied to builtin and application-loaded icons + + + -gtk-icon-palette + Color palette, as explained above + used to recolor symbolic icons + + + -gtk-icon-shadow + + Shadow or none + + applied to builtin and application-loaded icons + + + -gtk-icon-filter + + Filter value list or none + + applied to builtin and application-loaded icons + + + Box Properties + + transform + + CSS Transforms Level 2 + + + + + min-width + + CSS Box Model Level 3 + + CSS allows percentages + + + min-height + + CSS Box Model Level 3 + + CSS allows percentages + + + margin-top + + CSS Box Model Level 3 + + CSS allows percentages or auto + + + margin-right + + CSS Box Model Level 3 + + CSS allows percentages or auto + + + margin-bottom + + CSS Box Model Level 3 + + CSS allows percentages or auto + + + margin-left + + CSS Box Model Level 3 + + CSS allows percentages or auto + + + padding-top + + CSS Box Model Level 3 + + CSS allows percentages + + + padding-right + + CSS Box Model Level 3 + + CSS allows percentages + + + padding-bottom + + CSS Box Model Level 3 + + CSS allows percentages + + + padding-left + + CSS Box Model Level 3 + + CSS allows percentages + + + Box Shorthands + + margin + + CSS Box Model Level 3 + + a 'four sides' property + + + padding + + CSS Box Model Level 3 + + a 'four sides' property + + + Border Properties + + border-top-width + + CSS Backgrounds and Borders Level 3 + CSS allows other values + + + border-right-width + + CSS Backgrounds and Borders Level 3 + + CSS allows other values + + + border-bottom-width + + CSS Backgrounds and Borders Level 3 + + CSS allows other values + + + border-left-width + + CSS Backgrounds and Borders Level 3 + + CSS allows other values + + + border-top-style + + CSS Backgrounds and Borders Level 3 + + + + + border-right-style + + CSS Backgrounds and Borders Level 3 + + + + + border-bottom-style + + CSS Backgrounds and Borders Level 3 + + + + + border-left-style + + CSS Backgrounds and Borders Level 3 + + + + + border-top-right-radius + + CSS Backgrounds and Borders Level 3 + + + + + border-bottom-right-radius + + CSS Backgrounds and Borders Level 3 + + + + + border-bottom-left-radius + + CSS Backgrounds and Borders Level 3 + + + + + border-top-left-radius + + CSS Backgrounds and Borders Level 3 + + + + + border-top-color + + CSS Backgrounds and Borders Level 3 + + + + + border-right-color + + CSS Backgrounds and Borders Level 3 + + + + + border-bottom-color + + CSS Backgrounds and Borders Level 3 + + + + + border-left-color + + CSS Backgrounds and Borders Level 3 + + + + + border-image-source + + CSS Backgrounds and Borders Level 3 + + + + + border-image-repeat + + CSS Backgrounds and Borders Level 3 + + + + + border-image-slice + + CSS Backgrounds and Borders Level 3 + + a 'four sides' property + + + border-image-width + + CSS Backgrounds and Borders Level 3 + + a 'four sides' property + + + Border Shorthands + + border-width + + CSS Backgrounds and Borders Level 3 + + a 'four sides' property + + + border-style + + CSS Backgrounds and Borders Level 3 + + a 'four sides' property + + + border-color + + CSS Backgrounds and Borders Level 3 + + a 'four sides' property + + + border-top + + CSS Backgrounds and Borders Level 3 + + + + + border-right + + CSS Backgrounds and Borders Level 3 + + + + + border-bottom + + CSS Backgrounds and Borders Level 3 + + + + + border-left + + CSS Backgrounds and Borders Level 3 + + + + + border + + CSS Backgrounds and Borders Level 3 + + + + + border-radius + + CSS Backgrounds and Borders Level 3 + + + + + border-image + + CSS Backgrounds and Borders Level 3 + + + + + Outline Properties + + outline-style + + CSS Basic User Interface Level 3 + + initial value is none, auto is not supported + + + outline-width + + CSS Basic User Interface Level 3 + + + + + outline-color + + CSS Basic User Interface Level 3 + + initial value is currentColor, invert is not supported + + + outline-offset + + CSS Basic User Interface Level 3 + + + + + Outline Shorthands + + outline + + CSS Basic User Interface Level 3 + + + + + Background Properties + + background-color + + CSS Backgrounds and Borders Level 3 + + + + + background-clip + + CSS Backgrounds and Borders Level 3 + + + + + background-origin + + CSS Backgrounds and Borders Level 3 + + + + + background-size + + CSS Backgrounds and Borders Level 3 + + + + + background-position + + CSS Backgrounds and Borders Level 3 + + + + + background-repeat + + CSS Backgrounds and Borders Level 3 + + + + + background-image + + CSS Backgrounds and Borders Level 3 + + not supported: urls without quotes, colors in crossfades + + + box-shadow + + CSS Backgrounds and Borders Level 3 + + + + + background-blend-mode + + CSS Compositing and Blending Level 1 + + only affects multiple backgrounds + + + Background Shorthands + + background + + CSS Backgrounds and Borders Level 3 + + + + + Transition Properties + + transition-property + + CSS Transitions + + + + + transition-duration + + CSS Transitions + + + + + transition-timing-function + + CSS Transitions + + + + + transition-delay + + CSS Transitions + + + + + Transition Shorthands + + transition + + CSS Transitions + + + + + Animation Properties + + animation-name + + CSS Animations Level 1 + + + + + animation-duration + + CSS Animations Level 1 + + + + + animation-timing-function + + CSS Animations Level 1 + + + + + animation-iteration-count + + CSS Animations Level 1 + + + + + animation-direction + + CSS Animations Level 1 + + + + + animation-play-state + + CSS Animations Level 1 + + + + + animation-delay + + CSS Animations Level 1 + + + + + animation-fill-mode + + CSS Animations Level 1 + + + + + Animation Shorthands + + animation + + CSS Animations Level 1 + + + + + Table-related Properties + + border-spacing + + CSS Table Level 3 + + respected by GtkBox and GtkGrid + + + +
+ diff --git a/docs/reference/gtk/css-properties.xml b/docs/reference/gtk/css-properties.xml deleted file mode 100644 index d8366ef4c4..0000000000 --- a/docs/reference/gtk/css-properties.xml +++ /dev/null @@ -1,1460 +0,0 @@ - - - - -GTK CSS Properties -3 -GTK Library - - - -GTK CSS Properties - -CSS Properties in GTK - - - - - - - - Supported CSS Properties - - - GTK supports CSS properties and shorthands as far as they can be applied - in the context of widgets, and adds its own properties only when needed. - All GTK-specific properties have a -gtk prefix. - - - - All properties support the following keywords: inherit, initial, unset, with - the same meaning as in CSS. - - - - The following basic datatypes are used throughout: - - -〈length〉 = 〈number〉 [ px | pt | em | ex |rem | pc | in | cm | mm ] | 〈calc expression〉 -〈percentage〉 = 〈number〉 % | 〈calc expression〉 -〈angle〉 = 〈number〉 [ deg | grad | turn ] | 〈calc expression〉 -〈time〉 = 〈number〉 [ s | ms ] | 〈calc expression〉 - - - - Length values with the em or ex units are resolved using the font - size value, unless they occur in setting the font-size itself, in - which case they are resolved using the inherited font size value. - - - - The rem unit is resolved using the initial font size value, which is - not quite the same as the CSS definition of rem. - - -〈calc expression〉 = calc( 〈calc sum〉 ) -〈calc sum〉 = 〈calc product〉 [ [ + | - ] 〈calc product〉 ]* -〈calc product〉 = 〈calc value〉 [ * 〈calc value〉 | / 〈number〉 ]* -〈calc value〉 = 〈number〉 | 〈length〉 | 〈percentage〉 | 〈angle〉 | 〈time〉 | ( 〈calc sum〉 ) - - - - The calc() notation adds considerable expressive power. There are limits - on what types can be combined in such an expression (e.g. it does not make - sense to add a number and a time). For the full details, see the - CSS3 Values and - Units spec. - - - - A common pattern among shorthand properties (called 'four sides') is one - where one to four values can be specified, to determine a value for each - side of an area. In this case, the specified values are interpreted as - follows: - - - 4 values: top right bottom left - - - 3 values: top horizontal bottom - - - 2 values: vertical horizontal - - - 1 value: all - - - - - - Color and Filter Properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - color - 〈color〉 - rgba(1,1,1,1) - ✓ - ✓ - CSS2, - CSS3 - - - - opacity - 〈alpha value〉 - 1 - - ✓ - CSS3 - - - - filter - none | 〈filter-function-list〉 - none - - ✓ - CSS3 - - - - -
- -〈filter-function-list〉 = [ 〈filter〉]+ -〈filter〉 = brightness( 〈number〉 ) | - contrast( 〈number〉 ) | - grayscale( 〈number〉 ) | - hue-rotate( 〈number〉 ) | - invert( 〈number〉 ) | - opacity( 〈number〉 ) | - saturate( 〈number〉 ) | - sepia( 〈number〉 ) - - - - The color property specifies the color to use for text, icons and other - foreground rendering. The opacity property specifies the opacity that is - used to composite the widget onto its parent widget. The filter property - specifies filters to be applied to the rendering. - - - - Font Properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - font-family - 〈family name〉 [ , 〈family name〉 ]* - gtk-font-name setting - ✓ - - CSS2, - CSS3 - - - - font-size - 〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉 - gtk-font-name setting - ✓ - ✓ - CSS2, - CSS3 - - - - font-style - normal | oblique | italic - normal - ✓ - - CSS2, - CSS3 - - - - font-variant - normal | small-caps - normal - ✓ - - CSS2, - CSS3 - only CSS2 values supported - - - font-weight - normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 - normal - ✓ - ✓ - CSS2, - CSS3 - normal is synonymous with 400, bold with 700 - - - font-stretch - ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded - normal - ✓ - - CSS3 - - - - -gtk-dpi - 〈number〉 - screen resolution - ✓ - ✓ - - - - - font-kerning - auto | normal | none - auto - ✓ - - CSS3 - - - - font-variant-ligatures - normal | none | [ 〈common-lig-values〉|| 〈discretionary-lig-values〉|| 〈historical-lig-values〉|| 〈contextual-alt-values〉] - normal - ✓ - - CSS3 - - - - font-variant-position - normal | sub | super - normal - ✓ - - CSS3 - - - - font-variant-caps - normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps - normal - ✓ - - CSS3 - - - - font-variant-numeric - normal | [ 〈numeric-figure-values〉|| 〈numeric-spacing-values〉|| 〈numeric-fraction-values〉|| ordinal || slashed-zero ] - normal - ✓ - - CSS3 - - - - font-variant-alternates - normal | [ stylistic(〈feature-value-name〉) || historical-forms || styleset(〈feature-value-name〉#) || character-variant(〈feature-value-name〉#) || swash(〈feature-value-name〉) || ornaments(〈feature-value-name〉) || annotation(〈feature-value-name〉) ] - normal - ✓ - - CSS3 - - - - font-variant-east-asian - normal | [ 〈east-asian-variant-values〉 || 〈east-asian-width-values〉 || ruby ] - normal - ✓ - - CSS3 - - - - font-feature-settings - normal | 〈feature-tag-value〉# - normal - ✓ - > - CSS3 - - - - font-variation-settings - normal | [ 〈string〉〈number〉]# - normal - ✓ - ✓ - CSS4 - - - - - - - ShorthandValueInitialReferenceNotes - - - - font - [ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉 - see individual properties - CSS2, -CSS3 - CSS allows line-height, etc - - - font-variant - normal | none | [ 〈common-lig-values〉 || 〈discretionary-lig-values〉 || 〈historical-lig-values〉 || 〈contextual-alt-values〉 || stylistic(>〈feature-value-name〉) || historical-forms || styleset(〈feature-value-name〉 #) || character-variant(〈feature-value-name〉 #) || swash(〈feature-value-name〉) || ornaments(〈feature-value-name〉) || annotation(〈feature-value-name〉) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || 〈numeric-figure-values〉 || 〈numeric-spacing-values〉 || 〈numeric-fraction-values〉 || ordinal || slashed-zero || 〈east-asian-variant-values〉 || 〈east-asian-width-values〉 || ruby ] - see individual properties - CSS3 - - - - -
- -〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large -〈relative size〉 = larger | smaller -〈common-lig-values〉 = [ common-ligatures| no-common-ligatures ] -〈discretionary-lig-values〉 = [ discretionary-ligatures | no-discretionary-ligatures ] -〈historical-lig-values〉 = [ historical-ligatures | no-historical-ligatures ] -〈contextual-alt-values〉 = [ contextual | no-contextual ] -〈numeric-figure-values〉 = [ lining-nums | oldstyle-nums ] -〈numeric-spacing-values〉 = [ proportional-nums | tabular-nums ] -〈numeric-fraction-values〉 = [ diagonal-fractions | stacked-fractions ] -〈east-asian-variant-values〉 = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ] -〈east-asian-width-values〉 = [ full-width | proportional-width ] -〈feature-tag-value〉 = 〈string〉[ 〈integer〉| on | off ]? - - - - The font properties determine the font to use for rendering text. Relative - font sizes and weights are resolved relative to the inherited value for - these properties. - - - - Text caret properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - caret-color - 〈color〉 - currentColor - ✓ - ✓ - CSS3 - CSS allows an auto value - - - -gtk-secondary-caret-color - 〈color〉 - currentColor - ✓ - ✓ - - Used for the secondary caret in bidirectional text - - - -
- - - The caret properties provide a way to change the appearance of the insertion - caret in editable text. - - - - Text decoration properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - letter-spacing - 〈length〉 - 0px - ✓ - ✓ - CSS3 - - - - text-decoration-line - none | underline | line-through - none - - - CSS2, - CSS3 - CSS allows overline - - - text-decoration-color - 〈color〉 - currentColor - - ✓ - CSS3 - - - - text-decoration-style - solid | double | wavy - solid - - - CSS3 - CSS allows dashed and dotted - - - text-shadow - none | 〈shadow〉 - none - ✓ - ✓ - CSS3 - - - - - - - ShorthandValueInitialReferenceNotes - - - - text-decoration - 〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉 - see individual properties - CSS3 - - - - -
- -〈shadow〉 = 〈length〉 〈length〉 〈color〉? - - - - The text decoration properties determine whether to apply extra decorations - when rendering text. - - - - Icon Properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - -gtk-icon-source - builtin | 〈image〉 | none - builtin - - ✓ - - - - - -gtk-icon-transform - none | 〈transform〉+ - none - - ✓ - - - - - -gtk-icon-style - requested | regular | symbolic - requested - ✓ - - - Determines the preferred style for application-loaded icons - - - -gtk-icon-theme - 〈name〉 - current icon theme - ✓ - - - The icon theme to use with -gtk-icontheme(). Since 3.20 - - - -gtk-icon-palette - 〈color palette〉 - default - ✓ - ✓ - - Used to recolor symbolic icons (both application-loaded and from -gtk-icontheme()). Since 3.20 - - - -gtk-icon-shadow - none | 〈shadow〉 - none - ✓ - ✓ - - - - - -gtk-icon-filter - none | 〈filter-function-list〉 - none - ✓ - - CSS3 - - - - -gtk-icon-size - 〈length〉 - none - ✓ - - - Determines the size at which icons are displayed. See GtkIconSize - - - -
- -〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | - matrix3d( 〈number〉 [ , 〈number〉 ]{15} ) | - translate( 〈length〉, 〈length〉 ) | translate3d( 〈length〉, 〈length〉, 〈length〉 ) | - translateX( 〈length〉 ) | translateY( 〈length〉 ) | translateZ( 〈length〉 ) | - scale( 〈number〉 [ , 〈number〉 ]? ) | scale3d( 〈number〉, 〈number〉, 〈number〉 ) | - scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | scaleZ( 〈number〉 ) | - rotate( 〈angle〉 ) | rotate3d( 〈number〉, 〈number〉, 〈number〉, 〈angle〉 ) | - rotateX( 〈angle〉 ) | rotateY( 〈angle〉 ) | rotateZ( 〈angle〉 ) | - skew( 〈angle〉 [ , 〈angle〉 ]? ) | skewX( 〈angle〉 ) | skewY( 〈angle〉 ) -〈color palette〉 = default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]* - - - - The -gtk-icon-source property is used by widgets that are rendering 'built-in' - icons, such as arrows, expanders, spinners, checks or radios. - - - - The -gtk-icon-style property determines the preferred style for - application-provided icons. - - - - The -gtk-icon-transform and -gtk-icon-shadow properties affect the rendering - of both built-in and application-provided icons. - - - - -gtk-icon-palette defines a color palette for recoloring symbolic - icons. The recognized names for colors in symbolic icons are error, - warning and success. The default palette maps these three names to - symbolic colors with the names @error_color, @warning_color and - @success_color respectively. - - - - Box properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - transform - none | 〈transform〉+ - none - - ✓ - CSS3, - 3D - - - - min-width - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows percentages - - - min-height - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows percentages - - - margin-top - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows percentages or auto - - - margin-right - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows percentages or auto - - - margin-bottom - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows percentages or auto - - - margin-left - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows percentages or auto - - - padding-top - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows percentages - - - padding-right - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows percentages - - - padding-bottom - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows percentages - - - padding-left - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows percentages - - - - - - ShorthandValueInitialReferenceNotes - - - - margin - 〈length〉{1,4} - see individual properties - CSS2, - CSS3 - a 'four sides' shorthand - - - padding - 〈length〉{1,4} - see individual properties - CSS2, - CSS3 - a 'four sides' shorthand - - - -
- - - Border properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - border-top-width - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows other values - - - border-right-width - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows other values - - - border-bottom-width - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows other values - - - border-left-width - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - CSS allows other values - - - border-top-style - 〈border style〉 - none - - - CSS2, - CSS3 - - - - border-right-style - 〈border style〉 - none - - - CSS2, - CSS3 - - - - border-bottom-style - 〈border style〉 - none - - - CSS2, - CSS3 - - - - border-left-style - 〈border style〉 - none - - - CSS2, - CSS3 - - - - border-top-right-radius - 〈corner radius〉 - 0 - - ✓ - CSS2, - CSS3 - - - - border-bottom-right-radius - 〈corner radius〉 - 0 - - ✓ - CSS2, - CSS3 - - - - border-bottom-left-radius - 〈corner radius〉 - 0 - - ✓ - CSS2, - CSS3 - - - - border-top-left-radius - 〈corner radius〉 - 0 - - ✓ - CSS2, - CSS3 - - - - border-top-color - 〈color〉 - currentColor - - ✓ - CSS2, - CSS3 - - - - border-right-color - 〈color〉 - currentColor - - ✓ - CSS2, - CSS3 - - - - border-bottom-color - 〈color〉 - currentColor - - ✓ - CSS2, - CSS3 - - - - border-left-color - 〈color〉 - currentColor - - ✓ - CSS2, - CSS3 - - - - border-image-source - 〈image〉 | none - none - - ✓ - CSS3 - - - - border-image-repeat - 〈border repeat〉{1,2} - stretch - - - CSS3 - - - - border-image-slice - [ 〈number〉 | 〈percentage〉 ]{1,4} && fill? - 100% - - - CSS3 - a 'four sides' shorthand - - - border-image-width - [ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4} - 1 - - - CSS3 - a 'four sides' shorthand - - - - - - - ShorthandValueInitialReferenceNotes - - - - border-width - 〈length〉{1,4} - see individual properties - CSS2, - CSS3 - a 'four sides' shorthand - - - border-style - 〈border style〉{1,4} - see individual properties - CSS2, - CSS3 - a 'four sides' shorthand - - - border-color - 〈color〉{1,4} - see individual properties - CSS3 - a 'four sides' shorthand - - - border-top - 〈length〉 || 〈border style〉 || 〈color〉 - see individual properties - CSS2, - CSS3 - - - - border-right - 〈length〉 || 〈border style〉 || 〈color〉 - see individual properties - CSS2, - CSS3 - - - - border-bottom - 〈length〉 || 〈border style〉 || 〈color〉 - see individual properties - CSS2, - CSS3 - - - - border-left - 〈length〉 || 〈border style〉 || 〈color〉 - see individual properties - CSS2, - CSS3 - - - - border - 〈length〉 || 〈border style〉 || 〈color〉 - see individual properties - CSS2, - CSS3 - - - - border-radius - [ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]? - see individual properties - CSS3 - - - - border-image - 〈border-image-source〉 || 〈border-image-slice〉 [ / 〈border-image-width〉 | / 〈border-image-width〉? / 〈border-image-outset〉 ]? || 〈border-image-repeat〉 - see individual properties - CSS3 - - - - -
- -〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge -〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2} - - - - Outline properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - outline-style - none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge - none - - - CSS2, - CSS3 - - - - outline-width - 〈length〉 - 0px - - ✓ - CSS2, - CSS3 - - - - outline-color - 〈color〉 - currentColor - - ✓ - CSS2, - CSS3 - - - - outline-offset - 〈length〉 - 0px - - - CSS3 - - - - - - - ShorthandValueInitialReferenceNotes - - - - outline - 〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉 - see individual properties - CSS2, - CSS3 - - - - -
- - - GTK uses the CSS outline properties to render the 'focus rectangle'. - - - - Background properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - background-color - 〈color〉 - rgba(0,0,0,0) - - ✓ - CSS2, - CSS3 - - - - background-clip - 〈box〉 [ , 〈box〉 ]* - border-box - - - CSS3 - - - - background-origin - 〈box〉 [ , 〈box〉 ]* - padding-box - - - CSS3 - - - - background-size - 〈bg-size〉 [ , 〈bg-size〉 ]* - auto - - ✓ - CSS3 - - - - background-position - 〈position〉 [ , 〈position〉 ]* - 0 - - ✓ - CSS2, - CSS3 - - - - background-repeat - 〈bg-repeat〉 [ , 〈bg-repeat〉 ]* - repeat - - - CSS2, - CSS3 - - - - background-image - 〈bg-image〉 [ , 〈bg-image〉 ]* - none - - ✓ - CSS2, - CSS3 - not supported: urls without quotes, colors in crossfades - - - background-blend-mode - 〈blend-mode〉 [ , 〈blend-mode〉 ]* - normal - - - - only affects multiple backgrounds - - - box-shadow - none | 〈box shadow〉 [ , 〈box shadow〉 ]* - none - - ✓ - CSS3 - - - - - - - ShorthandValueInitialReferenceNotes - - - - background - [ 〈bg-layer〉 , ]* 〈final-bg-layer〉 - see individual properties - CSS2, - CSS3 - - - - -
- -〈box〉 = border-box | padding-box | content-box -〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain -〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4} -〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2} -〈bg-image〉 = 〈image〉 | none -〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉 -〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉 || 〈color〉 -〈blend-mode〉 = color || color-burn || color-dodge || darken || difference || exclusion || - hard-light || hue || lighten || luminosity || multiply || normal || overlay || - saturate || screen || soft-light -〈box shadow〉 = inset? && 〈length〉{2,4}? && 〈color〉? - - - - As in CSS, the background color is rendered underneath all the background image layers, so it will only be visible if - background images are absent or have transparency. - - - - Alternatively, multiple backgrounds can be blended using the background-blend-mode property. - - - - Transition properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - transition-property - none | all | 〈property name〉 [ , 〈property name〉 ]* - all - - - CSS3 - - - - transition-duration - 〈time〉 [ , 〈time〉 ]* - 0s - - - CSS3 - - - - transition-timing-function - 〈single-timing-function〉 [ , 〈single-timing-function〉 ]* - ease - - - CSS3 - - - - transition-delay - 〈time〉 [ , 〈time〉 ]* - 0s - - - CSS3 - - - - - - - ShorthandValueInitialReferenceNotes - - - - transition - 〈single-transition〉 [ , 〈single-transition〉 ]* - see individual properties - CSS3 - - - - -
- -〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out | - step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) | - cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 ) -〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉 - - - - Animation properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - animation-name - 〈single-animation-name〉 [ , 〈single-animation-name〉 ]* - none - - - CSS3 - - - - animation-duration - 〈time〉 [ , 〈time〉 ]* - 0s - - - CSS3 - - - - animation-timing-function - 〈single-timing-function〉 [ , 〈single-timing-function〉 ]* - ease - - - CSS3 - - - - animation-iteration-count - 〈single-animation-iteration-count〉 [ , 〈single-animation-iteration-count〉 ]* - 1 - - - CSS3 - - - - animation-direction - 〈single-animation-direction〉 [ , 〈single-animation-direction〉 ]* - normal - - - CSS3 - - - - animation-play-state - 〈single-animation-play-state〉 [ , 〈single-animation-play-state〉 ]* - running - - - CSS3 - - - - animation-delay - 〈time〉 [ , 〈time〉 ]* - 0s - - - CSS3 - - - - animation-fill-mode - 〈single-animation-fill-mode〉 [ , 〈single-animation-fill-mode〉 ]* - none - - - CSS3 - - - - - - - ShorthandValueInitialReferenceNotes - - - - animation - 〈single-animation〉 [ , 〈single-animation〉 ]* - see individual properties - CSS3 - - - - -
- -〈single-animation-name〉 = none | 〈property name〉 -〈single-animation-iteration-count〉 = infinite | 〈number〉 -〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse -〈single-animation-play-state〉 = running | paused -〈single-animation-fill-mode〉 = none | forwards | backwards | both -〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 || - 〈single-animation-iteration-count〉 || 〈single-animation-direction〉 || - 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉 - - - - Table-related properties - - - - - NameValueInitialInh.Ani.ReferenceNotes - - - - border-spacing - 〈length〉{1,2} - 0 - ✓ - ✓ - CSS2, - CSS3 - - - - -
- - - The border-spacing property is respected by GtkBox and GtkGrid, and by box gadgets that - are used internally in complex widgets. - - - - diff --git a/docs/reference/gtk/gtk4-docs.xml b/docs/reference/gtk/gtk4-docs.xml index 8b179e40fe..cca756c355 100644 --- a/docs/reference/gtk/gtk4-docs.xml +++ b/docs/reference/gtk/gtk4-docs.xml @@ -371,7 +371,6 @@ Theming in GTK - diff --git a/docs/reference/gtk/meson.build b/docs/reference/gtk/meson.build index 5e0361046c..91bab44088 100644 --- a/docs/reference/gtk/meson.build +++ b/docs/reference/gtk/meson.build @@ -343,7 +343,6 @@ content_files = [ 'building.xml', 'compiling.xml', 'css-overview.xml', - 'css-properties.xml', 'drawing-model.xml', 'glossary.xml', 'gtk4-broadwayd.xml',