200 lines
4.7 KiB
CSS
200 lines
4.7 KiB
CSS
@import "tailwindcss";
|
|
@import "@nuxt/ui-pro";
|
|
|
|
@source "../../../content/**/*";
|
|
|
|
@theme static {
|
|
--font-sans: 'Roboto', sans-serif;
|
|
|
|
--color-green-50: #EFFDF5;
|
|
--color-green-100: #D9FBE8;
|
|
--color-green-200: #B3F5D1;
|
|
--color-green-300: #75EDAE;
|
|
--color-green-400: #00DC82;
|
|
--color-green-500: #00C16A;
|
|
--color-green-600: #00A155;
|
|
--color-green-700: #007F45;
|
|
--color-green-800: #016538;
|
|
--color-green-900: #0A5331;
|
|
--color-green-950: #052E16;
|
|
}
|
|
|
|
:root {
|
|
--ui-header-height: --spacing(16);
|
|
/* 全局圆角与阴影，作为默认值，可被主题覆盖 */
|
|
--ui-radius: 8px;
|
|
--ui-button-radius: var(--ui-radius);
|
|
--ui-card-radius: calc(var(--ui-radius) + 4px);
|
|
--ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
/* 主题字体样式 - 使用Nuxt Font字体 */
|
|
.font-sans-serif {
|
|
font-family: 'Source Han Sans SC', 'PingFang SC', 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
|
}
|
|
|
|
.font-serif {
|
|
font-family: 'Source Han Serif SC', 'Merriweather', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
.font-monospace {
|
|
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
|
}
|
|
|
|
/* 字号样式 - 针对文档页面 */
|
|
.text-xs {
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.text-xs .prose {
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
|
|
.text-sm .prose {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
|
|
.text-base {
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.text-base .prose {
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.text-lg {
|
|
font-size: 1.125rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
.text-lg .prose {
|
|
font-size: 1.125rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
.text-xl {
|
|
font-size: 1.25rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
.text-xl .prose {
|
|
font-size: 1.25rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
/* 主题样式 */
|
|
.theme-classic {
|
|
/* 经典主题样式 */
|
|
--theme-background: #ffffff;
|
|
--theme-text: #1f2937;
|
|
--theme-border: #e5e7eb;
|
|
/* 经典：中等圆角与轻阴影 */
|
|
--ui-radius: 6px;
|
|
--ui-button-radius: 6px;
|
|
--ui-card-radius: 10px;
|
|
--ui-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.theme-elegant {
|
|
/* 优雅主题样式 */
|
|
--theme-background: #fafafa;
|
|
--theme-text: #374151;
|
|
--theme-border: #d1d5db;
|
|
/* 优雅：更大圆角与柔和阴影 */
|
|
--ui-radius: 8px;
|
|
--ui-button-radius: 10px;
|
|
--ui-card-radius: 12px;
|
|
--ui-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.theme-minimal {
|
|
/* 简洁主题样式 */
|
|
--theme-background: #ffffff;
|
|
--theme-text: #111827;
|
|
--theme-border: #f3f4f6;
|
|
/* 简洁：极小圆角，无阴影 */
|
|
--ui-radius: 3px;
|
|
--ui-button-radius: 3px;
|
|
--ui-card-radius: 6px;
|
|
--ui-shadow: none;
|
|
}
|
|
|
|
/* 深色模式支持 */
|
|
.dark .theme-classic {
|
|
--theme-background: #1f2937;
|
|
--theme-text: #f9fafb;
|
|
--theme-border: #374151;
|
|
}
|
|
|
|
.dark .theme-elegant {
|
|
--theme-background: #111827;
|
|
--theme-text: #f3f4f6;
|
|
--theme-border: #4b5563;
|
|
}
|
|
|
|
.dark .theme-minimal {
|
|
--theme-background: #000000;
|
|
--theme-text: #ffffff;
|
|
--theme-border: #1f2937;
|
|
}
|
|
|
|
/* 统一将主题风格映射到常见元素，尽量少侵入、仅做“润色” */
|
|
/* 图片与代码块采用卡片圆角与轻阴影，增强主题差异感 */
|
|
/* :where(.prose) img,
|
|
:where(.prose) pre,
|
|
:where(.prose) table {
|
|
border-radius: var(--ui-card-radius);
|
|
box-shadow: var(--ui-shadow);
|
|
background-color: var(--theme-background);
|
|
border: 1px solid var(--theme-border);
|
|
} */
|
|
|
|
/* 按钮采用按钮圆角，保持各主题观感统一 */
|
|
/* button,
|
|
[role="button"] {
|
|
border-radius: var(--ui-button-radius);
|
|
} */
|
|
|
|
/* 常见圆角工具类在不同主题下的“风格化”提升 */
|
|
/* :where(.theme-classic) .rounded-lg,
|
|
:where(.theme-classic) .rounded-xl { border-radius: var(--ui-card-radius); }
|
|
|
|
:where(.theme-elegant) .rounded-md { border-radius: var(--ui-button-radius); }
|
|
:where(.theme-elegant) .rounded-lg { border-radius: calc(var(--ui-card-radius) + 2px); }
|
|
:where(.theme-elegant) .rounded-xl { border-radius: calc(var(--ui-card-radius) + 6px); }
|
|
|
|
:where(.theme-minimal) .rounded-md { border-radius: var(--ui-radius); }
|
|
:where(.theme-minimal) .rounded-lg { border-radius: calc(var(--ui-radius) + 2px); }
|
|
:where(.theme-minimal) .rounded-xl { border-radius: calc(var(--ui-radius) + 4px); } */
|
|
|
|
|
|
/* Inline math ($...$) 强制行内，不换行 */
|
|
/* .math-inline,
|
|
.math.math-inline,
|
|
mjx-container[display="false"] {
|
|
display: inline !important;
|
|
}
|
|
|
|
p > mjx-container[display="false"],
|
|
li > mjx-container[display="false"] {
|
|
display: inline !important;
|
|
margin: 0 0.15em !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.math-display,
|
|
.math.math-display,
|
|
mjx-container[display="true"] {
|
|
display: block !important;
|
|
margin: 0.75em 0 !important;
|
|
} */ |