94 lines
No EOL
1.8 KiB
Svelte
94 lines
No EOL
1.8 KiB
Svelte
<script lang="ts">
|
|
let { data } = $props();
|
|
|
|
const names = {
|
|
0: ["B", 0],
|
|
1: ["KB", 0],
|
|
2: ["MB", 1],
|
|
3: ["GB", 2],
|
|
4: ["TB", 3]
|
|
};
|
|
|
|
function size_str(size: number) {
|
|
let iter = 0;
|
|
while (size >= 1000) {
|
|
iter++;
|
|
size = size / 1000;
|
|
}
|
|
return size.toFixed(names[iter][1]).toString() + names[iter][0];
|
|
}
|
|
</script>
|
|
|
|
<div class="file rounded">
|
|
<div class="file-props">
|
|
<p class="filename">{data.name}</p>
|
|
<p class="progress">{size_str(data.size)}</p>
|
|
</div>
|
|
<select>
|
|
<option value="android">Android</option>
|
|
<option value="ios">iOS</option>
|
|
<option value="win">Windows</option>
|
|
<option value="mac">MacOS</option>
|
|
<option value="linux">Linux</option>
|
|
</select>
|
|
</div>
|
|
|
|
<style>
|
|
.file {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
width: 100%;
|
|
margin: 0;
|
|
height: 3rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.file select {
|
|
background-color: #447AB1;
|
|
border: 0;
|
|
}
|
|
|
|
.file-props {
|
|
display: grid;
|
|
}
|
|
|
|
.file-props p {
|
|
margin: 0;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.file {
|
|
background: #5C8DC0;
|
|
}
|
|
|
|
.file select {
|
|
background-color: #447AB1;
|
|
}
|
|
|
|
.filename {
|
|
color: white;
|
|
}
|
|
|
|
.progress {
|
|
color: #D4D4D4;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.file {
|
|
background: #2791FF;
|
|
}
|
|
|
|
.file select {
|
|
background-color: #1780DD;
|
|
}
|
|
|
|
.filename {
|
|
color: white;
|
|
}
|
|
|
|
.progress {
|
|
color: #D4D4D4;
|
|
}
|
|
}
|
|
</style> |