MinPluto/Zorn
MinPluto/Zorn
1
Fork 0
Code Issues 1 Pull requests Releases 1 Activity

Update styling

Browse source
This commit is contained in:
Korbs 2025-02-05 15:26:16 -05:00
parent d60188a96c
commit c9eb383cde
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
2 changed files with 221 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/Styles/Base.scss Normal file
View file

@ -0,0 +1,77 @@
// Platform Support
/// requestPictureInPicture() - Firefox Not Supported
/// https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestPictureInPicture
@-moz-document url-prefix() {
#vc-pip {
display: none;
}
}
// Animations
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// Zorn Player
.video-container {
position: relative;
.video-controls, video {
border-radius: 12px;
}
*:focus-visible {
outline-color: none; // Allow color for contrast mode
background: rgba(255, 255, 255, 0.5) !important;
transition: 1s background;
}
video {
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
pointer-events: none;
}
canvas {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
transition: 0.6s filter;
}
.video-controls {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7523460068) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 94%, rgb(0 0 0 / 0%) 100%);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: calc(100% - 4px);
z-index: 4;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: 0.3s opacity;
}
}
.zorn-controls-hide {
opacity: 0 !important;
transition: 0.3s opacity !important;
}
.zorn-fullscreen {
.video-controls, video {
border-radius: 0 !important;
}
.video-controls {
height: 100%;
.vc-top #vc-title {
opacity: 1;
}
}
}

314
src/Styles/Index.scss → src/Styles/Themes/Default.scss
View file

