mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Merge pull request #1410 from dragos-efy/efy
Fixed Captions, Select Arrows, Updated EFY, Moved more css from piped.css to vue components
This commit is contained in:
Bnyro
GitHub
commit
b25dd1bf1b
6 changed files with 71 additions and 30 deletions
|
|
@ -1,4 +1,4 @@
|
|||
/*EFY UI 2022.09.04*/:root { --efy_font_size: 1px;
|
||||
/*EFY UI 2022.09.09*/:root { --efy_font_size: 1px;
|
||||
--efy_radius0: calc(var(--efy_radius) / 1.25); --efy_radius2: calc(var(--efy_radius) * 1.5); --efy_radius00: calc(var(--efy_radius) / 3);
|
||||
--efy_padding: 8rem 16rem; --efy_padding2: 3rem 6rem; --efy_gap: 15rem; --efy_body_width: 1120rem;
|
||||
--efy_color: rgb(var(--efy_color1_var)); --efy_color_trans: rgba(var(--efy_color1_var), 0.3);
|
||||
|
|
@ -245,6 +245,8 @@ details[open]:not([efy_help]) > summary:before {transform: rotate(90deg); right:
|
|||
[efy_select] [type="checkbox"], [efy_select] [type="radio"], [efy_select] label [type="color"] {opacity:0}
|
||||
[efy_select] label, [efy_select] p, [efy_select] button {margin: 0 8rem 12rem 0}
|
||||
|
||||
/*Padding-Right for Expanding Boxes*/ select:not([multiple]) {padding-right: 32rem} summary, details[open] summary {padding-right: 20rem}
|
||||
|
||||
/*Card*/ [efy_card] {background: var(--efy_bg1); border-radius: var(--efy_radius); border: 1.5rem solid var(--efy_color_border); padding: 15rem; display: grid; gap: 5rem; width: 100%; align-content: baseline}
|
||||
|
||||
/*Sidebar*/ .efy_sidebar {padding: 16rem; width: 100vw; max-width: 450rem; height: 100vh; z-index: 9; position: fixed; right: -450rem; top: 0; box-shadow: 0 0 30rem #0005; border-radius: var(--efy_radius2) 0 0 var(--efy_radius2); transition: right .3s; backdrop-filter: blur( 48rem)}
|
||||
|
|
@ -335,4 +337,4 @@ details[open]:not([efy_help]) > summary:before {transform: rotate(90deg); right:
|
|||
[efy_icon=accessibility]:before {content: "\e910"}
|
||||
[efy_icon=zoom_out]:before {content: "\e911"}
|
||||
[efy_icon=zoom_in]:before {content: "\e912"}
|
||||
[efy_icon=search]:before {content: "\e908"}
|
||||
[efy_icon=search]:before {content: "\e908"}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/*EFY UI 2022.09.04*/ let e$ = document.querySelector.bind(document), e$all = document.querySelectorAll.bind(document), e$create = document.createElement.bind(document), e$body, e$root; window.onload =()=>{ e$root = e$(":root"), e$body = e$("body");
|
||||
/*EFY UI 2022.09.08*/ let e$ = document.querySelector.bind(document), e$all = document.querySelectorAll.bind(document), e$create = document.createElement.bind(document), e$body, e$root; window.onload =()=>{ e$root = e$(":root"), e$body = e$("body");
|
||||
|
||||
/*Check LocalStorage*/ try {let x = 'LS'; localStorage.setItem(x, x); let y = localStorage.getItem(x); localStorage.removeItem(x); if (x !== y) {throw new Error();}} catch (exception) {e$('body').innerHTML = `<div efy_alert style="background: #eee"><div><h6><a>EFY</a> - Your browser blocks LocalStorage</h6><p>You can block 3rd party cookies, no worries, Privacy matters! But please allow 1st party cookies in your browser's settings. EFY<b>doesn't</b> use cookies or track you, but the settings related to LocalStorage are grouped as "cookies", although different. Have fun! 🥳</p></div></div>`}
|
||||
|
||||
|
|
@ -102,7 +102,6 @@
|
|||
<input type="checkbox" name="efy_audio" id="efy_audio_click"><label for="efy_audio_click">Click & Tap</label>
|
||||
<input type="checkbox" name="efy_audio" id="efy_audio_hover"><label for="efy_audio_hover">Mouse Hover</label>
|
||||
<p>You might have to click / tap on the ssl / lock icon on your browser & allow sounds, to hear them automatically.</p>
|
||||
<img src="./efy/img/allow_audio.webp"></img>
|
||||
</details>
|
||||
|
||||
</div><div efy_sidebar_btn_open></div>
|
||||
|
|
@ -346,4 +345,4 @@ e$body.addEventListener("pointerup", ()=>{ if (event.target.matches('[efy_alert]
|
|||
/*Online / Offline*/ window.addEventListener('offline', () => { console.log('offline'); e$('[efy_alerts]').insertAdjacentHTML('afterbegin',`<div efy_alert><div><h6>You're OFFLINE</h6><p>Maybe check your internet connection?</p></div><button efy_btn_square><i efy_icon="remove"></i></button></div>`) });
|
||||
window.addEventListener('online', () => { console.log('online'); e$('[efy_alerts]').insertAdjacentHTML('afterbegin',`<div efy_alert><div><h6>You're back ONLINE</h6></div><button efy_btn_square><i efy_icon="remove"></i></button></div>`) });
|
||||
|
||||
/*End*/};
|
||||
/*End*/};
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 9 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
/*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}
|
||||
/*EFY Template - 2022.09.09 - 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}
|
||||
|
||||
/*End of EFY Template - Documentation on how to use it coming soon at https://efy.ooo/ui . Your own css starts bellow*/
|
||||
|
||||
|
|
@ -27,13 +27,7 @@
|
|||
|
||||
/*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)}
|
||||
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}
|
||||
.pp-watch-buttons {flex-wrap: wrap; gap: 10rem}
|
||||
|
|
@ -41,8 +35,6 @@ tbody:nth-child(odd), .shaka-overflow-menu button:hover, .shaka-settings-menu bu
|
|||
.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}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -66,7 +58,6 @@ tbody:nth-child(odd), .shaka-overflow-menu button:hover, .shaka-settings-menu bu
|
|||
|
||||
/*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}
|
||||
|
|
@ -132,12 +123,6 @@ table {margin-top: 0}
|
|||
.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%}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
body {
|
||||
@apply p-64;
|
||||
@apply max-w-100vw p-16rem;
|
||||
}
|
||||
|
||||
/*Default Mode*/
|
||||
|
|
|
|||
|
|
@ -652,22 +652,77 @@ export default {
|
|||
.player-container {
|
||||
@apply max-h-75vh min-h-64 bg-black;
|
||||
}
|
||||
[efy_theme="dark_black"] .player-container {
|
||||
box-shadow: 0 0 0 1.5rem var(--efy_color_border);
|
||||
}
|
||||
.shaka-video-container:-webkit-full-screen {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
/* captions style */
|
||||
/*Captions*/
|
||||
.shaka-text-wrapper * {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.shaka-text-wrapper > span > span {
|
||||
background-color: transparent !important;
|
||||
.shaka-text-wrapper > span {
|
||||
background: #0008;
|
||||
backdrop-filter: blur(20rem);
|
||||
border: 1.5rem solid var(--efy_color_border);
|
||||
border-radius: var(--efy_radius);
|
||||
padding: 8rem 12rem;
|
||||
line-height: 28rem;
|
||||
}
|
||||
|
||||
/* apply to all spans that don't include multiple other spans to avoid the style being applied to the text container too when the subtitles are two lines */
|
||||
.shaka-text-wrapper > span > span *:first-child:last-child {
|
||||
background-color: rgba(0, 0, 0, 0.6) !important;
|
||||
padding: 0.09em 0;
|
||||
background: transparent !important;
|
||||
color: var(--efy_text);
|
||||
padding: 0;
|
||||
font-size: 22rem !important;
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.shaka-text-wrapper > span > span *:first-child:last-child {
|
||||
font-size: 16rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*Shaka Player*/
|
||||
html .shaka-range-element,
|
||||
html .shaka-range-element:focus {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue