diff --git a/src/assets/myblog.less b/src/assets/myblog.less new file mode 100644 index 0000000..a616c5a --- /dev/null +++ b/src/assets/myblog.less @@ -0,0 +1,2118 @@ +: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/menuH.vue b/src/components/menuH.vue index 4bd544c..c3769a2 100644 --- a/src/components/menuH.vue +++ b/src/components/menuH.vue @@ -1,11 +1,11 @@