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

revert da2a8c3555

Browse source 
revert update
This commit is contained in:
Korbs 2024-05-30 02:10:54 -04:00
parent 25dde155f8
commit 8e2cb8eaa0
4 changed files with 23 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/themes/default.js
View file

@ -55,14 +55,11 @@ export var Controls = `
</div> </div>
<style> <style>
:root { :root {
--zorn-progress-bar-bg: rgba(255, 0, 0, 0.5); --zorn-progress-bar-bg: rgba(100, 100, 100, 0.5);
--zorn-progress-bar: rgba(100, 100, 100, 0.5); --zorn-progress-bar: rgba(255, 0, 0, 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;
@ -184,7 +181,6 @@ 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;
@ -250,7 +246,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); background: var(--zorn-progress-bar-bg);
} }
.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);
@ -353,7 +349,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); background: var(--zorn-progress-bar-bg);
border: none; border: none;
border-radius: 10px; border-radius: 10px;
} }

9
test/css/index.css
View file

@ -1,14 +1,9 @@
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 {
border-radius: 12px; height: 100%
} }

135
test/index.html
View file

@ -4,134 +4,17 @@
<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> <div class="video-container">
<div class="video-container"> <video class="zorn-player" layout="default">
<video class="zorn-player" layout="default"> <!-- Quality changer support has not been worked on yet -->
<!-- Quality changer support has not been worked on yet --> <source label="720p" src="./media/Ennie-and-Yoyki-Ungirly-Games.mp4" type="video/mp4">
<source label="720p" src="./media/Ennie-and-Yoyki-Ungirly-Games.mp4" type="video/mp4"> <!-- Subtitles -->
<!-- Subtitles --> <track src="./media/subtitles/English.vtt" kind="subtitles" srclang="en" label="English">
<track src="./media/subtitles/English.vtt" kind="subtitles" srclang="en" label="English"> <track src="./media/subtitles/Russian.vtt" kind="subtitles" srclang="ru" label="Russian">
<track src="./media/subtitles/Russian.vtt" kind="subtitles" srclang="ru" label="Russian"> </video>
</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>

20
test/js/zorn.js
View file

File diff suppressed because one or more lines are too long