Plyr Variables

plyr-3.6.12.css

/* 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; 
}