diff --git a/public/assets/images/svg/Nav_about.svg b/public/assets/images/svg/Nav_about.svg new file mode 100644 index 0000000..a98e151 --- /dev/null +++ b/public/assets/images/svg/Nav_about.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/Nav_archives.svg b/public/assets/images/svg/Nav_archives.svg new file mode 100644 index 0000000..275e385 --- /dev/null +++ b/public/assets/images/svg/Nav_archives.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/Nav_friends.svg b/public/assets/images/svg/Nav_friends.svg new file mode 100644 index 0000000..ee134c2 --- /dev/null +++ b/public/assets/images/svg/Nav_friends.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/Nav_link.svg b/public/assets/images/svg/Nav_link.svg new file mode 100644 index 0000000..172bff6 --- /dev/null +++ b/public/assets/images/svg/Nav_link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/Nav_message.svg b/public/assets/images/svg/Nav_message.svg new file mode 100644 index 0000000..e4d9ac5 --- /dev/null +++ b/public/assets/images/svg/Nav_message.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/Nav_rss.svg b/public/assets/images/svg/Nav_rss.svg new file mode 100644 index 0000000..7751556 --- /dev/null +++ b/public/assets/images/svg/Nav_rss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/Nav_talking.svg b/public/assets/images/svg/Nav_talking.svg new file mode 100644 index 0000000..6810022 --- /dev/null +++ b/public/assets/images/svg/Nav_talking.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/Navs/about.svg b/public/assets/images/svg/Navs/about.svg deleted file mode 100644 index 726131a..0000000 --- a/public/assets/images/svg/Navs/about.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/Navs/archives.svg b/public/assets/images/svg/Navs/archives.svg deleted file mode 100644 index 0dcde21..0000000 --- a/public/assets/images/svg/Navs/archives.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/Navs/friends.svg b/public/assets/images/svg/Navs/friends.svg deleted file mode 100644 index 9a26c27..0000000 --- a/public/assets/images/svg/Navs/friends.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/Navs/link.svg b/public/assets/images/svg/Navs/link.svg deleted file mode 100644 index 9d3ad4a..0000000 --- a/public/assets/images/svg/Navs/link.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/Navs/links.svg b/public/assets/images/svg/Navs/links.svg deleted file mode 100644 index 0d6097b..0000000 --- a/public/assets/images/svg/Navs/links.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/Navs/message.svg b/public/assets/images/svg/Navs/message.svg deleted file mode 100644 index bbb1e61..0000000 --- a/public/assets/images/svg/Navs/message.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/Navs/talking.svg b/public/assets/images/svg/Navs/talking.svg deleted file mode 100644 index 20e25af..0000000 --- a/public/assets/images/svg/Navs/talking.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/WebSite_analytics.svg b/public/assets/images/svg/WebSite_analytics.svg new file mode 100644 index 0000000..b00522a --- /dev/null +++ b/public/assets/images/svg/WebSite_analytics.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/WebSite_api.svg b/public/assets/images/svg/WebSite_api.svg new file mode 100644 index 0000000..9e95547 --- /dev/null +++ b/public/assets/images/svg/WebSite_api.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/WebSite_github.svg b/public/assets/images/svg/WebSite_github.svg new file mode 100644 index 0000000..4dafd49 --- /dev/null +++ b/public/assets/images/svg/WebSite_github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/WebSite_hot.svg b/public/assets/images/svg/WebSite_hot.svg new file mode 100644 index 0000000..129c7be --- /dev/null +++ b/public/assets/images/svg/WebSite_hot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/WebSite_img.svg b/public/assets/images/svg/WebSite_img.svg new file mode 100644 index 0000000..1bf4597 --- /dev/null +++ b/public/assets/images/svg/WebSite_img.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/svg/WebSites/analytics.svg b/public/assets/images/svg/WebSites/analytics.svg deleted file mode 100644 index 1ac488e..0000000 --- a/public/assets/images/svg/WebSites/analytics.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/WebSites/api.svg b/public/assets/images/svg/WebSites/api.svg deleted file mode 100644 index 69291be..0000000 --- a/public/assets/images/svg/WebSites/api.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/WebSites/github.svg b/public/assets/images/svg/WebSites/github.svg deleted file mode 100644 index 6a0274c..0000000 --- a/public/assets/images/svg/WebSites/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/WebSites/hot.svg b/public/assets/images/svg/WebSites/hot.svg deleted file mode 100644 index d005ea6..0000000 --- a/public/assets/images/svg/WebSites/hot.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/images/svg/WebSites/img.svg b/public/assets/images/svg/WebSites/img.svg deleted file mode 100644 index 858f563..0000000 --- a/public/assets/images/svg/WebSites/img.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Aside/Aside.astro b/src/components/Aside/Aside.astro index cd02d06..7983eab 100644 --- a/src/components/Aside/Aside.astro +++ b/src/components/Aside/Aside.astro @@ -1,5 +1,7 @@ --- // 静态图片 +// Svg 组件 +import Svg from "@/components/Svg/Svg.astro"; import { Image } from "astro:assets"; // 时间处理 import { fmtTime } from "@/utils/index"; @@ -30,7 +32,7 @@ import "./Aside.less"; { WebSites.map(item => ( - {item.text} + )) } diff --git a/src/components/Aside/Aside.less b/src/components/Aside/Aside.less index 6387525..d7ba164 100644 --- a/src/components/Aside/Aside.less +++ b/src/components/Aside/Aside.less @@ -125,10 +125,11 @@ aside.vh-aside { z-index: -1; } - &>img { + &>svg { width: auto; height: 1.18rem; object-fit: contain; + stroke-width: 3px; } } } diff --git a/src/components/Comment/Comment.less b/src/components/Comment/Comment.less index 56e2ea5..ce8244d 100644 --- a/src/components/Comment/Comment.less +++ b/src/components/Comment/Comment.less @@ -1,6 +1,6 @@ .vh-comment { box-sizing: border-box; - padding: 2rem 1rem 2.88rem; + padding: 2rem 1rem 6.88rem; width: 100%; height: max-content; border-radius: 0.5rem; @@ -326,6 +326,21 @@ --waline-avatar-radius: 0.58rem; font-size: var(--vh-size-h2); + .wl-comment { + .wl-panel { + .wl-header { + label { + padding: 0.36rem 0.28rem; + font-size: 0.8rem; + } + } + + .wl-input { + font-size: 0.688rem; + } + } + } + .wl-cards { &>.wl-card-item { padding-left: 0; @@ -411,7 +426,7 @@ // 图片 img { - &:not(.wl-user-avatar, .wl-reaction-list img, .wl-panel img, .tk-owo-emotion) { + &:not(.wl-user-avatar, .wl-reaction-list img, .wl-panel img, .tk-owo-emotion, .wl-emoji, .wl-login-nick>img) { box-sizing: border-box; padding: 0.188rem; margin: 0.188rem 0; @@ -424,8 +439,10 @@ cursor: -webkit-zoom-in; } - &.tk-owo-emotion { - max-height: 28px; + &.tk-owo-emotion, + &.wl-emoji { + height: 1.68rem; + object-fit: contain; cursor: default; } } diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index 963ee34..7198a5a 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -1,8 +1,8 @@ --- import SITE_CONFIG from "@/config"; const { Navs } = SITE_CONFIG; -// 原生图片 -import { Image } from "astro:assets"; +// Svg 组件 +import Svg from "@/components/Svg/Svg.astro"; // 搜索框组件 import Search from "@/components/Search/Search.astro"; // 顶部 Header 样式 @@ -12,7 +12,7 @@ import "./Header.less";
- + Home
@@ -20,7 +20,7 @@ import "./Header.less"; Navs.map(i => ( {i.text} - {`${i.text}图标`} + )) } diff --git a/src/components/Header/Header.less b/src/components/Header/Header.less index 6988871..d0d2e1a 100644 --- a/src/components/Header/Header.less +++ b/src/components/Header/Header.less @@ -86,6 +86,7 @@ header.vh-header { font-size: 1.088rem; line-height: 1; } + } &.search-btn { @@ -124,10 +125,13 @@ header.vh-header { } } - &>img { - width: 1.08rem; - height: 1.08rem; + &>svg { + pointer-events: none; + width: auto; + height: 1.18rem; object-fit: contain; + stroke: var(--vh-black-88); + stroke-width: 2.88px; } } } diff --git a/src/components/MobileSidebar/MobileSidebar.astro b/src/components/MobileSidebar/MobileSidebar.astro index 233f91f..28b8989 100644 --- a/src/components/MobileSidebar/MobileSidebar.astro +++ b/src/components/MobileSidebar/MobileSidebar.astro @@ -1,6 +1,8 @@ --- import SITE_CONFIG from "@/config"; const { Navs, Title } = SITE_CONFIG; +// Svg 组件 +import Svg from "@/components/Svg/Svg.astro"; // 侧边栏 MobileSidebar 样式 import "./MobileSidebar.less"; --- @@ -15,7 +17,7 @@ import "./MobileSidebar.less"; { Navs.map(i => ( - + {i.text} )) diff --git a/src/components/MobileSidebar/MobileSidebar.less b/src/components/MobileSidebar/MobileSidebar.less index c084b57..71155e0 100644 --- a/src/components/MobileSidebar/MobileSidebar.less +++ b/src/components/MobileSidebar/MobileSidebar.less @@ -90,15 +90,16 @@ color: #fff; background-color: #3366FF; - &>object { - filter: brightness(0) invert(100%); + &>svg { + stroke: #fff; } } - &>object { - width: 0.875rem; - height: 0.875rem; - transition: filter 0.16s ease-in-out; + &>svg { + width: auto; + height: 0.888rem; + object-fit: contain; + transition: stroke 0.16s ease-in-out; } } } diff --git a/src/components/Pagination/Pagination.astro b/src/components/Pagination/Pagination.astro index 4b48e61..bcda346 100644 --- a/src/components/Pagination/Pagination.astro +++ b/src/components/Pagination/Pagination.astro @@ -8,7 +8,7 @@ import "./Pagination.less";
- + @@ -16,7 +16,7 @@ import "./Pagination.less"; { data.first && data.prev && ( - + 1 ) @@ -24,17 +24,17 @@ import "./Pagination.less"; { (!data.next || !data.last) && data.prev && data.current !== "/2" && ( - + {fmtPage(data.prev)} ) } - {fmtPage(data.current) || "1"} + {fmtPage(data.current) || "1"} { (!data.prev || !data.first) && data.next && data.last !== "/2" && ( - + {fmtPage(data.next)} ) @@ -42,13 +42,13 @@ import "./Pagination.less"; { data.next && data.last && ( - + {fmtPage(data.last)} ) } - + diff --git a/src/components/Reward/Reward.less b/src/components/Reward/Reward.less index a1c68e6..c417023 100644 --- a/src/components/Reward/Reward.less +++ b/src/components/Reward/Reward.less @@ -24,6 +24,7 @@ justify-content: center; gap: 1.18rem; width: 100%; + z-index: 1; &>span { position: relative; diff --git a/src/components/Search/Search.less b/src/components/Search/Search.less index e90da76..c87a319 100644 --- a/src/components/Search/Search.less +++ b/src/components/Search/Search.less @@ -14,7 +14,7 @@ transition: opacity 0.16s ease-in-out; opacity: 0; pointer-events: none; - z-index: 10; + z-index: 1; &.active { opacity: 1; diff --git a/src/components/Svg/Svg.astro b/src/components/Svg/Svg.astro new file mode 100644 index 0000000..48cb257 --- /dev/null +++ b/src/components/Svg/Svg.astro @@ -0,0 +1,6 @@ +--- +const { src } = Astro.props; +const svgContent = await import(`../../../public/assets/images/svg/${src}.svg?raw`).then(m => m.default); +--- + +{svgContent && } diff --git a/src/config.ts b/src/config.ts index a980184..b0bc32e 100644 --- a/src/config.ts +++ b/src/config.ts @@ -13,30 +13,33 @@ export default { CreateTime: '2021-09-01', // 导航栏 (新窗口打开 newWindow: true) Navs: [ - { text: '朋友', link: '/links', icon: '/assets/images/svg/Navs/links.svg' }, - { text: '圈子', link: '/friends', icon: '/assets/images/svg/Navs/friends.svg' }, - { text: '动态', link: '/talking', icon: '/assets/images/svg/Navs/talking.svg' }, - { text: '昔日', link: '/archives', icon: '/assets/images/svg/Navs/archives.svg' }, - { text: '留言', link: '/message', icon: '/assets/images/svg/Navs/message.svg' }, - { text: '关于', link: '/about', icon: '/assets/images/svg/Navs/about.svg' }, - { text: 'API', link: 'https://api.vvhan.com/', target: true, icon: '/assets/images/svg/Navs/link.svg' }, + // 仅支持 SVG 且 SVG 需放在 public/assets/images/svg/ 目录下，填入文件名即可（封装了 SVG 组件 为了极致压缩 SVG） + // 建议使用 https://tabler.io/icons 直接下载 SVG + { text: '朋友', link: '/links', icon: 'Nav_friends' }, + { text: '圈子', link: '/friends', icon: 'Nav_rss' }, + { text: '动态', link: '/talking', icon: 'Nav_talking' }, + { text: '昔日', link: '/archives', icon: 'Nav_archives' }, + { text: '留言', link: '/message', icon: 'Nav_message' }, + { text: '关于', link: '/about', icon: 'Nav_about' }, + { text: 'API', link: 'https://api.vvhan.com/', target: true, icon: 'Nav_link' }, ], // 侧边栏个人网站 WebSites: [ - { text: 'Github', link: 'https://github.com/uxiaohan', icon: '/assets/images/svg/WebSites/github.svg' }, - { text: '韩小韩API', link: 'https://api.vvhan.com', icon: '/assets/images/svg/WebSites/api.svg' }, - { text: '每日热榜', link: 'https://hot.vvhan.com', icon: '/assets/images/svg/WebSites/hot.svg' }, - { text: '骤雨重山图床', link: 'https://wp-cdn.4ce.cn', icon: '/assets/images/svg/WebSites/img.svg' }, - { text: 'HanAnalytics', link: 'https://analytics.vvhan.com', icon: '/assets/images/svg/WebSites/analytics.svg' }, + // 仅支持 SVG 且 SVG 需放在 public/assets/images/svg/ 目录下，填入文件名即可（封装了 SVG 组件 为了极致压缩 SVG） + // 建议使用 https://tabler.io/icons 直接下载 SVG + { text: 'Github', link: 'https://github.com/uxiaohan', icon: 'WebSite_github' }, + { text: '韩小韩API', link: 'https://api.vvhan.com', icon: 'WebSite_api' }, + { text: '每日热榜', link: 'https://hot.vvhan.com', icon: 'WebSite_hot' }, + { text: '骤雨重山图床', link: 'https://wp-cdn.4ce.cn', icon: 'WebSite_img' }, + { text: 'HanAnalytics', link: 'https://analytics.vvhan.com', icon: 'WebSite_analytics' }, ], // DNS预解析地址 DNSOptimization: [ 'https://i0.wp.com', - 'https://tools-api.vvhan.com', - 'https://pagead2.googlesyndication.com', - 'https://lf9-cdn-tos.bytecdntp.com', + 'https://analytics.vvhan.com', + 'https://vh-api.4ce.cn', 'https://registry.npmmirror.com', - 'https://npm.elemecdn.com' + 'https://pagead2.googlesyndication.com' ], // 博客音乐组件解析接口 vhMusicApi: 'https://meting-dd.2333332.xyz/api', @@ -57,7 +60,7 @@ export default { HanAnalytics: { enable: true, server: 'https://analytics.vvhan.com', siteId: 'Hello-HanHexoBlog' }, // Google 广告 GoogleAds: { - ad_Client: 'ca-pub-xxxxxx', + ad_Client: '', //ca-pub-xxxxxx // 侧边栏广告(不填不开启) asideAD_Slot: ``, // 文章页广告(不填不开启) diff --git a/src/layouts/ToolLayout/ToolLayout.less b/src/layouts/ToolLayout/ToolLayout.less index 6aa4a7f..9b6405c 100644 --- a/src/layouts/ToolLayout/ToolLayout.less +++ b/src/layouts/ToolLayout/ToolLayout.less @@ -325,11 +325,11 @@ align-items: center; height: 1.68rem; width: max-content; - border: 1px solid #3253b4; + border: 1px solid var(--vh-info); border-radius: 0.88rem; background-color: #fff; font-size: 0.72rem; - color: #3253b4; + color: var(--vh-info); transition: all .2s ease-in-out; user-select: none; cursor: pointer; diff --git a/src/pages/article/[...article].astro b/src/pages/article/[...article].astro index e4837c6..f5e8847 100644 --- a/src/pages/article/[...article].astro +++ b/src/pages/article/[...article].astro @@ -46,13 +46,13 @@ import "@/styles/ArticleBase.less";

{post.data.title}

- + {article_word_count || "一点"}字 {parseFloat((Number(reading_time) || 0).toFixed(1).replace(/\.0+$/, ""))}分钟 - + {post.data.categories}
diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts index 8eec8e5..e032ac5 100644 --- a/src/pages/rss.xml.ts +++ b/src/pages/rss.xml.ts @@ -1,13 +1,12 @@ -import rss from '@astrojs/rss'; +import { getRssString } from '@astrojs/rss'; import { getCollection } from 'astro:content'; import { getDescription } from '@/utils/index' import SITE_CONFIG from '@/config'; const { Title, Description } = SITE_CONFIG; - export async function GET(context: any) { const posts = await getCollection('blog'); - return rss({ + const res = await getRssString({ title: Title, description: Description, site: context.site, @@ -18,4 +17,8 @@ export async function GET(context: any) { link: `/article/${post.data.id}` })).sort((a: any, b: any) => (new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime())), }); + // 添加 XML 样式表指令 + const xmlHead = ''; + const xmlMain = res.replace(xmlHead, `${xmlHead}`).replace(/\/<\/link>/g, ''); + return new Response(xmlMain, { headers: { 'Content-Type': 'application/xml' } }); } diff --git a/src/scripts/Comment.ts b/src/scripts/Comment.ts index 869baaf..5919e10 100644 --- a/src/scripts/Comment.ts +++ b/src/scripts/Comment.ts @@ -15,7 +15,7 @@ const WalineFn = async (commentDOM: string, walineInit: any) => { import('@waline/client/waline-meta.css'); const { init } = await import('@waline/client'); walineInit = init({ - el: commentDOM, serverURL: SITE_INFO.Comment.Waline.serverURL, emoji: ['https://registry.npmmirror.com/@waline/emojis/1.3.0/files/alus', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/bilibili', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/bmoji', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/qq', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/tieba', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/weibo', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/soul-emoji'], + el: commentDOM, path: window.location.pathname.replace(/\/$/, ''), serverURL: SITE_INFO.Comment.Waline.serverURL, emoji: ['https://registry.npmmirror.com/@waline/emojis/1.3.0/files/alus', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/bilibili', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/bmoji', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/qq', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/tieba', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/weibo', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/soul-emoji'], imageUploader: async (file: any) => { const body = new FormData(); body.append('file', file); diff --git a/src/scripts/Init.ts b/src/scripts/Init.ts index e4ec7c8..1cc2bda 100644 --- a/src/scripts/Init.ts +++ b/src/scripts/Init.ts @@ -55,6 +55,8 @@ const indexInit = async (only: boolean = true) => { only && initMobileSidebar(); // SmoothScroll 滚动优化 only && SmoothScroll(); + // 图片灯箱 + only && ViewImage(); // 顶部导航 Current 状态 initLinkCurrent() // 初始化文章代码块 @@ -63,8 +65,6 @@ const indexInit = async (only: boolean = true) => { checkComment() && commentInit(checkComment(), commentLIst) // 图片懒加载初始化 vhLzImgInit(); - // 图片灯箱 - only && ViewImage(); // 友情链接初始化 initLinks(); // 朋友圈 RSS 初始化 diff --git a/src/scripts/ViewImage.ts b/src/scripts/ViewImage.ts index 1b17ae9..d4f42b8 100644 --- a/src/scripts/ViewImage.ts +++ b/src/scripts/ViewImage.ts @@ -8,9 +8,9 @@ const ViewImgList: string[] = [ // 动态页面图片 "main.talking-main>article>.main img", // Twikoo 评论区图片 - ".vh-comment>.twikoo>.tk-comments img:not(.tk-avatar-img,.tk-owo-emotion,.OwO-item img)", + ".vh-comment>.twikoo>.tk-comments img:not(.tk-avatar-img,.OwO-item img,.tk-owo-emotion)", // Waline 评论区图片 - ".vh-comment div[data-waline] img:not(.wl-user-avatar,.tk-owo-emotion,.wl-avatar img,.wl-reaction-list img,.wl-panel img)" + ".vh-comment div[data-waline] img:not(.wl-user-avatar,.wl-avatar img,.wl-reaction-list img,.wl-panel img,.tk-owo-emotion,.wl-emoji)" ]; // 初始化 export default async () => { diff --git a/src/styles/Article.less b/src/styles/Article.less index f7d3b26..8dd2acf 100644 --- a/src/styles/Article.less +++ b/src/styles/Article.less @@ -24,18 +24,18 @@ section.vh-container { &>.article-meta { display: flex; align-items: center; - gap: 1.18rem; + gap: 0.88rem; font-size: 0.85rem; &>.article-meta-item { display: flex; align-items: center; - gap: 0.38rem; + gap: 0.18rem; width: max-content; &>svg { flex-shrink: 0; - height: 0.86rem; + height: 0.888rem; width: auto; } @@ -45,6 +45,7 @@ section.vh-container { &>span { &.count { + padding-left: 0.38rem; color: #3FA67F; strong { diff --git a/src/styles/ArticleBase.less b/src/styles/ArticleBase.less index 9152978..8b1914e 100644 --- a/src/styles/ArticleBase.less +++ b/src/styles/ArticleBase.less @@ -208,37 +208,37 @@ background-color: #f7f7f7; &.note-success { - border-color: #01C4B6; - border-left: 5px solid #01C4B6; - border-left-color: #01C4B6; - background-color: #01C4B618; + border-color: var(--vh-success); + border-left: 5px solid var(--vh-success); + border-left-color: var(--vh-success); + background-color: var(--vh-success-hover); } &.note-info { - border-color: #3253b4; - border-left: 5px solid #3253b4; - border-left-color: #3253b4; - background-color: #3253b418; + border-color: var(--vh-info); + border-left: 5px solid var(--vh-info); + border-left-color: var(--vh-info); + background-color: var(--vh-info-hover); } &.note-warning { - border-color: #DD8636; - border-left: 5px solid #DD8636; - border-left-color: #DD8636; - background-color: #DD863618; + border-color: var(--vh-warning); + border-left: 5px solid var(--vh-warning); + border-left-color: var(--vh-warning); + background-color: var(--vh-warning-hover); } &.note-error { - border-color: #DE3C3D; - border-left: 5px solid #DE3C3D; - border-left-color: #DE3C3D; - background-color: #DE3C3D18; + border-color: var(--vh-error); + border-left: 5px solid var(--vh-error); + border-left-color: var(--vh-error); + background-color: var(--vh-error-hover); } &.note-import { - border-left: 5px solid #B984DF; - border-left-color: #B984DF; - background-color: #B984DF18; + border-left: 5px solid var(--vh-import); + border-left-color: var(--vh-import); + background-color: var(--vh-import-hover); } p { @@ -254,7 +254,7 @@ box-sizing: border-box; display: flex; align-items: center; - gap: 0.618rem; + gap: 0.58rem; padding: 0 1.18rem; width: max-content; max-width: 100%; @@ -269,36 +269,35 @@ overflow: hidden; &:hover { - &::after { + &::before { height: 100%; } } - &::before { + &::after { flex-shrink: 0; content: ''; background-color: #000; - mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M364.2%2083.8c-24.4-24.4-64-24.4-88.4%200l-184%20184c-42.1%2042.1-42.1%20110.3%200%20152.4s110.3%2042.1%20152.4%200l152-152c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-152%20152c-64%2064-167.6%2064-231.6%200s-64-167.6%200-231.6l184-184c46.3-46.3%20121.3-46.3%20167.6%200s46.3%20121.3%200%20167.6l-176%20176c-28.6%2028.6-75%2028.6-103.6%200s-28.6-75%200-103.6l144-144c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-144%20144c-6.7%206.7-6.7%2017.7%200%2024.4s17.7%206.7%2024.4%200l176-176c24.4-24.4%2024.4-64%200-88.4z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; + mask: url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%22100%25%22%20%20height%3D%22100%25%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22currentColor%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-unlink%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M17%2022v-2%22%20%2F%3E%3Cpath%20d%3D%22M9%2015l6%20-6%22%20%2F%3E%3Cpath%20d%3D%22M11%206l.463%20-.536a5%205%200%200%201%207.071%207.072l-.534%20.464%22%20%2F%3E%3Cpath%20d%3D%22M13%2018l-.397%20.534a5.068%205.068%200%200%201%20-7.127%200a4.972%204.972%200%200%201%200%20-7.071l.524%20-.463%22%20%2F%3E%3Cpath%20d%3D%22M20%2017h2%22%20%2F%3E%3Cpath%20d%3D%22M2%207h2%22%20%2F%3E%3Cpath%20d%3D%22M7%202v2%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center center; background-size: contain; - width: 1rem; - height: 1rem; + width: 1.18rem; + height:1.18rem; overflow: hidden; } - &::after { + &::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; - background-color: var(--vh-black-default-66); + background-color: var(--vh-main-color); transition: height 0.16s ease-in-out; z-index: -1; } - &>span { box-sizing: border-box; color: #000; @@ -311,62 +310,82 @@ } &.btn-success { - border-color: #01C4B6; + border-color: var(--vh-success); &>span { - color: #01C4B6; + color: var(--vh-success); } - &::before { - background-color: #01C4B6; + &::before{ + background-color: var(--vh-success-hover); + } + + &::after { + background-color: var(--vh-success); } } &.btn-info { - border-color: #3253b4; + border-color: var(--vh-info); &>span { - color: #3253b4; + color: var(--vh-info); } - &::before { - background-color: #3253b4; + &::before{ + background-color: var(--vh-info-hover); + } + + &::after { + background-color: var(--vh-info); } } &.btn-warning { - border-color: #DD8636; + border-color: var(--vh-warning); &>span { - color: #DD8636; + color: var(--vh-warning); } - &::before { - background-color: #DD8636; + &::before{ + background-color: var(--vh-warning-hover); + } + + &::after { + background-color: var(--vh-warning); } } &.btn-error { - border-color: #DE3C3D; + border-color: var(--vh-error); &>span { - color: #DE3C3D; + color: var(--vh-error); } - &::before { - background-color: #DE3C3D; + &::before{ + background-color: var(--vh-error-hover); + } + + &::after { + background-color: var(--vh-error); } } &.btn-import { - border-color: #B984DF; + border-color: var(--vh-import); &>span { - color: #B984DF; + color: var(--vh-import); } - &::before { - background-color: #B984DF; + &::before{ + background-color: var(--vh-import-hover); + } + + &::after { + background-color: var(--vh-import); } } } @@ -524,7 +543,7 @@ } &::after { - background: #01C4B6 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m389-377.13%20294.7-294.7q12.58-12.67%2029.52-12.67%2016.93%200%2029.61%2012.67%2012.67%2012.68%2012.67%2029.53%200%2016.86-12.28%2029.14L419.07-288.41q-12.59%2012.67-29.52%2012.67-16.94%200-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77%2012.55-29.45%2012.68-12.67%2029.62-12.67%2016.93%200%2029.28%2012.67L389-377.13Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; + background: var(--vh-success) url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m389-377.13%20294.7-294.7q12.58-12.67%2029.52-12.67%2016.93%200%2029.61%2012.67%2012.67%2012.68%2012.67%2029.53%200%2016.86-12.28%2029.14L419.07-288.41q-12.59%2012.67-29.52%2012.67-16.94%200-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77%2012.55-29.45%2012.68-12.67%2029.62-12.67%2016.93%200%2029.28%2012.67L389-377.13Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; background-size: 1.16rem 1.16rem; } diff --git a/src/styles/Base.less b/src/styles/Base.less index d5ae469..7563a25 100644 --- a/src/styles/Base.less +++ b/src/styles/Base.less @@ -28,6 +28,25 @@ --vh-main-color-28: rgb(from var(--vh-main-color) r g b / 28%); --vh-main-color-16: rgb(from var(--vh-main-color) r g b / 16%); --vh-main-color-6: rgb(from var(--vh-main-color) r g b / 6%); + + // Info + --vh-info: #3253b4; + --vh-info-hover: #3253b418; + // Success + --vh-success: #01C4B6; + --vh-success-hover: #01C4B618; + // Warning + --vh-warning: #DD8636; + --vh-warning-hover: #DD863618; + // Error + --vh-error: #DE3C3D; + --vh-error-hover: #DE3C3D18; + // Import + --vh-import: #B984DF; + --vh-import-hover: #B984DF18; + + + // 尺寸 --vh-size-h1: 1.125rem; --vh-size-h2: 0.88rem;