117 lines
2.8 KiB
CSS
117 lines
2.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 222.2 84% 4.9%;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.container-page {
|
|
@apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.prose-rich h1,
|
|
.prose-rich h2,
|
|
.prose-rich h3 {
|
|
@apply mt-6 mb-3 font-semibold text-gray-900;
|
|
}
|
|
.prose-rich h1 {
|
|
@apply text-2xl;
|
|
}
|
|
.prose-rich h2 {
|
|
@apply text-xl;
|
|
}
|
|
.prose-rich h3 {
|
|
@apply text-lg;
|
|
}
|
|
.prose-rich p {
|
|
@apply my-3 leading-7 text-gray-700;
|
|
}
|
|
.prose-rich img {
|
|
@apply my-4 rounded-lg;
|
|
}
|
|
.prose-rich ul,
|
|
.prose-rich ol {
|
|
@apply my-3 pl-6;
|
|
}
|
|
.prose-rich ul {
|
|
@apply list-disc;
|
|
}
|
|
.prose-rich ol {
|
|
@apply list-decimal;
|
|
}
|
|
.prose-rich a {
|
|
@apply text-brand-600 underline underline-offset-2;
|
|
}
|
|
.prose-rich blockquote {
|
|
@apply border-l-4 border-gray-200 pl-4 italic text-gray-600;
|
|
}
|
|
}
|
|
|
|
/* react-quill 编辑器内部样式 */
|
|
.ql-editor {
|
|
min-height: 240px;
|
|
}
|
|
|
|
/* ===== Hero 几何动画 ===== */
|
|
@keyframes hero-float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(6deg); }
|
|
}
|
|
@keyframes hero-float-rev {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(16px) rotate(-8deg); }
|
|
}
|
|
@keyframes hero-spin-slow {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@keyframes hero-pulse-ring {
|
|
0% { transform: scale(0.8); opacity: 0.6; }
|
|
50% { transform: scale(1.1); opacity: 0.2; }
|
|
100% { transform: scale(0.8); opacity: 0.6; }
|
|
}
|
|
@keyframes hero-slide {
|
|
0%, 100% { transform: translateX(0); }
|
|
50% { transform: translateX(12px); }
|
|
}
|
|
|
|
.hero-anim-float { animation: hero-float 6s ease-in-out infinite; }
|
|
.hero-anim-float-rev { animation: hero-float-rev 7s ease-in-out infinite; }
|
|
.hero-anim-spin { animation: hero-spin-slow 18s linear infinite; }
|
|
.hero-anim-pulse { animation: hero-pulse-ring 4s ease-in-out infinite; }
|
|
.hero-anim-slide { animation: hero-slide 5s ease-in-out infinite; }
|
|
|
|
/* ===== Showcase 浮动动画 ===== */
|
|
@keyframes showcase-gentle-float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
@keyframes showcase-glow {
|
|
0%, 100% { opacity: 0.4; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
.showcase-anim-float { animation: showcase-gentle-float 5s ease-in-out infinite; }
|
|
.showcase-anim-glow { animation: showcase-glow 4s ease-in-out infinite; }
|
|
|