feat(typography): add more custom style

memset0 · Oct 29, 2024 · 21d1860 · 21d1860
1 parent 13b431f
commit 21d1860
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 41 deletions.
diff --git a/src/style/typography-extend.less b/src/style/typography-extend.less
@@ -1,6 +1,4 @@
-@mdui-timing-fuction: cubic-bezier(0.4, 0, 0.2, 1);
-@mdui-shadow-1: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-  0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+@import "./variables.less";
 
 .m- {
   // 禁用的链接
@@ -34,29 +32,32 @@
 
   // 支持自定义纸片
   .__clip(@color) {
-    font-size: 0.875em;
     max-width: 100%;
-    height: 1em;
     white-space: nowrap;
     cursor: unset;
-    padding: 2px 4px;
-    border-radius: 4px;
     opacity: 0.9;
+    display: inline;
+    font-weight: normal;
+    font-family: @theme-font;
+    color: @color;
+    background: white;
     &:before {
+      font-size: 0.875em;
       font-weight: bold;
       // font-family: Consolas, monospace;
+      letter-spacing: 0.02em;
+      padding: 0.1em 0.3em;
+      border-radius: 0.3em;
+      border: 1px solid @color;
+      transition: color 250ms @mdui-timing-fuction, background-color 250ms @mdui-timing-fuction,
+        box-shadow 250ms @mdui-timing-fuction;
     }
     &[data-content]:after {
-      font-size: 1.125em;
-      content: " (" attr(data-content) ")";
-      font-weight: normal;
+      // font-size: 1.2em;
+      content: "(" attr(data-content) ")";
+      padding: 0 0.25em;
     }
-    transition: color 250ms @mdui-timing-fuction, background-color 250ms @mdui-timing-fuction,
-      box-shadow 250ms @mdui-timing-fuction;
-    background: white;
-    color: @color;
-    border: 1px solid @color;
-    &:hover {
+    &:hover:before {
       background: @color;
       color: white;
       border: 1px solid @color;
@@ -87,4 +88,71 @@
       content: "Example";
     }
   }
+
+  // 大纲笔记样式（仿幕布）
+  &mubu {
+    ul > li:before {
+      @width: 1.2em;
+      content: "\25CF";
+      // font-size: 80%;
+      display: inline-block;
+      width: @width;
+      margin-left: -@width;
+      // -webkit-text-stroke: 0.05em white;
+    }
+    ol {
+      counter-reset: item;
+      & > li:before {
+        @width: 1.2em;
+        counter-increment: item;
+        content: counter(item) + ". ";
+        display: inline-block;
+        width: @width;
+        margin-left: -@width;
+      }
+    }
+    ul,
+    ol {
+      & > li {
+        list-style: none;
+        &:focus {
+          color: red;
+        }
+        &:before {
+          color: #a0a0a0;
+          transition: color @theme-transitions-duration-shorter @mdui-timing-fuction;
+        }
+        &:hover:before {
+          color: @theme-color-main;
+          // -webkit-text-stroke: 0.5em #ccc;
+        }
+      }
+    }
+    // 缩进线
+    li > ul:before,
+    li > ol:before {
+      content: "\200B";
+      position: absolute;
+      display: block;
+      inset-inline-start: -0.94em;
+      top: 0;
+      bottom: 0;
+      border-inline-end: 1px solid #a0a0a080;
+    }
+    // 缩进微调
+    ul,
+    ol {
+      padding-left: @paragraph-distance * 3;
+    }
+    li > ul,
+    li > ol {
+      position: relative;
+      padding-left: @paragraph-distance * 4;
+    }
+    // 间距微调
+    li {
+      margin-block-start: @paragraph-distance;
+      margin-block-end: @paragraph-distance;
+    }
+  }
 }
diff --git a/src/style/typography.less b/src/style/typography.less
@@ -1,7 +1,7 @@
 @import "./callout.less";
+@import "./variables.less";
 
 .typography {
-  @pd: 0.6em;
   line-height: 1.625;
   // text-align: justify;
   line-break: normal; // 设置中文标点换行规则
@@ -12,7 +12,7 @@
   }
   pre[class*="language-"] {
     font-size: 0.92em;
-    margin: @pd * 1.2 0;
+    margin: @paragraph-distance * 1.2 0;
 
     .token.operator,
     .token.entity,
@@ -42,34 +42,32 @@
     display: block;
     width: 100%;
     text-align: center;
-    margin-top: @pd * 1.21;
-    margin-bottom: @pd * 1.21;
+    margin-top: @paragraph-distance * 1.21;
+    margin-bottom: @paragraph-distance * 1.21;
   }
 
   p,
   ul,
   ol,
   figure {
-    margin-block-start: @pd;
-    margin-block-end: @pd;
+    margin-block-start: @paragraph-distance;
+    margin-block-end: @paragraph-distance;
   }
 
   ul,
   ol {
-    padding-inline-start: @pd * 3;
+    padding-inline-start: @paragraph-distance * 3;
   }
-  ul ul,
-  ul ol,
-  ol ul,
-  ol ol {
+  li > ul,
+  li > ol {
     margin-block-start: 0;
     margin-block-end: 0;
-    padding-inline-start: @pd * 4;
+    padding-inline-start: @paragraph-distance * 4;
   }
 
   li {
-    margin-block-start: @pd / 2;
-    margin-block-end: @pd / 2;
+    margin-block-start: @paragraph-distance / 2;
+    margin-block-end: @paragraph-distance / 2;
   }
 
   h1,
@@ -78,28 +76,28 @@
   h4,
   h5,
   h6 {
-    margin-block-start: @pd;
-    margin-block-end: @pd;
+    margin-block-start: @paragraph-distance;
+    margin-block-end: @paragraph-distance;
   }
 
   h1 {
-    margin-block-start: @pd * 4;
-    margin-block-end: @pd * 2;
+    margin-block-start: @paragraph-distance * 4;
+    margin-block-end: @paragraph-distance * 2;
   }
   h2 {
     font-size: 1.6em;
-    margin-block-start: @pd * 2;
-    margin-block-end: @pd * 1.25;
+    margin-block-start: @paragraph-distance * 2;
+    margin-block-end: @paragraph-distance * 1.25;
   }
   h3 {
     font-size: 1.25em;
-    margin-block-start: @pd * 1.6;
-    margin-block-end: @pd * 1.15;
+    margin-block-start: @paragraph-distance * 1.6;
+    margin-block-end: @paragraph-distance * 1.15;
   }
   h4 {
     font-size: 1.05em;
-    margin-block-start: @pd * 1.3;
-    margin-block-end: @pd * 1.1;
+    margin-block-start: @paragraph-distance * 1.3;
+    margin-block-end: @paragraph-distance * 1.1;
   }
 
   h1:first-child,
@@ -108,7 +106,7 @@
   h4:first-child,
   h5:first-child,
   h6:first-child {
-    margin-block-start: @pd !important;
+    margin-block-start: @paragraph-distance !important;
   }
 
   a {

diff --git a/src/style/variables.less b/src/style/variables.less
@@ -1,7 +1,19 @@
+@paragraph-distance: 0.6em;
+
+@theme-font: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial,
+  "Liberation Sans", "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
+  "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp",
+  sans-serif;
+@theme-color-main: #ad76b5;
 @theme-transitions-duration-complex: 375ms;
 @theme-transitions-duration-enteringScreen: 225ms;
 @theme-transitions-duration-leavingScreen: 195ms;
 @theme-transitions-duration-short: 250ms;
 @theme-transitions-duration-shorter: 200ms;
 @theme-transitions-duration-shortest: 150ms;
 @theme-transitions-duration-standard: 300ms;
+
+@mdui-timing-fuction: cubic-bezier(0.4, 0, 0.2, 1);
+
+@mdui-shadow-1: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+  0px 1px 5px 0px rgba(0, 0, 0, 0.12);