阶段性优化代码结构 1

style/Animation.css

@@ -0,0 +1,31 @@
+@keyframes menu {
+    0% {opacity: 0.13;}
+    50% { transform: scale(1.01);opacity: 0.5;}
+    100% { transform: scale(1);}
+}
+@keyframes item-focus {
+    0% { transform: scale(.01);opacity: 0.5;}
+    100% { transform: scale(1); }
+}
+@keyframes flex-column{
+    0% { transform: scale(1,.86);transform-origin: 0 0 ;opacity: 0;}
+    100% { transform: scale(1,1);transform-origin: 0 0 ;}
+}
+@keyframes tree-list{
+    0% { transform: scale(1,1);transform-origin: 0 0 ;opacity: 0;}
+    33% { transform: scale(1,1.01);transform-origin: 0 0 ;opacity: 0.58;}
+    77% { transform: scale(1,1.01);transform-origin: 0 0 ;opacity: 0.85;}
+    100% { transform: scale(1,1); transform-origin: 0 0 ;}
+}
+
+.layout__wnd--active .layout-tab-bar .item--focus::after{
+	animation: item-focus 0.2s ease-in-out;
+}
+.protyle-util{
+    animation: menu 0.2s ease-in-out;
+}
+/*侧栏展开动画*/
+#layouts>.fn__flex>.fn__flex-column>.fn__flex>div[data-type=wnd]>.layout-tab-container>.fn__flex-column{animation: flex-column  0.13s ease-in-out;}
+.b3-list-item--hide-action{
+    animation: tree-list  0.13s ease-in;
+}

style/CodeBlock.css → style/Block-CodeBlock.css

@@ -1,5 +1,34 @@
-/* -------------------------------------------------代码块样式--------------------------------------------------- */
+/* 代码块样式 */
 
+.code-block {
+    border-radius: 7px !important;
+    background-color: transparent !important;
+    border: 0.1em solid var(--b3-border-color) !important;
+    margin-left: 4px !important;
+}
+/* 代码块主体部分设置 */
+.protyle-reset .hljs,
+.protyle-wysiwyg .hljs, .b3-typography .hljs {
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+    padding-left: 16px;
+    font-family: var(--b3-font-family-code);
+    background-size: 20px 20px;
+    background-image: none !important;
+    background: transparent !important;
+    border-top-right-radius: 4px;
+    /* background-color: var(--b3-theme-background2); */
+    /* z-index: -1; */
+}
+/*  代码块行数 */
+.protyle-linenumber__rows {
+    margin-top: 32px !important;
+    padding: 4px;
+    background-color: transparent !important;
+    margin-bottom: 0px;
+    font-family: var(--b3-font-family-code);
+    border-top-left-radius: 4px;
+}
 
 /* 代码块上方部分设置 */
 .protyle-wysiwyg .code-block,
@@ -77,5 +106,3 @@ code.hljs {
     color: var(--SCColor);
     opacity: 1;
 }
-
-/* -------------------------------------------------代码块样式 END--------------------------------------------------- */

style/Block-Embed.css

@@ -0,0 +1,18 @@
+
+/* 嵌入内容块 embed */
+.protyle-wysiwyg__embed {
+    /* box-shadow: rgba(6, 24, 44, 0.31) 0px 0px 1px 2px, rgba(6, 24, 44, 0.13) 0px 2px 2px -1px inset; */
+    border-radius: 6px;
+    opacity: .86;
+    background: var(--SCC-Gray-HellisePotter);
+    box-shadow: inset 9px 9px 29px #cacfde, inset -9px -9px 29px #f2f7ff;
+}
+.protyle-wysiwyg__embed:hover, .protyle-wysiwyg [data-node-id].sb:hover {
+    box-shadow: rgba(6, 24, 44, 0.31) 0px 0px 1px 2px inset;
+    border-radius: 6px;
+    opacity: 1;
+}
+/* 隐藏 NodeBlockQueryEmbed 左边缘细线 */
+.protyle-wysiwyg [data-node-id].render-node[data-type=NodeBlockQueryEmbed] {
+    border-left: 1px dashed transparent !important;
+}

style/Block-Inline.css

