From ac0dbc5b1c9b48079e3a450794030b3e0bc6096a Mon Sep 17 00:00:00 2001 From: 简律纯 Date: Sat, 2 Mar 2024 03:09:10 +0800 Subject: refactor(site): rewrite with vuejs (#93) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: update package version * Refactor site (#87) * 补全changelog文件 * 补全changelog文件 * 补全changelog文件 * 完成基本的markdown渲染 * 提交新的css (#88) * 补全changelog文件 * 补全changelog文件 * 补全changelog文件 * 完成基本的markdown渲染 * 添加新的css * Refactor site (#92) * 补全changelog文件 * 补全changelog文件 * 补全changelog文件 * 完成基本的markdown渲染 * 添加新的css * 修复倒计时居中 * 初步完成右侧窗口切换 * 优化进度条 * 导入element-plus * 导入element-plus * 导入element-plus * 加入选中提示和禁用提示 * 修改背景颜色 --------- Co-authored-by: 白咕咕 <67865300+baimianxiao@users.noreply.github.com> --- site/src/assets/base.css | 31 +++++++++++++++++++++---------- site/src/assets/main.css | 41 +++++++++++++++++++++++++++++++++++++++-- 2 files changed, 60 insertions(+), 12 deletions(-) (limited to 'site/src/assets') diff --git a/site/src/assets/base.css b/site/src/assets/base.css index 8816868..fe48a2f 100644 --- a/site/src/assets/base.css +++ b/site/src/assets/base.css @@ -1,6 +1,8 @@ /* color palette from */ :root { - --vt-c-white: #ffffff; + /*背景色*/ + /*--vt-c-white: #ffffff;*/ + --vt-c-white: #001F3A; --vt-c-white-soft: #f8f8f8; --vt-c-white-mute: #f2f2f2; @@ -8,17 +10,24 @@ --vt-c-black-soft: #222222; --vt-c-black-mute: #282828; - --vt-c-indigo: #2c3e50; + /*文字色*/ + /*--vt-c-indigo: #2c3e50;*/ + --vt-c-indigo: rgba(255,255,255,0.5); --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + /*边框色*/ + /*--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);*/ + --vt-c-divider-light-2: rgba(255, 255, 255, 0.12); --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + /*小标题色*/ --vt-c-text-light-1: var(--vt-c-indigo); --vt-c-text-light-2: rgba(60, 60, 60, 0.66); --vt-c-text-dark-1: var(--vt-c-white); --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); + + --vt-c-background: #0000aa; } /* semantic color variables for this project */ @@ -34,19 +43,21 @@ --color-text: var(--vt-c-text-light-1); --section-gap: 160px; + + --icon-highlight: linear-gradient(to right, #00F8F3, #00BDEF); } @media (prefers-color-scheme: dark) { :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); } } diff --git a/site/src/assets/main.css b/site/src/assets/main.css index e8667cd..996e651 100644 --- a/site/src/assets/main.css +++ b/site/src/assets/main.css @@ -11,13 +11,17 @@ a, .green { text-decoration: none; - color: hsla(160, 100%, 37%, 1); + /*高亮色*/ + /*color: hsla(160, 100%, 37%, 1);*/ + color: #00BDEF; transition: 0.4s; } @media (hover: hover) { a:hover { - background-color: hsla(160, 100%, 37%, 0.2); + /*background-color: hsla(160, 100%, 37%, 0.2);*/ + color: #00F8F3; + text-decoration: underline; } } @@ -33,3 +37,36 @@ a, padding: 0 2rem; } } + +.item i { + background: linear-gradient(to right, #00F8F3, #00BDEF); +} +.item{ + transition: 0.4s; +} +.item:hover{ + background-color:rgba(255,255,255,0.05); +} +.details h3, +.item i{ + color:#ffffff; +} + +/*滚动条优化*/ +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.1); + border-radius: 0; +} + +::-webkit-scrollbar { + -webkit-appearance: none; + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-thumb { + cursor: pointer; + border-radius: 5px; + background: rgba(0, 0, 0, 0.15); + transition: color 0.2s ease; +} -- cgit v1.2.3-70-g09d2