LogalDeveloper/owncast
0
Fork 0
Code Activity

Change Airplay to SVG and refactor (#2156)

Browse Source 
* Replaced airplay.png with airplay.svg

* Refactor VideoJS.scss to propper scss syntax

* Fix for the messup I made during the refactor

* fix airplay size

* hotfix fixed aircast styling
This commit is contained in:
Cleo John
2022-10-07 03:57:49 +02:00
committed by GitHub
parent a71eb8cdd2
commit 34f35974e0
3 changed files with 80 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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