feat: rebuild collapsed lines

vuepress · Jan 8, 2025 · ca845f9 · ca845f9
1 parent 57bf3dd
commit ca845f9
Showing 1 changed file with 49 additions and 52 deletions.
diff --git a/tools/highlighter-helper/src/client/styles/collapsed-lines.scss b/tools/highlighter-helper/src/client/styles/collapsed-lines.scss
@@ -1,16 +1,29 @@
 /* stylelint-disable scss/operator-no-newline-after */
-// collapsed lines
-div[class*='language-'].has-collapsed-lines {
-  &.collapsed {
-    overflow-y: hidden;
-    height: calc(
-      var(--vp-collapsed-lines) * var(--code-line-height) *
-        var(--code-font-size) + var(--code-padding-y) + 28px
-    );
+
+@property --vp-collapsed-lines-bg {
+  inherits: false;
+  initial-value: #fff;
+  syntax: '<color>';
+}
+
+@keyframes code-collapsed-lines {
+  0% {
+    opacity: 0.3;
+    transform: translateY(-2px) rotate(var(--vp-collapsed-lines-rotate));
   }
 
+  100% {
+    opacity: 1;
+    transform: translateY(2px) rotate(var(--vp-collapsed-lines-rotate));
+  }
+}
+
+// collapsed lines
+div[class*='language-'].has-collapsed-lines {
   .collapsed-lines {
     --vp-collapsed-lines-bg: var(--code-c-bg);
+    --vp-collapsed-lines-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='m18 12l-6 6l-6-6m12-6l-6 6l-6-6'/%3E%3C/svg%3E");
+    --vp-collapsed-lines-rotate: 0deg;
 
     position: absolute;
     right: 0;
@@ -36,7 +49,27 @@ div[class*='language-'].has-collapsed-lines {
     transition: --vp-collapsed-lines-bg var(--vp-t-color);
 
     &:hover {
-      --vp-collapsed-lines-bg: rgb(0 0 0 / 10%) !important;
+      --vp-collapsed-lines-bg: var(--code-c-highlight-bg);
+    }
+
+    &::before {
+      content: '';
+
+      display: inline-block;
+
+      width: 24px;
+      height: 24px;
+
+      background-color: var(--code-c-text);
+
+      mask-image: var(--vp-collapsed-lines-icon);
+      mask-position: 50%;
+      mask-size: 20px;
+      mask-repeat: no-repeat;
+      pointer-events: none;
+
+      animation: code-collapsed-lines 1.2s infinite alternate-reverse
+        ease-in-out;
     }
   }
 
@@ -49,57 +82,21 @@ div[class*='language-'].has-collapsed-lines {
     }
   }
 
-  .collapsed-lines::before {
-    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='m18 12l-6 6l-6-6m12-6l-6 6l-6-6'/%3E%3C/svg%3E");
-    --vp-collapsed-lines-rotate: 0deg;
-
-    content: '';
-
-    display: inline-block;
-
-    width: 24px;
-    height: 24px;
-
-    background-color: var(--code-c-text);
-
-    mask-image: var(--icon);
-    mask-position: 50%;
-    mask-size: 20px;
-    mask-repeat: no-repeat;
-    pointer-events: none;
-
-    animation: code-collapsed-lines 1.2s infinite alternate-reverse ease-in-out;
+  &.collapsed {
+    overflow-y: hidden;
+    height: calc(
+      var(--vp-collapsed-lines) * var(--code-line-height) *
+        var(--code-font-size) + var(--code-padding-y) + 28px
+    );
   }
 
   &:not(.collapsed) {
     code {
       padding-bottom: max(var(--code-padding-y), 28px);
     }
 
-    .collapsed-lines:hover {
-      --vp-collapsed-lines-bg: transparent !important;
-    }
-
-    .collapsed-lines::before {
+    .collapsed-lines {
       --vp-collapsed-lines-rotate: 180deg;
     }
   }
 }
-
-@property --vp-collapsed-lines-bg {
-  inherits: false;
-  initial-value: #fff;
-  syntax: '<color>';
-}
-
-@keyframes code-collapsed-lines {
-  0% {
-    opacity: 0.3;
-    transform: translateY(-2px) rotate(var(--vp-collapsed-lines-rotate));
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(2px) rotate(var(--vp-collapsed-lines-rotate));
-  }
-}