GTK+ CSS 3 GTK Library GTK+ CSS 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. 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. Whereever a number is allowed, GTK+ also accepts a Windows-specific theme 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〉 ) 〈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 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. 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 ✓ ✓ ShorthandValueInitialReferenceNotes font [ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉 see individual properties CSS2, CSS3 CSS allows line-height, etc 〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large 〈relative size〉 = larger | smaller 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. 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. 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. 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 〈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. NameValueInitialInh.Ani.ReferenceNotes 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 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‑right‑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‑left 〈length〉 || 〈border style〉 || 〈color〉 see individual properties CSS2, CSS3 border‑bottom 〈length〉 || 〈border style〉 || 〈color〉 see individual properties CSS2, CSS3 border‑right 〈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} 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 ‑gtk‑outline‑top‑left‑radius 〈corner radius〉 0 ✓ ‑gtk‑outline‑top‑right‑radius 〈corner radius〉 0 ✓ ‑gtk‑outline‑bottom‑right‑radius 〈corner radius〉 0 ✓ ‑gtk‑outline‑bottom‑left‑radius 〈corner radius〉 0 ✓ ShorthandValueInitialReferenceNotes outline 〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉 see individual properties CSS2, CSS3 ‑gtk‑outline‑radius [ 〈length〉|〈percentage〉 ]{1,4} [ / [〈length〉 | 〈percentage> ]{1,4} ]? see individual properties GTK+ uses the CSS outline properties to render the 'focus rectangle'. 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. 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〉 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〉 NameValueInitialInh.Ani.ReferenceNotes ‑gtk‑key‑bindings none | 〈binding name〉 [ , 〈binding name〉 ]* none 〈binding name〉 must have been assigned to a binding set with a @binding-set rule. 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.