Skip to content

Instantly share code, notes, and snippets.

@fibonacid
Last active March 2, 2022 14:59
Show Gist options
  • Save fibonacid/a5eddf28d1d60212956dd34fdb4062b6 to your computer and use it in GitHub Desktop.
Save fibonacid/a5eddf28d1d60212956dd34fdb4062b6 to your computer and use it in GitHub Desktop.
Plyr Variables
/* PLYR https://github.com/sampotts/plyr/releases/tag/v3.6.12 */
:root {
/* The primary UI color. */
--plyr-color-main: #00b3ff;
/* The background color of video and poster wrappers for using alpha channel videos and poster images. */
--plyr-video-background: rgba(0, 0, 0, 1);
/* The color used for the dotted outline when an element is :focus-visible (equivalent) keyboard focus. */
--plyr-badge-background: #4a5464;
/* The text color for badges. */
--plyr-badge-text-color: #ffffff;
/* The border radius used for badges. */
--plyr-tab-focus-color: var(--plyr-color-main);
/* The color for the background of captions. */
--plyr-captions-background: rgba(0, 0, 0, 0.8);
/* The color used for the captions text. */
--plyr-captions-text-color: #ffffff;
/* The size of the icons used in the controls. */
--plyr-control-icon-size: 18px;
/* The space between controls (sometimes used in a multiple - e.g. 10px / 2 = 5px). */
--plyr-control-spacing: 10px;
/* The padding inside controls. */
--plyr-control-padding: calc(var(--plyr-control-spacing) * 0.7);
/* The border radius used on controls. */
--plyr-control-radius: 3px;
/* The background color used for checked menu items. */
--plyr-control-toggle-checked-background: var(--plyr-color-main);
/* The background for the video controls. */
--plyr-video-controls-background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
/* The text/icon color for video controls. */
--plyr-video-control-color: #ffffff;
/* The text/icon color used when video controls are :hover, :focus and :focus-visible (equivalent). */
--plyr-video-control-color-hover: #ffffff;
/* The background color used when video controls are :hover, :focus and :focus-visible (equivalent) .*/
--plyr-video-control-background-hover: var(--plyr-color-main);
/* The background for the audio controls. */
--plyr-audio-controls-background: #ffffff;
/* The text/icon color for audio controls. */
--plyr-audio-control-color: #4a5464;
/* The text/icon color used when audio controls are :hover, :focus and :focus-visible (equivalent). */
--plyr-audio-control-color-hover: #ffffff;
/* The background color used when video controls are :hover, :focus and :focus-visible (equivalent). */
--plyr-audio-control-background-hover: var(--plyr-color-main);
/* The background color for menus. */
--plyr-menu-background: rgba(255, 255, 255, 0.9);
/* The text/icon color for menu items. */
--plyr-menu-color: #4a5464;
/* The shadow used on menus. */
--plyr-menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
/* The border radius on the menu. */
--plyr-menu-radius: 4px;
/* The size of the arrow on the bottom of the menu. */
--plyr-menu-arrow-size: 6px;
/* The color of the arrows in the menu. */
--plyr-menu-item-arrow-color: #728197;
/* The size of the arrows in the menu. */
--plyr-menu-item-arrow-size: 4px;
/* The border color for the bottom of the back button in the top of the sub menu pages. */
--plyr-menu-border-color: #dcdfe5;
/* The shadow below the border of the back button in the top of the sub menu pages. */
--plyr-menu-border-shadow-color: #ffffff;
/* The size of the stripes in the loading state in the scrubber. */
--plyr-progress-loading-size: 25px;
/* The background color on the loading state in the scrubber. */
--plyr-progress-loading-background: rgba(35, 40, 47, 0.6);
/* The fill color for the buffer indication in the scrubber for video. */
--plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.25);
/* The height of the scrubber handle/thumb. */
--plyr-range-thumb-height: 13px;
/* The background of the scrubber handle/thumb. */
--plyr-range-thumb-background: #ffffff;
/* The shadow of the scrubber handle/thumb. */
--plyr-range-thumb-shadow: 0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2);
/* The width of the shadow when the scrubber handle/thumb is :active (pressed). */
--plyr-range-thumb-active-shadow-width: 3px;
/* The height of the scrubber/progress track. */
--plyr-range-track-height: 5px;
/* The fill color of the scrubber/progress. */
--plyr-range-fill-background: var(--plyr-color-main);
/* The background of the scrubber/progress. */
--plyr-video-range-track-background: var(--plyr-video-progress-buffered-background);
/* The color of the shadow when the video scrubber handle/thumb is :active (pressed). */
--plyr-video-range-thumb-active-shadow-color: rgba(255, 255, 255, 0.5);
/* The background of the scrubber/progress. */
--plyr-audio-range-track-background: var(--plyr-video-progress-buffered-background);
/* The color of the shadow when the audio scrubber handle/thumb is :active (pressed). */
--plyr-audio-range-thumb-active-shadow-color: rgba(215, 26, 18, 0.1);
/* The background color for tooltips. */
--plyr-tooltip-background: rgba(255, 255, 255, 0.9);
/* The text color for tooltips. */
--plyr-tooltip-color: #4a5464;
/* The padding for tooltips. */
--plyr-tooltip-padding: calc(var(--plyr-control-spacing) / 2);
/* The size of the arrow under tooltips. */
--plyr-tooltip-arrow-size: 4px;
/* The border radius on tooltips. */
--plyr-tooltip-radius: 3px;
/* The shadow on tooltips. */
--plyr-tooltip-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
/* The font family used in the player. */
--plyr-font-family: inherit;
/* The base font size. Mainly used for captions. */
--plyr-font-size-base: 15px;
/* The smaller font size. Mainly used for captions. */
--plyr-font-size-small: 13px;
/* The larger font size. Mainly used for captions. */
--plyr-font-size-large: 18px;
/* The even larger font size. Mainly used for captions. */
--plyr-font-size-xlarge: 21px;
/* The font size for the time. */
--plyr-font-size-time: var(--plyr-font-size-small);
/* The font size used in the menu. */
--plyr-font-size-menu: var(--plyr-font-size-small);
/* The font size used for badges. */
--plyr-font-size-badge: 9px;
/* The regular font weight. */
--plyr-font-weight-regular: 400;
/* The bold font weight. */
--plyr-font-weight-bold: 600;
/* The line height used within the player. */
--plyr-line-height: 1.7;
/* Whether to enable font antialiasing within the player. */
--plyr-font-smoothing: false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment