图标大改
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-check"
|
||||
>
|
||||
<circle class="check-ring" cx="12" cy="12" r="9" />
|
||||
<path class="check-mark" d="M7 12.5 10.2 15.7 17 8.9" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-check {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.check-ring,
|
||||
.check-mark {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.check-mark {
|
||||
stroke-dasharray: 18;
|
||||
stroke-dashoffset: 18;
|
||||
}
|
||||
|
||||
:deep(.action-btn:hover) .check-ring,
|
||||
:deep(.action-btn:hover) .check-mark,
|
||||
.icon-check:hover .check-ring,
|
||||
.icon-check:hover .check-mark {
|
||||
transform: scale(1.06);
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-copy"
|
||||
>
|
||||
<rect class="copy-back" x="7" y="7" width="11" height="11" rx="2" />
|
||||
<rect class="copy-front" x="4" y="4" width="11" height="11" rx="2" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-copy {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.copy-back,
|
||||
.copy-front {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
:deep(.action-btn:hover) .copy-back,
|
||||
.icon-copy:hover .copy-back {
|
||||
transform: translate(1px, 1px);
|
||||
}
|
||||
|
||||
:deep(.action-btn:hover) .copy-front,
|
||||
.icon-copy:hover .copy-front {
|
||||
transform: translate(-1px, -1px) rotate(-4deg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 48"
|
||||
:height="height || 48"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-empty-state"
|
||||
>
|
||||
<path class="empty-box" d="M4 7h16v10H4z" />
|
||||
<path class="empty-line" d="M7 11h10" />
|
||||
<path class="empty-line" d="M7 14h6" />
|
||||
<circle class="empty-spark spark-1" cx="17" cy="8" r="1" fill="currentColor" />
|
||||
<circle class="empty-spark spark-2" cx="8" cy="6" r="1" fill="currentColor" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-empty-state {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.empty-box,
|
||||
.empty-line,
|
||||
.empty-spark {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.empty-spark {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.icon-empty-state:hover .empty-box {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.icon-empty-state:hover .spark-1 {
|
||||
transform: translateY(-1px) scale(1.2);
|
||||
}
|
||||
|
||||
.icon-empty-state:hover .spark-2 {
|
||||
transform: translateY(1px) scale(1.2);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-export"
|
||||
>
|
||||
<path class="tray" d="M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4" />
|
||||
<path class="arrow" d="M12 3v12" />
|
||||
<path class="arrow-head" d="M7 8l5-5 5 5" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-export {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.tray,
|
||||
.arrow,
|
||||
.arrow-head {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
:deep(.btn-icon:hover) .arrow,
|
||||
.icon-export:hover .arrow {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
:deep(.btn-icon:hover) .arrow-head,
|
||||
.icon-export:hover .arrow-head {
|
||||
transform: translateY(-1px) scale(1.06);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
withDefaults(defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
active?: boolean
|
||||
}>(), {
|
||||
active: false,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-heart"
|
||||
:class="{ 'is-active': active }"
|
||||
>
|
||||
<path class="heart-glow" d="M12 20.5 10.9 19.5C6.1 15.4 3.4 12.9 3.4 9.6 3.4 7.1 5.4 5 7.9 5c1.5 0 2.8.7 3.6 1.9.8-1.2 2.1-1.9 3.6-1.9 2.5 0 4.5 2.1 4.5 4.6 0 3.3-2.7 5.8-7.5 9.9L12 20.5Z" />
|
||||
<path class="heart-fill" fill="currentColor" d="M12 20.5 10.9 19.5C6.1 15.4 3.4 12.9 3.4 9.6 3.4 7.1 5.4 5 7.9 5c1.5 0 2.8.7 3.6 1.9.8-1.2 2.1-1.9 3.6-1.9 2.5 0 4.5 2.1 4.5 4.6 0 3.3-2.7 5.8-7.5 9.9L12 20.5Z" />
|
||||
<path class="heart-outline" d="M12 20.5 10.9 19.5C6.1 15.4 3.4 12.9 3.4 9.6 3.4 7.1 5.4 5 7.9 5c1.5 0 2.8.7 3.6 1.9.8-1.2 2.1-1.9 3.6-1.9 2.5 0 4.5 2.1 4.5 4.6 0 3.3-2.7 5.8-7.5 9.9L12 20.5Z" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-heart {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.heart-glow,
|
||||
.heart-fill,
|
||||
.heart-outline {
|
||||
transform-origin: center;
|
||||
transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, fill 0.25s ease, stroke 0.25s ease;
|
||||
}
|
||||
|
||||
.heart-glow {
|
||||
fill: currentColor;
|
||||
opacity: 0;
|
||||
stroke: none;
|
||||
filter: blur(1.25px);
|
||||
transform: scale(0.86);
|
||||
}
|
||||
|
||||
.heart-fill {
|
||||
fill: currentColor;
|
||||
opacity: 0;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.heart-outline {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.icon-heart.is-active .heart-fill {
|
||||
opacity: 1;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.icon-heart.is-active .heart-outline {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.icon-heart:hover,
|
||||
:deep(.action-btn:hover) .icon-heart,
|
||||
:deep(.action-btn.is-favorite:hover) .icon-heart {
|
||||
transform: translateY(-1px) scale(1.1);
|
||||
}
|
||||
|
||||
.icon-heart:hover .heart-outline,
|
||||
:deep(.action-btn:hover) .heart-outline {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.icon-heart:hover .heart-glow,
|
||||
:deep(.action-btn:hover) .heart-glow {
|
||||
opacity: 0.2;
|
||||
transform: scale(1.18);
|
||||
}
|
||||
|
||||
.icon-heart.is-active:hover .heart-fill,
|
||||
:deep(.action-btn.is-favorite:hover) .heart-fill {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.icon-heart.is-active:hover .heart-glow,
|
||||
:deep(.action-btn.is-favorite:hover) .heart-glow {
|
||||
opacity: 0.24;
|
||||
transform: scale(1.22);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-import"
|
||||
>
|
||||
<path class="tray" d="M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4" />
|
||||
<path class="arrow" d="M12 3v12" />
|
||||
<path class="arrow-head" d="m7 10 5 5 5-5" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-import {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.tray,
|
||||
.arrow,
|
||||
.arrow-head {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
:deep(.btn-icon:hover) .arrow,
|
||||
.icon-import:hover .arrow {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
:deep(.btn-icon:hover) .arrow-head,
|
||||
.icon-import:hover .arrow-head {
|
||||
transform: translateY(1px) scale(1.06);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-menu"
|
||||
>
|
||||
<path class="menu-line line-1" d="M4 7h16" />
|
||||
<path class="menu-line line-2" d="M4 12h16" />
|
||||
<path class="menu-line line-3" d="M4 17h16" />
|
||||
<circle class="menu-spark" cx="19" cy="7" r="1" fill="currentColor" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-menu {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.menu-line,
|
||||
.menu-spark {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
:deep(.mobile-menu-btn:hover) .line-1,
|
||||
.icon-menu:hover .line-1 {
|
||||
transform: translateY(-1px) rotate(4deg);
|
||||
}
|
||||
|
||||
:deep(.mobile-menu-btn:hover) .line-2,
|
||||
.icon-menu:hover .line-2 {
|
||||
transform: scaleX(0.86);
|
||||
}
|
||||
|
||||
:deep(.mobile-menu-btn:hover) .line-3,
|
||||
.icon-menu:hover .line-3 {
|
||||
transform: translateY(1px) rotate(-4deg);
|
||||
}
|
||||
|
||||
:deep(.mobile-menu-btn:hover) .menu-spark,
|
||||
.icon-menu:hover .menu-spark {
|
||||
opacity: 1;
|
||||
transform: scale(1.4);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-more"
|
||||
>
|
||||
<circle class="more-dot dot-1" cx="5" cy="12" r="1.2" fill="currentColor" />
|
||||
<circle class="more-dot dot-2" cx="12" cy="12" r="1.2" fill="currentColor" />
|
||||
<circle class="more-dot dot-3" cx="19" cy="12" r="1.2" fill="currentColor" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-more {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.more-dot {
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
|
||||
}
|
||||
|
||||
:deep(.more-btn:hover) .dot-1,
|
||||
.icon-more:hover .dot-1 {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
:deep(.more-btn:hover) .dot-2,
|
||||
.icon-more:hover .dot-2 {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
:deep(.more-btn:hover) .dot-3,
|
||||
.icon-more:hover .dot-3 {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-plus"
|
||||
>
|
||||
<circle class="plus-ring" cx="12" cy="12" r="9" />
|
||||
<path class="plus-vert" d="M12 7v10" />
|
||||
<path class="plus-horz" d="M7 12h10" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-plus {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.plus-ring,
|
||||
.plus-vert,
|
||||
.plus-horz {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
:deep(.btn-primary:hover) .plus-ring,
|
||||
.icon-plus:hover .plus-ring {
|
||||
opacity: 1;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
:deep(.btn-primary:hover) .plus-vert,
|
||||
.icon-plus:hover .plus-vert {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
:deep(.btn-primary:hover) .plus-horz,
|
||||
.icon-plus:hover .plus-horz {
|
||||
transform: scaleX(1.12);
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +1,53 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon-preset-type"
|
||||
:class="type"
|
||||
>
|
||||
<!-- Positive: Sparkles/Magic -->
|
||||
<template v-if="type === 'positive'">
|
||||
<path class="star-main" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
<path class="positive-wand wand-shadow" d="M7.1 17.2 16.8 7.5" />
|
||||
<path class="positive-wand wand-body" d="M6.4 16.5 16.1 6.8" />
|
||||
<path class="positive-cap" d="M16.1 6.8 18.2 4.7" />
|
||||
<path class="positive-tip tip-1" d="M17.7 3.1 18.3 4.5 19.7 5.1 18.3 5.7 17.7 7.1 17.1 5.7 15.7 5.1 17.1 4.5Z" />
|
||||
<path class="positive-tip tip-2" d="M9.2 6.3 9.6 7.3 10.6 7.7 9.6 8.1 9.2 9.1 8.8 8.1 7.8 7.7 8.8 7.3Z" />
|
||||
<circle class="positive-tip dot-1" cx="14.1" cy="10.9" r="0.7" />
|
||||
<circle class="positive-tip dot-2" cx="6.9" cy="18.1" r="0.8" />
|
||||
<path class="positive-spark spark-1" d="M19.6 10.6 20 11.7 21.1 12.1 20 12.5 19.6 13.6 19.2 12.5 18.1 12.1 19.2 11.7Z" />
|
||||
<path class="positive-spark spark-2" d="M4.8 10.8 5.2 11.6 6 12 5.2 12.4 4.8 13.2 4.4 12.4 3.6 12 4.4 11.6Z" />
|
||||
</template>
|
||||
|
||||
<!-- Negative: Ban/Stop -->
|
||||
<template v-else-if="type === 'negative'">
|
||||
<circle class="circle" cx="12" cy="12" r="10" />
|
||||
<line class="slash" x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
|
||||
<circle class="negative-ring" cx="12" cy="12" r="9.2" />
|
||||
<line class="negative-slash" x1="5" y1="5" x2="19" y2="19" />
|
||||
</template>
|
||||
|
||||
<!-- Setting: Gear -->
|
||||
<template v-else-if="type === 'setting'">
|
||||
<path class="gear" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L3.16 8.87c-.09.17-.05.39.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.09-.17.05-.39-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
||||
<path class="setting-gear" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L3.16 8.87c-.09.17-.05.39.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.09-.17.05-.39-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
||||
</template>
|
||||
|
||||
<!-- Style: Brush -->
|
||||
<template v-else-if="type === 'style'">
|
||||
<path class="brush-handle" d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3z"/>
|
||||
<path class="brush-tip" d="M20.71 4.63l-1.34-1.34a.996.996 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96a.996.996 0 0 0 0-1.41z"/>
|
||||
<path class="style-brush" d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3z"/>
|
||||
<path class="style-tip" d="M20.71 4.63l-1.34-1.34a.996.996 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96a.996.996 0 0 0 0-1.41z"/>
|
||||
</template>
|
||||
|
||||
<!-- Character: User/Face -->
|
||||
<template v-else-if="type === 'character'">
|
||||
<path class="user-body" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle class="user-head" cx="12" cy="7" r="4" />
|
||||
<path class="character-body" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle class="character-head" cx="12" cy="7" r="4" />
|
||||
</template>
|
||||
|
||||
<!-- Scene: Image/Landscape -->
|
||||
<template v-else-if="type === 'scene'">
|
||||
<rect class="scene-frame" x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||||
<circle class="scene-sun" cx="8.5" cy="8.5" r="1.5"/>
|
||||
<polyline class="scene-mountain" points="21 15 16 10 5 21"/>
|
||||
<rect class="scene-frame" x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||||
<circle class="scene-sun" cx="8.5" cy="8.5" r="1.5" />
|
||||
<polyline class="scene-mountain" points="21 15 16 10 5 21" />
|
||||
</template>
|
||||
|
||||
<!-- Custom: Puzzle -->
|
||||
<template v-else>
|
||||
<path class="puzzle-piece" d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1 2.5 2.5 0 0 0 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5z"/>
|
||||
<path class="custom-piece" d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1 2.5 2.5 0 0 0 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5z"/>
|
||||
</template>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -62,93 +62,158 @@ defineProps<{
|
||||
|
||||
<style scoped>
|
||||
.icon-preset-type {
|
||||
transition: all 0.3s ease;
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||
}
|
||||
|
||||
/* Positive: Sparkle/Twinkle */
|
||||
.positive .star-main {
|
||||
.positive-wand,
|
||||
.positive-cap,
|
||||
.positive-tip,
|
||||
.positive-spark,
|
||||
.negative-ring,
|
||||
.negative-slash,
|
||||
.setting-gear,
|
||||
.style-brush,
|
||||
.style-tip,
|
||||
.character-body,
|
||||
.character-head,
|
||||
.scene-frame,
|
||||
.scene-sun,
|
||||
.scene-mountain,
|
||||
.custom-piece {
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease, fill 0.25s ease;
|
||||
}
|
||||
:deep(.nav-btn:hover) .positive .star-main,
|
||||
.positive:hover .star-main {
|
||||
transform: scale(1.1) rotate(15deg);
|
||||
|
||||
.positive-wand {
|
||||
stroke-width: 3.2;
|
||||
}
|
||||
|
||||
.positive-wand.wand-shadow {
|
||||
opacity: 0.18;
|
||||
filter: blur(0.2px);
|
||||
}
|
||||
|
||||
.positive-wand.wand-body {
|
||||
stroke-width: 2.7;
|
||||
}
|
||||
|
||||
.positive-cap {
|
||||
stroke-width: 2.7;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.positive-tip {
|
||||
fill: currentColor;
|
||||
fill-opacity: 0.2;
|
||||
stroke: none;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* Negative: Shake */
|
||||
.negative .slash {
|
||||
.positive-spark {
|
||||
fill: currentColor;
|
||||
stroke: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.negative-ring {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.negative-slash {
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
:deep(.nav-btn:hover) .negative,
|
||||
.negative:hover {
|
||||
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
|
||||
}
|
||||
@keyframes shake {
|
||||
10%, 90% { transform: translate3d(-1px, 0, 0); }
|
||||
20%, 80% { transform: translate3d(2px, 0, 0); }
|
||||
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
|
||||
40%, 60% { transform: translate3d(4px, 0, 0); }
|
||||
}
|
||||
|
||||
/* Setting: Rotate */
|
||||
.setting .gear {
|
||||
.setting-gear {
|
||||
transform-origin: center;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
:deep(.nav-btn:hover) .setting .gear,
|
||||
.setting:hover .gear {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Style: Brush Wiggle */
|
||||
.style .brush-tip {
|
||||
transform-origin: bottom left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
:deep(.nav-btn:hover) .style .brush-tip,
|
||||
.style:hover .brush-tip {
|
||||
transform: rotate(-10deg) translateY(-2px);
|
||||
.style-tip {
|
||||
transform-origin: 10px 13px;
|
||||
}
|
||||
|
||||
/* Character: Bounce */
|
||||
.character .user-head {
|
||||
.character-head {
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
:deep(.nav-btn:hover) .character .user-head,
|
||||
.character:hover .user-head {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Scene: Zoom */
|
||||
.scene .scene-mountain {
|
||||
transform-origin: bottom;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.scene .scene-sun {
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
:deep(.nav-btn:hover) .scene .scene-mountain,
|
||||
.scene:hover .scene-mountain {
|
||||
transform: scaleY(1.1);
|
||||
}
|
||||
:deep(.nav-btn:hover) .scene .scene-sun,
|
||||
.scene:hover .scene-sun {
|
||||
transform: translateY(-2px) scale(1.1);
|
||||
.scene-frame {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* Custom: Puzzle Fit */
|
||||
.custom .puzzle-piece {
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s ease;
|
||||
.scene-sun {
|
||||
fill: currentColor;
|
||||
opacity: 0.9;
|
||||
}
|
||||
:deep(.nav-btn:hover) .custom .puzzle-piece,
|
||||
.custom:hover .puzzle-piece {
|
||||
transform: scale(1.1) rotate(-5deg);
|
||||
|
||||
.icon-preset-type:hover,
|
||||
:deep(.nav-btn:hover) .icon-preset-type {
|
||||
transform: translateY(-1px) scale(1.08);
|
||||
}
|
||||
|
||||
.icon-preset-type.positive:hover .positive-wand,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.positive .positive-wand {
|
||||
transform: translate(-0.2px, -0.2px) rotate(-8deg);
|
||||
}
|
||||
|
||||
.icon-preset-type.positive:hover .wand-shadow,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.positive .wand-shadow {
|
||||
opacity: 0.26;
|
||||
transform: translate(0.6px, 0.6px) rotate(-8deg);
|
||||
}
|
||||
|
||||
.icon-preset-type.positive:hover .positive-tip,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.positive .positive-tip {
|
||||
opacity: 1;
|
||||
transform: translateY(-0.5px) scale(1.08);
|
||||
}
|
||||
|
||||
.icon-preset-type.positive:hover .positive-spark,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.positive .positive-spark {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon-preset-type.positive:hover .spark-1,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.positive .spark-1 {
|
||||
transform: translate(0.6px, -0.4px) scale(1.12);
|
||||
}
|
||||
|
||||
.icon-preset-type.positive:hover .spark-2,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.positive .spark-2 {
|
||||
transform: translate(-0.4px, 0.4px) scale(1.12);
|
||||
}
|
||||
|
||||
.icon-preset-type.negative:hover .negative-slash,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.negative .negative-slash {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.icon-preset-type.setting:hover .setting-gear,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.setting .setting-gear {
|
||||
transform: rotate(70deg);
|
||||
}
|
||||
|
||||
.icon-preset-type.style:hover .style-tip,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.style .style-tip {
|
||||
transform: translate(1px, -1px) rotate(-8deg);
|
||||
}
|
||||
|
||||
.icon-preset-type.character:hover .character-head,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.character .character-head {
|
||||
transform: translateY(-1.5px) scale(1.08);
|
||||
}
|
||||
|
||||
.icon-preset-type.scene:hover .scene-mountain,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.scene .scene-mountain {
|
||||
transform: translateY(-0.5px) scaleY(1.08);
|
||||
}
|
||||
|
||||
.icon-preset-type.scene:hover .scene-sun,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.scene .scene-sun {
|
||||
transform: translateY(-1px) scale(1.1);
|
||||
}
|
||||
|
||||
.icon-preset-type.custom:hover .custom-piece,
|
||||
:deep(.nav-btn:hover) .icon-preset-type.custom .custom-piece {
|
||||
transform: rotate(-5deg) scale(1.06);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-search"
|
||||
>
|
||||
<circle class="search-lens" cx="11" cy="11" r="7" />
|
||||
<path class="search-handle" d="m16 16 4 4" />
|
||||
<circle class="search-glint" cx="9" cy="9" r="1" fill="currentColor" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-search {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.search-lens,
|
||||
.search-handle,
|
||||
.search-glint {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
:deep(.search-box:hover) .search-lens,
|
||||
.icon-search:hover .search-lens {
|
||||
transform: scale(1.06);
|
||||
stroke-dasharray: 40 10;
|
||||
}
|
||||
|
||||
:deep(.search-box:hover) .search-handle,
|
||||
.icon-search:hover .search-handle {
|
||||
transform: translate(1px, 1px) rotate(12deg);
|
||||
}
|
||||
|
||||
:deep(.search-box:hover) .search-glint,
|
||||
.icon-search:hover .search-glint {
|
||||
opacity: 1;
|
||||
transform: scale(1.4);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-share"
|
||||
>
|
||||
<circle class="share-node node-1" cx="18" cy="5" r="3" />
|
||||
<circle class="share-node node-2" cx="6" cy="12" r="3" />
|
||||
<circle class="share-node node-3" cx="18" cy="19" r="3" />
|
||||
<path class="share-link link-1" d="M8.59 13.51 15.42 17.49" />
|
||||
<path class="share-link link-2" d="M15.41 6.51 8.59 10.49" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-share {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.share-node,
|
||||
.share-link {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
:deep(.btn-icon:hover) .share-node,
|
||||
:deep(.dropdown-content button:hover) .share-node,
|
||||
.icon-share:hover .share-node {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
:deep(.btn-icon:hover) .link-1,
|
||||
:deep(.dropdown-content button:hover) .link-1,
|
||||
.icon-share:hover .link-1 {
|
||||
transform: translateY(-1px) rotate(2deg);
|
||||
}
|
||||
|
||||
:deep(.btn-icon:hover) .link-2,
|
||||
:deep(.dropdown-content button:hover) .link-2,
|
||||
.icon-share:hover .link-2 {
|
||||
transform: translateY(1px) rotate(-2deg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-sort"
|
||||
>
|
||||
<path class="sort-arrow" d="M7 4v16" />
|
||||
<path class="sort-arrow-head" d="M4 7l3-3 3 3" />
|
||||
<path class="sort-bars bar-1" d="M13 8h7" />
|
||||
<path class="sort-bars bar-2" d="M13 12h5" />
|
||||
<path class="sort-bars bar-3" d="M13 16h3" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-sort {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.sort-arrow,
|
||||
.sort-arrow-head,
|
||||
.sort-bars {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
:deep(.sort-direction-btn:hover) .sort-arrow-head,
|
||||
.icon-sort:hover .sort-arrow-head {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
:deep(.sort-direction-btn:hover) .sort-bars.bar-1,
|
||||
.icon-sort:hover .sort-bars.bar-1 {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
:deep(.sort-direction-btn:hover) .sort-bars.bar-2,
|
||||
.icon-sort:hover .sort-bars.bar-2 {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
:deep(.sort-direction-btn:hover) .sort-bars.bar-3,
|
||||
.icon-sort:hover .sort-bars.bar-3 {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
</style>
|
||||
+103
-105
@@ -1,52 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
isDark: boolean
|
||||
}>()
|
||||
|
||||
const rootClass = computed(() => ({
|
||||
'is-dark': props.isDark,
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="icon-theme-container">
|
||||
<div class="moon-glow" :class="{ 'is-active': isDark }"></div>
|
||||
<div class="icon-theme-container" :class="rootClass">
|
||||
<svg class="theme-sun" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle class="sun-core" cx="12" cy="12" r="4.5" />
|
||||
<path class="sun-ray ray-1" d="M12 1.8v3.2" />
|
||||
<path class="sun-ray ray-2" d="M12 19v3.2" />
|
||||
<path class="sun-ray ray-3" d="M4.9 4.9l2.3 2.3" />
|
||||
<path class="sun-ray ray-4" d="M16.8 16.8l2.3 2.3" />
|
||||
<path class="sun-ray ray-5" d="M1.8 12h3.2" />
|
||||
<path class="sun-ray ray-6" d="M19 12h3.2" />
|
||||
<path class="sun-ray ray-7" d="M4.9 19.1l2.3-2.3" />
|
||||
<path class="sun-ray ray-8" d="M16.8 7.2l2.3-2.3" />
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="icon-sun"
|
||||
:class="{ 'is-hidden': isDark }"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="5" />
|
||||
<line x1="12" y1="1" x2="12" y2="3" />
|
||||
<line x1="12" y1="21" x2="12" y2="23" />
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||||
<line x1="1" y1="12" x2="3" y2="12" />
|
||||
<line x1="21" y1="12" x2="23" y2="12" />
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="icon-moon"
|
||||
:class="{ 'is-visible': isDark }"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||
<g class="stars" stroke="none" stroke-width="0" fill="currentColor">
|
||||
<path class="star star-1" d="M17 8 L17.5 9.5 L19 10 L17.5 10.5 L17 12 L16.5 10.5 L15 10 L16.5 9.5 Z" />
|
||||
<path class="star star-2" d="M13 3.5 L13.3 4.5 L14.3 4.8 L13.3 5.1 L13 6.1 L12.7 5.1 L11.7 4.8 L12.7 4.5 Z" />
|
||||
</g>
|
||||
<svg class="theme-moon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path class="moon-core" d="M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z" />
|
||||
<path class="moon-rim" d="M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z" />
|
||||
<path class="moon-ring ring-1" d="M16.5 6.5l.4 1.1 1.1.4-1.1.4-.4 1.1-.4-1.1-1.1-.4 1.1-.4z" />
|
||||
<path class="moon-ring ring-2" d="M18.2 10.2l.3.9.9.3-.9.3-.3.9-.3-.9-.9-.3.9-.3z" />
|
||||
</svg>
|
||||
|
||||
<span class="theme-glow"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -55,99 +40,112 @@ defineProps<{
|
||||
position: relative;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.moon-glow {
|
||||
svg,
|
||||
.theme-glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.5);
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
opacity: 0;
|
||||
transition: all 0.4s ease;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.icon-theme-container:hover .moon-glow.is-active {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
|
||||
}
|
||||
|
||||
.icon-sun {
|
||||
.theme-sun {
|
||||
opacity: 1;
|
||||
transform: rotate(0) scale(1);
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
|
||||
.icon-sun.is-hidden {
|
||||
.theme-moon {
|
||||
opacity: 0;
|
||||
transform: rotate(90deg) scale(0.5);
|
||||
transform: rotate(-80deg) scale(0.55);
|
||||
}
|
||||
|
||||
.icon-moon {
|
||||
.theme-glow {
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transform: rotate(-90deg) scale(0.5);
|
||||
transform: scale(0.5);
|
||||
background: radial-gradient(circle, color-mix(in srgb, currentColor 24%, transparent) 0%, transparent 72%);
|
||||
transition: opacity 0.35s ease, transform 0.45s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.icon-moon.is-visible {
|
||||
opacity: 1;
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
|
||||
/* Star styles */
|
||||
.star {
|
||||
.sun-core,
|
||||
.sun-ray,
|
||||
.moon-core,
|
||||
.moon-rim,
|
||||
.moon-ring {
|
||||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
transform-origin: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.icon-moon.is-visible .star {
|
||||
.sun-core,
|
||||
.moon-core {
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.moon-rim {
|
||||
stroke-width: 2;
|
||||
opacity: 0;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.moon-ring {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.icon-theme-container:hover .theme-glow {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.icon-theme-container:hover .theme-sun {
|
||||
transform: rotate(45deg) scale(1.08);
|
||||
}
|
||||
|
||||
.icon-theme-container:hover .sun-ray {
|
||||
transform: scaleX(1.08);
|
||||
}
|
||||
|
||||
.icon-theme-container.is-dark .theme-sun {
|
||||
opacity: 0;
|
||||
transform: rotate(90deg) scale(0.45);
|
||||
}
|
||||
|
||||
.icon-theme-container.is-dark .theme-moon {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
|
||||
.icon-theme-container.is-dark .moon-rim {
|
||||
opacity: 0.26;
|
||||
}
|
||||
|
||||
.icon-theme-container.is-dark .moon-ring {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.icon-theme-container:hover .icon-sun:not(.is-hidden) {
|
||||
animation: spin 4s linear infinite;
|
||||
.icon-theme-container:hover .theme-moon {
|
||||
transform: rotate(-6deg) scale(1.04);
|
||||
}
|
||||
|
||||
.icon-theme-container:hover .icon-moon.is-visible {
|
||||
animation: swing 2.5s ease-in-out infinite;
|
||||
.icon-theme-container:hover .ring-1 {
|
||||
animation: twinkle 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.icon-theme-container:hover .star-1 {
|
||||
animation: twinkle 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.icon-theme-container:hover .star-2 {
|
||||
animation: twinkle 2s infinite ease-in-out 0.2s;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes swing {
|
||||
0%, 100% { transform: rotate(0) scale(1); }
|
||||
50% { transform: rotate(-10deg) scale(1.05); }
|
||||
.icon-theme-container:hover .ring-2 {
|
||||
animation: twinkle 1.8s ease-in-out infinite 0.15s;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.5; transform: scale(0.8); }
|
||||
50% { opacity: 1; transform: scale(1.2); }
|
||||
0%, 100% { transform: scale(0.85); opacity: 0.45; }
|
||||
50% { transform: scale(1.25); opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="width || 24"
|
||||
:height="height || 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-trash"
|
||||
>
|
||||
<path class="trash-lid" d="M3 6h18" />
|
||||
<path class="trash-body" d="m6 6 1 14h10l1-14" />
|
||||
<path class="trash-handle" d="M9 6V4h6v2" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-trash {
|
||||
overflow: visible;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.trash-lid,
|
||||
.trash-body,
|
||||
.trash-handle {
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
:deep(.action-btn:hover) .trash-lid,
|
||||
:deep(.dropdown-content button:hover) .trash-lid,
|
||||
.icon-trash:hover .trash-lid {
|
||||
transform: translateY(-1px) rotate(-4deg);
|
||||
}
|
||||
|
||||
:deep(.action-btn:hover) .trash-handle,
|
||||
:deep(.dropdown-content button:hover) .trash-handle,
|
||||
.icon-trash:hover .trash-handle {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user