@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<ContextMenu />
|
||||
<Modal />
|
||||
<Notification />
|
||||
<section
|
||||
id="app-grid"
|
||||
:class="{
|
||||
noSidebar: !settings.use_sidebar || !xl,
|
||||
NoSideBorders: !xxl,
|
||||
extendWidth: settings.extend_width && settings.can_extend_width,
|
||||
}"
|
||||
>
|
||||
<LeftSidebar />
|
||||
<NavBar />
|
||||
<div id="acontent" v-element-size="updateContentElemSize">
|
||||
<router-view />
|
||||
</div>
|
||||
<RightSideBar v-if="settings.use_sidebar && xl" />
|
||||
<BottomBar />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// @libraries
|
||||
import { vElementSize } from "@vueuse/components";
|
||||
import { onStartTyping } from "@vueuse/core";
|
||||
import { onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
// @stores
|
||||
import { content_width } from "@/stores/content-width";
|
||||
import useContextStore from "@/stores/context";
|
||||
import useModalStore from "@/stores/modal";
|
||||
import useQStore from "@/stores/queue";
|
||||
import useSettingsStore from "@/stores/settings";
|
||||
|
||||
// @utils
|
||||
import handleShortcuts from "@/composables/useKeyboard";
|
||||
import { readLocalStorage, writeLocalStorage } from "@/utils";
|
||||
import { xl, xxl } from "./composables/useBreakpoints";
|
||||
|
||||
// @small-components
|
||||
import ContextMenu from "@/components/ContextMenu.vue";
|
||||
import Modal from "@/components/modal.vue";
|
||||
import Notification from "@/components/Notification.vue";
|
||||
|
||||
// @app-grid-components
|
||||
import BottomBar from "@/components/BottomBar.vue";
|
||||
import NavBar from "@/components/nav/NavBar.vue";
|
||||
import RightSideBar from "@/components/RightSideBar/Main.vue";
|
||||
import LeftSidebar from "./components/LeftSidebar/index.vue";
|
||||
|
||||
const queue = useQStore();
|
||||
const router = useRouter();
|
||||
const modal = useModalStore();
|
||||
const settings = useSettingsStore();
|
||||
|
||||
queue.readQueue();
|
||||
handleShortcuts(useQStore);
|
||||
|
||||
router.afterEach(() => {
|
||||
(document.getElementById("acontent") as HTMLElement).scrollTo(0, 0);
|
||||
});
|
||||
|
||||
onStartTyping((e) => {
|
||||
if (e.ctrlKey) {
|
||||
console.log("ctrl pressed");
|
||||
}
|
||||
|
||||
const elem = document.getElementById("globalsearch") as HTMLInputElement;
|
||||
elem.focus();
|
||||
elem.value = "";
|
||||
});
|
||||
|
||||
function updateContentElemSize({ width }: { width: number }) {
|
||||
content_width.value = width;
|
||||
}
|
||||
|
||||
function handleWelcomeModal() {
|
||||
let welcomeShowCount = readLocalStorage("shown-welcome-message");
|
||||
|
||||
if (!welcomeShowCount) {
|
||||
welcomeShowCount = 0;
|
||||
}
|
||||
|
||||
if (welcomeShowCount < 2) {
|
||||
modal.showWelcomeModal();
|
||||
writeLocalStorage("shown-welcome-message", welcomeShowCount + 1);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleWelcomeModal();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./assets/scss/mixins.scss";
|
||||
|
||||
.l-sidebar {
|
||||
position: relative;
|
||||
|
||||
.withlogo {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.l-album-art {
|
||||
width: calc(100% - 2rem);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.r-sidebar {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M 39.486328 6.9785156 A 1.50015 1.50015 0 0 0 38.439453 7.4394531 L 24 21.878906 L 9.5605469 7.4394531 A 1.50015 1.50015 0 0 0 8.484375 6.984375 A 1.50015 1.50015 0 0 0 7.4394531 9.5605469 L 21.878906 24 L 7.4394531 38.439453 A 1.50015 1.50015 0 1 0 9.5605469 40.560547 L 24 26.121094 L 38.439453 40.560547 A 1.50015 1.50015 0 1 0 40.560547 38.439453 L 26.121094 24 L 40.560547 9.5605469 A 1.50015 1.50015 0 0 0 39.486328 6.9785156 z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 533 B |
@@ -1,4 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.02445 6.1448H25.1201C25.6925 6.1448 26.1638 5.68309 26.1638 5.11075C26.1638 4.53841 25.6925 4.0863 25.1201 4.0863H3.02445C2.45211 4.0863 2 4.53841 2 5.11075C2 5.68309 2.45211 6.1448 3.02445 6.1448ZM3.02445 12.2758H25.1201C25.6925 12.2758 26.1638 11.8216 26.1638 11.2493C26.1638 10.6769 25.6925 10.2152 25.1201 10.2152H3.02445C2.45211 10.2152 2 10.6769 2 11.2493C2 11.8216 2.45211 12.2758 3.02445 12.2758ZM16.8493 18.4144H25.1201C25.6925 18.4144 26.1638 17.9623 26.1638 17.3899C26.1638 16.8059 25.6925 16.3538 25.1201 16.3538H16.8493C16.2748 16.3538 15.8227 16.8059 15.8227 17.3899C15.8227 17.9623 16.2748 18.4144 16.8493 18.4144ZM16.8493 24.5529H25.1201C25.6925 24.5529 26.1638 24.1008 26.1638 23.5285C26.1638 22.9465 25.6925 22.4944 25.1201 22.4944H16.8493C16.2748 22.4944 15.8227 22.9465 15.8227 23.5285C15.8227 24.1008 16.2748 24.5529 16.8493 24.5529Z" fill="white"/>
|
||||
<path d="M2.01172 16.5307V18.9767C2.01172 20.8306 3.22578 21.9134 5.07218 21.9134H8.22969V23.1195C8.22969 24.132 9.19531 24.51 9.97156 23.8807L13.314 21.188C13.8155 20.7919 13.8198 20.0881 13.314 19.6824L9.97156 17.0014C9.21664 16.403 8.22969 16.7715 8.22969 17.7563V18.9514H5.42069C5.12585 18.9514 4.97374 18.7779 4.97374 18.4927V16.5054C4.97374 15.5204 4.4014 14.8658 3.48687 14.8658C2.57445 14.8658 2.01172 15.495 2.01172 16.5307Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.83789 11.4512C5.83789 14.958 8.20215 17.3662 12.1836 17.3662H17.7383L19.7686 17.2783L18.2393 18.5703L16.0068 20.75C15.8311 20.9258 15.7168 21.1367 15.7168 21.4268C15.7168 21.9805 16.0947 22.3848 16.6748 22.3848C16.9209 22.3848 17.1934 22.2705 17.3779 22.0771L22.4229 17.1113C22.625 16.918 22.7305 16.6543 22.7305 16.3906C22.7305 16.1182 22.625 15.8545 22.4229 15.6611L17.3779 10.7041C17.1934 10.5107 16.9209 10.3965 16.6748 10.3965C16.0947 10.3965 15.7168 10.8008 15.7168 11.3457C15.7168 11.6357 15.8311 11.8555 16.0068 12.0312L18.2393 14.2021L19.7686 15.5029L17.7383 15.4062H12.1396C9.32715 15.4062 7.77148 13.8066 7.77148 11.5215C7.77148 9.24512 9.32715 7.5752 12.1396 7.5752H14.1963C14.7852 7.5752 15.1895 7.13574 15.1895 6.59082C15.1895 6.05469 14.7764 5.61523 14.1963 5.61523H12.0693C8.14941 5.61523 5.83789 7.93555 5.83789 11.4512Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 971 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.9912 22.7422C18.9746 22.7422 23.0879 18.6289 23.0879 13.6543C23.0879 8.67969 18.9658 4.56641 13.9824 4.56641C9.00781 4.56641 4.90332 8.67969 4.90332 13.6543C4.90332 18.6289 9.0166 22.7422 13.9912 22.7422ZM13.9912 20.9316C9.95703 20.9316 6.73145 17.6885 6.73145 13.6543C6.73145 9.62012 9.95703 6.38574 13.9824 6.38574C18.0166 6.38574 21.2598 9.62012 21.2686 13.6543C21.2773 17.6885 18.0254 20.9316 13.9912 20.9316ZM14 17.0996C15.9072 17.0996 17.4453 15.5615 17.4453 13.6455C17.4453 11.7471 15.9072 10.2002 14 10.2002C12.084 10.2002 10.5459 11.7471 10.5459 13.6455C10.5459 15.5615 12.084 17.0996 14 17.0996Z" fill="#fff"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 737 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.69434 13.6455C5.69434 13.9092 5.80859 14.1641 6.01074 14.3574L11.8027 20.1494C12.0137 20.3516 12.251 20.4482 12.4883 20.4482C13.042 20.4482 13.4375 20.0527 13.4375 19.5254C13.4375 19.2529 13.332 19.0156 13.1562 18.8486L11.1875 16.8535L8.58594 14.4805L10.6426 14.6035H21.3301C21.9014 14.6035 22.3057 14.208 22.3057 13.6455C22.3057 13.0742 21.9014 12.6875 21.3301 12.6875H10.6426L8.59473 12.8105L11.1875 10.4375L13.1562 8.44238C13.332 8.2666 13.4375 8.0293 13.4375 7.75684C13.4375 7.22949 13.042 6.84277 12.4883 6.84277C12.251 6.84277 12.0137 6.93066 11.7852 7.15039L6.01074 12.9336C5.80859 13.1182 5.69434 13.3818 5.69434 13.6455Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 763 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 13.8477C16.127 13.8477 17.8496 11.9668 17.8496 9.66406C17.8496 7.39648 16.127 5.59473 14 5.59473C11.8818 5.59473 10.1416 7.42285 10.1504 9.68164C10.1592 11.9756 11.873 13.8477 14 13.8477ZM14 12.3096C12.7871 12.3096 11.7588 11.1582 11.7588 9.68164C11.75 8.24023 12.7783 7.13281 14 7.13281C15.2305 7.13281 16.2412 8.22266 16.2412 9.66406C16.2412 11.1406 15.2217 12.3096 14 12.3096ZM8.51562 22.0215H19.4756C20.9961 22.0215 21.7256 21.5381 21.7256 20.501C21.7256 18.084 18.7109 14.8672 14 14.8672C9.28906 14.8672 6.26562 18.084 6.26562 20.501C6.26562 21.5381 6.99512 22.0215 8.51562 22.0215ZM8.24316 20.4834C8.03223 20.4834 7.95312 20.4131 7.95312 20.2549C7.95312 18.9102 10.124 16.4053 14 16.4053C17.8672 16.4053 20.0381 18.9102 20.0381 20.2549C20.0381 20.4131 19.959 20.4834 19.748 20.4834H8.24316Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 931 B |
@@ -1,3 +0,0 @@
|
||||
<svg viewBox="1.533 3.788 500.308 492.43" width="500.308" height="492.43">
|
||||
<path d="M 479.264 3.794 C 473.442 3.93 467.912 6.326 463.879 10.46 L 251.687 219.318 L 39.492 10.46 C 35.341 6.254 29.636 3.879 23.678 3.879 C 6.707 3.883 -3.894 21.968 4.593 36.431 C 5.611 38.163 6.864 39.748 8.323 41.141 L 220.515 249.998 L 8.323 458.855 C -3.92 470.424 1.153 490.698 17.453 495.348 C 25.327 497.594 33.816 495.355 39.492 489.535 L 251.687 280.678 L 463.879 489.535 C 475.633 501.584 496.231 496.592 500.955 480.547 C 503.238 472.799 500.962 464.443 495.05 458.855 L 282.856 249.998 L 495.05 41.141 C 507.293 29.574 502.225 9.3 485.925 4.647 C 483.762 4.03 481.514 3.741 479.264 3.794 Z" style="fill: rgb(255, 255, 255);"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 734 B |
@@ -1,4 +0,0 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.0001 1.66666C5.40508 1.66666 1.66675 5.405 1.66675 10C1.66675 14.595 5.40508 18.3333 10.0001 18.3333C14.5951 18.3333 18.3334 14.595 18.3334 10C18.3334 5.405 14.5951 1.66666 10.0001 1.66666ZM10.0001 16.6667C6.32425 16.6667 3.33341 13.6758 3.33341 10C3.33341 6.32416 6.32425 3.33333 10.0001 3.33333C13.6759 3.33333 16.6667 6.32416 16.6667 10C16.6667 13.6758 13.6759 16.6667 10.0001 16.6667Z" fill="white"/>
|
||||
<path d="M10.8334 5.83334H9.16675V10.345L11.9109 13.0892L13.0892 11.9108L10.8334 9.655V5.83334Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 633 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.96582 22.7686H18.043C19.3965 22.7686 20.2666 21.9512 20.3369 20.5977L20.9258 7.94141H21.8926C22.3408 7.94141 22.6836 7.58984 22.6836 7.15039C22.6836 6.71094 22.332 6.37695 21.8926 6.37695H17.9902V5.05859C17.9902 3.70508 17.1289 2.91406 15.6611 2.91406H12.3213C10.8535 2.91406 9.99219 3.70508 9.99219 5.05859V6.37695H6.10742C5.66797 6.37695 5.31641 6.71973 5.31641 7.15039C5.31641 7.59863 5.66797 7.94141 6.10742 7.94141H7.07422L7.66309 20.5977C7.7334 21.96 8.59473 22.7686 9.96582 22.7686ZM11.6357 5.1377C11.6357 4.68945 11.9521 4.39941 12.4355 4.39941H15.5469C16.0303 4.39941 16.3467 4.68945 16.3467 5.1377V6.37695H11.6357V5.1377ZM10.1416 21.1953C9.6582 21.1953 9.30664 20.835 9.28027 20.3164L8.69141 7.94141H19.2822L18.7109 20.3164C18.6934 20.8438 18.3506 21.1953 17.8496 21.1953H10.1416ZM11.4072 19.7803C11.7852 19.7803 12.0225 19.543 12.0137 19.1914L11.75 9.99805C11.7412 9.64648 11.4951 9.41797 11.1348 9.41797C10.7656 9.41797 10.5283 9.65527 10.5371 10.0068L10.8008 19.2002C10.8096 19.5518 11.0557 19.7803 11.4072 19.7803ZM14 19.7803C14.3691 19.7803 14.624 19.5518 14.624 19.2002V10.0068C14.624 9.65527 14.3691 9.41797 14 9.41797C13.6309 9.41797 13.3848 9.65527 13.3848 10.0068V19.2002C13.3848 19.5518 13.6309 19.7803 14 19.7803ZM16.5928 19.7891C16.9443 19.7891 17.1904 19.5518 17.1992 19.2002L17.4629 10.0068C17.4717 9.65527 17.2344 9.42676 16.8652 9.42676C16.5049 9.42676 16.2588 9.65527 16.25 10.0068L15.9863 19.2002C15.9775 19.543 16.2148 19.7891 16.5928 19.7891Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.6514 13.6543C19.6426 13.3467 19.5283 13.083 19.291 12.8457L12.4531 6.15723C12.251 5.96387 12.0137 5.8584 11.7236 5.8584C11.1348 5.8584 10.6777 6.31543 10.6777 6.9043C10.6777 7.18555 10.792 7.44922 10.9941 7.65137L17.1465 13.6543L10.9941 19.6572C10.792 19.8594 10.6777 20.1143 10.6777 20.4043C10.6777 20.9932 11.1348 21.4502 11.7236 21.4502C12.0049 21.4502 12.251 21.3447 12.4531 21.1514L19.291 14.4541C19.5371 14.2256 19.6514 13.9619 19.6514 13.6543Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 585 B |
@@ -1,6 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8.342C20 8.07556 19.9467 7.81181 19.8433 7.56624C19.7399 7.32068 19.5885 7.09824 19.398 6.912L14.958 2.57C14.5844 2.20466 14.0826 2.00007 13.56 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V4Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 13H15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 17H12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14 2V6C14 6.53043 14.2107 7.03914 14.5858 7.41421C14.9609 7.78929 15.4696 8 16 8H20" stroke="white" stroke-width="2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 931 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 5.6875C5.55231 5.6875 4.375 6.86481 4.375 8.3125V19.6875C4.375 21.1352 5.55231 22.3125 7 22.3125H21C22.4477 22.3125 23.625 21.1352 23.625 19.6875V10.0625C23.625 8.61481 22.4477 7.4375 21 7.4375H12.7328C12.3369 7.4375 11.9492 7.30146 11.6407 7.05383L10.8914 6.45483C10.2732 5.96046 9.49659 5.6875 8.70471 5.6875H7ZM7 7.4375H8.70471C9.10065 7.4375 9.48873 7.57354 9.79761 7.82117L10.5461 8.42017C11.1643 8.91454 11.9409 9.1875 12.7328 9.1875H21C21.4826 9.1875 21.875 9.57994 21.875 10.0625V10.5H6.125V8.3125C6.125 7.82994 6.51744 7.4375 7 7.4375ZM6.125 12.25H21.875V19.6875C21.875 20.1701 21.4826 20.5625 21 20.5625H7C6.51744 20.5625 6.125 20.1701 6.125 19.6875V12.25ZM15.8705 13.3634L13.8214 13.7787C13.6705 13.8093 13.5625 13.9347 13.5625 14.0795V17.1086C13.5625 17.2556 13.4371 17.3717 13.025 17.4513C12.3867 17.5751 11.8125 17.8221 11.8125 18.5903C11.8125 18.9701 12.1575 19.4551 13.025 19.4551C13.7806 19.4551 14.4375 18.8381 14.4375 17.9631V15.6073C14.4375 15.5106 14.509 15.4271 14.6101 15.4065L15.9286 15.1382C16.0795 15.1076 16.1875 14.9822 16.1875 14.8374V13.6035C16.1875 13.4469 16.0337 13.3302 15.8705 13.3634Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.1807 6.99219H13.0332C12.4004 6.99219 12.0225 6.85156 11.5303 6.44727L11.0381 6.04297C10.4141 5.5332 9.95703 5.36621 9.03418 5.36621H6.54688C4.89453 5.36621 3.91895 6.33301 3.91895 8.1875V10.6484H24.0723V9.85742C24.0723 7.97656 23.0791 6.99219 21.1807 6.99219ZM6.81055 21.7666H21.3916C23.0879 21.7666 24.0723 20.7822 24.0723 18.9014V11.9141H3.91895V18.9014C3.91895 20.791 4.91211 21.7666 6.81055 21.7666Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 538 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.81055 21.7666H21.3916C23.0879 21.7666 24.0723 20.7822 24.0723 18.9014V9.85742C24.0723 7.97656 23.0791 6.99219 21.1807 6.99219H13.0332C12.4004 6.99219 12.0225 6.85156 11.5303 6.44727L11.0381 6.04297C10.4141 5.5332 9.95703 5.36621 9.03418 5.36621H6.54688C4.89453 5.36621 3.91895 6.33301 3.91895 8.1875V18.9014C3.91895 20.791 4.91211 21.7666 6.81055 21.7666ZM5.66797 8.33691C5.66797 7.53711 6.11621 7.11523 6.89844 7.11523H8.56836C9.19238 7.11523 9.56152 7.26465 10.0625 7.66895L10.5547 8.08203C11.1699 8.57422 11.6445 8.75 12.5674 8.75H21.0664C21.875 8.75 22.3232 9.17188 22.3232 10.0156V10.5342H5.66797V8.33691ZM6.9248 20.0176C6.11621 20.0176 5.66797 19.5957 5.66797 18.7432V12.0723H22.3232V18.752C22.3232 19.5957 21.875 20.0176 21.0664 20.0176H6.9248Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 885 B |
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24px" height="24px">
|
||||
<g id="surface88165820">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 5 3 C 3.90625 3 3 3.90625 3 5 L 3 9 C 3 10.09375 3.90625 11 5 11 L 9 11 C 10.09375 11 11 10.09375 11 9 L 11 5 C 11 3.90625 10.09375 3 9 3 Z M 15 3 C 13.90625 3 13 3.90625 13 5 L 13 9 C 13 10.09375 13.90625 11 15 11 L 19 11 C 20.09375 11 21 10.09375 21 9 L 21 5 C 21 3.90625 20.09375 3 19 3 Z M 5 5 L 9 5 L 9 9 L 5 9 Z M 15 5 L 19 5 L 19 9 L 15 9 Z M 5 13 C 3.90625 13 3 13.90625 3 15 L 3 19 C 3 20.09375 3.90625 21 5 21 L 9 21 C 10.09375 21 11 20.09375 11 19 L 11 15 C 11 13.90625 10.09375 13 9 13 Z M 15 13 C 13.90625 13 13 13.90625 13 15 L 13 19 C 13 20.09375 13.90625 21 15 21 L 19 21 C 20.09375 21 21 20.09375 21 19 L 21 15 C 21 13.90625 20.09375 13 19 13 Z M 5 15 L 9 15 L 9 19 L 5 19 Z M 15 15 L 19 15 L 19 19 L 15 19 Z M 15 15 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="rgb(250, 33, 33)" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.9912 22.1445C14.2197 22.1445 14.5449 21.9775 14.8086 21.8105C19.7217 18.6465 22.8682 14.9375 22.8682 11.1758C22.8682 7.9502 20.6445 5.7002 17.8408 5.7002C16.0918 5.7002 14.7822 6.66699 13.9912 8.11719C13.2178 6.67578 11.8994 5.7002 10.1504 5.7002C7.34668 5.7002 5.11426 7.9502 5.11426 11.1758C5.11426 14.9375 8.26074 18.6465 13.1738 21.8105C13.4463 21.9775 13.7715 22.1445 13.9912 22.1445Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 521 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" fill="rgb(250, 33, 33)" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.09668 11.1846C5.09668 14.9375 8.25195 18.6465 13.1562 21.8105C13.4287 21.9863 13.7627 22.1621 13.9912 22.1621C14.2197 22.1621 14.5537 21.9863 14.8262 21.8105C19.7393 18.6465 22.8857 14.9375 22.8857 11.1846C22.8857 7.94141 20.6445 5.69141 17.7705 5.69141C16.0918 5.69141 14.7822 6.45605 13.9912 7.61621C13.2178 6.46484 11.8994 5.69141 10.2207 5.69141C7.33789 5.69141 5.09668 7.94141 5.09668 11.1846ZM6.90723 11.1758C6.90723 8.96094 8.36621 7.45801 10.3262 7.45801C11.9082 7.45801 12.7959 8.41602 13.3496 9.25098C13.5957 9.61133 13.7627 9.72559 13.9912 9.72559C14.2285 9.72559 14.3779 9.60254 14.6328 9.25098C15.2305 8.43359 16.083 7.45801 17.6562 7.45801C19.625 7.45801 21.084 8.96094 21.084 11.1758C21.084 14.2695 17.8672 17.6973 14.1582 20.1582C14.0791 20.2109 14.0264 20.2461 13.9912 20.2461C13.9561 20.2461 13.9033 20.2109 13.833 20.1582C10.124 17.6973 6.90723 14.2695 6.90723 11.1758Z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1020 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.25098 13.2146C3.25098 13.6716 3.60254 14.0671 4.16504 14.0671C4.4375 14.0671 4.68359 13.9177 4.90332 13.7419L5.90527 12.8982V21.072C5.90527 22.3728 6.6875 23.1462 8.03223 23.1462H19.9238C21.2598 23.1462 22.0508 22.3728 22.0508 21.072V12.8542L23.1055 13.7419C23.3164 13.9177 23.5625 14.0671 23.835 14.0671C24.3535 14.0671 24.749 13.7419 24.749 13.2322C24.749 12.9333 24.6348 12.696 24.4062 12.5027L22.0508 10.5164V6.77222C22.0508 6.37671 21.7959 6.13062 21.4004 6.13062H20.1875C19.8008 6.13062 19.5371 6.37671 19.5371 6.77222V8.40698L15.2568 4.81226C14.4922 4.17065 13.5254 4.17065 12.7607 4.81226L3.60254 12.5027C3.36523 12.696 3.25098 12.9597 3.25098 13.2146ZM16.5312 15.6404C16.5312 15.2273 16.2676 14.9636 15.8545 14.9636H12.1631C11.75 14.9636 11.4775 15.2273 11.4775 15.6404V21.3972H8.49805C7.95312 21.3972 7.6543 21.0896 7.6543 20.5359V11.4304L13.6221 6.42065C13.8682 6.20972 14.1494 6.20972 14.3955 6.42065L20.293 11.3777V20.5359C20.293 21.0896 19.9941 21.3972 19.4492 21.3972H16.5312V15.6404Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,4 +0,0 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 1.875C7.75195 1.875 1.875 7.75195 1.875 15C1.875 22.248 7.75195 28.125 15 28.125C22.248 28.125 28.125 22.248 28.125 15C28.125 7.75195 22.248 1.875 15 1.875ZM15 25.8984C8.98242 25.8984 4.10156 21.0176 4.10156 15C4.10156 8.98242 8.98242 4.10156 15 4.10156C21.0176 4.10156 25.8984 8.98242 25.8984 15C25.8984 21.0176 21.0176 25.8984 15 25.8984Z" fill="white"/>
|
||||
<path d="M13.5938 9.84375C13.5938 10.2167 13.7419 10.5744 14.0056 10.8381C14.2694 11.1018 14.627 11.25 15 11.25C15.373 11.25 15.7306 11.1018 15.9944 10.8381C16.2581 10.5744 16.4062 10.2167 16.4062 9.84375C16.4062 9.47079 16.2581 9.1131 15.9944 8.84938C15.7306 8.58566 15.373 8.4375 15 8.4375C14.627 8.4375 14.2694 8.58566 14.0056 8.84938C13.7419 9.1131 13.5938 9.47079 13.5938 9.84375V9.84375ZM15.7031 13.125H14.2969C14.168 13.125 14.0625 13.2305 14.0625 13.3594V21.3281C14.0625 21.457 14.168 21.5625 14.2969 21.5625H15.7031C15.832 21.5625 15.9375 21.457 15.9375 21.3281V13.3594C15.9375 13.2305 15.832 13.125 15.7031 13.125Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="375" viewBox="0 0 375 375" height="375" version="1.0"><defs><clipPath id="a"><path d="M 73.445312 66 L 301 66 L 301 308.839844 L 73.445312 308.839844 Z M 73.445312 66"/></clipPath></defs><path fill="#FFF" d="M 187.5 0 C 83.945312 0 0 83.945312 0 187.5 C 0 291.054688 83.945312 375 187.5 375 C 291.054688 375 375 291.054688 375 187.5 C 375 83.945312 291.054688 0 187.5 0 Z M 187.5 0"/><g clip-path="url(#a)"><path fill="#4AD168" d="M 88.226562 152.753906 C 78.492188 138.632812 73.621094 118.523438 73.621094 92.417969 L 73.621094 66.613281 L 143.804688 66.613281 L 276.328125 211.664062 C 283.808594 219.96875 288.796875 226.96875 291.289062 232.664062 C 293.785156 238.359375 295.625 243.578125 296.8125 248.324219 C 299.425781 257.816406 300.730469 269.503906 300.730469 283.386719 L 300.730469 308.835938 L 232.507812 308.835938 L 88.761719 152.753906 Z M 223.601562 142.609375 C 223.601562 109.980469 228.648438 88.742188 238.742188 78.894531 C 244.085938 73.671875 251.035156 70.351562 259.585938 68.925781 C 268.253906 67.382812 278.761719 66.613281 291.113281 66.613281 L 300.730469 66.613281 L 300.730469 94.734375 C 300.730469 120.003906 294.082031 136.914062 280.78125 145.457031 C 271.28125 151.625 255.308594 154.710938 232.867188 154.710938 L 223.601562 154.710938 Z M 73.621094 281.074219 C 73.621094 255.800781 80.273438 238.832031 93.570312 230.171875 C 103.070312 224.121094 119.042969 221.09375 141.488281 221.09375 L 150.75 221.09375 L 150.75 233.199219 C 150.75 266.183594 145.703125 287.363281 135.609375 296.734375 C 128.722656 303.140625 118.6875 306.9375 105.507812 308.125 C 98.855469 308.601562 91.433594 308.835938 83.242188 308.835938 L 73.621094 308.835938 Z M 73.621094 281.074219"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="60" height="50" viewBox="0 0 60 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M57.6854 3.09975C56.5653 1.69314 54.4815 0 50.7566 0C46.146 0 40.2851 3.0737 35.1276 8.20522C34.3722 8.93457 33.6949 9.66392 33.0437 10.4193V5.20966C33.0437 4.38065 32.7144 3.58559 32.1282 2.99939C31.542 2.41319 30.7469 2.08386 29.9179 2.08386C29.0889 2.08386 28.2938 2.41319 27.7076 2.99939C27.1214 3.58559 26.7921 4.38065 26.7921 5.20966V10.4193C26.1409 9.66392 25.4636 8.93457 24.7082 8.20522C19.5507 3.0737 13.6898 0 9.07926 0C5.35435 0 3.27048 1.69314 2.15041 3.09975C-1.28797 7.50191 -0.0116033 15.082 1.88992 22.636C3.32258 28.4187 6.31814 31.1538 9.13135 32.4041C8.40766 34.0087 8.03468 35.7493 8.03733 37.5096C8.03992 40.0481 8.81518 42.5258 10.26 44.6131C11.7049 46.7004 13.7509 48.2984 16.1259 49.1947C18.501 50.091 21.0927 50.2432 23.5563 49.6308C26.0199 49.0185 28.2388 47.6708 29.9179 45.7669C31.8971 48.0002 34.6097 49.4521 37.5658 49.8601C40.5219 50.2681 43.5265 49.6054 46.0366 47.9918C48.5468 46.3781 50.3971 43.9198 51.2531 41.0611C52.1092 38.2024 51.9146 35.1318 50.7045 32.4041C53.5177 31.1538 56.5132 28.4187 57.9459 22.636C59.8474 15.082 61.1238 7.50191 57.6854 3.09975V3.09975ZM20.5405 43.7612C18.9172 43.8013 17.3419 43.2082 16.1482 42.1074C14.9544 41.0066 14.2358 39.4846 14.1444 37.8633C14.053 36.2421 14.596 34.6489 15.6585 33.4209C16.721 32.1929 18.2197 31.4266 19.8372 31.284C20.2452 31.2419 20.6408 31.1192 21.0011 30.9231C21.3613 30.727 21.6791 30.4613 21.9359 30.1415C22.1927 29.8217 22.3835 29.4541 22.4972 29.06C22.6109 28.6659 22.6453 28.2531 22.5983 27.8456C22.5066 27.0244 22.0934 26.2728 21.449 25.7554C20.8047 25.238 19.9817 24.9968 19.16 25.0845C17.12 25.2999 15.1671 26.0255 13.4814 27.1944C11.4497 27.0121 9.10531 25.7097 7.93313 21.1252C6.0316 13.4409 5.74507 8.67409 7.09959 6.9549C7.25588 6.74651 7.62055 6.25159 9.07926 6.25159C11.9446 6.25159 16.477 8.83038 20.3061 12.6334C24.1352 16.4365 26.7921 20.9949 26.7921 23.9644V37.5096C26.7853 39.1655 26.1244 40.7516 24.9535 41.9225C23.7826 43.0935 22.1964 43.7543 20.5405 43.7612ZM51.9027 21.1252C50.7305 25.7097 48.3862 27.0121 46.3544 27.1944C44.6687 26.0255 42.7158 25.2999 40.6759 25.0845C40.2538 25.0083 39.8206 25.0198 39.4032 25.1182C38.9858 25.2166 38.5932 25.3999 38.2496 25.6566C37.9061 25.9133 37.619 26.2379 37.4063 26.6103C37.1936 26.9827 37.0598 27.3948 37.0133 27.8212C36.9667 28.2475 37.0084 28.6788 37.1356 29.0883C37.2629 29.4978 37.4731 29.8768 37.7531 30.2016C38.0331 30.5264 38.377 30.7901 38.7633 30.9763C39.1496 31.1626 39.5701 31.2673 39.9986 31.284C41.1968 31.4197 42.3302 31.899 43.2622 32.6642C44.1942 33.4294 44.885 34.4478 45.2514 35.5966C45.6177 36.7455 45.644 37.9758 45.327 39.1393C45.01 40.3027 44.3633 41.3497 43.4648 42.154C42.5663 42.9582 41.4544 43.4855 40.2631 43.6722C39.0718 43.8588 37.8519 43.697 36.7504 43.2061C35.649 42.7152 34.713 41.9163 34.0553 40.9055C33.3977 39.8948 33.0463 38.7154 33.0437 37.5096V23.9644C33.0437 20.9949 35.5964 16.5407 39.5297 12.6334C43.463 8.72618 47.8912 6.25159 50.7566 6.25159C52.2153 6.25159 52.5799 6.74651 52.7362 6.9549C54.0907 8.67409 53.8042 13.4409 51.9027 21.1252Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.1 KiB |
@@ -1,5 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7.04999" cy="12.0498" r="1.25" fill="white"/>
|
||||
<circle cx="12.05" cy="12.0498" r="1.25" fill="white"/>
|
||||
<circle cx="17.05" cy="12.0498" r="1.25" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 273 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.19043 20.7383C8.57715 20.7383 8.91113 20.624 9.28906 20.4043L18.2979 15.1133C18.8164 14.8057 19.1416 14.4453 19.2471 14.0146V20.1143C19.2471 20.6592 19.6777 21.0723 20.2314 21.0723C20.7939 21.0723 21.2246 20.6592 21.2246 20.1143V7.21191C21.2246 6.66699 20.7939 6.25391 20.2314 6.25391C19.6777 6.25391 19.2471 6.66699 19.2471 7.21191V13.3027C19.1416 12.8721 18.8252 12.5293 18.2979 12.2129L9.28906 6.92188C8.90234 6.70215 8.57715 6.58789 8.18164 6.58789C7.4082 6.58789 6.7666 7.16797 6.7666 8.24023V19.0859C6.7666 20.1582 7.41699 20.7383 8.19043 20.7383ZM8.70898 18.708C8.59473 18.708 8.50684 18.6377 8.50684 18.4795V8.84668C8.50684 8.68848 8.59473 8.61816 8.70898 8.61816C8.76172 8.61816 8.82324 8.63574 8.90234 8.67969L16.9707 13.4521C17.0762 13.5049 17.1289 13.5576 17.1289 13.6631C17.1289 13.7598 17.0762 13.8213 16.9707 13.874L8.90234 18.6465C8.82324 18.6904 8.76172 18.708 8.70898 18.708Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.9238 21.0723C11.4775 21.0723 11.9082 20.6592 11.9082 20.1143V7.21191C11.9082 6.66699 11.4775 6.25391 10.9238 6.25391C10.3701 6.25391 9.93945 6.66699 9.93945 7.21191V20.1143C9.93945 20.6592 10.3701 21.0723 10.9238 21.0723ZM17.0674 21.0723C17.6211 21.0723 18.0518 20.6592 18.0518 20.1143V7.21191C18.0518 6.66699 17.6211 6.25391 17.0674 6.25391C16.5137 6.25391 16.083 6.66699 16.083 7.21191V20.1143C16.083 20.6592 16.5137 21.0723 17.0674 21.0723Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 578 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.803 4.385C14.766 2.354 17.45 1.889 19.039 3.478L24.522 8.961C26.111 10.551 25.646 13.234 23.615 14.196L18.225 16.75C17.8189 16.9424 17.5024 17.2836 17.341 17.703L15.752 21.833C15.6474 22.105 15.4764 22.3466 15.2547 22.5359C15.033 22.7251 14.7676 22.8559 14.4825 22.9165C14.1974 22.9771 13.9016 22.9656 13.6221 22.8829C13.3426 22.8002 13.0882 22.649 12.882 22.443L9.75 19.31L4.06 25H3V23.94L8.69 18.25L5.558 15.118C5.352 14.9118 5.20076 14.6575 5.118 14.378C5.03523 14.0986 5.02357 13.8029 5.08406 13.5178C5.14456 13.2327 5.2753 12.9673 5.46441 12.7455C5.65353 12.5238 5.89503 12.3527 6.167 12.248L10.297 10.659C10.717 10.498 11.058 10.181 11.25 9.775L13.803 4.385V4.385ZM17.978 4.539C17.7797 4.34069 17.5367 4.19293 17.2694 4.10817C17.002 4.02341 16.7183 4.00414 16.442 4.05198C16.1656 4.09981 15.9048 4.21335 15.6816 4.38304C15.4583 4.55272 15.2791 4.77357 15.159 5.027L12.606 10.417C12.2487 11.1713 11.615 11.7592 10.836 12.059L6.706 13.648C6.66707 13.6629 6.63247 13.6872 6.60535 13.7188C6.57822 13.7505 6.55944 13.7884 6.55069 13.8291C6.54195 13.8698 6.54353 13.9121 6.55528 13.9521C6.56704 13.9921 6.5886 14.0285 6.618 14.058L13.942 21.382C13.9715 21.4114 14.0078 21.433 14.0477 21.4449C14.0876 21.4567 14.1299 21.4583 14.1706 21.4497C14.2113 21.4411 14.2492 21.4224 14.2809 21.3954C14.3126 21.3684 14.337 21.3339 14.352 21.295L15.941 17.165C16.2405 16.3857 16.8285 15.7515 17.583 15.394L22.973 12.841C23.2266 12.721 23.4476 12.5417 23.6174 12.3184C23.7873 12.095 23.9009 11.8341 23.9487 11.5576C23.9966 11.2812 23.9772 10.9972 23.8923 10.7298C23.8075 10.4624 23.6595 10.2193 23.461 10.021L17.978 4.54V4.539Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,4 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.8493 6.0585H25.1201C25.6925 6.0585 26.1638 5.6064 26.1638 5.02445C26.1638 4.45211 25.6925 4 25.1201 4H16.8493C16.2748 4 15.8227 4.45211 15.8227 5.02445C15.8227 5.6064 16.2748 6.0585 16.8493 6.0585ZM16.8493 12.1991H25.1201C25.6925 12.1991 26.1638 11.747 26.1638 11.163C26.1638 10.5906 25.6925 10.1385 25.1201 10.1385H16.8493C16.2748 10.1385 15.8227 10.5906 15.8227 11.163C15.8227 11.747 16.2748 12.1991 16.8493 12.1991ZM3.02445 18.3376H25.1201C25.6925 18.3376 26.1638 17.8759 26.1638 17.3036C26.1638 16.7312 25.6925 16.277 25.1201 16.277H3.02445C2.45211 16.277 2 16.7312 2 17.3036C2 17.8759 2.45211 18.3376 3.02445 18.3376ZM3.02445 24.4666H25.1201C25.6925 24.4666 26.1638 24.0144 26.1638 23.4421C26.1638 22.8698 25.6925 22.408 25.1201 22.408H3.02445C2.45211 22.408 2 22.8698 2 23.4421C2 24.0144 2.45211 24.4666 3.02445 24.4666Z" fill="white"/>
|
||||
<path d="M2.01172 12.0219C2.01172 13.0576 2.57445 13.6869 3.48687 13.6869C4.4014 13.6869 4.97374 13.0323 4.97374 12.0473V10.06C4.97374 9.77475 5.12585 9.60131 5.42069 9.60131H8.22969V10.7964C8.22969 11.7812 9.21664 12.1497 9.97156 11.5513L13.314 8.8703C13.8198 8.46459 13.8155 7.76077 13.314 7.36467L9.97156 4.67195C9.19531 4.04266 8.22969 4.4207 8.22969 5.43319V6.63929H5.07218C3.22578 6.63929 2.01172 7.7221 2.01172 9.576V12.0219Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.3418 21.3711C9.71094 21.3711 10.0361 21.2393 10.4404 21.002L20.8203 14.999C21.5762 14.5596 21.8926 14.2168 21.8926 13.6631C21.8926 13.1094 21.5762 12.7754 20.8203 12.3271L10.4404 6.32422C10.0361 6.08691 9.71094 5.95508 9.3418 5.95508C8.62109 5.95508 8.11133 6.50879 8.11133 7.37891V19.9473C8.11133 20.8262 8.62109 21.3711 9.3418 21.3711Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 471 B |
|
Before Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -1 +0,0 @@
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="28px" height="28px" baseProfile="basic"><path d="M13,46h16.205c0.338,1.549,1.093,2.903,2.174,4H13c-1.104,0-2-0.895-2-2C11,46.895,11.896,46,13,46z"/><path d="M12.999,38l18.714,0c-1.142,0.918-2.077,2.195-2.486,4L13,42c-1.104,0-2-0.895-2-2C11,38.895,11.895,38,12.999,38z"/><path d="M13,30h28v4H13c-1.104,0-2-0.895-2-2C11,30.895,11.896,30,13,30z"/><path d="M13,22h28v4H13c-1.104,0-2-0.895-2-2C11,22.895,11.896,22,13,22z"/><path d="M13,14h28v4H13c-1.104,0-2-0.895-2-2C11,14.895,11.896,14,13,14z"/><path d="M54.026,9.158C54.997,8.834,56,9.557,56,10.581v7.484c0,0.829-0.511,1.572-1.286,1.868l-5.75,2.199 C48.384,22.353,48,22.911,48,23.532V39c0,8-4.083,11-8.561,11C35.026,50,32,47.754,32,44.079c0-3.39,2.07-4.633,6.224-5.553 c4.067-0.9,5.776-1.327,5.776-4.142V13.942c0-0.861,0.551-1.625,1.368-1.897L54.026,9.158z" /></svg>
|
||||
|
Before Width: | Height: | Size: 902 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.16016 9.50586C6.85449 9.50586 7.4082 8.95215 7.4082 8.25781C7.4082 7.57227 6.85449 7.00977 6.16016 7.00977C5.47461 7.00977 4.91211 7.57227 4.91211 8.25781C4.91211 8.95215 5.47461 9.50586 6.16016 9.50586ZM10.291 9.10156H22.2266C22.7012 9.10156 23.0791 8.73242 23.0791 8.25781C23.0791 7.7832 22.71 7.41406 22.2266 7.41406H10.291C9.8252 7.41406 9.44727 7.7832 9.44727 8.25781C9.44727 8.73242 9.81641 9.10156 10.291 9.10156ZM6.16016 14.9111C6.85449 14.9111 7.4082 14.3574 7.4082 13.6631C7.4082 12.9775 6.85449 12.415 6.16016 12.415C5.47461 12.415 4.91211 12.9775 4.91211 13.6631C4.91211 14.3574 5.47461 14.9111 6.16016 14.9111ZM10.291 14.5068H22.2266C22.7012 14.5068 23.0791 14.1377 23.0791 13.6631C23.0791 13.1885 22.71 12.8193 22.2266 12.8193H10.291C9.8252 12.8193 9.44727 13.1885 9.44727 13.6631C9.44727 14.1377 9.81641 14.5068 10.291 14.5068ZM6.16016 20.3164C6.85449 20.3164 7.4082 19.7627 7.4082 19.0684C7.4082 18.3828 6.85449 17.8203 6.16016 17.8203C5.47461 17.8203 4.91211 18.3828 4.91211 19.0684C4.91211 19.7627 5.47461 20.3164 6.16016 20.3164ZM10.291 19.9121H22.2266C22.7012 19.9121 23.0791 19.543 23.0791 19.0684C23.0791 18.5938 22.71 18.2246 22.2266 18.2246H10.291C9.8252 18.2246 9.44727 18.5938 9.44727 19.0684C9.44727 19.543 9.81641 19.9121 10.291 19.9121Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.63672 14.6562H12.998V20.0176C12.998 20.5625 13.4463 21.0195 14 21.0195C14.5537 21.0195 15.002 20.5625 15.002 20.0176V14.6562H20.3633C20.9082 14.6562 21.3652 14.208 21.3652 13.6543C21.3652 13.1006 20.9082 12.6523 20.3633 12.6523H15.002V7.29102C15.002 6.74609 14.5537 6.28906 14 6.28906C13.4463 6.28906 12.998 6.74609 12.998 7.29102V12.6523H7.63672C7.0918 12.6523 6.63477 13.1006 6.63477 13.6543C6.63477 14.208 7.0918 14.6562 7.63672 14.6562Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 574 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.75098 21.0723C8.30469 21.0723 8.73535 20.6592 8.73535 20.1143V14.0146C8.70898 13.9004 8.69141 13.7861 8.69141 13.6543C8.69141 13.5312 8.70898 13.417 8.73535 13.3027V7.21191C8.73535 6.66699 8.30469 6.25391 7.75098 6.25391C7.19727 6.25391 6.7666 6.66699 6.7666 7.21191V20.1143C6.7666 20.6592 7.19727 21.0723 7.75098 21.0723ZM19.8008 20.7383C20.5742 20.7383 21.2246 20.1582 21.2246 19.0859V8.24023C21.2246 7.16797 20.5742 6.58789 19.8008 6.58789C19.4141 6.58789 19.0801 6.70215 18.7021 6.92188L9.69336 12.2129C9.16602 12.5293 8.84961 12.8721 8.73535 13.3027V14.0146C8.84961 14.4453 9.16602 14.8057 9.69336 15.1133L18.7021 20.4043C19.0801 20.624 19.4141 20.7383 19.8008 20.7383ZM19.2822 18.708C19.2207 18.708 19.1592 18.6904 19.0889 18.6465L11.0117 13.874C10.915 13.8213 10.8535 13.7598 10.8535 13.6631C10.8535 13.5576 10.9062 13.5049 11.0117 13.4521L19.0889 8.67969C19.168 8.63574 19.2207 8.61816 19.2734 8.61816C19.3877 8.61816 19.4844 8.68848 19.4844 8.84668V18.4795C19.4844 18.6377 19.3877 18.708 19.2822 18.708Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1 +0,0 @@
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="28px" height="28px" baseProfile="basic"><path d="M51,48H25c-1.104,0-2-0.896-2-2s0.896-2,2-2h26c1.104,0,2,0.896,2,2S52.104,48,51,48z"/><path d="M16.356,45.919c1.121,0.082,1.962,1.032,1.962,2.222c0,1.647-1.524,2.816-3.678,2.816c-1.9,0-3.391-1.032-3.391-2.201 c0-0.52,0.362-0.889,0.861-0.889c0.328,0,0.602,0.157,0.909,0.54c0.417,0.561,0.957,0.848,1.62,0.848c0.902,0,1.49-0.472,1.49-1.203 c0-0.725-0.595-1.217-1.483-1.217h-0.554c-0.472,0-0.82-0.362-0.82-0.861c0-0.479,0.342-0.848,0.82-0.848h0.533 c0.738,0,1.285-0.465,1.285-1.101s-0.533-1.073-1.299-1.073c-0.588,0-1.053,0.26-1.47,0.813c-0.246,0.321-0.533,0.465-0.889,0.465 c-0.526,0-0.902-0.355-0.902-0.861c0-1.128,1.456-2.119,3.302-2.119c1.996,0,3.391,1.032,3.391,2.502c0,1.005-0.745,1.9-1.688,2.017 V45.919z"/><path d="M51,34H25c-1.104,0-2-0.896-2-2s0.896-2,2-2h26c1.104,0,2,0.896,2,2S52.104,34,51,34z"/><path d="M17.345,35.209c0.636,0,1.032,0.342,1.032,0.902c0,0.554-0.39,0.889-1.032,0.889h-4.676c-0.663,0-1.101-0.376-1.101-0.95 c0-0.41,0.226-0.766,0.909-1.436l2.365-2.434c0.731-0.745,1.039-1.237,1.039-1.757c0-0.67-0.485-1.121-1.203-1.121 c-0.581,0-1.005,0.294-1.306,0.902c-0.301,0.465-0.561,0.643-0.957,0.643c-0.54,0-0.916-0.369-0.916-0.889 c0-1.271,1.436-2.461,3.302-2.461c1.88,0,3.254,1.148,3.254,2.714c0,0.964-0.465,1.812-1.606,2.933l-1.948,1.969v0.096H17.345z"/><path d="M51,20.019H25c-1.104,0-2-0.896-2-2s0.896-2,2-2h26c1.104,0,2,0.896,2,2S52.104,20.019,51,20.019z"/><path d="M14.765,21.797v-6.146h-0.027l-0.718,0.485c-0.355,0.226-0.547,0.294-0.772,0.294c-0.451,0-0.779-0.328-0.779-0.779 c0-0.335,0.205-0.636,0.608-0.889l1.114-0.745c0.533-0.342,1.019-0.499,1.477-0.499c0.8,0,1.333,0.54,1.333,1.374v6.904 C17,22.569,16.597,23,15.886,23C15.168,23,14.765,22.563,14.765,21.797z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
@@ -1,4 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.20702 14.7471C2.90241 14.7471 3.40983 14.2376 3.40983 13.5401V12.4964C3.40983 10.466 4.78303 9.16615 6.93787 9.16615H13.1636V11.8715C13.1636 12.431 13.5018 12.7617 14.0666 12.7617C14.3219 12.7617 14.556 12.667 14.7508 12.5095L19.3471 8.67702C19.7929 8.30999 19.7983 7.74632 19.3471 7.36968L14.7508 3.52969C14.556 3.3743 14.3219 3.28711 14.0666 3.28711C13.5018 3.28711 13.1636 3.6082 13.1636 4.17937V6.81375H7.12115C3.38804 6.81375 1 8.88468 1 12.263V13.5401C1 14.2354 1.50203 14.7471 2.20702 14.7471ZM25.5676 13.6303C24.8626 13.6303 24.3627 14.1281 24.3627 14.8373V15.881C24.3627 17.9114 22.9916 19.1995 20.8251 19.1995H11.7646V16.5187C11.7646 15.9476 11.436 15.6265 10.8712 15.6265C10.6063 15.6265 10.3722 15.7115 10.1795 15.869L5.58109 19.7015C5.14703 20.0803 5.13953 20.644 5.58109 21.0089L10.1795 24.8489C10.3722 25.0064 10.6063 25.1011 10.8712 25.1011C11.436 25.1011 11.7646 24.7704 11.7646 24.2109V21.5636H20.6418C24.3845 21.5636 26.7725 19.4906 26.7725 16.1144V14.8373C26.7725 14.1323 26.263 13.6303 25.5676 13.6303Z" fill="white"/>
|
||||
<path d="M25.6006 11.2024C26.3485 11.2024 26.8133 10.7639 26.8133 9.9621V4.4632C26.8133 3.58312 26.2154 3 25.3663 3C24.6831 3 24.2448 3.22242 23.7137 3.62695L22.1455 4.81172C21.8214 5.06156 21.7236 5.26898 21.7236 5.56031C21.7236 5.99624 22.048 6.31007 22.5151 6.31007C22.7256 6.31007 22.9065 6.25264 23.0799 6.10897L24.2621 5.16983H24.373V9.9621C24.373 10.7639 24.8474 11.2024 25.6006 11.2024Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.20702 14.46C2.88131 14.46 3.40983 13.9294 3.40983 13.253V12.2093C3.40983 10.1789 4.78303 8.87904 6.93787 8.87904H15.9983V11.5844C15.9983 12.1439 16.3365 12.4746 16.9014 12.4746C17.1566 12.4746 17.4004 12.3799 17.5855 12.2224L22.1818 8.38991C22.6159 8.03249 22.633 7.45921 22.1818 7.08257L17.5855 3.24258C17.4004 3.08719 17.1566 3 16.9014 3C16.3365 3 15.9983 3.32109 15.9983 3.89226V6.52664H7.12115C3.38804 6.52664 1 8.59757 1 11.9758V13.253C1 13.9294 1.52101 14.46 2.20702 14.46ZM25.5676 13.3432C24.8816 13.3432 24.3627 13.8642 24.3627 14.5502V15.5939C24.3627 17.6243 22.9916 18.9124 20.8251 18.9124H11.7646V16.2316C11.7646 15.6605 11.436 15.3394 10.8712 15.3394C10.6063 15.3394 10.3722 15.4244 10.1795 15.5819L5.58109 19.4144C5.14703 19.7932 5.13953 20.3568 5.58109 20.7218L10.1795 24.5618C10.3722 24.7193 10.6063 24.8139 10.8712 24.8139C11.436 24.8139 11.7646 24.4832 11.7646 23.9238V21.2765H20.6418C24.3845 21.2765 26.7725 19.2035 26.7725 15.8273V14.5502C26.7725 13.8642 26.2419 13.3432 25.5676 13.3432Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.0201 6L8.61011 7.41L13.1901 12L8.61011 16.59L10.0201 18L16.0201 12L10.0201 6Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 210 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.31543 23.1816H18.6758C20.5566 23.1816 21.5322 22.1973 21.5322 20.2988V7.03613C21.5322 5.14648 20.5566 4.15332 18.6758 4.15332H12.9453C12.04 4.15332 11.416 4.39062 10.8447 4.9707L7.21484 8.60938C6.66992 9.1543 6.45898 9.70801 6.45898 10.6396V20.2988C6.45898 22.1885 7.43457 23.1816 9.31543 23.1816ZM9.45605 21.459C8.60352 21.459 8.18164 21.0107 8.18164 20.1934V10.71C8.18164 10.1387 8.2959 9.81348 8.59473 9.50586L11.6709 6.41211C12.0312 6.04297 12.4268 5.87598 12.9805 5.87598H18.5264C19.3789 5.87598 19.8096 6.33301 19.8096 7.1416V20.1934C19.8096 21.0107 19.3789 21.459 18.5352 21.459H9.45605ZM11.9082 8.06445V10.7627C11.9082 11.0879 12.1719 11.3516 12.4971 11.3516C12.8223 11.3516 13.0859 11.0879 13.0859 10.7627V8.06445C13.0859 7.73047 12.8311 7.47559 12.4971 7.47559C12.1719 7.47559 11.9082 7.73926 11.9082 8.06445ZM13.7012 8.06445V10.7627C13.7012 11.0879 13.9736 11.3516 14.3076 11.3516C14.624 11.3516 14.8877 11.0879 14.8877 10.7627V8.06445C14.8877 7.73926 14.6328 7.47559 14.3076 7.47559C13.9736 7.47559 13.7012 7.73926 13.7012 8.06445ZM15.5205 8.06445V10.7627C15.5205 11.0879 15.7842 11.3516 16.1094 11.3516C16.4258 11.3516 16.6895 11.0879 16.6895 10.7627V8.06445C16.6895 7.73047 16.4346 7.47559 16.1094 7.47559C15.7754 7.47559 15.5205 7.73926 15.5205 8.06445ZM17.3311 8.06445V10.7539C17.3311 11.0879 17.5947 11.3516 17.9199 11.3516C18.2451 11.3516 18.5 11.0879 18.5 10.7539V8.06445C18.5 7.73047 18.2451 7.47559 17.9199 7.47559C17.5859 7.47559 17.3311 7.73926 17.3311 8.06445Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5322 19.0332C13.9297 19.0332 15.2393 18.6113 16.3291 17.8906L20.1787 21.749C20.4336 21.9951 20.7588 22.1182 21.1104 22.1182C21.8398 22.1182 22.376 21.5469 22.376 20.8262C22.376 20.4922 22.2617 20.167 22.0156 19.9209L18.1924 16.0801C18.9834 14.9551 19.4492 13.5928 19.4492 12.1162C19.4492 8.31055 16.3379 5.19922 12.5322 5.19922C8.73535 5.19922 5.61523 8.31055 5.61523 12.1162C5.61523 15.9219 8.72656 19.0332 12.5322 19.0332ZM12.5322 17.1875C9.74609 17.1875 7.46094 14.9023 7.46094 12.1162C7.46094 9.33008 9.74609 7.04492 12.5322 7.04492C15.3184 7.04492 17.6035 9.33008 17.6035 12.1162C17.6035 14.9023 15.3184 17.1875 12.5322 17.1875Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 768 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.1035 23.208H14.8877C15.6172 23.208 16.1885 22.751 16.3643 22.0479L16.7158 20.5098L16.9443 20.4219L18.2891 21.2568C18.9043 21.6436 19.6338 21.5381 20.1523 21.0195L21.3828 19.7891C21.9102 19.2617 21.998 18.541 21.6113 17.9346L20.7764 16.5898L20.8643 16.3789L22.4023 16.0186C23.0967 15.8428 23.5537 15.2715 23.5537 14.542V12.8105C23.5537 12.0811 23.1055 11.5098 22.4023 11.334L20.873 10.9648L20.7852 10.7363L21.6201 9.40039C22.0068 8.79395 21.9189 8.07324 21.3916 7.53711L20.1611 6.30664C19.6514 5.78809 18.9219 5.69141 18.3066 6.06934L16.9619 6.89551L16.7158 6.80762L16.3643 5.26074C16.1885 4.55762 15.6172 4.10938 14.8877 4.10938H13.1035C12.3652 4.10938 11.7939 4.55762 11.627 5.26074L11.2754 6.80762L11.0293 6.89551L9.68457 6.06934C9.06055 5.69141 8.33984 5.78809 7.83008 6.30664L6.59082 7.53711C6.07227 8.07324 5.97559 8.79395 6.3623 9.40039L7.19727 10.7363L7.10938 10.9648L5.58887 11.334C4.88574 11.5098 4.4375 12.0811 4.4375 12.8105V14.542C4.4375 15.2715 4.89453 15.8428 5.58887 16.0186L7.12695 16.3789L7.20605 16.5898L6.37109 17.9346C5.98438 18.541 6.08105 19.2617 6.59961 19.7891L7.83887 21.0195C8.34863 21.5381 9.07812 21.6436 9.69336 21.2568L11.0381 20.4219L11.2754 20.5098L11.627 22.0479C11.7939 22.751 12.3652 23.208 13.1035 23.208ZM13.332 21.5908C13.1826 21.5908 13.1035 21.5293 13.0859 21.3975L12.5586 19.2354C12.0049 19.1035 11.4688 18.875 11.0381 18.6025L9.13965 19.7715C9.02539 19.8418 8.91992 19.833 8.81445 19.7275L7.8916 18.8047C7.78613 18.708 7.78613 18.6025 7.85645 18.4883L9.02539 16.5898C8.7793 16.168 8.55078 15.6406 8.41895 15.0869L6.24805 14.5684C6.11621 14.5508 6.0459 14.4717 6.0459 14.3223V13.0215C6.0459 12.8633 6.10742 12.8018 6.24805 12.7666L8.41016 12.2568C8.54199 11.668 8.79688 11.123 9.0166 10.7275L7.84766 8.84668C7.77734 8.72363 7.77734 8.61816 7.87402 8.5127L8.80566 7.59863C8.91113 7.50195 9.00781 7.48438 9.13965 7.56348L11.0205 8.71484C11.416 8.46875 12.0049 8.22266 12.5674 8.08203L13.0859 5.91992C13.1035 5.78809 13.1826 5.71777 13.332 5.71777H14.6592C14.8086 5.71777 14.8789 5.7793 14.9053 5.91992L15.4326 8.09082C16.0039 8.23145 16.5225 8.46875 16.9619 8.71484L18.8428 7.56348C18.9746 7.49316 19.0713 7.50195 19.1768 7.60742L20.1084 8.52148C20.2139 8.61816 20.2139 8.72363 20.1348 8.84668L18.9746 10.7275C19.1855 11.123 19.4492 11.668 19.5811 12.2568L21.7432 12.7666C21.8838 12.8018 21.9365 12.8633 21.9365 13.0215V14.3223C21.9365 14.4717 21.875 14.5508 21.7432 14.5684L19.5723 15.0869C19.4404 15.6406 19.2031 16.1768 18.957 16.5898L20.126 18.4795C20.1963 18.6025 20.1963 18.6992 20.0908 18.7959L19.168 19.7275C19.0625 19.833 18.957 19.8418 18.8428 19.7715L16.9531 18.6025C16.5137 18.875 16.0127 19.0947 15.4326 19.2354L14.9053 21.3975C14.8789 21.5293 14.8086 21.5908 14.6592 21.5908H13.332ZM14 16.9941C15.8281 16.9941 17.3311 15.4912 17.3311 13.6543C17.3311 11.835 15.8281 10.332 14 10.332C12.1631 10.332 10.6514 11.835 10.6514 13.6543C10.6514 15.4912 12.1631 16.9941 14 16.9941ZM14 15.4736C12.998 15.4736 12.1807 14.6562 12.1807 13.6543C12.1807 12.6699 13.0068 11.8525 14 11.8525C14.9756 11.8525 15.793 12.6699 15.793 13.6543C15.793 14.6475 14.9756 15.4736 14 15.4736Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.2 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.5498 18.3389C3.5498 18.8486 3.94531 19.209 4.49023 19.209H6.55566C8.06738 19.209 8.95508 18.7695 9.99219 17.5479L12.1191 15.0166L14.2197 17.5039C15.2832 18.7695 16.2852 19.209 17.7969 19.209H19.5547V21.3271C19.5547 21.749 19.8096 21.9951 20.2314 21.9951C20.4248 21.9951 20.6006 21.9248 20.75 21.8105L24.1953 18.9365C24.5293 18.6641 24.5293 18.2422 24.1953 17.9521L20.75 15.0781C20.6006 14.9551 20.4248 14.8936 20.2314 14.8936C19.8096 14.8936 19.5547 15.1309 19.5547 15.5615V17.46H17.8496C16.8125 17.46 16.1357 17.1172 15.3887 16.2207L13.2441 13.6807L15.3975 11.1318C16.1621 10.2266 16.7773 9.90137 17.7969 9.90137H19.5547V11.835C19.5547 12.2568 19.8096 12.5029 20.2314 12.5029C20.4248 12.5029 20.6006 12.4326 20.75 12.3184L24.1953 9.44434C24.5293 9.17188 24.5293 8.75 24.1953 8.45996L20.75 5.58594C20.6006 5.46289 20.4248 5.40137 20.2314 5.40137C19.8096 5.40137 19.5547 5.63867 19.5547 6.06934V8.14355H17.8057C16.2412 8.14355 15.2832 8.57422 14.167 9.91016L12.1191 12.3447L9.99219 9.81348C8.95508 8.5918 8.00586 8.15234 6.50293 8.15234H4.49023C3.94531 8.15234 3.5498 8.5127 3.5498 9.02246C3.5498 9.53223 3.94531 9.90137 4.49023 9.90137H6.43262C7.41699 9.90137 8.10254 10.2441 8.8584 11.1406L10.9941 13.6807L8.8584 16.2207C8.10254 17.1172 7.46973 17.46 6.49414 17.46H4.49023C3.94531 17.46 3.5498 17.8291 3.5498 18.3389Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,12 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_308_586)">
|
||||
<path d="M23.1318 14.1377C25.5928 14.1377 27.6582 12.0811 27.6582 9.61133C27.6582 7.12402 25.6104 5.08496 23.1318 5.08496C20.6533 5.08496 18.6055 7.13281 18.6055 9.61133C18.6055 12.0986 20.6533 14.1377 23.1318 14.1377ZM6.81055 21.7666H21.3916C23.0879 21.7666 24.0723 20.7822 24.0723 18.9014V15.3066C23.5977 15.4121 22.8857 15.4209 22.3232 15.3066V18.752C22.3232 19.5957 21.875 20.0176 21.0664 20.0176H6.9248C6.11621 20.0176 5.66797 19.5957 5.66797 18.7432V12.0723H17.9551C17.709 11.5977 17.5244 11.0791 17.4365 10.5342H5.66797V8.33691C5.66797 7.53711 6.11621 7.11523 6.89844 7.11523H8.56836C9.19238 7.11523 9.56152 7.26465 10.0625 7.66895L10.5547 8.08203C11.1699 8.57422 11.6445 8.75 12.5674 8.75H17.4453C17.5156 8.12598 17.6562 7.58105 17.9551 6.99219H13.0332C12.4004 6.99219 12.0225 6.85156 11.5303 6.44727L11.0381 6.04297C10.4141 5.5332 9.95703 5.36621 9.03418 5.36621H6.54688C4.89453 5.36621 3.91895 6.33301 3.91895 8.1875V18.9014C3.91895 20.791 4.91211 21.7666 6.81055 21.7666ZM20.8643 10.2178C20.5391 10.2178 20.2578 9.92773 20.2578 9.61133C20.2578 9.28613 20.5391 9.00488 20.8643 9.00488H25.3994C25.7334 9.00488 26.0059 9.28613 26.0059 9.61133C26.0059 9.92773 25.7334 10.2178 25.3994 10.2178H20.8643Z" fill="#fff"/>
|
||||
<path d="M26.7314 6.32392C28.484 8.0765 28.4777 10.9912 26.7376 12.7314C24.9788 14.4902 22.0827 14.4902 20.3239 12.7314C18.5713 10.9788 18.5713 8.08271 20.3301 6.32392C22.0827 4.57135 24.9788 4.57135 26.7314 6.32392Z" fill="#fff"/>
|
||||
<path d="M21.4986 10.6246C21.2438 10.8794 21.2438 11.2896 21.5048 11.5506C21.7721 11.8178 22.1885 11.8241 22.4433 11.5693L23.9783 10.0342L24.662 9.27599V9.95962L24.6247 11.0783C24.6185 11.2461 24.6806 11.4201 24.8111 11.5382C25.0535 11.7806 25.4326 11.7992 25.6688 11.5506C25.793 11.4139 25.849 11.2585 25.8366 11.0721L25.7371 8.01438C25.7309 7.77201 25.6812 7.62285 25.5569 7.49856C25.4388 7.38047 25.2834 7.33697 25.0535 7.33076L21.9834 7.21889C21.8031 7.21268 21.6478 7.26861 21.5173 7.39912C21.2749 7.6415 21.2749 8.02681 21.5297 8.25676C21.6478 8.37484 21.8218 8.43699 21.9834 8.43699L23.1083 8.40592L23.7919 8.39349L23.0337 9.08955L21.4986 10.6246Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_308_586">
|
||||
<rect width="28" height="28" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.6415 23.2344L23.2548 14.6123C23.9403 13.918 24.0106 13.5137 24.0106 12.5117V9.18066C24.0106 8.20508 23.7821 7.87109 23.0702 7.15918L21.0575 5.14648C20.3368 4.43457 20.0028 4.20605 19.036 4.20605H15.6962C14.703 4.20605 14.2987 4.27637 13.6132 4.9707L4.9823 13.584C3.66394 14.9023 3.64637 16.2998 4.99109 17.627L10.5985 23.2344C11.9345 24.5615 13.3231 24.5527 14.6415 23.2344ZM13.5077 21.8896C12.9276 22.4697 12.3212 22.4785 11.7235 21.8809L6.33582 16.502C5.73816 15.9043 5.75574 15.2891 6.32703 14.7178L14.8612 6.20117C15.037 6.02539 15.204 5.91992 15.4852 5.91992H19.0184C19.2821 5.91992 19.4667 6.0166 19.6425 6.19238L22.0243 8.57422C22.1913 8.75 22.288 8.92578 22.288 9.19824V12.7314C22.288 13.0215 22.2001 13.1885 22.0243 13.3643L13.5077 21.8896ZM17.9374 11.5361C18.6581 11.5361 19.203 10.9824 19.203 10.2705C19.203 9.56738 18.6581 9.00488 17.9374 9.00488C17.2255 9.00488 16.6805 9.56738 16.6805 10.2705C16.6805 10.9824 17.2255 11.5361 17.9374 11.5361Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
|
||||
<g id="surface79322138">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 22.574219 4.953125 C 22.980469 5.214844 23.09375 5.757812 22.832031 6.164062 L 12.0625 22.789062 C 11.914062 23.019531 11.664062 23.164062 11.390625 23.183594 C 11.371094 23.1875 11.347656 23.1875 11.328125 23.1875 C 11.078125 23.1875 10.835938 23.078125 10.667969 22.890625 L 5.246094 16.726562 C 4.925781 16.363281 4.960938 15.808594 5.324219 15.488281 C 5.6875 15.171875 6.238281 15.207031 6.558594 15.570312 L 11.21875 20.867188 L 21.363281 5.210938 C 21.625 4.804688 22.167969 4.691406 22.574219 4.953125 Z M 22.574219 4.953125 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 835 B |
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
|
||||
<g id="surface79432257">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 14 5.214844 C 13.210938 5.214844 12.5 5.625 12.105469 6.308594 L 4.253906 19.90625 C 3.859375 20.589844 3.859375 21.410156 4.253906 22.09375 C 4.652344 22.777344 5.359375 23.1875 6.148438 23.1875 L 21.851562 23.1875 C 22.640625 23.1875 23.347656 22.777344 23.746094 22.09375 C 24.140625 21.410156 24.140625 20.589844 23.746094 19.90625 L 15.894531 6.308594 C 15.5 5.625 14.789062 5.214844 14 5.214844 Z M 14 6.964844 C 14.074219 6.964844 14.265625 6.988281 14.378906 7.183594 L 22.230469 20.78125 C 22.34375 20.980469 22.269531 21.152344 22.230469 21.21875 C 22.191406 21.285156 22.078125 21.4375 21.851562 21.4375 L 6.148438 21.4375 C 5.921875 21.4375 5.808594 21.285156 5.769531 21.21875 C 5.730469 21.152344 5.65625 20.980469 5.769531 20.78125 L 13.621094 7.183594 C 13.734375 6.988281 13.925781 6.964844 14 6.964844 Z M 13.992188 10.058594 C 13.691406 10.058594 13.445312 10.152344 13.253906 10.335938 C 13.066406 10.523438 12.976562 10.753906 12.984375 11.03125 L 13.125 16.214844 C 13.140625 16.792969 13.433594 17.085938 14.007812 17.085938 C 14.5625 17.085938 14.84375 16.792969 14.851562 16.214844 L 15.015625 11.042969 C 15.023438 10.765625 14.929688 10.53125 14.730469 10.34375 C 14.535156 10.152344 14.289062 10.058594 13.992188 10.058594 Z M 14 18.238281 C 13.328125 18.238281 12.902344 18.808594 12.902344 19.289062 C 12.902344 19.769531 13.3125 20.339844 14 20.339844 C 14.6875 20.339844 15.097656 19.800781 15.097656 19.289062 C 15.097656 18.777344 14.671875 18.238281 14 18.238281 Z M 14 18.238281 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
|
||||
<g id="surface79671233">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 14 4.375 C 8.683594 4.375 4.375 8.683594 4.375 14 C 4.375 19.316406 8.683594 23.625 14 23.625 C 19.316406 23.625 23.625 19.316406 23.625 14 C 23.625 8.683594 19.316406 4.375 14 4.375 Z M 14 6.125 C 18.347656 6.125 21.875 9.652344 21.875 14 C 21.875 18.347656 18.347656 21.875 14 21.875 C 9.652344 21.875 6.125 18.347656 6.125 14 C 6.125 9.652344 9.652344 6.125 14 6.125 Z M 14 9.1875 C 13.273438 9.1875 12.6875 9.773438 12.6875 10.5 C 12.6875 11.226562 13.273438 11.8125 14 11.8125 C 14.726562 11.8125 15.3125 11.226562 15.3125 10.5 C 15.3125 9.773438 14.726562 9.1875 14 9.1875 Z M 14 13.125 C 13.515625 13.125 13.125 13.515625 13.125 14 L 13.125 18.375 C 13.125 18.859375 13.515625 19.25 14 19.25 C 14.484375 19.25 14.875 18.859375 14.875 18.375 L 14.875 14 C 14.875 13.515625 14.484375 13.125 14 13.125 Z M 14 13.125 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
|
||||
<g id="surface79451713">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 22.703125 15.355469 C 22.628906 15.773438 22.449219 16.152344 22.203125 16.476562 C 22.667969 17.058594 22.851562 17.796875 22.671875 18.554688 C 22.550781 19.082031 22.265625 19.539062 21.886719 19.886719 C 22.15625 20.265625 22.3125 20.71875 22.3125 21.203125 C 22.3125 22.542969 21.121094 23.59375 19.597656 23.59375 L 13.121094 23.613281 C 11.023438 23.613281 9.042969 22.796875 7.558594 21.316406 C 6.070312 19.828125 5.25 17.851562 5.25 15.75 C 5.25 11.828125 6.660156 10.425781 7.59375 9.5 L 7.695312 9.398438 C 7.988281 9.101562 8.527344 8.707031 9.210938 8.203125 C 10.59375 7.179688 12.914062 5.464844 13.339844 4.308594 C 13.683594 3.382812 14.109375 2.230469 15.75 2.230469 C 16.480469 2.230469 17.152344 2.683594 17.550781 3.445312 C 17.929688 4.175781 18.496094 6.132812 16.472656 9.625 L 19.757812 9.625 C 21.167969 9.625 22.3125 10.699219 22.3125 12.015625 C 22.3125 12.4375 22.191406 12.832031 21.984375 13.175781 C 22.574219 13.746094 22.851562 14.519531 22.703125 15.355469 Z M 19.597656 21.84375 C 20.121094 21.84375 20.5625 21.550781 20.5625 21.203125 C 20.5625 20.851562 20.203125 20.5625 19.757812 20.5625 L 17.9375 20.5625 C 17.453125 20.5625 17.0625 20.171875 17.0625 19.6875 C 17.0625 19.203125 17.453125 18.8125 17.9375 18.8125 L 20.226562 18.8125 C 20.609375 18.8125 20.894531 18.472656 20.96875 18.15625 C 21.015625 17.949219 21 17.679688 20.71875 17.441406 C 20.558594 17.476562 20.394531 17.5 20.226562 17.5 L 17.9375 17.5 C 17.453125 17.5 17.0625 17.109375 17.0625 16.625 C 17.0625 16.140625 17.453125 15.75 17.9375 15.75 L 20.226562 15.75 C 20.617188 15.75 20.917969 15.394531 20.980469 15.050781 C 21.046875 14.667969 20.820312 14.417969 20.542969 14.261719 C 20.25 14.355469 19.933594 14.40625 19.597656 14.40625 L 17.945312 14.4375 C 17.46875 14.4375 17.070312 14.054688 17.0625 13.578125 C 17.054688 13.09375 17.4375 12.695312 17.921875 12.6875 L 19.582031 12.65625 C 20.121094 12.65625 20.5625 12.363281 20.5625 12.015625 C 20.5625 11.664062 20.203125 11.375 19.757812 11.375 L 14.875 11.375 C 14.550781 11.375 14.25 11.195312 14.097656 10.902344 C 13.949219 10.613281 13.972656 10.265625 14.15625 10 C 16.121094 7.1875 16.417969 5.234375 16.039062 4.339844 C 15.921875 4.058594 15.777344 3.984375 15.742188 3.976562 C 15.386719 3.976562 15.328125 3.976562 14.984375 4.917969 C 14.375 6.5625 11.992188 8.324219 10.25 9.609375 C 9.675781 10.035156 9.136719 10.433594 8.929688 10.636719 L 8.828125 10.738281 C 8.015625 11.550781 7 12.554688 7 15.75 C 7 17.386719 7.636719 18.921875 8.792969 20.078125 C 9.949219 21.230469 11.488281 21.863281 13.117188 21.863281 Z M 19.597656 21.84375 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.9 KiB |
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
|
||||
<g id="surface79447169">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 17.703125 16.027344 C 19.269531 17.59375 20.132812 19.679688 20.125 21.898438 C 20.121094 22.855469 19.332031 23.625 18.375 23.625 L 9.625 23.625 C 8.667969 23.625 7.878906 22.855469 7.875 21.898438 C 7.867188 19.679688 8.730469 17.597656 10.296875 16.027344 L 11.449219 14.875 C 11.683594 14.640625 11.8125 14.332031 11.8125 14 C 11.8125 13.667969 11.683594 13.359375 11.449219 13.125 L 10.261719 11.9375 C 8.722656 10.398438 7.875 8.351562 7.875 6.175781 C 7.875 5.164062 8.660156 4.375 9.621094 4.375 L 18.378906 4.375 C 19.339844 4.375 20.125 5.164062 20.125 6.132812 C 20.125 8.351562 19.277344 10.398438 17.738281 11.9375 L 16.550781 13.125 C 16.316406 13.359375 16.1875 13.667969 16.1875 14 C 16.1875 14.332031 16.316406 14.640625 16.550781 14.875 Z M 18.023438 21.121094 L 14.605469 17.859375 C 14.265625 17.535156 13.734375 17.535156 13.394531 17.859375 L 9.976562 21.121094 C 9.691406 21.394531 9.886719 21.875 10.28125 21.875 L 17.71875 21.875 C 18.113281 21.875 18.308594 21.394531 18.023438 21.121094 Z M 18.023438 21.121094 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 49 KiB |
@@ -1,98 +0,0 @@
|
||||
<svg width="1600" height="548" viewBox="0 0 1600 548" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_7_2)" filter="url(#filter0_d_7_2)">
|
||||
<path d="M1241.06 372.097L1280.6 358.972C1285.2 357.445 1286.98 353.889 1285.29 348.789L1277.15 324.265C1275.46 319.165 1271.88 317.39 1266.73 319.099L1244.64 326.433C1242.92 327.002 1241.77 326.961 1240.07 326.308L1238.37 325.655C1236.22 324.834 1234.83 324.793 1232.33 325.623L1225.58 327.862C1221.1 329.35 1219.33 332.85 1221 337.878L1230.64 366.93C1232.34 372.054 1235.91 373.806 1241.06 372.097ZM1225.87 336.709C1225.15 334.54 1225.99 332.993 1228.11 332.289L1232.64 330.785C1234.33 330.224 1235.47 330.297 1237.19 330.942L1238.9 331.619C1241.01 332.4 1242.45 332.449 1244.95 331.619L1268 323.968C1270.19 323.24 1271.79 323.981 1272.55 326.269L1273.01 327.675L1227.85 342.667L1225.87 336.709ZM1239.8 367.251C1237.6 367.979 1236.01 367.239 1235.24 364.927L1229.24 346.838L1274.4 331.846L1280.41 349.959C1281.17 352.247 1280.34 353.794 1278.14 354.522L1239.8 367.251Z" fill="#F2F2F2"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_7_2)">
|
||||
<path d="M920.83 363.356L946.539 355.986C951.704 354.505 953.602 351.009 952.114 345.819L945.838 323.925C944.876 320.57 943.998 319.149 941.289 317.627L924.921 308.37C922.305 306.899 920.501 306.894 917.483 307.759L905.848 311.095C900.682 312.575 898.785 316.071 900.273 321.261L910.715 357.687C912.21 362.902 915.665 364.837 920.83 363.356ZM919.86 358.514C917.519 359.185 916.007 358.286 915.364 356.041L905.087 320.195C904.45 317.974 905.249 316.386 907.591 315.715L917.874 312.767L921.666 325.995C922.656 329.447 924.847 330.622 928.275 329.639L941.286 325.909L947.3 346.886C947.943 349.131 947.113 350.701 944.772 351.372L919.86 358.514ZM927.519 325.362C926.53 325.646 925.995 325.329 925.711 324.34L922.237 312.222L939.444 321.944L927.519 325.362Z" fill="#F2F2F2"/>
|
||||
</g>
|
||||
<g filter="url(#filter2_d_7_2)">
|
||||
<path d="M920.83 363.356L946.539 355.986C951.704 354.505 953.602 351.009 952.114 345.819L945.838 323.925C944.876 320.57 943.998 319.149 941.289 317.627L924.921 308.37C922.305 306.899 920.501 306.894 917.483 307.759L905.848 311.095C900.682 312.575 898.785 316.071 900.273 321.261L910.715 357.687C912.21 362.902 915.665 364.837 920.83 363.356ZM919.86 358.514C917.519 359.185 916.007 358.286 915.364 356.041L905.087 320.195C904.45 317.974 905.249 316.386 907.591 315.715L917.874 312.767L921.666 325.995C922.656 329.447 924.847 330.622 928.275 329.639L941.286 325.909L947.3 346.886C947.943 349.131 947.113 350.701 944.772 351.372L919.86 358.514ZM927.519 325.362C926.53 325.646 925.995 325.329 925.711 324.34L922.237 312.222L939.444 321.944L927.519 325.362Z" fill="#F2F2F2"/>
|
||||
</g>
|
||||
<g filter="url(#filter3_d_7_2)">
|
||||
<path d="M784.959 386.222L825.55 376.844C830.272 375.753 832.379 372.38 831.169 367.144L825.353 341.967C824.143 336.731 820.745 334.63 815.46 335.851L792.779 341.091C791.017 341.498 789.875 341.35 788.245 340.541L786.615 339.732C784.55 338.714 783.17 338.543 780.601 339.137L773.677 340.736C769.077 341.799 766.983 345.118 768.176 350.281L775.066 380.106C776.282 385.366 779.674 387.443 784.959 386.222ZM773.141 349.572C772.626 347.345 773.603 345.882 775.78 345.379L780.429 344.305C782.166 343.904 783.29 344.082 784.944 344.886L786.58 345.719C788.61 346.694 790.044 346.878 792.613 346.284L816.273 340.818C818.524 340.298 820.043 341.184 820.585 343.533L820.919 344.976L774.554 355.688L773.141 349.572ZM784.152 381.28C781.901 381.8 780.382 380.914 779.834 378.541L775.543 359.97L821.908 349.258L826.204 367.853C826.747 370.202 825.77 371.665 823.52 372.185L784.152 381.28Z" fill="#F2F2F2"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip1_7_2)" filter="url(#filter4_d_7_2)">
|
||||
<path d="M1175.56 503.894L1196.91 519.989C1201.21 523.223 1205.14 522.634 1208.39 518.322L1222.1 500.132C1224.2 497.345 1224.8 495.789 1224.39 492.709L1221.93 474.066C1221.53 471.092 1220.45 469.648 1217.94 467.759L1208.27 460.475C1203.98 457.241 1200.05 457.829 1196.8 462.141L1174 492.404C1170.73 496.736 1171.26 500.66 1175.56 503.894ZM1178.84 500.205C1176.89 498.739 1176.7 496.991 1178.11 495.126L1200.55 465.344C1201.94 463.499 1203.69 463.181 1205.63 464.647L1214.18 471.085L1205.9 482.075C1203.73 484.943 1204.12 487.4 1206.96 489.546L1217.77 497.692L1204.64 515.119C1203.23 516.985 1201.48 517.267 1199.54 515.801L1178.84 500.205ZM1209.92 486.369C1209.1 485.749 1209.03 485.131 1209.65 484.309L1217.24 474.241L1219.83 493.834L1209.92 486.369Z" fill="#F2F2F2"/>
|
||||
</g>
|
||||
<g filter="url(#filter5_d_7_2)">
|
||||
<path d="M1139.29 314.117C1132.34 317.228 1125.57 322.685 1121.15 328.736C1120.32 329.881 1120.52 331.249 1121.6 332.139C1120.46 334.001 1120.66 336.223 1122.27 338.113C1124.35 340.483 1127.29 340.653 1129.65 338.606L1139.05 330.428C1141.39 328.392 1141.58 325.5 1139.53 323.086C1138.67 322.072 1137.62 321.465 1136.52 321.272C1138.09 320.294 1139.7 319.406 1141.33 318.677C1153.86 313.061 1165.63 316.977 1170.78 328.458C1175.92 339.939 1171.02 351.354 1158.49 356.97C1156.86 357.7 1155.14 358.335 1153.35 358.832C1153.92 357.889 1154.16 356.708 1153.99 355.352C1153.56 352.243 1151.28 350.46 1148.2 350.847L1135.84 352.424C1132.71 352.808 1130.91 355.126 1131.29 358.233C1131.63 360.721 1133.16 362.348 1135.28 362.719C1135.25 364.134 1136.14 365.195 1137.55 365.333C1145.01 366.065 1153.6 364.665 1160.54 361.554C1175.83 354.705 1181.74 340.691 1175.34 326.415C1168.95 312.161 1154.57 307.268 1139.29 314.117Z" fill="#333333" fill-opacity="0.01"/>
|
||||
</g>
|
||||
<g filter="url(#filter6_d_7_2)">
|
||||
<path d="M1021.88 49.7976L1032.05 74.5314C1034.09 79.5014 1037.78 81 1042.77 78.9465L1063.84 70.2835C1067.06 68.9559 1068.38 67.9266 1069.59 65.0655L1076.98 47.7724C1078.15 45.0097 1077.96 43.2162 1076.76 40.3132L1072.16 29.1191C1070.12 24.1491 1066.43 22.6505 1061.44 24.704L1026.39 39.1169C1021.38 41.18 1019.83 44.8276 1021.88 49.7976ZM1026.58 48.2971C1025.66 46.0444 1026.38 44.4425 1028.54 43.5542L1063.03 29.3706C1065.17 28.4919 1066.83 29.11 1067.76 31.3627L1071.83 41.2563L1059.1 46.4904C1055.78 47.8562 1054.86 50.1642 1056.21 53.462L1061.36 65.9799L1041.18 74.2799C1039.02 75.1682 1037.37 74.5173 1036.44 72.2646L1026.58 48.2971ZM1060.38 52.2372C1059.99 51.285 1060.24 50.7183 1061.2 50.3267L1072.85 45.532L1065.1 63.71L1060.38 52.2372Z" fill="#F2F2F2"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_7_2" x="1199" y="294" width="109.13" height="109.13" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_7_2" x="599" y="285" width="376.948" height="240.948" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-274" dy="138"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d_7_2" x="873" y="285" width="106.948" height="106.948" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter3_d_7_2" x="748" y="312" width="103.955" height="103.955" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter4_d_7_2" x="1142" y="435" width="120.036" height="120.036" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter5_d_7_2" x="1033" y="285" width="169.719" height="165.719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-60" dy="56"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter6_d_7_2" x="999" y="0" width="158.416" height="317.416" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="50" dy="209"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_7_2">
|
||||
<rect width="80" height="80" fill="white" transform="translate(1203 319.204) rotate(-18.3641)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_7_2">
|
||||
<rect width="80" height="80" fill="white" transform="translate(1194.15 435) rotate(37)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 591 B |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 105 KiB |
@@ -1,4 +0,0 @@
|
||||
<svg width="189" height="36" viewBox="0 0 189 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.6328 35L8.625 10.3203H8.41406C8.74219 14.5234 8.90625 17.7891 8.90625 20.1172V35H0.703125V0.734375H13.0312L20.1797 25.0625H20.3672L27.375 0.734375H39.7266V35H31.2188V19.9766C31.2188 19.1953 31.2266 18.3281 31.2422 17.375C31.2734 16.4219 31.3828 14.0859 31.5703 10.3672H31.3594L24.4453 35H15.6328ZM76.2422 0.734375V21.3594C76.2422 25.8438 74.9688 29.3203 72.4219 31.7891C69.8906 34.2422 66.2344 35.4688 61.4531 35.4688C56.7812 35.4688 53.1875 34.2734 50.6719 31.8828C48.1719 29.4922 46.9219 26.0547 46.9219 21.5703V0.734375H56.2266V20.8438C56.2266 23.2656 56.6797 25.0234 57.5859 26.1172C58.4922 27.2109 59.8281 27.7578 61.5938 27.7578C63.4844 27.7578 64.8516 27.2188 65.6953 26.1406C66.5547 25.0469 66.9844 23.2656 66.9844 20.7969V0.734375H76.2422ZM105.844 24.5938C105.844 26.7188 105.305 28.6094 104.227 30.2656C103.148 31.9062 101.594 33.1875 99.5625 34.1094C97.5312 35.0156 95.1484 35.4688 92.4141 35.4688C90.1328 35.4688 88.2188 35.3125 86.6719 35C85.125 34.6719 83.5156 34.1094 81.8438 33.3125V25.0625C83.6094 25.9688 85.4453 26.6797 87.3516 27.1953C89.2578 27.6953 91.0078 27.9453 92.6016 27.9453C93.9766 27.9453 94.9844 27.7109 95.625 27.2422C96.2656 26.7578 96.5859 26.1406 96.5859 25.3906C96.5859 24.9219 96.4531 24.5156 96.1875 24.1719C95.9375 23.8125 95.5234 23.4531 94.9453 23.0938C94.3828 22.7344 92.8672 22 90.3984 20.8906C88.1641 19.875 86.4844 18.8906 85.3594 17.9375C84.25 16.9844 83.4219 15.8906 82.875 14.6562C82.3438 13.4219 82.0781 11.9609 82.0781 10.2734C82.0781 7.11719 83.2266 4.65625 85.5234 2.89062C87.8203 1.125 90.9766 0.242188 94.9922 0.242188C98.5391 0.242188 102.156 1.0625 105.844 2.70312L103.008 9.85156C99.8047 8.38281 97.0391 7.64844 94.7109 7.64844C93.5078 7.64844 92.6328 7.85938 92.0859 8.28125C91.5391 8.70312 91.2656 9.22656 91.2656 9.85156C91.2656 10.5234 91.6094 11.125 92.2969 11.6562C93 12.1875 94.8906 13.1562 97.9688 14.5625C100.922 15.8906 102.969 17.3203 104.109 18.8516C105.266 20.3672 105.844 22.2812 105.844 24.5938ZM111.141 35V0.734375H120.445V35H111.141ZM143.133 7.83594C140.93 7.83594 139.211 8.74219 137.977 10.5547C136.742 12.3516 136.125 14.8359 136.125 18.0078C136.125 24.6016 138.633 27.8984 143.648 27.8984C145.164 27.8984 146.633 27.6875 148.055 27.2656C149.477 26.8438 150.906 26.3359 152.344 25.7422V33.5703C149.484 34.8359 146.25 35.4688 142.641 35.4688C137.469 35.4688 133.5 33.9688 130.734 30.9688C127.984 27.9688 126.609 23.6328 126.609 17.9609C126.609 14.4141 127.273 11.2969 128.602 8.60938C129.945 5.92188 131.867 3.85938 134.367 2.42188C136.883 0.96875 139.836 0.242188 143.227 0.242188C146.93 0.242188 150.469 1.04688 153.844 2.65625L151.008 9.94531C149.742 9.35156 148.477 8.85156 147.211 8.44531C145.945 8.03906 144.586 7.83594 143.133 7.83594Z" fill="white"/>
|
||||
<path d="M160.289 14.4453C159.008 12.5859 158.367 9.9375 158.367 6.5V3.10156H167.602L185.039 22.2031C186.023 23.2969 186.68 24.2188 187.008 24.9688C187.336 25.7188 187.578 26.4062 187.734 27.0312C188.078 28.2812 188.25 29.8203 188.25 31.6484V35H179.273L160.359 14.4453H160.289ZM178.102 13.1094C178.102 8.8125 178.766 6.01562 180.094 4.71875C180.797 4.03125 181.711 3.59375 182.836 3.40625C183.977 3.20312 185.359 3.10156 186.984 3.10156H188.25V6.80469C188.25 10.1328 187.375 12.3594 185.625 13.4844C184.375 14.2969 182.273 14.7031 179.32 14.7031H178.102V13.1094ZM158.367 31.3438C158.367 28.0156 159.242 25.7812 160.992 24.6406C162.242 23.8438 164.344 23.4453 167.297 23.4453H168.516V25.0391C168.516 29.3828 167.852 32.1719 166.523 33.4062C165.617 34.25 164.297 34.75 162.562 34.9062C161.688 34.9688 160.711 35 159.633 35H158.367V31.3438Z" fill="#4AD168"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.6 KiB |
@@ -1,64 +0,0 @@
|
||||
.b-bar {
|
||||
height: 100%;
|
||||
|
||||
.grid {
|
||||
background-color: $primary;
|
||||
height: 100%;
|
||||
padding-right: $small;
|
||||
|
||||
@include phone-only {
|
||||
grid-template-columns: 1fr 9.2rem;
|
||||
}
|
||||
|
||||
.controlsx {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 12rem 1fr 12rem;
|
||||
align-items: center;
|
||||
padding: $small;
|
||||
|
||||
.progress-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-bottom {
|
||||
width: 100%;
|
||||
|
||||
.durationx {
|
||||
background-color: $black;
|
||||
padding: $smaller;
|
||||
border-radius: 0.5rem;
|
||||
margin: 0 $small 0 $small;
|
||||
font-size: 0.8rem;
|
||||
min-width: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.r-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $small;
|
||||
|
||||
#heart {
|
||||
background-image: url(../../icons/heart.svg);
|
||||
}
|
||||
|
||||
#add-to {
|
||||
background-image: url(../../icons/plus.svg);
|
||||
}
|
||||
|
||||
#repeat {
|
||||
background-image: url(../../icons/repeat.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.volume-group {
|
||||
@include tablet-portrait {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
.card-grid-view {
|
||||
height: 100%;
|
||||
|
||||
.scrollable {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
padding: 0 1rem;
|
||||
padding-bottom: 4rem;
|
||||
overflow: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
$g-border: solid 1px $gray5;
|
||||
|
||||
#app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr 29rem;
|
||||
grid-template-rows: max-content 1fr 5rem;
|
||||
grid-template-areas:
|
||||
"l-sidebar nav r-sidebar"
|
||||
"l-sidebar content r-sidebar"
|
||||
"bottombar bottombar bottombar";
|
||||
|
||||
// gap: 0 1.5rem;
|
||||
height: 100%;
|
||||
border: $g-border;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
margin: 0 auto;
|
||||
max-width: 1720px;
|
||||
}
|
||||
|
||||
#acontent {
|
||||
width: 100%;
|
||||
grid-area: content;
|
||||
padding-right: calc($medium);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vue-recycle-scroller__item-wrapper {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.vue-recycle-scroller {
|
||||
padding-left: 1.25rem;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.r-sidebar {
|
||||
grid-area: r-sidebar;
|
||||
border-left: $g-border;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
grid-area: nav;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.l-sidebar {
|
||||
width: 15rem;
|
||||
grid-area: l-sidebar;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr max-content;
|
||||
border-right: $g-border;
|
||||
}
|
||||
|
||||
.b-bar {
|
||||
grid-area: bottombar;
|
||||
border-top: $g-border;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
margin-left: 1.25rem;
|
||||
margin-right: -$medium;
|
||||
padding-right: $medium;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
// ====== MODIFIERS =======
|
||||
|
||||
#app-grid.extendWidth {
|
||||
max-width: 100%;
|
||||
padding-right: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#app-grid.noSidebar {
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-areas:
|
||||
"l-sidebar nav"
|
||||
"l-sidebar content"
|
||||
"bottombar bottombar";
|
||||
|
||||
#acontent {
|
||||
margin-right: 0 !important;
|
||||
padding-right: $medium !important;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
//reduce width to match #acontent
|
||||
width: calc(100% - 1rem);
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#app-grid.NoSideBorders {
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.v-scroll-page {
|
||||
width: calc(100% + $medium) !important;
|
||||
|
||||
.scroller {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-right: 1.25rem;
|
||||
padding-bottom: $content-padding-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.isSmall {
|
||||
.songlist-item {
|
||||
grid-template-columns: 1.75rem 2fr 2.5rem 2.5rem;
|
||||
}
|
||||
|
||||
.song-artists,
|
||||
.song-album {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.isSmallArtists {
|
||||
display: unset !important;
|
||||
font-size: small;
|
||||
color: $white;
|
||||
opacity: 0.67;
|
||||
}
|
||||
}
|
||||
|
||||
.isMedium {
|
||||
// hide album column
|
||||
.songlist-item {
|
||||
grid-template-columns: 1.75rem 1.5fr 1fr 2.5rem 2.5rem;
|
||||
}
|
||||
|
||||
.song-album {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1,150 +0,0 @@
|
||||
// TEXT
|
||||
|
||||
.t-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ellip {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ellip2 {
|
||||
word-wrap: anywhere;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.image {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
// BORDERS
|
||||
.rounded {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.rounded-sm {
|
||||
border-radius: $small;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: $medium;
|
||||
}
|
||||
|
||||
.circular {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid $gray3;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: $gray4;
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.425);
|
||||
}
|
||||
|
||||
// BUTTONS
|
||||
button {
|
||||
border: none;
|
||||
font-size: 0.9rem !important;
|
||||
color: inherit;
|
||||
border-radius: $small;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.25rem;
|
||||
background: linear-gradient(70deg, $gray3, $gray2);
|
||||
padding: 0 $small;
|
||||
|
||||
svg {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&:active {
|
||||
svg {
|
||||
transform: scale(0.75);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient($darkestblue, $darkblue);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-active {
|
||||
background-image: linear-gradient($darkestblue, $darkblue);
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-more {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
// POSITION
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// OTHERS
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-top: 1px $separator solid;
|
||||
color: transparent;
|
||||
margin: $small 0 $small 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// NO THIS, NO THAT (OVERRIDES)
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.no-select {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.load_disabled {
|
||||
pointer-events: all;
|
||||
background: $gray5 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
@import "./app-grid.scss", "./controls.scss", "./inputs.scss",
|
||||
"./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss",
|
||||
"./search-tabheaders.scss", "./album-grid.scss";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#vue-recycle-scroller__item-wrapper {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
html {
|
||||
cursor: default !important;
|
||||
|
||||
& > * {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.loading,
|
||||
html.loading * {
|
||||
cursor: progress !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $body;
|
||||
color: $white;
|
||||
font-family: "SFCompactDisplay", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol";
|
||||
font-size: 1rem;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: default !important;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
input[type="number"] {
|
||||
width: 40px;
|
||||
padding: 4px 5px;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
height: 2.25rem !important;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $gray1;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $blue;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
.tabheaders {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, max-content);
|
||||
justify-content: space-around;
|
||||
margin: 1rem;
|
||||
width: max-content;
|
||||
background-color: $gray4;
|
||||
height: 2.25rem;
|
||||
|
||||
& > * {
|
||||
border-left: solid 1px $gray3;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 $small;
|
||||
|
||||
&:first-child {
|
||||
border-left: solid 1px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.activetab {
|
||||
background-color: $darkblue;
|
||||
transition: all 0.3s ease;
|
||||
border-left: solid 1px transparent;
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
|
||||
.now-playing-track-indicator {
|
||||
background-image: url(../../assets/icons/playing.gif);
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
background-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.last_played {
|
||||
background-image: url(../../assets/icons/playing.webp);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
// paddings
|
||||
.pad-smaller {
|
||||
padding: $smaller;
|
||||
}
|
||||
|
||||
.pad-sm {
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
.pad-medium {
|
||||
padding: $medium;
|
||||
}
|
||||
|
||||
.pad-lg {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
// shadows
|
||||
.shadow-sm {
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.452);
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 0 $medium rgba(0, 0, 0, 0.589);
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
margin-right: 15px;
|
||||
width: calc(100% - 2px);
|
||||
height: 0.3rem;
|
||||
border-radius: 5px;
|
||||
background: $gray4 linear-gradient(90deg, $darkblue, $darkestblue) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
|
||||
height: 0;
|
||||
width: 0.8rem;
|
||||
border-radius: 50%;
|
||||
background: $darkestblue;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: $darkestblue;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
-webkit-appearance: none;
|
||||
|
||||
height: 0;
|
||||
width: 0.8rem;
|
||||
border-radius: 50%;
|
||||
background: $darkestblue;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Input Thumb */
|
||||
input[type="range"]::-webkit-slider-thumb:hover {
|
||||
background: $accent;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb:hover {
|
||||
background: $accent;
|
||||
}
|
||||
|
||||
input[type="range"]::-ms-thumb:hover {
|
||||
background: $accent;
|
||||
}
|
||||
|
||||
/* Input Track */
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type="range"]::-ms-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
@mixin ximage {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// media query mixins
|
||||
@mixin phone-only {
|
||||
@media (max-width: 599px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet-landscape {
|
||||
@media (max-width: 1080px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet-portrait {
|
||||
@media (max-width: 810) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin for-desktop-down {
|
||||
@media (max-width: 1600px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin for-desktop-up {
|
||||
@media (min-width: 1800px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
// colors
|
||||
|
||||
$separator: #ffffff2f;
|
||||
$highlight-blue: #006eff;
|
||||
$darkestblue: #234ece;
|
||||
$bbb: #161616; //bottom controls background
|
||||
$theme: #464545fd;
|
||||
|
||||
// sizes
|
||||
$small: 0.5rem;
|
||||
$smaller: 0.25rem;
|
||||
$medium: 0.75rem;
|
||||
$large: 1.5rem;
|
||||
$larger: 2rem;
|
||||
|
||||
$banner-height: 18rem;
|
||||
$song-item-height: 4rem;
|
||||
$content-padding-bottom: 2rem;
|
||||
|
||||
// apple human design guideline colors
|
||||
$black: #181a1c;
|
||||
$white: #ffffffde;
|
||||
|
||||
$gray: #1c1c1e;
|
||||
$gray1: rgb(142, 142, 147);
|
||||
$gray2: rgb(99, 99, 102);
|
||||
$gray3: rgb(72, 72, 74);
|
||||
$gray4: rgb(58, 58, 60);
|
||||
$gray5: rgb(44, 44, 46);
|
||||
$body: rgba(0, 0, 0, 0.95);
|
||||
|
||||
$red: #ff453a;
|
||||
$blue: #0a84ff;
|
||||
$darkblue: #055ee2;
|
||||
$green: rgb(20, 160, 55);
|
||||
$yellow: rgb(255, 214, 10);
|
||||
$orange: rgb(255, 159, 10);
|
||||
$pink: rgb(255, 55, 95);
|
||||
$purple: #bf5af2;
|
||||
$brown: rgb(172, 142, 104);
|
||||
$indigo: #5e5ce6;
|
||||
$teal: rgb(64, 200, 224);
|
||||
|
||||
$primary: $gray4;
|
||||
$accent: $gray1;
|
||||
$secondary: $gray5;
|
||||
$danger: $red;
|
||||
$track-hover: $gray4;
|
||||
$context: black;
|
||||
$playlist-card-bg: $gray4;
|
||||
|
||||
// SVG COLORS
|
||||
$default: $accent;
|
||||
$side-nav-svg: $red;
|
||||
|
||||
$overshoot: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
@@ -1,15 +0,0 @@
|
||||
@import
|
||||
"./mixins.scss",
|
||||
"./variables",
|
||||
"./ProgressBar.scss",
|
||||
"./BottomBar/BottomBar.scss",
|
||||
"./Global",
|
||||
"./moz.scss"
|
||||
;
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "SFCompactDisplay";
|
||||
src: url("../sf-compact.woff") format("woff");
|
||||
}
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
// Styles that only apply to our dear Firefox
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
#acontent {
|
||||
margin-right: calc(-1rem + 1px);
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
// applies to playlist list page
|
||||
.content-page {
|
||||
margin-right: calc(0rem - ($medium + 4px));
|
||||
}
|
||||
|
||||
// virtual scroller pages: folder, playlist, album
|
||||
.header-list-layout {
|
||||
margin-right: calc(0rem - ($medium + 4px)) !important;
|
||||
|
||||
.scrollable {
|
||||
padding-right: calc(1rem - 3px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-scroll-page {
|
||||
width: calc(100% + 1rem) !important;
|
||||
|
||||
.scroller {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// padding-right: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#app-grid.noSidebar > #acontent {
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
margin-right: -1rem !important;
|
||||
}
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<div class="al-bio rounded">
|
||||
<div class="separator" id="av-sep"></div>
|
||||
<div class="grid albumbio">
|
||||
<div class="left rounded">
|
||||
<img
|
||||
class="rect rounded"
|
||||
:src="paths.images.thumb + images.album"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="circle"></div>
|
||||
<img
|
||||
class="circle"
|
||||
:src="paths.images.artist + images.artist"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="bio rounded bg-primary" v-html="bio" v-if="bio"></div>
|
||||
<div class="bio rounded bg-primary" v-else>No bio found</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { paths } from "@/config";
|
||||
|
||||
defineProps<{
|
||||
bio: string | null;
|
||||
images: {
|
||||
artist: string;
|
||||
album: string;
|
||||
};
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.al-bio {
|
||||
padding: $small;
|
||||
|
||||
.albumbio {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $small;
|
||||
min-height: 15rem;
|
||||
|
||||
@include for-desktop-down {
|
||||
grid-template-columns: 1fr !important;
|
||||
|
||||
.left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-right: $small;
|
||||
overflow: hidden;
|
||||
border: solid 1px $gray5;
|
||||
background-image: linear-gradient(37deg, $gray5 20%, $gray4);
|
||||
|
||||
// @include for-desktop-down {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
$rectpos: calc(50% - 5rem);
|
||||
|
||||
.rect {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
position: absolute;
|
||||
bottom: 0rem;
|
||||
left: $rectpos;
|
||||
transform: rotate(15deg) translate(-1rem, 1rem);
|
||||
z-index: 1;
|
||||
transition: all 0.5s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(0deg) translate(-1rem, 0) scale(1.1);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
bottom: 0;
|
||||
left: calc($rectpos + 7rem);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 2rem rgb(0, 0, 0);
|
||||
transition: all 0.25s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bio {
|
||||
border: solid 1px $gray5;
|
||||
padding: $small;
|
||||
line-height: 1.5rem;
|
||||
|
||||
&::after {
|
||||
content: " ...";
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="album_disc_header no-select"
|
||||
v-if="album_disc.is_album_disc_number"
|
||||
>
|
||||
<div class="disc_number">Disc {{ album_disc.album_page_disc_number }}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AlbumDisc } from "@/interfaces";
|
||||
|
||||
defineProps<{
|
||||
album_disc: AlbumDisc;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.album_disc_header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr max-content;
|
||||
align-items: center;
|
||||
padding-left: 1rem;
|
||||
height: $song-item-height;
|
||||
|
||||
.disc_number {
|
||||
font-size: $medium;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<div class="artist-albums">
|
||||
<h3>
|
||||
<span>{{ title }} </span>
|
||||
<SeeAll
|
||||
v-if="maxAbumCards <= albums.length"
|
||||
:route="route"
|
||||
@click="
|
||||
!favorites ? useArtistDiscographyStore().setPage(albumType) : null
|
||||
"
|
||||
/>
|
||||
</h3>
|
||||
<div class="cards">
|
||||
<AlbumCard v-for="a in albums.slice(0, maxAbumCards)" :album="a" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Album } from "@/interfaces";
|
||||
import { maxAbumCards } from "@/stores/content-width";
|
||||
import { discographyAlbumTypes } from "@/composables/enums";
|
||||
import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
|
||||
|
||||
import AlbumCard from "../shared/AlbumCard.vue";
|
||||
import SeeAll from "../shared/SeeAll.vue";
|
||||
|
||||
defineProps<{
|
||||
title: string;
|
||||
albums: Album[];
|
||||
albumType?: discographyAlbumTypes;
|
||||
favorites?: boolean;
|
||||
route: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.artist-albums {
|
||||
overflow: hidden;
|
||||
|
||||
h3 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr max-content;
|
||||
align-items: center;
|
||||
padding: 0 $medium;
|
||||
margin-bottom: $small;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
|
||||
gap: 5rem 0;
|
||||
}
|
||||
|
||||
.album-card {
|
||||
&:hover {
|
||||
background-color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="genres-banner"
|
||||
:class="{
|
||||
nocontrast: album.info.colors ? isLight(album.info.colors[0]) : false,
|
||||
}"
|
||||
>
|
||||
<div class="rounded pad-sm">
|
||||
{{ album.info.genres.length ? "Genres" : "No genres" }}
|
||||
</div>
|
||||
<div
|
||||
v-for="genre in album.info.genres"
|
||||
class="rounded pad-sm"
|
||||
:style="{ backgroundColor: album.info.colors[0] }"
|
||||
>
|
||||
{{ genre }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
import useAlbumStore from "@/stores/pages/album";
|
||||
import { isLight } from "@/composables/colors/album";
|
||||
|
||||
const album = useAlbumStore();
|
||||
|
||||
onMounted(async () => {
|
||||
// onMounted, fetch data to be used in the component below this one.
|
||||
const album = useAlbumStore();
|
||||
await album.fetchArtistAlbums();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.genres-banner.nocontrast {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.genres-banner {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
font-size: 0.9rem;
|
||||
padding-left: $medium;
|
||||
text-transform: capitalize;
|
||||
user-select: none;
|
||||
|
||||
div {
|
||||
background-color: $gray5;
|
||||
min-width: 4rem;
|
||||
text-align: center;
|
||||
outline: solid 1px $gray;
|
||||
padding: $small 1rem;
|
||||
|
||||
&:first-child {
|
||||
background-color: white;
|
||||
color: black;
|
||||
outline-color: white;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $darkestblue !important;
|
||||
outline-color: $darkestblue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,263 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="album-header-ambient rounded"
|
||||
style="height: 100%; width: 100%"
|
||||
:style="{
|
||||
boxShadow: album.colors ? `0 .5rem 2rem ${album.colors[0]}` : '',
|
||||
}"
|
||||
></div>
|
||||
<div
|
||||
class="a-header rounded"
|
||||
ref="albumheaderthing"
|
||||
:style="{
|
||||
backgroundColor: album.colors ? album.colors[0] : '',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="big-img no-scroll"
|
||||
:class="`${albumHeaderSmall ? 'imgSmall' : ''} shadow-lg rounded-sm`"
|
||||
>
|
||||
<img :src="imguri.thumb.large + album.image" class="rounded-sm" />
|
||||
</div>
|
||||
<div
|
||||
class="info"
|
||||
:class="{ nocontrast: album.colors ? isLight(album.colors[0]) : false }"
|
||||
>
|
||||
<div class="album-info">
|
||||
<div class="top">
|
||||
<div v-auto-animate class="h">
|
||||
<span v-if="album.is_soundtrack">Soundtrack</span>
|
||||
<span v-else-if="album.is_compilation">Compilation</span>
|
||||
<span v-else-if="album.is_EP">EP</span>
|
||||
<span v-else-if="album.is_single">Single</span>
|
||||
<span v-else>Album</span>
|
||||
</div>
|
||||
<div class="title ellip2" v-tooltip>
|
||||
{{ album.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="stats ellip">
|
||||
<div class="border rounded-sm pad-sm">
|
||||
<ArtistName
|
||||
:artists="album.albumartists"
|
||||
:albumartists="''"
|
||||
:small="true"
|
||||
/> • {{ album.date }} • {{ album.count }}
|
||||
{{ album.count === 1 ? "Track" : "Tracks" }} •
|
||||
{{ formatSeconds(album.duration, true) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
|
||||
<HeartSvg :state="album.is_favorite" @handleFav="handleFav" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="art" v-if="!albumHeaderSmall">
|
||||
<RouterLink
|
||||
v-for="a in album.albumartists"
|
||||
:to="{
|
||||
name: Routes.artist,
|
||||
params: { hash: a.artisthash },
|
||||
}"
|
||||
>
|
||||
<img
|
||||
:src="imguri.artist.small + a.image"
|
||||
class="shadow-lg circular"
|
||||
loading="lazy"
|
||||
:title="a.name"
|
||||
:style="{ border: `solid 2px ${album.colors[0]}` }"
|
||||
/>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import ArtistName from "@/components/shared/ArtistName.vue";
|
||||
import { paths } from "@/config";
|
||||
import { albumHeaderSmall } from "@/stores/content-width";
|
||||
import useNavStore from "@/stores/nav";
|
||||
import useAlbumStore from "@/stores/pages/album";
|
||||
import { formatSeconds, useVisibility } from "@/utils";
|
||||
import { isLight } from "@/composables/colors/album";
|
||||
import { favType, playSources } from "@/composables/enums";
|
||||
import { Album } from "@/interfaces";
|
||||
import { Routes } from "@/router/routes";
|
||||
import HeartSvg from "../shared/HeartSvg.vue";
|
||||
|
||||
import PlayBtnRect from "../shared/PlayBtnRect.vue";
|
||||
import favoriteHandler from "@/composables/favoriteHandler";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
// const props = defineProps<{
|
||||
// album: Album;
|
||||
// }>();
|
||||
|
||||
const albumheaderthing = ref<any>(null);
|
||||
const imguri = paths.images;
|
||||
const nav = useNavStore();
|
||||
const store = useAlbumStore();
|
||||
|
||||
const { info: album } = storeToRefs(store);
|
||||
|
||||
defineEmits<{
|
||||
(event: "playThis"): void;
|
||||
}>();
|
||||
|
||||
/**
|
||||
* Calls the `toggleShowPlay` method which toggles the play button in the nav.
|
||||
* Emits the `resetBottomPadding` event to reset the album page content bottom padding.
|
||||
*
|
||||
* @param {boolean} state the new visibility state of the album page header.
|
||||
*/
|
||||
function handleVisibilityState(state: boolean) {
|
||||
nav.toggleShowPlay(state);
|
||||
}
|
||||
|
||||
useVisibility(albumheaderthing, handleVisibilityState);
|
||||
|
||||
// const is_fav = ref(props.album.is_favorite);
|
||||
|
||||
function handleFav() {
|
||||
favoriteHandler(
|
||||
album.value.is_favorite,
|
||||
favType.album,
|
||||
album.value.albumhash,
|
||||
store.makeFavorite,
|
||||
store.removeFavorite
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.album-header-ambient {
|
||||
width: 20rem;
|
||||
position: absolute;
|
||||
z-index: -100 !important;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.a-header {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
height: $banner-height;
|
||||
background-color: $black;
|
||||
align-items: flex-end;
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: $small;
|
||||
}
|
||||
|
||||
.big-img {
|
||||
height: calc(100%);
|
||||
width: 16rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
img {
|
||||
height: 16rem;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.big-img.imgSmall {
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
|
||||
img {
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nocontrast {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr max-content;
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
|
||||
.art {
|
||||
display: inline-flex;
|
||||
gap: $small;
|
||||
|
||||
img {
|
||||
height: 3rem;
|
||||
background-color: $gray;
|
||||
border: solid 2px $white;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 6rem;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.top {
|
||||
.h {
|
||||
font-size: 14px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
width: fit-content;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-size: 1.15rem;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: $smaller;
|
||||
|
||||
.stats {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
|
||||
.artistname {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// width: fit-content;
|
||||
// cursor: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,218 +0,0 @@
|
||||
<template>
|
||||
<div class="albums-view rounded">
|
||||
<div class="al-header">
|
||||
<div class="heading">ALL ALBUMS</div>
|
||||
<div class="search">
|
||||
<input type="search" placeholder="Search albums" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="all-albums">
|
||||
<router-link
|
||||
:to="{ path: '/albums/1' }"
|
||||
class="item rounded"
|
||||
v-for="album in albums"
|
||||
:key="album"
|
||||
>
|
||||
<div class="play"></div>
|
||||
<div class="album-art image rounded"></div>
|
||||
<div class="name ellip">{{ album.title }}</div>
|
||||
<div class="artist ellip">{{ album.albumartists }}</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
const albums = [
|
||||
{
|
||||
title: "Album 2 af sjf s d kjf saf ",
|
||||
artist:
|
||||
"Artist ad asd f adf d da df d adf ds d fadsf fs dfds sf dadf d",
|
||||
},
|
||||
{
|
||||
title: "Album 3",
|
||||
artist: "Artist 3",
|
||||
},
|
||||
{
|
||||
title: "Album 1",
|
||||
artist: "Artist 1",
|
||||
},
|
||||
{
|
||||
title: "Album 2",
|
||||
artist: "Artist 2",
|
||||
},
|
||||
{
|
||||
title: "Album 3",
|
||||
artist: "Artist 3",
|
||||
},
|
||||
{
|
||||
title: "Album 1",
|
||||
artist: "Artist 1",
|
||||
},
|
||||
{
|
||||
title: "Album 2",
|
||||
artist: "Artist 2",
|
||||
},
|
||||
{
|
||||
title: "Album 3",
|
||||
artist: "Artist 3",
|
||||
},
|
||||
{
|
||||
title: "Album 1",
|
||||
artist: "Artist 1",
|
||||
},
|
||||
{
|
||||
title: "Album 2",
|
||||
artist: "Artist 2",
|
||||
},
|
||||
{
|
||||
title: "Album 3",
|
||||
artist: "Artist 3",
|
||||
},
|
||||
{
|
||||
title: "Album 1",
|
||||
artist: "Artist 1",
|
||||
},
|
||||
{
|
||||
title: "Album 2",
|
||||
artist: "Artist 2",
|
||||
},
|
||||
{
|
||||
title: "Album 3",
|
||||
artist: "Artist 3",
|
||||
},
|
||||
{
|
||||
title: "Album 1",
|
||||
artist: "Artist 1",
|
||||
},
|
||||
{
|
||||
title: "Album 2",
|
||||
artist: "Artist 2",
|
||||
},
|
||||
{
|
||||
title: "Album 3",
|
||||
artist: "Artist 3",
|
||||
},
|
||||
{
|
||||
title: "Album 1",
|
||||
artist: "Artist 1",
|
||||
},
|
||||
{
|
||||
title: "Album 2",
|
||||
artist: "Artist 2",
|
||||
},
|
||||
{
|
||||
title: "Album 3",
|
||||
artist: "Artist 3",
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
albums,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.albums-view {
|
||||
height: calc(100% - 14.5rem);
|
||||
padding: $small;
|
||||
margin-top: $small;
|
||||
overflow: hidden;
|
||||
|
||||
.all-albums {
|
||||
height: calc(100% - 4rem);
|
||||
padding: $small 0 0 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 10.9rem;
|
||||
height: 13rem;
|
||||
padding: $small 0.95rem $small 0.95rem;
|
||||
margin: $smaller;
|
||||
transition: all 0.2s ease-in-out;
|
||||
cursor: default;
|
||||
float: left;
|
||||
|
||||
.play {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
left: $small;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
background: url(../../assets/icons/play.svg) no-repeat center;
|
||||
background-size: 60%;
|
||||
cursor: default;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #574a4a;
|
||||
|
||||
.play {
|
||||
transition: 0.5s all ease;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.album-art {
|
||||
height: 9em;
|
||||
width: 9em;
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
}
|
||||
|
||||
.name {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
margin-top: $small;
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-size: small;
|
||||
font-weight: lighter;
|
||||
text-align: left;
|
||||
color: rgba(255, 255, 255, 0.699);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.al-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 4em;
|
||||
padding: 0 $small 0 $small;
|
||||
|
||||
.search {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding-right: $small;
|
||||
|
||||
input {
|
||||
width: 30rem;
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
padding-left: 1rem;
|
||||
background-color: #4645456c;
|
||||
color: rgba(255, 255, 255, 0.521);
|
||||
font-size: 1rem;
|
||||
line-height: 3rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input::-webkit-search-cancel-button {
|
||||
position: relative;
|
||||
right: 20px;
|
||||
cursor: default;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,164 +0,0 @@
|
||||
<template>
|
||||
<div class="top-albums">
|
||||
<div class="heading">TOP ALBUMS</div>
|
||||
<div class="items">
|
||||
<router-link
|
||||
:to="{ path: '/albums/1' }"
|
||||
class="item rounded"
|
||||
v-for="album in albums"
|
||||
:key="album"
|
||||
>
|
||||
<div class="image rounded"></div>
|
||||
<div class="info">
|
||||
<div class="name ellip">{{ album.title }}</div>
|
||||
<div class="artist ellip">{{ album.albumartists }}</div>
|
||||
<div class="separator"></div>
|
||||
<div class="top">
|
||||
<div class="play-icon"></div>
|
||||
<div class="text ellip">{{ album.top_track }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
const albums = [
|
||||
{
|
||||
title: "Thriller",
|
||||
artist: "Michael Jackson, Sting, Shaggy, Juice WRLD",
|
||||
top_track: "Beat It and althought you whatever",
|
||||
},
|
||||
{
|
||||
title: "Figting Demons",
|
||||
artist: "Juice WRLD",
|
||||
top_track: "Girl Of My Dreams",
|
||||
},
|
||||
{
|
||||
title: "Crybaby",
|
||||
artist: "Lil Peep",
|
||||
top_track: "Lil kennedy",
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
albums,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.top-albums {
|
||||
height: 14rem;
|
||||
border-radius: $small;
|
||||
padding: $small;
|
||||
|
||||
.heading {
|
||||
margin: $small 0 1.5em $small;
|
||||
}
|
||||
|
||||
.items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: $small;
|
||||
|
||||
.item {
|
||||
height: 10rem;
|
||||
width: clamp(10rem, 100%, 25rem);
|
||||
background-color: rgb(7, 6, 6);
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 7.5rem 1fr;
|
||||
padding: $small;
|
||||
cursor: default;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.5em);
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
border-radius: $small;
|
||||
}
|
||||
|
||||
.info .name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info .artist {
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.699);
|
||||
}
|
||||
|
||||
.info .top {
|
||||
height: 2.5rem;
|
||||
background-color: $blue;
|
||||
border-radius: $small;
|
||||
margin-left: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 2.5rem 1fr;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
user-select: none;
|
||||
|
||||
.play-icon {
|
||||
margin: 0 0 0 $small;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
background-image: url(../../assets/icons/play.svg);
|
||||
background-size: 96%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(0, 45, 104);
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.play-icon {
|
||||
transform: scale(1.2);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
background-color: rgb(177, 116, 2);
|
||||
|
||||
.image {
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background-color: rgb(0, 74, 117);
|
||||
|
||||
.image {
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
background-color: rgb(161, 106, 106);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
<template><div style="height: 1px;"></div></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
import useArtistPageStore from "@/stores/pages/artist";
|
||||
import { onBeforeRouteUpdate } from "vue-router";
|
||||
|
||||
const store = useArtistPageStore();
|
||||
|
||||
onMounted(async () => {
|
||||
await store.getArtistAlbums();
|
||||
});
|
||||
|
||||
onBeforeRouteUpdate(async (to) => {
|
||||
store.resetAlbums();
|
||||
await store.getArtistAlbums();
|
||||
});
|
||||
</script>
|
||||
@@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="artist-header-ambient rounded"
|
||||
style="height: 100%; width: 100%"
|
||||
:style="{
|
||||
boxShadow: artist.info.colors.length
|
||||
? `0 .5rem 2rem ${artist.info.colors[0]}`
|
||||
: undefined,
|
||||
}"
|
||||
></div>
|
||||
<div class="artist-page-header rounded no-scroll">
|
||||
<div
|
||||
class="artist-info"
|
||||
:class="{
|
||||
nocontrast: artist.info.colors ? isLight(artist.info.colors[0]) : false,
|
||||
}"
|
||||
>
|
||||
<section class="text">
|
||||
<div class="card-title">Artist</div>
|
||||
<div class="artist-name ellip2">{{ artist.info.name }}</div>
|
||||
<div class="stats">
|
||||
{{ artist.info.trackcount }} Track{{
|
||||
`${artist.info.trackcount == 1 ? "" : "s"}`
|
||||
}}
|
||||
• {{ artist.info.albumcount }} Album{{
|
||||
`${artist.info.albumcount == 1 ? "" : "s"}`
|
||||
}}
|
||||
•
|
||||
{{ formatSeconds(artist.info.duration, true) }}
|
||||
</div>
|
||||
</section>
|
||||
<div class="buttons">
|
||||
<PlayBtnRect :source="playSources.artist" :store="useArtistPageStore" />
|
||||
<HeartSvg @handleFav="handleFav" :state="artist.info.is_favorite" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="artist-img no-select">
|
||||
<img :src="paths.images.artist.large + artist.info.image" />
|
||||
</div>
|
||||
<div
|
||||
class="gradient"
|
||||
:style="{
|
||||
backgroundImage: artist.info.colors[0]
|
||||
? `linear-gradient(to left, transparent 30%,
|
||||
${artist.info.colors[0]} 50%,
|
||||
${artist.info.colors[0]} 100%)`
|
||||
: '',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { paths } from "@/config";
|
||||
import useArtistPageStore from "@/stores/pages/artist";
|
||||
import formatSeconds from "@/utils/useFormatSeconds";
|
||||
import { isLight } from "@/composables/colors/album";
|
||||
import { favType, playSources } from "@/composables/enums";
|
||||
import favoriteHandler from "@/composables/favoriteHandler";
|
||||
|
||||
import PlayBtnRect from "../shared/PlayBtnRect.vue";
|
||||
import HeartSvg from "@/components/shared/HeartSvg.vue";
|
||||
|
||||
const artist = useArtistPageStore();
|
||||
|
||||
function handleFav() {
|
||||
favoriteHandler(
|
||||
artist.info.is_favorite,
|
||||
favType.artist,
|
||||
artist.info.artisthash,
|
||||
artist.makeFavorite,
|
||||
artist.removeFavorite
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.artist-header-ambient {
|
||||
height: 17rem;
|
||||
position: absolute;
|
||||
opacity: 0.25;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
.artist-page-header {
|
||||
height: 18rem;
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
position: relative;
|
||||
|
||||
.artist-img {
|
||||
// border: solid red;
|
||||
height: 18rem;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
object-position: 0% 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient {
|
||||
position: absolute;
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
transparent 10%,
|
||||
$gray 50%,
|
||||
$gray 100%
|
||||
);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
z-index: 1;
|
||||
padding: 1rem;
|
||||
padding-right: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
gap: 1rem;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $small;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
opacity: 0.5;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.stats {
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
.artist-info.nocontrast {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: $small;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div class="artist-top-tracks">
|
||||
<h3 class="section-title">
|
||||
{{ title }}
|
||||
<SeeAll :route="route" />
|
||||
</h3>
|
||||
<div class="tracks" :class="{ isSmall, isMedium }">
|
||||
<SongItem
|
||||
v-for="(song, index) in tracks"
|
||||
:track="song"
|
||||
:index="index + 1"
|
||||
@playThis="playHandler(index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="error" v-if="!tracks.length">No tracks</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SongItem from "../shared/SongItem.vue";
|
||||
import { Track } from "@/interfaces";
|
||||
import { isMedium, isSmall } from "@/stores/content-width";
|
||||
import SeeAll from "../shared/SeeAll.vue";
|
||||
|
||||
defineProps<{
|
||||
tracks: Track[];
|
||||
route: string;
|
||||
title: string;
|
||||
playHandler: (index: number) => void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.artist-top-tracks {
|
||||
margin-top: 2rem;
|
||||
|
||||
.section-title {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding-left: 1rem;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 1rem !important; // applies to favorite page
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<div class="artists-view rounded">
|
||||
<div class="al-header">
|
||||
<div class="heading">ALL ARTISTS</div>
|
||||
<div class="search">
|
||||
<input type="search" placeholder="Search artists" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="all-albums">
|
||||
<div class="item rounded" v-for="artist in artists" :key="artist">
|
||||
<div class="album-art image rounded"></div>
|
||||
<div class="name t-center ellip">{{ artist.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
const artists = [
|
||||
{
|
||||
name: "Juice Wrld",
|
||||
},
|
||||
{
|
||||
name: "Eminem",
|
||||
},
|
||||
{
|
||||
name: "Sting",
|
||||
},
|
||||
{
|
||||
name: "Juice Wrld",
|
||||
},
|
||||
{
|
||||
name: "Eminem",
|
||||
},
|
||||
{
|
||||
name: "Sting",
|
||||
},
|
||||
{
|
||||
name: "Juice Wrld",
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
artists,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.artists-view {
|
||||
height: calc(100% - 14.5rem);
|
||||
padding: $small;
|
||||
margin-top: $small;
|
||||
overflow: hidden;
|
||||
|
||||
.all-albums {
|
||||
height: calc(100% - 4rem);
|
||||
border-top: 1px solid $separator;
|
||||
padding: $small 0 0 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 10.9rem;
|
||||
height: 12rem;
|
||||
padding: $small 0.95rem $small 0.95rem;
|
||||
margin: $smaller;
|
||||
transition: all 0.2s ease-in-out;
|
||||
cursor: default;
|
||||
float: left;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(74, 84, 87);
|
||||
// border: solid
|
||||
}
|
||||
|
||||
.album-art {
|
||||
height: 9em;
|
||||
width: 9em;
|
||||
border-radius: 50%;
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: $small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.al-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 4em;
|
||||
padding: 0 $small 0 $small;
|
||||
|
||||
.search {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding-right: $small;
|
||||
|
||||
input {
|
||||
width: 30rem;
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
padding-left: 1rem;
|
||||
background-color: #4645456c;
|
||||
color: rgba(255, 255, 255, 0.521);
|
||||
font-size: 1rem;
|
||||
line-height: 3rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input::-webkit-search-cancel-button {
|
||||
position: relative;
|
||||
right: 20px;
|
||||
cursor: default;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,160 +0,0 @@
|
||||
<template>
|
||||
<div class="top-artists">
|
||||
<div class="heading">TOP ARTISTS</div>
|
||||
<div class="items">
|
||||
<div class="item rounded" v-for="artist in artists" :key="artist">
|
||||
<div class="image"></div>
|
||||
<div class="info">
|
||||
<div class="name ellip">{{ artist.name }}</div>
|
||||
<div class="artist ellip">{{ artist.album_count }} Albums</div>
|
||||
<div class="separator"></div>
|
||||
<div class="top">
|
||||
<div class="play-icon"></div>
|
||||
<div class="text ellip">{{ artist.top_track }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
export default {
|
||||
setup() {
|
||||
const artists = [
|
||||
{
|
||||
name: "Sting",
|
||||
album_count: "12",
|
||||
top_track: "Alien in Newyork",
|
||||
},
|
||||
{
|
||||
name: "Juice Wrld",
|
||||
album_count: "4",
|
||||
top_track: "Girl Of My Dreams",
|
||||
},
|
||||
{
|
||||
name: "Lil Peep",
|
||||
album_count: "6",
|
||||
top_track: "Haunt U",
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
artists,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.top-artists {
|
||||
height: 14rem;
|
||||
border-radius: $small;
|
||||
padding: $small;
|
||||
|
||||
.heading {
|
||||
margin: $small 0 1.5em $small;
|
||||
}
|
||||
|
||||
.items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: $small;
|
||||
|
||||
.item {
|
||||
height: 10rem;
|
||||
width: 100%;
|
||||
max-width: 25rem;
|
||||
background-color: rgb(7, 6, 6);
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 7.5rem 1fr;
|
||||
padding: $small;
|
||||
cursor: default;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-.5em);
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
background-image: url("../../assets/images/null.webp");
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info .name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info .artist {
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.699);
|
||||
}
|
||||
|
||||
.info .top {
|
||||
height: 2.5rem;
|
||||
background-color: rgb(51, 129, 20);
|
||||
border-radius: $small;
|
||||
margin-left: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 2.5rem 1fr;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
user-select: none;
|
||||
|
||||
.play-icon {
|
||||
margin: 0 0 0 $small;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
background-image: url(../../assets/icons/play.svg);
|
||||
background-size: 96%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(0, 134, 89);
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.play-icon {
|
||||
transform: scale(1.2);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
background-color: rgb(177, 116, 2);
|
||||
|
||||
.image {
|
||||
background-image: url("../../assets/images/null.webp");
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2){
|
||||
background-color: rgb(0, 74, 117);
|
||||
|
||||
.image {
|
||||
background-image: url("../../assets/images/null.webp");
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3){
|
||||
background-color: rgb(161, 106, 106);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,253 +0,0 @@
|
||||
<template>
|
||||
<div class="b-bar">
|
||||
<div class="centered">
|
||||
<div class="inner">
|
||||
<div class="with-icons rounded-sm border">
|
||||
<RouterLink
|
||||
title="go to album"
|
||||
:to="{
|
||||
name: Routes.album,
|
||||
params: {
|
||||
hash: queue.currenttrack?.albumhash || ' ',
|
||||
},
|
||||
}"
|
||||
>
|
||||
<img
|
||||
class="rounded-sm"
|
||||
:src="paths.images.thumb.small + queue.currenttrack?.image"
|
||||
alt=""
|
||||
/>
|
||||
</RouterLink>
|
||||
|
||||
<button>
|
||||
<HeartSvg
|
||||
:state="queue.currenttrack?.is_favorite"
|
||||
@handleFav="handleFav"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="repeat"
|
||||
:class="{ 'repeat-disabled': settings.no_repeat }"
|
||||
@click="settings.toggleRepeatMode"
|
||||
:title="
|
||||
settings.repeat_all
|
||||
? 'Repeat all'
|
||||
: settings.no_repeat
|
||||
? 'No repeat'
|
||||
: 'Repeat one'
|
||||
"
|
||||
>
|
||||
<RepeatOneSvg v-if="settings.repeat_one" />
|
||||
<RepeatAllSvg v-else />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="with-title">
|
||||
<div class="time time-current">
|
||||
<span>
|
||||
{{ formatSeconds(queue.duration.current || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<div v-tooltip class="title ellip">
|
||||
{{ queue.currenttrack?.title || "Hello there" }}
|
||||
</div>
|
||||
<ArtistName
|
||||
:artists="queue.currenttrack?.artist || []"
|
||||
:albumartists="
|
||||
queue.currenttrack?.albumartist || 'Welcome to Swing'
|
||||
"
|
||||
class="artist"
|
||||
/>
|
||||
</div>
|
||||
<div class="time time-full">
|
||||
<span>
|
||||
{{
|
||||
formatSeconds(
|
||||
queue.currenttrack ? queue.currenttrack.duration : 0
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Progress />
|
||||
</div>
|
||||
<div class="buttons rounded-sm border">
|
||||
<HotKeys />
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Routes } from "@/router/routes";
|
||||
import { paths } from "@/config";
|
||||
import { formatSeconds } from "@/utils";
|
||||
import { favType } from "@/composables/enums";
|
||||
import favoriteHandler from "@/composables/favoriteHandler";
|
||||
|
||||
import useQStore from "@/stores/queue";
|
||||
import useSettingsStore from "@/stores/settings";
|
||||
|
||||
import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
|
||||
import Progress from "@/components/LeftSidebar/NP/Progress.vue";
|
||||
import ArtistName from "@/components/shared/ArtistName.vue";
|
||||
|
||||
import HeartSvg from "./shared/HeartSvg.vue";
|
||||
import RepeatAllSvg from "@/assets/icons/repeat.svg";
|
||||
import RepeatOneSvg from "@/assets/icons/repeat-one.svg";
|
||||
|
||||
const queue = useQStore();
|
||||
const settings = useSettingsStore();
|
||||
|
||||
function handleFav() {
|
||||
favoriteHandler(
|
||||
queue.currenttrack?.is_favorite,
|
||||
favType.track,
|
||||
queue.currenttrack?.trackhash || "",
|
||||
() => null,
|
||||
() => null
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.b-bar {
|
||||
background-color: rgb(22, 22, 22);
|
||||
display: grid;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
::-moz-range-thumb {
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
::-webkit-slider-thumb {
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
::-ms-thumb {
|
||||
height: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
padding: $small $medium;
|
||||
margin: 0 auto;
|
||||
|
||||
.inner {
|
||||
display: grid;
|
||||
height: 3rem;
|
||||
grid-template-columns: max-content 1fr max-content;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.with-icons {
|
||||
background-color: rgba(255, 255, 255, 0.048);
|
||||
display: grid;
|
||||
gap: $small;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
margin-top: -$smaller;
|
||||
|
||||
button {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button.repeat {
|
||||
svg {
|
||||
transform: scale(0.75);
|
||||
}
|
||||
}
|
||||
|
||||
button.repeat.repeat-disabled {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 2.75rem;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
margin-top: $smaller;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 30rem;
|
||||
|
||||
@media (max-width: 833px) {
|
||||
width: 20rem !important;
|
||||
}
|
||||
|
||||
.with-title {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr max-content;
|
||||
align-items: flex-end;
|
||||
gap: $smaller;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: $medium;
|
||||
height: fit-content;
|
||||
width: 3rem;
|
||||
|
||||
span {
|
||||
background-color: $gray3;
|
||||
border-radius: $smaller;
|
||||
padding: 0 $smaller;
|
||||
}
|
||||
}
|
||||
|
||||
.time-full {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.tags {
|
||||
font-size: small;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
place-items: center;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.artist {
|
||||
opacity: 0.75;
|
||||
margin-bottom: -$smaller;
|
||||
font-size: $medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
height: 100%;
|
||||
margin-top: -$smaller;
|
||||
background-color: rgba(255, 255, 255, 0.048);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: grid;
|
||||
place-content: end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="context-menu rounded shadow-lg no-select"
|
||||
ref="contextMenuRef"
|
||||
id="context-menu"
|
||||
:style="{
|
||||
opacity: context.visible ? '1' : '0',
|
||||
}"
|
||||
>
|
||||
<ContextItem
|
||||
class="context-item"
|
||||
v-for="option in context.options"
|
||||
:key="option.label"
|
||||
:class="[{ critical: option.critical }, option.type]"
|
||||
:option="option"
|
||||
:childrenShowMode="settings.contextChildrenShowMode"
|
||||
@hideContextMenu="context.hideContextMenu()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
|
||||
import useContextStore from "@/stores/context";
|
||||
import useSettingsStore from "@/stores/settings";
|
||||
|
||||
import ContextItem from "./Contextmenu/ContextItem.vue";
|
||||
|
||||
const context = useContextStore();
|
||||
const settings = useSettingsStore();
|
||||
const contextMenuRef = ref<HTMLElement>();
|
||||
|
||||
let watcher: any = null;
|
||||
|
||||
context.$subscribe((mutation, state) => {
|
||||
if (state.visible) {
|
||||
setTimeout(() => {
|
||||
if (watcher !== null) {
|
||||
watcher();
|
||||
}
|
||||
watcher = onClickOutside(
|
||||
contextMenuRef,
|
||||
(e) => {
|
||||
e.stopImmediatePropagation();
|
||||
context.hideContextMenu();
|
||||
},
|
||||
{
|
||||
capture: false,
|
||||
}
|
||||
);
|
||||
}, 200);
|
||||
return;
|
||||
}
|
||||
|
||||
if (watcher !== null) {
|
||||
watcher();
|
||||
}
|
||||
|
||||
// wat();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 12rem;
|
||||
z-index: 10000 !important;
|
||||
transform: scale(0);
|
||||
height: min-content;
|
||||
|
||||
padding: $small 0;
|
||||
background: $context;
|
||||
transform-origin: top left;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.separator {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.critical {
|
||||
&:hover {
|
||||
background-color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,205 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="context-item"
|
||||
@mouseenter="
|
||||
option.children &&
|
||||
childrenShowMode === contextChildrenShowMode.hover &&
|
||||
showChildren()
|
||||
"
|
||||
@mouseleave="
|
||||
option.children &&
|
||||
childrenShowMode === contextChildrenShowMode.hover &&
|
||||
hideChildren()
|
||||
"
|
||||
@click="runAction"
|
||||
ref="parentRef"
|
||||
>
|
||||
<div class="icon image" :class="option.icon"></div>
|
||||
<div class="label ellip">{{ option.label }}</div>
|
||||
<div class="more image" v-if="option.children"></div>
|
||||
<div
|
||||
class="children rounded shadow-sm"
|
||||
v-if="option.children"
|
||||
ref="childRef"
|
||||
>
|
||||
<div
|
||||
class="context-item"
|
||||
v-for="child in option.children"
|
||||
:key="child.label"
|
||||
:class="[{ critical: child.critical }, child.type]"
|
||||
@click="child.action && runChildAction(child.action)"
|
||||
>
|
||||
<div class="label ellip">
|
||||
{{ child.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { createPopper, Instance } from "@popperjs/core";
|
||||
import { ref } from "vue";
|
||||
|
||||
import { contextChildrenShowMode } from "@/composables/enums";
|
||||
import { Option } from "@/interfaces";
|
||||
|
||||
const props = defineProps<{
|
||||
option: Option;
|
||||
childrenShowMode: contextChildrenShowMode;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: "hideContextMenu"): void;
|
||||
}>();
|
||||
|
||||
const parentRef = ref<HTMLElement>();
|
||||
const childRef = ref<HTMLElement>();
|
||||
const childrenShown = ref(false);
|
||||
|
||||
let popperInstance: Instance | null = null;
|
||||
|
||||
function showChildren() {
|
||||
if (childrenShown.value) {
|
||||
childrenShown.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
popperInstance = createPopper(
|
||||
parentRef.value as HTMLElement,
|
||||
childRef.value as HTMLElement,
|
||||
{
|
||||
placement: "right-start",
|
||||
modifiers: [
|
||||
{
|
||||
name: "offset",
|
||||
options: {
|
||||
offset: [-5, -2],
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
);
|
||||
childRef.value ? (childRef.value.style.visibility = "visible") : null;
|
||||
childrenShown.value = true;
|
||||
}
|
||||
|
||||
function hideChildren() {
|
||||
childRef.value ? (childRef.value.style.visibility = "hidden") : null;
|
||||
popperInstance?.destroy();
|
||||
childrenShown.value = false;
|
||||
}
|
||||
|
||||
function hideContextMenu() {
|
||||
if (props.option.children) return;
|
||||
emit("hideContextMenu");
|
||||
}
|
||||
|
||||
function runAction() {
|
||||
if (props.option.children) {
|
||||
if (childrenShown.value) {
|
||||
hideChildren();
|
||||
return;
|
||||
}
|
||||
|
||||
showChildren();
|
||||
return;
|
||||
}
|
||||
|
||||
props.option.action && props.option.action();
|
||||
hideContextMenu();
|
||||
}
|
||||
|
||||
function runChildAction(action: () => void) {
|
||||
action();
|
||||
emit("hideContextMenu");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.context-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.4rem 1rem;
|
||||
position: relative;
|
||||
|
||||
.more {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
position: absolute;
|
||||
right: $small;
|
||||
background-image: url("../../assets/icons/expand.svg");
|
||||
}
|
||||
|
||||
.children {
|
||||
position: absolute;
|
||||
width: 13rem;
|
||||
|
||||
background-color: $context;
|
||||
transform: scale(0);
|
||||
padding: $small 0;
|
||||
|
||||
.context-item {
|
||||
padding: $small 1rem;
|
||||
}
|
||||
|
||||
.separator {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $darkestblue;
|
||||
}
|
||||
|
||||
.children {
|
||||
transform: scale(0);
|
||||
overflow: hidden;
|
||||
max-height: calc(100vh - 10rem);
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
margin-right: $small;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 9rem;
|
||||
}
|
||||
|
||||
.folder {
|
||||
background-image: url("../../assets/icons/folder.svg");
|
||||
}
|
||||
|
||||
.artist {
|
||||
background-image: url("../../assets/icons/artist.svg");
|
||||
}
|
||||
|
||||
.album {
|
||||
background-image: url("../../assets/icons/album.svg");
|
||||
}
|
||||
|
||||
.delete {
|
||||
background-image: url("../../assets/icons/delete.svg");
|
||||
}
|
||||
|
||||
.plus {
|
||||
background-image: url("../../assets/icons/plus.svg");
|
||||
}
|
||||
|
||||
.play_next {
|
||||
background-image: url("../../assets/icons/add_to_queue.svg");
|
||||
}
|
||||
|
||||
.add_to_queue {
|
||||
background-image: url("../../assets/icons/add-to-queue.svg");
|
||||
transform: scale(0.8); // reason: icon is not from same source as other
|
||||
}
|
||||
|
||||
.heart {
|
||||
background-image: url("../../assets/icons/heart.svg");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,62 +0,0 @@
|
||||
<template>
|
||||
<router-link :to="{ name: Routes.folder, params: { path: folder.path } }">
|
||||
<div class="f-item">
|
||||
<!-- <div class="icon"> -->
|
||||
<FolderSvg v-if="!folder.is_sym" />
|
||||
<SymLinkSvg v-if="folder.is_sym" />
|
||||
<!-- </div> -->
|
||||
<div class="info">
|
||||
<div class="f-item-text ellip">{{ folder.name }}</div>
|
||||
<!-- <div class="separator no-border"></div> -->
|
||||
<!-- <div class="f-item-count">{{ folder.has_tracks }} tracks</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Folder } from "@/interfaces";
|
||||
import { Routes } from "@/router/routes";
|
||||
|
||||
import FolderSvg from "@/assets/icons/folder.svg";
|
||||
import SymLinkSvg from "@/assets/icons/symlink.svg";
|
||||
|
||||
defineProps<{
|
||||
folder: Folder;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.f-container .f-item {
|
||||
height: 5rem;
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
align-items: center;
|
||||
background-color: $gray;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 0.75rem;
|
||||
|
||||
@include phone-only {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: 0 $small 0 1rem;
|
||||
}
|
||||
|
||||
.f-item-text {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $gray3;
|
||||
// background: linear-gradient(to top right, #021b79, #0575e6);
|
||||
background-size: 105% 105%;
|
||||
background-position-x: -$small;
|
||||
|
||||
.f-item-count {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div class="f-container rounded">
|
||||
<div id="f-items" class="rounded">
|
||||
<FolderItem
|
||||
v-for="folder in folders"
|
||||
:key="JSON.stringify(folder)"
|
||||
:folder="folder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Folder } from "@/interfaces";
|
||||
import FolderItem from "./FolderItem.vue";
|
||||
|
||||
defineProps<{
|
||||
folders: Folder[];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#f-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
#f-items.list-mode {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
|
||||
.f-item {
|
||||
height: 3.25rem;
|
||||
border-radius: $small;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.f-item:hover {
|
||||
background-color: $gray !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- TODO: ADD BUTTON TO TOGGLE LIST MODE -->
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<h1>This is your Homepage</h1>
|
||||
</template>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div class="hotkeys rounded-sm no-scroll">
|
||||
<button @click.prevent="q.playPrev">
|
||||
<PrevSvg />
|
||||
</button>
|
||||
<button v-auto-animate @click.prevent="q.playPause">
|
||||
<PauseSvg v-if="q.playing" />
|
||||
<PlaySvg v-else />
|
||||
</button>
|
||||
<button @click.prevent="q.playNext">
|
||||
<NextSvg />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useQStore from "@/stores/queue";
|
||||
|
||||
import { default as NextSvg, default as PrevSvg } from "../../../assets/icons/next.svg";
|
||||
import PauseSvg from "../../../assets/icons/pause.svg";
|
||||
import PlaySvg from "../../../assets/icons/play.svg";
|
||||
|
||||
const q = useQStore();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.hotkeys {
|
||||
display: grid;
|
||||
grid-template-columns: 4rem 4rem 4rem;
|
||||
height: 100%;
|
||||
|
||||
button {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
background: $darkestblue;
|
||||
}
|
||||
}
|
||||
|
||||
button:first-child {
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<input
|
||||
id="progress"
|
||||
type="range"
|
||||
:value="time.current"
|
||||
min="0"
|
||||
:max="time.full"
|
||||
step="0.1"
|
||||
@change="seek()"
|
||||
:style="{
|
||||
backgroundSize: `${
|
||||
(time.current / (q.currenttrack?.duration || 0)) * 100
|
||||
}% 100%`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useQStore from "@/stores/queue";
|
||||
|
||||
const q = useQStore();
|
||||
|
||||
const { duration: time } = q;
|
||||
const seek = () => {
|
||||
const elem = document.getElementById("progress") as HTMLInputElement;
|
||||
const value = elem.value;
|
||||
|
||||
q.seek(value as unknown as number);
|
||||
};
|
||||
</script>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<div class="sidebar-songcard">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'AlbumView',
|
||||
params: {
|
||||
hash: track?.albumhash ? track.albumhash : ' ',
|
||||
},
|
||||
}"
|
||||
>
|
||||
<img
|
||||
:src="imguri + track?.image"
|
||||
alt=""
|
||||
class="l-image rounded force-lm"
|
||||
/>
|
||||
</router-link>
|
||||
<div id="bitrate" v-if="track?.bitrate" title="file type • bitrate">
|
||||
{{ track.filetype }} • {{ track.bitrate }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import { paths } from "@/config";
|
||||
import { Track } from "@/interfaces";
|
||||
|
||||
defineProps<{
|
||||
track: Track | undefined;
|
||||
}>();
|
||||
|
||||
const imguri = paths.images.thumb.large;
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sidebar-songcard {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#bitrate {
|
||||
position: absolute;
|
||||
font-size: 0.75rem;
|
||||
width: max-content;
|
||||
padding: 0.2rem 0.35rem;
|
||||
bottom: $medium;
|
||||
left: $small;
|
||||
background-color: $gray4;
|
||||
border-radius: $smaller;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="other-keys">
|
||||
<div class="keys rounded playlist image"></div>
|
||||
<div class="keys rounded heart"></div>
|
||||
<div class="keys rounded folder"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.l_ .other-keys {
|
||||
// border: solid;
|
||||
height: 2.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
.keys {
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
background-size: 1.5rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
&:hover {
|
||||
background-color: $red;
|
||||
}
|
||||
}
|
||||
.playlist {
|
||||
background-image: url("../../../assets/icons/plus.svg");
|
||||
}
|
||||
}
|
||||
</style>
|
||||