style: 调整闪卡块样式 | Adjust the style of the flash card block.

Author: Zuoqiu-Yingyi

CHANGELOG.md

@@ -12,6 +12,7 @@
 - 修复闪卡挖空样式无法显示问题 | Fixed the issue of the flash card blank style not being displayed.
 - 调整设置对话框样式 | Adjust the style of the settings dialog.
 - 调整闪卡撤销按钮样式 | Adjust the style of the flash card undo button.
+- 调整闪卡块样式 | Adjust the style of the flash card block.
 
 ## v1.7.1/2023-02-15
 

style/config/config.css

@@ -428,13 +428,18 @@
   --custom-span-mark-shadow-color: var(--b3-theme-on-primary);
   /* 思源标记阴影宽度 | The shadow width of mark */
   --custom-span-mark-shadow-width: 2px;
-  /* 闪卡标记颜色 | Flash card marker color */
-  --custom-riff-decks-color: var(--b3-theme-primary-light);
+  /* 闪卡阴影颜色 | Flash card shadow color */
+  --custom-riff-decks-shadow-color-default: var(--b3-card-info-color);
+  --custom-riff-decks-shadow-color-super: var(--b3-card-warning-color);
+  --custom-riff-decks-shadow-color-list: var(--b3-card-error-color);
+  --custom-riff-decks-shadow-color-li: var(--b3-card-success-color);
+  /* 闪卡阴影宽度 | Flash cord shadow width */
+  --custom-riff-decks-shadow-width: 0.25em;
   /* 思源加粗文本颜色 | The color of bold text */
   /* 原样式 | Original style */
   /* --custom-span-strong-color: var(--b3-protyle-inline-strong-color); */
   /* 继承样式 | Inherit style */
-  --custom-span-strong-color: unset;
+  --custom-span-strong-color: var(--b3-protyle-inline-strong-color);
   /* 拖拽参考线颜色 | The color of drag guide */
   --custom-drag-top-shadow-color: var(--b3-theme-primary-lighter);
   --custom-drag-bottom-shadow-color: var(--b3-theme-primary-lighter);

style/config/config.less

@@ -559,14 +559,20 @@
     /* 思源标记阴影宽度 | The shadow width of mark */
     --custom-span-mark-shadow-width: 2px;
 
-    /* 闪卡标记颜色 | Flash card marker color */
-    --custom-riff-decks-color: var(--b3-theme-primary-light);
+    /* 闪卡阴影颜色 | Flash card shadow color */
+    --custom-riff-decks-shadow-color-default: var(--b3-card-info-color);
+    --custom-riff-decks-shadow-color-super: var(--b3-card-warning-color);
+    --custom-riff-decks-shadow-color-list: var(--b3-card-error-color);
+    --custom-riff-decks-shadow-color-li: var(--b3-card-success-color);
+    /* 闪卡阴影宽度 | Flash cord shadow width */
+    --custom-riff-decks-shadow-width: 0.25em;
 
     /* 思源加粗文本颜色 | The color of bold text */
     /* 原样式 | Original style */
     /* --custom-span-strong-color: var(--b3-protyle-inline-strong-color); */
     /* 继承样式 | Inherit style */
-    --custom-span-strong-color: unset;
+    // --custom-span-strong-color: unset;
+    --custom-span-strong-color: var(--b3-protyle-inline-strong-color);
 
     /* 拖拽参考线颜色 | The color of drag guide */
     --custom-drag-top-shadow-color: var(--b3-theme-primary-lighter);

style/module/custom-riff-decks.css

@@ -1,9 +1,17 @@
 /* 闪卡 */
-.protyle-wysiwyg [data-node-id][custom-riff-decks] {
+.protyle-wysiwyg [data-node-id][custom-riff-decks]:not(.sb, .list, .li) {
   /* 设置为闪卡的块 */
-  box-shadow: 3px 0px 0px -1px var(--custom-riff-decks-color);
+  box-shadow: 0 0 var(--custom-riff-decks-shadow-width) 0 var(--custom-riff-decks-shadow-color-default) inset;
 }
 .protyle-wysiwyg [data-node-id][custom-riff-decks].sb {
   /* 设置为闪卡的超级块 */
-  box-shadow: 0 0 var(--custom-block-super-margin) 0 var(--custom-riff-decks-color);
+  box-shadow: 0 0 var(--custom-riff-decks-shadow-width) 0 var(--custom-riff-decks-shadow-color-super);
+}
+.protyle-wysiwyg [data-node-id][custom-riff-decks].list {
+  /* 设置为闪卡的列表块 */
+  box-shadow: 0 0 var(--custom-riff-decks-shadow-width) 0 var(--custom-riff-decks-shadow-color-list) inset;
+}
+.protyle-wysiwyg [data-node-id][custom-riff-decks].li {
+  /* 设置为闪卡的列表项 */
+  box-shadow: 0 0 var(--custom-riff-decks-shadow-width) 0 var(--custom-riff-decks-shadow-color-li) inset;
 }

style/module/custom-riff-decks.less

@@ -2,12 +2,24 @@
 
 .protyle-wysiwyg {
     [data-node-id][custom-riff-decks] {
-        /* 设置为闪卡的块 */
-        box-shadow: 3px 0px 0px -1px var(--custom-riff-decks-color);
+        &:not(.sb, .list, .li) {
+            /* 设置为闪卡的块 */
+            box-shadow: 0 0 var(--custom-riff-decks-shadow-width) 0 var(--custom-riff-decks-shadow-color-default) inset;
+        }
 
         &.sb {
             /* 设置为闪卡的超级块 */
-            box-shadow: 0 0 var(--custom-block-super-margin) 0 var(--custom-riff-decks-color);
+            box-shadow: 0 0 var(--custom-riff-decks-shadow-width) 0 var(--custom-riff-decks-shadow-color-super);
+        }
+
+        &.list {
+            /* 设置为闪卡的列表块 */
+            box-shadow: 0 0 var(--custom-riff-decks-shadow-width) 0 var(--custom-riff-decks-shadow-color-list) inset;
+        }
+
+        &.li {
+            /* 设置为闪卡的列表项 */
+            box-shadow: 0 0 var(--custom-riff-decks-shadow-width) 0 var(--custom-riff-decks-shadow-color-li) inset;
         }
     }
 }