mirror of
https://github.com/owncast/owncast.git
synced 2024-10-10 19:16:02 +00:00
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
This commit is contained in:
Cleo John
GitHub
parent
a71eb8cdd2
commit
34f35974e0
@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 160 B |
23
web/components/video/airplay.svg
Normal file
23
web/components/video/airplay.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 46 42" style="enable-background:new 0 0 46 42;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{clip-path:url(#SVGID_2_);}
|
||||
</style>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_1_" d="M22.2,24.2L8.5,39.9c-0.5,0.6-0.1,1.5,0.7,1.5h27.5c0.8,0,1.2-0.9,0.7-1.5L23.8,24.2
|
||||
c-0.2-0.2-0.5-0.4-0.8-0.4C22.7,23.8,22.4,23.9,22.2,24.2 M6.5,0.6c-2.3,0-3.1,0.2-3.9,0.7C1.8,1.7,1.1,2.4,0.7,3.2
|
||||
C0.2,4,0,4.9,0,7.1v17.5c0,2.3,0.2,3.1,0.7,3.9c0.4,0.8,1.1,1.5,1.9,1.9c0.8,0.4,1.7,0.7,3.9,0.7h5.2l2.2-2.6H5.8
|
||||
c-1.1,0-1.6-0.1-2-0.3c-0.4-0.2-0.7-0.5-1-1c-0.2-0.4-0.3-0.8-0.3-2v-19c0-1.1,0.1-1.6,0.3-2c0.2-0.4,0.5-0.7,1-1
|
||||
c0.4-0.2,0.8-0.3,2-0.3h34.3c1.1,0,1.6,0.1,2,0.3c0.4,0.2,0.7,0.5,1,1c0.2,0.4,0.3,0.8,0.3,2v19c0,1.1-0.1,1.6-0.3,2
|
||||
c-0.2,0.4-0.5,0.7-1,1c-0.4,0.2-0.8,0.3-2,0.3H32l2.2,2.6h5.2c2.3,0,3.1-0.2,3.9-0.7c0.8-0.4,1.5-1.1,1.9-1.9
|
||||
c0.4-0.8,0.7-1.7,0.7-3.9V7.1c0-2.3-0.2-3.1-0.7-3.9c-0.4-0.8-1.1-1.5-1.9-1.9c-0.8-0.4-1.7-0.7-3.9-0.7H6.5z"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
<rect x="-6.4" y="-5.8" class="st0" width="58.7" height="53.6"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
x
Reference in New Issue
Block a user