From 34f35974e05c63df00d4fd92357bf390c4fb15c1 Mon Sep 17 00:00:00 2001 From: Cleo John <30842467+CutestNekoAqua@users.noreply.github.com> Date: Fri, 7 Oct 2022 03:57:49 +0200 Subject: [PATCH] Change Airplay to SVG and refactor (#2156) * 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 --- web/components/video/VideoJS/VideoJS.scss | 101 ++++++++++++---------- web/components/video/airplay.png | Bin 160 -> 0 bytes web/components/video/airplay.svg | 23 +++++ 3 files changed, 80 insertions(+), 44 deletions(-) delete mode 100644 web/components/video/airplay.png create mode 100644 web/components/video/airplay.svg diff --git a/web/components/video/VideoJS/VideoJS.scss b/web/components/video/VideoJS/VideoJS.scss index 5ee84db7e..874c6c2e6 100644 --- a/web/components/video/VideoJS/VideoJS.scss +++ b/web/components/video/VideoJS/VideoJS.scss @@ -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'; + } } diff --git a/web/components/video/airplay.png b/web/components/video/airplay.png deleted file mode 100644 index 6529f6902d0d318a69961a501854834042ec0952..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 160 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<^!2%?|T$vIEq|!ZI978H@y`6HBlR=S(;c}zt zt%*}_G=?RzPgAtu*5a<-u;JIoi9cHeX54pi2{davBmQ&$grBRqLM^uawo_d4sIz6= zYcD22|G5HP0ke)yIA + + + + + + + + + + + + +