mirror of
https://github.com/owncast/owncast.git
synced 2025-11-04 05:17:27 +08: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
@ -1,51 +1,64 @@
|
|||||||
/* Change all text and icon colors in the player. */
|
/* Change all text and icon colors in the player. */
|
||||||
.vjs-owncast.video-js {
|
.vjs-owncast {
|
||||||
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;
|
||||||
|
|
||||||
|
-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 {
|
.vjs-airplay {
|
||||||
z-index: 10;
|
.vjs-icon-placeholder::before {
|
||||||
color: var(--theme-color-action);
|
content: url('../airplay.svg');
|
||||||
font-size: 8rem !important;
|
width: 50% !important;
|
||||||
border-color: transparent !important;
|
height: 50% !important;
|
||||||
border-radius: var(--theme-rounded-corners) !important;
|
top: 15% !important;
|
||||||
background-color: transparent !important;
|
left: 15% !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-owncast .vjs-loading-spinner {
|
.vjs-quality-selector {
|
||||||
z-index: 10;
|
.vjs-icon-placeholder {
|
||||||
display: block;
|
font-family: VideoJS, serif;
|
||||||
color: var(--theme-color-components-text-on-light);
|
font-weight: 400;
|
||||||
}
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.vjs-owncast .vjs-control-bar {
|
.vjs-icon-placeholder::before {
|
||||||
color: var(--theme-color-components-text-on-light);
|
content: '\f110';
|
||||||
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';
|
|
||||||
}
|
}
|
||||||
|
|||||||
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 |
Reference in New Issue
Block a user