Create test page
This commit is contained in:
parent
f46ebc6330
commit
7d0b63ae63
8 changed files with 313 additions and 185 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
node_modules
|
||||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"git.ignoreLimitWarning": true
|
||||||
|
}
|
||||||
BIN
bun.lockb
Executable file
BIN
bun.lockb
Executable file
Binary file not shown.
|
|
@ -7,5 +7,14 @@
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://sudovanilla.com/code/Korbs/Plyx-Player/issues",
|
"url": "https://sudovanilla.com/code/Korbs/Plyx-Player/issues",
|
||||||
"email": "support@sduovanilla.com"
|
"email": "support@sduovanilla.com"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "concurrently \"serve ./\" \"npm run sass\"",
|
||||||
|
"sass": "sass -q --watch src/styles/app.scss:src/styles/app.css --style=compressed --no-source-map"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"concurrently": "^8.2.1",
|
||||||
|
"sass": "^1.69.3",
|
||||||
|
"serve": "^14.2.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,185 +1 @@
|
||||||
.plyx-player {
|
: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}
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
204
src/styles/app.scss
Normal file
204
src/styles/app.scss
Normal file
|
|
@ -0,0 +1,204 @@
|
||||||
|
$color_1: white;
|
||||||
|
$color_2: #fff;
|
||||||
|
$font-family_1: Arial, Helvetica, sans-serif;
|
||||||
|
$background-color_1: transparent;
|
||||||
|
$background-color_2: rgba(0, 0, 0, 0.6);
|
||||||
|
$background-color_3: #fff;
|
||||||
|
|
||||||
|
: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: $font-family_1;
|
||||||
|
color: $color_1;
|
||||||
|
.plyx-player {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
.row-1 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
.row-1-start {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.row-1-end {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
color: $color_1;
|
||||||
|
background-color: $background-color_1;
|
||||||
|
border: none;
|
||||||
|
margin: 0px 6px;
|
||||||
|
&:hover {
|
||||||
|
background: rgba(44, 44, 44, 0.6);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#volume-button {
|
||||||
|
svg {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
fill: white;
|
||||||
|
padding: 3px 0px 0px 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-controls.hide {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.video-progress {
|
||||||
|
position: relative;
|
||||||
|
height: 6.4px;
|
||||||
|
margin: 24px 0px;
|
||||||
|
}
|
||||||
|
progress {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 100%;
|
||||||
|
height: 8.4px;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
&::-webkit-progress-bar {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
&::-webkit-progress-value {
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
border: none;
|
||||||
|
background: #ff7e7e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.seek {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0;
|
||||||
|
&:hover {
|
||||||
|
+ {
|
||||||
|
.seek-tooltip {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.seek-tooltip {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: -32px;
|
||||||
|
margin-left: -30px;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 3px;
|
||||||
|
content: attr(data-title);
|
||||||
|
font-weight: bold;
|
||||||
|
color: $color_2;
|
||||||
|
background-color: $background-color_2;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
input[type=range] {
|
||||||
|
height: 8.4px;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
&::-webkit-slider-runnable-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
&::-moz-range-track {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&::-webkit-slider-runnable-track {
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 1.3px;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
}
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--pylx-thumb);
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
&::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 8.4px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input[type=range].volume {
|
||||||
|
height: 5px;
|
||||||
|
background-color: $background-color_3;
|
||||||
|
&::-webkit-slider-runnable-track {
|
||||||
|
background-color: $background-color_1;
|
||||||
|
}
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
margin-left: 0;
|
||||||
|
height: 14px;
|
||||||
|
width: 14px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input[type="range"] {
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
background: var(--pylx-thumb);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hide {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
#progress-bar {
|
||||||
|
background: var(--plyx-progress-bar-bg);
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
test/WING IT! - Blender Open Movie-1080p.mp4
Normal file
BIN
test/WING IT! - Blender Open Movie-1080p.mp4
Normal file
Binary file not shown.
95
test/index.html
Normal file
95
test/index.html
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
<!-- Credits -->
|
||||||
|
<!-- The video shown here is called "WING IT!" -->
|
||||||
|
<!-- It created by Blender Studio and Rik Schutte -->
|
||||||
|
<!-- Also available to watch on their official PeerTube: -->
|
||||||
|
<!-- https://video.blender.org/w/vrjS4NB4cwnJhrib8uEwi6 -->
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Plyx Player</title>
|
||||||
|
<link rel="stylesheet" href="/src/styles/app.css">
|
||||||
|
<script src="/src/index.js" type="module"></script>
|
||||||
|
<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Plyx Player <span>By SudoVanilla</span></p>
|
||||||
|
<div class="video-container">
|
||||||
|
<video class="plyx-player" src="WING IT! - Blender Open Movie-1080p.mp4"></video>
|
||||||
|
</div>
|
||||||
|
<div class="credits">
|
||||||
|
<p><a href="https://video.blender.org/w/vrjS4NB4cwnJhrib8uEwi6">WING IT!</a> <span>By Blender Studio</span></p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #090909;
|
||||||
|
color: white;
|
||||||
|
font-family: arial;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
content: "";
|
||||||
|
background-image: url(https://video.blender.org/lazy-static/previews/3f6a8580-1bac-4513-ae59-2df7d032ba4f.jpg);
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
opacity: 0.06;
|
||||||
|
filter: blur(10px);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > p:nth-child(1) {
|
||||||
|
font-size: 24px;
|
||||||
|
margin: auto;
|
||||||
|
max-width: 1800px;
|
||||||
|
padding-top: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
.credits > p:nth-child(2) {
|
||||||
|
opacity: 0.5;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
opacity: 0.5;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credits {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 24px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1800px;
|
||||||
|
margin: auto;
|
||||||
|
text-align: right;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
padding-right: 48px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1800px;
|
||||||
|
width: calc(100% - 48px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in a new issue