Merge pull request #1890 from dragos-efy/efy

Update - 2022.12.15 Beta
This commit is contained in:
Bnyro 2022-12-16 15:44:11 +01:00 committed by GitHub
commit 13442c281f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 47 additions and 53 deletions

4
.gitmodules vendored
View File

@ -1,3 +1,3 @@
[submodule "efy"] [submodule "public/efy"]
path = efy path = public/efy
url = https://github.com/dragos-efy/efy2 url = https://github.com/dragos-efy/efy2

1
efy

@ -1 +0,0 @@
Subproject commit cf56e82388e02fe9b9eb2b13cc623fd41fef70d9

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

1
public/efy Submodule

@ -0,0 +1 @@
Subproject commit 51f030d755a9115f06341ecd78fbbf75ec600059

View File

@ -13,31 +13,10 @@
</template> </template>
<style> <style>
/*Global*/
:root {
--efy_color1_var: 239, 68, 68;
--efy_color2_var: 220, 38, 38;
--efy_radius: 12rem;
--efy_sidebar_button: right_middle, off;
--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: 100%;
--efy_audio_path: ./audio;
--efy_modules: efy_quick, efy_mode, efy_filters, efy_backup, efy_accessibility, efy_audio, efy_keyboard, efy_extra;
}
body { body {
@apply p-16rem; @apply p-16rem;
} }
/*Default Mode*/
[efy_mode="default_mode"] {
color-scheme: dark;
--efy_bg_var: 255, 255, 255;
--efy_bg: rgb(15, 15, 15);
--efy_text: rgb(220, 220, 220);
}
/*Radius*/ /*Radius*/
input, input,
.btn, .btn,
@ -92,7 +71,7 @@ video {
.pp-video-card-buttons { .pp-video-card-buttons {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10rem; gap: var(--efy_gap0);
margin: 5rem 0 0; margin: 5rem 0 0;
} }
.pp-video-card-buttons :is(a, button) { .pp-video-card-buttons :is(a, button) {
@ -135,10 +114,10 @@ video {
} }
.pp-video-card-channel { .pp-video-card-channel {
display: flex; display: flex;
gap: 10rem; gap: var(--efy_gap0);
place-items: center; place-items: center;
background: transparent; background: transparent;
margin: 10rem 0 0; margin: var(--efy_gap0) 0 0;
width: fit-content; width: fit-content;
} }
.pp-video-card-channel > a { .pp-video-card-channel > a {

View File

@ -31,8 +31,8 @@
v-if="channel.id" v-if="channel.id"
:href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`" :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
target="_blank" target="_blank"
class="btn flex-col ml-2" class="btn"
style="display: inline; float: unset" style="display: inline; float: unset; margin-left: var(--efy_gap0)"
> >
<font-awesome-icon icon="rss" /> <font-awesome-icon icon="rss" />
</a> </a>
@ -40,7 +40,7 @@
<button <button
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
:key="tab.name" :key="tab.name"
class="btn mr-2" style="margin-right: var(--efy_gap0)"
@click="loadTab(index)" @click="loadTab(index)"
:class="{ active: selectedTab == index }" :class="{ active: selectedTab == index }"
> >

View File

@ -82,8 +82,10 @@ export default {
<style> <style>
.suggestions-container { .suggestions-container {
@apply left-1/2 translate-x-[-50%] transform-gpu max-w-[600rem] w-full box-border p-[15rem] mb-[15rem] z-10 lt-md:max-w-[calc(100%-0.5rem)]; @apply left-1/2 translate-x-[-50%] transform-gpu max-w-[600rem] w-full box-border z-10 lt-md:max-w-[calc(100%-0.5rem)];
background: var(--efy_text2); background: var(--efy_text2);
box-shadow: 0 0 20rem var(--efy_text_trans); box-shadow: 0 0 20rem var(--efy_text_trans);
padding: var(--efy_gap);
margin: calc(-12rem + var(--efy_gap)) 0 var(--efy_gap) 0;
} }
</style> </style>

View File

@ -52,9 +52,9 @@ import router from "@/router/router.js";
import "uno.css"; import "uno.css";
/*EFY UI*/ /*EFY UI*/
import "../efy/efy.css"; import "../public/efy/efy.css";
import "./piped.css"; import "./piped.css";
import "../efy/efy.js"; import "../public/efy/efy.js";
import "./piped.js"; import "./piped.js";
import App from "./App.vue"; import App from "./App.vue";

View File

@ -1,6 +1,23 @@
/*EFY Template - 2022.09.09 - Fonts*/ @font-face {font-family: 'nunito'; src: url('../efy/nunito.woff2') format('truetype')} @font-face {font-family: 'nunito'; src: url('../efy/nunito_bold.woff2') format('truetype'); font-weight: bold} /*Global*/ @font-face {font-family: 'nunito'; src: url('../efy/nunito.woff2') format('truetype')} @font-face {font-family: 'nunito'; src: url('../efy/nunito_bold.woff2') format('truetype'); font-weight: bold}
:root {
/*End of EFY Template - Documentation on how to use it coming soon at https://efy.ooo/ui . Your own css starts bellow*/ --efy_color1_var: 239, 68, 68;
--efy_color2_var: 220, 38, 38;
--efy_color_angle: 165deg;
--efy_radius: 12rem;
--efy_gap: 15rem;
--efy_sidebar_button: right_middle, off;
--efy_body_width: 100%;
--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_audio_folder: ./efy/audio;
--efy_folder: ./efy;
--efy_modules: efy_quick, efy_mode, efy_filters, efy_backup, efy_accessibility, efy_audio, efy_language, efy_extra;
}
/*Default Mode*/ [efy_mode=default] {
--efy_scheme: dark;
--efy_bg_var: 255, 255, 255;
--efy_bg: rgb(15, 15, 15);
--efy_text: rgb(220, 220, 220);
} /*Your code starts bellow*/
/*BG 1*/ .comment, .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)} /*BG 1*/ .comment, .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} /*Bold*/ .btn {font-weight: bold}
@ -9,7 +26,7 @@
/*Justify-Content: Space-Between*/ .pp-playlist-add-modal-top, .pp-watch-bellow-options, .pp-nav {justify-content: space-between} /*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-watch-bellow-options .flex.items-center, .pp-channel-page-author, .grid .comment, .pp-chapters {display: flex} /*Display: Flex*/ .pp-watch-buttons, .pp-watch-bellow-options .flex.items-center, .pp-channel-page-author, .grid .comment, .pp-chapters {display: flex}
/*Gap: 15rem*/ .pp-show-playlist, .pp-rec-vids, .pp-mobile-nav, .pp-delete-account .flex, .pp-playlist-add-modal-top, .pp-pref-cards, .pp-watch-bellow-options {gap: 15rem} /*Gap: 15rem*/ .pp-show-playlist, .pp-rec-vids, .pp-mobile-nav, .pp-delete-account .flex, .pp-playlist-add-modal-top, .pp-pref-cards, .pp-watch-bellow-options {gap: var(--efy_gap)}
/*Color: Text*/ .video-grid div a, .pp-show-recs div a, .video-grid div button:not(.modal button, .btn), .pp-show-recs div button:not(.modal button, .btn), .svg-inline--fa:not(.video-grid svg, .btn svg, button svg) {color: var(--efy_text)} /*Color: Text*/ .video-grid div a, .pp-show-recs div a, .video-grid div button:not(.modal button, .btn), .pp-show-recs div button:not(.modal button, .btn), .svg-inline--fa:not(.video-grid svg, .btn svg, button svg) {color: var(--efy_text)}
/*Border*/ .modal-container, .video-grid>div {border: 1.5px solid var(--efy_bg1);} /*Border*/ .modal-container, .video-grid>div {border: 1.5px solid var(--efy_bg1);}
@ -17,18 +34,18 @@
/*Text-Fill-Color: Text*/ p, .pp-mobile-nav a, .pp-mobile-nav p, .video-grid div a, .pp-show-recs div a, .thumbnail-left, .thumbnail-right, .comment a, .pp-watch-bellow-options a, .pp-logo a, .pp-nav .pp-menu > * {-webkit-text-fill-color: var(--efy_text); text-decoration: none} /*Text-Fill-Color: Text*/ p, .pp-mobile-nav a, .pp-mobile-nav p, .video-grid div a, .pp-show-recs div a, .thumbnail-left, .thumbnail-right, .comment a, .pp-watch-bellow-options a, .pp-logo a, .pp-nav .pp-menu > * {-webkit-text-fill-color: var(--efy_text); text-decoration: none}
/*Text-Fill-Color: Text2*/ .btn, .btn a, a.btn, .modal button {-webkit-text-fill-color: var(--efy_text2); text-decoration: none} /*Text-Fill-Color: Text2*/ .btn, .btn a, a.btn, .modal button {-webkit-text-fill-color: var(--efy_text2); text-decoration: none}
/*BG: efy*/ .btn, .pp-chapter-active, .pp-chapters .chapter:hover {background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)); background-clip: padding-box; color: var(--efy_text2)} /*BG: efy*/ .btn, .pp-chapter-active, .pp-chapters .chapter:hover {background: var(--efy_color); background-clip: padding-box; color: var(--efy_text2)}
/*Padding 1*/ .btn {padding: var(--efy_padding); height: auto} /*Padding 1*/ .btn {padding: var(--efy_padding); height: auto}
/*Avatar*/ .comment-avatar, .pp-import-channel img {width: 40rem; height: 40rem} /*Avatar*/ .comment-avatar, .pp-import-channel img {width: 40rem; height: 40rem}
/*Video Grid */ .video-grid {display: grid; gap: 16rem; grid-template-columns: repeat(auto-fill, minmax(240rem, 1fr))} /*Video Grid */ .video-grid {display: grid; gap: var(--efy_gap); grid-template-columns: repeat(auto-fill, minmax(240rem, 1fr))}
tbody:nth-child(odd) {background: var(--efy_bg1)!important; box-shadow: inset 0 0 0 1.5px var(--efy_bg1)} tbody:nth-child(odd) {background: var(--efy_bg1)!important; box-shadow: inset 0 0 0 1.5px var(--efy_bg1)}
/*Bellow*/ .pp-watch-bellow-options {margin-top: 15rem} /*Bellow*/ .pp-watch-bellow-options {margin-top: 15rem}
.pp-watch-buttons {flex-wrap: wrap; gap: 10rem} .pp-watch-buttons {flex-wrap: wrap; gap: var(--efy_gap0)}
.pp-watch-buttons .btn {padding: 6rem 15rem; border: 0; color: var(--efy_text2); min-height: 36rem; max-height: 36rem; place-self: center; place-content: center} .pp-watch-buttons .btn {padding: 6rem 15rem; border: 0; color: var(--efy_text2); min-height: 36rem; max-height: 36rem; place-self: center; place-content: center}
.pp-bellow-video, .pp-bellow-video .flex {gap:10rem} .pp-bellow-video, .pp-bellow-video .flex {gap:10rem}
.pp-likes .flex {gap: 0rem} .pp-likes .flex {gap: 0rem}
@ -52,7 +69,7 @@ tbody:nth-child(odd) {background: var(--efy_bg1)!important; box-shadow: inset 0
.pp-channel-tabs {flex-wrap: wrap} .pp-channel-tabs {flex-wrap: wrap}
.pp-channel-tabs button:not(.active, .pp-subscribe) { .pp-channel-tabs button:not(.active, .pp-subscribe) {
background: var(--efy_gradient), linear-gradient(165deg, var(--efy_color_trans), var(--efy_color2_trans)); background: var(--efy_color), var(--efy_color_trans);
-webkit-background-clip: text, padding-box; -webkit-background-clip: text, padding-box;
-moz-background-clip: text, padding-box; -moz-background-clip: text, padding-box;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@ -60,10 +77,10 @@ tbody:nth-child(odd) {background: var(--efy_bg1)!important; box-shadow: inset 0
border: 0!important; border: 0!important;
} }
/*Comments*/ .grid .comment {width: fit-content; margin: 0 0 15px 0; gap: 10rem; padding: 12rem; border: var(--efy_border)} /*Comments*/ .grid .comment {width: fit-content; margin: 0 0 var(--efy_gap) 0; gap: 10rem; padding: 12rem; border: var(--efy_border)}
.comment-author {flex-wrap: wrap} .comment-author {flex-wrap: wrap}
.comment-meta {margin: 0 5rem} .comment-meta {margin: 0 5rem}
.comment .comment {margin-top: 10rem} .comment .comment {margin: var(--efy_gap) 0}
/*SVG*/ .svg-inline--fa:not(.video-grid svg, .btn svg, button svg) {margin-right: 5rem} /*SVG*/ .svg-inline--fa:not(.video-grid svg, .btn svg, button svg) {margin-right: 5rem}
@ -71,18 +88,13 @@ tbody:nth-child(odd) {background: var(--efy_bg1)!important; box-shadow: inset 0
.suggestions-container li {padding: 3rem 10rem} .suggestions-container li {padding: 3rem 10rem}
.suggestion-selected {box-shadow: 0 0 0 1.5rem var(--efy_color_border), 0 0 0 1.5rem var(--efy_color_border)} .suggestion-selected {box-shadow: 0 0 0 1.5rem var(--efy_color_border), 0 0 0 1.5rem var(--efy_color_border)}
/* .thumbnail-overlay, .thumbnail-left , .thumbnail-right {background: var(--efy_text2)!important; padding: 12rem 6rem!important}
.thumbnail-right {bottom: 15px; right: 8px}
.thumbnail-left {bottom: 16rem; left: 8rem}
.live-badge {padding: 6rem 7rem!important}*/
/*Recommended Videos*/ .pp-rec-vids {display: grid; grid-template-columns: 1fr 300rem} /*Recommended Videos*/ .pp-rec-vids {display: grid; grid-template-columns: 1fr 300rem}
.order-first {-webkit-box-ordinal-group: -9998; -webkit-order: -9999; order: -9999} .order-first {-webkit-box-ordinal-group: -9998; -webkit-order: -9999; order: -9999}
/*Preferences*/ .pp-pref-cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(300rem, 1fr))} /*Preferences*/ .pp-pref-cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(300rem, 1fr))}
table {margin-top: 0} table {margin-top: 0}
/*Chapters*/ .pp-chapters {margin-left: 15rem; max-width: 400rem; gap: 10rem; border-radius: var(--efy_radius)} /*Chapters*/ .pp-chapters {margin-left: var(--efy_gap); max-width: 400rem; gap: var(--efy_gap0); border-radius: var(--efy_radius)}
.pp-chapters .chapter {padding: 10rem; border-radius: var(--efy_radius); border: var(--efy_border)} .pp-chapters .chapter {padding: 10rem; border-radius: var(--efy_radius); border: var(--efy_border)}
.pp-chapters [title=chapters] {padding: 5rem 10rem; border-radius: var(--efy_radius); border: var(--efy_border)} .pp-chapters [title=chapters] {padding: 5rem 10rem; border-radius: var(--efy_radius); border: var(--efy_border)}
.pp-chapters .chapter .flex {gap: 0 15rem} .pp-chapters .chapter .flex {gap: 0 15rem}
@ -100,7 +112,7 @@ table {margin-top: 0}
/*Subscribtions*/ .pp-import-channel {gap: 10rem} /*Subscribtions*/ .pp-import-channel {gap: 10rem}
/*Other*/ .pp-show-recs, .pp-show-playlist, .pp-show-playlist {display: grid; gap: 15rem} /*Other*/ .pp-show-recs, .pp-show-playlist, .pp-show-playlist {display: grid; gap: var(--efy_gap)}
.pp-show-playlist {margin-bottom: 15rem} .pp-show-playlist {margin-bottom: 15rem}
:is(.video-grid, .pp-show-recs, .pp-show-playlist) div {padding: 15rem; background: var(--efy_bg1); border: var(--efy_border)} :is(.video-grid, .pp-show-recs, .pp-show-playlist) div {padding: 15rem; background: var(--efy_bg1); border: var(--efy_border)}
:is(.video-grid, .pp-show-recs, .pp-show-playlist) div div {padding: 0; border: none; background: transparent} :is(.video-grid, .pp-show-recs, .pp-show-playlist) div div {padding: 0; border: none; background: transparent}

View File

@ -1,4 +1,4 @@
import {$, $all, $ready_once, $insert, $add, $append} from '../efy/efy.js'; import {$, $all, $ready_once, $insert, $add, $append} from '../public/efy/efy.js';
$ready_once('#efy_sidebar').then(()=>{ $ready_once('#efy_sidebar').then(()=>{
$insert($('#efy_sidebar'), 'afterbegin', $add('div', { id: 'piped_efy_module' })); $insert($('#efy_sidebar'), 'afterbegin', $add('div', { id: 'piped_efy_module' }));
@ -7,8 +7,9 @@ $ready_once('#efy_sidebar').then(()=>{
for (let a = ['preferences', 'history', 'playlists', 'feed'], b = ['Preferences', 'History', 'Playlists', 'Feed'], c = $('#custom_sidebar_menu'), i = 0; i < a.length; i++){ $append(c, $add('a', {href: `./${a[i]}`}, [b[i]]))} for (let a = ['preferences', 'history', 'playlists', 'feed'], b = ['Preferences', 'History', 'Playlists', 'Feed'], c = $('#custom_sidebar_menu'), i = 0; i < a.length; i++){ $append(c, $add('a', {href: `./${a[i]}`}, [b[i]]))}
/*Custom Settings*/ $append($('#efy_modules'), $add('details', {id: 'piped_style'}, [ /*Custom Settings*/ $append($('#efy_modules'), $add('details', {id: 'piped_style'}, [
$add('summary', {}, [$add('i', {efy_icon: 'dots'}), 'Piped Style (Alpha)']), $add('div', {efy_tabs: 'piped_style'})]), $add('summary', {}, [$add('i', {efy_icon: 'dots'}), 'Piped Style']), $add('div', {efy_tabs: 'piped_style'})]),
); );
$insert($('#piped_style > summary'), 'beforeend', $add('mark', {efy_lang: 'alpha'}));
/*Tabs*/ for (let a = ['option1', 'option2', 'option3'], b = ['Tab 1', 'Tab 2', 'Tab 3'], c = $('[efy_tabs=piped_style]'), i = 0; i < a.length; i++) { /*Tabs*/ for (let a = ['option1', 'option2', 'option3'], b = ['Tab 1', 'Tab 2', 'Tab 3'], c = $('[efy_tabs=piped_style]'), i = 0; i < a.length; i++) {
$append(c, $add('button', {efy_tab: a[i]}, [b[i]])); $append(c, $add('button', {efy_tab: a[i]}, [b[i]]));
} }
@ -26,4 +27,4 @@ $ready_once('#efy_sidebar').then(()=>{
$all(b[i]).forEach( (e)=>{ e.classList.toggle(c[i]) }) $all(b[i]).forEach( (e)=>{ e.classList.toggle(c[i]) })
}) })
} }
}); });