@@ -0,0 +1,119 @@
+/* 行内元氏 */
+
+/* 搜索击中高亮应显著区分于文本背景色 */
+.b3-list mark, .protyle-wysiwyg [data-node-id] span[data-type=search-mark] {
+    background-color: var(--SCC-Green-186-light);
+    color: var(--b3-theme-on-background);
+}
+
+/* 默认颜色加粗样式应当保留原颜色 */
+.b3-typography span[data-type=strong],
+.protyle-wysiwyg span[data-type=strong]
+{
+    color: inherit !important;
+    font-weight: bold;
+}
+
+/* 普通标签tag样式 */
+.protyle-wysiwyg [data-node-id]:not([data-type="NodeHeading"]) span[data-type~=tag] {
+    background-color: var(--SCC-White-light);
+    transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    color: var(--text-focus);
+    border-radius: 5px;
+    position: relative;
+    padding: .1rem .3rem .1rem .1rem;
+    font-size: 85%;
+    box-shadow: var(--SCColor) 3.6em 0px 0px -2.2em inset,0px 0px 0px 1px inset;
+    border: none;
+    margin: .2rem;
+}
+/* 普通标签tag样式的前缀部分 */
+.protyle-wysiwyg [data-node-id]:not([data-type="NodeHeading"]) span[data-type~=tag]::before {
+    content: "#";
+    color: var(--SCC-White);
+    display: inline-block;
+    margin-right: .2rem;
+    padding: .2rem;
+}
+/* 标题中标签tag样式在 Block-NodeHeading.css 中定义 */
+
+
+/* 删除线 */
+.b3-typography s,
+.b3-typography span[data-type=s],
+.protyle-wysiwyg s,
+.protyle-wysiwyg span[data-type=s] {
+    text-decoration: line-through;
+    text-decoration-color: var(--b3-protyle-inline-s-color);
+    color: var(--b3-protyle-inline-s-color);
+}
+
+
+/* kbd 按键的样式 */
+.b3-typography kbd, .b3-typography span[data-type~=kbd], .protyle-wysiwyg kbd, .protyle-wysiwyg span[data-type~=kbd]{
+    border-radius: 6px;
+    color: var(--SCC-Black-186);
+    background-color: var(--SCC-White-light);
+    vertical-align: 2px;
+    /* box-shadow: rgba(191,250,226, 0.4) 0px 2px, rgba(72,69,80,0.3) 0px 4px; // Sofill+ 备选方案 */
+    box-shadow: rgba(254,239,234, 0.4) 0px 3px, rgba(0,6,85, 0.3) 0px 5px;
+    border: 0px solid;
+    margin-right: 2px;
+    font-family: var(--b3-font-family);
+}
+
+/* 行内代码样式 */
+span[data-type=code] {
+    border-radius: 6px;
+    color: var(--SCC-White);
+    background-color: var(--SCC-primary-light) !important;
+    vertical-align: 2px;
+    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 3px 2px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+    border: 0px solid;
+    margin-right: 2px;
+    font-family: var(--b3-font-family-code);
+}
+span[data-type=code]::before {
+    content: "<";
+    color: var(--SCC-White-lighter);
+    display: inline-block;
+    margin-right: .1rem;
+    padding: 0;
+}
+span[data-type=code]::after {
+    content: ">";
+    color: var(--SCC-White-lighter);
+    display: inline-block;
+    margin-left: .1rem;
+    padding: 0;
+}
+
+
+/* 双链样式 */
+.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]::before {
+    /*前半部分的符号*/
+    content: "⁅⁅";
+    color: var(--SCC-Red-WPS);
+    font-weight: bold;
+    display: inline-block;
+    width: 1.31em;
+    text-align: center;
+  }
+  .protyle-wysiwyg [data-node-id] span[data-type~=block-ref]::after {
+    /*后半部分的符号*/
+    content: "⁆⁆";
+    color: var(--SCC-Red-WPS);
+    /* font-size: 1em; */
+    /* margin-right: 0.5em; */
+    font-weight: bold;
+    display: inline-block;
+    width: 1.31em;
+    /* text-align: left; */
+    text-align: center;
+  }
+  .protyle-wysiwyg [data-node-id] span[data-type~=block-ref]:hover {
+    padding-bottom: 3px;
+    animation: waveMove 1s infinite linear;
+    background: var(--custom-span-ref-animation-icon) repeat-x 0 100%;
+    background-size: 16px auto;
+  }

style/Block-Table.css

@@ -0,0 +1,35 @@
+
+/* 表格100%宽度 */
+.protyle-wysiwyg table,
+.b3-typography table {
+    display: table;
+    width: 100%;
+    font-size: 90%;
+}
+
+.b3-typography table tr,
+.protyle-wysiwyg table tr {
+    background-color: transparent;
+}
+
+/*设置表格表头样式*/
+table th {
+    font-weight: bold;
+    text-align: center;
+    background-color: var(--SCC-Red-WPS-lighter) !important;
+}
+
+/* 设置表格内部边框 */
+th, td {
+    border: 0.25pt solid var(--SCC-Red-WPS) !important;
+    border-collapse: collapse;
+}
+
+/* 表格奇偶行不同颜色 */
+tbody tr:nth-child(2n) {
+    background-color: var(--SCC-White-light) !important;
+}
+
+tbody tr:nth-child(2n + 1) {
+    background-color: var(--SCC-White) !important;
+}

