feat: firefox scrollbar style

festoney8 · Sep 29, 2024 · 6c10192 · 6c10192
1 parent 0cae1a4
commit 6c10192
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 25 deletions.
diff --git a/src/components/items/SwitchComp.vue b/src/components/items/SwitchComp.vue
@@ -16,7 +16,7 @@
             </SwitchLabel>
         </div>
     </SwitchGroup>
-    <DescriptionComp class="pl-10" v-if="description?.length" :description="description"></DescriptionComp>
+    <DescriptionComp class="pl-8" v-if="description?.length" :description="description"></DescriptionComp>
 </template>
 
 <script setup lang="ts">

diff --git a/src/modules/rules/bangumi/groups/playerLayout.scss b/src/modules/rules/bangumi/groups/playerLayout.scss
@@ -1,4 +1,4 @@
-// 网页全屏时 页面可滚动 滚轮调音量失效
+// 网页全屏时 页面可滚动
 html[webscreen-scrollable] {
     body:has(#bilibili-player-wrap[class*='video_playerFullScreen']) {
         overflow: auto !important;
@@ -20,16 +20,21 @@ html[webscreen-scrollable] {
     body:has(#bilibili-player-wrap[class*='video_playerFullScreen'])::-webkit-scrollbar {
         display: none !important;
     }
+}
 
-    // firefox
-    @supports (-moz-appearance: none) {
-        body:has(#bilibili-player-wrap[class*='video_playerFullScreen']) {
-            scrollbar-width: none !important;
+// 网页全屏时 页面可滚动 firefox
+@supports (-moz-appearance: none) {
+    html[webscreen-scrollable] {
+        &,
+        body {
+            &:has(#bilibili-player-wrap[class*='video_playerFullScreen']) {
+                scrollbar-width: none !important;
+            }
         }
     }
 }
 
-// 全屏时 页面可滚动 滚轮调音量失效
+// 全屏时 页面可滚动
 html[fullscreen-scrollable] {
     body:has(#bilibili-player-wrap[class*='video_playerFullScreen']) {
         overflow: auto !important;
@@ -54,11 +59,16 @@ html[fullscreen-scrollable] {
     body:has(#bilibili-player-wrap[class*='video_playerFullScreen'])::-webkit-scrollbar {
         display: none !important;
     }
+}
 
-    // firefox
-    @supports (-moz-appearance: none) {
-        body:has(#bilibili-player-wrap[class*='video_playerFullScreen']) {
-            scrollbar-width: none !important;
+// 全屏时 页面可滚动 firefox
+@supports (-moz-appearance: none) {
+    html[fullscreen-scrollable] {
+        &,
+        body {
+            &:has(#bilibili-player-wrap[class*='video_playerFullScreen']) {
+                scrollbar-width: none !important;
+            }
         }
     }
 }

diff --git a/src/modules/rules/common/groups/basic.scss b/src/modules/rules/common/groups/basic.scss
@@ -301,11 +301,14 @@ html[beauty-scrollbar] {
     ::-webkit-scrollbar-thumb:active {
         background-color: rgb(0 0 0 / 0.6) !important;
     }
+}
 
-    // Firefox
-    @supports (-moz-appearance: none) {
+// 美化页面滚动条 Firefox
+@supports (-moz-appearance: none) {
+    html[beauty-scrollbar] {
+        &,
         * {
-            scrollbar-color: rgb(0 0 0 / 0.6) transparent !important;
+            scrollbar-color: #cdcdcd transparent !important;
             scrollbar-width: thin;
         }
     }

diff --git a/src/modules/rules/dynamic/groups/centerTop.scss b/src/modules/rules/dynamic/groups/centerTop.scss
@@ -81,9 +81,11 @@ html[dynamic-page-up-list-checked-item-hide] {
         animation-delay: 1s;
         animation-fill-mode: forwards;
     }
+}
 
-    // firefox无动画
-    @supports (-moz-appearance: none) {
+// 隐藏 UP 主列表 已查看项 firefox无动画
+@supports (-moz-appearance: none) {
+    html[dynamic-page-up-list-checked-item-hide] {
         .bili-dyn-up-list__item:not(.active):has(
                 .bili-dyn-up-list__item__face .bili-dyn-up-list__item__face__img:only-child
             ) {

diff --git a/src/modules/rules/video/groups/playerLayout.scss b/src/modules/rules/video/groups/playerLayout.scss
@@ -6,7 +6,7 @@ html[default-widescreen] {
     }
 }
 
-// 网页全屏时 页面可滚动 滚轮调音量失效 （Firefox 不适用）
+// 网页全屏时 页面可滚动
 html[webscreen-scrollable] {
     .webscreen-fix {
         position: unset;
@@ -72,16 +72,18 @@ html[webscreen-scrollable] {
     .webscreen-fix::-webkit-scrollbar {
         display: none !important;
     }
+}
 
-    // firefox滚动条
-    @supports (-moz-appearance: none) {
-        body.webscreen-fix {
+// 网页全屏时 页面可滚动 firefox滚动条
+@supports (-moz-appearance: none) {
+    html[webscreen-scrollable] {
+        &:has(.webscreen-fix) {
             scrollbar-width: none !important;
         }
     }
 }
 
-// 全屏时 页面可滚动 滚轮调音量失效 （实验功能，Firefox 不适用）
+// 全屏时 页面可滚动
 html[fullscreen-scrollable] {
     .webscreen-fix {
         position: unset;
@@ -147,10 +149,12 @@ html[fullscreen-scrollable] {
     .webscreen-fix::-webkit-scrollbar {
         display: none !important;
     }
+}
 
-    // firefox滚动条
-    @supports (-moz-appearance: none) {
-        body.webscreen-fix {
+// 全屏时 页面可滚动 firefox滚动条
+@supports (-moz-appearance: none) {
+    html[fullscreen-scrollable] {
+        &:has(.webscreen-fix) {
             scrollbar-width: none !important;
         }
     }

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,9 +1,17 @@
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 import monkey, { cdn } from 'vite-plugin-monkey'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+    // https://github.com/sass/dart-sass/issues/2352
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern-compiler',
+            },
+        },
+    },
     plugins: [
         vue(),
         monkey({