.. index:: pair: page; CSS Specification .. _doxid-css_specification: CSS Specification ================= .. _doxid-css_specification_1autotoc_md46: Introduction ~~~~~~~~~~~~ eepp CSS custom implementation is heavily based on the official `CSS standard `__. This document will try to explain the shared features and the current differences with the CSS specification. Since CSS is widely used and documented, every feature that it's shared with the CSS standard will be directly linked to the Mozilla CSS documentation. If you are totally new to CSS please go the `Mozilla CSS portal `__. .. _doxid-css_specification_1autotoc_md47: Relevant differences with the CSS standard ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ eepp uses the same CSS engine for native application widgets and for the HTML compatibility layer, but the layout model depends on the type of UI being styled. * Browser layout properties such as ``display``, ``float``, Flexbox, CSS Grid, and CSS positioning are supported by the HTML compatibility layer. They do not define the layout of ordinary native eepp application widgets. Native application UI uses eepp layout containers and properties such as ``layout-width``, ``layout-height``, ``layout-weight``, and ``layout-gravity``. See ```ui_authoring.md``` and ```ui_html_compatibility.md```. * CSS inheritance is supported for properties explicitly defined by eepp as inheritable. CSS custom properties also inherit through the widget hierarchy. Not every property necessarily has the same inheritance semantics as a browser implementation. * Attribute selectors are supported. For native widgets they operate on properties exposed by the widget property system. HTML ``data-*`` attributes are also available to selectors on HTML widgets. * When a pseudo-class or other volatile selector stops matching, eepp restores the current underlying local or stylesheet declaration. If there is no such declaration, it restores the current inherited value or a saved native widget value. Native fallback requires the widget to serialize that property through ``getPropertyString()``; properties without a serializable native value may not roll back. Application changes to a property while a state-dependent declaration overrides it have no defined rollback behavior. * Relative resource URLs are resolved against the relevant stylesheet/document base URI when one is available. eepp also supports resource locators for resources already loaded by the application. * eepp CSS supports the ``dp`` device-independent pixel unit, together with the eepp-specific rounded variants ``dpr``, ``dprd``, and ``dpru``. * CSS files should always be UTF-8 encoded. .. _doxid-css_specification_1autotoc_md48: Flow-relative box properties ---------------------------- ``margin-inline-start``, ``margin-inline-end``, ``padding-inline-start`` and ``padding-inline-end`` stay distinct declarations until they are resolved against the element direction. When a logical and a physical declaration resolve to the same physical edge (for example ``margin-left`` and ``margin-inline-start`` in ``ltr``), the normal cascade decides: higher specificity wins and, with equal specificity, the declaration that appears later wins. When the direction changes, the logical value moves to the opposite edge and the edge it leaves returns to its physical declaration. The ``margin`` and ``padding`` shorthands remain physical. .. _doxid-css_specification_1autotoc_md49: CSS Selectors ~~~~~~~~~~~~~ CSS selectors define the elements to which a set of CSS rules apply. .. _doxid-css_specification_1autotoc_md51: Basic selectors --------------- .. _doxid-css_specification_1autotoc_md52: Universal Selector ++++++++++++++++++ `Universal selector `__ selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. Syntax: ``* ns|* *|*`` Example: ``*`` will match all the elements of the document. .. _doxid-css_specification_1autotoc_md54: Type Selector +++++++++++++ `Type selector `__ selects all elements that have the given node name. Syntax: ``elementname`` Example: ``widget`` will match any ```` element. .. _doxid-css_specification_1autotoc_md56: Class Selector ++++++++++++++ `Class selector `__ selects all elements that have the given class attribute. Syntax: ``.classname`` Example: ``.index`` will match any element that has a class of "index". .. _doxid-css_specification_1autotoc_md58: ID Selector +++++++++++ `ID selector `__ selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. Syntax: ``#idname`` Example: ``#toc`` will match the element that has the ID "toc". .. _doxid-css_specification_1autotoc_md60: Grouping selectors ------------------ .. _doxid-css_specification_1autotoc_md61: Selector List +++++++++++++ The `selector list `__ ``,`` is a grouping method, it selects all the matching nodes. Syntax: ``A, B`` Example: ``widget, image`` will match both ```` and ```` elements. .. _doxid-css_specification_1autotoc_md63: Combinators ----------- .. _doxid-css_specification_1autotoc_md64: Descendant combinator +++++++++++++++++++++ The `descendant combinator `__ " " (space) combinator selects nodes that are descendants of the first element. Syntax: ``A B`` Example: ``LinearLayout image`` will match all ```` elements that are inside a ```` element. .. _doxid-css_specification_1autotoc_md65: Child combinator ++++++++++++++++ The `child combinator `__ ``>`` selects nodes that are direct children of the first element. Syntax: ``A > B`` Example: ``LinearLayout > listbox`` will match all ```` elements that are nested directly inside a ```` element. .. _doxid-css_specification_1autotoc_md66: General sibling combinator ++++++++++++++++++++++++++ The `general sibling combinator `__ ``~`` selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. Syntax: ``A ~ B`` Example: ``TextView ~ image`` will match all ```` elements that follow a ````, immediately or not. .. _doxid-css_specification_1autotoc_md67: Adjacent sibling combinator +++++++++++++++++++++++++++ The `adjacent sibling combinator `__ ``+`` selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent. Syntax: ``A + B`` Example: ``TextView + image`` will match all ```` elements that directly follow an ````. .. _doxid-css_specification_1autotoc_md69: Date/time control styling ~~~~~~~~~~~~~~~~~~~~~~~~~ Native tags are ``DateTimeEdit``, ``DatePicker``, ``TimePicker``, ``DateTimePicker``, and ``Calendar``. Picker button tags are ``DatePicker::button`` and ``DateTimePicker::button``. Calendar subparts are ``Calendar::header``, ``::previous``, ``::next``, ``::title``, ``::weekdays``, ``::weekday``, ``::grid``, ``::day``, and ``::today`` (each uses the ``Calendar`` prefix). Day-cell classes are ``selected``, ``today``, ``outside-month``, and ``focused``; unavailable dates use ``:disabled``. The combined popup exposes ``DateTimePicker::popup``, ``DateTimePicker::time``, ``DateTimePicker::time-up``, and ``DateTimePicker::time-down``. Time buttons have segment classes ``hour``, ``minute``, ``second``, ``millisecond``, or ``am-pm``. Standard foreground image/size/tint, font, padding, border, and color properties style these parts: .. ref-code-block:: cpp DateTimePicker { show-seconds: true; minute-step: 15; } Calendar { font-size: 12dp; min-width: 160dp; min-height: 160dp; } DateTimePicker::button { foreground-size: 12dp 12dp; cursor: arrow; } DateTimePicker[allow-editing=false] > DateTimePicker::button { foreground-tint: gray; } Calendar::day.selected { background-color: #0078d7; color: white; } Calendars fit their text metrics automatically unless an explicit fixed size overrides them. Seconds and milliseconds default to hidden; changing display settings also updates an open native date-time popup. Theme icons are CSS-defined inline SVG images sized in ``dp``. In HTML documents, style the ``input`` host. Anonymous control parts use private light defaults from the document's user-agent CSS and ignore author rules. HTML temporal constraints use ``min``, ``max``, ``step``, ``required``, ``readonly``, and ``disabled``, rather than the native bound and editing properties. See ``date/time pickers`` for interactions and APIs, and ``HTML compatibility`` for the supported form behavior. .. _doxid-css_specification_1autotoc_md70: CSS Properties ~~~~~~~~~~~~~~ eepp CSS properties can be categorized in two big groups: CSS standard properties and eepp CSS properties. **Definitions:** * Property names are *case insensitive*. * Some properties have aliases. * All property names that contain dashes (``-``), have aliases without those dashes. * For example: ``animation-delay`` also is ``animationDelay``. * Other aliases will be clarified in the properties documentation. * All properties can be used as attributes of the XML node. * XML attributes are treated as inline CSS styling. * For example: * Something like: * ``LinearLayout { layout-width: match_parent; layout_height: match_parent; orientation: vertical; }`` * is similar to (but not equivalent, since specificity of inline CSS is higher): * ```` * CSS standard properties directly linked to the Mozilla docs are fully supported, otherwise a clarification will appear. * *Applicable to* will link to the :ref:`EE::UI::UIWidget ` that can use that property, and between parenthesis is the CSS element name. .. _doxid-css_specification_1autotoc_md72: active-section -------------- Selects the active segment of a date/time editor. Values: ``none``, ``day``, ``month``, ``year``, ``hour``, ``minute``, ``second``, ``millisecond``, and ``am-pm``. The segment must exist in the current display format; ``none`` clears segment selection. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `string <#string-data-type>`__ * Default value: ``none`` .. _doxid-css_specification_1autotoc_md74: animation-delay --------------- Read `animation-delay `__ docs. .. _doxid-css_specification_1autotoc_md76: animation-direction ------------------- Read `animation-direction `__ documentation. .. _doxid-css_specification_1autotoc_md78: animation-duration ------------------ Read `animation-duration `__ documentation. .. _doxid-css_specification_1autotoc_md80: animation-fill-mode ------------------- Read `animation-fill-mode `__ documentation. .. _doxid-css_specification_1autotoc_md82: animation-iteration-count ------------------------- Read `animation-iteration-count `__ documentation. .. _doxid-css_specification_1autotoc_md84: animation-name -------------- Read `animation-name `__ documentation. .. _doxid-css_specification_1autotoc_md85: animation-play-state -------------------- Read `animation-play-state `__ documentation. .. _doxid-css_specification_1autotoc_md87: animation-timing-function ------------------------- Read `animation-timing-function `__ documentation. Timing function names are custom, and not the same as the standard, but ``cubic-bezier`` will be added soon. Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, elastic-out, elastic-in-out, none. .. _doxid-css_specification_1autotoc_md89: allow-editing ------------- Enable or disable editing on input elements. Read-only date/time controls retain text selection, close an open popup, and mute their calendar button using theme CSS. * Applicable to: :ref:`EE::UI::UITextEdit ` (TextEdit), :ref:`EE::UI::UITextInput ` (TextInput), :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``true`` .. _doxid-css_specification_1autotoc_md91: allow-empty ----------- Allows a date/time editor to have no value. Setting this to ``false`` initializes an empty editor from the current date/time, subject to its bounds, and prevents clearing it. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``true`` .. _doxid-css_specification_1autotoc_md93: allow-float ----------- On a input that only accept numbers, enables floating point numbers. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput), :ref:`EE::UI::UISpinBox ` (SpinBox::input) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md95: animation-speed --------------- Sets the loader speed animation. * Applicable to: :ref:`EE::UI::UILoader ` (Loader) * Data Type: `number <#number-data-type>`__ * Default value: ``0.5`` .. _doxid-css_specification_1autotoc_md97: arc-start-angle --------------- The angle value where a loader progress starts rendering. * Applicable to: :ref:`EE::UI::UILoader ` (Loader) * Data Type: `number <#number-data-type>`__ * Default value: ``0`` .. _doxid-css_specification_1autotoc_md99: background-color ---------------- Read `background-color `__ documentation. .. _doxid-css_specification_1autotoc_md101: background-expand ----------------- Sets if the element skin background should be expanded to the element dimensions. * Applicable to: :ref:`EE::UI::UISlider ` (Slider), :ref:`EE::UI::UIScrollBar ` (ScrollBar) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md103: background-image ---------------- Read `background-image `__ documentation. * Applicable to: Any element * Data Type: `resource-path <#resource-path-data-type>`__ * Default value: ``none`` .. _doxid-css_specification_1autotoc_md105: background-position-x --------------------- Read `background-position-x `__ documentation. .. _doxid-css_specification_1autotoc_md107: background-position-y --------------------- Read `background-position-y `__ documentation. .. _doxid-css_specification_1autotoc_md109: backtround-repeat ----------------- Read `background-repeat `__ documentation. ``space`` and ``round`` values are not supported yet. * Default value: ``no-repeat`` (this is different from the CSS standard) .. _doxid-css_specification_1autotoc_md111: background-tint --------------- Sets the tint color of the background image. * Applicable to: Any element * Data Type: `color <#color-data-type>`__ * Default value: ``white`` .. _doxid-css_specification_1autotoc_md113: background-size --------------- Read `background-size `__ documentation. .. _doxid-css_specification_1autotoc_md115: blend-mode ---------- Sets the blend mode to the widget. * Applicable to: Any element * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``add`` * ``alpha`` * ``multiply`` * ``none`` * Default value: ``alpha`` .. _doxid-css_specification_1autotoc_md116: border-bottom-color ------------------- Read `border-bottom-color `__ documentation. .. _doxid-css_specification_1autotoc_md118: border-bottom-left-radius ------------------------- Read `border-bottom-left-radius `__ documentation. .. _doxid-css_specification_1autotoc_md120: border-bottom-right-radius -------------------------- Read `border-bottom-right-radius `__ documentation. .. _doxid-css_specification_1autotoc_md122: border-bottom-width ------------------- Read `border-bottom-width `__ documentation. .. _doxid-css_specification_1autotoc_md124: border-left-color ----------------- Read `border-left-color `__ documentation. .. _doxid-css_specification_1autotoc_md126: border-left-width ----------------- Read `border-left-width `__ documentation. .. _doxid-css_specification_1autotoc_md128: border-right-color ------------------ Read `border-right-color `__ documentation. .. _doxid-css_specification_1autotoc_md130: border-right-width ------------------ Read `border-right-width `__ documentation. .. _doxid-css_specification_1autotoc_md132: border-top-color ---------------- Read `border-top-color `__ documentation. .. _doxid-css_specification_1autotoc_md134: border-top-left-radius ---------------------- Read `border-top-left-radius `__ documentation. .. _doxid-css_specification_1autotoc_md136: border-top-right-radius ----------------------- Read `border-top-right-radius `__ documentation. .. _doxid-css_specification_1autotoc_md138: border-top-width ---------------- Read `border-top-width `__ documentation. .. _doxid-css_specification_1autotoc_md140: border-type ----------- Defines where the border box is drawn. * Applicable to: Any element * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``inside`` : The border will be drawn inside the content box. * ``outside`` : The border will be drawn outside the content box. * ``outline`` : The border will be drawn in the middle point between the content box and the border width. * Default value: ``inside`` .. _doxid-css_specification_1autotoc_md142: calendar-view ------------- Selects the calendar view: ``days``, ``months``, or ``years``. Changing the view does not select a date. * Applicable to: :ref:`EE::UI::UICalendar ` (Calendar) * Data Type: `string <#string-data-type>`__ * Default value: ``days`` .. _doxid-css_specification_1autotoc_md144: change-page-percent ------------------- Sets the percentage of scroll of a page that triggers a page change in a ViewPager. * Applicable to: :ref:`EE::UI::UIViewPager ` (ViewPager). * Data Type: `number <#number-data-type>`__ (normalized between ``0`` and ``1``) * Default value: ``0.33`` .. _doxid-css_specification_1autotoc_md146: checked ------- Sets as checkbox as checked * Applicable to: :ref:`EE::UI::UICheckBox ` (CheckBox). * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md148: check-mode ---------- Checkboxs have two possible interaction modes for changing its checked state. * Applicable to: :ref:`EE::UI::UICheckBox ` (CheckBox). * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``element`` : Checked state will change by clicking anywhere in the widget (clicking over text or icon) * ``button`` : Checked state will only change by clicking over the icon * Default value: ``element`` .. _doxid-css_specification_1autotoc_md150: click-step ---------- For any element that has a stepped value change, this sets the step variation for a click to the element. * Applicable to: :ref:`EE::UI::UIScrollBar ` (ScrollBar), :ref:`EE::UI::UISlider ` (Slider), :ref:`EE::UI::UISpinBox ` (SpinBox). * Data Type: `number <#number-data-type>`__ * Default value: * ScrollBar: ``0.1`` * Slider: ``0.1`` * SpinBox: ``1`` .. _doxid-css_specification_1autotoc_md152: clip ---- Specifies how the clipping is applied to the element if clip is enabled. * Applicable to: Any element * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``none`` : No clipping is applied. * ``content-box`` : Clips the content box of the element (means the whole box). * ``padding-box`` : Clips the padding box of the element (the whole box minus the padding). * ``border-box`` : Clips the border box of the element (the content box plus the border). * Default Value: Varies for each widget/element. .. _doxid-css_specification_1autotoc_md154: color ----- Read `color `__ documentation. .. _doxid-css_specification_1autotoc_md156: column-mode ----------- Sets the column mode of a grid layout. The column mode defines how the size of the column of a grid layout is measured. * Applicable to: :ref:`EE::UI::UIGridLayout ` (GridLayout) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``size`` : The column width of each grid child will be defined with a fixed width based on the value of the `column-width <#column-width>`__ length. * ``weight`` : The column width of each grid child will be calculated as a normalized percentage of the total grid width using the `column-weight <#column-weight>`__ value. * Default value: ``weight`` .. _doxid-css_specification_1autotoc_md158: column-margin ------------- Sets the horizontal separation between each element in the grid layout. * Applicable to: :ref:`EE::UI::UIGridLayout ` (GridLayout) * Data Type: `length <#length-data-type>`__ * Default value: ``0dp`` .. _doxid-css_specification_1autotoc_md160: column-weight ------------- Sets the percentage width of the child elements of a grid layout. `column-mode <#column-mode>`__ must be ``weight`` in order to work. * Applicable to: :ref:`EE::UI::UIGridLayout ` (GridLayout) * Data Type: `number <#number-data-type>`__ (normalized between ``0`` and ``1``) * Default value: ``0.25`` .. _doxid-css_specification_1autotoc_md162: column-width ------------ Sets the width of the child elements of a grid layout. * Applicable to: :ref:`EE::UI::UIGridLayout ` (GridLayout) * Data Type: `length <#length-data-type>`__ * Default value: ``0`` .. _doxid-css_specification_1autotoc_md164: column-width-mode ----------------- Selects how table and tree view column widths are represented and resized. * Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``pixels`` : Column widths are stored as fixed pixel lengths and can extend beyond the available content width. * ``percentage`` : Visible column widths are stored as normalized percentages of the available content width. Resizing a column adjusts an adjacent visible column to preserve the total. * Default value: ``pixels`` .. _doxid-css_specification_1autotoc_md166: column-width-mode-menu ---------------------- Enables a context menu on table and tree view column headers for switching between pixel and percentage column width modes. * Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md168: cursor ------ Read `cursor `__ documentation. Custom cursors not yet supported (but supported by the engine, only not implemented in the CSS side). .. _doxid-css_specification_1autotoc_md170: date-format ----------- Sets the date display pattern, or ``locale`` to use the editor locale. Supported tokens are ``d`` / ``dd``, ``M`` / ``MM``, and ``yy`` / ``yyyy``; all three date components are required. Single quotes escape literal text. For example: ``date-format: "dd/MM/yyyy";``. This changes display and editing, while `value <#value>`__ retains ISO serialization. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `string <#string-data-type>`__ * Default value: ``locale`` .. _doxid-css_specification_1autotoc_md172: direction --------- Sets the UI direction of an element and of every descendant that does not set its own direction. The direction decides how logical values resolve: ``start`` / ``end`` alignments and gravities, ``margin-inline-*`` / ``padding-inline-*``, ``layout-to-start-of`` / ``layout-to-end-of``, the progression of horizontal LinearLayout, FlowLayout, Flexbox rows and CSS Grid columns, and the side of directional parts of standard controls (check box indicators, menu shortcuts and submenu arrows, tabs, tree indentation). Physical properties such as ``margin-left``, ``left`` or ``right`` never change meaning. The element direction is also the default base direction of its text. The HTML ``dir`` attribute maps to this property; ``dir="auto"`` is currently treated as ``inherit``. eepp implements inheritance in the widget tree: the effective direction also follows directions set from C++ (``UIWidget::setDirection``, ``UISceneNode::setDirection``) and changes at runtime without reloading styles. Directions do not cross document scenes: a ``UIWebView`` document starts as ``ltr``. * Applicable to: Any element * Data Type: `string <#string-data-type>`__ * Value List: * ``ltr`` : Left-to-right. * ``rtl`` : Right-to-left. * ``inherit`` : Use the parent's direction (default). * Default value: ``inherit`` (scene roots are ``ltr``) * Aliases: ``dir`` .. _doxid-css_specification_1autotoc_md174: disabled -------- Disables an HTML input when the attribute/property is present, including an empty value. Disabled temporal inputs are excluded from constraint validation and form submission. This HTML presence attribute is distinct from the native `enabled <#enabled>`__ boolean property. * Applicable to: :ref:`EE::UI::UIHTMLInput ` (input) * Data Type: HTML presence attribute * Default value: *Absent* .. _doxid-css_specification_1autotoc_md176: disable-editor-flags -------------------- Allows disabling specific behavior flags for the code editor component. Flags set here take precedence over `enable-editor-flags <#enable-editor-flags>`__. Multiple flags are separated by ``|``. * Applicable to: Any element child of a :ref:`EE::UI::UICodeEditor ` (CodeEditor) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * All flags listed in `enable-editor-flags <#enable-editor-flags>`__ can be used here to disable their respective features. * ``editorfeatures`` : Macro Flag - Disables line numbers, whitespace display, folding regions, current line highlight, matching bracket highlight, selection match highlight, color picker, minimap, and find/replace. Resets line breaking and forces the editor to use the default style. * Default value: *No value* .. _doxid-css_specification_1autotoc_md178: displayed-month --------------- Sets the calendar month to display using an ISO date (``yyyy-MM-dd``). The day component is normalized to the first day of that month. Navigation does not change the selected value. * Applicable to: :ref:`EE::UI::UICalendar ` (Calendar) * Data Type: `string <#string-data-type>`__ * Default value: Current month for a standalone calendar; picker popups synchronize on opening .. _doxid-css_specification_1autotoc_md180: display-options --------------- Allows to set what information should be displayed of the current image. Multiple flags can be set, flags are separated by ``|``. * Applicable to: Any child of a EE::UI::UIImageViewer (ImageViewer) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``name`` : Displays the file name * ``dimensions`` : Displays the image dimensions * ``path`` : Displays the file path * ``gallery_position`` : Displays the gallery position of the current image (ex: ``4 / 15``) * ``size`` : Displays the file size * ``type`` : Displays the image type * Default value: *No value* .. _doxid-css_specification_1autotoc_md182: display-percent --------------- Enables/disables displaying the percentage of progress in the progress bar. * Applicable to: :ref:`EE::UI::UIProgressBar ` (ProgressBar) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md184: drag-resistance --------------- Sets the amount of drag that is needed to start dragging an element. * Applicable to: :ref:`EE::UI::UIViewPager ` (ViewPager) * Data Type: `length <#length-data-type>`__ * Default value: ``8dp`` .. _doxid-css_specification_1autotoc_md186: droppable-hovering-color ------------------------ Sets the foreground color to highlight the current dragged element that its is hovering an element that accepts a drop of the dragged element. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget), :ref:`EE::UI::UIRoot ` (:root) * Data Type: `color <#color-data-type>`__ * Default value: ``#FFFFFF20`` .. _doxid-css_specification_1autotoc_md188: editable -------- Enable or disable editing on table and tree view cells. * Applicable to: EE::UI::UIAbstractView (TableView, TreeView) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md190: enabled ------- Sets if the element is enabled * Applicable to: Any element * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``true`` .. _doxid-css_specification_1autotoc_md192: enable-editor-flags ------------------- Allows enabling specific behavior flags for the code editor component. Multiple flags can be specified, separated by ``|``. * Applicable to: Any element child of a :ref:`EE::UI::UICodeEditor ` (CodeEditor) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``linenumber`` : Displays line numbers in the gutter. * ``foldingregion`` : Shows code folding regions for collapsing/expanding blocks. * ``whitespaces`` : Renders whitespace characters (spaces, tabs) as visible symbols. * ``lineendings`` : Displays line ending characters (e.g., CR, LF). * ``highlightcurrentline`` : Highlights the background of the current line containing the cursor. * ``highlightmatchingbracket`` : Highlights the bracket matching the one under the cursor. * ``highlightselectionmatch`` : Highlights all occurrences of the selected text in the document. * ``colorpickeronselection`` : Opens a color picker dialog when a color value is selected. * ``verticalscrollbar`` : Enables the vertical scrollbar for scrolling through content. * ``horizontalscrollbar`` : Enables the horizontal scrollbar for scrolling through content. * ``colorpreview`` : Shows a color preview on mouse hover. * ``interactivelinks`` : Enables interaction with clickable hyperlinks within the editor. * ``displayloader`` : Displays a loading indicator while the document is loading. * ``defaultcontextmenu`` : Provides a default context menu with standard editing options. * ``minimap`` : Shows a minimap (overview) of the document on the right side. * ``autoclosexmltags`` : Automatically inserts closing tags in XML/HTML documents. * ``findreplace`` : Enables the find and replace functionality. * ``showindentationguides`` : Displays vertical guides to indicate indentation levels. * ``linesrelativeposition`` : Shows the relative position of lines (e.g., in a diff view). * ``lockedicon`` : Displays a lock icon when the editor is in a locked state. * ``foldsalwaysvisible`` : Keeps fold markers visible even when not hovered. * ``foldsvisible`` : Makes folded code regions visible. * ``flashcursor`` : Enables a flashing animation for the text cursor. * ``defaultstyle`` : Applies the default styling and theme to the editor. * Default value: *No value* .. _doxid-css_specification_1autotoc_md194: expand-text ----------- If ``true`` the inner element for text is expanded to occupy as much horizontal space as possible. * Applicable to: :ref:`EE::UI::UIPushButton ` (PushButton) and any element that extends it: UIMenuItem, UISelectButton (SelectButton), UITableCell , UITableHeaderColumn. * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md196: first-day-of-week ----------------- Sets the first weekday of the calendar: Sunday ``0`` through Saturday ``6``. This controls the weekday header and day-grid ordering. * Applicable to: :ref:`EE::UI::UICalendar ` (Calendar) * Data Type: `integer <#integer-data-type>`__ * Default value: The calendar locale's first weekday .. _doxid-css_specification_1autotoc_md198: focused-date ------------ Sets the calendar keyboard-focus date using ISO format (``yyyy-MM-dd``). It is clamped to the calendar bounds and brings its month into view without selecting it. * Applicable to: :ref:`EE::UI::UICalendar ` (Calendar) * Data Type: `string <#string-data-type>`__ * Default value: Today for a standalone calendar; picker popups synchronize on opening .. _doxid-css_specification_1autotoc_md200: font-family ----------- Read `font-family `__ documentation. .. _doxid-css_specification_1autotoc_md202: font-size --------- Read `font-size `__ documentation. .. _doxid-css_specification_1autotoc_md204: font-style ---------- Read `font-style `__ documentation. .. _doxid-css_specification_1autotoc_md206: font-weight ----------- Read `font-weight `__ documentation. Supported values: ``normal``, ``bold``, ``bolder``, ``lighter``, ``100``, ``200``, ``300``, ``400``, ``500``, ``600``, ``700``, ``800``, ``900``, plus named weights ``thin`` (100), ``extra-light`` / ``extralight`` (200), ``light`` (300), ``medium`` (500), ``semi-bold`` / ``semibold`` (600), ``extra-bold`` / ``extrabold`` (800), ``black`` / ``heavy`` (900). Weights >= 600 (SemiBold) set the ``Text::Bold`` style flag and will resolve to the nearest matching system font variant when available. The ``font`` shorthand property also supports the weight token. .. _doxid-css_specification_1autotoc_md208: fill-color ---------- Sets the fill color of a element. * Applicable to: :ref:`EE::UI::UILoader ` (Loader) * Data Type: `color <#color-data-type>`__ * Default value: ``white`` .. _doxid-css_specification_1autotoc_md210: flags ----- Allows to set some very specific flags to the element. Multiple flags can be set, flags are separated by ``|``. * Applicable to: Any element * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``autosize`` : This flag allows the widget/element to resize itself to a minimum size that allows the widget to be fully visible. * ``clip`` : Enables clipping of the element box. * ``multiselect`` : Enables multiple selection on elements that support selection. :ref:`EE::UI::UIListBox ` (ListBox) for the moment. * ``autopadding`` : Enables the element to calculate the padding based on the skin size. * ``reportsizechangetochildren`` : When enabled the element will emit a event (``OnParentSizeChange``) to its children reporting the size change of the parent. * Default value: *No value* .. _doxid-css_specification_1autotoc_md212: foreground-bottom-left-radius ----------------------------- Same as `border-bottom-left-radius <#border-bottom-left-radius>`__ but for the foreground of the node. .. _doxid-css_specification_1autotoc_md214: foreground-bottom-right-radius ------------------------------ Same as `border-bottom-right-radius <#border-bottom-right-radius>`__ but for the foreground of the node. .. _doxid-css_specification_1autotoc_md216: foreground-color ---------------- Same as `background-color <#background-color>`__ but for the foreground. .. _doxid-css_specification_1autotoc_md218: foreground-image ---------------- Same as `background-image <#background-image>`__ but for the foreground. * Applicable to: Any element * Data Type: `resource-path <#resource-path-data-type>`__ * Default value: ``none`` .. _doxid-css_specification_1autotoc_md220: foreground-position-x --------------------- Same as `background-position-x <#background-position-x>`__ but for the foreground. .. _doxid-css_specification_1autotoc_md222: foreground-position-y --------------------- Same as `background-position-y <#background-position-y>`__ but for the foreground. .. _doxid-css_specification_1autotoc_md224: foreground-repeat ----------------- Same as `background-repeat <#background-repeat>`__ but for the foreground. .. _doxid-css_specification_1autotoc_md226: foreground-size --------------- Same as `background-size <#background-size>`__ but for the foreground. .. _doxid-css_specification_1autotoc_md228: foreground-tint --------------- Sets the tint color of the foreground image. * Applicable to: Any element * Data Type: `color <#color-data-type>`__ * Default value: ``white`` .. _doxid-css_specification_1autotoc_md230: foreground-top-left-radius -------------------------- Same as `border-top-left-radius <#border-top-left-radius>`__ but for the foreground of the node. .. _doxid-css_specification_1autotoc_md232: foreground-top-right-radius --------------------------- Same as `border-top-right-radius <#border-top-right-radius>`__ but for the foreground of the node. .. _doxid-css_specification_1autotoc_md234: gravity ------- Sets the horizontal and vertical align of the inner elements/contents of a widget (for example the text on a TextView). Vertical and horizontal can be set by using ``|`` as a separator of each rule. * Applicable to: Any element. This applies at the :ref:`EE::UI::UIWidget ` (Widget) level, the base element of all widgets. But every widget has it's own behaviour, based on it's own content. Some may not do anything. * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``left`` : Physical left in every direction. * ``right`` : Physical right in every direction. * ``start`` : Inline-start edge: left in ``ltr``, right in ``rtl`` (see `direction <#direction>`__). * ``end`` : Inline-end edge: right in ``ltr``, left in ``rtl``. * ``center_horizontal`` * ``top`` * ``bottom`` * ``center_vertical`` * ``center`` : shorthand of ``center_horizontal|center_vertical`` * Default value: Varies on each widget implementation. Widgets that do not set an explicit alignment default to ``start``, which is ``left`` in left-to-right contexts. * Syntax: .. ref-code-block:: cpp gravity: center; gravity: left; gravity: start|center_vertical; gravity: left|top; gravity: center_horizontal|bottom; .. _doxid-css_specification_1autotoc_md236: gravity-owner ------------- Widgets elements can inform that own children position using a special flag on its implementation (UI_OWNS_CHILDREN_POSITION). Sometimes some layouts may need to override the parent behavior that uses that flag. This flag will let the layout manage his gravity against its parent in all cases. * Applicable to: Any layout element. * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md238: half-slider ----------- Defines how the slider widget should set its movement limits against the slider. With ``half-slider`` enabled the button will start and end from its center (and not its border). * Applicable to: :ref:`EE::UI::UISlider ` (Slider) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md240: hint ---- Sets the hint text of an input. This is the equivalen of ``placeholder`` in HTML. Usually this property will not be set in the CSS file but in the XML as an attribute or from the code implementation, but it's available as an option. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `string <#string-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md242: hint-color ---------- Sets the hint font color. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `color <#color-data-type>`__ * Default value: ``white`` .. _doxid-css_specification_1autotoc_md244: hint-display ------------ Sets the hint display mode. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``always`` : Always visible * ``focus`` : Visible on focus * Default value: ``always`` .. _doxid-css_specification_1autotoc_md246: hint-font-family ---------------- Sets the hint font family. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `string <#string-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md248: hint-font-size -------------- Sets the hint font size. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `length <#length-data-type>`__ * Default value: ``12px`` .. _doxid-css_specification_1autotoc_md250: hint-font-style --------------- Sets the hint font style. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``underline`` * ``bold`` * ``italic`` * ``strikethrough`` * ``shadow`` : Drops a shadow to the text. * Default value: *No value* .. _doxid-css_specification_1autotoc_md252: hint-shadow-color ----------------- Sets the hint font shadow color. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `color <#color-data-type>`__ * Default value: ``#323232E6`` .. _doxid-css_specification_1autotoc_md254: hint-stroke-color ----------------- Sets the hint font stroke (the outline) color. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `color <#color-data-type>`__ * Default value: ``black`` .. _doxid-css_specification_1autotoc_md256: hint-shadow-offset ------------------ Sets the hint font shadow offset. * Applicable to: :ref:`EE::UI::UITextView ` (TextView) and any element that holds inside text or extends from a TextView. :ref:`EE::UI::UICheckBox ` (CheckBox), :ref:`EE::UI::UIRadioButton ` (RadioButton), :ref:`EE::UI::UITextInput ` (TextInput), :ref:`EE::UI::UIListBoxItem ` (ListBox::item), :ref:`EE::UI::UIDropDownList ` (DropDownList), :ref:`EE::UI::UIPushButton ` (PushButton), EE::UI::UIToolti (Tooltip) * Data Type: `vector2-length <#vector2-length-data-type>`__ * Default offset: ``1dp 1dp`` .. _doxid-css_specification_1autotoc_md258: hint-stroke-width ----------------- Sets the hint font stroke (the outline) width. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `length <#length-data-type>`__ * Default value: ``0dp`` .. _doxid-css_specification_1autotoc_md260: hour-cycle ---------- Sets the hour cycle for locale-derived time patterns: ``locale``, ``12``, or ``24``. Aliases ``h12`` and ``h24`` are accepted as values. An explicit `time-format <#time-format>`__ defines its own hour tokens and takes precedence. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `string <#string-data-type>`__ * Default value: ``locale`` .. _doxid-css_specification_1autotoc_md262: hour-step --------- Sets the positive integer hour increment for stepping the active hour segment, including date-time popup steppers. Time-only stepping wraps within the day; date-time stepping carries across date boundaries. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `integer <#integer-data-type>`__ * Default value: ``1`` .. _doxid-css_specification_1autotoc_md264: href ---- Specifies the link destination of an Anchor element * Applicable to: :ref:`EE::UI::UIAnchor ` (Anchor) * Data Type: `string <#string-data-type>`__ * Default value: ``0dp`` .. _doxid-css_specification_1autotoc_md266: hscroll-mode ------------ Sets the horizontal scroll mode to any scrollable element. The mode defines the visibility of the horizontal scroll. * Applicable to: EE::UI::DropDownList (DropDownList), :ref:`EE::UI::UIListBox ` (ListBox), :ref:`EE::UI::UIScrollView ` (ScrollView), :ref:`EE::UI::UIWidgetTable ` (WidgetTable), :ref:`EE::UI::UITextEdit ` (TextEdit). * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``auto`` : The horizontal scrollbar will be visible only when needed. * ``on`` : The horizontal scrollbar will be always visible. * ``off`` : The horizontal scrollbar will be always hidden. * Default value: ``auto`` .. _doxid-css_specification_1autotoc_md268: icon ---- Sets an icon to an element that support icons. * Applicable to: :ref:`EE::UI::UIImage ` (Image), :ref:`EE::UI::UIPushButton ` (PushButton), :ref:`EE::UI::UITab ` (Tab) * Data Type: `resource-path <#resource-path-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md270: icon-size --------- Sets the cell icon size in table and tree views. * Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView) * Data Type: `length <#length-data-type>`__ * Default value: ``12dp`` .. _doxid-css_specification_1autotoc_md272: indent-width ------------ Sets the indentation width for each nesting level in a tree view. * Applicable to: :ref:`EE::UI::UITreeView ` (TreeView) * Data Type: `length <#length-data-type>`__ * Default value: ``6dp`` .. _doxid-css_specification_1autotoc_md274: indeterminate ------------- Enables/disables indeterminate mode for a loader. Indeterminate mode is used when the progress of the load can't be determined. * Applicable to: :ref:`EE::UI::UILoader ` (Loader) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``true`` .. _doxid-css_specification_1autotoc_md276: inner-widget-orientation ------------------------ PushButton can contain 3 widgets: the text (textbox), the icon, and a custom extra item. And with these 3 items does its own layouting. This property allows configuring the order in which these items are displayed/sorted inside the button. * Applicable to: :ref:`EE::UI::UIPushButton ` (PushButton) and any element that extends it: UIMenuItem, UISelectButton (SelectButton), UITableCell , UITableHeaderColumn. * Data Type: `string-list <#string-list-data-type>`__ * Value List (Widget is the custom widget): * ``widgeticontextbox`` : Widget | Icon | TextBox * ``widgettextboxicon`` : Widget | TextBox | Icon * ``icontextboxwidget`` : Icon | TextBox | Widget * ``iconwidgettextbox`` : Icon | Widget | TextBox * ``textboxiconwidget`` : TextBox | Icon | Widget * ``textboxwidgeticon`` : TextBox | Widget | Icon * Default value: ``widgeticontextbox`` .. _doxid-css_specification_1autotoc_md278: input-mode ---------- Sets the input mode of the element. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``normal`` : Normal text input. * ``password`` : Password text input (bullets). * Default value: ``normal`` .. _doxid-css_specification_1autotoc_md280: layout-gravity -------------- The layout gravity defines how the element gravitates against its parent (when possible). Gravity specifies how a component should be placed in its group of cells. Must be one or more (separated by ``|``) of the *value list* values. This behaves as the `android:layout_gravity `__ XML attribute (for those who are familiar with). * Applicable to: Any element child of a layout element * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``left`` : Push element to the left of its container. * ``right`` : Push element to the right of its container. * ``start`` : Push element to the inline-start edge of its container (left in ``ltr``, right in ``rtl``). * ``end`` : Push element to the inline-end edge of its container (right in ``ltr``, left in ``rtl``). * ``center_horizontal`` : Push element to the horizontal center of its container. * ``top`` : Push element to the top of its container. * ``bottom`` : Push element to the bottom of its container. * ``center_vertical`` : Place element in the vertical center of its container. * ``center`` : shorthand of ``center_horizontal|center_vertical`` * Default value: ``start|top`` (equivalent to ``left|top`` in left-to-right contexts). An omitted horizontal component is ``start``. * Aliases: ``layout_gravity``, ``lg`` .. _doxid-css_specification_1autotoc_md282: layout-height ------------- Specifies the basic height of the element. This is a required attribute for any element inside of a containing layout element that doesn't use any fixed size for its children (ej: :ref:`EE::UI::UILinearLayout `, :ref:`EE::UI::UIRelativeLayout `). Its value may be a length/dimension (such as ``12dp``) for a constant height or one of the special constants. * Applicable to: Any element child of a :ref:`EE::UI::UILinearLayout ` (LinearLayout) or :ref:`EE::UI::UIRelativeLayout ` (RelativeLayout) * Data Type: `length <#length-data-type>`__ or string-list * Value List: (for the constant values) * ``match_parent`` : The element must be as big as its parent. * ``wrap_content`` : The element should be only big enough to enclose its content (plus padding). * Default value: ``wrap_content`` * Aliases: ``layout_height``, ``lh`` .. _doxid-css_specification_1autotoc_md284: layout-to-bottom-of ------------------- Positions the top edge of this element below the given anchor element ID. Accommodates top margin of this element and bottom margin of anchor view. * Applicable to: Any child of a :ref:`EE::UI::UIRelativeLayout ` (RelativeLayout) * Data Type: `string <#string-data-type>`__ (anchor element ID) * Default value: *No value* * Aliases: ``layout_to_bottom_of`` .. _doxid-css_specification_1autotoc_md286: layout-to-left-of ----------------- Positions the right edge of this element to the left of the given anchor element ID. Accommodates right margin of this element and left margin of anchor element. * Applicable to: Any child of a :ref:`EE::UI::UIRelativeLayout ` (RelativeLayout) * Data Type: `string <#string-data-type>`__ (anchor element ID) * Default value: *No value* * Aliases: ``layout_to_left_of`` .. _doxid-css_specification_1autotoc_md288: layout-to-right-of ------------------ Positions the left edge of this element to the right of the given anchor element ID. Accommodates left margin of this element and right margin of anchor element. * Applicable to: Any child of a :ref:`EE::UI::UIRelativeLayout ` (RelativeLayout) * Data Type: `string <#string-data-type>`__ (anchor element ID) * Default value: *No value* * Aliases: ``layout_to_right_of`` .. _doxid-css_specification_1autotoc_md290: layout-to-start-of ------------------ Logical counterpart of `layout-to-left-of <#layout-to-left-of>`__ / `layout-to-right-of <#layout-to-right-of>`__ : positions this element on the inline-start side of the given anchor element ID. It resolves to ``layout-to-left-of`` in ``ltr`` and to ``layout-to-right-of`` in ``rtl``, using the element's `direction <#direction>`__, and follows runtime direction changes. * Applicable to: Any child of a :ref:`EE::UI::UIRelativeLayout ` (RelativeLayout) * Data Type: `string <#string-data-type>`__ (anchor element ID) * Default value: *No value* * Aliases: ``layout_to_start_of`` .. _doxid-css_specification_1autotoc_md292: layout-to-end-of ---------------- Positions this element on the inline-end side of the given anchor element ID. It resolves to ``layout-to-right-of`` in ``ltr`` and to ``layout-to-left-of`` in ``rtl``. * Applicable to: Any child of a :ref:`EE::UI::UIRelativeLayout ` (RelativeLayout) * Data Type: `string <#string-data-type>`__ (anchor element ID) * Default value: *No value* * Aliases: ``layout_to_end_of`` .. _doxid-css_specification_1autotoc_md294: layout-to-top-of ---------------- Positions the bottom edge of this element above the given anchor element ID. Accommodates bottom margin of this element and top margin of anchor view. * Applicable to: Any child of a :ref:`EE::UI::UIRelativeLayout ` (RelativeLayout) * Data Type: `string <#string-data-type>`__ (anchor element ID) * Default value: *No value* * Aliases: ``layout_to_top_of`` .. _doxid-css_specification_1autotoc_md296: layout-weight ------------- Indicates how much of the remaining space in a ``:ref:`EE::UI::UILinearLayout ``` (LinearLayout) is allocated to the element along the layout orientation. A value of ``0`` means that the element does not participate in weighted space distribution. Positive values are treated as **relative weights**. The remaining space is distributed among all visible children with a positive weight proportionally to each child's weight: .. ref-code-block:: cpp childSize = remainingSpace * childWeight / totalWeight where ``totalWeight`` is the sum of all positive child weights. Weights do **not** need to be normalized or sum to ``1``. For example, the following weight pairs are equivalent: .. ref-code-block:: cpp 1 / 3 0.25 / 0.75 25 / 75 The weight is applied to the axis corresponding to the ``LinearLayout`` orientation. For a horizontal ``LinearLayout``, the weighted child should normally use: .. ref-code-block:: cpp layout-width: 0; For a vertical ``LinearLayout``, the weighted child should normally use: .. ref-code-block:: cpp layout-height: 0; This allows the layout to assign the weighted dimension entirely from the available remaining space. * Applicable to: Any element child of a ``:ref:`EE::UI::UILinearLayout ``` (LinearLayout) * Data Type: `number <#number-data-type>`__ * Default value: ``0`` * Aliases: ``layout_weight``, ``lw8`` .. _doxid-css_specification_1autotoc_md298: layout-width ------------ Specifies the basic width of the element. This is a required attribute for any element inside of a containing layout element that doesn't use any fixed size for its children (ej: :ref:`EE::UI::UILinearLayout `, :ref:`EE::UI::UIRelativeLayout `). Its value may be a length/dimension (such as ``12dp``) for a constant width or one of the special constants. * Applicable to: Any element child of a :ref:`EE::UI::UILinearLayout ` (LinearLayout) or :ref:`EE::UI::UIRelativeLayout ` (RelativeLayout) * Data Type: `length <#length-data-type>`__ or string-list * Value List: (for the constant values) * ``match_parent`` : The element must be as big as its parent. * ``wrap_content`` : The element should be only big enough to enclose its content (plus padding). * Default value: ``wrap_content`` * Aliases: ``layout_width``, ``lw`` .. _doxid-css_specification_1autotoc_md300: light-dark ---------- Read `light-dark `__ documentation. .. _doxid-css_specification_1autotoc_md302: line-spacing ------------ Sets a extra line spacing to the line box. * Applicable to: Any element child of a :ref:`EE::UI::UICodeEditor ` (CodeEditor) * Data Type: `length <#length-data-type>`__ * Default value: ``0dp`` .. _doxid-css_specification_1autotoc_md304: line-wrap-mode -------------- Specifies the line wrap mode of the element. * Applicable to: Any element child of a :ref:`EE::UI::UICodeEditor ` (CodeEditor) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``word`` : Wraps against words. * ``letter`` : Wraps against letters. * ``nowrap`` : Does not wrap. * Default value: ``nowrap`` .. _doxid-css_specification_1autotoc_md306: line-wrap-type -------------- Specifies if line must wrap against its viewport or the defined line breaking column. * Applicable to: Any element child of a :ref:`EE::UI::UICodeEditor ` (CodeEditor) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``viewport`` : Wrap against the element viewport. * ``line_breaking_column`` : Wraps against the line breaking column. * Default value: ``viewport`` .. _doxid-css_specification_1autotoc_md308: locked ------ Enable or disable editing on code editor elements. * Applicable to: :ref:`EE::UI::UICodeEditor ` (TextEdit) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md310: main-column ----------- Sets the column index that should be prioritized to occupy as much space as possible when auto-columns or auto-expand is enabled. * Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView) * Data Type: integer * Default value: ``0`` .. _doxid-css_specification_1autotoc_md312: margin-bottom ------------- Read `margin-bottom `__ documentation. * Aliases: ``layout_marginBottom`` .. _doxid-css_specification_1autotoc_md314: margin-inline ------------- Shorthand of `margin-inline-start <#margin-inline-start>`__ and `margin-inline-end <#margin-inline-end>`__. One value sets both edges; two values set start and end. Read `margin-inline `__ documentation. .. _doxid-css_specification_1autotoc_md316: margin-inline-end ----------------- Flow-relative margin of the inline-end edge: the right margin in ``ltr``, the left margin in ``rtl``. Read `margin-inline-end `__ documentation. See `Flow-relative box properties <#flow-relative-box-properties>`__. * Aliases: ``margin-end``, ``margin_end``, ``layout_marginEnd`` .. _doxid-css_specification_1autotoc_md318: margin-inline-start ------------------- Flow-relative margin of the inline-start edge: the left margin in ``ltr``, the right margin in ``rtl``. Read `margin-inline-start `__ documentation. See `Flow-relative box properties <#flow-relative-box-properties>`__. * Aliases: ``margin-start``, ``margin_start``, ``layout_marginStart`` .. _doxid-css_specification_1autotoc_md320: margin-left ----------- Read `margin-left `__ documentation. * Aliases: ``layout_marginLeft`` .. _doxid-css_specification_1autotoc_md322: margin-right ------------ Read `margin-right `__ documentation. * Aliases: ``layout_marginRight`` .. _doxid-css_specification_1autotoc_md324: margin-top ---------- Read `margin-top `__ documentation. * Aliases: ``layout_marginTop`` .. _doxid-css_specification_1autotoc_md326: max --- Sets the maximum valid value for HTML ``date``, ``time``, and ``datetime-local`` inputs. Use the input type's ISO value syntax (see `value <#value>`__). Invalid bounds are ignored. Out-of-range values report a validation error rather than being silently clamped. Time ranges with ``min`` later than ``max`` wrap across midnight. * Applicable to: :ref:`EE::UI::UIHTMLInput ` (input) * Data Type: `string <#string-data-type>`__ * Default value: *No bound* .. _doxid-css_specification_1autotoc_md328: max-date -------- Sets the inclusive maximum for native ``date`` mode using ISO syntax (``yyyy-MM-dd``). Native editors clamp values to their active mode's bounds. Calendar bounds also disable unavailable dates. An empty string removes the bound. If the bounds cross, the opposite bound moves to the new bound. HTML inputs use `min <#min>`__ and `max <#max>`__ instead. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker), :ref:`EE::UI::UICalendar ` (Calendar) * Data Type: `string <#string-data-type>`__ * Default value: *No bound* .. _doxid-css_specification_1autotoc_md330: max-datetime ------------ Sets the inclusive maximum for native ``datetime`` mode using ISO syntax (``yyyy-MM-ddTHH:mm:ss[.SSS]``). Native editors clamp values to their active mode's bounds. An empty string removes the bound. If the bounds cross, the opposite bound moves to the new bound. HTML inputs use `min <#min>`__ and `max <#max>`__ instead. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `string <#string-data-type>`__ * Default value: *No bound* .. _doxid-css_specification_1autotoc_md332: max-time -------- Sets the inclusive maximum for native ``time`` mode using ISO syntax (``HH:mm:ss[.SSS]``). Native editors clamp values to their active mode's bounds. An empty string removes the bound. If the bounds cross, the opposite bound moves to the new bound. HTML inputs use `min <#min>`__ and `max <#max>`__ instead. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `string <#string-data-type>`__ * Default value: *No bound* .. _doxid-css_specification_1autotoc_md334: max-height ---------- Read `max-height `__ documentation. .. _doxid-css_specification_1autotoc_md336: max-width --------- Read `max-width `__ documentation. .. _doxid-css_specification_1autotoc_md338: max-edge-resistance ------------------- On a view pager the max edge resistance allows to scroll outside the edge limits by a percentage of the element width/height (depending on the view pager orientation) and automatically go back to the final position when released. * Applicable to: :ref:`EE::UI::UIViewPager ` (ViewPager) * Data Type: `number <#number-data-type>`__ (normalized between ``0`` and ``1``) * Default value: ``0`` .. _doxid-css_specification_1autotoc_md340: max-length ---------- Sets the maximum length of an input. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: integer * Default value: *No value* .. _doxid-css_specification_1autotoc_md342: max-progress ------------ Sets the maximum number of progress that a loader can have. * Applicable to: :ref:`EE::UI::UILoader ` (Loader) * Data Type: `number <#number-data-type>`__ * Default value: ``100`` .. _doxid-css_specification_1autotoc_md344: max-tab-width ------------- Sets the maximum tab width accepted in a tab widget. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: `length <#length-data-type>`__ * Default value: ``300dp`` .. _doxid-css_specification_1autotoc_md346: max-text-length --------------- Sets the maximum text length in a tab. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: integer * Default value: ``100`` .. _doxid-css_specification_1autotoc_md348: max-value --------- Sets the maximum value that a range element will hold. * Applicable to: :ref:`EE::UI::UISlider ` (Slider), :ref:`EE::UI::UIScrollBar ` (ScrollBar), :ref:`EE::UI::UISpinBox ` (SpinBox) * Data Type: `number <#number-data-type>`__ * Default value: ``1`` for Slider and ScrollBar. Float numeric limits for SpinBox. .. _doxid-css_specification_1autotoc_md350: max-visible-items ----------------- Sets the maximum visible items for the list shown by a drop down list or combo box. * Applicable to: :ref:`EE::UI::UIDropDownList ` (DropDownList) * Data Type: integer * Default value: ``10`` .. _doxid-css_specification_1autotoc_md352: menu-width-mode --------------- Sets how is the dropdown-menu width calculated. * Applicable to: :ref:`EE::UI::UIDropDownList ` (DropDownList), :ref:`EE::UI::UIComboBox ` (ComboBox) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``dropdown`` : Same width as the dropdown button. * ``contents`` : The length of its contents. * ``contents-center`` : The length of its contents but centered against the dropdown button. * ``expand-if-needed`` : Same width as the dropdown button unless its contents are larger than the dropdown button, in that case it will expand to its contents. * ``expand-if-needed-center`` : Same as ``expand-if-needed`` but centered against the dropdown button. * Default value: ``dropdown`` .. _doxid-css_specification_1autotoc_md354: min --- Sets the minimum valid value for HTML ``date``, ``time``, and ``datetime-local`` inputs. Use the input type's ISO value syntax (see `value <#value>`__). Invalid bounds are ignored. Out-of-range values report a validation error rather than being silently clamped. Time ranges with ``min`` later than ``max`` wrap across midnight. * Applicable to: :ref:`EE::UI::UIHTMLInput ` (input) * Data Type: `string <#string-data-type>`__ * Default value: *No bound* .. _doxid-css_specification_1autotoc_md356: min-date -------- Sets the inclusive minimum for native ``date`` mode using ISO syntax (``yyyy-MM-dd``). Native editors clamp values to their active mode's bounds. Calendar bounds also disable unavailable dates. An empty string removes the bound. If the bounds cross, the opposite bound moves to the new bound. HTML inputs use `min <#min>`__ and `max <#max>`__ instead. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker), :ref:`EE::UI::UICalendar ` (Calendar) * Data Type: `string <#string-data-type>`__ * Default value: *No bound* .. _doxid-css_specification_1autotoc_md358: min-datetime ------------ Sets the inclusive minimum for native ``datetime`` mode using ISO syntax (``yyyy-MM-ddTHH:mm:ss[.SSS]``). Native editors clamp values to their active mode's bounds. An empty string removes the bound. If the bounds cross, the opposite bound moves to the new bound. HTML inputs use `min <#min>`__ and `max <#max>`__ instead. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `string <#string-data-type>`__ * Default value: *No bound* .. _doxid-css_specification_1autotoc_md360: min-time -------- Sets the inclusive minimum for native ``time`` mode using ISO syntax (``HH:mm:ss[.SSS]``). Native editors clamp values to their active mode's bounds. An empty string removes the bound. If the bounds cross, the opposite bound moves to the new bound. HTML inputs use `min <#min>`__ and `max <#max>`__ instead. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `string <#string-data-type>`__ * Default value: *No bound* .. _doxid-css_specification_1autotoc_md362: min-height ---------- Read `min-height `__ documentation. .. _doxid-css_specification_1autotoc_md364: min-icon-size ------------- Sets the minimum size of the icon inside a push button (or any widget that extends from it, for example a menu item or a tab). It's usually required for the :ref:`EE::UI::UIMenu ` (Menu) since the icon box must have a size if the menu contains items with icons and others without, otherwise the menu items will be misaligned. * Applicable to: :ref:`EE::UI::UIPushButton ` (PushButton), :ref:`EE::UI::UIMenuItem ` (Menu::item), :ref:`EE::UI::UITab ` (Tab), :ref:`EE::UI::UISelectButton ` (SelectButton), :ref:`EE::UI::UIMenuCheckBox ` (Menu::checkbox), :ref:`EE::UI::UIMenuSubMenu ` (Menu::SubMenu) * Data Type: `vector2-length <#vector2-length-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md366: min-tab-width ------------- Sets the minimum width that a tab can have inside a :ref:`EE::UI::UITabWidget ` (TabWidget). * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: `length <#length-data-type>`__ * Default value: ``32dp`` .. _doxid-css_specification_1autotoc_md368: min-value --------- Sets the minimum value that a range element will hold. * Applicable to: :ref:`EE::UI::UISlider ` (Slider), :ref:`EE::UI::UIScrollBar ` (ScrollBar), :ref:`EE::UI::UISpinBox ` (SpinBox) * Data Type: `number <#number-data-type>`__ * Default value: ``0`` .. _doxid-css_specification_1autotoc_md370: minute-step ----------- Sets the positive integer minute increment when stepping the active minute segment or using the date-time popup's minute buttons. For example, ``minute-step: 15;`` advances by fifteen minutes. This controls the increment, not validation or snapping to multiples. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `integer <#integer-data-type>`__ * Default value: ``1`` .. _doxid-css_specification_1autotoc_md372: min-width --------- Read `min-width `__ documentation. .. _doxid-css_specification_1autotoc_md374: movement-speed -------------- Sets the movement speed in displaced length per second of the progress bar filler. * Applicable to: :ref:`EE::UI::UIProgressBar ` (ProgressBar) * Data Type: `vector2-length <#vector2-length-data-type>`__ * Default value: ``0dp 0dp`` .. _doxid-css_specification_1autotoc_md376: mirror-on-rtl ------------- Mirrors the element rendering horizontally while its effective `direction <#direction>`__ is ``rtl``. Use it for semantic directional affordances such as back/forward or "next" chevrons. Mirroring is opt-in so arbitrary images never mirror. It is implemented as a negative horizontal scale around the element center (hit testing follows it); do not combine it with ``scale`` on the same element. * Applicable to: Any element * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md378: mode ---- Sets the shared editor mode: ``date``, ``time``, or ``datetime``. The picker classes initialize their corresponding mode automatically. Values and display formats follow the active mode. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `string <#string-data-type>`__ * Default value: ``date`` for DateTimeEdit and DatePicker; ``time`` for TimePicker; ``datetime`` for DateTimePicker .. _doxid-css_specification_1autotoc_md380: numeric ------- Sets the text input as a numeric input, this means that only numbers will be accepted and if `allow-float <#allow-float>`__ also is enabled it will allow numeric float numbers. * Applicable to: :ref:`EE::UI::UITextInput ` (TextInput) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md382: opacity ------- Read `opacity `__ documentation. .. _doxid-css_specification_1autotoc_md384: orientation ----------- Sets the orientation to any element that allows vertical and horizontal orientation. * Applicable to: :ref:`EE::UI::UILinearLayout ` (LinearLayout), :ref:`EE::UI::UISlider ` (Slider), :ref:`EE::UI::UIScrollBar ` (ScrollBar), :ref:`EE::UI::UIViewPager ` (ViewPager) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``horizontal`` * ``vertical`` * Default value: ``vertical`` for LinearLayout, Slider and ScrollBar, ``horizontal`` for ViewPager .. _doxid-css_specification_1autotoc_md386: outline-thickness ----------------- Sets the outline thickness of the loader spinner. * Applicable to: :ref:`EE::UI::UILoader ` (Loader) * Data Type: `length <#length-data-type>`__ * Default value: ``8dp`` .. _doxid-css_specification_1autotoc_md388: owns ---- Indicates the element ID that the Tab element owns. The ownership indicates that the element ID is going to be shown when the Tab element is selected, and will be closed if the Tab is closed. The owned element will be automatically resized to the tab widget container size. * Applicable to: :ref:`EE::UI::UITab ` (Tab) * Data Type: `string <#string-data-type>`__ (element ID) * Default value: *No value* .. _doxid-css_specification_1autotoc_md390: padding-bottom -------------- Read `padding-bottom `__ documentation. .. _doxid-css_specification_1autotoc_md392: padding-inline -------------- Shorthand of `padding-inline-start <#padding-inline-start>`__ and `padding-inline-end <#padding-inline-end>`__. One value sets both edges; two values set start and end. .. _doxid-css_specification_1autotoc_md394: padding-inline-end ------------------ Flow-relative padding of the inline-end edge: the right padding in ``ltr``, the left padding in ``rtl``. Read `padding-inline-end `__ documentation. See `Flow-relative box properties <#flow-relative-box-properties>`__. * Aliases: ``padding-end``, ``padding_end`` .. _doxid-css_specification_1autotoc_md396: padding-inline-start -------------------- Flow-relative padding of the inline-start edge: the left padding in ``ltr``, the right padding in ``rtl``. Read `padding-inline-start `__ documentation. See `Flow-relative box properties <#flow-relative-box-properties>`__. * Aliases: ``padding-start``, ``padding_start`` .. _doxid-css_specification_1autotoc_md398: padding-left ------------ Read `padding-left `__ documentation. .. _doxid-css_specification_1autotoc_md400: padding-right ------------- Read `padding-right `__ documentation. .. _doxid-css_specification_1autotoc_md402: padding-top ----------- Read `padding-top `__ documentation. .. _doxid-css_specification_1autotoc_md404: page-locked ----------- Locks/unlocks the current page in a view pager (locking means that the page cannot be changed and it's not scrollable). * Applicable to: :ref:`EE::UI::UIViewPager ` (ViewPager) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md406: page-step --------- Sets the length value that needs the element to scroll a page. Currently the page step it's not used by any element but it's a value that can be fetched to implement a page up and down in a scrollable component. * Applicable to: :ref:`EE::UI::UISlider ` (Slider), :ref:`EE::UI::UIProgressBar ` (ProgressBar) * Data Type: `number <#number-data-type>`__ * Default value: ``0`` .. _doxid-css_specification_1autotoc_md408: popup-open ---------- Exposes whether the calendar popup is currently open as ``true`` or ``false``, for inspection, binding and attribute selectors. This property is read-only; a declaration does not open or close the popup. Use the picker API or normal keyboard/mouse interaction. * Applicable to: :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md410: popup-to-root ------------- Sets whether a dropdown or picker popup is parented to the scene root instead of its parent window container. Popup placement is clamped to the scene's visible viewport. * Applicable to: :ref:`EE::UI::UIDropDownList ` (DropDownList), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md412: progress -------- Sets the current progress of any type of progress bar or loader. * Applicable to: :ref:`EE::UI::UIProgressBar ` (ProgressBar), :ref:`EE::UI::UILoader ` (Loader) * Data Type: `number <#number-data-type>`__ * Default value: ``0`` .. _doxid-css_specification_1autotoc_md414: radius ------ Sets the radius of a loader. This will not change the size of the loader, only the loader internal size. * Applicable to: :ref:`EE::UI::UILoader ` (Loader) * Data Type: `length <#length-data-type>`__ * Default value: ``0`` (but it will change with the loader layout size) .. _doxid-css_specification_1autotoc_md416: reverse-draw ------------ Enables/disables the reverse draw order for the element. When enabled the element will draw from the last child to the first. * Applicable to: Any element * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md418: readonly -------- Makes an HTML input read-only when the attribute/property is present, including an empty value. Temporal inputs retain text selection but prevent value edits and opening their popup, and are excluded from constraint validation. Use `allow-editing <#allow-editing>`__ for native date/time controls. * Applicable to: :ref:`EE::UI::UIHTMLInput ` (input) * Data Type: HTML presence attribute * Default value: *Absent* .. _doxid-css_specification_1autotoc_md420: required -------- Requires a nonempty value for HTML ``date``, ``time``, and ``datetime-local`` inputs during constraint validation when the attribute/property is present, including an empty value. Read-only and disabled inputs are excluded from validation. Unlike native `allow-empty <#allow-empty>`__, this does not initialize or prevent an empty value. * Applicable to: :ref:`EE::UI::UIHTMLInput ` (input) * Data Type: HTML presence attribute * Default value: *Absent* .. _doxid-css_specification_1autotoc_md422: rotation -------- Sets the element rotation in degrees. * Applicable to: Any element * Data Type: `number <#number-data-type>`__ * Default value: ``0`` * Aliases: ``rotate`` .. _doxid-css_specification_1autotoc_md424: rotation-origin-point-x ----------------------- Sets the x-axis rotation origin point relative to the element expressed as a length or a percentage. * Applicable to: Any element * Data Type: `length-percentage <#length-percentage-data-type>`__ * Default value: ``center`` * Aliases: ``rotate-origin-point-x`` Syntax: .. ref-code-block:: cpp rotation-origin-point-x: 50dp; rotation-origin-point-x: center; rotation-origin-point-x: 100%; .. _doxid-css_specification_1autotoc_md426: rotation-origin-point-y ----------------------- Sets the y-axis rotation origin point relative to the element expressed as a length or a percentage. * Applicable to: Any element * Data Type: `length-percentage <#length-percentage-data-type>`__ * Default value: ``center`` * Aliases: ``rotate-origin-point-y`` Syntax: .. ref-code-block:: cpp rotation-origin-point-y: 50dp; rotation-origin-point-y: center; rotation-origin-point-y: 100%; .. _doxid-css_specification_1autotoc_md428: row-height ---------- Sets the row height in any element that contains fixed size rows. * Applicable to: :ref:`EE::UI::UIListBox ` (ListBox), :ref:`EE::UI::UIDropDownList ` (DropDownList), :ref:`EE::UI::UIWidgetTable ` (WidgetTable), :ref:`EE::UI::UIGridLayout ` (GridLayout), EE::UI::TableView (TableView), EE::UI::TreeView (TreeView), EE::UI::ListView (ListView) * Data Type: `length <#length-data-type>`__ * Default value: Varies on each case. ListBox and DropDownList will guess the value based on the `font-size <#font-size>`__. Table requires this value to be manually set in order to work. GridLayout will require the value only if `row-mode <#row-mode>`__ is ``size``. .. _doxid-css_specification_1autotoc_md430: row-header-width ---------------- Sets the width of the row header (line number column) in table and tree views. When set to ``0`` the row header is hidden. * Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView) * Data Type: `length <#length-data-type>`__ * Default value: ``0dp`` .. _doxid-css_specification_1autotoc_md432: row-mode -------- Sets the row mode of a grid layout. The row mode defines how the size of the row of a grid layout is measured. * Applicable to: :ref:`EE::UI::UIGridLayout ` (GridLayout) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``size`` : The row width of each grid child will be defined with a fixed width based on the value of the `row-width <#row-width>`__ length. * ``weight`` : The row width of each grid child will be calculated as a normalized percentage of the total grid width using the `row-weight <#row-weight>`__ value. * Default value: ``weight`` .. _doxid-css_specification_1autotoc_md434: row-margin ---------- Sets the vertical separation between each element in the grid layout. * Applicable to: :ref:`EE::UI::UIGridLayout ` (GridLayout) * Data Type: `length <#length-data-type>`__ * Default value: ``0dp`` .. _doxid-css_specification_1autotoc_md436: row-valign ---------- Sets the vertical alignment of the elements in a flow layout. Elements in the same row will align based on the maximum element height in that row. * Applicable to: :ref:`EE::UI::UIFlowLayout ` (FlowLayout) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``top`` : Aligns to the top of the row. * ``bottom`` : Aligns to the bottom of the row. * ``center`` : Aligns to the center of the row. * Default value: ``bottom`` .. _doxid-css_specification_1autotoc_md438: row-weight ---------- Sets the percentage height of the child elements of a grid layout. `row-mode <#row-mode>`__ must be ``weight`` in order to work. * Applicable to: :ref:`EE::UI::UIGridLayout ` (GridLayout) * Data Type: `number <#number-data-type>`__ (normalized between ``0`` and ``1``) * Default value: ``0.25`` .. _doxid-css_specification_1autotoc_md440: scale ----- Sets the scale of the element. * Applicable to: Any element * Data Type: `vector2-number <#vector2-number-data-type>`__ * Default value: ``1 1`` .. _doxid-css_specification_1autotoc_md442: scale-origin-point-x -------------------- Sets the x-axis scale origin point relative to the element expressed as a length or a percentage. * Applicable to: Any element * Data Type: `length-percentage <#length-percentage-data-type>`__ * Default value: ``center`` Syntax: .. ref-code-block:: cpp scale-origin-point-x: 50dp; scale-origin-point-x: center; scale-origin-point-x: 100%; .. _doxid-css_specification_1autotoc_md444: scale-origin-point-y -------------------- Sets the y-axis scale origin point relative to the element expressed as a length or a percentage. * Applicable to: Any element * Data Type: `length-percentage <#length-percentage-data-type>`__ * Default value: ``center`` Syntax: .. ref-code-block:: cpp scale-origin-point-y: 50dp; scale-origin-point-y: center; scale-origin-point-y: 100%; .. _doxid-css_specification_1autotoc_md446: scale-type ---------- Sets a method to scale the image inside an element. * Applicable to: :ref:`EE::UI::UIImage ` (Image), :ref:`EE::UI::UITextureRegion ` (TextureRegion) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``fit-inside`` : Fits the image inside the element maintaining its ratio. * ``expand`` : Expands the image to cover the whole element without maintaining its ratio. * ``none`` : Keeps the image as it is. .. _doxid-css_specification_1autotoc_md448: scrollbar-mode -------------- Defines how the scrollbar should fit inside an scrollable element. * Applicable to: :ref:`EE::UI::UIScrollView ` (ScrollView) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``overlay`` : The scrollbar is part of the scrollable element container, this means that it will be on top of the content (scrollbars on mobile usually behave like this). * ``outside`` : The scrollbar is outside the scrollable element container, this means that it will not be on top of the content (scrollbars on desktop usually behave like this). * Default value: ``outside`` .. _doxid-css_specification_1autotoc_md450: scrollbar-style --------------- Sets the scrollbar style (for the moment defines if it contains buttons at its edge or it's simply a bar). * Applicable to: :ref:`EE::UI::UIScrollBar ` (ScrollBar), :ref:`EE::UI::UIListBox ` (ListBox), :ref:`EE::UI::UIDropDownList ` (DropDownList), :ref:`EE::UI::UIWidgetTable ` (WidgetTable), :ref:`EE::UI::UIScrollView ` (ScrollView) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``no-buttons`` : It's just a scroll bar. * ``two-buttons`` : Adds to buttons at its edge. * Default value: ``two-buttons`` for desktop platforms, ``no-button`` for mobile. .. _doxid-css_specification_1autotoc_md452: second-step ----------- Sets the positive integer second increment when stepping the active second segment or using the date-time popup's second buttons. Show the segment with `show-seconds <#show-seconds>`__ or an explicit `time-format <#time-format>`__. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `integer <#integer-data-type>`__ * Default value: ``1`` .. _doxid-css_specification_1autotoc_md454: show-milliseconds ----------------- Includes milliseconds and seconds in locale-derived time patterns. Enabling this also enables `show-seconds <#show-seconds>`__; disabling it leaves seconds enabled. Hidden precision remains in the stored value. Explicit `time-format <#time-format>`__ patterns control their own segments. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md456: show-seconds ------------ Includes seconds in locale-derived time patterns, independently of milliseconds. Disabling seconds also disables `show-milliseconds <#show-milliseconds>`__. Hidden precision remains in the stored value. Explicit `time-format <#time-format>`__ patterns control their own segments. The date-time popup follows the editor's current display precision. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md458: selected -------- Sets the element state as selected when supported by the specific widget. * Applicable to: :ref:`EE::UI::UICheckBox ` (CheckBox), :ref:`EE::UI::UIRadioButton ` (RadioButton), EE::UI::SelectButton (SelectButton) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` * Aliases: ``active`` .. _doxid-css_specification_1autotoc_md460: selected-index -------------- Selects an item inside an element containing a list of items from the item index in the list (starting from ``0``). * Applicable to: :ref:`EE::UI::UIListBox ` (ListBox), :ref:`EE::UI::UIDropDownList ` (DropDownList) * Data Type: integer * Default value: *No value* .. _doxid-css_specification_1autotoc_md462: selectex-text ------------- Selects an item inside an element containing a list of items from its item text. * Applicable to: :ref:`EE::UI::UIListBox ` (ListBox), :ref:`EE::UI::UIDropDownList ` (DropDownList) * Data Type: `string <#string-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md464: selection-back-color -------------------- Sets the text selection background color on a text element that supports text selection. * Applicable to: :ref:`EE::UI::UIRichText ` (RichText), :ref:`EE::UI::UITextSpan ` (TextSpan), :ref:`EE::UI::UITextView ` (TextView), and any element that holds inside or extends from a TextView. :ref:`EE::UI::UICheckBox ` (CheckBox), :ref:`EE::UI::UIRadioButton ` (RadioButton), :ref:`EE::UI::UITextInput ` (TextInput), :ref:`EE::UI::UIListBoxItem ` (ListBox::item), :ref:`EE::UI::UIDropDownList ` (DropDownList) * Data Type: `color <#color-data-type>`__ * Default color: ``#323232`` .. _doxid-css_specification_1autotoc_md466: selection-color --------------- Sets the text selection color on a text element that supports text selection. * Applicable to: :ref:`EE::UI::UITextView ` (TextView) and any element that holds inside text or extends from a TextView. :ref:`EE::UI::UICheckBox ` (CheckBox), :ref:`EE::UI::UIRadioButton ` (RadioButton), :ref:`EE::UI::UITextInput ` (TextInput), :ref:`EE::UI::UIListBoxItem ` (ListBox::item), :ref:`EE::UI::UIDropDownList ` (DropDownList), :ref:`EE::UI::UIPushButton ` (PushButton) * Data Type: `color <#color-data-type>`__ * Default color: ``white`` .. _doxid-css_specification_1autotoc_md468: select-on-click --------------- Enables the selection state toggle on element click. * Applicable to: EE::UI::SelectButton (SelectButton) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md470: selection-kind -------------- Sets the selection kind for table and tree views. * Applicable to: EE::UI::UIAbstractView (TableView, TreeView) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``single`` : Only one item can be selected at a time. * ``multiple`` : Multiple items can be selected. * Default value: ``single`` .. _doxid-css_specification_1autotoc_md472: selection-type -------------- Sets the selection type for table and tree views. * Applicable to: EE::UI::UIAbstractView (TableView, TreeView) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``row`` : Selects entire rows. * ``cell`` : Selects individual cells. * Default value: ``row`` .. _doxid-css_specification_1autotoc_md474: sort-icon-size -------------- Sets the sort arrow icon size in table view column headers. * Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView) * Data Type: `length <#length-data-type>`__ * Default value: ``20dp`` .. _doxid-css_specification_1autotoc_md476: skin ---- Sets the skin (a.k.a. decoration) to an element. Element skins are automatically applied if there's a specific skin for the element loaded in the current theme, but new skins can be used and loaded with this property. Skins are a way to decorate the widgets, they are loaded from a list of textures or from a texture atlas. Skins are stateful, this means that a skin can contain all the possible states that a widget can have for decoration, these are: ``normal``, ``focus``, ``selected``, ``hover``, ``pressed``, ``selectedhover``, ``selectedpressed``, ``disabled``, ``checked``. Current UI skin documentation is lacking. * Applicable to: Any element * Data Type: `string <#string-data-type>`__ (skin name or ``none`` to disable skinning) * Default value: The skin corresponding to the widget. .. _doxid-css_specification_1autotoc_md478: skin-color ---------- Sets the `skin <#skin>`__ tint color. * Applicable to: Any element * Data Type: `color <#color-data-type>`__ * Default value: ``white`` (no tint) .. _doxid-css_specification_1autotoc_md480: splitter-always-show -------------------- Sets whether the splitter divisor remains visible whenever two views are attached. This property overrides ``splitter-hide-on-edge``. * Applicable to: :ref:`EE::UI::UISplitter ` (Splitter) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``true`` .. _doxid-css_specification_1autotoc_md482: splitter-hide-on-edge --------------------- Hides the splitter divisor when its percentage partition is exactly ``0%`` or ``100%``, allowing one view to consume the complete splitter. This has no effect when ``splitter-always-show`` is ``true``. * Applicable to: :ref:`EE::UI::UISplitter ` (Splitter) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md484: splitter-partition ------------------ Sets the space occupied by the first view contained by the splitter. * Applicable to: :ref:`EE::UI::UISplitter ` (Splitter) * Data Type: `length-percentage <#length-percentage-data-type>`__ * Default value: ``50%`` .. _doxid-css_specification_1autotoc_md486: src --- Sets the source of a resource in an element that supports source. * Applicable to: :ref:`EE::UI::UIImage ` (Image), :ref:`EE::UI::UISprite ` (Sprite), :ref:`EE::UI::UITextureRegion ` (TextureRegion) * Data Type: `resource-path <#resource-path-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md488: tabbar-hide-on-single-tab ------------------------- Enables/disables the tab bar hiding when only one tab is contained in the tab widget. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md490: tabbar-allow-rearrange ---------------------- Enables/disables manually rearraging the tabs in the tab bar. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md492: tabbar-allow-drag-and-drop-tabs ------------------------------- Enables/disables the ability to move any tab from a TabWidget to another. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md494: tabbar-allow-switch-tabs-in-empty-spaces ---------------------------------------- Enables/disables switching tabs from empty/blank spaces in the tab widget. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md496: tab-closable ------------ Enables/disables tabs to be closable with the middle mouse button click or by clicking on the close button. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md498: tabs-edges-diff-skin -------------------- Enable/disable the tabs edges (most left and right) to use a different skin/decoration from the other tabs. The most left tab will use the skin: ``tab_left`` and the most right tab will use ``tab_right``. instead of using the normal ``tab`` skin. This is to be able to achieve more "closed" tab widgets. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md500: tab-height ---------- Sets the tab widget tabs container height. If not set it will try to get the height from the tab skin height. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: `length <#length-data-type>`__ * Default value: ``0dp`` .. _doxid-css_specification_1autotoc_md501: tab-separation -------------- Sets the tabs separation/distance between each other. Negative values are accepted. * Applicable to: :ref:`EE::UI::UITabWidget ` (TabWidget) * Data Type: `length <#length-data-type>`__ * Default value: ``0dp`` .. _doxid-css_specification_1autotoc_md503: table-model ----------- Sets a predefined model for table and tree views. The value is the model name optionally followed by parameters in parentheses. * Applicable to: EE::UI::UIAbstractView (TableView, TreeView) * Data Type: `string <#string-data-type>`__ * Value List: * ``filesystem(rootPath)`` : Creates a file system model with the given root path. If no path is provided, the current working directory is used. * ``widgettree`` : Creates a widget tree model of the current scene node. * ``diskdrives`` : Creates a disk drives model listing available system drives. * ``cssproperties`` : Creates a CSS properties model for the widget. * Default value: *No value* * Examples: .. ref-code-block:: cpp table-model: "filesystem(/home/user)"; table-model: "widgettree"; table-model: "diskdrives"; table-model: "cssproperties"; .. _doxid-css_specification_1autotoc_md505: table-flags ----------- Sets boolean flags for table and tree views. Multiple flags can be set, separated by ``|``. * Applicable to: EE::UI::UIAbstractTableView (TableView), :ref:`EE::UI::UITreeView ` (TreeView) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``default`` : Same as ``headers|row-search|focus-on-selection`` * ``headers`` : Show column headers. * ``auto-expand`` : Auto-expand single column to fill the widget width. * ``auto-columns`` : Auto-size columns to content width. * ``fit-columns`` : Fits all columns visible in the widget. * ``single-click`` : Navigate on single click instead of double-click. * ``row-search`` : Enables keyboard search by typing. * ``row-header`` : Show row header (line numbers) column. * ``expanders-as-icons`` : Use tree expander icons as the cell icon. * ``focus-on-selection`` : Auto-focus the cell on selection. * ``disable-clipping`` : Disable cell content clipping in tree views. * Default value: ``default`` .. _doxid-css_specification_1autotoc_md507: step ---- Sets the allowed interval for HTML ``date``, ``time``, and ``datetime-local`` input validation. Date steps use days; time and date-time steps use seconds and accept fractional seconds. ``any`` disables step-mismatch validation. The base is a valid ``min``, otherwise the initial ``value`` attribute, otherwise the Unix civil epoch. This HTML constraint is distinct from native `hour-step <#hour-step>`__, `minute-step <#minute-step>`__, and `second-step <#second-step>`__. * Applicable to: :ref:`EE::UI::UIHTMLInput ` (input) * Data Type: Positive `number <#number-data-type>`__ or ``any`` * Default value: ``1`` for date; ``60`` for time and datetime-local .. _doxid-css_specification_1autotoc_md509: text ---- Sets the text to any element that holds or contains text. Usually this property will not be set in the CSS file but in the XML as an attribute or from the code implementation, but it's available as an option. * Applicable to: :ref:`EE::UI::UITextView ` (TextView) and any element that holds inside or extends from a TextView. :ref:`EE::UI::UICheckBox ` (CheckBox), :ref:`EE::UI::UIRadioButton ` (RadioButton), :ref:`EE::UI::UITextInput ` (TextInput), :ref:`EE::UI::UIListBoxItem ` (ListBox::item), :ref:`EE::UI::UIDropDownList ` (DropDownList), :ref:`EE::UI::UITooltip ` (Tooltip), :ref:`EE::UI::UITab ` (Tab), :ref:`EE::UI::UITextEdit ` (TextEdit) * Data Type: `string <#string-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md511: text-align ---------- Read `text-align `__ documentation. Supported values are ``left``, ``right``, ``center``, ``start`` and ``end``. ``left`` and ``right`` are physical; ``start`` and ``end`` follow the element `direction <#direction>`__. Text widgets default to ``start``. .. _doxid-css_specification_1autotoc_md513: text-as-fallback ---------------- When enabled will only display text if the icon is not set/found. * Applicable to: :ref:`EE::UI::UIPushButton ` (PushButton) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md515: text-overflow ------------- Read `text-overflow `__ documentation. .. _doxid-css_specification_1autotoc_md517: text-selection -------------- eepp-specific widget capability for interactive text selection. ``UIRichText`` and ``UITextSpan`` enable it by default; ``text-selection: false`` disables their local capability. HTML document selection also applies the separate CSS ``user-select`` policy. * Applicable to: :ref:`EE::UI::UITextView ` (TextView) and any element that holds inside or extends from a TextView. :ref:`EE::UI::UICheckBox ` (CheckBox), :ref:`EE::UI::UIRadioButton ` (RadioButton), :ref:`EE::UI::UITextInput ` (TextInput), :ref:`EE::UI::UIListBoxItem ` (ListBox::item), :ref:`EE::UI::UIDropDownList ` (DropDownList), :ref:`EE::UI::UITooltip ` (Tooltip), :ref:`EE::UI::UITab ` (Tab), :ref:`EE::UI::UITextEdit ` (TextEdit) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``true`` for RichText, TextSpan, TextEdit, and TextInput. .. _doxid-css_specification_1autotoc_md519: user-select ----------- Controls HTML document selection with ``auto``, ``text``, ``none``, ``all``, and ``contain``. ``-webkit-user-select`` is an alias. The property is not inherited: ``auto`` resolves from the parent's used value. ``UIWebView`` and ``UIMarkdownView`` support selection across paragraphs and other independent text formatting contexts automatically. Dragging near the top or bottom of a scrollable view extends the selection as the view scrolls. Their right-click menu includes Copy and Select All; listen for ``Event::OnCreateContextMenu`` on the view to add menu items. .. _doxid-css_specification_1autotoc_md521: text-shadow-color ----------------- Sets the text shadow color. * Applicable to: :ref:`EE::UI::UITextView ` (TextView) and any element that holds inside text or extends from a TextView. :ref:`EE::UI::UICheckBox ` (CheckBox), :ref:`EE::UI::UIRadioButton ` (RadioButton), :ref:`EE::UI::UITextInput ` (TextInput), :ref:`EE::UI::UIListBoxItem ` (ListBox::item), :ref:`EE::UI::UIDropDownList ` (DropDownList), :ref:`EE::UI::UIPushButton ` (PushButton), :ref:`EE::UI::UITooltip ` (Tooltip) * Data Type: `color <#color-data-type>`__ * Default color: ``#323232E6`` .. _doxid-css_specification_1autotoc_md523: text-shadow-offset ------------------ Sets the text shadow offset. * Applicable to: :ref:`EE::UI::UITextView ` (TextView) and any element that holds inside text or extends from a TextView. :ref:`EE::UI::UICheckBox ` (CheckBox), :ref:`EE::UI::UIRadioButton ` (RadioButton), :ref:`EE::UI::UITextInput ` (TextInput), :ref:`EE::UI::UIListBoxItem ` (ListBox::item), :ref:`EE::UI::UIDropDownList ` (DropDownList), :ref:`EE::UI::UIPushButton ` (PushButton), :ref:`EE::UI::UITooltip ` (Tooltip) * Data Type: `vector2-length <#vector2-length-data-type>`__ * Default offset: ``1dp 1dp`` .. _doxid-css_specification_1autotoc_md525: text-stroke-color ----------------- Sets the text stroke (also known as text outline) color. * Applicable to: :ref:`EE::UI::UITextView ` (TextView) and any element that holds inside or extends from a TextView. * Data Type: `color <#color-data-type>`__ * Default color: ``black`` * Aliases: ``fontOutlineColor`` .. _doxid-css_specification_1autotoc_md527: text-stroke-width ----------------- Sets the text stroke (also known as text outline) width/thickness. * Applicable to: :ref:`EE::UI::UITextView ` (TextView) and any element that holds inside or extends from a TextView. * Data Type: `length <#length-data-type>`__ * Default value: ``0dp`` * Aliases: ``fontOutlineThickness`` .. _doxid-css_specification_1autotoc_md529: text-transform -------------- The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. * Applicable to: :ref:`EE::UI::UITextView ` (TextView) and any element that holds inside or extends from a TextView, :ref:`EE::UI::UITooltip ` (Tooltip). * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``lowercase`` * ``uppercase`` * ``capitalize`` * ``none`` * Default value: ``none`` .. _doxid-css_specification_1autotoc_md531: theme ----- Sets a theme to the element. Changing the theme will not have any effect unless `skin <#skin>`__ is also set. * Applicable to: Any element * Data Type: `string <#string-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md533: timing-function --------------- Sets the timing function (easing function) of a view pager. * Applicable to: :ref:`EE::UI::UIViewPager ` (ViewPager) * Data Type: `string <#string-data-type>`__ * Value List: * Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, elastic-out, elastic-in-out, none. * Default value: ``sine-in`` .. _doxid-css_specification_1autotoc_md535: time-format ----------- Sets the time display pattern, or ``locale`` to use the editor locale. Tokens: ``H`` / ``HH`` (24-hour), ``h`` / ``hh`` (12-hour), ``m`` / ``mm``, ``s`` / ``ss``, ``S`` / ``SS`` / ``SSS``, and ``a`` (AM/PM). An hour and minutes are required; 12-hour patterns also require ``a``. Single quotes escape literal text. For example: ``time-format: "HH:mm:ss";``. Explicit patterns control their own precision and hour cycle; `value <#value>`__ retains ISO serialization. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `string <#string-data-type>`__ * Default value: ``locale`` .. _doxid-css_specification_1autotoc_md537: tint ---- Sets the tint color of an image. * Applicable to: :ref:`EE::UI::UIImage ` (Image), :ref:`EE::UI::UITextureRegion ` (TextureRegion) * Data Type: `color <#color-data-type>`__ * Default value: ``white`` (no tint) .. _doxid-css_specification_1autotoc_md539: tooltip ------- Sets the tooltip text and enables the tooltip to the element. Usually this property will not be set in the CSS file but in the XML as an attribute or from the code implementation, but it's available as an option. * Applicable to: Any element * Data Type: `string <#string-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md541: total-steps ----------- Sets the total steps required to complete a progress bar (the maximum value a progress bar will hold). * Applicable to: :ref:`EE::UI::UIProgressBar ` (ProgressBar) * Data Type: `number <#number-data-type>`__ * Default value: ``100`` .. _doxid-css_specification_1autotoc_md543: touch-drag ---------- Enables/disables the element as draggable. When enabled the element will be able to be dragged. * Applicable to: EE::UI::UITouchDraggable (TouchDraggable), (:ref:`EE::UI::UIListBox ` (ListBox), :ref:`EE::UI::UIScrollView ` (ScrollView), :ref:`EE::UI::UIWidgetTable ` (WidgetTable) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md545: touch-drag-deceleration ----------------------- Sets a acceleration value that defines how much will accelerate the drag when the mouse or touch is released. * Applicable to: EE::UI::UITouchDraggable (TouchDraggable), (:ref:`EE::UI::UIListBox ` (ListBox), :ref:`EE::UI::UIScrollView ` (ScrollView), :ref:`EE::UI::UIWidgetTable ` (WidgetTable) * Data Type: `vector2-number <#vector2-number-data-type>`__ * Default value: ``5 5`` .. _doxid-css_specification_1autotoc_md547: transition-delay ---------------- Read `transition-delay `__ documentation. .. _doxid-css_specification_1autotoc_md549: transition-duration ------------------- Read `transition-duration `__ documentation. .. _doxid-css_specification_1autotoc_md551: transition-property ------------------- Read `transition-property `__ documentation. .. _doxid-css_specification_1autotoc_md553: transition-timing-function -------------------------- Read `transition-timing-function `__ documentation. Timing function names are custom, and not the same as the standard, but ``cubic-bezier`` is supported. Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, elastic-out, elastic-in-out, cubic-bezier, none. .. _doxid-css_specification_1autotoc_md554: value ----- Sets the current value to an element that accepts values. Numeric controls use numbers. Date/time controls use locale-independent ISO strings: ================================ ============ ======= Control or mode Value syntax Example ================================ ============ ======= Calendar, native date mode, HTML Native time mode Native datetime mode HTML HTML ================================ ============ ======= An empty string clears a native editor when `allow-empty <#allow-empty>`__ permits it, or clears calendar selection. Display formats and hidden precision do not change ISO serialization. HTML temporal inputs sanitize invalid strings to empty and validate constraints without clamping their supplied value. Local date-time values carry no timezone. * Applicable to: :ref:`EE::UI::UIScrollBar ` (ScrollBar), :ref:`EE::UI::UISlider ` (Slider), :ref:`EE::UI::UISpinBox ` (SpinBox), :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker), :ref:`EE::UI::UICalendar ` (Calendar), :ref:`EE::UI::UIHTMLInput ` (input) * Data Type: `number <#number-data-type>`__ or ISO `string <#string-data-type>`__, depending on the control * Default value: *Not set* .. _doxid-css_specification_1autotoc_md556: var --- Read `var `__ documentation. .. _doxid-css_specification_1autotoc_md558: vertical-expand --------------- In a progress bar enables/disables if the progress bar filler should be expanded vertically to the element height. Whend disabled the filler height will be defined by the filler skin height. * Applicable to: :ref:`EE::UI::UIScrollBar ` (ScrollBar) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``true`` .. _doxid-css_specification_1autotoc_md560: visible ------- Enables/disables the element visibility. * Applicable to: Any element * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``true`` .. _doxid-css_specification_1autotoc_md562: vscroll-mode ------------ Sets the vertical scroll mode to any scrollable element. The mode defines the visibility of the vertical scroll. * Applicable to: EE::UI::DropDownList (DropDownList), :ref:`EE::UI::UIListBox ` (ListBox), :ref:`EE::UI::UIScrollView ` (ScrollView), :ref:`EE::UI::UIWidgetTable ` (WidgetTable), :ref:`EE::UI::UITextEdit ` (TextEdit). * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``auto`` : The vertical scrollbar will be visible only when needed. * ``on`` : The vertical scrollbar will be always visible. * ``off`` : The vertical scrollbar will be always hidden. * Default value: ``auto`` .. _doxid-css_specification_1autotoc_md564: wheel-editing ------------- Allows mouse-wheel stepping of the active date/time segment while the editor has focus. The selected segment uses its configured step and bounds. `allow-editing <#allow-editing>`__ must also be enabled. * Applicable to: :ref:`EE::UI::UIDateTimeEdit ` (DateTimeEdit), :ref:`EE::UI::UIDatePicker ` (DatePicker), :ref:`EE::UI::UITimePicker ` (TimePicker), :ref:`EE::UI::UIDateTimePicker ` (DateTimePicker) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md566: window-border-auto-size ----------------------- Sets if the window border size should be automatically calculated based on the skin size. * Applicable to: :ref:`EE::UI::UIWindow ` (Window) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``true`` .. _doxid-css_specification_1autotoc_md568: window-border-size ------------------ Manually sets the size of the window border. * Applicable to: :ref:`EE::UI::UIWindow ` (Window) * Data Type: `vector2-length <#vector2-length-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md570: window-buttons-offset --------------------- Sets the window titlebar buttons position offset. * Applicable to: :ref:`EE::UI::UIWindow ` (Window) * Data Type: `vector2-length <#vector2-length-data-type>`__ * Default Value: ``0dp 0dp`` .. _doxid-css_specification_1autotoc_md572: window-buttons-separation ------------------------- Sets the separation between the window titlebar buttons. * Applicable to: :ref:`EE::UI::UIWindow ` (Window) * Data Type: `length <#length-data-type>`__ * Default value: ``4dp`` .. _doxid-css_specification_1autotoc_md574: window-corner-distance ---------------------- Sets the minimum distance where the hovering cursor detects an edge of the window to enable edge resizing. * Applicable to: :ref:`EE::UI::UIWindow ` (Window) * Data Type: `length <#length-data-type>`__ * Default value: ``24dp`` .. _doxid-css_specification_1autotoc_md576: window-flags ------------ Sets the window flags. Window flags activate a set of different boolean options of the window. Multiple values are separated with a ``|`` (as a logical or). * Applicable to: :ref:`EE::UI::UIWindow ` (Window) * Data Type: `string-list <#string-list-data-type>`__ * Value List: * ``default`` : same as ``close|buttonactions|resizeable|shareopacity`` * ``close`` : Adds a close button to the titlebar. * ``maximize`` : Adds a maximize button to the titlebar. * ``minimize`` : Adds a minimize button to the titlebar. * ``draggable`` : Makes the window background draggable. * ``shadow`` : The window will project a shadow. * ``modal`` : Makes the window modal (blocks interacting any element outside the window). * ``undecorated`` : Creates an undecorated window (no borders and titlebar). * ``resizeable`` : Makes the window resizeable. * ``shareopacity`` : Children will inherit the window opacity (otherwise if you change the opacity of the window will only affect its borders, background and titlebar). * ``buttonactions`` : Implements the window minimize, maximize and close buttons default actions. This means that close button click will close, minimize will hide (but not close) and maximize will maximize. * ``framebuffer`` : Creates the window on its own frame buffer. * ``colorbuffer`` : Enables the color buffer to the frame buffer (if active). * Default value: ``default`` .. _doxid-css_specification_1autotoc_md578: window-min-size --------------- Sets the window minimum size. * Applicable to: EE::UI::Window (Window) * Data Type: `vector2-length <#vector2-length-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md580: window-opacity -------------- Sets the base opacity of a window, this is the maximum opacity that the window will be able to have. And the opacity property applied to the window will be multiplied by this value. * Applicable to: :ref:`EE::UI::UIWindow ` (window) * Data Type: `number <#number-data-type>`__ * Default value: ``1`` .. _doxid-css_specification_1autotoc_md582:  window-shadow-color --------------------- Sets the window shadow color. * Applicable to: :ref:`EE::UI::UIWindow ` (window) * Data Type: `color <#color-data-type>`__ * Default value: ``rgba(0,0,0,0.1)`` .. _doxid-css_specification_1autotoc_md584:  window-shadow-offset ---------------------- Sets the window shadow offset. * Applicable to: :ref:`EE::UI::UIWindow ` (window) * Data Type: `vector2-length <#vector2-length-data-type>`__ * Default value: ``16dp 16dp`` .. _doxid-css_specification_1autotoc_md586:  window-shadow-size -------------------- Sets the window shadow size. * Applicable to: :ref:`EE::UI::UIWindow ` (window) * Data Type: `length <#length-data-type>`__ * Default value: ``16dp`` .. _doxid-css_specification_1autotoc_md588: window-title ------------ Sets the window title. * Applicable to: :ref:`EE::UI::UIWindow ` (Window) * Data Type: `string <#string-data-type>`__ * Default value: *No value* .. _doxid-css_specification_1autotoc_md590: window-titlebar-auto-size ------------------------- Sets if the window titlebar size should be automatically calculated based on the skin size. * Applicable to: :ref:`EE::UI::UIWindow ` (Window) * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``true`` .. _doxid-css_specification_1autotoc_md592: window-titlebar-size -------------------- Manually sets the size of the window titlebar. * Applicable to: :ref:`EE::UI::UIWindow ` (Window) * Data Type: `vector2-length <#vector2-length-data-type>`__ * Default value: *No value*. .. _doxid-css_specification_1autotoc_md594: word-wrap --------- Enables/disables word-wrap in the text view element. * Applicable to: EE::UI::UITextVIew (TextView), :ref:`EE::UI::UITextInput ` (TextInput), :ref:`EE::UI::UICheckBox ` (CheckBox), :ref:`EE::UI::UIRadioButton ` (RadioButton), :ref:`EE::UI::UIListBoxItem ` (ListBox::item), :ref:`EE::UI::UIDropDownList ` (DropDownList). * Data Type: `boolean <#boolean-data-type>`__ * Default value: ``false`` .. _doxid-css_specification_1autotoc_md596: CSS Shorthands ~~~~~~~~~~~~~~ `Shorthand properties `__ are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy. .. _doxid-css_specification_1autotoc_md598: animation --------- Read `animation `__ documentation. .. _doxid-css_specification_1autotoc_md600: background ---------- Read `background `__ documentation. Only eepp CSS properties supported are valid in the shorthand. .. _doxid-css_specification_1autotoc_md602: background-position ------------------- Read `background-position `__ documentation. .. _doxid-css_specification_1autotoc_md604: border ------ Read `border `__ documentation. ``border-style`` is not implemented yet. .. _doxid-css_specification_1autotoc_md606: border-bottom ------------- Read `border `__ documentation. ``border-style`` is not implemented yet. .. _doxid-css_specification_1autotoc_md608: border-color ------------ Read `border-color `__ documentation. .. _doxid-css_specification_1autotoc_md610: border-left ----------- Read `border `__ documentation. ``border-style`` is not implemented yet. .. _doxid-css_specification_1autotoc_md612: border-radius ------------- Read `border-radius `__ documentation. .. _doxid-css_specification_1autotoc_md614: border-right ------------ Read `border `__ documentation. ``border-style`` is not implemented yet. .. _doxid-css_specification_1autotoc_md616: border-width ------------ Read `border-width `__ documentation. .. _doxid-css_specification_1autotoc_md618: border-top ---------- Read `border `__ documentation. ``border-style`` is not implemented yet. .. _doxid-css_specification_1autotoc_md620: box-margin ---------- Shorthand for `column-margin <#column-margin>`__ and `row-margin <#row-margin>`__ (in that order). The syntax consists in two lengths separated by a space. Syntax: .. ref-code-block:: cpp box-margin: 10dp 10dp; .. _doxid-css_specification_1autotoc_md622: focusable --------- Set / unset the widget as focusable to navigate with tab / tab + shift navigation .. _doxid-css_specification_1autotoc_md624: foreground ---------- Same as the `background <#background>`__ but for the foreground of the node. The foreground is rendered on the top of the element. .. _doxid-css_specification_1autotoc_md626: foreground-position ------------------- Same as the `background-position <#background-position>`__ but for the foreground of the node. .. _doxid-css_specification_1autotoc_md628: foreground-radius ----------------- Same as the `border-radius <#border-radius>`__ but for the foreground of the node. This is a shorthand for setting `foreground-top-left-radius <#foreground-top-left-radius>`__, `foreground-top-right-radius <#foreground-top-right-radius>`__, `foreground-bottom-right-radius <#foreground-bottom-right-radius>`__, and `foreground-bottom-left-radius <#foreground-bottom-left-radius>`__ in a single declaration. .. _doxid-css_specification_1autotoc_md630: hint-shadow ----------- The hint text shadow, same as text-shadow but for hints. Read `text-shadow `__ documentation. blur-radius is not supported. .. _doxid-css_specification_1autotoc_md632: margin ------ Read `margin `__ documentation. .. _doxid-css_specification_1autotoc_md634: min-size -------- Shorthand for `min-width <#min-width>`__ and `min-height <#min-height>`__ .. _doxid-css_specification_1autotoc_md636: max-size -------- Shorthand for `max-width <#max-width>`__ and `max-height <#max-height>`__ .. _doxid-css_specification_1autotoc_md638: padding ------- Read `padding `__ documentation. .. _doxid-css_specification_1autotoc_md640: rotation-origin-point --------------------- The origin point of the rotation expressed as a `position <#position-data-type>`__. Default value: ``center center``. Aliases: ``rotate-origin-point`` Syntax: .. ref-code-block:: cpp rotation-origin-point: 50dp 10dp; rotation-origin-point: center top; rotation-origin-point: 100% 0%; .. _doxid-css_specification_1autotoc_md642: scale-origin-point ------------------ The origin point of the node scale expressed as `position <#position-data-type>`__. Default value: ``center center``. Syntax: .. ref-code-block:: cpp scale-origin-point: 50dp 10dp; scale-origin-point: center top; scale-origin-point: 100% 0%; .. _doxid-css_specification_1autotoc_md644: transition ---------- Read `transition `__ documentation. .. _doxid-css_specification_1autotoc_md645: text-shadow ----------- Read `text-shadow `__ documentation. blur-radius is not supported. .. _doxid-css_specification_1autotoc_md647: At-rules ~~~~~~~~ `At-rules `__ are CSS statements that instructs CSS how to behave. They begin with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semicolon, ';' (U+003B SEMICOLON), or the next CSS block, whichever comes first. The following at-rules are currently supported: * `@import `__ — Tells the CSS engine to include an external style sheet. * `@media `__ — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query. Media features currently supported: `width `__, `height `__, `device-width `__, `device-height `__, `orientation `__, `aspect-ratio `__, `device-aspect-ratio `__, `color `__, `color-index `__, `monochrome `__, `resolution `__, `prefers-color-scheme `__. Note: eepp prefers dark as default. non-standard media features: *pixel-density* : The ``pixel-density`` feature is specified as a ``float`` value representing the current pixel density used by the application. It is a range feature, meaning that you can also use the prefixed min-pixel-density and max-pixel-density variants to query minimum and maximum values, respectively. Also, eepp only uses ``screen`` media type. * `@font-face `__ — Describes the aspect of an external font to be downloaded. Only `font-family `__ and `src `__ properties are supported at the moment. * `@keyframes `__ — Describes the aspect of intermediate steps in a CSS animation sequence. .. _doxid-css_specification_1autotoc_md648: Pseudo-class selectors ~~~~~~~~~~~~~~~~~~~~~~ A `CSS pseudo-class `__ is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it. Most common pseudo-class selectors are supported. The list is: * `:hover `__ * `:focus `__ * `:focus-within `__ * `:checked `__ * `:disabled `__ * `:empty `__ * `:enabled `__ * `:active or :pressed `__ * `:first-child `__ * `:first-of-type `__ * `:last-child `__ * `:last-of-type `__ * `:not() `__ * `:nth-child() `__ * `:nth-last-child() `__ * `:nth-last-of-type() `__ * `:nth-of-type() `__ * `:only-child `__ * `:only-of-type `__ * `:root `__ * :selected Matches when elements are selectable and currently selected. .. _doxid-css_specification_1autotoc_md649: CSS Data Types ~~~~~~~~~~~~~~ CSS data types define typical values (including keywords and units) accepted by CSS properties and functions. For more details regarding this topic please read the `CSS values and units Mozilla docs `__. **Types:** .. _doxid-css_specification_1autotoc_md650: boolean (data-type) ------------------- Binary state with two possible values: * ``true`` * Aliases: ``1``, ``t``, ``T``, ``y``, ``Y`` * ``false`` * Aliases: ``0``, ``f``, ``F``, ``n``, ``N`` .. _doxid-css_specification_1autotoc_md652: integer (data-type) ------------------- Read `integer `__ documentation. .. _doxid-css_specification_1autotoc_md654: color (data-type) ----------------- Read `color `__ documentation. **Differences with documentation:** * Only CSS Level 1 color keywords supported. * eepp adds hsv and hsva functions with the same syntax that hsl and hsla. * System colors not support. * New global color keywords can be registered to eepp by calling the static function: :ref:`EE::System::Color::registerColor `. .. _doxid-css_specification_1autotoc_md656: length (data-type) ------------------ Read `length `__ documentation. **Differences with documentation:** * Supported lengths: ``em``, ``rem``, ``pt``, ``pc``, ``in``, ``cm``, ``mm``, ``vw``, ``vh``, ``vmin``, ``vmax``. * Also adds: ``dp`` as `Device-independent pixel `__. Plus ``dpr`` (dp rounded), ``dprd`` (dp rounded down) and ``dpru`` (dp rounded up). .. _doxid-css_specification_1autotoc_md658: length-percentage (data-type) ----------------------------- Read `length-percentage `__ documentation. **Differences with documentation:** * ``calc`` currently not supported .. _doxid-css_specification_1autotoc_md660: number (data-type) ------------------ Read `number `__ documentation. .. _doxid-css_specification_1autotoc_md662: position (data-type) -------------------- Read `position `__ documentation. .. _doxid-css_specification_1autotoc_md664: resource-path (data-type) ------------------------- For :ref:`EE::UI::UIImage ` (Image), background-image, foreground-image (all the examples are valid). For a :ref:`EE::UI::UITextureRegion ` (TextureRegion) only the examples with: @textureregion, @drawable, drawable_resource_name from a texture region resource are valid. For a :ref:`EE::UI::UISprite ` (Sprite) only the examples with: all the examples are valid except for @9p and http/s resources. Valid resources path: .. ref-code-block:: cpp file://assets/icon/ee.png; /** relative path to the current working directory */ "file://assets/icon/ee.png"; https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/icon/ee.png; "https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/icon/ee.png"; url(file://assets/icon/ee.png); url(https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/icon/ee.png); url("file://assets/icon/ee.png"); url(data:image/format;base64,data); url(data:image/format,url-encoded-data); @image/image_name_already_in_texture_factory; @texture/image_name_already_in_texture_factory; @textureregion/region_name_already_in_any_texture_atlas; @sprite/sprite_name_already_in_any_texture_atlas; /* sprite pattern name **/ @drawable/drawable_name_already_in_any_drawable_manager; /* drawable managers are any holder of image resources. This includes: texture atlases, textures, nine patches. */ @9p/nine_patch_resource_name_already_in_the_nine_path_manager; drawable_resource_name; /** same as doing: @drawable/drawable_resource_name */ linear-gradient(from_color, to_color); linear-gradient(direction, from_color, to_color); /** valid directions are (without quotes): "to bottom", "to left", "to right", "to top". */ circle(radius, color, type); /** type (optional) can be (without quotes): "fill" or "solid" (filled), or "line" (lined). */ rectangle(type, color, rotation, radius); /** type (optional) can be (without quotes): "fill" or "solid" (filled), or "line" (lined). rotation (optional) is a number in degrees: "0º" (without quotes). radius (optional), must be the last parameter. */ triangle(type, color, "point_1.x point1.y, point_2.x point2.y, point_3.x point3.y", lineWidth) /** type can be (without quotes): "fill" or "solid" (filled), or "line" (lined). lineWidth (optional, default 1dp): the length or width of the lines when type is "fill"- */ poly(type, color, "point_1.x point1.y, point_2.x point2.y, ...", lineWidth) /** polygon. type (optional) can be (without quotes): "fill" or "solid" (filled), or "line" (lined). lineWidth (optional, default 1dp): the length or width of the lines when type is "fill"- */ icon(name, size) /** icons usually come from font glyphs, size is the font glyph size. For example: icon("quit", 24dp) */ glyph(font_family, font_size, codepoint) /** codepoint can be an integer value, an hex value (hex values start with 0x), or a 1 codepoint string representing glyph character. For example: glyph("monospace", 24dp, "@") */ .. _doxid-css_specification_1autotoc_md666: string (data-type) ------------------ Read `string `__ documentation. **Differences with documentation:** * Only supports ``"`` (double quote) .. _doxid-css_specification_1autotoc_md668: string-list (data-type) ----------------------- A set of predefined string value types. Each CSS property will have its own string set specified in the documentation. .. _doxid-css_specification_1autotoc_md670: vector2-number (data-type) -------------------------- A set of two `number <#number-data-type>`__ s separated by a " " (space), usually representing ``x`` and ``y`` axis in that order. .. _doxid-css_specification_1autotoc_md672: vector2-length (data-type) -------------------------- A set of two `length <#number-data-type>`__ s separated by a " " (space), usually representing ``x`` and ``y`` axis in that order or also representing ``width`` and ``height``.