style/begin-setting.css → style/Init.css

@@ -1,12 +1,12 @@
-/* ————————————————————所有边距初始化———————————————————— */
+/* 所有边距初始化 */
 * {
     margin: 0px;
     padding: 0px;
 }
 
 /* 隐藏思源笔记右侧进度滚动条，鼠标悬浮时显示 */
 .protyle-scroll .b3-slider {
-    opacity: 0;
+    opacity: 0.31;
 }
 
 .protyle-scroll .b3-slider:hover {
@@ -19,7 +19,7 @@
     text-align: justify;
 }
 
-/* ----------------------------------------------------块添加圆角------------------------------------------- */
+/* 块添加圆角 */
 .protyle-wysiwyg [data-node-id] {
     border-radius: 1px;
 }
@@ -32,7 +32,7 @@
     z-index: 3;
 }
 
-/* ————————————————————设置滚动条样式——————————————————__ */
+/* 设置滚动条样式 */
 ::-webkit-scrollbar-thumb {
     background-color: var(--b3-scroll-color);
     border-radius: 1px;
@@ -49,17 +49,17 @@
     background-color: var(--b3-scroll-color);
 }
 
-/* ————————————————————修改滚动条宽度———————————————————— */
+/* 修改滚动条宽度 */
 ::-webkit-scrollbar {
     width: 8px;
 }
 
-/* ————————————————————去掉软件的边框线———————————————————— */
+/* 去掉软件的边框线 */
 body.body--win32 {
     border: none !important;
 }
 
-/* ————————————————————表单设置不能拖拽缩放———————————————————— */
+/* 表单设置不能拖拽缩放 */
 textarea.b3-text-field.fn__flex-1 {
     border: 1px solid transparent;
     resize: none;

style/MI.css

@@ -0,0 +1,69 @@
+/* 主界面UI */
+
+/* 解决特定缩放下出现意外滚动条 */
+.fn__flex-column, .b3-typography, .protyle-wysiwyg {
+    overflow: hidden;
+}
+
+/* 当前打开文档右上角【更多】按钮位置和大小微调 */
+.protyle-breadcrumb > button svg {
+    scale: 1.31 !important;
+    margin-right: 20px;
+    margin-top: 10px;
+}
+
+/* 减少左下角元素对视线的抢夺 */
+#barDock svg {
+    opacity: .58;
+    scale: 1.13 !important;
+    margin-left: 5px;
+    margin-right: 22px;
+    margin-bottom: 5px;
+}
+#barDock:hover svg {
+    opacity: 1;
+}
+.status__msg {
+    opacity: .3;
+}
+.status__msg:hover {
+    opacity: .9;
+}
+/* 减少右下角元素对视线的抢夺 */
+#barFeedback, #barLock, #barDebug, #barHelp {
+    opacity: .13;
+}
+#barFeedback:hover, #barLock:hover, #barDebug:hover, #barHelp:hover {
+    opacity: 1;
+}
+.status__counter{
+    opacity: .58;
+}
+.status__counter:hover{
+    opacity: 1;
+}
+
+/* 侧边栏引用计数 */
+.counter {
+    color: var(--SCC-Red-WPS);
+    background-color: var(--SCC-Purple-186-lightest);
+    border-radius: 13px;
+}
+/* 文档内引用计数 */
+.protyle-attr--refcount {
+    right: 0px;
+    top: 0px;
+    position: absolute;
+    line-height: 16px;
+    padding: 0 4px;
+    margin-top: 0px;
+    margin-right: 0px;
+    color: var(--SCC-Red-WPS);
+    border-radius: 13px;
+    font-size: 12px;
+    user-select: none;
+    cursor: pointer;
+    height: 16px;
+    background-color: var(--SCC-Purple-186-lightest);
+}
+

style/Printer.css → style/Popup-Printer.css

@@ -36,14 +36,14 @@
 }
 
 
-/* @page {
-    size: A4;
-}
 
-@page :left {
-    margin: 2cm;
+/* PDF */
+.textLayer,
+.pdf__resize {
+    /* dark 蓝色、紫色背景显示不清楚，文档位于 https://github.com/siyuan-note/siyuan/issues/5351 */
+    mix-blend-mode: multiply;
 }
 
-@page :right {
-    margin: 2cm;
-} */
+.b3-typography div.hljs, .protyle-wysiwyg div.hljs {
+    background-color: #f8f9fa;
+}