commit
13442c281f
|
@ -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
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.
|
@ -0,0 +1 @@
|
||||||
|
Subproject commit 51f030d755a9115f06341ecd78fbbf75ec600059
|
27
src/App.vue
27
src/App.vue
|
@ -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 {
|
||||||
|
|
|
@ -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 }"
|
||||||
>
|
>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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";
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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]]));
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue