From 25a8ba2dad12d3a80f48543556b271bf782804c1 Mon Sep 17 00:00:00 2001 From: Korbs Date: Thu, 14 Dec 2023 21:20:47 -0500 Subject: [PATCH] update --- src/styles/app.css | 2 +- src/styles/app.scss | 27 +++++++++++++++++++++++++++ test/index.html | 2 +- 3 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/styles/app.css b/src/styles/app.css index d46a29d..86ade0f 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -1 +1 @@ -: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}.plyx-context-menu{background:linear-gradient(45deg, rgb(10, 20, 28) 0%, rgb(10, 20, 28) 100%);border-radius:6px;border:1px rgba(255,255,255,.08) solid}.plyx-context-menu ul{list-style:none;margin:0px;padding:0px}.plyx-context-menu ul li{padding:8px 32px 8px 16px;margin:4px;border-radius:4px;font-family:arial}.plyx-context-menu ul li:hover{background:rgba(255,255,255,.1);cursor:pointer}.plyx-context-menu ul li i{font-size:14px;margin-right:12px;width:12px}.video-container{position:relative;display:flex;flex-direction:column;justify-content:center;font-family:Arial,Helvetica,sans-serif;color:#fff}.video-container .plyx-player-dialogs #buffering{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:0px 24px;border-radius:6px}.video-container .plyx-player-dialogs #buffering h2{font-size:52px}.video-container .plyx-player-dialogs #invalid-src{display:none;position:absolute;top:50%;left:24px;transform:translate(0px, -50%);padding:0px 24px;border-radius:6px}.video-container .plyx-player-dialogs #invalid-src h2{font-size:52px}.video-container .plyx-player{display:inline-flex}.video-container .hide{opacity:0;pointer-events:none}.video-container .plyx-player-title{position:absolute;top:0px;width:100%;background-image:linear-gradient(to top, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));padding:12px 24px;font-size:18px;font-weight:bold}.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-controls:hover>#volume{opacity:1;transition:.3s opacity,.3s width;margin:0px;width:72px}.video-container .plyx-player-controls #volume{opacity:0;transition:.3s opacity,.3s width;margin:0px -6px;width:0px}.video-container .plyx-player-controls #volume-button svg{aspect-ratio:1;height:16px;width:16px;fill:#fff;padding:3px 0px 0px 0px}.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:var(--plyx-progress-bar)}.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,.5);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} +: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}.plyx-context-menu{background:linear-gradient(45deg, rgb(10, 20, 28) 0%, rgb(10, 20, 28) 100%);border-radius:6px;border:1px rgba(255,255,255,.08) solid}.plyx-context-menu ul{list-style:none;margin:0px;padding:0px}.plyx-context-menu ul li{padding:8px 32px 8px 16px;margin:4px;border-radius:4px;font-family:arial}.plyx-context-menu ul li:hover{background:rgba(255,255,255,.1);cursor:pointer}.plyx-context-menu ul li i{font-size:14px;margin-right:12px;width:12px}.video-container{position:relative;display:flex;flex-direction:column;justify-content:center;font-family:Arial,Helvetica,sans-serif;color:#fff}.video-container .plyx-player-dialogs #buffering{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:0px 24px;border-radius:6px}.video-container .plyx-player-dialogs #buffering h2{font-size:52px}.video-container .plyx-player-dialogs #invalid-src{display:none;position:absolute;top:50%;left:24px;transform:translate(0px, -50%);padding:0px 24px;border-radius:6px}.video-container .plyx-player-dialogs #invalid-src h2{font-size:52px}.video-container .plyx-player{display:inline-flex}.video-container .hide{opacity:0;pointer-events:none}.video-container .plyx-player-title{position:absolute;top:0px;width:100%;background-image:linear-gradient(to top, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));padding:12px 24px;font-size:18px;font-weight:bold}.video-container .subtitles-menu{display:none;position:absolute;right:60px;bottom:80px;background:rgba(0,0,0,.6);list-style:none;padding:6px;border-radius:6px}.video-container .subtitles-menu button{background-color:rgba(0,0,0,0);color:#fff;border:none;border-radius:4px;width:100%;text-align:left;padding:6px 12px;cursor:pointer}.video-container .subtitles-menu button:hover{background:rgba(255,255,255,.1607843137)}.video-container .subtitles-menu .hide{opacity:0;pointer-events:none}.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-controls:hover>#volume{opacity:1;transition:.3s opacity,.3s width;margin:0px;width:72px}.video-container .plyx-player-controls #volume{opacity:0;transition:.3s opacity,.3s width;margin:0px -6px;width:0px}.video-container .plyx-player-controls #volume-button svg{aspect-ratio:1;height:16px;width:16px;fill:#fff;padding:3px 0px 0px 0px}.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:var(--plyx-progress-bar)}.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,.5);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} diff --git a/src/styles/app.scss b/src/styles/app.scss index 8ecd12a..af798d4 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -88,6 +88,33 @@ $background-color_4: rgba(255, 255, 255, 0.1); font-size: 18px; font-weight: bold; } + .subtitles-menu { + display: none; + position: absolute; + right: 60px; + bottom: 80px; + background: #0009; + list-style: none; + padding: 6px; + border-radius: 6px; + button { + background-color: transparent; + color: white; + border: none; + border-radius: 4px; + width: 100%; + text-align: left; + padding: 6px 12px; + cursor: pointer; + &:hover { + background: #ffffff29; + } + } + .hide { + opacity: 0; + pointer-events: none; + } + } .plyx-player-controls { display: inline-flex; right: 0; diff --git a/test/index.html b/test/index.html index 150f82c..d243831 100644 --- a/test/index.html +++ b/test/index.html @@ -21,7 +21,7 @@

Ennie and Yoyki: Ungirly Games By Lenar Mingazov

- +