RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: card fixed size, blur 

ive been working on this for ages based on mock, i dont know whats up with certain issues

i hate web dev!
This commit is contained in:
JovannMC 2025-06-05 16:07:08 +03:00
parent 59e79521f2
commit cc2e4f1195
No known key found for this signature in database
1 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/routes/+page.svelte
View File

@ -97,7 +97,7 @@
<div class="flex gap-4 mt-8 md:flex-row flex-col"> <div class="flex gap-4 mt-8 md:flex-row flex-col">
{#each Object.entries(status) as [key, s]} {#each Object.entries(status) as [key, s]}
{@const Icon = s.icon} {@const Icon = s.icon}
<div class="file-category-card w-full flex flex-col"> <div class="file-category-card">
<div class="file-category-card-inner"> <div class="file-category-card-inner">
<div <div
class={clsx("icon-container", { class={clsx("icon-container", {
@ -112,15 +112,19 @@
<span>{key}</span> <span>{key}</span>
</div> </div>
<div class="file-category-card-content flex-grow"> <div class="file-category-card-content">
{#if key === "Video"} {#if key === "Video"}
<p> <p
Video uploads to a server for processing by class="flex items-center justify-center gap-2 h-full"
default, learn how to set it up locally <a >
target="_blank" <Check size="20" />
<a
class="underline text-foreground"
href="https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT" href="https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT"
>here</a target="_blank"
>. rel="noopener noreferrer"
>Server supported</a
>
</p> </p>
{:else} {:else}
<p <p
@ -163,6 +167,11 @@
</span> </span>
</p> </p>
</div> </div>
<!-- Blur at the bottom of the card -->
<div
class="absolute bottom-0 left-0 w-full h-24 z-10 pointer-events-none"
style="background: linear-gradient(to bottom, transparent, var(--bg) 100%)"
></div>
</div> </div>
{/each} {/each}
</div> </div>
@ -171,7 +180,7 @@
<style> <style>
.file-category-card { .file-category-card {
@apply bg-panel rounded-2xl p-5 shadow-panel; @apply relative bg-panel h-[250px] w-full flex flex-col rounded-2xl p-5 shadow-panel;
} }
.file-category-card p { .file-category-card p {
@ -183,7 +192,10 @@
} }
.file-category-card-content { .file-category-card-content {
@apply flex flex-col text-center justify-between; @apply flex flex-col text-center overflow-y-auto gap-2;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
scrollbar-gutter: auto;
} }
.icon-container { .icon-container {