TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1397 from dragos-efy/redesign

Browse source 
Redesign - Fixed more stuff
This commit is contained in:
Bnyro 2022-09-06 14:54:07 +02:00 committed by GitHub
commit 3c6ddc48d7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
efy/piped.css
View file

@ -17,7 +17,7 @@
/*Body*/ body {max-width: 100vw; padding: 16rem;} /*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*/ 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 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)} /*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: Transparent*/ .video-grid div div, .pp-show-recs div div {background: transparent}
@ -74,15 +74,13 @@ tbody:nth-child(odd), .shaka-overflow-menu button:hover, .shaka-settings-menu bu
/*Top bar*/ /*Top bar*/
.pp-nav {margin-bottom: 15rem} .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 {font-size: 25rem}
.pp-nav > div.flex-1.flex.justify-start > a img {margin-right: -5rem} .pp-nav > div.flex-1.flex.justify-start > a img {margin-right: -5rem}
.pp-nav > div input {margin: 0!important; width: 300rem} .pp-nav > div input {margin: 0!important; width: 300rem}
.pp-nav > ul {list-style: none; padding: 0} .pp-nav > ul {list-style: none; padding: 0}
.pp-logo img {width: auto}
/*Cards*/ .video-grid > div > .flex > a > img {width: 32rem; height: 32rem} /*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)} /*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)}
@ -107,8 +105,10 @@ tbody:nth-child(odd), .shaka-overflow-menu button:hover, .shaka-settings-menu bu
.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-right {bottom: 15px; right: 8px; background: var(--efy_text2); padding: 12rem 6rem} /*Thumbnail Overlay*/ .thumbnail-overlay, .thumbnail-left , .thumbnail-right {background: var(--efy_text2)!important; padding: 12rem 6rem!important}
.thumbnail-left {bottom: 16rem; left: 8rem; padding: 11rem 7rem; background: var(--efy_text2); text-transform: uppercase} .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}
@ -180,4 +180,4 @@ html .shaka-range-element, html .shaka-range-element:focus {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:hidden {display: none} .md\:hidden {display: none}
} }

7
src/components/PreferencesPage.vue
View file

@ -91,7 +91,12 @@
<p v-t="'info.preferences_note'" /> <p v-t="'info.preferences_note'" />
<button class="btn" v-t="'actions.reset_preferences'" @click="resetPreferences()" /> <button class="btn" v-t="'actions.reset_preferences'" @click="resetPreferences()" />
<button class="btn mx-4" v-t="'actions.backup_preferences'" @click="backupPreferences()" /> <button class="btn mx-4" v-t="'actions.backup_preferences'" @click="backupPreferences()" />
<label for="fileSelector" class="btn" v-t="'actions.restore_preferences'" @click="restorePreferences()" /> <label
for="fileSelector"
class="btn text-center"
v-t="'actions.restore_preferences'"
@click="restorePreferences()"
/>
<input class="hidden" id="fileSelector" ref="fileSelector" type="file" @change="restorePreferences()" /> <input class="hidden" id="fileSelector" ref="fileSelector" type="file" @change="restorePreferences()" />
<!-- options that are visible only when logged in --> <!-- options that are visible only when logged in -->

6
src/components/VideoItem.vue
View file

@ -30,10 +30,10 @@
v-else-if="video.duration >= 60" v-else-if="video.duration >= 60"
v-text="timeFormat(video.duration)" v-text="timeFormat(video.duration)"
/> />
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div"> <i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right live-badge" tag="div">
<font-awesome-icon class="w-3" :icon="['fas', 'broadcast-tower']" /> <font-awesome-icon :icon="['fas', 'broadcast-tower']" />
</i18n-t> </i18n-t>
<span v-if="video.watched" class="thumbnail-overlay bottom-5px left-5px" v-t="'video.watched'" /> <span v-if="video.watched" class="thumbnail-overlay thumbnail-left" v-t="'video.watched'" />
</div> </div>
<div> <div>