Skinning Shortcut
Shortcut uses Sass for its CSS source, and it's configured so you can customize its colors and images to match your branding. This is almost entirely done by editing the src/styles/_variables.scss file.
Customizing Shortcut's colors and fonts is done through changing variables defined in _variables.scss.
You can create your own footer by editing the blank/transparent PNG provided (or provide your own 400x86 transparent PNG).
See the "Animation properties" section below for information on changing animation colors.
$body-font-family: Font family for the episode descriptions on the landing page.
$header-font-family: Font family for headers in general, including the episode numbers on landing page.
$episode-header-font: Specific font family override for episode names in clipping view.
$episode-air-date-font: Specific font family override for episode air date in clipping view.
$open-sans: Defines the Open Sans font, generally.
$bg-color: Background color of most text areas.
$transcript-text-color: Color of the transcript text.
$disabled-color:
$body-color: Color of body text.
$body-background: Color of the basic background of the <body> element of the page.
$primary-color: The primary highlight color of the theme. Affects many elements. See diagrams below.
$primary-color-post-compression: You need to set this to whatever color your primary color ends up being post-compression, after it's rendered to an mp4. The color will change slightly and look weird on the background in the Share view otherwise.
$selection-color: The color of text highlighted with a mouse or tap.
$secondary-color: The secondary highlight color of the theme. Affects many elements. See diagrams below.
$secondary-color-text: This is the color of any text that shows up on top of $secondary-color, so make sure it's a good, readable contrast.
$tertiary-color: The tertiary highlight color of the theme. Affects many elements. See diagrams below.
$tertiary-color-text: This is the color of any text that shows up on top of $tertiary-color, so make sure it's a good, readable contrast.
$break-xs: Breakpoint for the extra-small responsive layout. $break-s: Breakpoint for the small responsive layout. $break-m: Breakpoint for the medium responsive layout. $break-l: Breakpoint for the large responsive layout.
$break-h-s:
$previewcontainer-height:
$preview-video-width:
$canvas-dimension:
$rendered-video-dimension:
$navbar-height:
$navbar-height-sm:
$button-height:
$highlight-color:
$subhead-height:
$transcript-font-size: Font size of the transcript text.
$transcript-line-height: Line height of the transcript text.
$anim-color-N: The background color of the Nth available animation theme (N = 1, 2, 3, or 4).
$anim-color-highlight-N: The highlighted text color of the Nth available animation theme (N = 1, 2, 3, or 4).
$anim-color-wave-N: The wave color of the Nth available animation theme (N = 1, 2, 3, or 4).
$anim-font-family: The font that the animation renders dynamic text in.
$anim-font-family-episode-number: The font that the animation renders the episode number in.
$anim-footer-image: The footer image. Must point to a 400x80 pixel transparent PNG.