Merge pull request #1410 from dragos-efy/efy

Fixed Captions, Select Arrows, Updated EFY, Moved more css from piped.css to vue components

efy/efy.css

@@ -1,4 +1,4 @@
-/*EFY UI 2022.09.04*/:root { --efy_font_size: 1px;
+/*EFY UI 2022.09.09*/:root { --efy_font_size: 1px;
 --efy_radius0: calc(var(--efy_radius) / 1.25); --efy_radius2: calc(var(--efy_radius) * 1.5); --efy_radius00: calc(var(--efy_radius) / 3);
 --efy_padding:  8rem  16rem; --efy_padding2: 3rem  6rem; --efy_gap:  15rem; --efy_body_width: 1120rem;
 --efy_color: rgb(var(--efy_color1_var)); --efy_color_trans: rgba(var(--efy_color1_var), 0.3);
@@ -245,6 +245,8 @@ details[open]:not([efy_help]) > summary:before {transform: rotate(90deg); right:
 [efy_select] [type="checkbox"], [efy_select] [type="radio"], [efy_select] label [type="color"] {opacity:0}
 [efy_select] label, [efy_select] p, [efy_select] button {margin: 0  8rem 12rem 0}
 
+/*Padding-Right for Expanding Boxes*/ select:not([multiple]) {padding-right: 32rem} summary, details[open] summary {padding-right: 20rem}
+
 /*Card*/ [efy_card] {background: var(--efy_bg1); border-radius: var(--efy_radius); border: 1.5rem solid var(--efy_color_border); padding: 15rem; display: grid; gap: 5rem; width: 100%; align-content: baseline}
 
 /*Sidebar*/ .efy_sidebar {padding:  16rem; width: 100vw; max-width: 450rem; height: 100vh; z-index: 9; position: fixed; right: -450rem; top: 0; box-shadow: 0 0 30rem #0005; border-radius: var(--efy_radius2) 0 0 var(--efy_radius2); transition: right .3s; backdrop-filter: blur( 48rem)}

efy/efy.js

@@ -1,4 +1,4 @@
-/*EFY UI 2022.09.04*/ let e$ = document.querySelector.bind(document), e$all = document.querySelectorAll.bind(document), e$create = document.createElement.bind(document), e$body, e$root; window.onload =()=>{ e$root = e$(":root"), e$body = e$("body");
+/*EFY UI 2022.09.08*/ let e$ = document.querySelector.bind(document), e$all = document.querySelectorAll.bind(document), e$create = document.createElement.bind(document), e$body, e$root; window.onload =()=>{ e$root = e$(":root"), e$body = e$("body");
 
 /*Check LocalStorage*/ try {let x = 'LS'; localStorage.setItem(x, x); let y = localStorage.getItem(x); localStorage.removeItem(x); if (x !== y) {throw new Error();}} catch (exception) {e$('body').innerHTML = `<div efy_alert style="background: #eee"><div><h6><a>EFY</a> - Your browser blocks LocalStorage</h6><p>You can block 3rd party cookies, no worries, Privacy matters! But please allow 1st party cookies in your browser's settings.  EFY<b>doesn't</b> use cookies or track you, but the settings related to LocalStorage are grouped as "cookies", although different. Have fun! 🥳</p></div></div>`}
 
@@ -102,7 +102,6 @@
         <input type="checkbox" name="efy_audio" id="efy_audio_click"><label for="efy_audio_click">Click & Tap</label>
         <input type="checkbox" name="efy_audio" id="efy_audio_hover"><label for="efy_audio_hover">Mouse Hover</label>
         <p>You might have to click / tap on the ssl / lock icon on your browser & allow sounds, to hear them automatically.</p>
-        <img src="./efy/img/allow_audio.webp"></img>
     </details>
 
 </div><div efy_sidebar_btn_open></div>

efy/piped.css

@@ -1,4 +1,4 @@
-/*EFY Template - 2022.09.05 - Fonts*/ @font-face {font-family: 'nunito'; src: url('nunito.woff2') format('truetype')} @font-face {font-family: 'nunito'; src: url('nunito_bold.woff2') format('truetype'); font-weight: bold}
+/*EFY Template - 2022.09.09 - Fonts*/ @font-face {font-family: 'nunito'; src: url('nunito.woff2') format('truetype')} @font-face {font-family: 'nunito'; src: url('nunito_bold.woff2') format('truetype'); font-weight: bold}
 
 /*End of EFY Template - Documentation on how to use it coming soon at https://efy.ooo/ui . Your own css starts bellow*/
 
@@ -27,13 +27,7 @@
 
 /*Video Grid */ .video-grid {display: grid; gap: 16rem; grid-template-columns: repeat(auto-fit, minmax(224rem, 1fr))}
 
-/*Player*/ .material-icons-round {font-family: "Material Icons Round"!important;}
+tbody:nth-child(odd) {background: var(--efy_bg1)!important; box-shadow: inset 0 0 0 1.5px var(--efy_bg1)}
-.material-icons-round, .shaka-current-time {-webkit-text-fill-color: #fff!important; opacity: 1!important;}
-.shaka-overflow-menu, .shaka-settings-menu {background: var(--efy_text2)!important; border-radius: var(--efy_radius)!important; padding: 16rem!important; height: fit-content!important; max-height: 256rem!important; box-shadow: inset 0 0 0 1.5px var(--efy_bg1)!important;}
-.shaka-overflow-menu label, .shaka-settings-menu label, .shaka-overflow-menu button, .shaka-settings-menu button {-webkit-text-fill-color: var(--efy_text)!important; margin: 1.6rem 0!important; }
-.shaka-overflow-menu .material-icons-round, .shaka-settings-menu .material-icons-round {-webkit-text-fill-color: var(--efy_text)!important;}
-
-tbody:nth-child(odd), .shaka-overflow-menu button:hover, .shaka-settings-menu button:hover {background: var(--efy_bg1)!important; box-shadow: inset 0 0 0 1.5px var(--efy_bg1)}
 
 /*Bellow*/ .pp-watch-bellow-options {margin-top: 15rem}
 .pp-watch-buttons {flex-wrap: wrap; gap: 10rem}
@@ -41,8 +35,6 @@ tbody:nth-child(odd), .shaka-overflow-menu button:hover, .shaka-settings-menu bu
 .pp-bellow-video, .pp-bellow-video .flex {gap:10rem}
 .pp-likes .flex {gap: 0rem}
 
-/*Video Caption*/ .shaka-text-container span>span>span {padding: var(--efy_padding2)!important}
-
 
 
 
@@ -66,7 +58,6 @@ tbody:nth-child(odd), .shaka-overflow-menu button:hover, .shaka-settings-menu bu
 
 /*Cards*/ .video-grid > div > .flex > a > img {width: 32rem; height: 32rem}
 
-/*Player*/ .player-container {max-height: 75vh; background: #000} [efy_theme=dark_black] .player-container {box-shadow: 0 0 0 1.5rem var(--efy_color_border)}
 .pp-video-title {font-size: 24rem; line-height: unset; margin-top: 10rem}
 
 /*Avatar below video*/ .pp-watch-bellow-options .flex.items-center > a {margin: 0 0 0 10rem; font-size: 20rem}
@@ -132,12 +123,6 @@ table {margin-top: 0}
 .mr-2 {margin-right: 10rem}
 .children\:pb-3>* {padding-bottom: 15rem}
 
-html .shaka-range-element, html .shaka-range-element:focus {
-    border: none!important;
-    box-shadow: none!important;
-    outline: none!important;
-}
-
 .pp-mobile-btn {display: none; padding: 10rem 12rem}
 .pp-mobile-nav {margin: 0 0 15rem 0}
 .pp-mobile-nav a {padding: var(--efy_padding); width: 100%}

src/App.vue

@@ -32,7 +32,7 @@
 }
 
 body {
-    @apply p-64;
+    @apply max-w-100vw p-16rem;
 }
 
 /*Default Mode*/

src/components/VideoPlayer.vue

@@ -652,22 +652,77 @@ export default {
 .player-container {
     @apply max-h-75vh min-h-64 bg-black;
 }
+[efy_theme="dark_black"] .player-container {
+    box-shadow: 0 0 0 1.5rem var(--efy_color_border);
+}
 .shaka-video-container:-webkit-full-screen {
     max-height: none !important;
 }
 
-/* captions style */
+/*Captions*/
 .shaka-text-wrapper * {
     text-align: left !important;
 }
-
+.shaka-text-wrapper > span {
-.shaka-text-wrapper > span > span {
+    background: #0008;
-    background-color: transparent !important;
+    backdrop-filter: blur(20rem);
+    border: 1.5rem solid var(--efy_color_border);
+    border-radius: var(--efy_radius);
+    padding: 8rem 12rem;
+    line-height: 28rem;
 }
-
 /* apply to all spans that don't include multiple other spans to avoid the style being applied to the text container too when the subtitles are two lines */
 .shaka-text-wrapper > span > span *:first-child:last-child {
-    background-color: rgba(0, 0, 0, 0.6) !important;
+    background: transparent !important;
-    padding: 0.09em 0;
+    color: var(--efy_text);
+    padding: 0;
+    font-size: 22rem !important;
+}
+@media (max-width: 639px) {
+    .shaka-text-wrapper > span > span *:first-child:last-child {
+        font-size: 16rem !important;
+    }
+}
+
+/*Shaka Player*/
+html .shaka-range-element,
+html .shaka-range-element:focus {
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+.material-icons-round {
+    font-family: "Material Icons Round" !important;
+}
+.material-icons-round,
+.shaka-current-time {
+    -webkit-text-fill-color: #fff !important;
+    opacity: 1 !important;
+}
+.shaka-overflow-menu,
+.shaka-settings-menu {
+    background: var(--efy_text2) !important;
+    border-radius: var(--efy_radius) !important;
+    padding: 16rem !important;
+    height: fit-content !important;
+    max-height: 256rem !important;
+    box-shadow: inset 0 0 0 1.5px var(--efy_bg1) !important;
+}
+.shaka-overflow-menu label,
+.shaka-settings-menu label,
+.shaka-overflow-menu button,
+.shaka-settings-menu button {
+    -webkit-text-fill-color: var(--efy_text) !important;
+    margin: 1.6rem 0 !important;
+}
+.shaka-overflow-menu .material-icons-round,
+.shaka-settings-menu .material-icons-round {
+    -webkit-text-fill-color: var(--efy_text) !important;
+}
+
+.shaka-overflow-menu button:hover,
+.shaka-settings-menu button:hover {
+    background: var(--efy_bg1) !important;
+    box-shadow: inset 0 0 0 1.5px var(--efy_bg1);
 }
 </style>