Code.Movie
Styling hooks
HTML hooks
Features of Code.Movie's HTML output that your CSS can hook into.
Animation root element
Elements
10 <div> elements with the class names "cm-box cm-box1", "cm-box cm-box2", ..., "cm-box cm-box9" exist in every animation purely for styling purposes. You can (among other things) use them to draw an editor UI below your animated code. See some of the built-in themes for examples!
Note that this actually gives you 32 boxes to play with, because you get to use the divs themselves, their ::before and ::after pseudo elements and ::before and ::after on the root animation element.
Attributes
| Name | Value | Notes |
|---|---|---|
data-cm-language-title | Main language name | Use with content and attr() to draw the language name |
Gutter decorations
Attributes
| Name | Value | Notes |
|---|---|---|
data-cm-gutter-decoration-text | Decoration's text content | Target for attribute selectors to style gutter decorations based on what they render |
CSS 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 column. Your CSS can build on top of this information.
| Properties | Notes |
|---|---|
--vertical-align | Reflects the vertical alignment set via theme object or CSS. Either 1 or 0 |
--has-gutter-decorations | Reflects whether the animation includes any gutter decorations. Either 1 or 0 |
--has-line-numbers | Reflects whether line numbers are enabled. 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 |
--total-frames | Number of frames in the animation |
--total-frames-string | Number of frames as a CSS <string> for use with the content property |
--current-frame | Current frame number (starting at 1) |
--current-frame-string | Current frame number as a CSS <string> for use with the content property |
--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 styling HTML hooks! 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.