From 67ab6a0bee0ddc879f3786b7d1c9705e3f570188 Mon Sep 17 00:00:00 2001 From: developer Date: Mon, 11 Nov 2024 13:08:44 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _sass/colors/typography-light.scss | 163 +++++++++++++---------------- 1 file changed, 74 insertions(+), 89 deletions(-) diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss index 0d667c33e26..d23aed29944 100644 --- a/_sass/colors/typography-light.scss +++ b/_sass/colors/typography-light.scss @@ -1,113 +1,98 @@ -/* - * The syntax light mode typography colors - */ - @mixin light-scheme { -/* Framework color */ - --main-bg: linear-gradient(to bottom, #fffdf2, #fffaf0); /* 柔和的米白色/奶油色渐变 */ - --mask-bg: linear-gradient(to bottom, #e0e2e5, #d1d3d6); /* 柔和的浅灰色渐变 */ - --main-border-color: linear-gradient(to bottom, #f8f9fa, #e9ecef); /* 与Bootstrap风格一致的柔和灰色渐变 */ - + /* Framework color */ + --main-bg: linear-gradient(to bottom, #fdfdfd, #f7f7f7); /* 柔和的白色到浅灰色渐变，提供一种干净的背景 */ + --mask-bg: linear-gradient(to bottom, #dfe3e6, #cfd4d8); /* 柔和的灰色渐变，适合遮罩效果 */ + --main-border-color: linear-gradient(to bottom, #e8e9eb, #dfe0e2); /* 浅灰色渐变，适合边框使用 */ /* Common color */ - --text-color: #34343c; - --text-muted-color: #757575; - --text-muted-highlight-color: inherit; - --heading-color: #2a2a2a; - --label-color: #585858; - --blockquote-border-color: #eeeeee; - --blockquote-text-color: #757575; - --link-color: #0090dd; - --link-underline-color: #a8c2dcd0; - --button-bg: #f274b75e; - --btn-border-color: #e9ecef; - --btn-backtotop-color: #686868; - --btn-backtotop-border-color: #f1f1f1; - --checkbox-color: #c5c5c5; - --checkbox-checked-color: #07a8f7; - --img-bg: radial-gradient( - circle, - rgb(255, 255, 255) 0%, - rgb(239, 239, 239) 100% - ); - --shimmer-bg: linear-gradient( - 90deg, - rgba(250, 250, 250, 0) 0%, - rgba(232, 230, 230, 1) 50%, - rgba(250, 250, 250, 0) 100% - ); + --text-color: #333333; /* 深灰色文本，确保可读性 */ + --text-muted-color: #666666; /* 中灰色用于次要文本 */ + --text-muted-highlight-color: inherit; /* 继承父元素的颜色 */ + --heading-color: #2a2a2a; /* 深色标题，突出显示 */ + --label-color: #585858; /* 标签颜色，略深于次要文本 */ + --blockquote-border-color: #dddddd; /* 浅灰色引用边框 */ + --blockquote-text-color: #666666; /* 中灰色引用文本 */ + --link-color: #007acc; /* 柔和的蓝色链接，易于识别 */ + --link-underline-color: #a8c2dc; /* 浅蓝色下划线，增强链接可见性 */ + --button-bg: #f0b7a4; /* 柔和的粉橙色按钮背景 */ + --btn-border-color: #e0e0e0; /* 浅灰色按钮边框 */ + --btn-backtotop-color: #555555; /* 返回顶部按钮颜色 */ + --btn-backtotop-border-color: #dddddd; /* 返回顶部按钮边框颜色 */ + --checkbox-color: #c5c5c5; /* 复选框颜色 */ + --checkbox-checked-color: #07a8f7; /* 选中复选框的颜色 */ + --img-bg: radial-gradient(circle, #ffffff 0%, #f0f0f0 100%); /* 图像背景的径向渐变 */ + --shimmer-bg: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, rgba(232, 230, 230, 1) 50%, rgba(250, 250, 250, 0) 100%); /* 闪烁效果的线性渐变 */ /* Sidebar */ - --site-title-color: rgb(107, 107, 107); - --site-subtitle-color: #4d4d4d; - --sidebar-bg: linear-gradient(to bottom, #e0f2f7, #ffffff); - --sidebar-border-color: #efefef; - --sidebar-muted-color: #545454; - --sidebar-active-color: #1d1d1d; - --sidebar-hover-bg: rgb(223, 233, 241, 0.64); - --sidebar-btn-bg: white; - --sidebar-btn-color: #8e8e8e; - --avatar-border-color: white; + --site-title-color: #6b6b6b; /* 侧边栏标题颜色 */ + --site-subtitle-color: #4d4d4d; /* 侧边栏副标题颜色 */ + --sidebar-bg: linear-gradient(to bottom, #e0f7fa, #ffffff); /* 浅蓝色到白色的渐变，清新自然 */ + --sidebar-border-color: #efefef; /* 侧边栏边框颜色 */ + --sidebar-muted-color: #545454; /* 侧边栏次要文本颜色 */ + --sidebar-active-color: #1d1d1d; /* 侧边栏活动项颜色 */ + --sidebar-hover-bg: rgba(223, 233, 241, 0.64); /* 侧边栏悬停背景颜色 */ + --sidebar-btn-bg: white; /* 侧边栏按钮背景颜色 */ + --sidebar-btn-color: #8e8e8e; /* 侧边栏按钮颜色 */ + --avatar-border-color: white; /* 头像边框颜色 */ /* Topbar */ - --topbar-bg: rgba(255, 255, 255, 0.853); - --topbar-text-color: rgb(78, 78, 78); - --search-border-color: rgb(240, 240, 240); - --search-icon-color: #c2c6cc; - --input-focus-border-color: #b8b8b8; + --topbar-bg: rgba(255, 255, 255, 0.85); /* 顶部栏背景颜色 */ + --topbar-text-color: #4e4e4e; /* 顶部栏文本颜色 */ + --search-border-color: #f0f0f0; /* 搜索框边框颜色 */ + --search-icon-color: #c2c6cc; /* 搜索图标颜色 */ + --input-focus-border-color: #b8b8b8; /* 输入框聚焦边框颜色 */ /* Home page */ - --post-list-text-color: dimgray; - --btn-patinator-text-color: #555555; - --btn-paginator-hover-color: var(--sidebar-bg); + --post-list-text-color: dimgray; /* 文章列表文本颜色 */ + --btn-patinator-text-color: #555555; /* 分页按钮文本颜色 */ + --btn-paginator-hover-color: var(--sidebar-bg); /* 分页按钮悬停背景颜色 */ /* Posts */ - --toc-highlight: #0550ae; - --toc-popup-border-color: lightgray; - --btn-share-color: gray; - --btn-share-hover-color: #0d6efd; - --card-bg: white; - --card-hovor-bg: #e2e2e2; - --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0, - rgba(211, 209, 209, 0.15) 0 0 0 1px; - --footnote-target-bg: lightcyan; - --tb-odd-bg: #fbfcfd; - --tb-border-color: #eaeaea; - --dash-color: silver; - --kbd-wrap-color: #bdbdbd; - --kbd-text-color: var(--text-color); - --kbd-bg-color: white; - --prompt-text-color: rgb(46, 46, 46, 0.77); - --prompt-tip-bg: rgb(123, 247, 144, 0.2); - --prompt-tip-icon-color: #03b303; - --prompt-info-bg: #e1f5fe; - --prompt-info-icon-color: #0070cb; - --prompt-warning-bg: rgb(255, 243, 205); - --prompt-warning-icon-color: #ef9c03; - --prompt-danger-bg: rgb(248, 215, 218, 0.56); - --prompt-danger-icon-color: #df3c30; + --toc-highlight: #0550ae; /* 目录高亮颜色 */ + --toc-popup-border-color: lightgray; /* 目录弹出边框颜色 */ + --btn-share-color: gray; /* 分享按钮颜色 */ + --btn-share-hover-color: #0d6efd; /* 分享按钮悬停颜色 */ + --card-bg: white; /* 卡片背景颜色 */ + --card-hovor-bg: #e2e2e2; /* 卡片悬停背景颜色 */ + --card-shadow: rgba(104, 104, 104, 0.05) 0 2px 6px 0, rgba(211, 209, 209, 0.15) 0 0 0 1px; /* 卡片阴影 */ + --footnote-target-bg: lightcyan; /* 脚注目标背景颜色 */ + --tb-odd-bg: #fbfcfd; /* 表格奇数行背景颜色 */ + --tb-border-color: #eaeaea; /* 表格边框颜色 */ + --dash-color: silver; /* 虚线颜色 */ + --kbd-wrap-color: #bdbdbd; /* 键盘包裹颜色 */ + --kbd-text-color: var(--text-color); /* 键盘文本颜色 */ + --kbd-bg-color: white; /* 键盘背景颜色 */ + --prompt-text-color: rgba(46, 46, 46, 0.77); /* 提示文本颜色 */ + --prompt-tip-bg: rgba(123, 247, 144, 0.2); /* 提示背景颜色 */ + --prompt-tip-icon-color: #03b303; /* 提示图标颜色 */ + --prompt-info-bg: #e1f5fe; /* 信息提示背景颜色 */ + --prompt-info-icon-color: #0070cb; /* 信息提示图标颜色 */ + --prompt-warning-bg: rgb(255, 243, 205); /* 警告提示背景颜色 */ + --prompt-warning-icon-color: #ef9c03; /* 警告提示图标颜色 */ + --prompt-danger-bg: rgba(248, 215, 218, 0.56); /* 危险提示背景颜色 */ + --prompt-danger-icon-color: #df3c30; /* 危险提示图标颜色 */ /* Tags */ - --tag-border: #dee2e6; - --tag-shadow: var(--btn-border-color); - --tag-hover: rgb(222, 226, 230); - --search-tag-bg: #f8f9fa; + --tag-border: #dee2e6; /* 标签边框颜色 */ + --tag-shadow: var(--btn-border-color); /* 标签阴影 */ + --tag-hover: rgb(222, 226, 230); /* 标签悬停颜色 */ + --search-tag-bg: #f8f9fa; /* 搜索标签背景颜色 */ /* Categories */ - --categories-border: rgba(0, 0, 0, 0.125); - --categories-hover-bg: var(--btn-border-color); - --categories-icon-hover-color: darkslategray; + --categories-border: rgba(0, 0, 0, 0.125); /* 分类边框颜色 */ + --categories-hover-bg: var(--btn-border-color); /* 分类悬停背景颜色 */ + --categories-icon-hover-color: darkslategray; /* 分类图标悬停颜色 */ /* Archive */ - --timeline-color: rgba(0, 0, 0, 0.075); - --timeline-node-bg: #c2c6cc; - --timeline-year-dot-color: #ffffff; + --timeline-color: rgba(0, 0, 0, 0.075); /* 时间线颜色 */ + --timeline-node-bg: #c2c6cc; /* 时间线节点背景颜色 */ + --timeline-year-dot-color: #ffffff; /* 时间线年份点颜色 */ [class^='prompt-'] { - --link-underline-color: rgb(219, 216, 216); + --link-underline-color: rgb(219, 216, 216); /* 提示链接下划线颜色 */ } .dark { - display: none; + display: none; /* 隐藏暗色模式 */ } } /* light-scheme */