From 928d12d82df7286665e06caee0310c42e9e35b65 Mon Sep 17 00:00:00 2001 From: Dragos <86549690+dragos-efy@users.noreply.github.com> Date: Sun, 11 Sep 2022 23:28:23 +0300 Subject: [PATCH 1/6] Add path for audio effects --- src/App.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.vue b/src/App.vue index faebde55..4938b427 100644 --- a/src/App.vue +++ b/src/App.vue @@ -29,6 +29,7 @@ --efy_font_family: "nunito", sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; --efy_body_width: unset; + --efy_audio_path: ./audio; } body { From f8f47b85dd68a7dede27f435cabe7575d15d1d26 Mon Sep 17 00:00:00 2001 From: Dragos <86549690+dragos-efy@users.noreply.github.com> Date: Sun, 11 Sep 2022 23:31:04 +0300 Subject: [PATCH 2/6] Fix webkit & font bugs --- efy/efy.css | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/efy/efy.css b/efy/efy.css index 09df43c3..4cdee7bb 100644 --- a/efy/efy.css +++ b/efy/efy.css @@ -1,4 +1,4 @@ -/*EFY UI 2022.09.09*/:root { --efy_font_size: 1px; +/*EFY UI 2022.09.11*/: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); @@ -23,7 +23,7 @@ /*Display: Block*/ table, .efy_toggle_visible {display: block} -/*Display: Inline-Block*/ header > nav li, header > nav a, header > nav a:visited, [efy_select] label, [efy_select] label:before, [efy_select] input:checked + label:after {display: inline-block} +/*Display: Inline-Block*/ header > nav li, header > nav a, header > nav a:visited, [efy_tabs] [efy_tab], [efy_select] label, [efy_select] label:before, [efy_select] input:checked + label:after {display: inline-block} /*Display: None*/ [efy_sidebar_btn_close], [efy_select] [for*=efy_color]:before, [efy_select] [for*=efy_color]:after {display: none} /*Display: None ! */ [efy_display_none], [efy_display_none] * {display: none!important} @@ -47,11 +47,11 @@ /*Border*/ textarea, select, input, button, [role="button"], [type="submit"], [type="reset"], [type="button"], details, pre, td, th, article, aside, blockquote, [type="file"], .efy_sidebar, [efy_tabs] [efy_content], [efy_alert] {border: 1.5rem solid var(--efy_color_border)} /*Outline: None*/ * {outline: none!important} -/*Outline*/ textarea:focus, select:focus, input:not([type=checkbox], [type=radio]):focus, [type="file"]:focus, [type="range"]:focus, [efy_outline] [efy_select] input:focus + label, [efy_outline] [type=checkbox]:focus, [efy_outline] [type=radio]:focus, [efy_outline] button:focus, [efy_outline] [role="button"]:focus, [efy_outline] [type="submit"]:focus, [efy_outline] [type="reset"]:focus, [efy_outline] [type="button"]:focus, [efy_outline] [efy_select] input:focus + label {outline: 3rem solid var(--efy_text)!important} -/*Outline Offset*/ [type=checkbox], [type=radio], button, [efy_select] label {outline-offset: 4rem} +/*Outline*/ textarea:focus, select:focus, input:not([type=checkbox], [type=radio]):focus, [type="file"]:focus, [type="range"]:focus, [efy_outline] [efy_select] input:focus + label, [efy_outline] [type=checkbox]:focus, [efy_outline] [type=radio]:focus, [efy_outline] button:focus, [efy_outline] [role="button"]:focus, [efy_outline] [type="submit"]:focus, [efy_outline] [type="reset"]:focus, [efy_outline] [type="button"]:focus, [efy_outline] [efy_select] input:focus + label, [efy_tabs] [efy_tab]:focus {outline: 3rem solid var(--efy_text)!important} +/*Outline Offset*/ [type=checkbox], [type=radio], button, [efy_select] label, [efy_tabs] [efy_tab] {outline-offset: 4rem} -/*Radius*/ textarea, select, input, img, video, pre, details, summary, blockquote, article, aside, [type="range"], button, [role="button"], [type="submit"], [type="reset"], [type="button"], img, video, audio, table, [efy_sidebar_btn_open], [efy_sidebar_btn_close]{border-radius: var(--efy_radius)} +/*Radius*/ textarea, select, input, img, video, pre, details, summary, blockquote, article, aside, [type="range"], button, [role="button"], [type="submit"], [type="reset"], [type="button"], img, video, audio, table, [efy_sidebar_btn_open], [efy_sidebar_btn_close], [efy_select] label, [efy_tabs] [efy_tab] {border-radius: var(--efy_radius)} /*Radius2*/ [efy_timer], [efy_clock], [efy_alert] {border-radius: var(--efy_radius2)} /*Radius0*/ mark, kbd, [type="checkbox"], [type="radio"] {border-radius: var(--efy_radius0)} /*Radius00*/ [type="radio"]:checked:after {border-radius: var(--efy_radius00)} @@ -67,6 +67,7 @@ /*Cursor: Pointer*/ button:focus, button:enabled:hover, [role="button"]:focus, [role="button"]:not([aria-disabled="true"]):hover, [type="submit"]:focus, [type="submit"]:enabled:hover, [type="reset"]:focus, [type="reset"]:enabled:hover, [type="button"]:focus, [type="button"]:enabled:hover, summary, [type="range"], [type="file"], [efy_sidebar_btn_close], [efy_sidebar_btn_open], [efy_select] label {cursor: pointer} /*Cursor: Help*/ abbr {cursor: help} /*Cursor: None*/ /* * {cursor: none!important} */ +/*Pointer Events: None*/ [efy_tabs] [efy_tab] code {pointer-events: none} /*Disabled*/ input:disabled, textarea:disabled, select:disabled, button[disabled],[role="button"][aria-disabled="true"],[type="submit"][disabled],[type="reset"][disabled],[type="button"][disabled],[type="checkbox"][disabled],[type="radio"][disabled],select[disabled] {opacity: 0.5; cursor: not-allowed} @@ -76,15 +77,15 @@ /*Line-Height: 30rem*/ mark, kbd {line-height: 30rem} -/*Padding1*/ button, [role="button"], [type="submit"], [type="reset"], [type="button"], summary, blockquote, pre, [efy_select] label {padding: var(--efy_padding)} +/*Padding1*/ button, [role="button"], [type="submit"], [type="reset"], [type="button"], summary, blockquote, pre, [efy_select] label, [efy_tabs] [efy_tab] {padding: var(--efy_padding)} /*Padding2*/ mark, kbd {padding: var(--efy_padding2)} /*Vertical align: Middle*/ [efy_select] label:before, [efy_select] input:checked + label:after {vertical-align: middle} -/*Text: Font*/ html, body, mark, code, pre, pre span, kbd, samp {font-family: var(--efy_font_family)} -/*Text: Bold*/ button, a, code, kbd, samp, mark, summary, th, table caption, [type="button"], [type="submit"], [type="reset"], [efy_sidebar_btn_open], [efy_sidebar_btn_close], code {font-weight: bold} +/*Text: Font*/ html, body, mark, code, pre, pre span, kbd, samp, button, a {font-family: var(--efy_font_family)} +/*Text: Bold*/ button, a, code, kbd, samp, mark, summary, th, table caption, [type="button"], [type="submit"], [type="reset"], [efy_sidebar_btn_open], [efy_sidebar_btn_close], code, [efy_select] label, [efy_tabs] [efy_tab] {font-weight: bold} /*No Selection*/ [efy_select] label {user-drag: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none} @@ -232,18 +233,18 @@ details:not([efy_help]) summary:before {position: absolute; right: 8rem; transit details details {margin-top: 15rem} details details:not([efy_help]) > summary:before {right: -6rem} details[open]:not([efy_help]) > summary:before {transform: rotate(90deg); right: -2rem} -/*Help Box*/ [efy_help] {background: transparent; border: 0; padding: 0 0 10rem 0!important; margin: 0} +/*Help Box*/ [efy_help] {background: transparent; border: 0; padding: 0!important; margin: 0} +[efy_help][open] {padding: 0 0 10rem 0!important} [efy_help] summary {pointer-events: none; margin-bottom: 0; padding: 0} [efy_help] summary:after {margin-left: 8rem; opacity: 0.5; pointer-events: all} -/*Select Menu*/ [efy_select] label {border-radius: var(--efy_radius); font-weight: bold} -[efy_select] label:before {width: 16rem; height: 16rem; margin-right: 8rem; margin-top: -0.2rem; position: relative; border-radius: var(--efy_radius0); border: 2.4rem solid transparent; background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude} +/*Select Menu*/ [efy_select] label:before {width: 16rem; height: 16rem; margin-right: 8rem; margin-top: -0.2rem; position: relative; border-radius: var(--efy_radius0); border: 2.4rem solid transparent; background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: source-out; mask-composite: exclude} [efy_select] [type="radio"]:checked + label:after {background: var(--efy_text2); width: 9.6rem; height: 9.6rem; top: 8.4rem; left: 5.6rem; margin: var(--efy_padding); border-radius: calc(var(--efy_radius0) / 2)} [efy_select] [type="checkbox"]:checked + label:after {top: 13.2rem; left: 22.4rem; width: 4.8rem; height: 9.6rem; border-radius: 2rem; border-right: solid var(--efy_text2) 3.2rem; border-bottom: solid var(--efy_text2) 3.2rem; transform: rotate(45deg)} [efy_select] input:checked + label:before {border-color: var(--efy_text2)} [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} +[efy_select] label, [efy_tabs] [efy_tab], [efy_select] p, [efy_select] button {margin: 6px 8rem 6rem 0} /*Padding-Right for Expanding Boxes*/ select:not([multiple]) {padding-right: 32rem} summary, details[open] summary {padding-right: 20rem} @@ -299,7 +300,8 @@ details[open]:not([efy_help]) > summary:before {transform: rotate(90deg); right: .efy_quick_shortcuts [efy_search_input] {margin-bottom: 15rem} -/*Tabs*/ [efy_tabs] [efy_tab] {display: inline-flex; gap: 12rem; margin-bottom: 12rem; margin-right: 8rem} [efy_tabs] [efy_tab]:last-of-type {margin-right: 0} +/*Tabs*/ [efy_tabs] [efy_tab][efy_active] code {-webkit-text-fill-color: var(--efy_text2)} +[efy_tabs] [efy_tab]:last-of-type {margin-right: 0; margin-bottom: 12rem} [efy_tabs] [efy_content] {opacity: 0; position: absolute; pointer-events: none; transform: scale(0.3); padding: 16rem; border-radius: var(--efy_radius); background: var(--efy_bg1)} [efy_tabs] [efy_content][efy_active] {opacity: 1; position: relative; pointer-events: all; transform: scale(1); transition: 0.1s linear} [efy_tabs] [efy_content]:not([efy_active]) * {position: absolute; pointer-events: none; opacity: 0} From ce209df098bdfd315d8303232b260e4615a9de34 Mon Sep 17 00:00:00 2001 From: Dragos <86549690+dragos-efy@users.noreply.github.com> Date: Sun, 11 Sep 2022 23:32:23 +0300 Subject: [PATCH 3/6] Fix webkit bugs --- efy/efy.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/efy/efy.js b/efy/efy.js index db30f78a..23afc1be 100644 --- a/efy/efy.js +++ b/efy/efy.js @@ -1,4 +1,4 @@ -/*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 =async ()=>{ e$root = e$(":root"), e$body = e$("body"); +/*EFY UI 2022.09.11*/ let e$ = document.querySelector.bind(document), e$all = document.querySelectorAll.bind(document), e$create = document.createElement.bind(document), e$body, e$root; window.onload =async ()=>{ 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 = `
EFY - Your browser blocks LocalStorage

You can block 3rd party cookies, no worries, Privacy matters! But please allow 1st party cookies in your browser's settings. EFYdoesn't use cookies or track you, but the settings related to LocalStorage are grouped as "cookies", although different. Have fun! 🥳

`} @@ -144,7 +144,7 @@ efy_radius_input.oninput = () => { let za = e$('.efy_sidebar_selectRadius'), z = /*Radius: Window Resize*/ window.addEventListener('resize', () => { let za = e$('.efy_sidebar_selectRadius'), z = getComputedStyle(za).getPropertyValue('width').replace('px',''), x = efy_radius_input.value; efy_sidebar_range.style.left = (x * (z - 32) / efy_radius_input.max) + 'rem'; }); -/*EFY Button Position*/ if (localStorage.efy_btn_align) { e$("#" + localStorage.efy_btn_align).setAttribute("checked", "1"); e$("[efy_sidebar_btn_open]").setAttribute("efy_btn_align", localStorage.efy_btn_align); } else { let y = getComputedStyle(e$root).getPropertyValue('--efy_sidebar_button').replace(' ',''); +/*EFY Button Position*/ if (localStorage.efy_btn_align) { e$("#" + localStorage.efy_btn_align).setAttribute("checked", "1"); e$("[efy_sidebar_btn_open]").setAttribute("efy_btn_align", localStorage.efy_btn_align); } else { let y = getComputedStyle(e$root).getPropertyValue('--efy_sidebar_button').replaceAll(' ',''); e$('#'+y).setAttribute("checked", "1"); e$('[efy_sidebar_btn_open]').setAttribute('efy_btn_align', y);} e$all("[name=efy_btn_align]").forEach(x => { x.onclick = () => { e$("[efy_sidebar_btn_open]").setAttribute("efy_btn_align", x.id); localStorage.efy_btn_align = x.id; }; }); @@ -290,7 +290,8 @@ await importIDB(); }; reader.readAsText(file); }); /*Reset Settings*/ e$all(".efy_localstorage_reset").forEach(x =>{ x.onclick = () => { Object.entries(localStorage).forEach(([k])=>{ if (k.includes('efy')){ localStorage.removeItem(k)} }); location.reload() }}); -/*Determine Audio Path*/ let audioPath; await fetch('./audio/ok.mp3').then((response) => { audioPath = response.ok ? './audio' : '/audio'; }); +/*Determine Audio Path*/ let audioPath = getComputedStyle(e$root).getPropertyValue('--efy_audio_path').replaceAll(' ',''); + /*Audio*/ let efyaudio = {}; ['pop','ok','ok2','ok3','ok4','hover','slide','squish','step','error','disabled'].forEach(x => { efyaudio[x] = new Audio(`${audioPath}/${x}.mp3`) }); e$body.addEventListener("pointerdown", efyaudio_fn, {once: true}); async function efyaudio_fn() { if (localStorage.efy_audio_status == 'on' ){ if (localStorage.efy_audio_click == 'on') { @@ -315,7 +316,7 @@ e$(".efy_quick_back").onclick =()=> window.history.go(-1); e$(".efy_quick_forward").addEventListener('pointerup', async ()=> window.history.go(1)); /*Tabs*/ e$all('[efy_tabs]').forEach(z => { let x = '[efy_tabs='+z.getAttribute('efy_tabs')+'] > '; - e$all(x+'[efy_tab]').forEach(y => { y.onclick = e => { let efy_tab = e.target.getAttribute('efy_tab'); + e$all(x+'[efy_tab]').forEach(y => { let cld = e$create('code'); cld.textContent = y.textContent; y.textContent = ''; y.appendChild(cld); y.onclick = e => { let efy_tab = e.target.getAttribute('efy_tab'); e$all(x+'[efy_tab]').forEach(y => y.removeAttribute('efy_active') ); e.target.setAttribute('efy_active', '1'); e$all(x+'[efy_content]').forEach(y => y.removeAttribute('efy_active') ); e$(x+' [efy_content="'+efy_tab+'"]').setAttribute('efy_active', '1'); } }); }); From ed0bdf7a79f598a2edf1257d718dc26261a45177 Mon Sep 17 00:00:00 2001 From: Dragos <86549690+dragos-efy@users.noreply.github.com> Date: Sun, 11 Sep 2022 23:44:58 +0300 Subject: [PATCH 4/6] Fix tab outline (accessibility) --- efy/efy.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/efy/efy.css b/efy/efy.css index 4cdee7bb..7d6e3b6e 100644 --- a/efy/efy.css +++ b/efy/efy.css @@ -47,7 +47,7 @@ /*Border*/ textarea, select, input, button, [role="button"], [type="submit"], [type="reset"], [type="button"], details, pre, td, th, article, aside, blockquote, [type="file"], .efy_sidebar, [efy_tabs] [efy_content], [efy_alert] {border: 1.5rem solid var(--efy_color_border)} /*Outline: None*/ * {outline: none!important} -/*Outline*/ textarea:focus, select:focus, input:not([type=checkbox], [type=radio]):focus, [type="file"]:focus, [type="range"]:focus, [efy_outline] [efy_select] input:focus + label, [efy_outline] [type=checkbox]:focus, [efy_outline] [type=radio]:focus, [efy_outline] button:focus, [efy_outline] [role="button"]:focus, [efy_outline] [type="submit"]:focus, [efy_outline] [type="reset"]:focus, [efy_outline] [type="button"]:focus, [efy_outline] [efy_select] input:focus + label, [efy_tabs] [efy_tab]:focus {outline: 3rem solid var(--efy_text)!important} +/*Outline*/ textarea:focus, select:focus, input:not([type=checkbox], [type=radio]):focus, [type="file"]:focus, [type="range"]:focus, [efy_outline] [efy_select] input:focus + label, [efy_outline] [type=checkbox]:focus, [efy_outline] [type=radio]:focus, [efy_outline] button:focus, [efy_outline] [role="button"]:focus, [efy_outline] [type="submit"]:focus, [efy_outline] [type="reset"]:focus, [efy_outline] [type="button"]:focus, [efy_outline] [efy_select] input:focus + label, [efy_outline] [efy_tabs] [efy_tab]:focus {outline: 3rem solid var(--efy_text)!important} /*Outline Offset*/ [type=checkbox], [type=radio], button, [efy_select] label, [efy_tabs] [efy_tab] {outline-offset: 4rem} From 9d434d39560bd7cf061dd1507f17a92605fcea21 Mon Sep 17 00:00:00 2001 From: Dragos <86549690+dragos-efy@users.noreply.github.com> Date: Mon, 12 Sep 2022 00:02:42 +0300 Subject: [PATCH 5/6] fix css mistake --- efy/piped.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/efy/piped.css b/efy/piped.css index 4805f14d..18b182cd 100644 --- a/efy/piped.css +++ b/efy/piped.css @@ -7,7 +7,7 @@ /*BG 1*/ .comment, .video-grid div, .pp-show-recs div, .pp-mobile-nav a, .pp-mobile-nav p, .suggestion-selected, .pp-chapters .chapter:not(.pp-chapter-active, .chapter:hover), .pp-chapters [title=chapters] {background: var(--efy_bg1)} /*Bold*/ .btn {font-weight: bold} /*Margin: 0*/ .pp-watch-buttons .btn, .suggestions-container li, .suggestions-container ul, .pp-nav > ul, .pp-mobile-btn i, .pp-mobile-nav a, .pp-mobile-nav p, .modal-container button:first-of-type svg {margin: 0} -/*Text-Align: Center*/ .btn, .pp-import-channel, .pp-sortby-feed, .pp-playlist-add-modal-top, .pp-nav, .pp-nav > div.flex-1.flex.justify-start > a, .pp-watch-bellow-options .flex.items-center, .pp-channel-page-author {align-items: center} {text-align: center} +/*Text-Align: Center*/ .btn, .pp-import-channel, .pp-sortby-feed, .pp-playlist-add-modal-top, .pp-nav, .pp-nav > div.flex-1.flex.justify-start > a, .pp-watch-bellow-options .flex.items-center, .pp-channel-page-author {align-items: center; text-align: center} /*Justify-Content: Space-Between*/ .pp-playlist-add-modal-top, .pp-watch-bellow-options, .pp-nav {justify-content: space-between} /*Display: Flex*/ .pp-watch-buttons, .pp-nav, .pp-nav>div.flex-1.flex.justify-start>a, .pp-watch-bellow-options .flex.items-center, .pp-nav > ul, .pp-channel-page-author, .grid .comment, .pp-chapters {display: flex} From 66ec718661dfbca3adfe64094965a0d26a830ba6 Mon Sep 17 00:00:00 2001 From: Dragos <86549690+dragos-efy@users.noreply.github.com> Date: Mon, 12 Sep 2022 00:04:24 +0300 Subject: [PATCH 6/6] Fix long comments messing up the page width --- src/components/CommentItem.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/CommentItem.vue b/src/components/CommentItem.vue index e0d9d1f6..8ea86078 100644 --- a/src/components/CommentItem.vue +++ b/src/components/CommentItem.vue @@ -87,3 +87,9 @@ export default { }, }; + +