63 lines
No EOL
1.3 KiB
Svelte
63 lines
No EOL
1.3 KiB
Svelte
<script>
|
|
import { makeid } from "$lib/functions.js"
|
|
import edit_btn from '$lib/assets/edit.svg';
|
|
import remove_btn from '$lib/assets/delete.svg';
|
|
import ImgButton from "./img_button.svelte";
|
|
let id = makeid(8);
|
|
let { date, name } = $props();
|
|
</script>
|
|
|
|
<div class="queue-item rounded">
|
|
<p>{date}</p>
|
|
<p class="ellipsis">{name}</p>
|
|
<div class="buttons">
|
|
<ImgButton style="edit" name="Изменить" image={edit_btn}/>
|
|
<ImgButton style="remove" name="Удалить" image={remove_btn}/>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Элемент в очереди */
|
|
.queue-item {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-content: center;
|
|
}
|
|
|
|
.queue-item p {
|
|
align-content: center;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
margin-left: auto;
|
|
}
|
|
|
|
:global(.queue-item + .queue-item) {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.queue-item {
|
|
background-color: #5C8DC0;
|
|
color: white;
|
|
}
|
|
|
|
.queue-item p {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.queue-item {
|
|
background-color: #2791FF;
|
|
color: white;
|
|
}
|
|
|
|
.queue-item p {
|
|
color: white;
|
|
}
|
|
}
|
|
</style> |