写了一款Typora的主题(粉色系日记的+蓝色的)
写了一款Typora的主题(粉色系日记的),不知道有没有佬是喜欢粉色的,哈哈哈
因为我一般写种东西,要么是严肃的,要么是诗意的,要么是好玩的,有时候还写日记,前两者都有别人的typora主题,所以我用AI写了一个可爱的好玩的出来
不过需要下载两个字体文件:
- ComicNeue-Regular.woff2
- LXGWWenKai-Regular.ttf
链接: - Comic Neue : download for free and install for your website or Photoshop.
- Releases · lxgw/LxgwWenkaiGB · GitHub
具体放在哪里,我是放在Font文件下面的
另外补上一款蓝色的:
只需要把代码中的root换成(源代码在下面哦)
:root {
/* --- 浅蓝自由色系的配色方案 --- */
/* 主题色调选择柔和、清新的浅蓝色系 */
--theme-color: #64B5F6;
/* 主题主色调 - 柔和的浅蓝 */
--theme-color-weak: #90CAF9;
/* 浅主题蓝 - 更柔和，用于背景和边框 */
--theme-color-weaker: #BBDEFB;
/* 最浅主题蓝 - 用于背景、最弱边框 */
--color-text: #555555;
/* 主要文本颜色 - 柔和的深灰，保证良好的对比度 */
--color-em: #81C784;
/* 强调文本颜色 - 柔和的绿色，与蓝色搭配清新 */
--color-strong: #42A5F5;
/* 加粗文本颜色 - 中等蓝色，用于小范围强调 */
--color-weak: #B0BEC5;
/* 弱化元素颜色 - 柔和的蓝灰色 */
--color-weakest: #E0E0E0;
/* 最弱化元素颜色 - 非常浅的灰色 */
--md-char-color: var(--theme-color-weak);
/* Markdown特殊字符颜色，使用浅主题蓝，柔和 */
--meta-content-color: var(--color-weak);
/* 元信息颜色，使用蓝灰色，易读 */
/* --- 标题颜色 (柔和梯度，更偏向蓝绿) --- */
--color-title-h1: var(--theme-color);
/* H1 使用主题蓝，突出但不刺眼 */
--color-title-h2: var(--color-strong);
/* H2 使用中等蓝 */
--color-title-h3: var(--theme-color-weak);
/* H3 使用浅主题蓝 */
--color-title-h4: var(--color-em);
/* H4 使用柔和绿色 */
--color-title-h5: var(--color-weak);
/* H5 使用柔和蓝灰色 */
--color-title-h6: var(--color-weakest);
/* H6 使用最浅灰色 */
/* --- 其他元素颜色 --- */
--color-quote: var(--color-em);
/* 引用文字颜色使用柔和绿色 */
--color-code: var(--color-strong);
/* 行内代码文字颜色使用中等蓝色 */
--color-link: var(--color-strong);
/* 链接文字颜色使用中等蓝色 */
--color-italic: var(--color-em);
/* 斜体文字颜色使用柔和绿色 */
--color-highlight: #E1F5FE;
/* 高亮背景色 - 非常浅的青蓝色 */
--color-strike: var(--color-weak);
/* 删除线颜色使用蓝灰色 */
--color-footnote: var(--color-weak);
/* 注脚颜色使用蓝灰色 */
/* 表单和按钮颜色在写作主题中不常用，保留基础定义，但样式会简化 */
--color-button-text: var(--color-text);
/* 按钮文字颜色用文本色 */
--color-form-border: var(--color-weakest);
/* 表单边框颜色用最浅灰色 */
--color-form-focus: var(--theme-color-weak);
/* 表单聚焦边框颜色用浅主题蓝 */
--color-placeholder: var(--color-weak);
/* 占位符颜色用蓝灰色 */
/* --- 背景设置 (更柔和、清新) --- */
--bg-contents: #E3F2FD;
/* 页面背景 - 极浅蓝色，清新感 */
--bg-write: #FFFFFF;
/* 内容区域背景 - 白色，最适合写作，保持清晰 */
--bg-title: none;
/* 标题背景 */
--bg-quote: #F0F8FF;
/* 引用块背景 - 略浅于页面背景的浅蓝色，柔和区分 */
--bg-code: #E1F5FE;
/* 行内代码背景 - 浅青蓝色 */
--bg-code-block: #E3F2FD;
/* 代码块背景 - 同页面背景，最柔和 */
--bg-highlight: var(--color-highlight);
/* 高亮背景色 */
--bg-button: var(--theme-color-weak);
/* 按钮背景色用浅主题蓝 */
--bg-button-hover: var(--theme-color);
/* 按钮悬停背景色用主题蓝 */
--bg-form-field: #FFFFFF;
/* 表单输入框背景 - 白色 */
/* --- 字体设置 --- */
/* 将 LXGW WenKai Lite 设置为主要字体，Comic Neue 作为补充，sans-serif 回退 */
--font-family: 'LXGW WenKai Lite', 'LXGW WenKai', 'Comic Neue', sans-serif;
--text-font: 400 1.1rem/1.8rem var(--font-family);
/* 调整行高以适应手写体，确保阅读舒适 */
--font-title: var(--font-family);
--font-quote: 400 1.15rem/1.8rem var(--font-family);
/* 引用字体大小略小，行高与正文接近 */
/* 代码字体必须使用等宽字体链 */
--font-code: 400 0.9rem/1.5rem Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
--font-footnote: 400 0.95rem/1.5rem var(--font-family);
/* 注脚字体略小 */
/* 标题字体大小和字重 (已包含在变量中) */
--font-title-h1: 900 2.6rem/1.2 var(--font-title);
/* H1 略小，更适合文档标题 */
--font-title-h2: 800 2.1rem/1.3 var(--font-title);
--font-title-h3: 700 1.7rem/1.4 var(--font-title);
--font-title-h4: 600 1.5rem/1.5 var(--font-title);
--font-title-h5: 600 1.3rem/1.6 var(--font-title);
--font-title-h6: 500 1.2rem/1.7 var(--font-title);
/* --- 边框设置 --- */
--border-primary: 2px solid var(--theme-color);
/* 主题色边框 */
--border-secondary: 3px solid var(--theme-color-weak);
/* 辅助边框，略粗 */
--border-divider: 2px dotted var(--theme-color-weaker);
/* 分隔线边框 */
--border-weak: 1px solid var(--color-weakest);
/* 最弱边框，表格等 */
--border-form: 1px solid var(--color-form-border);
/* 表单边框 */
--border-form-focus: 2px solid var(--color-form-focus);
/* 表单聚焦边框 */
/* --- 间距和圆角 --- */
--spacing-small: 0.5rem;
--spacing-medium: 1rem;
--spacing-large: 1.5rem;
--radius-small: 4px;
--radius-medium: 8px;
--radius-large: 12px;
--radius-xlarge: 16px;
/* #write 和 blockquote 圆角适中 */
}
粉色源代码
/* 导入本地字体文件 */
/* Comic Neue - 可作为英文、数字、符号的可爱补充 */
@font-face {
font-family: 'Comic Neue';
src: url('./Font/ComicNeue-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
/* 字体加载策略 */
}
/*霞鸳文楷 - 主要用于中英文字体，带有手写可爱感，更适合阅读*/
@font-face {
font-family: 'LXGW WenKai Lite';
src: url('./Font/LXGWWenKai-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
/* 字体加载策略 */
}
:root {
/* --- 可爱的配色方案 (柔和化，减少饱和度) --- */
--theme-color: #FF8ABF;
/* 主题粉色 - 略微柔和 */
--theme-color-weak: #FFB3D9;
/* 浅主题粉色 - 更柔和，用于背景和边框 */
--theme-color-weaker: #FFDCEB;
/* 最浅主题粉色 - 用于背景、最弱边框 */
--color-text: #5A4A6C;
/* 主要文本颜色 - 柔和的深紫，保证对比度 */
--color-em: #A655C5;
/* 强调文本颜色 - 亮紫色，略微柔和 */
--color-strong: #FF5AAA;
/* 加粗文本颜色 - 强烈的洋红，用于小范围强调 */
--color-weak: #C8B2E0;
/* 弱化元素颜色 - 柔和的薰衣草紫 */
--color-weakest: #E2D6F0;
/* 最弱化元素颜色 - 最浅的薰衣草紫 */
--md-char-color: var(--theme-color-weak);
/* Markdown特殊字符颜色，柔和 */
--meta-content-color: var(--color-weak);
/* 元信息颜色，易读 */
/* --- 标题颜色 (柔和梯度，更偏向粉紫) --- */
--color-title-h1: var(--theme-color);
/* H1 使用主题粉，突出但不刺眼 */
--color-title-h2: var(--color-strong);
/* H2 使用洋红 */
--color-title-h3: var(--theme-color-weak);
/* H3 使用浅主题粉 */
--color-title-h4: var(--color-em);
/* H4 使用亮紫色 */
--color-title-h5: var(--color-weak);
/* H5 使用柔和薰衣草紫 */
--color-title-h6: var(--color-weakest);
/* H6 使用最浅薰衣草紫 */
/* --- 其他元素颜色 --- */
--color-quote: var(--color-em);
/* 引用文字颜色 */
--color-code: var(--color-strong);
/* 行内代码文字颜色 */
--color-link: var(--color-strong);
/* 链接文字颜色 */
--color-italic: var(--color-em);
/* 斜体文字颜色 */
--color-highlight: #FFF0F8;
/* 高亮背景色 - 非常浅的粉 */
--color-strike: var(--color-weak);
/* 删除线颜色 */
--color-footnote: var(--color-weak);
/* 注脚颜色 */
/* 表单和按钮颜色在写作主题中不常用，保留基础定义，但样式会简化 */
--color-button-text: var(--color-text);
/* 按钮文字颜色用文本色 */
--color-form-border: var(--color-weakest);
/* 表单边框颜色 */
--color-form-focus: var(--theme-color-weak);
/* 表单聚焦边框颜色 */
--color-placeholder: var(--color-weak);
/* 占位符颜色 */
/* --- 背景设置 (更柔和) --- */
--bg-contents: #FFF8FC;
/* 页面背景 - 极浅粉，更白一些 */
--bg-write: #FFFFFF;
/* 内容区域背景 - 白色，最适合写作 */
--bg-title: none;
/* 标题背景 */
--bg-quote: #FFFBFD;
/* 引用块背景 - 略浅于页面背景，柔和区分 */
--bg-code: #FFF5FA;
/* 行内代码背景 - 浅粉 */
--bg-code-block: #FFF8FC;
/* 代码块背景 - 同页面背景，最柔和 */
--bg-highlight: var(--color-highlight);
/* 高亮背景色，链接悬停等 */
--bg-button: var(--theme-color-weak);
/* 按钮背景色用浅粉 */
--bg-button-hover: var(--theme-color);
/* 按钮悬停背景色用主题粉 */
--bg-form-field: #FFFFFF;
/* 表单输入框背景 - 白色 */
/* --- 字体设置 --- */
/* 将 LXGW WenKai Lite 设置为主要字体，Comic Neue 作为补充，sans-serif 回退 */
--font-family: 'LXGW WenKai Lite', 'LXGW WenKai', 'Comic Neue', sans-serif;
--text-font: 400 1.1rem/1.8rem var(--font-family);
/* 调整行高以适应手写体，确保阅读舒适 */
--font-title: var(--font-family);
--font-quote: 400 1.15rem/1.8rem var(--font-family);
/* 引用字体大小略小，行高与正文接近 */
/* 代码字体必须使用等宽字体链 */
--font-code: 400 0.9rem/1.5rem Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
--font-footnote: 400 0.95rem/1.5rem var(--font-family);
/* 注脚字体略小 */
/* 标题字体大小和字重 (已包含在变量中) */
--font-title-h1: 900 2.6rem/1.2 var(--font-title);
/* H1 略小，更适合文档标题 */
--font-title-h2: 800 2.1rem/1.3 var(--font-title);
--font-title-h3: 700 1.7rem/1.4 var(--font-title);
--font-title-h4: 600 1.5rem/1.5 var(--font-title);
--font-title-h5: 600 1.3rem/1.6 var(--font-title);
--font-title-h6: 500 1.2rem/1.7 var(--font-title);
/* --- 边框设置 --- */
--border-primary: 2px solid var(--theme-color);
/* 主题色边框 */
--border-secondary: 3px solid var(--theme-color-weak);
/* 辅助边框，略粗 */
--border-divider: 2px dotted var(--theme-color-weaker);
/* 分隔线边框 */
--border-weak: 1px solid var(--color-weakest);
/* 最弱边框，表格等 */
--border-form: 1px solid var(--color-form-border);
/* 表单边框 */
--border-form-focus: 2px solid var(--color-form-focus);
/* 表单聚焦边框 */
/* --- 间距和圆角 --- */
--spacing-small: 0.5rem;
--spacing-medium: 1rem;
--spacing-large: 1.5rem;
--radius-small: 4px;
--radius-medium: 8px;
--radius-large: 12px;
--radius-xlarge: 16px;
/* #write 和 blockquote 圆角适中 */
}
/* --- 基础样式 --- */
body {
font-family: var(--font-family);
background-color: var(--bg-contents);
color: var(--color-text);
line-height: var(--text-font-line-height);
padding: 0;
margin: 0;
min-height: 100vh;
box-sizing: border-box;
}
/* 自定义滚动条样式 (仅Webkit浏览器) - 保留，不影响写作 */
::-webkit-scrollbar {
width: 8px;
/* 滚动条宽度略窄 */
}
::-webkit-scrollbar-track {
background: var(--theme-color-weaker);
border-radius: var(--radius-medium);
/* 圆角略小 */
}
::-webkit-scrollbar-thumb {
background: var(--theme-color-weak);
border-radius: var(--radius-medium);
border: 2px solid var(--bg-contents);
}
::-webkit-scrollbar-thumb:hover {
background: var(--theme-color);
}
/* 页面核心内容区域 */
#write {
background-color: var(--bg-write);
max-width: 860px;
margin: 30px auto;
padding: 40px;
border-radius: var(--radius-xlarge);
/* 适中的圆角 */
box-shadow: 0 10px 30px rgba(255, 138, 191, 0.1);
/* 柔和的粉色阴影，透明度更低 */
overflow-wrap: break-word;
position: relative;
/* 移除角落的装饰图标 */
}
/* --- 选中文字样式 - 保留，提供视觉反馈 --- */
::selection {
background-color: var(--theme-color-weak);
color: var(--color-text);
}
::-moz-selection {
background-color: var(--theme-color-weak);
color: var(--color-text);
}
/* --- 标题样式 --- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-title);
margin: 2rem 0 1rem;
line-height: 1.3;
position: relative;
padding-left: 0;
/* 默认无左边距 */
}
h1 {
font: var(--font-title-h1);
color: var(--color-title-h1);
text-align: center;
border-bottom: 4px dotted var(--theme-color-weak);
padding-bottom: 15px;
margin-top: 0;
margin-bottom: 2.5rem;
}
h2 {
font: var(--font-title-h2);
color: var(--color-title-h2);
border-bottom: 2px dotted var(--theme-color-weaker);
padding-bottom: 8px;
margin-top: 3rem;
/* 增加装饰：在 H2 前添加一个小的实心圆点 */
padding-left: 1.5em;
/* 为圆点留空间 */
}
h2::before {
content: '●';
/* 小圆点符号 */
color: var(--theme-color);
/* 使用主题粉色 */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 0.8em;
/* 大小适中 */
opacity: 0.8;
}
h3 {
font: var(--font-title-h3);
color: var(--color-title-h3);
margin-top: 2.5rem;
/* 增加装饰：在 H3 前添加一个可爱的符号 */
padding-left: 1.5em;
/* 为符号留空间 */
}
h3::before {
content: '✿';
/* 可爱符号 */
color: var(--theme-color-weak);
/* 使用浅主题粉色 */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 0.9em;
opacity: 0.8;
}
h4 {
font: var(--font-title-h4);
color: var(--color-title-h4);
margin-top: 2rem;
/* 增加装饰：在 H4 前添加一个小的空心圆 */
padding-left: 1.5em;
}
h4::before {
content: '○';
/* 空心圆符号 */
color: var(--color-em);
/* 使用亮紫色 */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 0.8em;
opacity: 0.7;
}
h5 {
font: var(--font-title-h5);
color: var(--color-title-h5);
margin-top: 1.8rem;
}
h6 {
font: var(--font-title-h6);
color: var(--color-title-h6);
margin-top: 1.6rem;
}
/* --- 文本样式 --- */
p {
font: var(--text-font);
margin: 1.2rem auto;
text-align: justify;
/* 可选：文字两端对齐 */
}
strong {
color: var(--color-strong);
font-weight: bold;
}
em {
color: var(--color-em);
font-style: italic;
}
del {
color: var(--color-strike);
text-decoration: line-through;
}
/* 键盘输入样式 - 柔和装饰 */
kbd {
font-family: var(--font-code);
background-color: var(--bg-code);
color: var(--color-text);
border: 1px solid var(--theme-color-weaker);
border-bottom-color: var(--theme-color-weak);
box-shadow: inset 0 -1px 0 var(--theme-color-weak);
border-radius: var(--radius-small);
padding: 0.2em 0.4em;
font-size: 0.9em;
vertical-align: middle;
display: inline-block;
/* 增加装饰：柔和的背景渐变 */
background: linear-gradient(to bottom, var(--bg-code) 50%, var(--theme-color-weaker) 100%);
}
/* --- 链接样式 - 保留，清晰指示链接 --- */
a {
color: var(--color-link);
text-decoration: none;
border-bottom: 2px dotted var(--theme-color-weak);
transition: all 0.3s ease;
padding-bottom: 1px;
cursor: pointer;
}
a:hover {
background-color: var(--bg-highlight);
border-bottom-style: solid;
color: var(--color-text);
}
/* --- 代码样式 - 保留，清晰区分代码 --- */
code {
font-family: var(--font-code);
background-color: var(--bg-code);
color: var(--color-code);
border-radius: var(--radius-small);
padding: 3px 6px;
font-size: 0.95em;
}
pre {
background-color: var(--bg-code-block);
border-radius: var(--radius-medium);
padding: 15px;
overflow-x: auto;
margin: 25px 0;
box-shadow: 0 3px 10px rgba(255, 138, 191, 0.05);
/* 阴影更柔和 */
border: 1px solid var(--theme-color-weaker);
/* 增加装饰：代码块右侧边缘添加一个浅色边框 */
border-right: 3px solid var(--color-weakest);
}
pre code {
background-color: var(--bg-code);
color: var(--color-code);
padding: 10px;
font-size: 0.95em;
line-height: 1.6;
border-radius: var(--radius-small);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
overflow-x: auto;
font-family: var(--font-code);
}
/* --- 引用样式 --- */
blockquote {
font: var(--font-quote);
background-color: var(--bg-quote);
border-left: 6px solid var(--theme-color);
border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
padding: 15px 20px;
margin: 25px 0;
color: var(--color-quote);
position: relative;
font-style: italic;
box-shadow: 2px 2px 5px rgba(255, 138, 191, 0.03);
/* 阴影更柔和 */
/* 增加装饰：在引用块右侧添加一个柔和的背景图案或符号 (可选，可能影响性能或打印) */
/* 例如，使用伪元素和背景图片 */
/*
&::after {
content: '';
position: absolute;
right: 10px;
bottom: 10px;
width: 40px; // 图标大小
height: 40px;
background-image: url('path/to/cute_icon.svg'); // 替换为你的可爱图标路径
background-size: contain;
background-repeat: no-repeat;
opacity: 0.3; // 半透明
pointer-events: none;
}
*/
/* 或者，使用一个简单的符号作为背景 */
&::after {
content: '⭐';
/* 或其他符号，如 '✨', '💖' */
position: absolute;
right: 15px;
bottom: 15px;
font-size: 2em;
color: var(--theme-color-weaker);
/* 使用最浅的颜色 */
opacity: 0.6;
pointer-events: none;
z-index: 1;
}
p {
z-index: 2;
position: relative;
}
/* 确保文字在符号上方 */
}
/* --- 列表样式 --- */
ul,
ol {
padding-left: 2.5em;
margin: 20px 0;
}
li {
margin-bottom: 0.8em;
font: var(--text-font);
line-height: 1.6;
}
/* 无序列表使用默认标记，但调整颜色和样式 */
ul li {
list-style: disc;
list-style-position: outside;
position: relative;
padding-left: 0;
/* 增加装饰：列表项悬停时背景色 */
transition: background-color 0.2s ease;
}
ul li::marker {
color: var(--theme-color);
/* 标记颜色 */
font-size: 1.1em;
/* 标记略大 */
}
ul li:hover {
background-color: var(--bg-highlight);
/* 悬停背景色 */
border-radius: var(--radius-small);
/* 悬停时添加圆角 */
}
/* 有序列表调整数字颜色和样式 */
ol li::marker {
color: var(--theme-color);
font-weight: bold;
font-family: var(--font-family);
}
ol li:hover {
background-color: var(--bg-highlight);
/* 悬停背景色 */
border-radius: var(--radius-small);
/* 悬停时添加圆角 */
}
/* --- 表格样式 - 保留清晰的表格结构 --- */
table {
border-collapse: collapse;
width: 100%;
margin: 30px 0;
border-radius: var(--radius-medium);
overflow: hidden;
box-shadow: 0 3px 10px rgba(255, 138, 191, 0.05);
border: 1px solid var(--theme-color-weaker);
}
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: var(--border-weak);
}
th {
background-color: var(--theme-color-weak);
color: var(--color-text);
font-weight: bold;
letter-spacing: 0.03em;
}
tr:nth-child(even) {
background-color: var(--bg-code-block);
}
tr:hover {
background-color: var(--bg-highlight);
}
/* --- 图片样式 --- */
img {
max-width: 100%;
display: block;
margin: 20px auto;
border-radius: var(--radius-large);
box-shadow: 0 8px 20px rgba(255, 138, 191, 0.08);
/* 阴影更柔和 */
border: 3px solid var(--theme-color-weaker);
transition: box-shadow 0.3s ease;
/* 增加装饰：图片下方添加一个柔和的背景条 (可选) */
/* 例如，使用伪元素 */
/*
&::after {
content: '';
display: block;
width: 80%; // 条的宽度
height: 8px; // 条的高度
margin: 5px auto 0; // 位置调整
background-color: var(--theme-color-weaker); // 浅色背景
border-radius: 4px; // 圆角
opacity: 0.7;
}
*/
}
img:hover {
box-shadow: 0 10px 22px rgba(255, 138, 191, 0.12);
/* 悬停阴影略微变大 */
}
/* --- 水平线样式 - 保留，清晰分隔内容 --- */
hr {
border: 0;
height: 2px;
background: linear-gradient(to right, transparent 15%, var(--theme-color-weak) 50%, transparent 85%);
margin: 3rem 0;
opacity: 0.8;
/* 增加装饰：在水平线中心添加一个小图标 (可选) */
/*
&::after {
content: '✧'; // 小星星或其他符号
display: block;
width: 20px;
height: 20px;
margin: -11px auto 0; // 垂直居中调整
background-color: var(--bg-write); // 背景色，盖住线
color: var(--theme-color); // 符号颜色
text-align: center;
font-size: 1.2em;
line-height: 20px;
position: relative;
z-index: 1;
}
*/
}
/* --- 注脚样式 (假设Markdown结构) - 保留，清晰指示和区分注脚 --- */
a.footnote-ref {
color: var(--color-footnote);
font-size: 0.9em;
vertical-align: super;
margin-left: 2px;
border-bottom: 1px dotted var(--color-footnote);
transition: all 0.2s ease;
}
a.footnote-ref:hover {
color: var(--color-strong);
background-color: var(--bg-highlight);
border-bottom-style: solid;
}
.footnotes {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: var(--border-divider);
font-size: 0.9em;
color: var(--color-weak);
}
.footnotes ol {
padding-left: 1.5em;
}
.footnotes li {
margin-bottom: 0.6em;
line-height: 1.5;
}
.footnotes li::marker {
color: var(--color-weak);
font-weight: normal;
font-family: var(--font-family);
}
/* --- 表单元素样式 (简化，不常用) --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
font-family: var(--font-family);
font-size: 1rem;
padding: var(--spacing-small) var(--spacing-medium);
margin-bottom: var(--spacing-medium);
border: var(--border-form);
border-radius: var(--radius-small);
background-color: var(--bg-form-field);
color: var(--color-text);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-sizing: border-box;
width: 100%;
max-width: 400px;
display: block;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
outline: none;
border: var(--border-form-focus);
box-shadow: 0 0 5px rgba(255, 138, 191, 0.1);
/* 聚焦阴影更柔和 */
}
::placeholder {
color: var(--color-placeholder);
opacity: 1;
}
:-ms-input-placeholder {
color: var(--color-placeholder);
}
::-ms-input-placeholder {
color: var(--color-placeholder);
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
font-family: var(--font-family);
font-size: 1rem;
padding: 0.5rem 1.2rem;
margin-top: var(--spacing-medium);
margin-right: var(--spacing-medium);
background-color: var(--bg-button);
color: var(--color-button-text);
border: none;
border-radius: var(--radius-small);
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 5px rgba(255, 138, 191, 0.08);
/* 阴影更柔和 */
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
background-color: var(--bg-button-hover);
box-shadow: 0 3px 8px rgba(255, 138, 191, 0.12);
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 0.5em;
vertical-align: middle;
accent-color: var(--theme-color);
}
/* --- Details/Summary 展开/折叠元素样式 (保留，可能用于附注) --- */
details {
margin: 20px 0;
padding: 15px;
background-color: var(--bg-quote);
border: 1px solid var(--theme-color-weaker);
border-radius: var(--radius-medium);
box-shadow: 1px 1px 5px rgba(255, 138, 191, 0.03);
/* 阴影更柔和 */
}
summary {
font-weight: bold;
color: var(--color-strong);
cursor: pointer;
outline: none;
padding: 5px 0;
position: relative;
padding-left: 1.5em;
}
summary::marker {
content: '▼ ';
color: var(--theme-color);
font-size: 1em;
}
details[open] summary::marker {
content: '▲ ';
}
details>p {
margin-top: var(--spacing-medium);
padding-top: var(--spacing-medium);
border-top: 1px dotted var(--color-weakest);
}
/* --- Figures and Figcaptions (保留，图片说明常见) --- */
figure {
margin: 20px auto;
max-width: 100%;
text-align: center;
}
figure img {
margin: 0 0 var(--spacing-small) 0;
box-shadow: 0 8px 20px rgba(255, 138, 191, 0.08);
border-radius: var(--radius-large);
border: 3px solid var(--theme-color-weaker);
transition: box-shadow 0.3s ease;
}
figure img:hover {
box-shadow: 0 10px 22px rgba(255, 138, 191, 0.12);
}
figcaption {
font-family: var(--font-family);
font-size: 0.95rem;
color: var(--color-weak);
margin-top: var(--spacing-small);
padding: 0 var(--spacing-medium);
}
/* --- 焦点轮廓样式 (无障碍) - 保留，重要！ --- */
:focus-visible {
outline: 2px dotted var(--color-em);
outline-offset: 3px;
}
:focus:not(:focus-visible) {
outline: none;
}
/* --- 响应式设计 (保留并调整) --- */
@media (max-width: 768px) {
#write {
padding: 20px;
margin: 15px;
border-radius: var(--radius-large);
box-shadow: 0 5px 20px rgba(255, 138, 191, 0.08);
}
h1 {
font-size: 2.2rem;
margin-bottom: 1.5rem;
padding-bottom: 10px;
}
h2 {
font-size: 1.8rem;
margin-top: 2.5rem;
padding-bottom: 6px;
padding-left: 1.2em;
}
/* 调整左内边距 */
h3 {
font-size: 1.5rem;
margin-top: 2rem;
padding-left: 1.2em;
}
/* 调整左内边距 */
h4 {
font-size: 1.3rem;
margin-top: 1.8rem;
padding-left: 1.2em;
}
/* 调整左内边距 */
h5 {
font-size: 1.2rem;
margin-top: 1.6rem;
}
h6 {
font-size: 1.1rem;
margin-top: 1.5rem;
}
h2::before,
h3::before,
h4::before {
font-size: 0.7em;
/* 减小装饰符号大小 */
}
h2::before {
font-size: 0.8em;
}
p {
font-size: 1rem;
line-height: 1.7;
}
blockquote {
padding: 15px 20px;
margin: 20px 0;
border-radius: 0 var(--radius-large) var(--radius-large) 0;
}
blockquote::after {
font-size: 1.5em;
/* 减小符号大小 */
right: 10px;
bottom: 10px;
}
table,
img,
details,
figure {
margin: 20px auto;
}
table {
border-radius: var(--radius-medium);
}
img {
border-radius: var(--radius-large);
}
hr {
margin: 2rem 0;
}
ul,
ol {
padding-left: 2em;
}
/* ul li { padding-left: 0; } */
/* 使用默认标记无需调整 */
/* 表单元素 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
padding: var(--spacing-small);
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
font-size: 1rem;
padding: 0.4rem 1rem;
}
}
/* 可选：更小的屏幕适配 */
@media (max-width: 480px) {
#write {
padding: 15px;
margin: 10px;
border-radius: var(--radius-medium);
box-shadow: 0 3px 15px rgba(255, 138, 191, 0.05);
}
h1 {
font-size: 1.8rem;
margin-bottom: 1rem;
padding-bottom: 8px;
}
h2 {
font-size: 1.5rem;
margin-top: 2rem;
padding-bottom: 5px;
padding-left: 1em;
}
h3 {
font-size: 1.3rem;
margin-top: 1.8rem;
padding-left: 1em;
}
h4 {
font-size: 1.2rem;
margin-top: 1.6rem;
padding-left: 1em;
}
h5 {
font-size: 1.1rem;
margin-top: 1.5rem;
}
h6 {
font-size: 1rem;
margin-top: 1.4rem;
}
h2::before,
h3::before,
h4::before {
font-size: 0.6em;
/* 进一步减小装饰符号大小 */
}
h2::before {
font-size: 0.7em;
}
p {
font-size: 1rem;
line-height: 1.6;
}
blockquote {
padding: 10px 15px;
margin: 15px 0;
border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
}
blockquote::after {
font-size: 1em;
/* 进一步减小符号大小 */
right: 8px;
bottom: 8px;
}
table,
img,
details,
figure {
margin: 15px auto;
}
hr {
margin: 1.5rem 0;
}
ul,
ol {
padding-left: 1.5em;
}
/* 表单元素 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
padding: var(--spacing-small);
font-size: 0.95rem;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
font-size: 0.95rem;
padding: 0.4rem 0.8rem;
}
}
/* --- #write 区域装饰 --- */
/* 在 #write 区域的角落添加可爱的装饰元素 */
#write::before,
#write::after {
/* 您可以在这里选择一个可爱的符号作为装饰 */
/* 例如：'✨' (闪亮星星), '✿' (花朵), '💖' (爱心), '⭐' (星星), '●' (实心圆), '○' (空心圆) 等 */
content: '✨';
/* 默认使用闪亮星星，您可以替换 */
position: absolute;
font-size: 1.8em;
/* 装饰符号的大小，可以根据需要调整 */
opacity: 0.7;
/* 半透明，使其柔和，不干扰内容 */
pointer-events: none;
/* 确保这些装饰不会干扰鼠标事件，用户可以正常点击和选择文本 */
z-index: 1;
/* 确保装饰在 #write 背景上方 */
color: var(--theme-color);
/* 使用主题粉色作为默认颜色 */
}
/* 定位左上角装饰 */
#write::before {
top: 25px;
/* 距离顶部边缘的距离，调整以适应您的 padding */
left: 25px;
/* 距离左侧边缘的距离，调整以适应您的 padding */
/* 可选：如果您想让左上角和右下角使用不同的颜色或符号，可以在这里单独设置 */
/* color: var(--color-em); */
/* 例如使用亮紫色 */
/* content: '✿'; */
/* 例如使用花朵符号 */
}
/* 定位右下角装饰 */
#write::after {
bottom: 25px;
/* 距离底部边缘的距离 */
right: 25px;
/* 距离右侧边缘的距离 */
/* 可选：如果您想让左上角和右下角使用不同的颜色或符号，可以在这里单独设置 */
/* color: var(--theme-color-weak); */
/* 例如使用浅主题粉 */
/* content: '💖'; */
/* 例如使用爱心符号 */
}
/* 响应式调整装饰的大小和位置 */
@media (max-width: 768px) {
#write::before,
#write::after {
font-size: 1.5em;
/* 在小屏幕下稍微缩小 */
top: 18px;
left: 18px;
bottom: 18px;
right: 18px;
}
}
@media (max-width: 480px) {
#write::before,
#write::after {
font-size: 1.2em;
/* 在更小的屏幕下进一步缩小 */
top: 12px;
left: 12px;
bottom: 12px;
right: 12px;
}
}