mirror of
https://github.com/Moe-Sakura/frontend.git
synced 2026-03-15 04:53:18 +08:00
Refactor components to replace liquid glass effects with translucent styles
- Removed liquid glass SVG filters and related styles from index.html and various components, including CommentsModal.vue, FloatingButtons.vue, and SearchHeader.vue. - Updated styles across multiple components to implement a consistent translucent effect, enhancing visual coherence and performance. - Adjusted background colors, borders, and shadows to align with the new design approach, ensuring a modern and clean aesthetic.
This commit is contained in:
AdingApkgg
69
index.html
69
index.html
@@ -282,75 +282,6 @@
|
||||
<!-- 禁止 IE 浏览器访问 -->
|
||||
<script>/MSIE|Trident/.test(window.navigator.userAgent)&&(alert("抱歉，本站不支持 IE 浏览器，请用 Chrome 访问。"),window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href))</script>
|
||||
|
||||
<!-- WWDC 2025 液态玻璃 SVG 滤镜 -->
|
||||
<!-- 参考: https://github.com/lucasromerodb/liquid-glass-effect-macos -->
|
||||
<svg style="display: none" aria-hidden="true">
|
||||
<defs>
|
||||
<!-- 液态玻璃扭曲滤镜 - 完整版 (用于大元素) -->
|
||||
<filter
|
||||
id="liquid-glass"
|
||||
x="0%" y="0%" width="100%" height="100%"
|
||||
filterUnits="objectBoundingBox"
|
||||
>
|
||||
<feTurbulence
|
||||
type="fractalNoise"
|
||||
baseFrequency="0.01 0.01"
|
||||
numOctaves="1"
|
||||
seed="5"
|
||||
result="turbulence"
|
||||
/>
|
||||
<feComponentTransfer in="turbulence" result="mapped">
|
||||
<feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
|
||||
<feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
|
||||
<feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
|
||||
</feComponentTransfer>
|
||||
<feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
|
||||
<feSpecularLighting
|
||||
in="softMap"
|
||||
surfaceScale="5"
|
||||
specularConstant="1"
|
||||
specularExponent="100"
|
||||
lighting-color="white"
|
||||
result="specLight"
|
||||
>
|
||||
<fePointLight x="-200" y="-200" z="300" />
|
||||
</feSpecularLighting>
|
||||
<feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
|
||||
<!-- scale 值控制扭曲程度，20 是微妙的扭曲 -->
|
||||
<feDisplacementMap in="SourceGraphic" in2="softMap" scale="20" xChannelSelector="R" yChannelSelector="G" />
|
||||
</filter>
|
||||
|
||||
<!-- 液态玻璃滤镜 - 轻量版 (用于按钮等小元素，更微妙的扭曲) -->
|
||||
<filter
|
||||
id="liquid-glass-lite"
|
||||
x="0%" y="0%" width="100%" height="100%"
|
||||
filterUnits="objectBoundingBox"
|
||||
>
|
||||
<feTurbulence
|
||||
type="fractalNoise"
|
||||
baseFrequency="0.015 0.015"
|
||||
numOctaves="1"
|
||||
seed="3"
|
||||
result="turbulence"
|
||||
/>
|
||||
<feGaussianBlur in="turbulence" stdDeviation="2" result="softMap" />
|
||||
<feSpecularLighting
|
||||
in="softMap"
|
||||
surfaceScale="3"
|
||||
specularConstant="0.8"
|
||||
specularExponent="80"
|
||||
lighting-color="white"
|
||||
result="specLight"
|
||||
>
|
||||
<fePointLight x="-100" y="-100" z="200" />
|
||||
</feSpecularLighting>
|
||||
<feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
|
||||
<!-- 更小的 scale 值，扭曲更微妙 -->
|
||||
<feDisplacementMap in="SourceGraphic" in2="softMap" scale="8" xChannelSelector="R" yChannelSelector="G" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<script>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
>
|
||||
<div
|
||||
v-if="uiStore.isCommentsModalOpen"
|
||||
class="comments-modal fixed z-[100] flex flex-col shadow-2xl shadow-black/20 inset-0 md:inset-6 md:m-auto md:w-[800px] md:max-w-[calc(100%-3rem)] md:h-[600px] md:max-h-[calc(100%-3rem)] md:rounded-3xl"
|
||||
class="comments-modal fixed z-[100] flex flex-col shadow-2xl shadow-black/20 inset-0 md:inset-6 md:m-auto md:w-[900px] md:max-w-[calc(100%-3rem)] md:h-[760px] md:max-h-[calc(100%-3rem)] md:rounded-3xl"
|
||||
>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div
|
||||
@@ -222,17 +222,12 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 评论面板 - WWDC 2025 液态玻璃效果 */
|
||||
/* 评论面板 - 半透明效果 */
|
||||
.comments-modal {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
will-change: transform;
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.12),
|
||||
0 0 20px rgba(255, 20, 147, 0.06),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(255, 20, 147, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 移动端无底部边框 */
|
||||
@@ -242,48 +237,25 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 液态玻璃高光 */
|
||||
.comments-modal::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.4) 0%,
|
||||
rgba(255, 255, 255, 0.1) 30%,
|
||||
transparent 50%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* 评论面板 - 暗色模式 */
|
||||
.dark .comments-modal {
|
||||
background: rgba(30, 30, 40, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 -8px 24px rgba(0, 0, 0, 0.2),
|
||||
0 0 20px rgba(255, 105, 180, 0.08),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
|
||||
background: rgba(30, 41, 59, 0.98);
|
||||
border-color: rgba(255, 105, 180, 0.15);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.comments-header {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.dark .comments-header {
|
||||
background: rgba(30, 41, 59, 0.8) !important;
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
}
|
||||
|
||||
/* 评论容器样式 */
|
||||
.comments-container {
|
||||
background: rgba(248, 250, 252, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background: rgba(248, 250, 252, 0.95);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(226, 232, 240, 0.5);
|
||||
@@ -291,7 +263,6 @@ onUnmounted(() => {
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.comments-container {
|
||||
background: rgba(248, 250, 252, 0.5);
|
||||
padding: 1.25rem;
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
@@ -299,8 +270,8 @@ onUnmounted(() => {
|
||||
|
||||
/* 暗色模式评论容器 */
|
||||
.dark .comments-container {
|
||||
background: rgba(51, 65, 85, 0.5) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||
background: rgba(51, 65, 85, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* 自定义滚动条 */
|
||||
|
||||
@@ -307,61 +307,22 @@ onUnmounted(() => {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
/* WWDC 2025 液态玻璃效果 */
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
||||
box-shadow:
|
||||
0 6px 12px rgba(0, 0, 0, 0.15),
|
||||
0 0 20px rgba(255, 20, 147, 0.1),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.6),
|
||||
inset 0 -1px 1px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
/* 半透明效果 */
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
border: 1px solid rgba(255, 20, 147, 0.1);
|
||||
|
||||
/* 性能优化 */
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* 液态玻璃高光 */
|
||||
.fab-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.4) 0%,
|
||||
rgba(255, 255, 255, 0.1) 40%,
|
||||
transparent 60%
|
||||
);
|
||||
pointer-events: none;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fab-button:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dark .fab-button {
|
||||
background: rgba(30, 30, 40, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 6px 12px rgba(0, 0, 0, 0.25),
|
||||
0 0 20px rgba(255, 105, 180, 0.12),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.1),
|
||||
inset 0 -1px 1px rgba(0, 0, 0, 0.1);
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
border-color: rgba(255, 105, 180, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.dark .fab-button::before {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.15) 0%,
|
||||
rgba(255, 255, 255, 0.03) 40%,
|
||||
transparent 60%
|
||||
);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.fab-button {
|
||||
@@ -485,50 +446,17 @@ onUnmounted(() => {
|
||||
/* 站点导航面板 - 液态玻璃效果 */
|
||||
.nav-panel {
|
||||
/* 不设置 position，使用模板中的 fixed */
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.15),
|
||||
0 0 20px rgba(255, 20, 147, 0.08),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.6);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1px solid rgba(255, 20, 147, 0.1);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 液态玻璃高光 */
|
||||
.nav-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.4) 0%,
|
||||
rgba(255, 255, 255, 0.1) 30%,
|
||||
transparent 50%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 站点导航面板 - 暗色模式 */
|
||||
.dark .nav-panel {
|
||||
background: rgba(30, 30, 40, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.25),
|
||||
0 0 20px rgba(255, 105, 180, 0.1),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dark .nav-panel::before {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.12) 0%,
|
||||
rgba(255, 255, 255, 0.03) 30%,
|
||||
transparent 50%
|
||||
);
|
||||
background: rgba(30, 41, 59, 0.98);
|
||||
border-color: rgba(255, 105, 180, 0.15);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 标题栏 */
|
||||
|
||||
@@ -546,8 +546,7 @@ onUnmounted(() => {
|
||||
.image-viewer-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.92);
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
.image-viewer-container {
|
||||
@@ -596,9 +595,8 @@ onUnmounted(() => {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 4px 12px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
@@ -613,7 +611,6 @@ onUnmounted(() => {
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
@@ -704,7 +701,6 @@ onUnmounted(() => {
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.nav-prev {
|
||||
@@ -733,9 +729,8 @@ onUnmounted(() => {
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
padding: 6px 16px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
/* 缩略图 */
|
||||
@@ -745,9 +740,8 @@ onUnmounted(() => {
|
||||
padding: 8px;
|
||||
max-width: 90vw;
|
||||
overflow-x: auto;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
|
||||
@@ -150,13 +150,11 @@ function close() {
|
||||
|
||||
<style scoped>
|
||||
.keyboard-help-panel {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.dark .keyboard-help-panel {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
background: rgba(30, 41, 59, 0.98);
|
||||
}
|
||||
|
||||
.shortcut-row {
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
:is="tag"
|
||||
class="liquid-glass liquid-glass-shadow"
|
||||
:class="[sizeClass, { 'liquid-glass-interactive': interactive }]"
|
||||
>
|
||||
<!-- 液态扭曲效果层 -->
|
||||
<div class="liquid-glass-effect" />
|
||||
|
||||
<!-- 着色层 -->
|
||||
<div class="liquid-glass-tint" />
|
||||
|
||||
<!-- 高光层 -->
|
||||
<div class="liquid-glass-shine" />
|
||||
|
||||
<!-- 边框层 -->
|
||||
<div class="liquid-glass-border" />
|
||||
|
||||
<!-- 内容层 -->
|
||||
<div class="liquid-glass-content">
|
||||
<slot />
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
/** 渲染的 HTML 标签 */
|
||||
tag?: string
|
||||
/** 是否有交互效果（hover 缩放） */
|
||||
interactive?: boolean
|
||||
/** 圆角大小 */
|
||||
rounded?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
tag: 'div',
|
||||
interactive: false,
|
||||
rounded: 'xl',
|
||||
})
|
||||
|
||||
const sizeClass = computed(() => {
|
||||
const roundedMap: Record<string, string> = {
|
||||
sm: 'rounded-lg',
|
||||
md: 'rounded-xl',
|
||||
lg: 'rounded-2xl',
|
||||
xl: 'rounded-3xl',
|
||||
'2xl': 'rounded-[2rem]',
|
||||
full: 'rounded-full',
|
||||
}
|
||||
return roundedMap[props.rounded] || 'rounded-xl'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 交互式液态玻璃 */
|
||||
.liquid-glass-interactive {
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
|
||||
box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.liquid-glass-interactive:hover {
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
}
|
||||
|
||||
.liquid-glass-interactive:active {
|
||||
transform: translateY(-2px) scale(1);
|
||||
}
|
||||
|
||||
/* 圆角继承 */
|
||||
.liquid-glass-effect,
|
||||
.liquid-glass-tint,
|
||||
.liquid-glass-shine,
|
||||
.liquid-glass-border {
|
||||
border-radius: inherit;
|
||||
}
|
||||
</style>
|
||||
@@ -122,12 +122,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Mode Selector - WWDC 2025 液态玻璃 -->
|
||||
<!-- Search Mode Selector -->
|
||||
<div class="flex justify-center items-center">
|
||||
<div class="mode-switch liquid-mode-switch relative flex p-1.5 rounded-2xl">
|
||||
<!-- 液态玻璃高光 -->
|
||||
<!-- 高光装饰 -->
|
||||
<div class="absolute inset-0 rounded-2xl overflow-hidden pointer-events-none">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-white/40 via-white/10 to-transparent" />
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-white/30 via-white/5 to-transparent" />
|
||||
</div>
|
||||
|
||||
<!-- 滑动背景指示器 -->
|
||||
@@ -1036,9 +1036,7 @@ defineExpose({
|
||||
|
||||
/* 错误卡片样式 */
|
||||
.error-card {
|
||||
background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(254, 226, 226, 0.95));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.98));
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
@@ -1162,11 +1160,9 @@ defineExpose({
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.85) 0%,
|
||||
rgba(255, 228, 242, 0.75) 100%
|
||||
rgba(255, 255, 255, 0.95) 0%,
|
||||
rgba(255, 245, 250, 0.92) 100%
|
||||
);
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@@ -1233,25 +1229,17 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
|
||||
/* 液态玻璃模式切换器 */
|
||||
/* 模式切换器 - 半透明效果 */
|
||||
.liquid-mode-switch {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 6px 12px rgba(0, 0, 0, 0.12),
|
||||
0 0 20px rgba(255, 20, 147, 0.06),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.6);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 20, 147, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dark .liquid-mode-switch {
|
||||
background: rgba(30, 30, 40, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 6px 12px rgba(0, 0, 0, 0.2),
|
||||
0 0 20px rgba(255, 105, 180, 0.08),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
border-color: rgba(255, 105, 180, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 模式切换按钮 hover 效果 */
|
||||
|
||||
@@ -222,11 +222,9 @@ onUnmounted(() => {
|
||||
.history-modal {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.95) 0%,
|
||||
rgba(255, 251, 235, 0.98) 100%
|
||||
rgba(255, 255, 255, 0.98) 0%,
|
||||
rgba(255, 253, 245, 0.99) 100%
|
||||
);
|
||||
backdrop-filter: blur(40px) saturate(1.5);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(1.5);
|
||||
border: 1px solid rgba(251, 191, 36, 0.2);
|
||||
}
|
||||
|
||||
@@ -234,23 +232,19 @@ onUnmounted(() => {
|
||||
.dark .history-modal {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(30, 41, 59, 0.95) 0%,
|
||||
rgba(30, 27, 17, 0.98) 100%
|
||||
rgba(30, 41, 59, 0.98) 0%,
|
||||
rgba(30, 27, 17, 0.99) 100%
|
||||
) !important;
|
||||
backdrop-filter: blur(40px) saturate(1.5) !important;
|
||||
-webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
|
||||
border: 1px solid rgba(251, 191, 36, 0.1) !important;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.history-header {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.dark .history-header {
|
||||
background: rgba(30, 41, 59, 0.8) !important;
|
||||
background: rgba(30, 41, 59, 0.95) !important;
|
||||
}
|
||||
|
||||
/* 历史记录项 */
|
||||
|
||||
@@ -346,43 +346,15 @@ function getTagLabel(tag: string) {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 平台卡片 - WWDC 2025 液态玻璃效果 */
|
||||
/* 平台卡片 - 半透明效果 */
|
||||
.result-card {
|
||||
animation-delay: calc(var(--index, 0) * 0.1s);
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 400px;
|
||||
|
||||
/* WWDC 2025 液态玻璃效果 */
|
||||
background: rgba(255, 255, 255, 0.3) !important;
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.12),
|
||||
0 0 20px rgba(255, 20, 147, 0.06),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
|
||||
/* 液态玻璃高光 */
|
||||
.result-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.5) 0%,
|
||||
rgba(255, 255, 255, 0.1) 30%,
|
||||
transparent 50%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.result-card:hover::before {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
border: 1px solid rgba(255, 20, 147, 0.08) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
|
||||
}
|
||||
|
||||
/* 暗色模式 */
|
||||
|
||||
@@ -436,34 +436,25 @@ function reset() {
|
||||
|
||||
/* 设置面板 - 暗色模式 */
|
||||
.dark .settings-page {
|
||||
background: rgba(30, 30, 40, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 -8px 24px rgba(0, 0, 0, 0.2),
|
||||
0 0 20px rgba(255, 105, 180, 0.08),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
|
||||
background: rgba(30, 41, 59, 0.98);
|
||||
border-color: rgba(255, 105, 180, 0.15);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 设置卡片 - 亮色模式 */
|
||||
.settings-card {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 1.25rem;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow:
|
||||
0 4px 24px -4px rgba(0, 0, 0, 0.08),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.6) inset;
|
||||
border: 1px solid rgba(255, 20, 147, 0.08);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* 设置卡片 - 暗色模式 */
|
||||
.dark .settings-card {
|
||||
background: rgba(30, 41, 59, 0.8) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow:
|
||||
0 4px 24px -4px rgba(0, 0, 0, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
border: 1px solid rgba(255, 105, 180, 0.1);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 自定义滚动条 */
|
||||
|
||||
@@ -219,16 +219,10 @@ async function saveBackgroundImage() {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
/* WWDC 2025 液态玻璃效果 */
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 6px 12px rgba(0, 0, 0, 0.15),
|
||||
0 0 20px rgba(255, 20, 147, 0.1),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.6),
|
||||
inset 0 -1px 1px rgba(0, 0, 0, 0.05);
|
||||
/* 半透明效果 */
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(255, 20, 147, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
color: rgb(199, 21, 133);
|
||||
cursor: pointer;
|
||||
@@ -242,27 +236,6 @@ async function saveBackgroundImage() {
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
|
||||
}
|
||||
|
||||
/* 液态玻璃高光 */
|
||||
.toolbar-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.4) 0%,
|
||||
rgba(255, 255, 255, 0.1) 40%,
|
||||
transparent 60%
|
||||
);
|
||||
pointer-events: none;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.toolbar-button:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.toolbar-button {
|
||||
width: 44px;
|
||||
@@ -279,25 +252,12 @@ async function saveBackgroundImage() {
|
||||
|
||||
/* 暗色主题 */
|
||||
.dark .toolbar-button {
|
||||
background: rgba(30, 30, 40, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 6px 12px rgba(0, 0, 0, 0.25),
|
||||
0 0 20px rgba(255, 105, 180, 0.12),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.1),
|
||||
inset 0 -1px 1px rgba(0, 0, 0, 0.1);
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
border-color: rgba(255, 105, 180, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
color: rgb(255, 179, 217);
|
||||
}
|
||||
|
||||
.dark .toolbar-button::before {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.15) 0%,
|
||||
rgba(255, 255, 255, 0.03) 40%,
|
||||
transparent 60%
|
||||
);
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
transform: translate3d(0, -3px, 0) scale(1.08);
|
||||
box-shadow:
|
||||
|
||||
Reference in New Issue
Block a user