From b8597a0724d29fbd0f45d91e533685f5b8961da3 Mon Sep 17 00:00:00 2001 From: Han <1655466387@qq.com> Date: Mon, 3 Mar 2025 15:55:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F=E7=BB=86?= =?UTF-8?q?=E8=8A=82=20=F0=9F=8D=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/About.less | 2 +- src/styles/Archive.less | 10 +++---- src/styles/Article.less | 36 ++++++++++++------------ src/styles/Base.less | 13 ++++++--- src/styles/Footer.less | 6 ++-- src/styles/Links.less | 4 +-- src/styles/Talking.less | 3 +- src/styles/components/ArticleCard.less | 2 +- src/styles/components/Aside.less | 22 +++++++-------- src/styles/components/BackTop.less | 2 +- src/styles/components/Comment.less | 19 ++++++------- src/styles/components/Copyright.less | 4 +-- src/styles/components/Header.less | 6 ++-- src/styles/components/MobileSidebar.less | 4 +-- src/styles/components/Pagination.less | 8 +++--- src/styles/components/Search.less | 14 +++++++-- 16 files changed, 84 insertions(+), 71 deletions(-) diff --git a/src/styles/About.less b/src/styles/About.less index f7ad090..8a012ae 100644 --- a/src/styles/About.less +++ b/src/styles/About.less @@ -5,7 +5,7 @@ box-sizing: border-box; padding: 1rem; border-radius: 0.5rem; - background: #fff; + background-color: #fff; box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); width: 100%; min-height: 5.5rem; diff --git a/src/styles/Archive.less b/src/styles/Archive.less index c22efa6..4d24e81 100644 --- a/src/styles/Archive.less +++ b/src/styles/Archive.less @@ -3,7 +3,7 @@ section.vh-container { flex: 1; padding: 2rem 1rem; border-radius: 1rem; - background: #fff; + background-color: #fff; overflow: hidden; &>.archive-list { @@ -29,7 +29,7 @@ section.vh-container { &:not(.title) { &:hover { - background: #F5F6F8; + background-color: var(--vh-color-default-88); &>i { &::before { @@ -55,7 +55,7 @@ section.vh-container { height: 0.25rem; border: none; border-radius: 0.25rem; - background: #4E667F; + background-color: #4E667F; } &::after { @@ -106,7 +106,7 @@ section.vh-container { height: 0.36rem; border: solid 0.28rem #0000006D; border-radius: 50%; - background: #fff; + background-color: #fff; transition: all .3s; } } @@ -163,7 +163,7 @@ section.vh-container { section.vh-container { &>section.vh-archive-main { padding: 0; - background: transparent; + background-color: transparent; &>.archive-list { &>.archive-list-item { diff --git a/src/styles/Article.less b/src/styles/Article.less index f715144..b4fee3c 100644 --- a/src/styles/Article.less +++ b/src/styles/Article.less @@ -11,7 +11,7 @@ section.vh-container { flex-direction: column; width: 100%; height: max-content; - background: #fff; + background-color: #fff; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; box-shadow: 0 -3px 8px 6px rgba(7, 17, 27, 0.05); @@ -64,7 +64,7 @@ section.vh-container { flex-direction: column; width: 100%; height: max-content; - background: #fff; + background-color: #fff; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; box-shadow: 0 12px 8px 6px rgba(7, 17, 27, 0.05); @@ -90,11 +90,11 @@ section.vh-container { width: max-content; font-size: 0.875rem; border-radius: 1rem; - background-color: #F5F6F8; + background-color: var(--vh-color-default-88); transition: background 0.16s ease-in-out, transform 0.16s ease-in-out; &:hover { - background-color: #EEEFF3; + background-color: var(--vh-color-default); transform: translateY(-0.18rem); } @@ -205,7 +205,7 @@ section.vh-container { // 其下面的code标签样式 code { - background-color: #edeef3; + background-color: var(--vh-color-default); padding: .125rem .375rem; font-size: 0.8125rem; } @@ -224,7 +224,7 @@ section.vh-container { padding: 0.188rem 0.58rem; border-left: 5px solid #eee; border-left-color: #929292; - background: #f3f5f7; + background-color: #f3f5f7; &>p { font-size: 0.875rem; @@ -240,7 +240,7 @@ section.vh-container { // border-collapse: collapse; border-spacing: 0; font-size: 0.9rem; - background: #fff; + background-color: #fff; border: 1px solid #EEEEEE; border-radius: 0.38rem; overflow: hidden; @@ -306,40 +306,40 @@ section.vh-container { border-left: 5px solid #eee; border-left-color: #777; border-radius: 3px; - background: #f7f7f7; + background-color: #f7f7f7; &.note-success { border-color: #01C4B6; border-left: 5px solid #01C4B6; border-left-color: #01C4B6; - background: #01C4B618; + background-color: #01C4B618; } &.note-info { border-color: #3253b4; border-left: 5px solid #3253b4; border-left-color: #3253b4; - background: #3253b418; + background-color: #3253b418; } &.note-warning { border-color: #DD8636; border-left: 5px solid #DD8636; border-left-color: #DD8636; - background: #DD863618; + background-color: #DD863618; } &.note-error { border-color: #DE3C3D; border-left: 5px solid #DE3C3D; border-left-color: #DE3C3D; - background: #DE3C3D18; + background-color: #DE3C3D18; } &.note-import { border-left: 5px solid #B984DF; border-left-color: #B984DF; - background: #B984DF18; + background-color: #B984DF18; } p { @@ -362,7 +362,7 @@ section.vh-container { height: 2.28rem; border: solid 1px #333; border-radius: 0.28rem; - background: #fff; + background-color: #fff; cursor: pointer; transition: background-color 0.18s ease-in-out; z-index: 1; @@ -394,7 +394,7 @@ section.vh-container { bottom: 0; width: 100%; height: 0; - background: #EDEEF366; + background-color: var(--vh-color-default-66); transition: height 0.16s ease-in-out; z-index: -1; } @@ -623,7 +623,7 @@ section.vh-container { border-radius: 0.618rem; height: max-content; max-height: 888px; - background: #EDEEF399 !important; + background-color: var(--vh-color-default-99) !important; code { box-sizing: border-box; @@ -660,10 +660,10 @@ section.vh-container { .os-theme-dark.os-scrollbar { &>.os-scrollbar-track { &>.os-scrollbar-handle { - background: #A3A8AF88; + background-color: #A3A8AF88; &:hover { - background: #A3A8AF66; + background-color: #A3A8AF66; } } } diff --git a/src/styles/Base.less b/src/styles/Base.less index 8542ae3..0802510 100644 --- a/src/styles/Base.less +++ b/src/styles/Base.less @@ -1,6 +1,11 @@ @import url('/assets/font/index.css'); :root { + // 颜色 + --vh-color-default: #EDEEF3; + --vh-color-default-66: #EDEEF366; + --vh-color-default-88: #EDEEF388; + --vh-color-default-99: #EDEEF399; --vh-padding-top: calc(66px + 1rem); --vh-main-max-width: 1388px; --vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2 + 1rem); @@ -94,7 +99,7 @@ html { width: 100%; height: max-content; border-radius: 0.5rem; - background: #fff; + background-color: #fff; box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); overflow: hidden; @@ -164,12 +169,12 @@ html.is-animating { overflow: hidden; &.white { - background: #fff; + background-color: #fff; box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); } &>span { - background: #000; + background-color: #000; position: relative; width: 5px; height: 5px; @@ -210,7 +215,7 @@ html.is-animating { padding: 0.75rem; margin-top: 1rem; border-radius: 0.5rem; - background: #fff; + background-color: #fff; box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); overflow: hidden; diff --git a/src/styles/Footer.less b/src/styles/Footer.less index 7218169..668368e 100644 --- a/src/styles/Footer.less +++ b/src/styles/Footer.less @@ -7,7 +7,7 @@ justify-content: center; width: 100%; height: max-content; - background: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.1); backdrop-filter: saturate(100%) blur(2px); user-select: none; @@ -39,7 +39,7 @@ align-items: center; width: max-content; height: 1.25rem; - background: #25C2A0; + background-color: #25C2A0; font-size: 0.68rem; border-radius: 0.18rem; overflow: hidden; @@ -60,7 +60,7 @@ } &>em { - background: #5D5D5D; + background-color: #5D5D5D; } &>svg { diff --git a/src/styles/Links.less b/src/styles/Links.less index decf9a3..383b1ec 100644 --- a/src/styles/Links.less +++ b/src/styles/Links.less @@ -9,7 +9,7 @@ grid-template-columns: repeat(3, 1fr); gap: 1rem; border-radius: 0.5rem; - background: #fff; + background-color: #fff; box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); overflow: hidden; min-height: 5.5rem; @@ -29,7 +29,7 @@ z-index: 1; &:hover { - background: #EDEEF3; + background-color: var(--vh-color-default); &>.avatar { transform: scale(1.2) rotate(8deg); diff --git a/src/styles/Talking.less b/src/styles/Talking.less index 0085fc5..b5b3c70 100644 --- a/src/styles/Talking.less +++ b/src/styles/Talking.less @@ -15,7 +15,7 @@ display: flex; flex-direction: column; border-radius: 0.5rem; - background: #fff; + background-color: #fff; box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); overflow: hidden; @@ -27,6 +27,7 @@ height: 2.5rem; &>img { + flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; diff --git a/src/styles/components/ArticleCard.less b/src/styles/components/ArticleCard.less index 3dc358c..824d8fa 100644 --- a/src/styles/components/ArticleCard.less +++ b/src/styles/components/ArticleCard.less @@ -16,7 +16,7 @@ section.article-list { min-height: max-content; border: solid 1px #eee; border-radius: 1rem; - background: #fff; + background-color: #fff; overflow: hidden; &>a.vh-article-link { diff --git a/src/styles/components/Aside.less b/src/styles/components/Aside.less index dbef079..a684cdf 100644 --- a/src/styles/components/Aside.less +++ b/src/styles/components/Aside.less @@ -29,7 +29,7 @@ aside.vh-aside { max-width: 100%; height: max-content; border-radius: 1rem; - background: #fff; + background-color: #fff; color: #000; box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); overflow: hidden; @@ -48,7 +48,7 @@ aside.vh-aside { width: 0.25rem; height: 1.16rem; border-radius: 0.5rem; - background: #EDEEF3; + background-color: var(--vh-color-default); } } @@ -78,7 +78,7 @@ aside.vh-aside { width: 36%; height: 0.26rem; border-radius: 3px; - background: #EDEEF3; + background-color: var(--vh-color-default); } } @@ -102,7 +102,7 @@ aside.vh-aside { width: 1.88rem; height: 1.88rem; border: solid 1px #333; - background: #fff; + background-color: #fff; border-radius: 0.38rem; overflow: hidden; z-index: 1; @@ -120,7 +120,7 @@ aside.vh-aside { bottom: 0; width: 100%; height: 0; - background: #EDEEF3; + background-color: var(--vh-color-default); transition: height 0.16s ease-in-out; z-index: -1; } @@ -154,16 +154,16 @@ aside.vh-aside { width: 100%; height: 2.36rem; border-radius: 0.38rem; - background: #fff; + background-color: #fff; transition: all 0.16s ease-in-out; overflow: hidden; &:hover { padding-left: 0.66rem; - background: #EDEEF388; + background-color: var(--vh-color-default-88); &>i { - background: transparent; + background-color: transparent; } } @@ -176,7 +176,7 @@ aside.vh-aside { font-size: 0.875rem; font-style: normal; border-radius: 0.38rem; - background: #EDEEF388; + background-color: var(--vh-color-default-88); transition: background 0.16s ease-in-out; overflow: hidden; } @@ -200,7 +200,7 @@ aside.vh-aside { &:hover { &>span { - background: #EDEEF3; + background-color: var(--vh-color-default); } } @@ -211,7 +211,7 @@ aside.vh-aside { width: max-content; height: 1.75rem; border-radius: 0.38rem; - background: #EDEEF388; + background-color: var(--vh-color-default-88); font-size: 0.875rem; font-style: normal; line-height: 1.75rem; diff --git a/src/styles/components/BackTop.less b/src/styles/components/BackTop.less index 9d88dda..2b4e5bc 100644 --- a/src/styles/components/BackTop.less +++ b/src/styles/components/BackTop.less @@ -6,7 +6,7 @@ section.vh-back-top { height: 2.6rem; border-radius: 50%; border: 1px solid #e5e7eb; - background: #fff; + background-color: #fff; transform: translateX(1rem); cursor: pointer; opacity: 0; diff --git a/src/styles/components/Comment.less b/src/styles/components/Comment.less index 5c0be52..8106e2c 100644 --- a/src/styles/components/Comment.less +++ b/src/styles/components/Comment.less @@ -4,7 +4,7 @@ width: 100%; height: max-content; border-radius: 0.5rem; - background: #fff; + background-color: #fff; box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); overflow: hidden; @@ -26,12 +26,12 @@ // 其下面的code标签样式 code { - background: transparent; + background-color: transparent; } :not(pre) { &>code { - background-color: #edeef3; + background-color: var(--vh-color-default); padding: .125rem .375rem; font-size: 0.8125rem; } @@ -70,7 +70,7 @@ // 及背景颜色 .el-input-group__append, .el-input-group__prepend { - background-color: #F5F6F8 !important; + background-color: var(--vh-color-default-88) !important; } // 评论内容样式 @@ -126,7 +126,7 @@ bottom: 0; width: 0; height: 1px; - background: #9999ff; + background-color: #9999ff; transition: all 0.28s; } @@ -161,8 +161,7 @@ bottom: -0.4rem; width: 0.8rem; height: 0.8rem; - background: #fff; - background: url("/public/assets/images/admin.svg") no-repeat; + background: #fff url("/public/assets/images/admin.svg") no-repeat; background-size: cover; } } @@ -201,7 +200,7 @@ bottom: 0; width: 0; height: 1px; - background: #4c4948; + background-color: #4c4948; transition: all 0.28s; } @@ -218,7 +217,7 @@ .tk-tag { color: #000; border-color: #000; - background: transparent; + background-color: transparent; border-radius: 2px; font-size: 0.72rem; border-radius: 4px; @@ -264,7 +263,7 @@ box-sizing: border-box; padding: 4px; border-radius: 0.2rem; - background-color: #F5F6F8; + background-color: var(--vh-color-default-88); } } diff --git a/src/styles/components/Copyright.less b/src/styles/components/Copyright.less index eccd452..195a4cd 100644 --- a/src/styles/components/Copyright.less +++ b/src/styles/components/Copyright.less @@ -5,7 +5,7 @@ padding: 1rem; width: 100%; height: max-content; - background: rgba(0, 0, 0, 0.03); + background-color: rgba(0, 0, 0, 0.03); border-radius: 0.618rem; overflow: hidden; @@ -26,7 +26,7 @@ content: ''; width: 0; height: 2px; - background: #60a5fa; + background-color: #60a5fa; transition: all 0.3s ease-in-out; } diff --git a/src/styles/components/Header.less b/src/styles/components/Header.less index 5d54cf5..870be62 100644 --- a/src/styles/components/Header.less +++ b/src/styles/components/Header.less @@ -9,7 +9,7 @@ header.vh-header { justify-content: center; width: 100vw; height: 3.6rem; - background: #ffffff66; + background-color: #ffffff66; backdrop-filter: blur(2rem); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); z-index: 9; @@ -63,7 +63,7 @@ header.vh-header { width: 100%; height: 100%; border-radius: 0.5rem; - background: #EDEEF3; + background-color: var(--vh-color-default); opacity: 0; transition: transform 0.16s ease-in-out, opacity 0.16s ease-in-out; z-index: -1; @@ -133,7 +133,7 @@ header.vh-header { padding: 0.36rem; width: 1.88rem; height: 1.88rem; - border: 1px solid #EDEEF3; + border: 1px solid var(--vh-color-default); border-radius: 0.6rem; } } diff --git a/src/styles/components/MobileSidebar.less b/src/styles/components/MobileSidebar.less index 7d3ab3b..482703d 100644 --- a/src/styles/components/MobileSidebar.less +++ b/src/styles/components/MobileSidebar.less @@ -52,7 +52,7 @@ width: 100%; height: max-content; border-radius: 0.75rem; - background: #F8F9FA; + background-color: #F8F9FA; overflow: hidden; &.user-panel { @@ -88,7 +88,7 @@ &:hover, &.active { color: #fff; - background: #3366FF; + background-color: #3366FF; &>object { filter: brightness(0) invert(100%); diff --git a/src/styles/components/Pagination.less b/src/styles/components/Pagination.less index 0f6ac9e..4dc0508 100644 --- a/src/styles/components/Pagination.less +++ b/src/styles/components/Pagination.less @@ -18,17 +18,17 @@ section.vh-article-pagination { width: 2rem; height: 2rem; border-radius: 0.5rem; - background: #fff; + background-color: #fff; box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); font-size: 0.875rem; color: #99a9bf; user-select: none; - transition: background 0.16s ease-in-out; + transition: background-color 0.16s ease-in-out; cursor: pointer; &:hover { color: #fff; - background: rgba(129, 146, 174, 0.36); + background-color: rgba(129, 146, 174, 0.36); &>svg { fill: #fff; @@ -36,7 +36,7 @@ section.vh-article-pagination { } &.active { - background: #8192AE; + background-color: #8192AE; cursor: default; pointer-events: none; color: #fff; diff --git a/src/styles/components/Search.less b/src/styles/components/Search.less index f7e0780..fd623e3 100644 --- a/src/styles/components/Search.less +++ b/src/styles/components/Search.less @@ -53,7 +53,7 @@ gap: 0.28rem; width: 100%; height: 2.425rem; - background: #F6F6F6; + background-color: var(--vh-color-default-88); border-radius: 0.66rem; overflow: hidden; @@ -71,7 +71,7 @@ border: none; color: #9CA3AF; font-size: 0.875rem; - background: transparent; + background-color: transparent; transition: width 0.16s ease-in-out; &::placeholder { @@ -86,11 +86,19 @@ box-sizing: border-box; width: 100%; height: max-content; - background: #fff; + background-color: #fff; user-select: none; overflow-x: hidden; overflow-y: auto; + &>em { + margin: 1.88rem auto; + display: block; + width: 5.88rem; + height: 5.88rem; + background: url('data:image/svg+xml;charset=utf-8,%20%3Csvg%20t%3D%221740986741673%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%225345%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M942.93%20932.09H700.4c-4.78%200-8.66%203.88-8.66%208.66s3.88%208.66%208.66%208.66h242.53c4.78%200%208.66-3.88%208.66-8.66s-3.88-8.66-8.66-8.66z%20m-30.32-51.97c4.78%200%208.66-3.88%208.66-8.66s-3.88-8.66-8.66-8.66h-60.63c-4.78%200-8.66%203.88-8.66%208.66s3.88%208.66%208.66%208.66h60.63zM626.99%20202.6c5.71%203.2%2012.94%201.23%2016.21-4.43l46.66-80.67c3.32-5.75%201.3-13.1-4.49-16.35-5.71-3.2-12.94-1.23-16.21%204.43l-46.66%2080.67c-3.33%205.75-1.31%2013.1%204.49%2016.35z%20m-149.65-11.1h3.44c6.6%200%2011.95-5.34%2011.95-11.92V86.5c0-6.58-5.35-11.92-11.95-11.92h-3.44c-6.6%200-11.95%205.34-11.95%2011.92v93.08c0%206.58%205.35%2011.92%2011.95%2011.92zM302.3%20223.52c3.79%205.3%2011.13%206.59%2016.51%202.91l1.14-0.78c5.5-3.77%206.84-11.32%202.96-16.74l-53.85-75.41c-3.78-5.3-11.13-6.59-16.51-2.91l-1.13%200.78c-5.5%203.77-6.84%2011.32-2.96%2016.74l53.84%2075.41z%20m540.75%20131.67l-1.3-1.3c-1.3-2.6-3.91-5.19-7.81-6.5L466.7%20272.04h-6.51L163.26%20388.96c-0.01%200-0.02%200.01-0.04%200.01-1.27%200.38-2.4%201.12-3.34%202.06l-0.59%200.59a26.428%2026.428%200%200%200-4.33%205.65L65.59%20552.65c-1.3%202.6-2.61%206.5-1.3%2010.39%201.3%202.6%203.91%205.2%207.82%206.5l84.65%2022.09v228.64c0%205.2%203.91%209.1%207.81%2010.39l414.12%20118.22c2.61%201.3%206.51%200%209.12-1.3l260.45-145.5c3.91-2.6%205.21-5.2%205.21-10.39l-2.61-224.74%205.21-2.6%2098.98-58.46c2.6-1.3%205.21-5.19%205.21-7.79v-6.5L843.05%20355.19zM91.64%20551.35l82.04-139.01%206.51%201.3%20111.99%2027.28%20265.66%2064.96-97.67%20142.9-368.53-97.43z%20m85.95%20259.83V598.12h1.3l11.72%202.6%20270.87%2071.45c5.21%201.3%209.12%200%2011.72-5.2l91.16-133.81%203.91%20389.73-390.68-111.71zM585.2%20487.7l-286.5-68.85-93.76-22.08%20260.45-101.33%20334.68%2068.85-22.14%2012.99-32.56%2019.49L589.11%20489l-3.91-1.3z%20m6.51%20432.6l-3.91-400.13%2018.23%2031.18%2065.11%20109.12c2.61%205.2%2010.42%206.5%2015.63%203.9l141.95-83.14%202.6%20205.26L591.71%20920.3z%20m93.76-280.61l-79.44-133.81%207.81-5.19%20141.95-84.45%2071.62-42.87L930.3%20492.89l-244.83%20146.8z%22%20p-id%3D%225346%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); + background-size: contain; + } &>.vh-search-item { box-sizing: border-box;