@qonsoll/qvideo
Version:
- [Integration](#Integration) - [Recorder properties](#Recorder-properties) - [Player properties](#Player-properties) - [Remote control](#Remote-control) - [Statistic](#Statistic) - [Chapters](#Chapters) - [Translations](#Translations)
816 lines (643 loc) • 32.5 kB
CSS
:root {
/*default pallettes ———————————————————— Start*/
/* Common */
--qv-white: #fff;
--qv-black: #000;
/* Primary/Info */
--qv-blue-base: #1890ff;
--qv-blue-1: #e6f7ff;
--qv-blue-2: #bae7ff;
--qv-blue-3: #91d5ff;
--qv-blue-4: #69c0ff;
--qv-blue-5: #40a9ff;
--qv-blue-6: var(--qv-blue-base);
--qv-blue-7: #096dd9;
--qv-blue-8: #0050b3; /* Not used */
--qv-blue-9: #003a8c; /* Not used */
--qv-blue-10: #002766; /* Not used */
/* Success */
--qv-green-base: #52c41a;
--qv-green-1: #f6ffed;
--qv-green-2: #d9f7be; /* Not used */
--qv-green-3: #b7eb8f;
--qv-green-4: #95de64; /* Not used */
--qv-green-5: #73d13d; /* Not used */
--qv-green-6: var(--qv-green-base);
--qv-green-7: #389e0d;
--qv-green-8: #237804; /* Not used */
--qv-green-9: #135200; /* Not used */
--qv-green-10: #092b00; /* Not used */
/* Danger */
--qv-red-base: #f5222d;
--qv-red-1: #fff1f0;
--qv-red-2: #ffccc7;
--qv-red-3: #ffa39e;
--qv-red-4: rgba(255, 120, 117, 1);
--qv-red-5: rgba(255, 77, 79, 1); /* Not used */
--qv-red-6: var(--qv-red-base);
--qv-red-7: #cf1322;
--qv-red-8: #a8071a; /* Not used */
--qv-red-9: #820014; /* Not used */
--qv-red-10: #5c0011; /* Not used */
/* Danger - transparent*/
--qv-red-base-t: rgba(245, 34, 45, 0.6);
--qv-red-base-1-t: rgba(243, 124, 130, 0.1);
--qv-red-base-2-t: rgba(246, 106, 113, 0.1);
/* Gold */
--qv-yellow-base: #fadb14;
--qv-yellow-1: #feffe6;
--qv-yellow-2: #ffffb8; /* Not used */
--qv-yellow-3: #fffb8f;
--qv-yellow-4: #fff566; /* Not used */
--qv-yellow-5: #ffec3d; /* Not used */
--qv-yellow-6: var(--qv-yellow-base);
--qv-yellow-7: #d4b106;
--qv-yellow-8: #ad8b00; /* Not used */
--qv-yellow-9: #876800; /* Not used */
--qv-yellow-10: #614700; /* Not used */
/* Warning */
--qv-gold-base: #faad14;
--qv-gold-1: #fffbe6;
--qv-gold-2: #fff1b8; /* Not used */
--qv-gold-3: #ffe58f;
--qv-gold-4: #ffd666; /* Not used */
--qv-gold-5: #ffc53d;
--qv-gold-6: var(--qv-gold-base);
--qv-gold-7: #d48806;
--qv-gold-8: #ad6800; /* Not used */
--qv-gold-9: #874d00; /* Not used */
--qv-gold-10: #613400; /* Not used */
--qv-gray-1: rgba(255, 255, 255, 1);
--qv-gray-2: rgba(250, 250, 250, 1);
--qv-gray-3: rgba(245, 245, 245, 1);
--qv-gray-4: rgba(240, 240, 240, 1);
--qv-gray-5: rgba(217, 217, 217, 1);
--qv-gray-6: rgba(191, 191, 191, 1);
--qv-gray-7: rgba(140, 140, 140, 1);
--qv-gray-8: rgba(89, 89, 89, 1);
--qv-gray-9: rgba(67, 67, 67, 1);
--qv-gray-10: rgba(38, 38, 38, 1);
--qv-gray-11: rgba(3, 11, 23, 1);
--qv-gray-12: rgba(20, 20, 20, 1);
--qv-gray-13: rgba(0, 0, 0, 1);
/*gray - transparent */
--qv-gray-1-t: rgba(255, 255, 255, 0.6);
--qv-gray-2-t: rgba(250, 250, 250, 0.6);
--qv-gray-3-t: rgba(245, 245, 245, 0.6);
--qv-gray-4-t: rgba(240, 240, 240, 0.6);
--qv-gray-5-t: rgba(217, 217, 217, 0.6);
--qv-gray-6-t: rgba(191, 191, 191, 0.6);
--qv-gray-7-t: rgba(140, 140, 140, 0.6);
--qv-gray-8-t: rgba(89, 89, 89, 0.6);
--qv-gray-9-t: rgba(67, 67, 67, 0.6);
--qv-gray-10-t: rgba(38, 38, 38, 0.6);
--qv-gray-11-t: rgba(3, 11, 23, 0.6);
--qv-gray-12-t: rgba(20, 20, 20, 0.6);
--qv-gray-13-t: rgba(0, 0, 0, 0.6);
/*gray - transparent */
/* Typography ———————————————————— Start */
/* Font family */
--qv-font-family: "";
--qv-code-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
monospace;
/* Font sizes */
--qv-font-size-base:16px;
--qv-font-size-h1: 40px;
--qv-font-size-h2: 32px;
--qv-font-size-h3: 24px;
--qv-font-size-h4: 20px;
--qv-font-size-h5: 16px;
--qv-font-size-h6: 14px;
--qv-font-size-body1: var(--qv-font-size-base);
--qv-font-size-body2: 14px;
--qv-font-size-caption1: 12px;
--qv-font-size-caption2: 10px;
--qv-font-size-huge: 60px;
/*==== custom fnt-size===*/
/* Line heights */
--qv-line-height-h1: 48px;
--qv-line-height-h2: 40px;
--qv-line-height-h3: 32px;
--qv-line-height-h4: 28px;
--qv-line-height-h5: 24px;
--qv-line-height-h6: 20px;
--qv-line-height-overline: 16px;
--qv-line-height-body1: 24px;
--qv-line-height-body2: 20px;
--qv-line-height-caption1: 16px;
--qv-line-height-caption2: 12px;
--qv-line-height-huge: 64px;
/* Letter spacings */
--qv-letter-spacing-none: 0;
--qv-letter-spacing-default: 0.6;
/* Font weights */
--qv-font-weight-bold: 700;
--qv-font-weight-semibold: 600;
--qv-font-weight-medium: 500;
--qv-font-weight-regular: 400;
--qv-font-weight-light: 300;
--qv-text-color: var(--qv-gray-10);
--qv-text-color-secondary: var(--qv-gray-8);
--qv-text-color-disabled:var(--qv-gray-6);
--qv-text-color-inverse: var(--qv-white);
--qv-text-color-dark: var(--qv-gray-11);
--qv-text-color-secondary-dark: var(--qv-gray-9);
/*--text-selection-bg: var(--primary-color);*/
/* Typography ———————————————————— End */
/* Border ———————————————————— Start */
/* Border radius */
--qv-border-radius-circle: 50%;
--qv-border-radius-xxl: 20px;
--qv-border-radius-xl: 16px;
--qv-border-radius-lg: 12px;
--qv-border-radius-base: 8px;
--qv-border-radius-sm: 6px;
--qv-border-radius-xs: 4px;
--qv-border-radius-xxs: 2px;
--qv-border-radius-none: 0px;
--qv-border-radius-xml: 18px; /* created for notes component */
/*===================RECORDER CUSTOM VARS===============*/
--qv-recorder-font-family: Arial, sans-serif;
/*------------ Record block - start ------------*/
/*\\ record message //*/
--qv-record-message-font-weight: var(--qv-font-weight-bold);
--qv-record-message-font-size: var(--qv-font-size-body2);
--qv-record-message-phone-font-size: var(--qv-font-size-caption1);
--qv-record-message-bigPhone-font-size: var(--qv-font-size-body2);
--qv-record-message-tablet-font-size: var(--qv-font-size-body2);
--qv-record-message-line-height: var(--qv-font-size-body2);
--qv-record-message-phone-line-height: var(--qv-font-size-body2);
--qv-record-message-bigPhone-line-height: var(--qv-font-size-body2);
--qv-record-message-tablet-line-height: var(--qv-font-size-body2);
--qv-record-message-color: var(--qv-white);
--qv-record-message-text-shadow:0px 1px 5px var(--qv-gray-10);
/*\\ record message //*/
/*------------ Notes block - start ------------*/
/*\\ Switcher button //*/
--qv-switcherBtn-checked-bg: var(--qv-green-base);
--qv-switcherBtn-notChecked-bg: var(--qv-gray-5-t);
--qv-switcherBtnInput-br: var(--qv-border-radius-xml);
--qv-notesBtnSwitcher-bg: var(--qv-white);
--qv-switcherBtn-sm-width:44px;
--qv-switcherBtn-sm-height:22px;
--qv-switcherBtn-md-width:64px;
--qv-switcherBtn-md-height:40px;
--qv-switcherBtn-inner-sm-width:calc(var(--qv-switcherBtn-sm-height) - 4px);
--qv-switcherBtn-inner-sm-height:var(--qv-switcherBtn-inner-sm-width);
/*--qv-switcherBtn-inner-md-width:34px;*/
--qv-switcherBtn-inner-md-width:calc(var(--qv-switcherBtn-md-height) - 6px);
--qv-switcherBtn-inner-md-height:var(--qv-switcherBtn-inner-md-width);
--qv-switcherBtn-inner-sm-margin:calc((var(--qv-switcherBtn-sm-height) - var(--qv-switcherBtn-inner-sm-height)) / 2);
--qv-switcherBtn-inner-md-margin:calc((var(--qv-switcherBtn-md-height) - var(--qv-switcherBtn-inner-md-height)) / 2);
--qv-switcherBtn-inner-checkbox-sm-margin-left:calc(var(--qv-switcherBtn-sm-width) - var(--qv-switcherBtn-inner-sm-width) - var(--qv-switcherBtn-inner-sm-margin));
--qv-switcherBtn-inner-checkbox-md-margin-left:calc(var(--qv-switcherBtn-md-width) - var(--qv-switcherBtn-inner-md-width) - var(--qv-switcherBtn-inner-md-margin));
/*\\ Switcher button //*/
/*\\ Notes message //*/
--qv-notes-message-font-size: var( --qv-font-size-h3);
--qv-notes-message-font-weight: var(--qv-font-weight-medium);
--qv-notes-message-line-height: var( --qv-line-height-h3);
--qv-notes-message-color: var(--qv-white);
/*\\ Notes button //*/
/*------------ Review block - start ------------*/
/*\\ Review message //*/
--qv-review-record-message-font-weight: var(--qv-font-weight-bold);
--qv-review-record-message-font-size: var(--qv-font-size-h3);
--qv-review-record-message-phone-font-size: var(--qv-font-size-h4);
--qv-review-record-message-bigPhone-size: var(--qv-font-size-h4);
--qv-review-record-message-tablet-size: var(--qv-font-size-h4);
--qv-review-record-message-line-height: var(--qv-font-size-body2);
--qv-review-record-message-phone-line-height: var(--qv-font-size-body2);
--qv-review-record-message-bigPhone-line-height: var(--qv-font-size-body2);
--qv-review-record-message-tablet-line-height: var(--qv-font-size-body2);
--qv-review-record-message-color: var(--qv-white);
--qv-review-record-message-text-shadow:0px 1px 5px var(--qv-gray-10);
/*\\ Review message //*/
/*\\ Chapters modal //*/
--qv-chapter-modal-z-index: 1000;
--qv-chapter-modal-close-button-z-index: 1001;
--qv-chapter-modal-box-shadow: 1000;
/*------------ Chapter button-------------*/
--qv-btn-chaptersBtn-color: var(--qv-white);
--qv-btn-chaptersBtn-hover-color: var(--qv-white);
--qv-btn-chaptersBtn-bg: var(--qv-gray-8-t);
--qv-btn-chaptersBtn-hover-bg: var(--qv-gray-8-t);
/*\\ Chapters textarea //*/
--qv-chapters-textarea-font-family: inherit;
--qv-chapters-textarea-bg: var(--qv-gray-2);
--qv-chapters-textarea-font-size: var(--qv-font-size-h3);
--qv-chapters-textarea-phone-font-size: var(--qv-font-size-h5);
--qv-chapters-textarea-line-height: var(--qv-line-height-h3);
--qv-chapters-textarea-font-weight: var(--qv-font-weight-medium);
--qv-chapters-textarea-phone-line-height: var(--qv-line-height-h5);
--qv-chapters-textarea-color: var(--qv-text-color);
/*\\ Chapters tooltip //*/
/*\\ Chapters tooltip //*/
--qv-chapters-tooltip-height: 200px;
--qv-chapters-tooltip-min-width: 100px;
--qv-chapters-tooltip-max-width: 200px;
--qv-chapters-tooltip-font-weight: var(--qv-font-weight-light);
--qv-chapters-tooltip-font-size: var(--qv-font-size-caption1);
--qv-chapters-tooltip-line-height:var(--qv-line-height-caption1);
--qv-chapters-tooltip-color: var(--qv-white);
--qv-chapters-tooltip-text-shadow:0px 1px 5px var(--qv-gray-10);
/*------------ Review block -end ------------*/
/*------------ Spinner - start ------------*/
/*\\ Spinner //*/
--qv-spinner-wrapper-bg: var(--qv-gray-9);
--qv-spinner-wrapper-border-color: var(--qv-gray-5);
--qv-spinner-wrapper-br: var(--qv-border-radius-circle);
--qv-spinner-wrapper-color: var(--qv-white);
--qv-spinner-wrapper-text-shadow-color: var(--qv-gray-8);
--qv-spinner-wrapper-box-shadow-color: var(--qv-gray-8);
--qv-spinner-before-border-color: var(--qv-gray-8);
--qv-spinner-before-br: var(--qv-border-radius-circle);
--qv-spinner-before-bg: var(--qv-gray-8);
--qv-spinner-before-box-shadow-bg: '';
--qv-spinner-after-border-color: var(--qv-gray-8);
--qv-spinner-after-br: var(--qv-border-radius-circle);
--qv-spinner-after-bg: var(--qv-gray-2);
--qv-spinner-after-box-shadow-bg: var(--qv-gray-8);
/*\\ Spinner //*/
/*------------ Spinner - end ------------*/
/*------------ Countdown - start ------------*/
/*\\ Countdown //*/
--qv-countdown-color: var(--qv-white);
--qv-countdown-text-shadow-color: var(--qv-gray-8);
--qv-countdown-font-size: var(--qv-font-size-huge);
--qv-countdown-phone-font-size: var(--qv-font-size-h3);
--qv-countdown-bigPhone-font-size: var(--qv-font-size-h2);
--qv-countdown-tablet-font-size: var(--qv-font-size-h1);
--qv-countdown-font-weight: var(--qv-font-weight-regular);
--qv-countdown-line-height: var(--qv-line-height-huge);
--qv-countdown-phone-line-height: var(--qv-line-height-h3);
--qv-countdown-bigPhone-line-height: var(--qv-line-height-h2);
--qv-countdown-tablet-line-height: var(--qv-line-height-h1);
/*\\ Countdown //*/
/*------------ Countdown - end ------------*/
/*------------ Curtains - start ------------*/
/*\\ Curtains //*/
--qv-curtains-bg: var(--qv-red-4);
/*\\ Curtains //*/
/*------------ Curtains - end ------------*/
/*------------ Video duration - start ------------*/
/*\\ Video duration //*/
--qv-video-duration-font-size: var(--qv-font-size-h2);
--qv-video-duration-phone-font-size: var(--qv-font-size-h4);
--qv-video-duration-line-height: var(--qv-line-height-h2);
--qv-video-duration-phone-line-height: var(--qv-line-height-h4);
--qv-video-duration-color: var(--qv-red-5);
--qv-video-duration-br: var(--qv-border-radius-xxl);
--qv-video-duration-dot-bg: var(--qv-red-5);
--qv-video-duration-dot-br: var(--qv-border-radius-circle);
/*\\ Video duration //*/
/*------------ Video duration - end ------------*/
--qv-tooltip-color: var(--qv-white);
--qv-tooltip-bg: var(--qv-black);
--qv-tooltip-br: var(--qv-border-radius-base);
--qv-tooltip-font-family: inherit;
--qv-tooltip-font-size: var( --qv-font-size-caption1);
--qv-tooltip-font-weight: var(--qv-font-weight-medium);
--qv-tooltip-margin: 35px;
--qv-tooltip-margin-x: 10px;
--qv-tooltip-arrow-size: 6px;
/*===================RECORDER CUSTOM VARS===============*/
--qv-recorder-bg:var(--qv-white);
--qv-playerRecorder-br:0;
/*button sizes colors ———————————————————— Start*/
/*===========FONT SIZE - Line-Height========*/
--qv-btn-font-size-sm: var( --qv-font-size-h6);
--qv-btn-line-height-sm: var( --qv-line-height-h6);
--qv-btn-font-weight-sm: var(--qv-font-weight-regular);
--qv-btn-font-size-md: var( --qv-font-size-h6);
--qv-btn-line-height-md: var( --qv-line-height-h6);
--qv-btn-font-weight-md: var(--qv-font-weight-medium);
--qv-btn-font-size-lg: var( --qv-font-size-h5);
--qv-btn-line-height-lg: var( --qv-line-height-h5);
--qv-btn-font-weight-lg: var(--qv-font-weight-bold);
--qv-btn-font-size-xl: var( --qv-font-size-h5);
--qv-btn-line-height-xl: var( --qv-line-height-h5);
--qv-btn-font-weight-xl: var(--qv-font-weight-bold);
/*===========FONT SIZE - Line-Height========*/
--qv-btn-br-circle: var(--qv-border-radius-circle);
--qv-btn-br-round: var(--qv-border-radius-base);
--qv-btn-br-sharp: var(--qv-border-radius-none);
/*===========FONT FAMILY========*/
--qv-btn-font-family:var( --qv-font-family);
--qv-btn-default-width: 40px;
--qv-btn-default-height: 40px;
--qv-btn-width-sm: 24px;
--qv-btn-height-sm: 24px;
--qv-btn-width-md: var(--qv-btn-default-width);
--qv-btn-height-md: var(--qv-btn-default-height);
--qv-btn-width-lg: 70px;
--qv-btn-height-lg: 70px;
--qv-btn-width-xl: 90px;
--qv-btn-height-xl: 90px;
--qv-btn-hover-scale: 1.05;
--qv-btn-transition-speed: .2s;
--qv-btn-default-color: var(--qv-gray-4);
--qv-btn-default-hover-color: var(--qv-white);
--qv-btn-default-bg: rgba(67, 67, 67, 0.6);
--qv-btn-default-disabled-bg: var(--qv-gray-4);
--qv-btn-default-disabled-color: var(--qv-gray-6);
--qv-btn-default-hover-bg: rgba(67, 67, 67, 0.8);
/*\\ Record start button config //*/
--recordStart-btn-color: var(--qv-white);
--qv-btn-recordStart-hover-color: var(--qv-white);
--qv-btn-recordStart-bg: rgba(255, 60, 76, 0.6);
--qv-btn-recordStart-hover-bg: rgba(255, 60, 76, 1);
/*\\ Cancel button config //*/
--qv-btn-cancel-color: var(--qv-btn-default-color);
--qv-btn-cancel-hover-color: var(--qv-btn-default-hover-color);
--qv-btn-cancel-bg: rgba(0, 0, 0, 0.5);
--qv-btn-cancel-hover-bg: rgba(0, 0, 0, 0.7);
/*\\ Stop record button config //*/
--qv-btn-recordStop-color: var(--qv-white);
--qv-btn-recordStop-hover-color: var(--qv-white);
--qv-btn-recordStop-bg: var(--qv-gray-4-t);
--qv-btn-recordStop-hover-bg: var(--qv-gray-4-t);
--qv-btn-recordStopInner-color: var(--qv-white);
--qv-btn-recordStopInner-hover-color: var(--qv-white);
--qv-btn-recordStopInner-bg: rgba(255, 60, 76, 0.6);
--qv-btn-recordStopInner-hover-bg: rgba(255, 60, 76, 0.6);
/*\\ Approve button config //*/
--qv-btn-approve-color: var(--qv-white);
--qv-btn-approve-hover-color: var(--qv-white);
--qv-btn-approve-bg: rgba(82, 196, 26, 0.6);
--qv-btn-approve-hover-bg: rgba(82, 196, 26, 1);
/*\\ Reject button config //*/
--qv-btn-reject-color: var(--qv-white);
--qv-btn-reject-hover-color: var(--qv-white);
--qv-btn-reject-bg: rgba(255, 60, 76, 0.6);
--qv-btn-reject-hover-bg:rgba(255, 60, 76, 1);
/*\\ Replay button config //*/
--qv-btn-replay-color: var(--qv-white);
--qv-btn-replay-hover-color: var(--qv-white);
--qv-btn-replay-bg: var(--qv-gray-9-t);
--qv-btn-replay-hover-bg:var(--qv-btn-default-hover-bg);
/*\\ Screen recorder button //*/
--qv-btn-screenRecord-bg: var(--qv-gray-9-t);
--qv-btn-screenRecord-hover-bg: var(--qv-btn-default-hover-bg);
--qv-btn-screenRecord-color: var(--qv-white);
--qv-btn-screenRecord-hover-color: var(--qv-white);
/*\\ Screen recorder button //*/
/*\\ Camera recorder button //*/
--qv-btn-cameraRecord-bg: var(--qv-gray-9-t);
--qv-btn-cameraRecord-hover-bg: var(--qv-btn-default-hover-bg);
--qv-btn-cameraRecord-color: var(--qv-white);
--qv-btn-cameraRecord-hover-color: var(--qv-white);
/*\\ Camera recorder button //*/
/*\\ Upload button //*/
--qv-btn-upload-bg: var(--qv-gray-9-t);
--qv-btn-upload-hover-bg: var(--qv-btn-default-hover-bg);
--qv-btn-upload-color: var(--qv-white);
--qv-btn-upload-hover-color: var(--qv-white);
/*\\ Upload button //*/
/*\\ library button //*/
--qv-btn-library-bg: var(--qv-gray-9-t);
--qv-btn-library-hover-bg: var(--qv-btn-default-hover-bg);
--qv-btn-library-color: var(--qv-white);
--qv-btn-library-hover-color: var(--qv-white);
/*\\ library button //*/
/*\\ link button //*/
--qv-btn-link-bg: var(--qv-gray-9-t);
--qv-btn-link-hover-bg: var(--qv-btn-default-hover-bg);
--qv-btn-link-color: var(--qv-white);
--qv-btn-link-hover-color: var(--qv-white);
/*\\ link button //*/
/*\\ Picture in picture button config //*/
--qv-btn-pip-font-size: var(--qv-font-size-base);
--qv-btn-pip-color: var(--qv-white);
--qv-btn-pip-hover-color: var(--qv-white);
--qv-btn-pip-bg: var(--qv-gray-9-t);
--qv-btn-pip-hover-bg: var(--qv-gray-9);
/*\\ dropdown settings icon //*/
--qv-btn-badge-icon-font-size: var(--qv-font-size-body1);
--qv-btn-badge-icon-color: var(--qv-gray-5);
--qv-btn-badge-icon-shadow-color: var(--qv-gray-9);
/*\\ dropdown settings icon //*/
/*\\ Absoluted player close button config //*/
--qv-btn-absolutePlayerCloseBtn-color: var(--qv-white);
--qv-btn-absolutePlayerCloseBtn-hover-color: var(--qv-white);
--qv-btn-absolutePlayerCloseBtn-bg: var(--qv-gray-9-t);
--qv-btn-absolutePlayerCloseBtn-hover-bg:var(--qv-btn-default-hover-bg);
/*\\ Chapters modal config //*/
--qv-chapter-modal-box-shadow: 0 2.7px 4.1px rgba(0, 0, 0, 0.022),
0 7.5px 11.4px rgba(0, 0, 0, 0.03), 0 18.1px 27.4px rgba(0, 0, 0, 0.041),
0 60px 91px rgba(0, 0, 0, 0.07);
--qv-chapter-modal-behind-bg: rgb(0 0 0 / 45%);
--qv-chapter-modal-border-radius:var(--qv-border-radius-lg);
--qv-chapter-modal-format-error-color:var(--qv-red-base);
--qv-chapter-modal-format-error-box-shadow:0 2px 5px 1px rgba(0, 0, 0, 0.26);
--qv-chapter-modal-format-error-border-radius:var(--qv-border-radius-base);
--qv-chapter-modal-format-error-font-size: var(--qv-font-size-body2);
--qv-chapter-modal-format-error-line-height: var(--qv-line-height-body2);
--qv-chapter-modal-format-error-font-weight: var(--qv-font-weight-bold);
/*\\ Chapters description approve button config //*/
--qv-btn-chaptersApprove-color: var(--qv-white);
--qv-btn-chaptersApprove-hover-color: var(--qv-white);
--qv-btn-chaptersApprove-active-color: var(--qv-white);
--qv-btn-chaptersApprove-bg: rgba(40, 40, 40, 1);
--qv-btn-chaptersApprove-hover-bg: rgba(82, 196, 26, 1);
--qv-btn-chaptersApprove-active-bg: rgba(82, 196, 26, 1);
/*\\ Chapters create button config //*/
--qv-btn-chaptersCreate-color: var(--qv-text-color-secondary);
--qv-btn-chaptersCreate-hover-color: var(--qv-btn-chaptersCreate-color);
--qv-btn-chaptersCreate-active-color: var(--qv-white);
--qv-btn-chaptersCreate-bg: var(--qv-gray-5);
--qv-btn-chaptersCreate-hover-bg: var(--qv-gray-6);
--qv-btn-chaptersCreate-active-bg:var(--qv-gray-6);
/*\\ Chapters delete button config //*/
--qv-btn-chaptersDelete-color: var(--qv-white);
--qv-btn-chaptersDelete-hover-color:var(--qv-white);
--qv-btn-chaptersDelete-active-color: var(--qv-white);
/*--qv-btn-chaptersDelete-bg: var(--qv-gray-6);*/
--qv-btn-chaptersDelete-bg: var(--qv-gray-6);
--qv-btn-chaptersDelete-hover-bg: var(--qv-red-base);
--qv-btn-chaptersDelete-active-bg: var(--qv-red-base);
/*\\ Chapters modal close button config //*/
--qv-btn-chaptersModalClose-color: var(--qv-text-color-secondary);
--qv-btn-chaptersModalClose-hover-color: var(--qv-btn-chaptersModalClose-color);
--qv-btn-chaptersModalClose-bg: var(--qv-gray-5);
--qv-btn-chaptersModalClose-hover-bg: var(--qv-gray-6);
/*\\ Chapters modal close button config //*/
--qv-btn-chaptersModalCloseSmall-color: var(--qv-gray-6);
--qv-btn-chaptersModalCloseSmall-hover-color: var(--qv-gray-8);
--qv-btn-chaptersModalCloseSmall-bg: transparent;
/*--qv-btn-chaptersModalCloseSmall-hover-bg: rgba(255, 60, 76, 1);*/
/*\\ Chapters modal close button config //*/
--qv-chapterModalTimePicker-color:red ;
--qv-chapterModalTimePicker-bg: red ;
--qv-chapterModalTimePicker-br:var(--qv-border-radius-lg);
/*\\ Chapters modal new chapter input //*/
--qv-chapterModalChapterName-font-family:inherit ;
--qv-chapterModalChapterName-fontSize:var(--qv-font-size-body1) ;
--qv-chapterModalChapterName-fontWeight:var(--qv-font-weight-regular) ;
--qv-chapterModalChapterName-lineHeight:var(--qv-line-height-caption1) ;
--qv-chapterModalChapterName-color:var(--qv-text-color-secondary) ;
--qv-chapterModalChapterName-bg: red ;
--qv-chapterModalChapterName-br:var(--qv-border-radius-sm);
--qv-chapterModalChapterName-bc:var(--qv-gray-5);
/*\\ Chapter modal header //*/
--qv-chapter-modal-header-bg: none;
--qv-chapter-modal-header-font-weight: var(--qv-font-weight-bold);
--qv-chapter-modal-header-font-size: var(--qv-font-size-body2);
--qv-chapter-modal-header-phone-font-size: var(--qv-font-size-body2);
--qv-chapter-modal-header-bigPhone-font-size: var(--qv-font-size-body1);
--qv-chapter-modal-header-tablet-font-size: var(--qv-font-size-h3);
--qv-chapter-modal-header-line-height: var(--qv-font-size-body2);
--qv-chapter-modal-header-phone-line-height: var(--qv-font-size-body2);
--qv-chapter-modal-header-bigPhone-line-height: var(--qv-font-size-body2);
--qv-chapter-modal-header-tablet-line-height: var(--qv-font-size-body2);
--qv-chapter-modal-header-color: rgba(67, 67, 67, 1);
--qv-chapter-modal-header-text-shadow:0px 1px 5px var(--qv-gray-10);
--qv-chapter-modal-header-background:none;
/*\\ record message //*/
/*\\ Chapter modal footer //*/
--qv-chapter-modal-footer-bg: none;
--qv-chapter-modal-footer-font-weight: var(--qv-font-weight-bold);
--qv-chapter-modal-footer-font-size: var(--qv-font-size-h3);
--qv-chapter-modal-footer-phone-font-size: var(--qv-font-size-body2);
--qv-chapter-modal-footer-bigPhone-font-size: var(--qv-font-size-body1);
--qv-chapter-modal-footer-tablet-font-size: var(--qv-font-size-h3);
--qv-chapter-modal-footer-line-height: var(--qv-font-size-body2);
--qv-chapter-modal-footer-phone-line-height: var(--qv-font-size-body2);
--qv-chapter-modal-footer-bigPhone-line-height: var(--qv-font-size-body2);
--qv-chapter-modal-footer-tablet-line-height: var(--qv-font-size-body2);
--qv-chapter-modal-bottom-color:var(--qv-text-color);
--qv-chapter-modal-bottom-background: var(--qv-white);
/*------------Dropdown - start------------*/
/*\\ Device dropdown item //*/
--qv-dropdown-item-bg: var(--qv-gray-3);
--qv-dropdown-item-bg-box-shadow-color: var(--qv-gray-9);
/*\\ Device dropdown item //*/
/*\\ dropdown item text //*/
--qv-dropdown-item-text-font-size: var(--qv-font-size-body2);
--qv-dropdown-item-text-line-height:var(--qv-line-height-body2);
--qv-dropdown-item-text-font-weight:var(--qv-font-weight-regular);
--qv-dropdown-item-text-bg-hover: var(--qv-gray-5);
--qv-dropdown-item-text-border-color: var(--qv-gray-5);
/*\\ dropdown item text//*/
/*\\ dropdown settings //*/
--devices-dropdown-settings-icon-text-font-size: var(--qv-font-size-body1);
--devices-dropdown-settings-icon-box-shadow-color: var(--qv-gray-9);
/*\\ dropdown settings //*/
/*\\ Device dropdown default selected device //*/
--qv-dropdown-default-selected-device-font-size: var(--qv-font-size-caption2);
/*\\ Device dropdown default selected device //*/
/*------------ Dropdown - end ------------*/
/*\\ audioDeviceSelect button //*/
--qv-btn-audioDeviceSelect-bg: var(--qv-gray-9-t);
--qv-btn-audioDeviceSelect-hover-bg: var(--qv-btn-default-hover-bg);
--qv-btn-audioDeviceSelect-color: var(--qv-white);
--qv-btn-audioDeviceSelect-hover-color: var(--qv-white);
/*\\ audioDeviceSelect button //*/
/*\\ videoDeviceSelect button //*/
--qv-btn-videoDeviceSelect-bg: var(--qv-gray-9-t);
--qv-btn-videoDeviceSelect-hover-bg: var(--qv-btn-default-hover-bg);
--qv-btn-videoDeviceSelect-color: var(--qv-white);
--qv-btn-videoDeviceSelect-hover-color: var(--qv-white);
/*\\ videoDeviceSelect button //*/
/*===================PLAYER CUSTOM VARS===============*/
/*------------ Big play button - start ------------*/
--qv-big-play-button-bg-color: var(--qv-black);
--qv-big-play-button-shadow-color: var(--qv-black);
--qv-big-play-button-shadow-color-hovered: #eee;
--qv-big-play-button-br: 50%;
--qv-big-play-button-border-color: var(--qv-gray-5);
--qv-big-play-button-border-color-hovered: var(--qv-gray-1-t);
/*------------ Big play button - end ------------*/
/*------------ Play/pause button - start ------------*/
--qv-play-pause-button-shadow-color: #eee;
/*------------ Play/pause button - end ------------*/
/*------------ Volume bar - start ------------*/
--qv-volume-level-background-color: var(--qv-black);
/*------------ Volume bar - end ------------*/
/*------------ Error notification - start ------------*/
--qv-error-notification-background-color: #333;
--qv-error-notification-text-color: var(--qv-white);
--qv-error-notification-border-color: var(--qv-gray-5);
/*------------ Error notification - end ------------*/
/*------------ Player PlayPauseButton - start ------------*/
--qv-btn-playerPlayPauseBtn-color: var(--qv-white);
--qv-btn-playerPlayPauseBtn-hover-color: var(--qv-white);
--qv-btn-playerPlayPauseBtn-bg: var(--qv-gray-8-t);
--qv-btn-playerPlayPauseBtn-hover-bg: var(--qv-gray-8-t);
/*------------ Player PlayPauseButton - end ------------*/
--qv-btn-playerPlayPauseBtnSquared-color: var(--qv-white);
--qv-btn-playerPlayPauseBtnSquared-hover-color: var(--qv-white);
--qv-btn-playerPlayPauseBtnSquared-bg: transparent;
--qv-btn-playerPlayPauseBtnSquared-hover-bg: var(--qv-gray-8-t);
/*------------ Player fullScreenToggle - start ------------*/
--qv-btn-fullScreenToggle-color: var(--qv-white);
--qv-btn-fullScreenToggle-hover-color: var(--qv-white);
--qv-btn-fullScreenToggle-bg: var(--qv-gray-8-t);
--qv-btn-fullScreenToggle-hover-bg:var(--qv-gray-8-t);
/*------------ Player fullScreenToggle - end ------------*/
/*------------ Player currentTime / duration - end ------------*/
--qv-playerDuration-font-weight: var(--qv-font-weight-light);
--qv-playerDuration-font-size: var(--qv-font-size-body1);
--qv-playerDuration-line-height:var(--qv-line-height-body1);
--qv-playerDuration-color: var(--qv-white);
--qv-playerDuration-text-shadow:0px 1px 5px var(--qv-gray-10);
/*------------ Player currentTime / duration - end ------------*/
/*------------ Player progress-bar - start ------------*/
--qv-progress-bar-height-init: 4px;
--qv-progress-bar-height-hovered: 20px;
--qv-progress-bar-chaptered-height-init: 10px;
--qv-progress-bar-chaptered-height-hovered: 10px;
--qv-progress-bar-unfilled-bg: var(--qv-gray-2);
--qv-progress-bar-filled-bg: rgb(125, 0, 254);
--qv-progress-bar-chaptered-unfilled-bg: none;
--qv-progress-bar-chaptered-filled-bg: rgb(125, 0, 254);
--qv-progress-bar-chapter-bg: rgba(125, 0, 254, 0.3);
--qv-progress-bar-chapter-br: none;
--qv-progress-bar-chapter-separators-color: var(--qv-gray-8);
--qv-progress-bar-chapter-separators-height: var(--qv-progress-bar-height-init);
--qv-progress-bar-chapter-separators-height-hovered: var(--qv-progress-bar-chaptered-height-hovered);
--qv-progress-bar-chapter-separators-width: 4px;
--qv-progress-bar-chapter-separators-br: none;
/*------------ Player progress-bar - end ------------*/
/*------------ Player progress-bar thumb - start ------------*/
--qv-progress-bar-thumb-width: 10px;
--qv-progress-bar-thumb-height: 10px;
--qv-progress-bar-thumb-hover-width: 15px;
--qv-progress-bar-thumb-hover-height: 15px;
--qv-progress-bar-thumb-box-shadow: rgba(0, 0, 0, 0.753);
--qv-progress-bar-thumb-bg: rgb(125, 0, 254);
--qv-progress-bar-thumb-br: var(--qv-border-radius-circle);
/*------------ Player progress-bar thumb - end ------------*/
--qv-load-background-color: transparent;
/*------------ Recorder links modal - end ------------*/
--qv-links-modal-br: var(--qv-border-radius-base);
--qv-links-modal-bg: var(--qv-white);
/*--qv-links-modal-text-shadow;*/
--qv-links-modal-color:var(--qv-text-color-secondary);
--qv-links-modal-font-size: var(--qv-font-size-body2);
--qv-links-modal-line-height: var(--qv-line-height-body2);
--qv-links-modal-font-weight: var(--qv-font-weight-bold);
--qv-links-modal-input-bg:var(--qv-gray-4);
/*--qv-links-modal-error-message;*/
--qv-links-modal-errorMsg-color:var(--qv-red-base);
--qv-links-modal-errorMsg-bg:var(--qv-red-base-1-t);
--qv-links-modal-errorMsg-font-size: var(--qv-font-size-body2);
--qv-links-modal-errorMsg-line-height: var(--qv-line-height-body2);
--qv-links-modal-errorMsg-font-weight: var(--qv-font-weight-bold);
--qv-links-modal-errorMsg-br: var(--qv-border-radius-base);
--qv-links-modal-errorMsg-border: 1px solid var(--qv-red-base-2-t);
--qv-links-modal-errorMsg-box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.26);
;
/*\\ Link approve button config //*/
--qv-btn-linkApprove-color: var(--qv-white);
--qv-btn-linkApprove-hover-color: var(--qv-white);
--qv-btn-linkApprove-bg: rgba(40, 40, 40, 1);
--qv-btn-linkApprove-hover-bg: rgba(82, 196, 26, 1);
/*\\ Reject button config //*/
--qv-btn-linkReject-color: var(--qv-text-color-secondary);
--qv-btn-linkReject-hover-color: var(--qv-btn-linkReject-color);
--qv-btn-linkReject-bg: var(--qv-gray-5);
--qv-btn-linkReject-hover-bg:var(--qv-gray-6);
/*Add color to player cover */
--qv-playerCover-color: var(--qv-white)
/*===================PLAYER CUSTOM VARS===============*/
}