diff --git a/docs/reference/gtk/css-overview.xml b/docs/reference/gtk/css-overview.xml index 8fb42df5e1..0dc73a750f 100644 --- a/docs/reference/gtk/css-overview.xml +++ b/docs/reference/gtk/css-overview.xml @@ -117,7 +117,7 @@ scale[.fine-tune] @@ -136,8 +136,8 @@ button, entry { The syntax for @import rules is as follows: -〈import rule〉 = @import [ 〈url〉 | 〈string〉] ; -〈url〉 = url( 〈string〉) +〈import rule〉 = @import [ 〈url〉 | 〈string〉 ] +〈url〉 = url( 〈string〉 ) An example for using the @import rule @@ -181,7 +181,7 @@ button, entry { Theme labels that are descendants of a window @@ -190,7 +190,7 @@ window label { Theme notebooks, and anything within @@ -201,7 +201,7 @@ notebook { combobox, notebook > entry { color: @fg_color; - background-color: #1209a2 + background-color: #1209a2; } ]]> @@ -210,7 +210,7 @@ notebook > entry { Theme any widget within a GtkBox @@ -219,7 +219,7 @@ box * { Theme a label named title-label @@ -228,7 +228,7 @@ label#title-label { Theme any widget named main-entry @@ -246,7 +246,7 @@ label#title-label { Theme the entry of a GtkSpinButton @@ -508,8 +508,8 @@ checkbutton:indeterminate { 〈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〉 ) +〈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 @@ -546,7 +546,7 @@ checkbutton:indeterminate { GTK+ adds several additional ways to specify colors. -〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉| 〈win32 color〉 +〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉 | 〈win32 color〉 @@ -570,7 +570,7 @@ checkbutton:indeterminate { @define-color bg_color #f9a039; * { -background-color: @bg_color; + background-color: @bg_color; } ]]> @@ -590,14 +590,15 @@ background-color: @bg_color; 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〉) +〈color expression〉 = lighter( 〈color〉 ) | darker( 〈color〉 ) | shade( 〈color〉, 〈number〉 ) | + alpha( 〈color〉, 〈number〉 ) | mix( 〈color〉, 〈color〉, 〈number〉 ) On Windows, GTK+ allows to refer to system colors, as follows: -〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉) +〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉 ) @@ -611,8 +612,8 @@ background-color: @bg_color; 〈image〉 = 〈url〉 | 〈crossfade〉 | 〈alternatives〉 | 〈gradient〉 | 〈gtk image〉 -〈crossfade〉 = cross-fade( 〈percentage〉, 〈image〉, 〈image〉) -〈alternatives〉 = image([ 〈image〉, ]* [ 〈image〉 | 〈color〉 ]) +〈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〉 ] , ]? @@ -621,7 +622,7 @@ background-color: @bg_color; [ [ 〈shape〉 || 〈size〉 ] [ at 〈position〉 ]? , | at 〈position〉, ]? 〈color stops〉 ) 〈side or corner〉 = [ left | right ] || [ top | bottom ] -〈color stops〉 = 〈color stop〉 [ , 〈color stop〉]+ +〈color stops〉 = 〈color stop〉 [ , 〈color stop〉 ]+ 〈color stop〉 = 〈color〉 [ 〈percentage〉 | 〈length〉 ]? 〈shape〉 = circle | ellipse 〈size〉 = 〈extent keyword〉 | 〈length〉 | [ 〈length〉 | 〈percentage〉 ]{1,2} @@ -774,7 +775,7 @@ arrow.fancy { CSS, this can be done with the -gtk-scaled syntax. -〈scaled image〉 = -gtk-scaled( 〈image〉[, 〈image〉]* ) +〈scaled image〉 = -gtk-scaled( 〈image〉[ , 〈image〉 ]* ) @@ -793,7 +794,7 @@ arrow { ]]> -〈recolored image〉 = -gtk-recolor( 〈url〉[, 〈color palette〉] ) +〈recolored image〉 = -gtk-recolor( 〈url〉 [ , 〈color palette〉 ] ) @@ -819,7 +820,7 @@ arrow { 〈win32 theme part〉 = -gtk-win32-theme-part( 〈name〉, 〈integer〉 〈integer〉 - [, [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉]? ) | margins( 〈integer〉{1,4} ) ] ]* ) + [ , [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉 ]? ) | margins( 〈integer〉{1,4} ) ] ]* ) @@ -870,7 +871,7 @@ arrow { 〈keyframe rule〉 = @keyframes 〈name〉 { 〈animation rule〉 } 〈animation rule〉 = 〈animation selector〉 { 〈declaration〉* } -〈animation selector〉 = 〈single animation selector〉 [ , 〈single animation selector ]* +〈animation selector〉 = 〈single animation selector〉 [ , 〈single animation selector〉 ]* 〈single animation selector〉 = from | to | 〈percentage〉 @@ -920,10 +921,10 @@ spinner { The syntax for @binding-set rules is as follows: -〈binding set rule〉 = @binding-set 〈binding name〉{ [ [ 〈binding〉 | 〈unbinding〉] ; ]* } +〈binding set rule〉 = @binding-set 〈binding name〉 { [ [ 〈binding〉 | 〈unbinding〉 ] ; ]* } 〈binding〉 = bind "〈accelerator〉" { 〈signal emission〉* } -〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉[ , 〈argument〉]* ]? } -〈unbinding〉 = unbind "〈accelerator〉" ; +〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉 [ , 〈argument〉 ]* ]? } +〈unbinding〉 = unbind "〈accelerator〉" diff --git a/docs/reference/gtk/css-properties.xml b/docs/reference/gtk/css-properties.xml index 33d3d8f96a..0798db9608 100644 --- a/docs/reference/gtk/css-properties.xml +++ b/docs/reference/gtk/css-properties.xml @@ -71,11 +71,12 @@ We use for syntax productions, and each line is put in a -〈win32 theme size〉 = 〈win32 size〉| 〈win32 part size〉 +〈win32 theme size〉 = 〈win32 size〉 | 〈win32 part size〉 〈win32 size〉 = -gtk-win32-size ( 〈theme name〉, 〈metric id〉 ) 〈win32 part size〉 = [ -gtk-win32-part-width | -gtk-win32-part-height | - -gtk-win32-part-border-top | -gtk-win32-part-border-right | - -gtk-win32-part-border-bottom | -gtk-win32-part-border-left ] ( 〈theme name〉 , 〈integer〉 , 〈integer〉 ) + -gtk-win32-part-border-top | -gtk-win32-part-border-right | + -gtk-win32-part-border-bottom | -gtk-win32-part-border-left ] + ( 〈theme name〉 , 〈integer〉 , 〈integer〉 ) 〈calc expression〉 = calc( 〈calc sum〉 ) @@ -573,7 +574,7 @@ We use for syntax productions, and each line is put in a matrix3d( 〈number〉 [ , 〈number〉 ]{15} ) | translate( 〈length〉, 〈length〉 ) | translate3d( 〈length〉, 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) | translateZ( 〈length〉 ) | - scale( 〈number〉[ , 〈number〉 ]? ) | scale3d( 〈number〉, 〈number〉, 〈number〉) | + 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〉 ) | @@ -1139,7 +1140,7 @@ We use for syntax productions, and each line is put in a -gtk-outline-radius - [ 〈length〉|〈percentage〉 ]{1,4} [ / [〈length〉 | 〈percentage〉 ]{1,4} ]? + [ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]? see individual properties @@ -1210,7 +1211,7 @@ We use for syntax productions, and each line is put in a background-repeat - 〈bg-repeat 〉[ , 〈bg-repeat〉 ]* + 〈bg-repeat〉 [ , 〈bg-repeat〉 ]* repeat @@ -1220,7 +1221,7 @@ We use for syntax productions, and each line is put in a background-image - 〈bg-image〉[ , 〈bg-image〉 ]* + 〈bg-image〉 [ , 〈bg-image〉 ]* none ✓ @@ -1271,8 +1272,10 @@ We use for syntax productions, and each line is put in a 〈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 +〈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〉? @@ -1314,7 +1317,7 @@ We use for syntax productions, and each line is put in a transition-timing-function - 〈single-timing-function〉[ , 〈single-timing-function〉 ]* + 〈single-timing-function〉 [ , 〈single-timing-function〉 ]* ease @@ -1349,8 +1352,8 @@ We use for syntax productions, and each line is put in a 〈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〉 ) + 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〉 @@ -1444,7 +1447,7 @@ We use for syntax productions, and each line is put in a animation - 〈single-animation〉 [ , 〈single-animation〉]* + 〈single-animation〉 [ , 〈single-animation〉 ]* see individual properties CSS3 @@ -1459,7 +1462,8 @@ We use for syntax productions, and each line is put in a 〈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〉 + 〈single-animation-iteration-count〉 || 〈single-animation-direction〉 || + 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