Korbs/zorn-js
Archived
1
Fork 0
Code Issues Pull requests Activity

Fix root for progress bar

Browse source
This commit is contained in:
Korbs 2023-11-06 02:10:21 -05:00
parent c61a99ba52
commit 5a994ddff9
No known key found for this signature in database
1 changed files with 58 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/styles/app.scss
View file

@ -2,8 +2,9 @@ $color_1: white;
$color_2: #fff; $color_2: #fff;
$font-family_1: Arial, Helvetica, sans-serif; $font-family_1: Arial, Helvetica, sans-serif;
$background-color_1: transparent; $background-color_1: transparent;
$background-color_2: rgba(0, 0, 0, 0.6); $background-color_2: rgba(0, 0, 0, 0.5);
$background-color_3: #fff; $background-color_3: #fff;
$background-color_4: rgba(255, 255, 255, 0.1);
:root { :root {
--plyx-progress-bar-bg: rgba(100,100,100,0.5); --plyx-progress-bar-bg: rgba(100,100,100,0.5);
@ -11,6 +12,33 @@ $background-color_3: #fff;
--pylx-thumb: red; --pylx-thumb: red;
--pylx-rounded-corners: 4px; --pylx-rounded-corners: 4px;
} }
.plyx-context-menu {
background: linear-gradient( 45deg, rgb(10, 20, 28) 0%, rgba(10, 20, 28, 0.7) 100% );
border-radius: 6px;
border: 1px rgba(255, 255, 255, 0.08) solid;
ul {
list-style: none;
margin: 0px;
padding: 0px;
li {
padding: 8px 32px 8px 16px;
margin: 4px;
border-radius: 4px;
font-family: arial;
&:hover {
background: $background-color_4;
cursor: pointer;
}
i {
font-size: 14px;
margin-right: 12px;
width: 12px;
}
}
}
}
.video-container { .video-container {
position: relative; position: relative;
display: flex; display: flex;
@ -21,6 +49,19 @@ $background-color_3: #fff;
.plyx-player { .plyx-player {
display: inline-flex; display: inline-flex;
} }
.hide {
opacity: 0;
pointer-events: none;
}
.plyx-player-title {
position: absolute;
top: 0px;
width: 100%;
background-image: linear-gradient(to top, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
padding: 12px 24px;
font-size: 18px;
font-weight: bold;
}
.plyx-player-controls { .plyx-player-controls {
display: inline-flex; display: inline-flex;
right: 0; right: 0;
@ -58,6 +99,20 @@ $background-color_3: #fff;
border-radius: 6px; border-radius: 6px;
} }
} }
.volume-controls {
&:hover > #volume {
opacity: 1;
transition: 0.3s opacity, 0.3s width;
margin: 0px;
width: 72px;
}
}
#volume {
opacity: 0;
transition: 0.3s opacity, 0.3s width;
margin: 0px -6px;
width: 0px;
}
#volume-button { #volume-button {
svg { svg {
aspect-ratio: 1; aspect-ratio: 1;
@ -67,10 +122,6 @@ $background-color_3: #fff;
padding: 3px 0px 0px 0px; padding: 3px 0px 0px 0px;
} }
} }
.video-controls.hide {
opacity: 0;
pointer-events: none;
}
.video-progress { .video-progress {
position: relative; position: relative;
height: 6.4px; height: 6.4px;
@ -95,7 +146,7 @@ $background-color_3: #fff;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
border: none; border: none;
background: #ff7e7e; background: var(--plyx-progress-bar);
} }
} }
.seek { .seek {
@ -201,4 +252,4 @@ $background-color_3: #fff;
border-radius: 10px; border-radius: 10px;
} }
} }
} }