Merge pull request #18 from terwer/dev

feat: #1 代码块样式优化

.gitignore

@@ -26,7 +26,6 @@ dist-cjs
 *.sw?
 
 # Cache
-.sass-cache
 *.css
 *.css.map
 package

README.md

@@ -95,8 +95,8 @@ Vite + React + TypeScript + SWC
 │   ├── zhi
 │   │   ├── Lifecycle.ts
 │   │   └── bootstrap.ts
-│   ├── zhi-theme.sass               zhi 核心样式sass源码
-│   └── zhi-theme.ts                 zhi 核心加载逻辑
+│   ├   └── zhi-theme.styl           zhi 核心样式stylus源码
+│   └   └── zhi-theme.ts             zhi 核心加载逻辑
 ├── theme.css                        思源笔记样式入口
 ├── theme.js                         思源笔记脚本入口
 ├── theme.json

package.json

@@ -13,7 +13,7 @@
     "preview": "vite preview",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "new": "python script/version.py 0.0.1"
+    "new": "python script/version.py 1.0.0"
   },
   "dependencies": {
     "react": "^18.2.0",

src/adaptor/rm/rm-adaptor.styl

@@ -0,0 +1,4 @@
+// zhi
+@require "../../../theme.styl"
+
+// rm-adaptor

src/styles/zhi/widgets/code-block.styl

@@ -0,0 +1,79 @@
+/* -------------------------------------------------代码块样式--------------------------------------------------- */
+.code-block
+  --terwer-code-tab-bg: #f3f5f7
+  border: .5px solid var(--b3-border-color) !important
+  border-radius: 5px !important
+  padding-top: 32px !important
+  background: var(--terwer-code-tab-bg)
+
+/* 代码块编辑区域/正文内容 */
+.b3-typography div.hljs,
+.protyle-wysiwyg div.hljs
+  padding: 8px
+  font-family: var(--b3-font-family-code)
+  border-top: 0.5px solid var(--b3-border-color)
+  border-radius: 0 0 5px 5px !important
+
+/* 设置顶部三个mac按钮样式 */
+.code-block::after
+  content: " "
+  position: absolute
+  background: #fa625c
+  box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b
+  border-radius: var(--b3-border-radius-round)
+  top: 10px
+  left: 8px
+  height: 12px
+  width: 12px
+  z-index: 1
+
+/*  ————————————————————————————————————代码块行数——————————————————————————————————*/
+.protyle-linenumber__rows
+  margin-top: 32px !important
+  padding: 4px
+  background-color: var(--b3-theme-background) !important
+  margin-bottom: 0px
+  font-family: var(--b3-font-family-code)
+  border-top-left-radius: 4px
+
+
+/* 代码块行数的文字颜色 */
+.protyle-linenumber__rows span::before
+  color: rgba(128, 128, 128, 0.5)
+
+
+/* 代码块的语言代码 */
+.b3-typography .code-block .protyle-action .protyle-action__language,
+.protyle-wysiwyg .code-block .protyle-action .protyle-action__language
+  margin-top: 0
+  position: absolute
+  right: 3.5em
+  border-radius: 1px
+  opacity: 1 !important
+  font-family: var(--b3-font-family-code)
+
+.b3-typography .code-block .protyle-action .protyle-action__language::after,
+.protyle-wysiwyg .code-block .protyle-action .protyle-action__language::after
+  content: "›"
+  font-family: var(--b3-font-family-code)
+  color: #80808080
+  opacity: 1
+
+/* ————————————————————————————————集市里边代码块的主题—————————————————————————————— */
+code.hljs
+  border: 1px solid var(--b3-border-color1)
+
+/* 复制和设置按钮样式 */
+.b3-typography .code-block .protyle-action .protyle-icon,
+.b3-typography .code-block .protyle-action .protyle-action__language,
+.protyle-wysiwyg .code-block .protyle-action .protyle-icon,
+.protyle-wysiwyg .code-block .protyle-action .protyle-action__language
+  opacity: 1 !important
+  background-color: transparent !important
+
+.b3-typography .code-block .protyle-action .protyle-icon svg,
+.b3-typography .code-block .protyle-action .protyle-action__language svg,
+.protyle-wysiwyg .code-block .protyle-action .protyle-icon svg,
+.protyle-wysiwyg .code-block .protyle-action .protyle-action__language svg
+  color: gray
+/* -------------------------------------------------代码块样式 END--------------------------------------------------- */

src/styles/zhi/widgets/print-page.styl

@@ -0,0 +1,19 @@
+/* -------------------------------------------------打印页面适配--------------------------------------------------- */
+#preview
+  /* 打印页面代码块适配 */
+
+  .protyle-action__language
+    right: 0.2rem !important
+
+  .protyle-action__language:after
+    display: none !important
+
+  .protyle-action__copy
+    display: none !important
+//.code-block
+//  --terwer-code-tab-bg: #f3f5f7
+//  border: .5px solid var(--b3-border-color) !important
+//  border-radius: 5px !important
+
+//.b3-typography div.hljs, .protyle-wysiwyg div.hljs
+//  background-color: #f8f9fa !important

src/styles/zhi/zhi-dark.styl

@@ -0,0 +1,17 @@
+/* -------------------------------------------------暗黑模式适配--------------------------------------------------- */
+//html
+//  &[data-theme-mode="dark"]
+//    $body-bg: #27272b
+//    $main-bg: #1e1e22
+//    $sidebar-bg: rgba(30, 30, 34, 0.8)
+//    $blur-bg: rgba(30, 30, 34, 0.8)
+//    $custom-block-bg: #27272b
+//    $text-color: #9b9baa
+//    $text-lighten-color: #0085ad
+//    $border-color: #30363d
+//    $code-bg: #252526
+//    $code-color: #fff
+
+body
+  --zhi-text-color: $text-color
+  --zhi-body-bg: $body-bg

src/styles/zhi/zhi-green.styl

@@ -0,0 +1,17 @@
+/* -------------------------------------------------护眼模式适配--------------------------------------------------- */
+//html
+//  &[data-theme-mode-zhi="green"]
+//    $body-bg: #ececcc
+//    $main-bg: #f5f5d5
+//    $sidebar-bg: rgba(245, 245, 213, 0.8)
+//    $blur-bg: rgba(245, 245, 213, 0.9)
+//    $custom-block-bg: #ececcc
+//    $text-color: #704214
+//    $text-lighten-color: #963
+//    $border-color: rgba(0, 0, 0, 0.15)
+//    $code-bg: #282c34
+//    $code-color: #fff
+
+body
+  --zhi-text-color: $text-color
+  --zhi-body-bg: $body-bg

src/styles/zhi/zhi-light.styl

@@ -0,0 +1,17 @@
+/* -------------------------------------------------浅色模式适配--------------------------------------------------- */
+//html
+//  &[data-theme-mode="light"]
+//    $body-bg: #f4f4f4
+//    $main-bg: #fff
+//    $sidebar-bg: hsla(0, 0%, 100%, 0.8)
+//    $blur-bg: hsla(0, 0%, 100%, 0.9)
+//    $custom-block-bg: #f1f1f1
+//    $text-color: #00323c
+//    $text-lighten-color: #0085ad
+//    $border-color: rgba(0, 0, 0, 0.12)
+//    $code-bg: #f6f6f6
+//    $code-color: #525252
+
+body
+  --zhi-text-color: $text-color
+  --zhi-body-bg: $body-bg