From 9586c67a46938432f3fb4770d8c44937ecde5595 Mon Sep 17 00:00:00 2001 From: youzi <2410633923@qq.com> Date: Fri, 20 Mar 2026 21:13:55 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0UI=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=92=8C=E5=AD=97=E4=BD=93=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 5 + src/Index.vue | 11 +- src/assets/base.less | 42 +- src/assets/main.css | 3 +- src/assets/myblog.less | 2118 ------------------------------ src/components/Login.vue | 309 +++-- src/components/aplayer.vue | 5 + src/components/homeSide.vue | 134 +- src/components/mask.vue | 13 +- src/components/menuH.vue | 404 +++--- src/lib/components/LazyImg.vue | 146 +- src/lib/components/Waterfall.vue | 149 ++- src/lib/types/waterfall.d.ts | 2 + src/lib/use/useCalculateCols.ts | 69 +- src/lib/use/useLayout.ts | 101 +- src/lib/utils/keys.ts | 5 + src/views/Gallery.vue | 342 +++-- src/views/Home.vue | 899 +++++++------ src/views/Plink.vue | 631 ++++++--- src/views/blog/[bid].vue | 654 ++++++--- src/views/blog/index.vue | 423 ++++-- 21 files changed, 2859 insertions(+), 3606 deletions(-) delete mode 100644 src/assets/myblog.less create mode 100644 src/lib/utils/keys.ts diff --git a/.gitignore b/.gitignore index 3a820e8..d1cd6f4 100644 --- a/.gitignore +++ b/.gitignore @@ -30,3 +30,8 @@ coverage *.sw? *.tsbuildinfo +.agent +.agents +.agent/* +.agents/* + diff --git a/src/Index.vue b/src/Index.vue index 017ebf3..f1b29d7 100644 --- a/src/Index.vue +++ b/src/Index.vue @@ -6,7 +6,7 @@ - +
皖ICP备2021017362号-1 api文档 @@ -106,8 +106,13 @@ onMounted(() => { \ No newline at end of file + diff --git a/src/assets/base.less b/src/assets/base.less index db04536..5029d44 100644 --- a/src/assets/base.less +++ b/src/assets/base.less @@ -7,6 +7,46 @@ font-weight: normal; } +:root { + --font-sans-zh: "LXGW WenKai", "霞鹜文楷", "STKaiti", "KaiTi", serif; + --font-mono-code: "Fira Code", "Cascadia Code", Consolas, monospace; +} + +html, +body, +#app { + font-family: var(--font-sans-zh); +} + +body, +button, +input, +select, +textarea, +.n-config-provider, +.n-layout, +.n-card, +.n-button, +.n-input, +.n-base-selection, +.n-modal, +.n-dropdown, +.devui-tag-item, +.d-tag { + font-family: var(--font-sans-zh) !important; +} + +code, +pre, +kbd, +samp, +.hljs, +.md-editor-code, +.md-editor-code-head, +.md-editor-code-content { + font-family: var(--font-sans-zh) !important; +} + .n-scrollbar-rail__scrollbar { background-color: #f6cbe770 !important; } @@ -19,4 +59,4 @@ /* 添加平滑过渡效果 */ #nprogress .bar { transition: width 0.2s ease-in-out; -} \ No newline at end of file +} diff --git a/src/assets/main.css b/src/assets/main.css index a9962a8..066dc28 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,5 +1,6 @@ +@import url("https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.7.0/style.css"); @import "qweather-icons/font/qweather-icons.css"; @import 'md-editor-v3/lib/preview.css'; @import "nprogress/nprogress.css"; -@import "./base.less"; \ No newline at end of file +@import "./base.less"; diff --git a/src/assets/myblog.less b/src/assets/myblog.less deleted file mode 100644 index a616c5a..0000000 --- a/src/assets/myblog.less +++ /dev/null @@ -1,2118 +0,0 @@ -:root { - /* 标题后小图标，借鉴自思源笔记主题——Savor */ - --h1-icon-shape: url("data:image/svg+xml;utf8,") no-repeat center; - --h2-icon-shape: url("data:image/svg+xml;utf8,") no-repeat center; - --h3-icon-shape: url("data:image/svg+xml;utf8,"); - --h4-icon-shape: url("data:image/svg+xml;utf8,"); - --h5-icon-shape: url("data:image/svg+xml;utf8,"); - --h6-icon-shape: url("data:image/svg+xml;utf8,"); - - /* 文档背景样式 */ - /* 1. 交叉斜线 */ - --bg-shape-cross: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h30v30H0z' fill='none'/%3E%3Cpath d='M0 0L15 15M30 0L15 15M0 30L15 15M30 30L15 15' stroke='black' stroke-width='0.4'/%3E%3C/svg%3E"); - /* 2. 星点图案 */ - --bg-shape-star: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3Cpath d='M10 10l2-6l2 6l6 2l-6 2l-2 6l-2-6l-6-2Z' fill='black'/%3E%3Cpath d='M30 15l1-3l1 3l3 1l-3 1l-1 3l-1-3l-3-1Z' fill='black'/%3E%3Cpath d='M25 30l1.5-4.5l1.5 4.5l4.5 1.5l-4.5 1.5l-1.5 4.5l-1.5-4.5l-4.5-1.5Z' fill='black'/%3E%3C/svg%3E"); - /* 3. 六边形图案 */ - --bg-shape-hex: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3Cpath d='M10 5l10 0l5 8.66l-5 8.66l-10 0l-5-8.66Z' fill='none' stroke='black' stroke-width='0.4'/%3E%3Cpath d='M20 22.32l10 0l5 8.66l-5 8.66l-10 0l-5-8.66Z' fill='none' stroke='black' stroke-width='0.4'/%3E%3C/svg%3E"); - /* 4. 十字圆点 */ - --bg-shape-dot: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='0.5' fill='black'/%3E%3Ccircle cx='7.5' cy='2.5' r='0.5' fill='black'/%3E%3Ccircle cx='7.5' cy='12.5' r='0.5' fill='black'/%3E%3Ccircle cx='2.5' cy='7.5' r='0.5' fill='black'/%3E%3Ccircle cx='12.5' cy='7.5' r='0.5' fill='black'/%3E%3C/svg%3E"); - /* 5. 三角形 */ - --bg-shape-tri: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h30v30H0z' fill='none'/%3E%3Cpath d='M0 0L30 0L15 15Z' fill='black'/%3E%3Cpath d='M30 30L0 30L15 15Z' fill='black'/%3E%3C/svg%3E"); - /* 6. 方格网 */ - --bg-shape-grid: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0z' fill='none'/%3E%3Cpath d='M20 0v20M0 20h20' stroke='black' stroke-width='0.7'/%3E%3C/svg%3E"); - /* 7. 无背景 (纯白背景) */ - --bg-shape-none: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="); - - /* 文档背景样式 none 无背景*/ - --bg-style: var(--bg-shape-star); - - - /* 自动编号格式设置 无需自动编号可全部注释掉或部分注释掉*/ - // --autonum-h1: counter(h1) ". "; - // --autonum-h2: counter(h1) "." counter(h2) ". "; - // --autonum-h3: counter(h1) "." counter(h2) "." counter(h3) ". "; - /* --autonum-h4: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "; - --autonum-h5: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "; - --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; */ - - /* 下面是文章内Toc目录自动编号，与上面一样即可 */ - --autonum-h1toc: counter(h1toc) ". "; - --autonum-h2toc: counter(h1toc) "." counter(h2toc) ". "; - --autonum-h3toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) ". "; - /* --autonum-h4toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) ". "; - --autonum-h5toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) ". "; - --autonum-h6toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) "." counter(h6toc) ". "; */ - - -/* 标题主色：明亮的樱花粉 */ - --head-title-color: #ec66ab; - - /* H2 渐变：柔和的粉白过渡 */ - --head-title-h2-color: #fff; - --head-title-h2-background: linear-gradient(to right, #ffb7cd, #ec66ab, #ffb7cd); - - /* 元素颜色 */ - --element-color: #ec66ab; /* 主色 */ - --element-color-deep: #e91e63; /* 深粉红 (文字/强调) */ - --element-color-shallow: #ffb7cd; /* 浅粉 (Mask图标) */ - --element-color-so-shallow: #ffe3ec; /* 很浅粉 (高亮背景) */ - --element-color-soo-shallow: #fff0f5; /* 极浅粉 (LavenderBlush) */ - --glass-bg-color:#feebf259; - - /* 行内代码：深玫红 */ - --element-color-linecode: #c2185b; - --element-color-linecode-background: #fce4ec; - - /* UI 颜色 */ - --appui-color: #ec66ab; - --appui-color-icon: #ec66ab; - --appui-color-text: #5e3a44; /* 暖褐色文字 */ - --primary-color: #ec66ab; - - --rawblock-edit-panel-bd: var(--element-color-soo-shallow); -} -@font-face { - font-family: HarmonyOS_Sans_SC; - font-weight: 400; - font-style: normal; - src: url(HarmonyOS_Sans_SC_Regular.woff); -} - -@font-face { - font-family: HarmonyOS_Sans_SC; - font-weight: 700; - font-style: normal; - src: url(HarmonyOS_Sans_SC_Bold.woff); -} - -@font-face { - font-family: CascadiaCode; - src: url(Cascadia-Code-Regular.ttf); -} - -@font-face { - font-family: SourceHanSerifCN; - src: url(SourceHanSerifCN-Medium.ttf); -} - -@font-face { - font-family: SourceHanSerifCN; - src: url(SourceHanSerifCN-Bold.ttf); - font-weight: 700; -} - - -.my-theme { - line-height: 2.25; - letter-spacing: 1.1px; - word-break: break-word; - word-wrap: break-word; - text-align: left; -} - -.my-theme::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; - z-index: -1; - background-color: var(--element-color); - opacity: 0.12; - -webkit-mask-image: var(--bg-style); - mask-image: var(--bg-style); - -webkit-mask-size: 20px 20px; - mask-size: 20px 20px; - -webkit-mask-repeat: repeat; - mask-repeat: repeat; - -webkit-mask-position: center; - mask-position: center; -} - -.my-theme p { - color: #333; - margin: 10px 10px; - // font-family: Optima-Regular, Optima, SourceHanSerifCN, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif; - font-size: 1rem; - word-spacing: 2px; -} - -.my-theme h3.md-heading:after, -h4.md-heading:after, -h5.md-heading:after, -h6.md-heading:after { - content: " "; - display: inline-block; - height: 2em; - width: 2em; - vertical-align: top; - margin-left: -2px; - background-color: var(--element-color-shallow); - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center; - -webkit-mask-size: 24px 24px; - mask-repeat: no-repeat; - mask-position: center; - mask-size: 24px 24px; -} - -.my-theme h3.md-heading:after { - -webkit-mask-image: var(--h3-icon-shape); - mask-image: var(--h3-icon-shape); -} - -.my-theme h4.md-heading:after { - -webkit-mask-image: var(--h4-icon-shape); - mask-image: var(--h4-icon-shape); -} - -.my-theme h5.md-heading:after { - -webkit-mask-image: var(--h5-icon-shape); - mask-image: var(--h5-icon-shape); -} - -.my-theme h6.md-heading:after { - -webkit-mask-image: var(--h6-icon-shape); - mask-image: var(--h6-icon-shape); -} - -.my-theme h1 { - text-align: center; - font-size: 1.8rem; - font-weight: 700; - margin: 1em auto 0.8em; - line-height: 1.4; - width: fit-content; - min-width: 120px; - min-height: 1.4em; - color: #222; - position: relative; - padding-bottom: 12px; - transition: color 0.3s ease, transform 0.3s ease; - border-bottom: none; -} - -.my-theme h1::after { - content: ""; - position: absolute; - bottom: 0; - left: 50%; - width: 40px; - height: 4px; - border-radius: 4px; - background: var(--head-title-h2-background); - background-size: 100% auto; - transform: translateX(-50%); - transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); -} - -.my-theme h1:not(.md-focus):hover { - color: var(--head-title-color); - transform: translateY(-2px); -} - -.my-theme h1:hover::after { - width: 100%; -} - -.my-theme h2 { - color: var(--head-title-h2-color); - font-size: 1.4rem; - line-height: 1.5; - width: fit-content; - font-weight: 700; - margin: 20px 0; - padding: 5px 12px; - border-radius: 8px; - background: var(--head-title-h2-background); - background-size: 200% auto; - background-position: 0 center; - box-shadow: 0 2px 5px rgba(61, 184, 211, 0.15); - transition: background-position 0.5s ease-out, transform 0.4s ease, box-shadow 0.4s ease; -} - -.my-theme h2:hover { - background-position: 100% center; - transform: scale(1.01); - box-shadow: 0 8px 20px rgba(61, 184, 211, 0.35); -} - -.my-theme h3 { - position: relative; - width: fit-content; - margin: 20px 0; - text-align: left; - font-size: 1.3rem; - padding-left: 10px; - transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); -} - -.my-theme h3 { - position: relative; - width: fit-content; - margin: 20px 0; - text-align: left; - font-size: 1.3rem; - padding-left: 10px; - transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); -} - -.my-theme h3::before { - content: ""; - position: absolute; - left: -6px; - top: 50%; - transform: translateY(-50%); - width: 5px; - height: 61%; - border-radius: 4px; - background-color: var(--head-title-color); - transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); -} - -.my-theme h3 span { - border-bottom: 2px hidden var(--head-title-color); - transition: color 0.3s ease; -} - -.my-theme h3:hover { - padding-left: 18px; - color: var(--head-title-color); - cursor: pointer; -} - -.my-theme h3:hover::before { - height: 66%; - background-color: var(--head-title-color); - width: 7px; -} - -.my-theme h4, -.my-theme h5, -.my-theme h6 { - transition: color 0.3s ease, transform 0.3s ease; -} - -.my-theme h4::before, -.my-theme h5::before, -.my-theme h6::before { - transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.my-theme h4 { - margin: 20px 0; - font-size: 1.15rem; - text-align: left; -} - -.my-theme h4::before { - content: ""; - margin-right: 7px; - display: inline-block; - background-color: var(--head-title-color); - width: 10px; - height: 10px; - border-radius: 100%; - border: var(--head-title-color) 1px solid; - vertical-align: inherit; -} - -.my-theme h4:hover::before { - transform: scale(1.3); - box-shadow: 0 0 0 4px var(--element-color-soo-shallow); -} - -.my-theme h5 { - margin: 23px 0; - font-size: 1.1rem; - text-align: left; -} - -.my-theme h5::before { - content: ""; - margin-right: 7px; - display: inline-block; - // background-color: #fff; - width: 10px; - height: 10px; - border-radius: 100%; - border: var(--head-title-color) 2px solid; - vertical-align: inherit; - box-sizing: border-box; -} - -.my-theme h5:hover::before { - background-color: var(--head-title-color); - transform: scale(1.2); - box-shadow: 0 0 0 3px var(--element-color-soo-shallow); -} - -.my-theme h6 { - margin: 23px 0; - font-size: 1.1rem; - text-align: left; -} - -.my-theme h6::before { - content: "-"; - color: var(--head-title-color); - margin-right: 7px; - display: inline-block; - vertical-align: inherit; -} - -.my-theme h6:hover::before { - transform: scaleX(1.8) translateX(1px); - font-weight: 700; -} - -.my-theme h4:hover, -.my-theme h5:hover, -.my-theme h6:hover { - color: var(--element-color-deep); - transform: translateX(6px); -} - -.my-theme { - counter-reset: h1; -} - -h1 { - counter-reset: h2; -} - -h2 { - counter-reset: h3; -} - -h3 { - counter-reset: h4; -} - -h4 { - counter-reset: h5; -} - -h5 { - counter-reset: h6; -} - -.sidebar-content { - counter-reset: h1; -} - -.outline-content { - counter-reset: h1; -} - -.outline-h1 { - counter-reset: h2; -} - -.outline-h2 { - counter-reset: h3; -} - -.outline-h3 { - counter-reset: h4; -} - -.outline-h4 { - counter-reset: h5; -} - -.outline-h5 { - counter-reset: h6; -} - -.md-toc-content { - counter-reset: h1toc; -} - -.md-toc-h1 { - counter-reset: h2toc; -} - -.md-toc-h2 { - counter-reset: h3toc; -} - -.md-toc-h3 { - counter-reset: h4toc; -} - -.md-toc-h4 { - counter-reset: h5toc; -} - -.md-toc-h5 { - counter-reset: h6toc; -} - -.my-theme h1:before { - counter-increment: h1; - content: var(--autonum-h1); -} - -#outline-content li.outline-h1 > div > span.outline-label:before { - counter-increment: h1; - content: var(--autonum-h1); -} - -.outline-content .outline-h1 > .outline-item > .outline-label:before { - counter-increment: h1; - content: var(--autonum-h1); -} - -.my-theme span.md-toc-item.md-toc-h1 > a:before { - counter-increment: h1toc; - content: var(--autonum-h1toc); -} - -.my-theme h2:before { - counter-increment: h2; - content: var(--autonum-h2); - color: var(--head-title-h2-color); -} - -.outline-content .outline-h2 > .outline-item > .outline-label:before { - counter-increment: h2; - content: var(--autonum-h2); -} - -li.outline-h2 > div > a.outline-label:before { - counter-increment: h2; - content: var(--autonum-h2); -} - -.my-theme span.md-toc-item.md-toc-h2 > a:before { - counter-increment: h2toc; - content: var(--autonum-h2toc); -} - -.my-theme h3 > span:first-of-type::before { - counter-increment: h3; - content: var(--autonum-h3); - color: var(--element-color); -} - -#outline-content li.outline-h3 > div > span.outline-label:before { - counter-increment: h3; - content: var(--autonum-h3); -} - -.outline-content .outline-h3 > .outline-item > .outline-label:before { - counter-increment: h3; - content: var(--autonum-h3); -} - -.my-theme span.md-toc-item.md-toc-h3 > a:before { - counter-increment: h3toc; - content: var(--autonum-h3toc); -} - -.my-theme h4 > span:first-of-type::before { - counter-increment: h4; - content: var(--autonum-h4); - color: var(--element-color); -} - -#outline-content li.outline-h4 > div > span.outline-label:before { - counter-increment: h4; - content: var(--autonum-h4); -} - -.outline-content .outline-h4 > .outline-item > .outline-label:before { - counter-increment: h4; - content: var(--autonum-h4); -} - -.my-theme span.md-toc-item.md-toc-h4 > a:before { - counter-increment: h4toc; - content: var(--autonum-h4toc); -} - -.my-theme h5 > span:first-of-type::before { - counter-increment: h5; - content: var(--autonum-h5); - color: var(--element-color); -} - -#outline-content li.outline-h5 > div > span.outline-label:before { - counter-increment: h5; - content: var(--autonum-h5); -} - -.outline-content .outline-h5 > .outline-item > .outline-label:before { - counter-increment: h5; - content: var(--autonum-h5); -} - -.my-theme span.md-toc-item.md-toc-h5 > a:before { - counter-increment: h5toc; - content: var(--autonum-h5toc); -} - -.my-theme h6 > span:first-of-type::before { - counter-increment: h6; - content: var(--autonum-h6); - color: var(--element-color); -} - -#outline-content li.outline-h6 > div > span.outline-label:before { - counter-increment: h6; - content: var(--autonum-h6); -} - -.outline-content .outline-h6 > .outline-item > .outline-label:before { - counter-increment: h6; - content: var(--autonum-h6); -} - -.my-theme span.md-toc-item.md-toc-h6 > a:before { - counter-increment: h6toc; - content: var(--autonum-h6toc); -} - -::marker { - color: var(--element-color-deep); -} - -li.md-list-item { - margin: 0.4rem 0; -} - -.my-theme ol, -.my-theme ul { - margin-top: 0; - margin-left: 16px; - margin-bottom: 8px; - padding-left: 13px; -} - -.my-theme em { - padding: 0 3px 0 0; -} - -.my-theme ul { - list-style-type: disc; -} - -.my-theme ul ul { - list-style-type: circle; -} - -.my-theme ul ul ul { - list-style-type: square; -} - -.my-theme ol { - list-style-type: decimal; -} - -.my-theme ol ol { - list-style-type: lower-alpha; -} - -.my-theme ol ol ol { - list-style-type: lower-roman; -} - -.my-theme li section { - margin-top: 5px; - margin-bottom: 5px; - line-height: 1.7rem; - text-align: justify; - color: #000; - font-weight: 500; -} - - -.my-theme .task-list-item input { - appearance: none; - -webkit-appearance: none; - width: 1.3rem; - height: 1.3rem; - position: absolute; - top: 3px; - left: -22px; - outline: 0; - cursor: pointer; - z-index: 1; -} - -.my-theme .task-list-item input::before { - content: ""; - display: block; - position: absolute; - top: -2px; - left: 18px; - width: 100%; - height: 100%; - border-radius: 50%; - border: 1px solid var(--element-color-deep, #ffa531); - background: #fff; - transition: all 0.4s cubic-bezier(0.5, 1.6, 0.4, 0.7); - box-sizing: border-box; -} - -.my-theme .task-list-item input::after { - content: ""; - display: block; - position: absolute; - top: 40%; - left: 138%; - width: 0.35rem; - height: 0.65rem; - border: solid #fff; - border-width: 0 2.5px 2.5px 0; - transform: translate(-50%, -60%) rotate(45deg) scale(1); - transition: all 0.3s cubic-bezier(0.5, 1.6, 0.4, 0.7); - opacity: 0; -} - -.my-theme .task-list-item input:checked::before { - background: var(--element-color, #ffc000); - border-color: var(--element-color, #ffc000); - transform: scale(1.05); - animation: task-pulse 0.4s forwards; -} - -@keyframes task-pulse { - 0% { - transform: scale(1); - } - - 50% { - transform: scale(1.15); - } - - 100% { - transform: scale(1); - } -} - -.my-theme .task-list-item input:checked::after { - opacity: 1; - transform: translate(-50%, -60%) rotate(45deg) scale(1); -} - -.my-theme .task-list-item input[type="checkbox"] + p span, -.my-theme .task-list-item input[type="checkbox"] + span { - position: relative; - display: inline; - -webkit-box-decoration-break: clone; - box-decoration-break: clone; - transition: color 0.4s ease; - background-image: linear-gradient(currentColor, currentColor); - background-position: 0 50%; - background-size: 0 1.5px; - background-repeat: no-repeat; - transition: background-size 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s; -} - -.my-theme .task-list-item input[type="checkbox"]:checked + p span, -.my-theme .task-list-item input[type="checkbox"]:checked + span { - color: #bbb; - background-size: 100% 1.5px; -} - -.my-theme li.task-list-item { - position: relative; -} - -.my-theme blockquote { - position: relative; - margin: 20px 0; - padding: 18px 20px 18px 48px; - background-color: var(--element-color-soo-shallow); - border: none; - border-radius: 16px; - color: #555; - line-height: 1.6; - transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease; -} - -.my-theme blockquote::before { - content: "✨"; - position: absolute; - left: 16px; - top: 18px; - font-size: 20px; - line-height: 1; - // font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; -} - -.my-theme blockquote p { - color: #555; - margin-bottom: 0.5em; -} - -.my-theme blockquote p:last-child { - margin-bottom: 0; -} - -// .my-theme blockquote:hover { -// transform: scale(1.02); -// } - -.my-theme a { - color: #333; - text-decoration: none; - font-weight: 500; - padding: 2px 4px; - margin: 0 -2px; - border-radius: 4px; - background: 0 0; - border-bottom: none; - transition: all 0.2s ease; -} - -.my-theme p a:not(.md-toc-inner)::before { - content: ""; - display: inline-block; - width: 1em; - height: 1em; - margin-right: 2px; - vertical-align: -0.15em; - background-color: var(--element-color); - -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M477.934459 330.486594A50.844091 50.844091 0 0 1 406.752731 258.796425L512 152.532274a254.220457 254.220457 0 0 1 359.467726 359.467726L762.66137 618.772592a50.844091 50.844091 0 1 1-71.690168-71.690169l106.772591-106.772592a152.532274 152.532274 0 0 0-215.578947-215.578947z m70.164846 361.501489A50.844091 50.844091 0 1 1 619.789474 762.66137l-107.281033 107.281033A254.220457 254.220457 0 0 1 152.532274 512L259.813307 406.752731a50.844091 50.844091 0 1 1 72.19861 69.656405l-107.789474 107.281033a152.532274 152.532274 0 0 0 215.578947 215.578947z m-126.601788-16.77855a50.844091 50.844091 0 1 1-71.690168-71.690169l251.678252-251.678252a50.844091 50.844091 0 0 1 71.690169 71.690169z'/%3E%3C/svg%3E") no-repeat center/contain; - mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M477.934459 330.486594A50.844091 50.844091 0 0 1 406.752731 258.796425L512 152.532274a254.220457 254.220457 0 0 1 359.467726 359.467726L762.66137 618.772592a50.844091 50.844091 0 1 1-71.690168-71.690169l106.772591-106.772592a152.532274 152.532274 0 0 0-215.578947-215.578947z m70.164846 361.501489A50.844091 50.844091 0 1 1 619.789474 762.66137l-107.281033 107.281033A254.220457 254.220457 0 0 1 152.532274 512L259.813307 406.752731a50.844091 50.844091 0 1 1 72.19861 69.656405l-107.789474 107.281033a152.532274 152.532274 0 0 0 215.578947 215.578947z m-126.601788-16.77855a50.844091 50.844091 0 1 1-71.690168-71.690169l251.678252-251.678252a50.844091 50.844091 0 0 1 71.690169 71.690169z'/%3E%3C/svg%3E") no-repeat center/contain; - transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); -} - -.my-theme a:not(.md-toc-inner):hover { - color: var(--element-color-deep); - background: var(--element-color-soo-shallow); -} - -.my-theme a:hover:not(.md-toc-inner)::before { - transform: rotate(180deg); - background-color: var(--element-color-deep); -} - -.my-theme a:visited { - color: var(--element-color-deep); -} - -.my-theme sup a::before { - content: none; -} - -.my-theme mark { - background-color: var(--element-color-so-shallow); - color: inherit; - padding: 2px 6px; - border-radius: 6px; - margin: 0 2px; - position: relative; - transition: all 0.3s ease; - -webkit-box-decoration-break: clone; - box-decoration-break: clone; -} - -.my-theme mark::after, -.my-theme mark::before { - position: absolute; - top: 50%; - transform: translateY(-50%); - color: var(--element-color-deep); - font-weight: 700; - // font-family: "Courier New", monospace; - font-size: 1.1em; - opacity: 0; - pointer-events: none; - transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.my-theme mark::before { - content: "{"; - left: -5px; -} - -.my-theme mark::after { - content: "}"; - right: -5px; -} - -.my-theme mark:hover { - background-color: var(--element-color); - color: #fff; - border-radius: 4px; - padding: 2px 12px; -} - -.my-theme mark:hover::before { - opacity: 1; - left: 3px; -} - -.my-theme mark:hover::after { - opacity: 1; - right: 3px; -} - -.my-theme strong { - color: var(--element-color); - font-weight: 700; - display: inline-block; - transition: transform 0.2s cubic-bezier(0.5, 1.5, 0.5, 1); -} - -.my-theme strong:hover { - transform: translateY(-2px) scale(1.1); - text-shadow: 2px 2px 0 var(--element-color-soo-shallow); -} - -.my-theme mark strong { - color: var(--element-color-deep); -} - -.my-theme mark:hover strong { - color: #fff; - text-shadow: none; - transform: translateY(-2px) scale(1.1); -} - -.my-theme em { - font-style: italic; - color: #555; - text-decoration: none; - padding: 0 2px; - transition: all 0.3s ease; -} - -.my-theme em:hover { - color: var(--element-color); - text-decoration: underline wavy var(--element-color-shallow); - text-underline-offset: 4px; -} - -.my-theme del { - text-decoration: line-through; - text-decoration-color: var(--element-color); - color: #999; - transition: all 0.3s ease; -} - -.my-theme del:hover { - opacity: 0.6; - text-decoration-color: var(--element-color-deep); - cursor: not-allowed; -} - -.my-theme hr { - border: none; - border-top: 3px dashed var(--element-color-shallow); - margin: 30px 0; - opacity: 0.6; - transform: scaleX(0.8); - transition: all 0.4s ease; -} - -.my-theme hr:hover { - transform: scaleX(1); - border-color: var(--element-color); - opacity: 1; -} - -.my-theme p:has(img) { - text-align: center; -} - -.my-theme img { - border-radius: 12px; - display: inline-block; - margin: 15px 5px; - object-fit: contain; - filter: brightness(1) contrast(1); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); - transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); - max-width: 100%; - cursor: zoom-in; -} - -.my-theme p > img:only-child { - display: block; - margin: 20px auto; -} - -.my-theme img:hover { - filter: brightness(1.05) contrast(1.05); - transform: scale(1.01); - box-shadow: 0 12px 30px -4px var(--element-color-soo-shallow); - z-index: 10; -} - -.my-theme figcaption { - display: block; - margin-top: 12px; - font-size: 13px; - color: #888; - text-align: center; - line-height: 1.5; - // font-family: HarmonyOS_Sans_SC, -apple-system, sans-serif; - transition: color 0.3s ease; -} - -.my-theme figure:hover > figcaption, -.my-theme p:hover > img + figcaption { - color: var(--element-color-deep); -} - -pre.md-meta-block { - padding: 30px 20px 20px; - margin: 20px 0; - // font-family: var(--monospace); - font-size: 13px; - color: #555; - line-height: 1.6; - background-color: var(--element-color-soo-shallow); - border: 1.5px dashed var(--element-color); - border-radius: 8px; - position: relative; - transition: all 0.3s ease; -} - -pre.md-meta-block::after { - content: "YAML"; - position: absolute; - top: 0; - right: 20px; - background-color: var(--element-color); - color: #fff; - font-size: 10px; - font-weight: 700; - letter-spacing: 1px; - padding: 3px 10px; - border-radius: 0 0 6px 6px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); - pointer-events: none; -} - -pre.md-meta-block:hover { - // background-color: #fff; - border-style: solid; - border-color: var(--element-color-deep); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); - transform: translateY(-2px); -} - -.my-theme code:not(.md-fencescode) { - // font-family: CascadiaCode, "Lucida Console", Consolas, Courier, monospace; - font-size: 0.9em; - letter-spacing: 0.5px; - color: var(--element-color-linecode); - // background-color: var(--element-color-linecode-background); - padding: 5px 5px; - margin: 0 2px; - border-radius: 6px; - vertical-align: middle; - transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -// .my-theme code:not(.md-fencescode):hover { -// background-color: var(--element-color); -// color: #fff; -// transform: scale(1.05); -// box-shadow: 0 4px 10px var(--element-color-so-shallow); -// text-decoration: none; -// } - -.md-diagram { - background: 0 0 !important; - margin: 20px 0; -} - -// svg[id^="mermaid"] { -// font-family: "Cascadia Code", "HarmonyOS Sans SC", sans-serif !important; -// max-width: 100% !important; -// } - -.node circle, -.node ellipse, -.node path, -.node rect { - fill: var(--element-color-so-shallow) !important; - stroke: var(--primary-color) !important; - stroke-width: 1.5px !important; - transition: all 0.3s ease; -} - -.node polygon { - fill: color-mix(in srgb, var(--element-color-shallow), transparent 50%) !important; - stroke: var(--element-color-deep) !important; - stroke-width: 1.5px !important; -} - -.edgePath .path, -.flowchart-link { - stroke: var(--element-color-deep) !important; - stroke-width: 1.5px !important; - opacity: 0.8 !important; -} - -.marker path, -marker path { - fill: var(--element-color-deep) !important; - stroke: var(--element-color-deep) !important; -} - -.cluster-label text, -.edgeLabel, -.edgeLabel .label, -.edgeLabel div, -.edgeLabel p, -.edgeLabel span, -.labelBkg, -.node .label { - background-color: #fff !important; - color: var(--appui-color-text) !important; - fill: var(--appui-color-text) !important; - font-weight: 500 !important; - text-shadow: 0 0 5px #fff, 0 0 10px #fff !important; -} - -.edgeLabel rect { - fill: #fff !important; - opacity: 0.9 !important; -} - -.labelBkg { - background-color: #fff !important; - opacity: 0.9 !important; - border-radius: 4px; - padding: 0 4px; -} - -.cluster rect { - fill: color-mix(in srgb, var(--element-color-soo-shallow), transparent 50%) !important; - stroke: var(--element-color-shallow) !important; - stroke-dasharray: 4px !important; -} - -.cluster span, -.cluster-label text { - fill: var(--element-color-deep) !important; - color: var(--element-color-deep) !important; - background: 0 0 !important; - font-weight: 700 !important; -} - -.md-fences:not([lang="mermaid"])::before { - content: attr(lang); - // font-family: CascadiaCode, "Lucida Console", Consolas, Courier, monospace; - text-align: right; - padding-right: 15px; - color: #7e7e7e; - display: block; - background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDUwcHgiIGhlaWdodD0iMTMwcHgiPgogIDxlbGxpcHNlIGN4PSI2NSIgY3k9IjY1IiByeD0iNTAiIHJ5PSI1MiIgc3Ryb2tlPSJyZ2IoMjIwLDYwLDU0KSIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJyZ2IoMjM3LDEwOCw5NikiLz4KICA8ZWxsaXBzZSBjeD0iMjI1IiBjeT0iNjUiIHJ4PSI1MCIgcnk9IjUyIiAgc3Ryb2tlPSJyZ2IoMjE4LDE1MSwzMykiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0icmdiKDI0NywxOTMsODEpIi8+CiAgPGVsbGlwc2UgY3g9IjM4NSIgY3k9IjY1IiByeD0iNTAiIHJ5PSI1MiIgIHN0cm9rZT0icmdiKDI3LDE2MSwzNykiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0icmdiKDEwMCwyMDAsODYpIi8+Cjwvc3ZnPg==); - height: 32px; - width: 100%; - background-size: 40px; - background-repeat: no-repeat; - background-color: #f8f8f8; - border-radius: 5px 5px 0 0; - background-position: 6px 11px; - margin-bottom: 0; -} - -.CodeMirror-wrap .CodeMirror-scroll { - overflow-x: auto; -} - -.md-fences { - position: relative; - z-index: 1; - overflow: visible; -} - -.md-fences.md-focus { - z-index: 100; -} - -.md-fences .cm-s-inner.CodeMirror { - margin-top: 0; -} - -.cm-s-inner.CodeMirror { - padding: 20px 12px 12px 20px; - color: #4f5467; - // font-family: CascadiaCode, "Lucida Console", Consolas, Courier, monospace; - border-radius: 10px; - background-color: #fa0303; - line-height: 1.6rem; -} - -.CodeMirror-gutters { - border-right: 1px solid #9d9d9d52; - background: inherit; - white-space: nowrap; -} - -pre.CodeMirror-line { - padding: 0 1.2rem; -} - -.CodeMirror-linenumber { - padding: 0 3px 0 5px; - text-align: right; - color: #a3a3a3; -} - -.cm-s-inner.CodeMirror { - background: #f8f8f8; - border-radius: 0 0 5px 5px; - padding: 24px 12px 12px 12px; - page-break-before: auto; - line-height: 1.8rem; -} - -.md-rawblock .md-rawblock-tooltip { - inset: auto 0.3rem auto auto; - transform: translateY(-120%); -} - -.cm-keyword { - color: #a626a4 !important; - font-weight: 700 !important; -} - -.cm-variable { - color: #b92121 !important; -} - -.cm-tag { - color: var(--color-cm-keyword) !important; - font-weight: 700 !important; -} - -.cm-variable-2, -.cm-variable-3 { - color: #7aadad !important; - font-weight: 700 !important; -} - -.cm-def { - color: #c18401 !important; -} - -.cm-attribute { - color: #8f6aa8 !important; -} - -.cm-comment, -.md-comment, -.md-meta { - color: #9a9a9a !important; -} - -.cm-string { - color: #50a14f !important; - font-variant-ligatures: common-ligatures !important; -} - -.cm-link { - color: #e46918 !important; -} - -.cm-type { - color: #626161; -} - -.cm-property { - color: #800a84 !important; -} - -.cm-tag:not(.cm-bracket) { - font-weight: 700 !important; -} - -.cm-operator { - color: #0abe00 !important; -} - -.cm-number { - color: #1694b6 !important; -} - -.cm-meta { - color: #4078f2 !important; - font-weight: 700 !important; -} - -.cm-builtin { - color: #fa6060 !important; -} - -kbd { - display: inline-block; - min-width: 1.6em; - text-align: center; - padding: 3px 6px; - margin: 0 4px; - // font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 0.9em; - line-height: 1.4; - font-weight: 600; - border-radius: 4px; - // background-color: #fff; - color: var(--element-color-deep); - border: 1px solid var(--element-color); - border-bottom-width: 3px; - box-shadow: 0 2px 0 var(--element-color-so-shallow); - transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1); - transform: translateY(0); -} - -kbd:hover { - border-bottom-width: 1px; - transform: translateY(2px); - background-color: var(--element-color-soo-shallow); - box-shadow: 0 0 0 transparent; - color: var(--element-color-deep); -} - -.my-theme table { - border-collapse: separate; - border-spacing: 0; - width: 100%; - margin: 20px 0; - border: 1px solid var(--element-color-shallow); - border-radius: 8px; - overflow: hidden; - font-size: 14px; - line-height: 1.6; -} - -.my-theme table td, -.my-theme table th { - padding: 8px 12px; - color: #333; - border-right: 1px solid #f0f0f0; - border-bottom: 1px solid #f0f0f0; - transition: all 0.2s ease; -} - -.my-theme table td:last-child, -.my-theme table th:last-child { - border-right: none; -} - -.my-theme table tr:last-child td { - border-bottom: none; -} - -.my-theme table th { - background-color: var(--element-color-soo-shallow); - color: var(--element-color-deep); - font-weight: 700; - white-space: nowrap; -} - -.my-theme table tbody tr:hover td { - background-color: var(--element-color-soo-shallow); -} - -.my-theme table tbody td:hover { - background-color: var(--element-color-soo-shallow); - color: var(--element-color-deep); - box-shadow: inset 0 0 0 1px var(--element-color-shallow); - cursor: default; -} - -.my-theme .footnote-word { - font-weight: 400; - color: #595959; -} - -.my-theme .footnote-ref { - font-weight: 400; - color: #595959; -} - -.my-theme .footnote-item em { - font-size: 14px; - color: #595959; - display: block; - background: 0 0; -} - -.my-theme sup.md-footnote { - font-size: 9px; - padding: 1px 5px; - top: -11px; - left: 3px; - background-color: rgba(238, 238, 238, 0.7); - color: #555; - border-radius: 50%; - cursor: pointer; -} - -.md-alert { - padding: 5px 10px; - margin-bottom: 16px; - color: #555; - border: none !important; - border-radius: 12px; - position: relative; - overflow: hidden; - transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.3s ease; -} - -.md-alert:hover { - transform: scale(1.01) translateY(-2px); - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); - z-index: 1; -} - -.md-alert-text-container { - display: inline-flex; - align-items: center; - background-color: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(2px); - padding: 2px 10px; - border-radius: 50px; - font-weight: 700; - font-size: 14px; - margin-bottom: 6px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); - position: relative; - z-index: 2; -} - -.md-alert-text-container::after { - margin-right: 0; -} - -.md-alert::after { - content: ""; - position: absolute; - right: -10px; - bottom: -12px; - // font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; - font-size: 64px; - line-height: 1; - opacity: 0.12; - transform: rotate(-15deg); - pointer-events: none; - z-index: 0; - transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.md-alert:hover::after { - transform: rotate(0) scale(1.1); - opacity: 0.2; - right: 0; - bottom: -4px; -} - -.md-alert-text svg { - fill: currentColor; - position: relative; - top: 1px; - margin-right: 5px; - width: 1em; - height: 1em; -} - -.md-alert.md-alert-note { - background-color: rgba(108, 92, 231, 0.1); -} - -.md-alert-text-note { - color: #6c5ce7; -} - -.md-alert.md-alert-note:hover { - background-color: rgba(108, 92, 231, 0.15); -} - -.md-alert.md-alert-note::after { - content: "📝"; -} - -.md-alert.md-alert-tip { - background-color: rgba(0, 184, 148, 0.1); -} - -.md-alert-text-tip { - color: #00b894; -} - -.md-alert.md-alert-tip:hover { - background-color: rgba(0, 184, 148, 0.15); -} - -.md-alert.md-alert-tip::after { - content: "💡"; -} - -.md-alert.md-alert-warning { - background-color: rgba(253, 203, 110, 0.15); -} - -.md-alert-text-warning { - color: #e17055; -} - -.md-alert.md-alert-warning:hover { - background-color: rgba(253, 203, 110, 0.2); -} - -.md-alert.md-alert-warning::after { - content: "⚠️"; -} - -.md-alert.md-alert-important { - background-color: rgba(255, 118, 117, 0.12); -} - -.md-alert-text-important { - color: #ff7675; -} - -.md-alert.md-alert-important:hover { - background-color: rgba(255, 118, 117, 0.18); -} - -.md-alert.md-alert-important::after { - content: "📌"; -} - -.md-alert.md-alert-caution { - background-color: rgba(214, 48, 49, 0.08); -} - -.md-alert-text-caution { - color: #d63031; -} - -.md-alert.md-alert-caution:hover { - background-color: rgba(214, 48, 49, 0.12); -} - -.md-alert.md-alert-caution::after { - content: "🔥"; -} - -.md-toc { - margin: 20px; - padding: 30px; - background-color: rgba(255, 255, 255, 0.4); - background-image: radial-gradient(circle at -22% -42%, var(--element-color-so-shallow), transparent 42%), radial-gradient(circle at 100% 170%, var(--element-color-shallow), transparent 42%); - background-repeat: no-repeat; - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.6); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05); - border-radius: 16px; - // font-family: HarmonyOS_Sans_SC, -apple-system, sans-serif; - font-size: 15px; - color: #555; - position: relative; - overflow: hidden; - transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; -} - -.md-toc:hover { - transform: translateY(-3px); - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1); -} - -.md-toc:before { - content: "目录"; - display: block; - text-align: center; - // font-family: HarmonyOS_Sans_SC, -apple-system, sans-serif; - font-size: 1.4rem; - font-weight: 700; - color: var(--element-color-deep); - margin-bottom: 25px; - letter-spacing: 2px; - border-bottom: 1px dashed rgba(0, 0, 0, 0.08); - padding-bottom: 15px; -} - -.md-toc-item { - display: block; - line-height: 1.8em; - color: #666; - text-decoration: none; - padding: 6px 15px; - border-radius: 50px; - margin-bottom: 4px; - position: relative; - transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); -} - -.md-toc-item a { - text-decoration: none; - color: inherit; - display: block; - width: 100%; -} - -.md-toc-h1 { - font-weight: 600; - color: #333; - margin-top: 10px; - background: rgba(255, 255, 255, 0.4); -} - -.md-toc-h2 { - margin-left: 1em; - font-size: 0.95rem; -} - -.md-toc-h3 { - margin-left: 2em; - font-size: 0.9rem; - color: #777; -} - -.md-toc-item:hover { - background-color: rgba(255, 255, 255, 0.95); - color: var(--element-color-deep); - padding-left: 20px; - font-weight: 500; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.md-tooltip-hide > span { - display: none; -} - -#typora-sidebar { - height: 100%; - color: var(--text-color); - font-size: 0.92rem; - background-color: var(--bg-color); -} - -#outline-content::-webkit-scrollbar { - width: 5px; -} - -#file-library::-webkit-scrollbar { - width: 5px; -} - -::-webkit-scrollbar-track { - border-radius: 10px; -} - -::-webkit-scrollbar-thumb { - border-radius: 10px; - background: var(--element-color); -} - -::-webkit-scrollbar-thumb:active { - background: var(--element-color-shallow); -} - -::-webkit-scrollbar { - width: 5px; - height: 8px; -} - -.active-tab-files #info-panel-tab-file .info-panel-tab-border, -.active-tab-outline #info-panel-tab-outline .info-panel-tab-border, -.ty-show-search #info-panel-tab-search .info-panel-tab-border { - border-radius: 10px; - height: 4px; - background-color: var(--appui-color); -} - -.file-node-content { - line-height: 1.2rem; -} - -.file-tree-node.active > .file-node-content { - color: var(--appui-color); -} - -span.file-node-title { - color: var(--appui-color-text); -} - -.file-node-icon { - color: var(--appui-color-icon); - padding-right: 0.2rem; -} - -.file-tree-node.active > .file-node-background { - font-weight: bolder; - border-left: 4px solid var(--appui-color); - border-color: var(--appui-color); -} - -.info-panel-tab-title { - font-weight: bolder; - color: var(--appui-color-text); -} - -#file-library-search-panel { - background-color: #fff; -} - -#file-library-search-input { - border-radius: 3px; - border-color: var(--appui-color); -} - -#file-library-search-input:focus { - border-width: 2px; -} - -#outline-content .outline-h2::after, -#outline-content .outline-h2 > .outline-item::before { - content: none !important; - display: none !important; - border: none !important; - background: 0 0 !important; -} - -#outline-content .outline-label { - border: none !important; - background: 0 0 !important; - padding-left: 0 !important; - margin: 0 !important; -} - -#outline-content .outline-item { - display: flex !important; - align-items: center !important; - width: fit-content; - max-width: 100%; - padding: 6px 12px; - margin-bottom: 2px; - color: inherit; - cursor: pointer; - text-decoration: none; - border-radius: 50px; - border: none; - outline: 0; - transition: background-color 0.2s ease, color 0.2s ease, padding-right 0.2s ease, box-shadow 0.2s ease; - position: relative; - line-height: 1.6; -} - -#outline-content .outline-expander { - flex-shrink: 0; - display: inline-flex; - align-items: center; - justify-content: center; - margin-right: 4px; - color: inherit; -} - -#outline-content .outline-label { - flex: 1; - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -#outline-content .outline-h1 { - margin-top: 10px; - margin-bottom: 4px; -} - -#outline-content .outline-h2, -#outline-content .outline-h3, -#outline-content .outline-h4, -#outline-content .outline-h5, -#outline-content .outline-h6 { - border-left: 1.5px solid rgba(0, 0, 0, 0.06); - margin-left: 22px; - padding-left: 8px; -} - -#outline-content .outline-h1 > .outline-item { - font-size: larger; - font-weight: 700; - color: var(--element-color-deep); -} - -#outline-content .outline-item:hover { - background-color: var(--element-color-soo-shallow); - color: var(--element-color-deep); - margin-left: 0 !important; - margin-right: 0 !important; - border-left: none !important; - border-right: none !important; -} - -div.outline-item-active { - background-color: var(--element-color) !important; - color: #fff !important; - font-weight: 600; - box-shadow: 0 4px 10px var(--element-color-so-shallow); - transform: none; - padding-right: 30px !important; - padding-left: 12px !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: none !important; -} - -#outline-content .outline-item-active::after { - content: "✦"; - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - font-size: 10px; - color: rgba(255, 255, 255, 0.9); - display: block !important; - z-index: 10; - animation: outline-twinkle 1.5s infinite alternate; -} - -@keyframes outline-twinkle { - from { - opacity: 0.7; - transform: translateY(-50%) scale(0.9); - } - - to { - opacity: 1; - transform: translateY(-50%) scale(1.1); - } -} - -.my-theme-content .outline-content::before { - content: "目录"; - font-size: 20px; - font-weight: 700; - position: absolute; - top: 22px; - left: 15px; - z-index: -1; -} - -.my-sidebar .outline-content { - padding-top: 60px !important; - padding-left: 10px !important; - height: 100%; - overflow-y: auto; - padding-bottom: 30px; - box-sizing: border-box; -} - -.my-sidebar .outline-content::before { - content: "目录"; - font-size: 20px; - font-weight: 700; - color: var(--element-color-deep); - position: absolute; - top: 20px; - left: 24px; - z-index: 10; - letter-spacing: 2px; -} - -.my-sidebar .outline-h1 { - margin-top: 10px !important; - margin-bottom: 4px !important; - margin-left: 0 !important; -} - -.my-sidebar .outline-h1 > .outline-item { - font-size: 1.1em !important; - font-weight: 700 !important; - color: var(--element-color-deep) !important; -} - -.my-sidebar .outline-h2, -.my-sidebar .outline-h3, -.my-sidebar .outline-h4, -.my-sidebar .outline-h5, -.my-sidebar .outline-h6 { - border-left: 1.5px solid rgba(0, 0, 0, 0.06) !important; - margin-left: 15px !important; - padding-left: 8px !important; - list-style: none !important; -} - -.my-sidebar .outline-item { - display: flex !important; - align-items: center !important; - width: fit-content !important; - max-width: 95% !important; - padding: 6px 12px !important; - margin: 2px 0 !important; - color: inherit !important; - cursor: pointer; - text-decoration: none !important; - border-radius: 50px !important; - border: none !important; - transition: all 0.2s ease; - line-height: 1.6; - overflow: visible !important; -} - -.my-sidebar .outline-label { - padding: 0 !important; - margin: 0 !important; - border: none !important; - text-decoration: none !important; - color: inherit !important; - flex: 0 1 auto !important; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.my-sidebar .outline-expander { - width: 16px !important; - text-align: center; - margin-right: 4px; - flex-shrink: 0; -} - -.my-theme .outline-expander::before { - content: "▸" !important; - // font-family: Arial, sans-serif !important; - font-size: 14px !important; - color: #999; - top: 0 !important; - display: inline-block; - transition: transform 0.2s; -} - -.my-theme .outline-expander:hover::before, -.my-theme .outline-item-open > .outline-item > .outline-expander::before { - content: "▾" !important; - color: var(--element-color-deep); -} - -.my-theme .outline-item-single .outline-expander::before { - display: none !important; -} - -.my-sidebar .outline-item:hover { - background-color: var(--element-color-soo-shallow) !important; - color: var(--element-color-deep) !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: none !important; -} - -.my-sidebar .outline-item-wrapper.outline-item-active > .outline-item { - background-color: var(--element-color) !important; - color: #fff !important; - font-weight: 600 !important; - box-shadow: 0 4px 10px var(--element-color-so-shallow); - padding-right: 12px !important; - padding-left: 12px !important; - margin-left: 0 !important; - border: none !important; -} - -.my-sidebar .outline-item-wrapper.outline-item-active > .outline-item .outline-label { - color: #fff !important; -} - -.my-sidebar .outline-item-wrapper.outline-item-active > .outline-item .outline-expander::before { - color: rgba(255, 255, 255, 0.8) !important; -} - -.my-sidebar .outline-item-wrapper.outline-item-active > .outline-item::after { - content: "✦"; - position: static !important; - transform: none !important; - margin-left: 8px !important; - flex-shrink: 0; - display: inline-block !important; - line-height: 1; - font-size: 10px; - // font-family: Arial, sans-serif; - color: rgba(255, 255, 255, 0.9); - z-index: 10; - animation: outline-twinkle 1.5s infinite alternate; -} - -@media screen { - body.my-theme { - background-color: transparent; - } -} - -.my-sidebar { - position: fixed; - margin-top: 0 !important; - top: 10px; - bottom: 10px; - left: 20px; - width: 320px; - background-color: var(--glass-bg-color); - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.6); - border-radius: 20px; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.13); - z-index: 100; - overflow: hidden; - color: #555; - // font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif; -} - -.my-sidebar .outline-content { - padding-top: 60px !important; - padding-left: 15px !important; - padding-right: 5px !important; - height: 100%; - overflow-y: auto; - scrollbar-width: none; -} - .my-theme { - // margin-left: 350px; - padding: 10px !important; - // margin-top: 20px; - // min-height: calc(100vh - 20px); - // // background-color: #fff; - border-radius: 20px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - // padding: 60px 80px; - // width: auto; - // max-width: none; - - *{ - cursor: pointer; - } - code { - cursor: text !important; - } -} - - -.my-theme pre code, -.my-theme .md-editor-code-head{ - background-color: unset !important; -} - -@media screen and (max-width: 800px) { - .my-sidebar { - display: none; - } - - .my-theme .my-theme { - margin: 0; - border-radius: 0; - width: 100%; - box-shadow: none; - padding: 20px; - } -} - -@media print { - @page { - margin: 10mm; - size: A4; - } - - body { - background-color: transparent !important; - } - - body { - margin: 0 !important; - width: 100% !important; - } - - .my-theme { - margin: 0 auto !important; - padding: 0 !important; - width: 100% !important; - max-width: 100% !important; - border: none !important; - box-shadow: none !important; - background: 0 0 !important; - } - - * { - -webkit-print-color-adjust: exact !important; - print-color-adjust: exact !important; - - } - - .my-theme::before { - display: block !important; - opacity: 0.1 !important; - top: 0 !important; - left: 0 !important; - width: 100% !important; - height: 100% !important; - -webkit-mask-image: var(--bg-style) !important; - mask-image: var(--bg-style) !important; - background-color: var(--element-color) !important; - pointer-events: none; - z-index: -1; - } - - p { - line-height: 1.5rem; - } - - figure, - pre { - page-break-inside: avoid; - } - - ol, - ul { - page-break-inside: auto !important; - break-inside: auto !important; - } - - li { - page-break-inside: avoid; - break-inside: avoid; - } - - pre { - page-break-inside: auto !important; - break-inside: auto !important; - white-space: pre-wrap; - } - - blockquote { - page-break-inside: auto !important; - break-inside: auto !important; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - page-break-after: avoid !important; - break-after: avoid !important; - page-break-inside: avoid !important; - } - - p { - orphans: 2; - widows: 2; - } - - .md-toc { - background-image: none; - } -} - -@media print { - .page-break { - page-break-after: always; - break-after: always; - height: 0; - display: block; - visibility: hidden; - } -} diff --git a/src/components/Login.vue b/src/components/Login.vue index 7a8731f..b84203a 100644 --- a/src/components/Login.vue +++ b/src/components/Login.vue @@ -1,65 +1,125 @@ -