GTK+ CSS Properties

〈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〉

〈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〉 )

〈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〉 )

〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large

〈relative size〉 = larger | smaller

〈shadow〉 = 〈length〉 〈length〉 〈color〉?

〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) |

                scale( 〈number〉 [ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) |

                skewX( 〈angle〉 ) |  skewY( 〈angle〉 )

〈color palette〉 = default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*

〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge

〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2}

〈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〉?

〈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〉

〈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〉