diff --git a/src/Styles/Base.scss b/src/Styles/Base.scss new file mode 100644 index 0000000..ed0738b --- /dev/null +++ b/src/Styles/Base.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/Styles/Index.scss b/src/Styles/Themes/Default.scss similarity index 59% rename from src/Styles/Index.scss rename to src/Styles/Themes/Default.scss index d736b9b..f49230d 100644 --- a/src/Styles/Index.scss +++ b/src/Styles/Themes/Default.scss @@ -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; } \ No newline at end of file