Minor improvements and move code to App.vue.

efy/piped.css

@@ -1,24 +1,7 @@
 /*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}
-/*Global*/ :root {
+
-    --efy_color1_var: 239, 68, 68;
-    --efy_color2_var: 220, 38, 38;
-    --efy_radius: 12rem;
-    --efy_sidebar_button: right_middle;
-    --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;
-}
-/*Default Mode*/ [efy_theme=default_mode] {
-    color-scheme: dark;
-    --efy_bg_var: 255,255,255;
-    --efy_bg: rgb(15,15,15);
-    --efy_text: rgb(220,220,220);
-}
 /*End of EFY Template - Documentation on how to use it coming soon at https://efy.ooo/ui . Your own css starts bellow*/
 
-/*Body*/ body {max-width: 100vw; padding: 16rem;}
-
-/*Radius*/ input, .btn, .shaka-video-container, .shaka-video-container video, .video-grid div, .pp-show-recs div, button, a.btn, .grid .comment, .shaka-scrim-container, .suggestion-selected, .pp-mobile-nav a, .shaka-text-container span>span>span {border-radius: var(--efy_radius)}
-/*Radius 0*/ .video-grid img, .thumbnail-overlay, .thumbnail-left, .thumbnail-right {border-radius: var(--efy_radius0)}
-/*Radius 2*/ .suggestions-container, .modal-container {border-radius: var(--efy_radius2)}
 
 /*BG: Transparent*/ .video-grid div div, .pp-show-recs div div {background: transparent}
 /*BG 1*/ .comment, .video-grid div, .pp-show-recs div, .pp-mobile-nav a, .suggestion-selected, .pp-chapters .chapter:not(.pp-chapter-active, .chapter:hover), .pp-chapters [title=chapters] {background: var(--efy_bg1)}

src/App.vue

@@ -19,6 +19,61 @@
     </div>
 </template>
 
+<style>
+/*Global*/
+:root {
+    --efy_color1_var: 239, 68, 68;
+    --efy_color2_var: 220, 38, 38;
+    --efy_radius: 12rem;
+    --efy_sidebar_button: right_middle;
+    --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;
+}
+
+body {
+    @apply p-64;
+}
+
+/*Default Mode*/
+[efy_theme="default_mode"] {
+    color-scheme: dark;
+    --efy_bg_var: 255, 255, 255;
+    --efy_bg: rgb(15, 15, 15);
+    --efy_text: rgb(220, 220, 220);
+}
+
+/*Radius*/
+input,
+.btn,
+button,
+.shaka-video-container,
+.shaka-video-container video,
+.video-grid div,
+.pp-show-recs div,
+.grid .comment,
+.shaka-scrim-container,
+.suggestion-selected,
+.pp-mobile-nav a,
+.shaka-text-container span > span > span {
+    border-radius: var(--efy_radius);
+}
+
+/*Radius 0*/
+.video-grid img,
+.thumbnail-overlay,
+.thumbnail-left,
+.thumbnail-right {
+    border-radius: var(--efy_radius0);
+}
+
+/*Radius 2*/
+.suggestions-container,
+.modal-container {
+    border-radius: var(--efy_radius2);
+}
+</style>
+
 <script>
 import NavBar from "./components/NavBar.vue";
 export default {

src/components/ModalComponent.vue

@@ -27,7 +27,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 .modal {
     @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
 }

src/main.js

@@ -42,6 +42,14 @@ library.add(
 );
 
 import router from "@/router/router.js";
+
+import "uno.css";
+
+/*EFY UI*/
+import "../efy/efy.css";
+import "../efy/piped.css";
+import "../efy/efy.js";
+
 import App from "./App.vue";
 
 import DOMPurify from "dompurify";
@@ -54,8 +62,6 @@ TimeAgo.addDefaultLocale(en);
 
 import { createI18n } from "vue-i18n";
 import enLocale from "@/locales/en.json";
-// import "@unocss/reset/tailwind.css";
-import "uno.css";
 
 const timeAgo = new TimeAgo("en-US");
 
@@ -267,11 +273,6 @@ const mixin = {
     },
 };
 
-/*EFY UI*/
-import "../efy/efy.css";
-import "../efy/piped.css";
-import "../efy/efy.js";
-
 const i18n = createI18n({
     globalInjection: true,
     legacy: false,