Specs
This page lists and explains all configurable aspects of the CueSync component — including:
CSS custom properties for customizing styles and layout
HTML attributes for declarative configuration
JavaScript functions for runtime control
Custom events emitted by the component for interactivity and integration
Use this guide to fully customize and integrate CueSync into your project, whether you’re tweaking the visuals or
wiring it up with JavaScript.
CSS custom properties
Customize CueSync’s appearance by modifying the CSS custom properties listed below.
CueSync (Main Container)
Property
Default Value
Description
Light or Auto Theme
Dark Theme
--cs-border-width
1px
CueSync border width
--cs-border-style
solid
CueSync border style
--cs-border-color
#e9e9e9
#495057
CueSync border color
--cs-border-radius
10px
CueSync border radius
Property
Default Value
Description
Light or Auto Theme
Dark Theme
--cs-toolbar-bg
#fff
#16191d
Toolbar background color
--cs-toolbar-color
#000
#ced4da
Toolbar color
--cs-toolbar-px
15px
Toolbar padding left and right
--cs-toolbar-py
8px
Toolbar padding top and bottom
--cs-settings-shadow-opacity
.1
1
Settings menu shadow opacity
Transcript
Property
Default Value
Description
Light or Auto Theme
Dark Theme
--cs-transcript-bg
#fff
#16191d
Transcript background color
--cs-transcript-color
#000
#ced4da
Transcript text color
Cue
Property
Default Value
Description
Light or Auto Theme
Dark Theme
--cs-cue-px
15px
Cue padding left and right in Stacked layout
--cs-cue-py
5px
Cue padding top and bottom in Stacked layout
--cs-cue-paragraph-px
5px
Cue padding left and right in Paragraph layout
--cs-cue-paragraph-py
5px
Cue padding top and bottom in Paragraph layout
--cs-cue-hover-bg
#f2f2f2
#252525
Cue hover background color
--cs-cue-hover-color
#000
#ced4da
Cue hover text color
--cs-cue-active-bg
#def1ff
#032b48
Cue active background color
--cs-cue-active-color
#044ba7
#def1ff
Cue active text color
--cs-cue-highlight-bg
transparent
transparent
Cue highlight background color
--cs-cue-highlight-color
#044ba7
#def1ff
Cue highlight text color
Cue Text
Property
Default Value
Description
--cs-cue-text-px
5px
Cue text padding left and right
--cs-cue-text-py
5px
Cue text padding top and bottom
Timestamp
Property
Default Value
Description
Light or Auto Theme
Dark Theme
--cs-timestamp-bg
#def1ff
#032b48
Timestamp background color
--cs-timestamp-color
#044ba7
#def1ff
Timestamp color
--cs-timestamp-border-radius
5px
Timestamp border radius
--cs-timestamp-width
auto
Timestamp width(Automatically adjusted to match the width of the longest timestamp.)
--cs-timestamp-px
5px
Timestamp padding left and right
--cs-timestamp-py
5px
Timestamp padding top and bottom
Javascript
Control CueSync using the JavaScript functions and custom events listed below.
Custom Events
Event Name
Triggered When...
event.detail.newValue contains
layout-changed
Layout is changed
'stacked' or 'paragraph'
show-timestamp-changed
Timestamp visibility is changed
true or false
auto-scroll-changed
Auto scroll setting is changed
true or false
theme-changed
Theme is changed
'auto', 'light', 'dark'
transcript-path-changed
Transcript paths are updated
string
media-changed
Media target is updated
string (selector)
allow-settings-changed
Allow Settings is changed
true or false
Functions
Function
Description
redrawTime()
Recalculates the width of the timestamp column. Useful if fonts or styles change.
HTML attributes
Configure CueSync directly in your markup using the HTML attributes listed below.
Attribute
Type
Description
transcript-path
string
Comma-separated paths to transcript files (VTT/SRT)
media
string
CSS selector for the associated <video> or <audio> element
layout
string
'stacked' or 'paragraph' (default is 'stacked')
show-timestamp
string
'true' or 'false' (default is 'true')
auto-scroll
string
'true' or 'false' (default is 'true')
allow-settings
string
'true' or 'false' (default is 'true')
theme
string
'auto', 'light', or 'dark' (default is 'auto')