Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make live indicator use our theme colors. For #1899

Browse Source
This commit is contained in:
Gabe Kangas 2022-10-08 16:51:49 -07:00
parent 19e9895fe5
commit ded47a0c25
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
4 changed files with 57 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
web/components/video/VideoJS/VideoJS.scss
View File

@ -1,64 +1,66 @@
/* Change all text and icon colors in the player. */ /* Change all text and icon colors in the player. */
.vjs-owncast { .vjs-owncast {
.video-js {
color: var(--theme-color-components-text-on-light);
}
.video-js { .vjs-big-play-button {
color: var(--theme-color-components-text-on-light); 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 { -webkit-text-stroke: 2px white;
z-index: 10; text-stroke: 2px white;
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; :hover {
text-stroke: 2px white; transition: all 0.2s ease-in-out;
font-size: 10rem;
text-shadow: 2px 5px 4px #00000093;
}
}
:hover { .vjs-loading-spinner {
transition: all 0.2s ease-in-out; z-index: 10;
font-size: 10rem; display: block;
text-shadow: 2px 5px 4px #00000093; color: var(--theme-color-components-text-on-light);
} }
}
.vjs-loading-spinner { .vjs-control-bar {
z-index: 10; color: var(--theme-color-components-text-on-light);
display: block; background-color: var(--theme-color-background-main) !important;
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 {
color: var(--theme-color-components-text-on-light);
}
} }
.vjs-airplay { .vjs-airplay {
.vjs-icon-placeholder::before { .vjs-icon-placeholder::before {
content: url('../airplay.svg'); content: url('../airplay.svg');
width: 50% !important; width: 50% !important;
height: 50% !important; height: 50% !important;
top: 15% !important; top: 15% !important;
left: 15% !important; left: 15% !important;
} }
} }
.vjs-quality-selector { .vjs-quality-selector {
.vjs-icon-placeholder { .vjs-icon-placeholder {
font-family: VideoJS, serif; font-family: VideoJS, serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
.vjs-icon-placeholder::before { .vjs-icon-placeholder::before {
content: '\f110'; 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;
} }

3
web/style-definitions/tokens/color/default-theme.yaml
View File

@ -222,3 +222,6 @@ theme:
background: background:
value: 'var(--theme-color-palette-2)' value: 'var(--theme-color-palette-2)'
comment: '{theme.color.palette.2.comment}' 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'

3
web/styles/theme.less
View File

@ -1,6 +1,6 @@
// Do not edit directly // 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: // How to edit these values:
// Edit the corresponding token file under the style-definitions directory // 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-text: var(--theme-color-palette-0); // Dark primary
@theme-color-components-form-field-border: 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-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); @owncast-purple-25: rgba(120, 113, 255, 0.25);
@color-unknown: #7a5cf3; @color-unknown: #7a5cf3;
@color-unknown-2: #fffffe; @color-unknown-2: #fffffe;

3
web/styles/variables.css
View File

@ -1,6 +1,6 @@
/** /**
* Do not edit directly * 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: * How to edit these values:
* Edit the corresponding token file under the style-definitions directory * 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-text: var(--theme-color-palette-0); /* Dark primary */
--theme-color-components-form-field-border: 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-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); --owncast-purple-25: rgba(120, 113, 255, 0.25);
--color-unknown: #7a5cf3; --color-unknown: #7a5cf3;
--color-unknown-2: #fffffe; --color-unknown-2: #fffffe;