From d830b73770a883069404289c6a0f6e1d1e65372e Mon Sep 17 00:00:00 2001 From: Mikuisnotavailable Date: Mon, 19 Jan 2026 20:08:54 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E7=A5=9E=E5=BF=85=E8=B0=B7?= =?UTF-8?q?=E6=AD=8C=E5=AD=97=E4=BD=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 91 ++++++++++++++++++++++++++------------------- src/app/layout.tsx | 9 +---- tailwind.config.ts | 2 +- 3 files changed, 54 insertions(+), 48 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 1505bda..d4fc656 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,4 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import "tailwindcss"; /* @tailwind base; @tailwind components; @@ -7,7 +6,8 @@ :root { --background: #ffffff; --foreground: #171717; - --navbar-height: 64px; /* 与pt-16对应 */ + --navbar-height: 64px; + /* 与pt-16对应 */ --primary-orange: #f97316; --primary-orange-dark: #ea580c; --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); @@ -25,7 +25,7 @@ body { color: var(--foreground); background: var(--background); - font-family: 'Inter', Arial, Helvetica, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; scroll-behavior: smooth; } @@ -132,7 +132,7 @@ body { background-color: #1f2937; border-color: #c2410c; } - + .card-minecraft:hover { border-color: var(--primary-orange); } @@ -159,96 +159,97 @@ body { /* 现代布局解决方案 */ @layer utilities { + /* 全屏减去navbar高度 */ .h-screen-nav { height: calc(100vh - var(--navbar-height)); } - + /* 侧栏最大高度，确保底部按钮可见 */ .sidebar-max-height { max-height: calc(100vh - var(--navbar-height) - 120px); } - + /* 首页hero section专用高度 */ .min-h-screen-nav { min-height: calc(100vh - var(--navbar-height)); } - + /* 增强的过渡效果 */ .transition-all-enhanced { transition: all var(--transition-normal); } - + .transition-colors-enhanced { transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal); } - + .transition-transform-enhanced { transition: transform var(--transition-normal); } - + /* 微交互效果 */ .micro-interaction { transition: all var(--transition-fast); } - + .micro-interaction:hover { transform: scale(1.02); } - + .micro-interaction:active { transform: scale(0.98); } - + /* 加载动画 */ .animate-pulse-slow { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } - + .animate-pulse-fast { animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite; } - + /* 弹跳动画 */ .animate-bounce-slow { animation: bounce 2s infinite; } - + .animate-bounce-fast { animation: bounce 1s infinite; } - + /* 旋转动画 */ .animate-spin-slow { animation: spin 3s linear infinite; } - + .animate-spin-fast { animation: spin 1s linear infinite; } - + /* 渐变动画 */ .animate-gradient { background-size: 200% 200%; animation: gradient 3s ease infinite; } - + /* 阴影动画 */ .shadow-animated { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: box-shadow var(--transition-normal); } - + .shadow-animated:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } - + /* 模糊动画 */ .backdrop-blur-animated { backdrop-filter: blur(8px); transition: backdrop-filter var(--transition-normal); } - + .backdrop-blur-animated:hover { backdrop-filter: blur(16px); } @@ -259,18 +260,23 @@ body { 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } } @keyframes float { - 0%, 100% { + + 0%, + 100% { transform: translateY(0px); } + 50% { transform: translateY(-10px); } @@ -280,6 +286,7 @@ body { 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } @@ -290,6 +297,7 @@ body { transform: translateY(30px); opacity: 0; } + to { transform: translateY(0); opacity: 1; @@ -301,6 +309,7 @@ body { transform: translateY(-30px); opacity: 0; } + to { transform: translateY(0); opacity: 1; @@ -312,6 +321,7 @@ body { transform: translateX(-30px); opacity: 0; } + to { transform: translateX(0); opacity: 1; @@ -323,6 +333,7 @@ body { transform: translateX(30px); opacity: 0; } + to { transform: translateX(0); opacity: 1; @@ -334,6 +345,7 @@ body { transform: scale(0.9); opacity: 0; } + to { transform: scale(1); opacity: 1; @@ -345,6 +357,7 @@ body { transform: scale(1); opacity: 1; } + to { transform: scale(0.9); opacity: 0; @@ -378,23 +391,19 @@ body { /* 加载状态样式 */ .loading-shimmer { - background: linear-gradient( - 90deg, - #f0f0f0 0%, - #e0e0e0 50%, - #f0f0f0 100% - ); + background: linear-gradient(90deg, + #f0f0f0 0%, + #e0e0e0 50%, + #f0f0f0 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .dark .loading-shimmer { - background: linear-gradient( - 90deg, - #374151 0%, - #4b5563 50%, - #374151 100% - ); + background: linear-gradient(90deg, + #374151 0%, + #4b5563 50%, + #374151 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @@ -426,7 +435,10 @@ body { /* 响应式动效 */ @media (prefers-reduced-motion: reduce) { - *, *::before, *::after { + + *, + *::before, + *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; @@ -435,15 +447,16 @@ body { /* 触摸设备优化 */ @media (hover: none) and (pointer: coarse) { + .btn-carrot:hover, .btn-carrot-outline:hover, .card-minecraft:hover { transform: none; } - + .btn-carrot:active, .btn-carrot-outline:active, .card-minecraft:active { transform: scale(0.98); } -} +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8096f60..f7e43a0 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,4 @@ import type { Metadata } from "next"; -import { Inter } from "next/font/google"; import "./globals.css"; import Navbar from "@/components/Navbar"; import { AuthProvider } from "@/contexts/AuthContext"; @@ -9,12 +8,6 @@ import { ErrorNotificationContainer } from "@/components/ErrorNotification"; import ScrollToTop from "@/components/ScrollToTop"; import PageTransition from "@/components/PageTransition"; -const inter = Inter({ - subsets: ["latin"], - weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'], - display: 'swap', -}); - export const metadata: Metadata = { title: "CarrotSkin - 现代化Minecraft Yggdrasil皮肤站", description: "新一代Minecraft Yggdrasil皮肤站，为创作者打造的现代化皮肤管理平台", @@ -34,7 +27,7 @@ export default function RootLayout({ }>) { return ( - + diff --git a/tailwind.config.ts b/tailwind.config.ts index eae9d14..ab3343f 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -32,7 +32,7 @@ const config: Config = { }, fontFamily: { 'minecraft': ['Minecraft', 'monospace'], - 'sans': ['Inter', 'system-ui', 'sans-serif'], + 'sans': ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'], }, animation: { 'float': 'float 3s ease-in-out infinite',