🔖 v2.1.0

Achuan-2 · May 10, 2024 · b174f60 · b174f60
1 parent 56da7ca
commit b174f60
Showing 1 changed file with 73 additions and 60 deletions.
diff --git a/style/module/code_block.css b/style/module/code_block.css
@@ -1,67 +1,9 @@
 :root {
-    --custom-code-background: #a3acb0;
+    --custom-code-background: #bfc9ce;
     --custom-code-hover: #5f7b8c;
 }
 
 
-/* 限制代码块高度，设置超过高度，出现滚动条 */
-.protyle-wysiwyg .code-block {
-    max-height: 800px;
-    overflow: auto;
-
-}
-/* 防止因代码行号和代码渲染内容导致出现多重滚动条 */
-.protyle-wysiwyg .hljs,
-.protyle-linenumber__rows {
-    height: max-content;
-}
-
-/* 调整代码块命名、别名等块属性位置 */
-.protyle-wysiwyg .code-block .protyle-attr {
-    top: -2px;
-}
-
-/* 代码块功能按钮：包括代码语言、复制和菜单按钮 */
-.protyle-wysiwyg .code-block .protyle-action {
-    /* 为了代码块复制按钮可以sticky，需要设置高度 */
-    height: 100%;
-    /* 取消top高度，否则会出现代码块会被撑开出现滚动条 */
-    top:0px !important;
-    /* 需要禁止鼠标点击，否则浮在上面代码块上无法点击 */
-    pointer-events: none !important;
-}
-/* 代码块语言 */
-.protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
-    margin-top: 6px;
-    position: absolute;
-    top: 4px;
-/* 由于父元素禁止点击，所以要子元素允许点击 */
-    pointer-events: all !important;
-}
-/* 代码块复制和菜单按钮 */
-.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw {
-    /* 调整位置 */
-    top: 17px;
-    /* 代码块复制按钮sticky，不跟随滚动 */
-    position: sticky;
-    /* 由于父元素禁止点击，所以要子元素允许点击 */
-    pointer-events: all !important;
-}
-/* 代码块复制按钮和菜单按钮的提示文字放在下方 */
-.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw::after {
-    top: 100%;
-    bottom: inherit;
-    margin-top: 5px;
-}
-.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw::before {
-    top: 100%;
-    bottom: inherit;
-}
-
-#preview .protyle-wysiwyg .code-block {
-    max-height: none;
-}
-
 /* 代码块 */
 .protyle-wysiwyg .code-block[fold='1'] .hljs {
     opacity: 0;
@@ -110,6 +52,7 @@
 .protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
     /* 代码语言默认显示 */
     opacity: 1;
+    background: var(--b3-protyle-code-background);
 }
 
 .protyle-wysiwyg .code-block .protyle-action__language {
@@ -170,7 +113,7 @@
 } */
 .protyle-wysiwyg .code-block .protyle-action__copy,
 .protyle-wysiwyg .code-block .protyle-action__menu {
-    background-color: var(--custom-code-background);
+    background-color: #0206056b;
     transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
@@ -229,4 +172,74 @@
 
 .protyle-wysiwyg [data-node-id].li>[data-node-id].code-block:before {
     height: calc(100% + 7px);
+}
+
+
+/* 代码块限制最大行号 */
+/* 限制代码块高度，设置超过高度，出现滚动条 */
+.protyle-wysiwyg .code-block {
+    max-height: 800px;
+    overflow: auto;
+
+}
+
+/* 防止因代码行号和代码渲染内容导致出现多重滚动条 */
+.protyle-wysiwyg .hljs,
+.protyle-linenumber__rows {
+    height: max-content;
+}
+
+/* 调整代码块命名、别名等块属性位置 */
+.protyle-wysiwyg .code-block .protyle-attr {
+    top: -2px;
+}
+
+/* 代码块功能按钮：包括代码语言、复制和菜单按钮 */
+.protyle-wysiwyg .code-block .protyle-action {
+    /* 为了代码块复制按钮可以sticky，需要设置高度 */
+    height: 100%;
+    /* 取消top高度，否则会出现代码块会被撑开出现滚动条 */
+    top: 0px !important;
+    /* 需要禁止鼠标点击，否则浮在上面代码块上无法点击 */
+    pointer-events: none !important;
+}
+
+/* 代码块语言 */
+.protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
+    margin-top: 6px;
+    position: absolute;
+    top: 6px;
+    position: sticky;
+    /* 由于父元素禁止点击，所以要子元素允许点击 */
+    pointer-events: all !important;
+    align-self: flex-start;
+}
+
+/* 代码块复制和菜单按钮 */
+.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw {
+    /* 调整位置 */
+    top: 17px;
+    /* 代码块复制按钮sticky，不跟随滚动 */
+    position: sticky;
+    /* 由于父元素禁止点击，所以要子元素允许点击 */
+    pointer-events: all !important;
+}
+
+/* 代码块复制按钮和菜单按钮的提示文字放在下方 */
+.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw::after {
+    top: 100%;
+    bottom: inherit;
+    margin-top: 5px;
+}
+
+.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw::before {
+    top: 100%;
+    bottom: inherit;
+    rotate: 180deg;
+    margin-top: -4px;
+}
+
+/* 导出pdf取消限制最大高度 */
+#preview .protyle-wysiwyg .code-block {
+    max-height: none;
 }