Create test page
This commit is contained in:
Korbs
parent
f46ebc6330
commit
7d0b63ae63
8 changed files with 313 additions and 185 deletions
|
|
@ -1,185 +1 @@
|
|||
.plyx-player {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
}
|
||||
.video-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: white;
|
||||
}
|
||||
.plyx-player-controls {
|
||||
display: inline-flex;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: all 0.2s ease;
|
||||
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
|
||||
flex-direction: inherit;
|
||||
}
|
||||
.video-container .row-1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.video-container .row-1-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.video-container .row-1-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.video-container button {
|
||||
aspect-ratio: 1;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin: 0px 6px;
|
||||
}
|
||||
.video-container button:hover {
|
||||
background: rgba(44, 44, 44, 0.6);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.video-container #volume-button svg {
|
||||
aspect-ratio: 1;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
fill: white;
|
||||
padding: 3px 0px 0px 0px;
|
||||
}
|
||||
.video-container .video-controls.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.video-container .video-progress {
|
||||
position: relative;
|
||||
height: 6.4px;
|
||||
margin: 24px 0px;
|
||||
}
|
||||
.video-container progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.video-container progress::-webkit-progress-bar {
|
||||
background-color: #474545;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.video-container progress::-webkit-progress-value {
|
||||
background: red;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.video-container progress::-moz-progress-bar {
|
||||
border: none;
|
||||
background: #ff7e7e;
|
||||
}
|
||||
.video-container .seek {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
.video-container .seek:hover + .seek-tooltip {
|
||||
display: block;
|
||||
}
|
||||
.video-container .seek-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
margin-left: -20px;
|
||||
font-size: 12px;
|
||||
padding: 3px;
|
||||
content: attr(data-title);
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.video-container input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
height: 8.4px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.video-container input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
.video-container input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
}
|
||||
.video-container input[type=range]:focus::-moz-range-track {
|
||||
outline: none;
|
||||
}
|
||||
.video-container input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
border-radius: 1.3px;
|
||||
-webkit-appearance: none;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.video-container input[type=range]::-webkit-slider-thumb {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 16px;
|
||||
background: red;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.video-container input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.video-container input[type=range].volume {
|
||||
height: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.video-container input[type=range].volume::-webkit-slider-runnable-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
.video-container input[type=range].volume::-webkit-slider-thumb {
|
||||
margin-left: 0;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
.video-container input[type=range].volume::-moz-range-thumb {
|
||||
border: 1px solid #fff;
|
||||
background: #fff;
|
||||
}
|
||||
.video-container input[type="range"]::-moz-range-thumb {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: #f00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.video-container .hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.video-container #progress-bar {
|
||||
background: rgba(12, 12, 12, 0.1);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
:root{--plyx-progress-bar-bg: rgba(100,100,100,0.5);--plyx-progress-bar: rgba(255, 0, 0, 0.5);--pylx-thumb: red;--pylx-rounded-corners: 4px}.video-container{position:relative;display:flex;flex-direction:column;justify-content:center;font-family:Arial,Helvetica,sans-serif;color:#fff}.video-container .plyx-player{display:inline-flex}.video-container .plyx-player-controls{display:inline-flex;right:0;left:0;padding:10px;position:absolute;bottom:0;transition:all .2s ease;background-image:linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));flex-direction:inherit}.video-container .plyx-player-controls .row-1{display:flex;justify-content:space-between;width:100%;padding-bottom:12px}.video-container .plyx-player-controls .row-1-start{display:flex;align-items:center}.video-container .plyx-player-controls .row-1-end{display:flex;align-items:center}.video-container .plyx-player-controls button{aspect-ratio:1;height:32px;width:32px;color:#fff;background-color:rgba(0,0,0,0);border:none;margin:0px 6px}.video-container .plyx-player-controls button:hover{background:rgba(44,44,44,.6);border-radius:6px}.video-container .plyx-player-controls #volume-button svg{aspect-ratio:1;height:32px;width:32px;fill:#fff;padding:3px 0px 0px 0px}.video-container .plyx-player-controls .video-controls.hide{opacity:0;pointer-events:none}.video-container .plyx-player-controls .video-progress{position:relative;height:6.4px;margin:24px 0px}.video-container .plyx-player-controls progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:2px;width:100%;height:8.4px;pointer-events:none;position:absolute;top:0}.video-container .plyx-player-controls progress::-webkit-progress-bar{border-radius:2px}.video-container .plyx-player-controls progress::-webkit-progress-value{background:rgba(0,0,0,0);border-radius:2px}.video-container .plyx-player-controls progress::-moz-progress-bar{border:none;background:#ff7e7e}.video-container .plyx-player-controls .seek{position:absolute;top:0;width:100%;cursor:pointer;margin:0}.video-container .plyx-player-controls .seek:hover+.seek-tooltip{display:block}.video-container .plyx-player-controls .seek-tooltip{display:none;position:absolute;top:-32px;margin-left:-30px;font-size:12px;padding:3px;content:attr(data-title);font-weight:bold;color:#fff;background-color:rgba(0,0,0,.6);border-radius:4px;padding:6px}.video-container .plyx-player-controls input[type=range]{height:8.4px;background:rgba(0,0,0,0);cursor:pointer}.video-container .plyx-player-controls input[type=range]:focus{outline:none}.video-container .plyx-player-controls input[type=range]:focus::-webkit-slider-runnable-track{background:rgba(0,0,0,0)}.video-container .plyx-player-controls input[type=range]:focus::-moz-range-track{outline:none}.video-container .plyx-player-controls input[type=range]::-webkit-slider-runnable-track{width:100%;cursor:pointer;border-radius:1.3px;-webkit-appearance:none;transition:all .4s ease}.video-container .plyx-player-controls input[type=range]::-webkit-slider-thumb{height:12px;width:12px;border-radius:10px;background:var(--pylx-thumb);cursor:pointer;-webkit-appearance:none;margin-left:-1px}.video-container .plyx-player-controls input[type=range]::-moz-range-track{width:100%;height:8.4px;cursor:pointer;border:1px solid rgba(0,0,0,0);background:rgba(0,0,0,0);border-radius:0}.video-container .plyx-player-controls input[type=range].volume{height:5px;background-color:#fff}.video-container .plyx-player-controls input[type=range].volume::-webkit-slider-runnable-track{background-color:rgba(0,0,0,0)}.video-container .plyx-player-controls input[type=range].volume::-webkit-slider-thumb{margin-left:0;height:14px;width:14px;background:#fff}.video-container .plyx-player-controls input[type=range].volume::-moz-range-thumb{border:1px solid #fff;background:#fff}.video-container .plyx-player-controls input[type=range]::-moz-range-thumb{height:12px;width:12px;border-radius:10px;border:none;background:var(--pylx-thumb);cursor:pointer}.video-container .plyx-player-controls .hide{opacity:0;pointer-events:none}.video-container .plyx-player-controls #progress-bar{background:var(--plyx-progress-bar-bg);border:none;border-radius:10px}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue