@tailwind base; @tailwind components; @tailwind utilities; /* 公告链接下划线 */ .announcement-text a { text-decoration: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important; padding-bottom: 2px; } .dark .announcement-text a { border-bottom-color: rgba(255, 255, 255, 0.5) !important; } /* 主题变量 */ :root { --color-bg: #ffffff; --color-bg-card: #ffffff; --color-bg-hover: #f3f4f6; --color-text: #111827; --color-text-secondary: #6b7280; --color-border: #e5e7eb; --color-primary: #3b82f6; --color-ring: rgba(59, 130, 246, 0.4); } .dark { --color-bg: #0a0a0a; --color-bg-card: #171717; --color-bg-hover: #262626; --color-text: #f3f4f6; --color-text-secondary: #9ca3af; --color-border: #2e2e2e; --color-primary: #60a5fa; --color-ring: rgba(96, 165, 250, 0.4); } /* Tailwind-like 工具类 */ .text-muted-foreground { color: var(--color-text-secondary); } .text-foreground { color: var(--color-text); } .text-primary { color: var(--color-primary); } .bg-primary { background-color: var(--color-primary); } .bg-muted { background-color: var(--color-bg-hover); } .border-border { border-color: var(--color-border); } .border-primary { border-color: var(--color-primary); } .prose { --tw-prose-links: var(--color-primary); } .dark .prose { --tw-prose-body: var(--color-text); --tw-prose-headings: var(--color-text); --tw-prose-links: var(--color-primary); --tw-prose-bold: var(--color-text); --tw-prose-code: var(--color-text); --tw-prose-quotes: var(--color-text-secondary); --tw-prose-quote-borders: var(--color-primary); } body { background-color: var(--color-bg); color: var(--color-text); transition: background-color 0.3s ease, color 0.3s ease; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 入场动画 */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .anim-fade-in-up { animation: fade-in-up 0.6s ease-out both; } .anim-fade-in { animation: fade-in 0.5s ease-out both; } .anim-delay-1 { animation-delay: 0.1s; } .anim-delay-2 { animation-delay: 0.2s; } .anim-delay-3 { animation-delay: 0.3s; } .anim-delay-4 { animation-delay: 0.4s; } .anim-delay-5 { animation-delay: 0.5s; } /* 卡片 */ .card { background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 0.75rem; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .dark .card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } /* 按钮 */ .btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid var(--color-border); background-color: var(--color-bg-card); color: var(--color-text); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .btn-pill:hover { background-color: var(--color-bg-hover); } .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: white; } .btn-primary:hover { opacity: 0.9; } /* 标签 */ .tag-pill { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background-color: var(--color-bg-hover); color: var(--color-text-secondary); transition: background-color 0.15s ease, color 0.15s ease; text-decoration: none; } .tag-pill:hover { background-color: var(--color-primary); color: white; } /* 滚动条 */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: 3px; } /* 代码块 */ pre { border-radius: 0.75rem; overflow-x: auto; padding: 1rem; font-size: 0.875rem; background-color: var(--color-bg-card); border: 1px solid var(--color-border); } code { font-family: 'JetBrains Mono', 'Fira Code', monospace; } /* 代码高亮背景色(Shiki 不设置 pre 背景,需手动补) */ pre.shiki, pre:has(> .shiki) { background-color: #fff !important; } pre.shiki code { background: transparent !important; } .dark pre.shiki, .dark pre:has(> .shiki) { background-color: #24292e !important; } /* 隐藏标题锚点链接样式(保留功能,不显示为可点击) */ .prose h2 > a, .prose h3 > a, .prose h4 > a { color: inherit; text-decoration: none; cursor: default; } .prose h2 > a:hover, .prose h3 > a:hover, .prose h4 > a:hover { opacity: 1; }