mirror of
https://github.com/immich-app/immich.git
synced 2025-06-23 15:30:51 -04:00
4a0045db44
* feat(web): max grid row height responsive * also gallery-viewer * lint * feat(web): support long-press selection on mobile web * use svelte-gestures * fix test * Bug fix * globalThis * format * revert generator * Testing * bad merge * Fix typo/tap on thumbnail * feat: shrink header on small screens (#16909) * feat(web): shrink header on small screens * fix test * test * Fix test * Revert user-page-layout chagne * Restore icons sizes, make consistent, improve logo responsiveness * remove 4 more pix, lint * lint * chore --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com> * Revert "Testing" This reverts commit 442f11c9e1538809f9208abcdff71a58b510ca98. --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
52 lines
1.3 KiB
Svelte
52 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { t } from 'svelte-i18n';
|
|
import ImmichLogo from '../immich-logo.svelte';
|
|
|
|
interface Props {
|
|
centered?: boolean;
|
|
logoSize?: 'sm' | 'lg';
|
|
}
|
|
|
|
let { centered = false, logoSize = 'sm' }: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 rounded-lg bg-clip-padding border border-transparent relative supporter-effect"
|
|
class:place-content-center={centered}
|
|
>
|
|
<ImmichLogo class={logoSize === 'sm' ? 'h-6' : 'h-8'} noText />
|
|
<p class="dark:text-gray-100">{$t('purchase_account_info')}</p>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.supporter-effect::after {
|
|
@apply absolute inset-0 rounded-lg opacity-0 transition-opacity content-[''];
|
|
}
|
|
|
|
.supporter-effect:hover::after {
|
|
@apply opacity-100;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(16, 132, 254, 0.25),
|
|
rgba(229, 125, 175, 0.25),
|
|
rgba(254, 36, 29, 0.25),
|
|
rgba(255, 183, 0, 0.25),
|
|
rgba(22, 193, 68, 0.25)
|
|
);
|
|
animation: gradient 10s ease infinite;
|
|
background-size: 400% 400%;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
</style>
|