From ded47a0c2583785056a1a7d3f1489ce4a4b8f332 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Sat, 8 Oct 2022 16:51:49 -0700 Subject: [PATCH] Make live indicator use our theme colors. For #1899 --- web/components/video/VideoJS/VideoJS.scss | 98 ++++++++++--------- .../tokens/color/default-theme.yaml | 3 + web/styles/theme.less | 3 +- web/styles/variables.css | 3 +- 4 files changed, 57 insertions(+), 50 deletions(-) diff --git a/web/components/video/VideoJS/VideoJS.scss b/web/components/video/VideoJS/VideoJS.scss index 874c6c2e6..3ded12f32 100644 --- a/web/components/video/VideoJS/VideoJS.scss +++ b/web/components/video/VideoJS/VideoJS.scss @@ -1,64 +1,66 @@ /* Change all text and icon colors in the player. */ .vjs-owncast { + .video-js { + color: var(--theme-color-components-text-on-light); + } - .video-js { - color: var(--theme-color-components-text-on-light); - } + .vjs-big-play-button { + z-index: 10; + color: var(--theme-color-action); + font-size: 8rem !important; + border-color: transparent !important; + border-radius: var(--theme-rounded-corners) !important; + background-color: transparent !important; + text-shadow: 2px 3px 4px #0000005f; - .vjs-big-play-button { - z-index: 10; - color: var(--theme-color-action); - font-size: 8rem !important; - border-color: transparent !important; - border-radius: var(--theme-rounded-corners) !important; - background-color: transparent !important; - text-shadow: 2px 3px 4px #0000005f; + -webkit-text-stroke: 2px white; + text-stroke: 2px white; - -webkit-text-stroke: 2px white; - text-stroke: 2px white; + :hover { + transition: all 0.2s ease-in-out; + font-size: 10rem; + text-shadow: 2px 5px 4px #00000093; + } + } - :hover { - transition: all 0.2s ease-in-out; - font-size: 10rem; - text-shadow: 2px 5px 4px #00000093; - } - } + .vjs-loading-spinner { + z-index: 10; + display: block; + color: var(--theme-color-components-text-on-light); + } - .vjs-loading-spinner { - z-index: 10; - display: block; - color: var(--theme-color-components-text-on-light); - } - - .vjs-control-bar { - color: var(--theme-color-components-text-on-light); - background-color: var(--theme-color-background-main) !important; - } - - .vjs-control { - color: var(--theme-color-components-text-on-light); - } + .vjs-control-bar { + color: var(--theme-color-components-text-on-light); + background-color: var(--theme-color-background-main) !important; + } + .vjs-control { + color: var(--theme-color-components-text-on-light); + } } .vjs-airplay { - .vjs-icon-placeholder::before { - content: url('../airplay.svg'); - width: 50% !important; - height: 50% !important; - top: 15% !important; - left: 15% !important; - } + .vjs-icon-placeholder::before { + content: url('../airplay.svg'); + width: 50% !important; + height: 50% !important; + top: 15% !important; + left: 15% !important; + } } .vjs-quality-selector { - .vjs-icon-placeholder { - font-family: VideoJS, serif; - font-weight: 400; - font-style: normal; - } + .vjs-icon-placeholder { + font-family: VideoJS, serif; + font-weight: 400; + font-style: normal; + } - .vjs-icon-placeholder::before { - content: '\f110'; - } + .vjs-icon-placeholder::before { + content: '\f110'; + } +} + +.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder { + color: var(--theme-color-components-video-live-indicator) !important; } diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml index 3ffeb70e5..4823bd9d9 100644 --- a/web/style-definitions/tokens/color/default-theme.yaml +++ b/web/style-definitions/tokens/color/default-theme.yaml @@ -222,3 +222,6 @@ theme: background: value: 'var(--theme-color-palette-2)' comment: '{theme.color.palette.2.comment}' + live-indicator: + value: 'var(--theme-color-palette-7)' + comment: 'The Live dot indicator in the control bar of the video player' diff --git a/web/styles/theme.less b/web/styles/theme.less index 54cdb502f..168d82cb8 100644 --- a/web/styles/theme.less +++ b/web/styles/theme.less @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 30 Sep 2022 07:36:16 GMT +// Generated on Sat, 08 Oct 2022 23:40:28 GMT // // How to edit these values: // Edit the corresponding token file under the style-definitions directory @@ -97,6 +97,7 @@ @theme-color-components-form-field-text: var(--theme-color-palette-0); // Dark primary @theme-color-components-form-field-border: var(--theme-color-palette-0); // Dark primary @theme-color-components-video-background: var(--theme-color-palette-2); // Dark alternate +@theme-color-components-video-live-indicator: var(--theme-color-palette-7); // The Live dot indicator in the control bar of the video player @owncast-purple-25: rgba(120, 113, 255, 0.25); @color-unknown: #7a5cf3; @color-unknown-2: #fffffe; diff --git a/web/styles/variables.css b/web/styles/variables.css index 5e669a5a5..c6c57471d 100644 --- a/web/styles/variables.css +++ b/web/styles/variables.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Fri, 30 Sep 2022 07:36:16 GMT + * Generated on Sat, 08 Oct 2022 23:40:28 GMT * * How to edit these values: * Edit the corresponding token file under the style-definitions directory @@ -99,6 +99,7 @@ --theme-color-components-form-field-text: var(--theme-color-palette-0); /* Dark primary */ --theme-color-components-form-field-border: var(--theme-color-palette-0); /* Dark primary */ --theme-color-components-video-background: var(--theme-color-palette-2); /* Dark alternate */ + --theme-color-components-video-live-indicator: var(--theme-color-palette-7); /* The Live dot indicator in the control bar of the video player */ --owncast-purple-25: rgba(120, 113, 255, 0.25); --color-unknown: #7a5cf3; --color-unknown-2: #fffffe;