💄 style: Update markdown footernote style

bentwnghk · Jun 29, 2024 · 0476224 · 0476224
1 parent bb2133b
commit 0476224
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -82,11 +82,11 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@floating-ui/react": "^0.26.17",
+    "@floating-ui/react": "^0.26.18",
     "@giscus/react": "^3.0.0",
     "@lobehub/emojilib": "latest",
     "@react-spring/web": "^9.7.3",
-    "@shikijs/transformers": "^1.7.0",
+    "@shikijs/transformers": "^1.10.0",
     "@splinetool/runtime": "^0.9.526",
     "chroma-js": "^2.4.2",
     "dayjs": "^1.11.11",
@@ -113,13 +113,13 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "shiki": "^1.7.0",
+    "shiki": "^1.10.0",
     "swr": "^2.2.5",
     "ts-md5": "^1.3.1",
     "url-join": "^5.0.0",
     "use-merge-value": "^1.2.0",
     "uuid": "^10.0.0",
-    "zustand": "^4.5.2",
+    "zustand": "^4.5.4",
     "zustand-utils": "^1.3.2"
   },
   "devDependencies": {
@@ -143,7 +143,7 @@
     "cross-env": "^7.0.3",
     "dpdm": "^3.14.0",
     "dumi": "2.2.17",
-    "dumi-theme-lobehub": "^1.8.0",
+    "dumi-theme-lobehub": "^1.8.1",
     "eslint": "^8.57.0",
     "father": "4.3.1",
     "husky": "^9.0.11",
@@ -157,7 +157,7 @@
     "semantic-release": "^21.1.2",
     "stylelint": "^15.11.0",
     "stylelint-use-logical-spec": "^5.0.1",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.2",
     "vitest": "~1.2.2"
   },
   "peerDependencies": {

diff --git a/src/Markdown/style.ts b/src/Markdown/style.ts
@@ -30,12 +30,12 @@ export const useStyles = createStyles(
         ul {
           li {
             &::marker {
-              color: ${cyanColor};
+              color: ${cyanColor} !important;
             }
 
             li {
               &::marker {
-                color: ${token.colorTextSecondary};
+                color: ${token.colorTextSecondary} !important;
               }
             }
           }
@@ -56,6 +56,81 @@ export const useStyles = createStyles(
         position: relative;
         overflow: hidden;
         max-width: 100%;
+
+        #footnote-label {
+          display: none;
+        }
+
+        sup:has(a[aria-describedby='footnote-label']) {
+          margin-inline: 0.2em;
+          padding-block: 0.05em;
+          padding-inline: 0.4em;
+
+          font-size: 0.75em;
+          vertical-align: super !important;
+
+          background: ${token.colorFillTertiary};
+          border: 1px solid ${token.colorBorderSecondary};
+          border-radius: 0.25em;
+        }
+
+        section.footnotes {
+          padding-block: 1em;
+          font-size: 0.875em;
+          color: ${token.colorTextSecondary};
+
+          ol {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5em;
+
+            margin: 0;
+            padding: 0;
+
+            list-style-type: none;
+          }
+
+          ol li {
+            position: relative;
+
+            overflow: hidden;
+            display: flex;
+            flex-direction: row;
+
+            margin: 0 !important;
+            padding-block: 0 !important;
+            padding-inline: 0 0.4em !important;
+
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            border: 1px solid ${token.colorBorderSecondary};
+            border-radius: 0.25em;
+
+            &::before {
+              content: counter(list-item);
+              counter-increment: list-item;
+
+              display: block;
+
+              margin-inline-end: 0.4em;
+              padding-inline: 0.6em;
+
+              background: ${token.colorFillSecondary};
+            }
+
+            p,
+            a {
+              overflow: hidden;
+
+              margin: 0 !important;
+              padding: 0 !important;
+
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
       `,
     };
   },