mirror of
https://codeberg.org/Hyperpipe/Hyperpipe
synced 2025-06-27 20:58:01 +02:00
drop random gradients
This commit is contained in:
Shiny Nematoda
parent
d6ecb1217f
commit
34564460d9
11 changed files with 847 additions and 749 deletions
1521
package-lock.json
generated
1521
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -11,17 +11,17 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
"dompurify": "^3.0.9",
|
||||
"dompurify": "^3.1.0",
|
||||
"peerjs": "^1.5.2",
|
||||
"pinia": "^2.1.7",
|
||||
"shaka-player": "^4.7.11",
|
||||
"shaka-player": "^4.7.13",
|
||||
"sortablejs": "^1.15.2",
|
||||
"vue": "^3.2.38"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"prettier": "^3.2.5",
|
||||
"vite": "^5.1.5",
|
||||
"vite-plugin-pwa": "^0.19.2"
|
||||
"vite": "^5.2.10",
|
||||
"vite-plugin-pwa": "^0.19.8"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -183,7 +183,6 @@ onMounted(() => {
|
|||
<img
|
||||
v-if="data.state.art"
|
||||
class="art"
|
||||
loading="lazy"
|
||||
:src="data.state.art" />
|
||||
|
||||
<div class="wrapper">
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ body[date-theme^='black'] {
|
|||
|
||||
--color-shadow: #000;
|
||||
--color-blur: #11111190;
|
||||
--color-gradient: linear-gradient(45deg, oklab(0.9 -0.05 -0.04), oklab(0.57 -0.03 -0.09));
|
||||
--color-scrollbar: var(--vt-c-blue);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
|
|
@ -72,7 +73,9 @@ body[data-theme^='nord'] {
|
|||
--color-border-hover: #4c566a;
|
||||
|
||||
--color-shadow: #4c566a;
|
||||
--color-scrollbar: #88c0d0;
|
||||
--color-scrollbar: var(--color-foreground);
|
||||
|
||||
--color-gradient: linear-gradient(45deg, var(--color-foreground), #5E81AC);
|
||||
|
||||
--color-heading: #d8dee9;
|
||||
--color-text: #d8dee9;
|
||||
|
|
@ -88,7 +91,9 @@ body[data-theme^='dracula'] {
|
|||
--color-border-hover: #44475a;
|
||||
|
||||
--color-shadow: #6272a4;
|
||||
--color-scrollbar: #bd93f9;
|
||||
--color-scrollbar: var(--color-foreground);
|
||||
|
||||
--color-gradient: linear-gradient(45deg, var(--color-foreground), var(--color-shadow));
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
|
|
@ -302,7 +307,7 @@ img {
|
|||
}
|
||||
.bg-img {
|
||||
appearance: none;
|
||||
background-image: var(--grad);
|
||||
background-image: var(--color-gradient);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 0.25rem;
|
||||
|
|
@ -325,8 +330,7 @@ img {
|
|||
--translate: 0;
|
||||
background: var(--background);
|
||||
box-shadow: var(--shadow);
|
||||
transform: translateX(calc(var(--translate) / 2))
|
||||
translateY(calc(var(--translate) / 2));
|
||||
transform: translate(calc(var(--translate) / 2), calc(var(--translate) / 2));
|
||||
}
|
||||
.pop:hover {
|
||||
--background: var(--color-background-soft);
|
||||
|
|
@ -337,7 +341,7 @@ img {
|
|||
--background: var(--color-border);
|
||||
}
|
||||
.pop-2 {
|
||||
transform: translateX(var(--translate)) translateY(var(--translate));
|
||||
transform: translate(var(--translate), var(--translate));
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.prm .pop,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<script setup>
|
||||
import { useRand } from '@/scripts/colors.js';
|
||||
import { useI18n } from '@/stores/misc.js';
|
||||
|
||||
const rand = useRand(),
|
||||
{ t } = useI18n();
|
||||
const { t } = useI18n();
|
||||
|
||||
defineProps({
|
||||
name: String,
|
||||
|
|
@ -11,7 +9,6 @@ defineProps({
|
|||
type: String,
|
||||
default: '',
|
||||
},
|
||||
grad: String,
|
||||
art: {
|
||||
type: String,
|
||||
default: '/1x1.png',
|
||||
|
|
@ -45,7 +42,6 @@ defineEmits(['open-album']);
|
|||
margin: auto;
|
||||
}
|
||||
.card-bg {
|
||||
--grad: v-bind('grad || rand');
|
||||
height: 13rem;
|
||||
width: 13rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ p.more {
|
|||
}
|
||||
.subs:hover,
|
||||
.subs[data-active='true'] {
|
||||
background-color: var(--color-foreground);
|
||||
background: var(--color-gradient);
|
||||
color: var(--color-background);
|
||||
background-clip: border-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ defineEmits(['click']);
|
|||
color: var(--color-text);
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
background: var(--color-foreground);
|
||||
background: var(--color-gradient);
|
||||
border-radius: 50%;
|
||||
vertical-align: -1rem;
|
||||
text-align: center;
|
||||
|
|
@ -27,7 +27,7 @@ defineEmits(['click']);
|
|||
margin-right: auto;
|
||||
}
|
||||
.bi-play {
|
||||
color: var(--color-background-soft);
|
||||
color: var(--color-background);
|
||||
box-shadow: 0 0 1rem var(--color-foreground);
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@ import { ref, reactive, watch, onMounted } from 'vue';
|
|||
import AlbumItem from './AlbumItem.vue';
|
||||
import Modal from './Modal.vue';
|
||||
|
||||
import { useRand, parseThumb } from '@/scripts/colors.js';
|
||||
import { useStore } from '@/scripts/util.js';
|
||||
import { useStore, parseThumb } from '@/scripts/util.js';
|
||||
|
||||
import {
|
||||
useListPlaylists,
|
||||
|
|
@ -444,7 +443,6 @@ onMounted(async () => {
|
|||
<div class="grid-3">
|
||||
<AlbumItem
|
||||
:name="t('title.offline')"
|
||||
:grad="useRand()"
|
||||
@open-album="OpenOffline" />
|
||||
<AlbumItem
|
||||
v-for="i in list"
|
||||
|
|
@ -452,7 +450,6 @@ onMounted(async () => {
|
|||
:name="i.name"
|
||||
:author="t('title.songs') + ' • ' + i.urls.length"
|
||||
:art="parseThumb(i.urls[0]?.url, proxy)"
|
||||
:grad="useRand()"
|
||||
@open-album="Open(i.name)" />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { ref } from 'vue';
|
|||
import AddToPlaylist from '@/components/AddToPlaylist.vue';
|
||||
|
||||
import { getJsonAuth } from '@/scripts/fetch.js';
|
||||
import { useRand } from '@/scripts/colors.js';
|
||||
import { useStore, useShare } from '@/scripts/util.js';
|
||||
import { useUpdatePlaylist } from '@/scripts/db.js';
|
||||
|
||||
|
|
@ -12,8 +11,7 @@ import { useResults, useArtist } from '@/stores/results.js';
|
|||
import { useData, usePlayer } from '@/stores/player.js';
|
||||
import { useI18n } from '@/stores/misc.js';
|
||||
|
||||
const rand = useRand(),
|
||||
data = useData(),
|
||||
const data = useData(),
|
||||
results = useResults(),
|
||||
player = usePlayer(),
|
||||
artist = useArtist(),
|
||||
|
|
@ -193,7 +191,6 @@ button.bi-three-dots-vertical {
|
|||
padding: 0.5rem;
|
||||
}
|
||||
.song-bg {
|
||||
--grad: v-bind('rand');
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
const c = [
|
||||
'linear-gradient(45deg, oklab(0.9 -0.05 -0.04), oklab(0.57 -0.03 -0.09))',
|
||||
//'linear-gradient(45deg, oklab(0.68 -0.02 -0.06), oklab(0.65 0.11 -0.05))',
|
||||
//'linear-gradient(45deg, #a3be8c, #88c0d0)',
|
||||
//'linear-gradient(45deg, #ebcb8b, #a3be8c)',
|
||||
//'linear-gradient(45deg, oklab(0.82 0.09 0.07), oklab(0.58 0.14 0.04)',
|
||||
];
|
||||
|
||||
export function useRand() {
|
||||
const i = Math.floor(Math.random() * c.length);
|
||||
return c[i];
|
||||
}
|
||||
|
||||
export const parseThumb = (url, proxy) =>
|
||||
url && proxy
|
||||
? `${proxy}/vi_webp/${url.replace(
|
||||
'/watch?v=',
|
||||
'',
|
||||
)}/maxresdefault.webp?host=i.ytimg.com`
|
||||
: '/1x1.png';
|
||||
|
|
@ -19,6 +19,14 @@ export function useAutoTheme(t) {
|
|||
: t;
|
||||
}
|
||||
|
||||
export const parseThumb = (url, proxy) =>
|
||||
url && proxy
|
||||
? `${proxy}/vi_webp/${url.replace(
|
||||
'/watch?v=',
|
||||
'',
|
||||
)}/maxresdefault.webp?host=i.ytimg.com`
|
||||
: '/1x1.png';
|
||||
|
||||
export function useVerifyAuth(hash) {
|
||||
return PL_EXP.test(hash);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue