mirror of
https://github.com/stardrophere/InsightRadar.git
synced 2026-06-06 00:39:21 +08:00
login+ai cluster
This commit is contained in:
stardrophere
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="brand-logo-container">
|
||||
<svg class="insight-logo" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle
|
||||
class="radar-ring outer"
|
||||
cx="16"
|
||||
cy="16"
|
||||
r="14"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
stroke-dasharray="4 8"
|
||||
opacity="0.4"
|
||||
/>
|
||||
|
||||
<circle
|
||||
class="radar-ring inner"
|
||||
cx="16"
|
||||
cy="16"
|
||||
r="9"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-dasharray="12 4"
|
||||
opacity="0.6"
|
||||
/>
|
||||
|
||||
<path
|
||||
class="data-link"
|
||||
d="M16 16 L25 7 M16 16 L7 22 L5 20 M16 16 L23 25"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
opacity="0.3"
|
||||
/>
|
||||
|
||||
<circle class="data-node" cx="25" cy="7" r="1.5" fill="currentColor" opacity="0.7" />
|
||||
<circle class="data-node" cx="7" cy="22" r="1.5" fill="currentColor" opacity="0.7" />
|
||||
<circle class="data-node" cx="23" cy="25" r="1" fill="currentColor" opacity="0.5" />
|
||||
|
||||
<circle class="ai-core" cx="16" cy="16" r="3.5" fill="currentColor" />
|
||||
<circle class="ai-core-glow" cx="16" cy="16" r="3.5" fill="currentColor" opacity="0.4" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.brand-logo-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.2em;
|
||||
height: 2.2em;
|
||||
color: var(--brand-primary);
|
||||
}
|
||||
|
||||
.insight-logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* 核心呼吸灯动画 */
|
||||
.ai-core-glow {
|
||||
transform-origin: center;
|
||||
animation: core-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* 雷达圈旋转动画 */
|
||||
.radar-ring {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.radar-ring.outer {
|
||||
animation: spin-reverse 20s linear infinite;
|
||||
}
|
||||
|
||||
.radar-ring.inner {
|
||||
animation: spin 12s linear infinite;
|
||||
}
|
||||
|
||||
/* 数据连线光流效果 (通过 dashoffset 实现虚线流动) */
|
||||
.data-link {
|
||||
stroke-dasharray: 4;
|
||||
animation: flow 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes core-pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
transform: scale(2.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin-reverse {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flow {
|
||||
from {
|
||||
stroke-dashoffset: 8;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,41 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
msg: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
|
||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
|
||||
>Vue - Official</a
|
||||
>. If you need to test your components and web pages, check out
|
||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||
and
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
/
|
||||
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in
|
||||
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||
>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||
(our official Discord server), or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also follow the official
|
||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||
Bluesky account or the
|
||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
X account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
@@ -0,0 +1,392 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
|
||||
const themeStore = useThemeStore()
|
||||
const isAnimating = ref(false)
|
||||
|
||||
function handleToggle(event: MouseEvent) {
|
||||
const root = document.documentElement
|
||||
root.style.setProperty('--theme-flash-x', `${event.clientX}px`)
|
||||
root.style.setProperty('--theme-flash-y', `${event.clientY}px`)
|
||||
|
||||
isAnimating.value = true
|
||||
themeStore.toggleTheme()
|
||||
|
||||
window.setTimeout(() => {
|
||||
isAnimating.value = false
|
||||
}, 520)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="theme-toggle"
|
||||
:class="{ 'is-dark': themeStore.isDark, 'is-animating': isAnimating }"
|
||||
type="button"
|
||||
:aria-label="themeStore.isDark ? '切换到浅色模式' : '切换到暗黑模式'"
|
||||
@click="handleToggle"
|
||||
>
|
||||
<span class="toggle-track">
|
||||
<span class="track-glow"></span>
|
||||
<span class="track-stars"></span>
|
||||
<span class="spark-layer">
|
||||
<span class="spark"></span>
|
||||
<span class="spark"></span>
|
||||
<span class="spark"></span>
|
||||
</span>
|
||||
<span class="toggle-thumb">
|
||||
<svg class="icon icon-sun" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M12 5.25a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75ZM7.227 7.227a.75.75 0 0 1 1.06 0l1.06 1.06a.75.75 0 1 1-1.06 1.06l-1.06-1.06a.75.75 0 0 1 0-1.06Zm9.426 0a.75.75 0 0 1 1.06 1.06l-1.06 1.06a.75.75 0 1 1-1.06-1.06l1.06-1.06ZM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm-6.75 3a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75Zm11.25 0a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75Zm-8.213 3.653a.75.75 0 0 1 1.06 0l1.06 1.06a.75.75 0 0 1-1.06 1.06l-1.06-1.06a.75.75 0 0 1 0-1.06Zm7.426 0a.75.75 0 0 1 1.06 1.06l-1.06 1.06a.75.75 0 0 1-1.06-1.06l1.06-1.06ZM12 16.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 1 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75Z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="icon icon-moon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M14.5 2.25a.75.75 0 0 1 .604 1.195 7.95 7.95 0 0 0 4.6 12.395.75.75 0 0 1 .194 1.387 10.5 10.5 0 1 1-6.592-15.052.75.75 0 0 1 .194 1.387 8.954 8.954 0 0 0-1.75 16.693 9.002 9.002 0 0 0 6.074-2.04 9.45 9.45 0 0 1-4.822-8.253 9.44 9.44 0 0 1 1.305-4.82.75.75 0 0 1 .194-1.202Z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="toggle-text">{{ themeStore.isDark ? '浅色模式' : '暗黑模式' }}</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.theme-toggle {
|
||||
border: 1px solid var(--surface-border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border-radius: 14px;
|
||||
padding: 6px 10px 6px 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 24%, transparent);
|
||||
}
|
||||
|
||||
.theme-toggle:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
.toggle-track {
|
||||
width: 58px;
|
||||
height: 32px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(120deg, #d4e4ff, #b2c6ff);
|
||||
border: 1px solid rgba(255, 255, 255, 0.45);
|
||||
padding: 3px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: background 360ms ease;
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .toggle-track {
|
||||
background: linear-gradient(120deg, #0f1731, #1f2e62);
|
||||
}
|
||||
|
||||
.track-glow {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
left: 8px;
|
||||
top: 5px;
|
||||
background: rgba(255, 244, 170, 0.75);
|
||||
filter: blur(2px);
|
||||
opacity: 0.85;
|
||||
transition: left 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease, background 300ms ease;
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .track-glow {
|
||||
left: 30px;
|
||||
opacity: 0.4;
|
||||
background: rgba(166, 195, 255, 0.7);
|
||||
}
|
||||
|
||||
.track-stars {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 260ms ease;
|
||||
}
|
||||
|
||||
.track-stars::before,
|
||||
.track-stars::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: rgba(226, 235, 255, 0.95);
|
||||
}
|
||||
|
||||
.track-stars::before {
|
||||
left: 16px;
|
||||
top: 9px;
|
||||
box-shadow: 16px 6px 0 rgba(226, 235, 255, 0.75), 22px -2px 0 rgba(226, 235, 255, 0.55);
|
||||
}
|
||||
|
||||
.track-stars::after {
|
||||
left: 28px;
|
||||
top: 18px;
|
||||
box-shadow: -12px 5px 0 rgba(226, 235, 255, 0.65), 8px -8px 0 rgba(226, 235, 255, 0.75);
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .track-stars {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spark-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spark {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.spark:nth-child(1) {
|
||||
left: 22px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.spark:nth-child(2) {
|
||||
left: 30px;
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
.spark:nth-child(3) {
|
||||
left: 26px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating .spark:nth-child(1) {
|
||||
animation: spark-burst-1 480ms ease-out;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating .spark:nth-child(2) {
|
||||
animation: spark-burst-2 480ms ease-out;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating .spark:nth-child(3) {
|
||||
animation: spark-burst-3 480ms ease-out;
|
||||
}
|
||||
|
||||
.toggle-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(145deg, #ffffff, #f0f4ff);
|
||||
box-shadow: 0 3px 10px rgba(37, 49, 89, 0.26);
|
||||
position: relative;
|
||||
transform: translateX(0);
|
||||
transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .toggle-thumb {
|
||||
transform: translateX(26px);
|
||||
background: linear-gradient(145deg, #d5e0ff, #b7c9ff);
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
inset: 5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: #526ab0;
|
||||
transition: opacity 240ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.icon-sun {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
|
||||
.icon-moon {
|
||||
opacity: 0;
|
||||
transform: rotate(-40deg) scale(0.45);
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .icon-sun {
|
||||
opacity: 0;
|
||||
transform: rotate(70deg) scale(0.4);
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .icon-moon {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.theme-toggle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--primary) 36%, transparent);
|
||||
left: 34px;
|
||||
top: 14px;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating::after {
|
||||
animation: click-ripple 520ms ease-out;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating .toggle-thumb {
|
||||
animation: thumb-pop 520ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark.is-animating .toggle-thumb {
|
||||
animation-name: thumb-pop-dark;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating .toggle-track {
|
||||
animation: track-flare 520ms ease;
|
||||
}
|
||||
|
||||
@keyframes click-ripple {
|
||||
0% {
|
||||
transform: scale(0.2);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(4.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes thumb-pop {
|
||||
0% {
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(13px) scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(26px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes thumb-pop-dark {
|
||||
0% {
|
||||
transform: translateX(26px) scale(1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(13px) scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes track-flare {
|
||||
0% {
|
||||
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
45% {
|
||||
box-shadow: 0 0 16px rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spark-burst-1 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(0.3);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-12px, -8px) scale(1.1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spark-burst-2 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(0.3);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(10px, -10px) scale(1.15);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spark-burst-3 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(0.3);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(2px, 12px) scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.toggle-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.theme-toggle,
|
||||
.toggle-track,
|
||||
.toggle-thumb,
|
||||
.track-glow,
|
||||
.icon {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating::after,
|
||||
.theme-toggle.is-animating .toggle-thumb,
|
||||
.theme-toggle.is-dark.is-animating .toggle-thumb,
|
||||
.theme-toggle.is-animating .toggle-track,
|
||||
.theme-toggle.is-animating .spark {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user