Styling hooks
CSS variables that contain information about the animation, such as the number of rows, the total width, or the width of the line number colum. Your CSS can build on top of this information.
| Properties | Notes |
|---|---|
--vertical-align | Either 1 or 0 |
--total-rows, --total-cols | Overall max number of rows and columns |
--current-rows, --current-cols | Number of rows and columns for the current animation keyframe |
--total-width, --total-height | Overall max width and height (CSS <length>), that includes margins, line numbers, offsets etc. |
--current-width, --current-height | Width and height (CSS <length>) for the current animation keyframe |
--line-numbers-width | Width (CSS <length>) of the line numbers (if enabled) with margins excluded |
--line-numbers-column-width | Width (CSS <length>) of the line number colum (if enabled) with margins included |
Note: these variables are meant to be read by your CSS when defining ::before and/or ::after! Setting them to new values will have no effect. See the CSS reference for a list of CSS variables that you can set to customize your animation.