mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-15 20:58:23 +00:00
182 lines
10 KiB
CSS
182 lines
10 KiB
CSS
/*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-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)}
|
|
/*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, .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-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}
|
|
/*Gap: 15rem*/ .pp-show-recs, .pp-rec-vids, .pp-mobile-nav, .pp-delete-account .flex, .pp-playlist-add-modal-top, .pp-pref-cards, .pp-nav, .pp-watch-bellow-options {gap: 15rem}
|
|
/*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);}
|
|
|
|
/*Text-Fill-Color: Text*/ p, .pp-mobile-nav a, .video-grid div a, .pp-show-recs div a, .thumbnail-left, .thumbnail-right, .comment a, .pp-watch-bellow-options a, .pp-nav > ul a, .pp-nav > div.flex-1.flex.justify-start > a {-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}
|
|
|
|
/*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)}
|
|
|
|
/*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: 16rem; grid-template-columns: repeat(auto-fit, minmax(224rem, 1fr))}
|
|
|
|
/*Player*/ .material-icons-round {font-family: "Material Icons Round"!important;}
|
|
.material-icons-round, .shaka-current-time {-webkit-text-fill-color: #fff!important; opacity: 1!important;}
|
|
.shaka-overflow-menu, .shaka-settings-menu {background: var(--efy_text2)!important; border-radius: var(--efy_radius)!important; padding: 16rem!important; height: fit-content!important; max-height: 256rem!important; box-shadow: inset 0 0 0 1.5px var(--efy_bg1)!important;}
|
|
.shaka-overflow-menu label, .shaka-settings-menu label, .shaka-overflow-menu button, .shaka-settings-menu button {-webkit-text-fill-color: var(--efy_text)!important; margin: 1.6rem 0!important; }
|
|
.shaka-overflow-menu .material-icons-round, .shaka-settings-menu .material-icons-round {-webkit-text-fill-color: var(--efy_text)!important;}
|
|
|
|
tbody:nth-child(odd), .shaka-overflow-menu button:hover, .shaka-settings-menu button:hover {background: var(--efy_bg1)!important; box-shadow: inset 0 0 0 1.5px var(--efy_bg1)}
|
|
|
|
/*Bellow*/ .pp-watch-bellow-options {margin-top: 15rem}
|
|
.pp-watch-buttons {flex-wrap: wrap; gap: 10rem}
|
|
.pp-watch-buttons .btn {padding: 6rem 15rem; border: 0; color: var(--efy_text2); min-height: 36rem; max-height: 36rem; place-self: center}
|
|
.pp-bellow-video, .pp-bellow-video .flex {gap:10rem}
|
|
.pp-likes .flex {gap: 0rem}
|
|
|
|
/*Video Caption*/ .shaka-text-container span>span>span {padding: var(--efy_padding2)!important}
|
|
|
|
|
|
|
|
|
|
.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}
|
|
|
|
|
|
|
|
|
|
|
|
/*Top bar*/
|
|
.pp-nav {margin-bottom: 15rem}
|
|
.pp-nav > div.flex-1.flex.justify-start > a {font-size: 25rem}
|
|
.pp-nav > div.flex-1.flex.justify-start > a img {margin-right: -5rem}
|
|
.pp-nav > div input {margin: 0!important; width: 300rem}
|
|
.pp-nav > ul {list-style: none; padding: 0}
|
|
|
|
.pp-logo img {width: auto}
|
|
|
|
/*Cards*/ .video-grid > div > .flex > a > img {width: 32rem; height: 32rem}
|
|
|
|
/*Player*/ .player-container {max-height: 75vh; background: #000} [efy_theme=dark_black] .player-container {box-shadow: 0 0 0 1.5rem var(--efy_color_border)}
|
|
.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}
|
|
|
|
/*Comments*/ .grid .comment {width: fit-content; margin: 0 0 15px 0; gap: 10rem; padding: 12rem; border: 1.5rem solid var(--efy_color_border)}
|
|
.comment-author {flex-wrap: wrap}
|
|
.comment-meta {margin: 0 5rem}
|
|
.comment .comment {margin-top: 10rem}
|
|
|
|
/*SVG*/ .svg-inline--fa:not(.video-grid svg, .btn svg, button svg) {margin-right: 5rem}
|
|
|
|
/*Search Suggestions*/ .suggestions-container {position: absolute; max-width: 600rem; width: 100%; z-index: 10; transform: translateX(-50%); padding: 15rem; background: var(--efy_text2); box-shadow: 0 0 20px var(--efy_text_trans); margin-bottom: 15rem}
|
|
|
|
.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)}
|
|
|
|
/*Thumbnail Overlay*/ .thumbnail-right {bottom: 15px; right: 8px; background: var(--efy_text2); padding: 12rem 6rem}
|
|
.thumbnail-left {bottom: 16rem; left: 8rem; padding: 11rem 7rem; background: var(--efy_text2); text-transform: uppercase}
|
|
|
|
/*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}
|
|
|
|
/*Chapters*/ .pp-chapters {margin-left: 15rem; max-width: 400rem; gap: 10rem; border-radius: var(--efy_radius)}
|
|
.pp-chapters .chapter {padding: 10rem; border-radius: var(--efy_radius); border: 1.5rem solid var(--efy_color_border)}
|
|
.pp-chapters [title=chapters] {padding: 5rem 10rem; border-radius: var(--efy_radius); border: 1.5rem solid var(--efy_color_border)}
|
|
.pp-chapters .chapter .flex {gap: 0 15rem}
|
|
|
|
.pp-chapters.pp-mobile {margin: 15rem 0 0 0; max-width: 100%}
|
|
|
|
/*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 {display: grid}
|
|
.video-grid div, .pp-show-recs div {padding: 16rem; border: 1.5rem solid var(--efy_color_border)}
|
|
.video-grid div div, .pp-show-recs div div {padding: 0; border: none}
|
|
|
|
.svg-inline--fa{vertical-align: -2.5rem}
|
|
.children\:px-1>*, .px-1 {padding-left: 4rem; padding-right: 4rem}
|
|
.video-grid div button:not(.modal button, .btn), .pp-show-recs div button:not(.modal button, .btn) {background: transparent!important; border: 0}
|
|
|
|
/*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-2 {margin-right: 10rem}
|
|
.children\:pb-3>* {padding-bottom: 15rem}
|
|
|
|
html .shaka-range-element, html .shaka-range-element:focus {
|
|
border: none!important;
|
|
box-shadow: none!important;
|
|
outline: none!important;
|
|
}
|
|
|
|
.pp-mobile-btn {display: none; padding: 10rem 12rem}
|
|
.pp-mobile-nav {margin: 0 0 15rem 0}
|
|
.pp-mobile-nav a {padding: var(--efy_padding); width: 100%}
|
|
|
|
/*Convergence*/
|
|
@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}
|
|
.\<md\:hidden {display: none}
|
|
.md\:hidden {margin-bottom: 16rem}
|
|
}
|
|
@media (max-width: 639px) {
|
|
.pp-rec-vids {grid-template-columns: 1fr}
|
|
.pp-nav > ul {display: none}
|
|
.pp-mobile-btn {display: block}
|
|
}
|
|
@media (min-width: 640px){
|
|
.sm\:order-last {-webkit-box-ordinal-group: 10000; -webkit-order: 9999; order: 9999}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.md\:hidden {display: none}
|
|
}
|