@ -1,65 +1,21 @@
// Platform Support
/// requestPictureInPicture() - Firefox Not Supported
/// https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestPictureInPicture
@-moz-document url-prefix() {
#vc-pip {
display: none;
}
// Configuration
:root {
--BottomControlsBorderRadius: 0px;
--BottomControlsBackground: transparent;
--BottomControlsBackdrop: none;
--BottomControlsPadding: 6px 12px;
--BottomControlsMargin: 0px;
--IconHoverBorderRadius: 3rem;
--IconHoverBackground: rgba(255, 255, 255, 0.1);
--IconColor: white;
}
// Animations
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// Zorn Player
// Theme
.video-container {
position: relative;
.video-controls, video {
border-radius: 12px;
}
*:focus-visible {
outline: none;
background: rgba(255, 255, 255, 0.5) !important;
transition: 1s background;
}
video {
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
pointer-events: none;
}
canvas {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
transition: 0.6s filter;
}
.video-controls {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7523460068) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 94%, rgb(0 0 0 / 0%) 100%);
position: absolute;
top: 0px;
left: 0px;
width: calc(100% - 24px);
height: calc(100% - 28px);
padding: 12px;
z-index: 4;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: 0.3s opacity;
button {
color: white;
border-radius: 3rem;
color: var(--IconColor);
border-radius: var(--IconHoverBorderRadius);
aspect-ratio: 1;
border: none;
background: transparent;
@ -68,37 +24,66 @@
padding: 6px;
cursor: pointer;
&:hover {
background: rgba(255, 255, 255, 0.1);
background: var(--IconHoverBackground);
}
svg, object {
fill: white;
color: white;
width: 24px !important;
height: 24px !important;
pointer-events: none;
}
}
// Title and Top Indicators
.vc-top {
display: flex;
justify-content: space-between;
#vc-title, #vc-buffering {
pointer-events: none;
.vc-full-title {
opacity: 0;
transition: 0.3s opacity;
color: white;
backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
-webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
width: max-content;
padding: 6px 12px;
border-radius: 4px;
margin: 0px;
font-size: 24px;
background: linear-gradient(180deg, #00000078, transparent);
padding: 24px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
* {
margin: 0px;
}
a {
color: white;
text-decoration: none;
}
p {
color: white;
text-shadow: 0px 0px 1px #00000025;
}
#vc-main-title {
font-weight: bold;
font-size: 22px;
}
#vc-secondary-title {
font-size: 16px;
margin-top: 6px;
}
}
#vc-buffering {
opacity: 0;
font-size: 14px !important;
align-items: center;
display: flex;
gap: 12px;
border-radius: 3rem !important;
padding: 4px 12px 4px 4px !important;
position: absolute;
right: 0px;
margin: 24px;
text-shadow: 1px 1px #00000050;
i::before {
animation: 1s spin infinite linear;
}
}
}
// Gestures
#vc-gestures {
height: 100%;
display: grid;
@ -117,11 +102,18 @@
}
}
}
// UI Controls
.vc-bottom {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
padding: var(--BottomControlsPadding);
margin: var(--BottomControlsMargin);
background: var(--BottomControlsBackground);
backdrop-filter: var(--BottomControlsBackdrop);
-webkit-backdrop-filter: var(--BottomControlsBackdrop);
border-radius: var(--BottomControlsBorderRadius);
.vc-start,
.vc-end {
display: flex;
@ -227,25 +219,28 @@
outline: 3px solid transparent;
outline-offset: 0.125rem;
}
#seek-tooltip {
opacity: 0;
position: absolute;
top: -50px;
backdrop-filter: blur(6px) contrast(0.8) brightness(0.8);
-webkit-backdrop-filter: blur(6px) contrast(0.8) brightness(0.8);
padding: 6px 12px;
border-radius: 3rem;
margin-left: -30px;
color: white;
}
}
.timestamp {
display: flex;
background: rgb(255 255 255 / 10%);
backdrop-filter: blur(6px) brightness(0.8);
-webkit-backdrop-filter: blur(6px) brightness(0.8);
border-radius: 3rem;
align-items: center;
position: relative;
pointer-events: none;
color: white;
font-family: Arial, Helvetica, sans-serif;
#seek-tooltip {
z-index: 10;
background: #464646;
padding: 6px 12px;
border-radius: 3rem 0px 0px 3rem;
margin-right: -64px;
opacity: 0;
transition: 0.3s opacity;
}
#current {
background: rgb(255 255 255 / 15%);
padding: 6px 12px;
@ -257,21 +252,41 @@
}
}
}
}
.zorn-controls-hide {
opacity: 0 !important;
transition: 0.3s opacity !important;
}
.zorn-fullscreen {
.video-controls, video {
border-radius: 0 !important;
}
.video-controls {
height: calc(100% - 24px);
.vc-top {
opacity: 1 !important;
.zorn-context-menu {
position: absolute;
top: 0px;
left: 0px;
z-index: 4;
display: none; /* Hide By Default */
flex-direction: column;
min-width: 140px;
backdrop-filter: blur(24px) contrast(0.6) brightness(0.4);
-webkit-backdrop-filter: blur(24px) contrast(0.6) brightness(0.4);
border-radius: 6px;
margin-top: 6px;
hr {
margin: 0px;
border: none;
height: 1px;
background: #ffffff3d;
}
a, button {
text-align: left;
margin: 0px;
color: white;
border: none;
font-size: 14px;
text-decoration: none;
padding: 10px 12px;
background: transparent;
cursor: pointer;
transition: 0.3s background;
&:hover {
background: rgba(0, 0, 0, 0.5);
transition: 0.3s background;
}
&:first-child {border-radius: 6px 6px 0px 0px}
&:last-child {border-radius: 0px 0px 6px 6px}
}
}
}
@ -299,84 +314,43 @@
}
}
.vc-menu {
// Settings Menu
.zorn-settings-menu {
position: absolute;
right: 0px;
bottom: 0px;
background: rgb(0 0 0 / 25%);
border-radius: 6px;
margin: 0px 24px 90px 0px;
width: max-content;
min-width: 180px;
display: none;
flex-direction: column;
gap: 6px;
padding: 4px;
backdrop-filter: blur(12px) contrast(0.6) brightness(0.4);
-webkit-backdrop-filter: blur(12px) contrast(0.6) brightness(0.4);
z-index: 10;
hr {
margin: 0px;
width: 100%;
height: 1px;
border: none;
background: rgb(255 255 255 / 25%);
}
button {
padding: 0px 12px !important;
margin: 0px !important;
aspect-ratio: inherit !important;
background: transparent !important;
border-radius: 4px !important;
display: flex;
justify-content: space-between;
font-size: 14px !important;
min-height: 34px;
border: none;
color: white;
p {
margin: 0px !important;
margin-top: 4px !important;
right: 12px;
bottom: 72px;
z-index: 4;
div {
display: none; /* Hide By Default */
flex-direction: column;
min-width: 140px;
backdrop-filter: blur(24px) contrast(0.6) brightness(0.4);
-webkit-backdrop-filter: blur(24px) contrast(0.6) brightness(0.4);
border-radius: 6px;
margin-top: 6px;
hr {
margin: 0px;
border: none;
height: 1px;
background: #ffffff3d;
}
&:hover {
background: rgb(95 95 95 / 51%) !important;
}
svg {
width: 14px;
}
.iconoir-arrow-up-right::before {
width: 16px;
height: 16px;
a, button {
text-align: left;
margin: 0px;
color: white;
border: none;
font-size: 14px;
text-decoration: none;
padding: 10px 12px;
background: transparent;
cursor: pointer;
transition: 0.3s background;
&:hover {
background: rgba(0, 0, 0, 0.5);
transition: 0.3s background;
}
&:first-child {border-radius: 6px 6px 0px 0px}
&:last-child {border-radius: 0px 0px 6px 6px}
}
}
.vc-menu-whitelabel {
text-align: right;
text-decoration: none;
font-size: 12px;
margin: 6px 12px;
&:hover {
text-decoration: underline;
}
span {
color: gray;
}
}
&#subtitles {
min-width: 124px !important;
}
}
#playback-rate {
flex-direction: row;
min-width: 100px;
border-radius: 3rem;
padding: 2px;
button {
border-radius: 3rem !important;
padding: 10px 13px !important;
}
}
button#has-switch svg {
width: 24px;
}