update
This commit is contained in:
parent
b6f9b30e43
commit
da2a8c3555
4 changed files with 153 additions and 23 deletions
|
|
@ -55,11 +55,14 @@ export var Controls = `
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--zorn-progress-bar-bg: rgba(100, 100, 100, 0.5);
|
--zorn-progress-bar-bg: rgba(255, 0, 0, 0.5);
|
||||||
--zorn-progress-bar: rgba(255, 0, 0, 0.5);
|
--zorn-progress-bar: rgba(100, 100, 100, 0.5);
|
||||||
--zorn-thumb: red;
|
--zorn-thumb: red;
|
||||||
--zorn-rounded-corners: 4px;
|
--zorn-rounded-corners: 4px;
|
||||||
}
|
}
|
||||||
|
.video-container video {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
.zorn-context-menu {
|
.zorn-context-menu {
|
||||||
background: linear-gradient(45deg, #0a141c 0%, rgba(10, 20, 28, 1) 100%);
|
background: linear-gradient(45deg, #0a141c 0%, rgba(10, 20, 28, 1) 100%);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
@ -181,6 +184,7 @@ export var Controls = `
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
|
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
|
||||||
flex-direction: inherit;
|
flex-direction: inherit;
|
||||||
|
border-radius: 0px 0px 10px 10px;
|
||||||
}
|
}
|
||||||
.video-container .zorn-player-controls .row-1 {
|
.video-container .zorn-player-controls .row-1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -246,7 +250,7 @@ export var Controls = `
|
||||||
}
|
}
|
||||||
.video-container .zorn-player-controls progress::-webkit-progress-bar {
|
.video-container .zorn-player-controls progress::-webkit-progress-bar {
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
background: var(--zorn-progress-bar-bg);
|
background: var(--zorn-progress-bar);
|
||||||
}
|
}
|
||||||
.video-container .zorn-player-controls progress::-webkit-progress-value {
|
.video-container .zorn-player-controls progress::-webkit-progress-value {
|
||||||
background: var(--zorn-progress-bar);
|
background: var(--zorn-progress-bar);
|
||||||
|
|
@ -349,7 +353,7 @@ export var Controls = `
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.video-container .zorn-player-controls #progress-bar {
|
.video-container .zorn-player-controls #progress-bar {
|
||||||
background: var(--zorn-progress-bar-bg);
|
background: var(--zorn-progress-bar);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,14 @@
|
||||||
body {
|
body {
|
||||||
background-color: #111111;
|
background-color: #111111;
|
||||||
color: white;
|
color: white;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 64px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 75% 25%;
|
||||||
|
grid-gap: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
video {
|
video {
|
||||||
height: 100%
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
135
test/index.html
135
test/index.html
|
|
@ -4,17 +4,134 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Zorn</title>
|
<title>Zorn</title>
|
||||||
<link rel="stylesheet" href="./css/index.css"/>
|
<link rel="stylesheet" href="./css/index.css"/>
|
||||||
|
<link rel="stylesheet" media="(prefers-color-scheme:light)" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/themes/light.css"/>
|
||||||
|
<link rel="stylesheet" media="(prefers-color-scheme:dark)" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/themes/dark.css" onload="document.documentElement.classList.add('sl-theme-dark');"/>
|
||||||
|
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/shoelace-autoloader.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="video-container">
|
<div>
|
||||||
<video class="zorn-player" layout="default">
|
<div class="video-container">
|
||||||
<!-- Quality changer support has not been worked on yet -->
|
<video class="zorn-player" layout="default">
|
||||||
<source label="720p" src="./media/Ennie-and-Yoyki-Ungirly-Games.mp4" type="video/mp4">
|
<!-- Quality changer support has not been worked on yet -->
|
||||||
<!-- Subtitles -->
|
<source label="720p" src="./media/Ennie-and-Yoyki-Ungirly-Games.mp4" type="video/mp4">
|
||||||
<track src="./media/subtitles/English.vtt" kind="subtitles" srclang="en" label="English">
|
<!-- Subtitles -->
|
||||||
<track src="./media/subtitles/Russian.vtt" kind="subtitles" srclang="ru" label="Russian">
|
<track src="./media/subtitles/English.vtt" kind="subtitles" srclang="en" label="English">
|
||||||
</video>
|
<track src="./media/subtitles/Russian.vtt" kind="subtitles" srclang="ru" label="Russian">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="skeleton-overview">
|
||||||
|
<header>
|
||||||
|
<sl-skeleton effect="sheen"></sl-skeleton>
|
||||||
|
<sl-skeleton effect="sheen"></sl-skeleton>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<sl-skeleton effect="sheen"></sl-skeleton>
|
||||||
|
<sl-skeleton effect="sheen"></sl-skeleton>
|
||||||
|
<sl-skeleton effect="sheen"></sl-skeleton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.skeleton-overview header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-overview header sl-skeleton:last-child {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-overview sl-skeleton {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-overview sl-skeleton:nth-child(1) {
|
||||||
|
float: left;
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-overview sl-skeleton:nth-child(3) {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-overview sl-skeleton:nth-child(4) {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
.skeleton__indicator:nth-child(1) {
|
||||||
|
--border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.skeleton-shapes sl-skeleton {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-shapes .square::part(indicator) {
|
||||||
|
--border-radius: var(--sl-border-radius-medium);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="skeleton-overview">
|
||||||
|
<header class="skeleton-shapes">
|
||||||
|
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
|
||||||
|
<div style="display: flex; flex-direction: column; width: 100%;">
|
||||||
|
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
|
||||||
|
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
<div class="skeleton-overview">
|
||||||
|
<header class="skeleton-shapes">
|
||||||
|
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
|
||||||
|
<div style="display: flex; flex-direction: column; width: 100%;">
|
||||||
|
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
|
||||||
|
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
<div class="skeleton-overview">
|
||||||
|
<header class="skeleton-shapes">
|
||||||
|
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
|
||||||
|
<div style="display: flex; flex-direction: column; width: 100%;">
|
||||||
|
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
|
||||||
|
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
<div class="skeleton-overview">
|
||||||
|
<header class="skeleton-shapes">
|
||||||
|
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
|
||||||
|
<div style="display: flex; flex-direction: column; width: 100%;">
|
||||||
|
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
|
||||||
|
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
<div class="skeleton-overview">
|
||||||
|
<header class="skeleton-shapes">
|
||||||
|
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
|
||||||
|
<div style="display: flex; flex-direction: column; width: 100%;">
|
||||||
|
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
|
||||||
|
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<script src="./js/zorn.js" type="module"></script>
|
<script src="./js/zorn.js" type="module"></script>
|
||||||
</html>
|
</html>
|
||||||
|
<script></script>
|
||||||
File diff suppressed because one or more lines are too long
Reference in a new issue