From c60f2a08971e5cc5636f48fcbd2adea169af505b Mon Sep 17 00:00:00 2001 From: sumruler Date: Wed, 18 Dec 2024 19:25:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A0=87=E9=A2=98=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E7=BC=96=E5=8F=B7=E7=9A=84=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 +++-- phycat-dark.css | 9 +++++ phycat-green.css | 8 ++++ phycat-mint.css | 8 ++++ phycat-orange.css | 8 ++++ phycat-plusblue.css | 8 ++++ phycat-purple.css | 8 ++++ phycat-red.css | 8 ++++ phycat/phycat.dark.css | 55 +++++++++++++++++++++++++++ phycat/phycat.light.css | 82 +++++++++++++++++++++++++++++++++++++++-- 10 files changed, 195 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 5ba3210..aea63fc 100644 --- a/README.md +++ b/README.md @@ -32,19 +32,20 @@ Phycat是我精心制作的一款Typora主题。主题经过精心打磨，听 导出的HTML页面不仅与软件内样式完全相同，而且也专门写了HTML页面侧边大纲的样式，一样的辅助线，一样的小子弹头。你可以点击下面的链接查看导出HTML页面的效果，它们都是在Typora软件中直接导出的。 | 主题系列 | 主题链接 | -| -------- | :----------------------------------------------------------- | + | -------- | :----------------------------------------------------------- | | 亮色主题 | [沉稳红](https://sumruler.github.io/typora-theme-phycat/phycat-red.html)、[物理猫橙](https://sumruler.github.io/typora-theme-phycat/phycat-orange.html)、[前端绿](https://sumruler.github.io/typora-theme-phycat/phycat-green.html)、[薄荷青](https://sumruler.github.io/typora-theme-phycat/phycat-mint.html)、[普鲁士蓝](https://sumruler.github.io/typora-theme-phycat/phycat-plusblue.html)、[魅惑紫](https://sumruler.github.io/typora-theme-phycat/phycat-purple.html) | -| 暗色主题 | [普鲁士蓝](https://sumruler.github.io/typora-theme-phycat/phycat-dark.html) | + | 暗色主题 | [普鲁士蓝](https://sumruler.github.io/typora-theme-phycat/phycat-dark.html) | + **每款主题都可以设置开启网格背景，具体方法可以查看下面的Q&A。** - + 这里特别推荐沉稳红、薄荷蓝、普鲁士蓝。 ## 主题截图 ### 正文 -![正文](https://cdn.phycat.cn/localediter/202412131127887.jpg) +![正文](https://cdn.phycat.cn/localediter/202412131700150.png) ### 标题 diff --git a/phycat-dark.css b/phycat-dark.css index 73eeba2..191a31e 100644 --- a/phycat-dark.css +++ b/phycat-dark.css @@ -15,6 +15,15 @@ --h6-r-graphic: url("data:image/svg+xml;utf8,") no-repeat center; + + /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/ + --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) ". "; */ + /* 暗色主题 必须 */ --bg-color:#222222; --text-color:#c5c5c5; diff --git a/phycat-green.css b/phycat-green.css index 1bcbf0b..f09ca1c 100644 --- a/phycat-green.css +++ b/phycat-green.css @@ -12,6 +12,14 @@ /* 是否开启网格背景？1 是；0 否 */ --bg-grid: 0; + /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/ + --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) ". "; */ + /* 主题颜色 */ --head-title-color: #11aa63; diff --git a/phycat-mint.css b/phycat-mint.css index ee0dece..482d137 100644 --- a/phycat-mint.css +++ b/phycat-mint.css @@ -12,6 +12,14 @@ /* 是否开启网格背景？1 是；0 否 */ --bg-grid: 0; + /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/ + --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) ". "; */ + /* 主题颜色 */ --head-title-color: #3db8bf; diff --git a/phycat-orange.css b/phycat-orange.css index 8b9ce51..67fec8c 100644 --- a/phycat-orange.css +++ b/phycat-orange.css @@ -12,6 +12,14 @@ /* 是否开启网格背景？1 是；0 否 */ --bg-grid: 0; + /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/ + --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) ". "; */ + /* 主题颜色 */ --head-title-color: #ffc000; diff --git a/phycat-plusblue.css b/phycat-plusblue.css index a8b32b4..e448fe3 100644 --- a/phycat-plusblue.css +++ b/phycat-plusblue.css @@ -12,6 +12,14 @@ /* 是否开启网格背景？1 是；0 否 */ --bg-grid: 0; + /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/ + --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) ". "; */ + /* 主题颜色 */ --head-title-color: #5c7aaa; diff --git a/phycat-purple.css b/phycat-purple.css index 85beaa1..60f2043 100644 --- a/phycat-purple.css +++ b/phycat-purple.css @@ -12,6 +12,14 @@ /* 是否开启网格背景？1 是；0 否 */ --bg-grid: 1; + /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/ + --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) ". "; */ + /* 主题颜色 */ --head-title-color: #cfacfa; diff --git a/phycat-red.css b/phycat-red.css index d385549..c41ed44 100644 --- a/phycat-red.css +++ b/phycat-red.css @@ -12,6 +12,14 @@ /* 是否开启网格背景？1 是；0 否 */ --bg-grid: 0; + /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/ + --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) ". "; */ + /* 主题颜色 */ --head-title-color: #aa1141; diff --git a/phycat/phycat.dark.css b/phycat/phycat.dark.css index c76c621..cf2f425 100644 --- a/phycat/phycat.dark.css +++ b/phycat/phycat.dark.css @@ -225,6 +225,61 @@ h6:after { vertical-align: inherit; } +/* 标题自动编号 */ +#write { + counter-reset: h1; +} + +h1 { + counter-reset: h2; +} + +h2 { + counter-reset: h3; +} + +h3 { + counter-reset: h4; +} + +h4 { + counter-reset: h5; +} + +h5 { + counter-reset: h6; +} + +#write h1:before { + counter-increment: h1; + content: var(--autonum-h1); +} + +#write h2:before { + counter-increment: h2; + content: var(--autonum-h2); +} + +#write h3 > span::before { + counter-increment: h3; + content: var(--autonum-h3); +} + +#write h4 > span::before { + counter-increment: h4; + content: var(--autonum-h4); +} + +#write h5 > span::before { + counter-increment: h5; + content: var(--autonum-h5); +} + +#write h6 > span::before { + counter-increment: h6; + content: var(--autonum-h6); +} + /* 列表 */ ::marker { color: var(--dark-text-color); diff --git a/phycat/phycat.light.css b/phycat/phycat.light.css index 6828d04..c37de8f 100644 --- a/phycat/phycat.light.css +++ b/phycat/phycat.light.css @@ -22,7 +22,7 @@ } @font-face { font-family: "CascadiaCode"; - src: url('Cascadia-Code-Regular.ttf'); + src: url("Cascadia-Code-Regular.ttf"); } html { @@ -45,7 +45,11 @@ html { p { line-height: 1.5rem; /*设置打印内容的行高*/ } - ol,ul,figure,pre { /*设置一些元素不会被分页截断对应有序列表、无序列表、图片(表格)、代码块*/ + ol, + ul, + figure, + pre { + /*设置一些元素不会被分页截断对应有序列表、无序列表、图片(表格)、代码块*/ page-break-inside: avoid; break-inside: avoid; } @@ -62,7 +66,16 @@ html { word-break: break-word; word-wrap: break-word; text-align: left; - background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) calc(3%*var(--bg-grid)), rgba(0, 0, 0, 0) calc(3%*var(--bg-grid))), linear-gradient(360deg, rgba(50, 0, 0, 0.05) calc(3%*var(--bg-grid)), rgba(0, 0, 0, 0) calc(3%*var(--bg-grid))); + background-image: linear-gradient( + 90deg, + rgba(50, 0, 0, 0.05) calc(3% * var(--bg-grid)), + rgba(0, 0, 0, 0) calc(3% * var(--bg-grid)) + ), + linear-gradient( + 360deg, + rgba(50, 0, 0, 0.05) calc(3% * var(--bg-grid)), + rgba(0, 0, 0, 0) calc(3% * var(--bg-grid)) + ); background-size: 20px 20px; background-position: center center; } @@ -209,6 +222,66 @@ h6:after { vertical-align: inherit; } +/* 标题自动编号 */ +#write { + counter-reset: h1; +} + +h1 { + counter-reset: h2; +} + +h2 { + counter-reset: h3; +} + +h3 { + counter-reset: h4; +} + +h4 { + counter-reset: h5; +} + +h5 { + counter-reset: h6; +} + +#write h1:before { + counter-increment: h1; + content: var(--autonum-h1); +} + +#write h2:before { + counter-increment: h2; + content: var(--autonum-h2); + color: var(--head-title-h2-color); +} + +#write h3 > span::before { + counter-increment: h3; + content: var(--autonum-h3); + color: var(--element-color); +} + +#write h4 > span::before { + counter-increment: h4; + content: var(--autonum-h4); + color: var(--element-color); +} + +#write h5 > span::before { + counter-increment: h5; + content: var(--autonum-h5); + color: var(--element-color); +} + +#write h6 > span::before { + counter-increment: h6; + content: var(--autonum-h6); + color: var(--element-color); +} + /* 列表 */ ::marker { color: var(--element-color-deep); @@ -585,6 +658,7 @@ pre.CodeMirror-line { kbd { padding: 2px 4px; font-size: 90%; + font-weight: bolder; color: var(--element-color-linecode); border: var(--element-color) solid 1px; border-radius: 3px; @@ -689,7 +763,7 @@ kbd:hover { } #file-library::-webkit-scrollbar { - width:5px; + width: 5px; } ::-webkit-scrollbar-track {