/*
    SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
    SPDX-FileCopyrightText: 2026 Arjen Hiemstra <ahiemstra@heimr.nl>
*/

/*
This file is automatically generated from properties.qdoc.j2.
To regenerate, run `tools/propertygenerator/generate_properties.py`.
*/

/*!

\page css-properties.html
\title CSS Property Reference



\section2 display

These properties relate to how an element is displayed.


\section3 visibility (visible | hidden)

The visibility of the element, whether it should be shown or hidden.

\note Unlike the web-CSS version of this property, setting visibility
to hidden also removes the element's box from any layout. Effectively
\c{visibility: hidden} works like \c{display: none}.


\section3 opacity (<number>)

The opacity of the element.


\section2 layout

These properties all relate to an element's layout and sizing.


\section2 layout-alignment

The alignment related properties can be used to control the alignment for
elements that combine multiple items into a single element, such as a checkbox
that contains a check mark (usually referred to as \c{indicator}), an icon and
a label. For details about how the layout for elements works, see \l{layout}.

Horizontal and vertical alignment is specified in relative terms that do not
imply a writing direction.

\section3 layout-alignment (<container> <horizontal> <vertical> <order>)

Shorthand for setting the various layout properties.


\section3 layout-alignment-container (item | content | background)

The alignment container. This determines relative to what the element is placed.

\section3 layout-alignment-horizontal (start | center | end | fill | stack-center | stack-fill)

The horizontal alignment.

\section3 layout-alignment-vertical (start | center | end | fill | stack-center | stack-fill)

The vertical alignment.

\section3 layout-alignment-order (<integer>)

The order determines which elements come before others in the same alignment group.


\section3 width (<length>)

The implicit (initial) width of an element.

\section3 height (<length>)

The implicit (initial) height of an element.

\section3 spacing (<length>)

The spacing between various elements.

\section2 layout-padding

Padding defines extra spacing around the content of an element.

\section3 padding (<length>{1,4})

A shorthand to set all padding values in a single property. Can take one
to four values. If one value is provided, it will be used for all four
padding values. If two values are provided, the first will be used for
left and right padding, the second for top and bottom padding. If three
values are provided, the first will be used for top, the second for left
and right and the third for bottom padding. If four values are provided,
they are used for top, right, bottom, left padding in that order.


\section3 padding-left (<length>)

The size of the left side.

\section3 padding-right (<length>)

The size of the right side.

\section3 padding-top (<length>)

The size of the top side.

\section3 padding-bottom (<length>)

The size of the bottom side.


\section2 layout-inset

Inset defines extra spacing around the background of an element.

\b inset (<length>{1,4})

A shorthand to set all inset values in a single property. Can take one
to four values. If one value is provided, it will be used for all four
inset values. If two values are provided, the first will be used for
left and right inset, the second for top and bottom inset. If three
values are provided, the first will be used for top, the second for left
and right and the third for bottom inset. If four values are provided,
they are used for top, right, bottom, left inset in that order.


\section3 inset-left (<length>)

The size of the left side.

\section3 inset-right (<length>)

The size of the right side.

\section3 inset-top (<length>)

The size of the top side.

\section3 inset-bottom (<length>)

The size of the bottom side.


\section2 layout-margins

Margins define extra spacing between sub-elements of an element.

\section3 margin-left (<length>)

The size of the left side.

\section3 margin-right (<length>)

The size of the right side.

\section3 margin-top (<length>)

The size of the top side.

\section3 margin-bottom (<length>)

The size of the bottom side.



\section2 text

These properties all relate to the text of an element. They will have no effect
if the element has no visible text.

\b color (<color>)

A shorthand to set both text and icon color in a single property.

\b font-size (<length> or <percentage>)

The size of the font.

\b font-weight (<integer> | (normal | bold | bolder | lighter))

The weight of the font. Can be either an integer in the range 100-1000 or a
weight name.


\section2 text-alignment

The alignment of text of an element.


\section3 text-alignment-container (item | content | background)

The alignment container. This determines relative to what the element is placed.

\section3 text-alignment-horizontal (start | center | end | fill | stack-center | stack-fill)

The horizontal alignment.

\section3 text-alignment-vertical (start | center | end | fill | stack-center | stack-fill)

The vertical alignment.

\section3 text-alignment-order (<integer>)

The order determines which elements come before others in the same alignment group.


\section3 font-family (<string>)



\section3 text-color (<color>)

The color of text of an element.

\section3 text-wrap-mode (no-wrap | word-wrap | manual-wrap | wrap-anywhere | wrap-at-word-boundary-or-anywhere | wrap)

The wrap mode for the text of an element.

\section3 text-elide (none | left | middle | right)

The elide mode for the text of an element.


\section2 icon

These properties all relate to the icon of an element. They will have no
effect if the element does not have an icon.

\b icon-size (<length>)

A shorthand to set both icon width and icon height in one property.


\section2 icon-alignment



\section3 icon-alignment-container (item | content | background)

The alignment container. This determines relative to what the element is placed.

\section3 icon-alignment-horizontal (start | center | end | fill | stack-center | stack-fill)

The horizontal alignment.

\section3 icon-alignment-vertical (start | center | end | fill | stack-center | stack-fill)

The vertical alignment.

\section3 icon-alignment-order (<integer>)

The order determines which elements come before others in the same alignment group.


\section3 icon-width (<length>)

The width of the icon.

\section3 icon-height (<length>)

The height of the icon.

\section3 icon-name (<string>)

The name of an icon of the icon theme to use for this icon.

\section3 icon-source (<url>)

A URL to a file to use for the icon. Currently only local files are
supported.


\section3 icon-color (<color>)

The color of the icon.


\section2 background

The background properties all relate to the background of an element. An element's
background is a layer rendered over any shadows but underneath everything else.

\b background (none | <color> | <url>)

A shorthand to set a background for an element. Setting this to "none" will
explicitly disable any background. Setting this to a color value will use that
color as background. Setting it to a url will use that as image source for the
background.


\section3 background-color (<color>)

The background color to use for an element.

\section2 background-image

The image to use for an element.

\section3 background-image-width (<length>)

The width to use for the image. If unset, the source's image width is used.

\section3 background-image-height (<length>)

The height to use for the image. If unset, the source's image height is used.

\section3 background-image-x-offset (<length>)

An offset on placement of the image horizontally.

\section3 background-image-y-offset (<length>)

An offset on placement of the image vertically.

\section3 background-image-mask-color (<color>)

The color to use for rendering the image when the image is used as a mask.



\section2 border

The border properties all relate to an element's border. An element's
border is a set of lines rendered inside the edge of an element, over any
background but underneath any content. Borders have a width, a style and
a color. Currently only the styles "none" and "solid" are supported, with
"none" meaning do not draw the border and "solid" being use a solid color
for the border.

\b border (none | (<length> (none | solid) <color>))

A shorthand to set all border properties in a single property. If set to
none, all borders will be disabled. If set to <length> solid <color>, all
borders will use <length> for their size and <color> for their color.

\b border-width (<length>)

A shorthand to set all border widths in a single property.

\b border-color (<color>)

A shorthand to set all border colors in a single property.

\b border-style (none | solid)

A shorthand to set all border styles in a single property.


\section2 border-left

\b {{ name }} (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.


\section3 border-left-width (<length>)

The thickness of the line.

\section3 border-left-color (<color>)

The color of the line.

\section3 border-left-style (none | solid)

The style of the line.


\section2 border-right

\b {{ name }} (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.


\section3 border-right-width (<length>)

The thickness of the line.

\section3 border-right-color (<color>)

The color of the line.

\section3 border-right-style (none | solid)

The style of the line.


\section2 border-top

\b {{ name }} (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.


\section3 border-top-width (<length>)

The thickness of the line.

\section3 border-top-color (<color>)

The color of the line.

\section3 border-top-style (none | solid)

The style of the line.


\section2 border-bottom

\b {{ name }} (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.


\section3 border-bottom-width (<length>)

The thickness of the line.

\section3 border-bottom-color (<color>)

The color of the line.

\section3 border-bottom-style (none | solid)

The style of the line.



\section2 outline



\section2 outline-left

\b {{ name }} (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.


\section3 outline-left-size (<length>)

The thickness of the line.

\section3 outline-left-color (<color>)

The color of the line.

\section3 outline-left-style (none | solid)

The style of the line.


\section2 outline-right

\b {{ name }} (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.


\section3 outline-right-size (<length>)

The thickness of the line.

\section3 outline-right-color (<color>)

The color of the line.

\section3 outline-right-style (none | solid)

The style of the line.


\section2 outline-top

\b {{ name }} (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.


\section3 outline-top-size (<length>)

The thickness of the line.

\section3 outline-top-color (<color>)

The color of the line.

\section3 outline-top-style (none | solid)

The style of the line.


\section2 outline-bottom

\b {{ name }} (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.


\section3 outline-bottom-size (<length>)

The thickness of the line.

\section3 outline-bottom-color (<color>)

The color of the line.

\section3 outline-bottom-style (none | solid)

The style of the line.



\section2 corners



\section2 corners-top-left



\section3 border-top-left-radius (<length>)

The radius of the corner.


\section2 corners-top-right



\section3 border-top-right-radius (<length>)

The radius of the corner.


\section2 corners-bottom-left



\section3 border-bottom-left-radius (<length>)

The radius of the corner.


\section2 corners-bottom-right



\section3 border-bottom-right-radius (<length>)

The radius of the corner.



\section2 shadow

These properties describe an element's shadow.

\b box-shadow (none | (<length> <length> <length> <length> <color>))

A shorthand to set the shadow of an element to a box-shaped shadow. If set to none,
the shadow will explicitly be disabled. Otherwise, the parameters are X offset, Y offset,
size, blur and finally color.


\section2 shadow-offset

The offset of the shadow from its element. Setting this will move the entire shadow,
as if the light were cast from a different angle.


\section3 shadow-offset-horizontal (<length>)

The horizontal offset of the shadow.

\section3 shadow-offset-vertical (<length>)

The vertical offset of the shadow.


\section3 shadow-color (<color>)

The color of the shadow.

\section3 shadow-size (<length>)

The size of the shadow. This expands the area used for the shadow compared to the element.

\section3 shadow-blur (<length>)

The amount of blur to use for the shadow. Increasing this will increase how smooth the shadow
goes from fully transparent to the full shadow color.





*/