Styling
CSS Reference
Check which CSS properties CalmUI supports.
Info
Use this table when a style does not behave as expected. It shows which properties are available and whether any limitations apply.
117
CSS Profile v0.4 supported properties
2
properties the profile rejects with a diagnostic: perspective, transform-style
1
engine-internal properties, never authored directly
Layout
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| display | Supported | none, block, inline, inline-block, flex, inline-flex | No grid. | Profile v0.1 (inline-flex: Profile v0.4, ADR-0055) |
| position | Supported | static, relative, absolute, fixed | Profile v0.1 | |
| top, right, bottom, left, z-index | Supported | length / integer | Basic paint order. | Profile v0.1 |
| width, height, min-*, max-* | Supported | px, %, em/rem, calc(), min(), max(), clamp(); width also supports fit-content | fit-content participates in nested flex intrinsic sizing. calc()/min()/max()/clamp() may mix pixel and percentage terms; a percentage term resolves against the true containing block, not an approximation. Animations of width or height trigger relayout and emit a warning. | Profile v0.1 (calc()/min()/max()/clamp(): Profile v0.4) |
| margin, padding, box-sizing | Supported | shorthand and longhand | Profile v0.1 | |
| env(calmui-safe-area-inset-*) | Supported | left, top, right, bottom logical-pixel insets | Use the calmui-safe-area-inset names shown here; margins default to zero. | Profile v0.2 |
| overflow, overflow-x, overflow-y | Partial | visible, hidden, auto, scroll | Axis longhands participate independently in the cascade. Visible computes to auto when the other axis is hidden, auto, or scroll. Hidden clips content and disables user scrolling on that axis. Auto and scroll support vertical wheel scrolling and a draggable scrollbar; horizontal input and scrollbar controls are not exposed. Stable element IDs preserve offsets across source refreshes. | Profile v0.1 |
| content, inset | Supported | quoted pseudo-element content; 1-4 value inset shorthand | Adds content before or after an element. inset combines top, right, bottom, and left. | Profile v0.2 |
Flexbox
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| flex-direction | Supported | row and column directions | Choose whether children run horizontally or vertically. | Profile v0.1 |
| flex, flex-grow, flex-shrink, flex-basis, flex-wrap | Supported | standard Flexbox longhands | Set these on a flex container or its children. | Profile v0.1 |
| justify-content, align-items, align-self, align-content | Supported | flex alignment subset | Profile v0.1 | |
| gap | Supported | one-value pixel gap on both flex axes | Single-line flex uses adjacent spacing; wrapped flex applies the value between items and lines. | Profile v0.1 |
Typography
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| font-family, font-size, font-weight, font-style, letter-spacing | Supported | registered families plus ordered fallback | Inter is included. Import other fonts into the project; remote fonts are not loaded. | Profile v0.1 |
| line-height, white-space, text-align, text-transform | Supported | basic wrapping, multiline, alignment, transform | Profile v0.1 | |
| text-decoration, text-decoration-line, text-decoration-color | Partial | none, underline, line-through, underline line-through, optional color | Painted as one solid line per text run (thickness ~0.08em, min 1px): the underline sits ~0.1em below the baseline, the line-through ~0.3em above it. The color defaults to the text color and follows interactive color changes, including :hover, :disabled and transition color changes; text-decoration-color fixes it. Continuous across word spaces; wrapped and ellipsized runs each get their own segment, desaturated, faded and clipped like any other fill. overline, line styles (wavy, dotted, double), text-decoration-thickness and text-decoration-style are rejected. | Profile v0.3 |
| text-overflow | Partial | clip, ellipsis | Use ellipsis with white-space: nowrap, overflow: hidden, and a constrained width. The marker appears at the right edge. Custom strings and two-value syntax are not supported. | Profile v0.2 |
| overflow-wrap | Partial | normal, anywhere | Inherited emergency wrapping of long unbroken text in constrained columns. Shaping clusters stay intact; nowrap/pre prevent wrapping. Intrinsic min-content sizing and complex bidirectional wrapping are not yet covered. | Profile v0.2 |
| vertical-align | Supported | baseline, middle, top, bottom, text-top, text-bottom, sub, super, length, percentage | Aligns inline elements. This property cannot be animated. | Profile v0.1 |
Paint
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| background-color | Supported | solid color, including rgba(); named colors, hex, rgb()/rgba(), hsl()/hsla(), transparent | Profile v0.1 | |
| background-image | Supported | none, one mapped image, or up to eight linear/radial/conic gradient layers with 2-8 stops each | Images use asset:// PNG. conic-gradient() supports `from <angle>`/`at <position>` (ADR-0055, PaintFrame 1.14). A stop may carry two positions (`<color> <pos1> <pos2>`), which expands into a hard-edged pair of stops at that color. Repeating gradients (including repeating-conic-gradient()) are unsupported. `background: none` and `background-image: none` clear a gradient set by a less specific rule, including through :hover and other pseudo-class rules. | Profile v0.1 (conic-gradient: Profile v0.4, ADR-0055; none reset and double-position stops: Profile v0.4) |
| background-position, background-size, background-repeat | Partial | static single-image behavior | Profile v0.1 | |
| object-fit | Supported | contain, cover, fill | Controls how a project SVG fits its image area. | Profile v0.2 |
| border, border-radius, border-*-width/style/color | Supported | solid, dashed, dotted, none, hidden; per-side widths/colors/styles | Per-side widths, colors (PaintFrame 1.10 SideColors, ADR-0053) and styles (PaintFrame 1.13 SideStyles, ADR-0005) are all supported independently, through longhands or a shorthand like `border-left: 4px solid #d89b35`. double/groove/ridge/inset/outset still parse but render as solid (a warning, not an error). Functional colors keep whitespace inside their parentheses: `border-color: rgba(255, 244, 222, .36) #ffffff` applies the RGBA color to top/bottom and white to left/right, and the same syntax works in `border` and side shorthands such as `border-left`. | Profile v0.1 |
| outline, outline-offset | Supported | solid color outline and pixel offset | Draws a border outside the element; offset controls the distance. | Profile v0.2 |
| color, opacity, visibility | Supported | static and animated opacity | Opacity does not relayout. Parent opacity is composed into descendants. | Profile v0.1 |
| scrollbar-color, scrollbar-width | Supported | scrollbar-color: <thumb-color> <track-color> | auto; scrollbar-width: auto | thin | none | Styles a scrolling container's thumb and track colors, and its width (6px thin/default, 8px auto, or none to hide it). Either color may itself use var(). LiteHTML has no native scrollbar styling, so both lower to --calmui-scrollbar-* custom properties read back by the layout backend. | Profile v0.3 |
Effects
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| box-shadow | Supported | up to eight comma-separated outer or inset shadows | Outer and inset layers may be mixed. The first declared shadow is painted on top. | Profile v0.2 |
| text-shadow | Partial | up to twelve shadows, blur-radius 0-16px | Rendered by a shared deterministic 13-tap kernel (PaintFrame 1.9 TextRunCommand.BlurSigma) in both the WebGL2 and Unreal renderers instead of a blur pass. spread is rejected. | Profile v0.3 |
| filter | Supported | brightness(), contrast(), saturate(), grayscale(<0..1 | percentage>) | brightness/contrast/saturate change foreground colors of the whole element; filters remain color-only. grayscale() (PaintFrame 1.12 PushOpacityCommand.Grayscale; the 1.11 ImageCommand.Grayscale field is kept for compatibility) desaturates everything the element and its descendants paint - fills, gradients, borders, text, shadows, host textures, Lucide/vector icons and nine-slice patches - and pseudo-state rules such as :disabled drive it too. Nested grayscale amounts combine by max; the amount clamps to 0..1, percentages divide by 100 and an omitted amount means 1. blur, drop-shadow and url() are not supported here; backdrop-filter is separate. | Profile v0.2 |
| backdrop-filter | Partial | none | blur(0..64px) | Two-pass background blur before the panel content: the renderer samples the background, it does not substitute dimming. Requires PaintFrame 1.7 and a matching runtime. | PaintFrame 1.7 |
Transforms
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| transform | Supported | 2D translate*, scale*, rotate, skewX, skewY | No 3D, perspective, or matrix3d. Transform does not relayout and establishes a containing block for positioned descendants. | Profile v0.2 |
| transform-origin | Supported | 2D origin | Honored from a stylesheet rule as well as an inline style attribute; a more specific rule (including :hover and other pseudo-classes) that sets transform without its own transform-origin keeps the base rule’s origin instead of recentering. | Profile v0.2 (stylesheet rules: Profile v0.4) |
Interaction
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| :hover, :active, :focus, :disabled, :gamepad-focus, :holding | Supported | generic tag/class/ID cascade | :gamepad-focus and :holding are CalmUI states, not browser pseudo-classes. :holding applies while a ui:hold-ms hold is in flight and comes with the live --calmui-hold-progress custom property (0..1) on the element and its descendants. | Profile v0.2 |
| pointer-events | Supported | auto, none | Profile v0.2 | |
| cursor | Partial | auto, default, none, pointer, text, wait, crosshair, move, grab, grabbing, not-allowed, col-resize, row-resize | Accepted as a host hint. View input policy controls visibility and the host may use its own cursor asset. | Profile v0.2 |
Animation
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| transition and longhands | Supported | linear, named easing, cubic-bezier; delay and duration | Interruptible. Prefer transform/opacity over width/height. | Profile v0.2 |
| animation, @keyframes | Supported | duration, delay, iteration count, direction, timing function | Scoped names are isolated. Matching transform lists interpolate arguments, including complete rotations; incompatible lists retain matrix blending. | Profile v0.2 |
Responsive
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| @media min-width / max-width | Supported | logical viewport from the host | Rules apply to the logical View width, before display scaling. | Profile v0.1 |
Variables
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| CSS variables (--name) / var() | Partial | compile-time theme tokens; element-local animation parameters | Animation declarations and keyframe values retain var() and use inherited/inline custom-property values (package feature bit 15). Other authored uses remain compile-time. Typed/animated custom properties and pseudo-state custom-property overrides remain unsupported. | Component syntax |
Unsupported
| Property | Status | Values | Notes | Since |
|---|---|---|---|---|
| grid | Unsupported | N/A | Rejected by the CSS profile validator. | N/A |
| perspective, transform-style | Unsupported | N/A | 3D transform support remains a capability gap. | N/A |
Reading this table
Each row's Notes column carries the limits that apply to that property or group: value ranges, per-side behavior, PaintFrame command references, and ADRs. Studio reports an error when source uses an unsupported value.
Unsupported means the shared implementation is absent, not that the feature is forbidden in CalmUI. Requested capabilities must be added to Core, Studio and Unreal together; a CSS workaround or a declaration silently ignored by the renderer is not a replacement for that support.