style(ui): 调整TOC和滑块组件的样式和交互效果

优化表格内容(TOC)的视觉反馈和滑块组件的样式：
1. 调整TOC按钮的悬停和激活状态颜色
2. 改进TOC指示器的定位和样式
3. 重写滑块组件的样式逻辑，移除不必要的内边距
4. 为普通滑块添加自定义进度条效果

src/components/widget/DisplaySettings.svelte

@@ -198,9 +198,9 @@ onMount(() => {
             </div>
         </div>
     </div>
-    <div class="w-full h-6 px-1 bg-[var(--btn-regular-bg)] rounded select-none">
+    <div class="w-full h-6 bg-[var(--btn-regular-bg)] rounded select-none overflow-hidden">
         <input aria-label="变换速率" type="range" min="1" max="100" bind:value={rainbowSpeed} on:change={onSpeedChange}
-               class="slider" step="1" style="width: 100%">
+               class="slider" step="1" style="width: 100%; --value-percent: {(rainbowSpeed - 1) / 99 * 100}%">
     </div>
     {/if}
 
@@ -218,9 +218,9 @@ onMount(() => {
             </div>
         </div>
     </div>
-    <div class="w-full h-6 px-1 bg-[var(--btn-regular-bg)] rounded select-none">
+    <div class="w-full h-6 bg-[var(--btn-regular-bg)] rounded select-none overflow-hidden">
         <input aria-label="背景模糊" type="range" min="0" max="20" bind:value={bgBlur}
-               class="slider" step="1" style="width: 100%">
+               class="slider" step="1" style="width: 100%; --value-percent: {bgBlur / 20 * 100}%">
     </div>
 
     <div class="flex flex-row gap-2 mb-3 mt-3 items-center justify-between">
@@ -263,10 +263,43 @@ onMount(() => {
       input[type="range"]
         -webkit-appearance none
         height 1.5rem
-        background-image var(--color-selection-bar)
+        background-color transparent
         transition background-image 0.15s ease-in-out
 
+        &:not(#colorSlider)
+            background-image linear-gradient(to right, var(--primary) 0%, var(--primary) var(--value-percent), transparent var(--value-percent), transparent 100%)
+
+      #colorSlider
+        background-image var(--color-selection-bar)
+
+      input[type="range"]
         /* Input Thumb */
+        &::-webkit-slider-thumb
+          -webkit-appearance none
+          height 0
+          width 0
+          background transparent
+          box-shadow none
+          border none
+
+        &::-moz-range-thumb
+          -webkit-appearance none
+          height 0
+          width 0
+          background transparent
+          box-shadow none
+          border none
+
+        &::-ms-thumb
+          -webkit-appearance none
+          height 0
+          width 0
+          background transparent
+          box-shadow none
+          border none
+
+      #colorSlider
+        background-image var(--color-selection-bar)
         &::-webkit-slider-thumb
           -webkit-appearance none
           height 1rem
@@ -274,6 +307,9 @@ onMount(() => {
           border-radius 0.125rem
           background rgba(255, 255, 255, 0.7)
           box-shadow none
+          margin-top 0
+          transform none
+          transition background 0.15s
           &:hover
             background rgba(255, 255, 255, 0.8)
           &:active
@@ -287,6 +323,8 @@ onMount(() => {
           border-width 0
           background rgba(255, 255, 255, 0.7)
           box-shadow none
+          transform none
+          transition background 0.15s
           &:hover
             background rgba(255, 255, 255, 0.8)
           &:active
@@ -299,6 +337,8 @@ onMount(() => {
           border-radius 0.125rem
           background rgba(255, 255, 255, 0.7)
           box-shadow none
+          transform none
+          transition background 0.15s
           &:hover
             background rgba(255, 255, 255, 0.8)
           &:active

src/components/widget/TOC.astro

@@ -32,7 +32,7 @@ let heading1Count = 1;
 const maxLevel = siteConfig.toc.depth;
 ---
 {isPostsRoute &&
-<table-of-contents class:list={[className, "group"]}>
+<table-of-contents class:list={[className, "group block relative z-0 bg-[var(--float-panel-bg-opaque)] rounded-xl p-2"]}>
     {headings.filter((heading) => heading.depth < minDepth + maxLevel).map((heading) =>
             <a href={`#${heading.slug}`} class="px-2 flex gap-2 relative transition w-full min-h-9 rounded-xl
         hover:bg-[var(--toc-btn-hover)] active:bg-[var(--toc-btn-active)] py-2
@@ -55,7 +55,7 @@ const maxLevel = siteConfig.toc.depth;
                 }]}>{removeTailingHash(heading.text)}</div>
             </a>
     )}
-    <div id="active-indicator" class:list={[{'hidden': headings.length == 0}, "-z-10 absolute bg-[var(--toc-btn-hover)] left-0 right-0 rounded-xl transition-all " +
+    <div id="active-indicator" class:list={[{'hidden': headings.length == 0}, "-z-10 absolute bg-[var(--toc-btn-hover)] left-2 right-2 rounded-xl transition-all " +
         "group-hover:bg-transparent border-2 border-[var(--toc-btn-hover)] group-hover:border-[var(--toc-btn-active)] border-dashed"]}></div>
 </table-of-contents>}
 
@@ -116,10 +116,9 @@ class TableOfContents extends HTMLElement {
             this.tocEntries[i].classList.remove(this.visibleClass);
             i--;
         }
-        let parentOffset = this.tocEl?.getBoundingClientRect().top || 0;
+        
-        let scrollOffset = this.tocEl?.scrollTop || 0;
+        let top = this.tocEntries[min].offsetTop;
-        let top = this.tocEntries[min].getBoundingClientRect().top - parentOffset + scrollOffset;
+        let bottom = this.tocEntries[max].offsetTop + this.tocEntries[max].offsetHeight;
-        let bottom = this.tocEntries[max].getBoundingClientRect().bottom - parentOffset + scrollOffset;
         this.activeIndicator?.setAttribute("style", `display: block; top: ${top}px; height: ${bottom - top}px`);
     };
 

src/config.ts

@@ -80,12 +80,7 @@ export const navBarConfig: NavBarConfig = {
 			name: "统计",
 			url: "https://umami.acofork.com/share/CdkXbGgZr6ECKOyK", // Internal links should not include the base path, as it is automatically added
 			external: true, // Show an external link icon and will open in a new tab
-		},
+		}
-				{
-			name: "监控",
-			url: "https://eoddos.2x.nz", // Internal links should not include the base path, as it is automatically added
-			external: true, // Show an external link icon and will open in a new tab
-		},
 	],
 };
 

src/styles/variables.styl

@@ -94,8 +94,8 @@ define({
   --admonitions-color-caution: oklch(0.6 0.2 25) oklch(0.65 0.2 25)
 
   --toc-badge-bg: oklch(0.89 0.050 var(--hue)) var(--btn-regular-bg)
-  --toc-btn-hover: oklch(0.926 0.015 var(--hue)) oklch(0.22 0.02 var(--hue))
+  --toc-btn-hover: oklch(0.926 0.015 var(--hue)) oklch(0.30 0.02 var(--hue))
-  --toc-btn-active: oklch(0.90 0.015 var(--hue)) oklch(0.25 0.02 var(--hue))
+  --toc-btn-active: oklch(0.90 0.015 var(--hue)) oklch(0.33 0.02 var(--hue))
   --toc-width: calc((100vw - var(--page-width)) / 2 - 1rem)
   --toc-item-active: oklch(0.70 0.13 var(--hue)) oklch(0.35 0.07 var(--hue))
 })