/*Global*/ @font-face {font-family: 'nunito'; src: url('../node_modules/efy/nunito.woff2') format('woff2'); font-weight: normal} @font-face {font-family: 'nunito'; src: url('../node_modules/efy/nunito_bold.woff2') format('woff2'); font-weight: bold} :root { --efy_color: 0.64 0.2 25, 0.6 0.2 30; /*No JS Fallback*/ --efy_color1_var: 0.64 0.2 25; --efy_color2_var: 0.6 0.2 30; --efy_color_angle: 165deg; --efy_radius: 12rem; --efy_border_size: 1.5rem; --efy_gap: 15rem; --efy_sidebar_button: right_middle, off; --efy_body_width: 100%; --efy_body_padding: 15rem; --efy_font_family: 'nunito', sans-serif, emoji; --efy_folder: efy; --efy_audio_folder: efy/audio; --efy_lang_folder: efy/lang; --efy_lang_code: en; --efy_modules: efy_quick, efy_filters, efy_backup, efy_accessibility, efy_audio, efy_language, efy_extra; --efy_protocol: http; } /*Default Mode*/ [efy_mode=default] { --efy_scheme: dark; --efy_bg_var: 1 0 0; --efy_bg_var2: 0 0 0; --efy_bg: oklch(0.15 0 0); --efy_text: oklch(.9 0 0); } /*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) {background: var(--efy_bg1)} /*Bold*/ .btn {font-weight: bold} /*Margin: 0*/ .pp-watch-buttons .btn, .suggestions-container li, .suggestions-container 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} /*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} /*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, [role=button] svg, button svg) {color: var(--efy_text)} /*Border*/ .modal-container, .video-grid>div {border: 1.5px solid var(--efy_bg1);} /*Text-Fill-Color: Text*/ p:not([efy_logo] p, .efy_sidebar p), .pp-mobile-nav :is(a, 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)!important; text-decoration: none; } /*Padding 1*/ .btn {padding: var(--efy_padding); height: auto} /*Avatar*/ .comment-avatar, .pp-import-channel img {width: 40rem; height: 40rem} /*Video Grid */ .video-grid {display: grid; gap: var(--efy_gap); grid-template-columns: repeat(auto-fill, minmax(240rem, 1fr))} /*Bellow*/ .pp-watch-bellow-options {margin-top: 15rem} .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: var(--efy_size); max-height: var(--efy_size); place-self: center; place-content: center} .pp-bellow-video, .pp-bellow-video .flex {gap:10rem} .pp-likes .flex {gap: 0rem} .relative.text-sm { position: relative} /*Hover Effect*/ .video-grid>div:active {background: var(--efy_bg2); outline: 3rem solid var(--efy_text)!important} /*Animation: pulse2*/ .video-grid>div:active {animation: pulse2 0.1s ease-in-out backwards} .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} .pp-watch-bellow-options .flex.items-center > img {width: 40rem!important; height: 40rem!important} /*Avatar Channel Page*/ .pp-channel-page-author {gap: 10rem; margin-top: 10rem} .pp-channel-page-author > img {width: 48rem; height: 48rem} .pp-channel-tabs {flex-wrap: wrap} .pp-channel-tabs button:not(.active, .pp-subscribe) { background: var(--efy_color), var(--efy_color_trans); -webkit-background-clip: text, padding-box; -moz-background-clip: text, padding-box; -webkit-text-fill-color: transparent; box-shadow: inset 0 0 0 1.5rem var(--efy_color_border)!important; border: 0!important; } /*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-meta {margin: 0 5rem} .comment .comment {margin: var(--efy_gap) 0} .suggestions-container ul {padding: 0; list-style: none; display: grid; gap: 5rem} .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)} /*Recommended Videos*/ .pp-rec-vids {display: grid; grid-template-columns: 1fr 300rem} .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))} table {margin-top: 0} /*Modal*/ .modal {backdrop-filter: blur(5px)} .modal-container {background: var(--efy_text2)!important; padding: 15rem!important; box-shadow: 0 0 1px var(--efy_text_trans)} .modal-container button + button {margin-left: 10rem} .modal-container button:first-of-type {padding: 8rem 12rem; align-self: center} /*Delete account*/ .pp-delete-account {flex-direction: column; margin: 10rem 0} .pp-delete-account > * {width: 100%} .pp-delete-account .flex {flex-wrap: wrap} /*Subscribtions*/ .pp-import-channel {gap: 10rem} /*Other*/ .pp-show-recs, .pp-show-playlist, .pp-show-playlist {display: grid; gap: var(--efy_gap)} .pp-show-playlist {margin-bottom: 15rem} :is(.video-grid, .pp-show-recs, .pp-show-playlist) div {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} .video-grid > div { padding: 0; } .svg-inline--fa{vertical-align: -2.5rem} .children\:px-1>*, .px-1 {padding-left: 4rem; padding-right: 4rem} /*Fullscreen*/ .shaka-video-container:fullscreen :is(video, .shaka-scrim-container) {border-radius: 0 !important} /*Variables*/ .mr-0\.5 {margin-right: 15rem} .pl-0\.5 {padding-left: 5rem} .ml-1, .ml-1\.5 {margin-left: 5rem} .mb-2 {margin-bottom: 15rem} .mt-2 {margin-top: 15rem} .mr-1, .mr-2 {margin-right: 10rem} .children\:pb-3>* {padding-bottom: 15rem} .children\:ml-2>*, .ml-2 {margin-left: 10rem} .pp-mobile-btn {display: none; margin: 0!important; padding: 8rem 10rem} .btn, [role=button] { border: 0; } .pp-square { width: var(--efy_size)!important; height: var(--efy_size); } .video-tags { display: flex; flex-wrap: wrap; gap: var(--efy_gap0); } .video-tags a { background: var(--efy_bg1)!important; border-radius: var(--efy_radius); border: var(--efy_border); background-clip: none!important; -webkit-background-clip: none!important; -webkit-text-fill-color: var(--efy_text)!important; padding: 4rem 10rem; font-weight: normal; } .thumbnail[src*="/?host=i.ytimg.com"] { aspect-ratio: 16/9; object-fit: cover; } /*Convergence*/ /*Desktop*/ .efy_sidebar #custom_sidebar_menu { display: none !important } @media (max-width: 990px) { .pp-watch-bellow-options {flex-direction: column; margin-top: 15rem} } @media (max-width: 767.9px) { .pp-rec-vids {grid-template-columns: 1fr 1fr} .\