Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 04:39:58 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/FileReceiver: reduce icon size, change icon when dragged over

Browse source
This commit is contained in:
wukko 2024-08-13 16:48:53 +06:00
parent b9958a8102
commit c8904fd939
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/components/misc/FileReceiver.svelte
View file

@ -2,7 +2,8 @@
import { t } from "$lib/i18n/translations";
import Meowbalt from "$components/misc/Meowbalt.svelte";
import IconFileUpload from "@tabler/icons-svelte/IconFileUpload.svelte";
import IconFileImport from "@tabler/icons-svelte/IconFileImport.svelte";
import IconUpload from "@tabler/icons-svelte/IconUpload.svelte";
export let file: File | undefined;
export let draggedOver = false;
@ -38,7 +39,11 @@
</div>
<div class="open-file-icon">
<IconFileUpload />
{#if draggedOver}
<IconUpload />
{:else}
<IconFileImport />
{/if}
</div>
<div class="open-file-text">
@ -60,10 +65,11 @@
<style>
.open-file-button {
position: relative;
flex-direction: column;
gap: 8px;
padding: 32px;
transition: box-shadow 0.2s;
position: relative;
}
.open-file-button:not(:focus-visible) {
@ -131,9 +137,9 @@
}
.open-file-icon :global(svg) {
width: 52px;
height: 52px;
stroke-width: 1.5px;
width: 32px;
height: 32px;
stroke-width: 1.8px;
}
.open-file-text {