抽离视频圆角功能

Yuhanawa · Apr 5, 2024 · 8ad0fd7 · 8ad0fd7
1 parent 2aad5dc
commit 8ad0fd7
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 17 deletions.
diff --git a/src/bilibili/config.json b/src/bilibili/config.json
@@ -32,7 +32,25 @@
       }
     },
     "beautify_work_on_index": {
-      "title": "美化首页(前置功能:样式美化)",
+      "title": "美化首页",
+      "default": "on",
+      "widget": "select",
+      "props": {
+        "options": [
+          {
+            "label": "开启",
+            "value": "on"
+          },
+          {
+            "label": "关闭",
+            "value": "off"
+          }
+        ]
+      },
+      "hidden": "{{ formData.beautify === 'off' }}"
+    },
+    "background": {
+      "title": "自定义背景开关",
       "default": "on",
       "widget": "select",
       "props": {
@@ -56,6 +74,24 @@
       "widget": "imageInput",
       "format": "image"
     },
+    "video_radius": {
+      "title": "视频小圆角",
+      "default": "on",
+      "widget": "select",
+      "props": {
+        "options": [
+          {
+            "label": "开启",
+            "value": "on"
+          },
+          {
+            "label": "关闭",
+            "value": "off"
+          }
+        ]
+      },
+      "hidden": "{{ formData.beautify === 'off' }}"
+    },
     "widescreen": {
       "title": "宽屏功能",
       "default": "on",

diff --git a/src/bilibili/src/beautify.js b/src/bilibili/src/beautify.js
@@ -1,19 +1,24 @@
-样式美化 | 自定义背景 | 大幅度修改, ["www.bilibili.com"], {
+(美化总开关)样式美化 & 自定义背景等, ["www.bilibili.com"], {
   '已开启$on': () => {
     if (location.href === 'https://www.bilibili.com/' && $get('bilibili_beautify_work_on_index', 'on') === 'off') return;
 
     if ($get('bilibili_eye_protection_cover', 'on') === 'on') {
       style('html,:root{--bodybackground: ' +
         (window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? $get('bilibili_eye_protection_cover_dark', `rgb(0 0 0 / 23%)`)
-        : $get('bilibili_eye_protection_cover_light', `rgb(102 204 255 / 23%)`)) + '}'
+          ? $get('bilibili_eye_protection_cover_dark', `rgb(0 0 0 / 23%)`)
+          : $get('bilibili_eye_protection_cover_light', `rgb(102 204 255 / 23%)`)) + '}'
       )
     } else {
       style('html,:root{--bodybackground:transparent}')
     }
 
-    style(`html,:root{--background:url(${$get('bilibili_background_value')})}`)
-
+    if ($get('bilibili_video_radius', 'on') === 'on') {
+      style($SASS('beautify.video.sass'))
+    }
+    if ($get('bilibili_background', 'on') === 'on') {
+      style($SASS('beautify.background.sass'))
+      style(`html,:root{--background:url(${$get('bilibili_background_value')})}`)
+    }
     return $SASS('beautify.sass')
   }, '已关闭$off': null,
 }
diff --git a/src/bilibili/style/beautify.sass b/src/bilibili/style/beautify.sass
@@ -124,12 +124,6 @@ html,:root
         .bili-header__bar .mini-header
             opacity: 0.96
 
-        // 视频上圆角
-        video
-            border-radius: 4px 4px 0 0
-        .bpx-player-video-area
-            border-radius: 4px 4px 0 0
-
         // 评论区顶部文字
         .reply-header
             margin: 0px 0px -4px 14px
@@ -165,10 +159,5 @@ html,:root
         // 播放器背景
         #bilibili-player-placeholder
             box-shadow: 0 -2px 4px 1px rgba(255,255,255,0.1)
-            border-radius: 4px 4px 12px 12px
-
             #bilibili-player-placeholder-top
-                border-radius: 4px 4px 0 0
                 background: transparent !important
-            #bilibili-player-placeholder-bottom
-                border-radius: 0 0 12px 12px
diff --git a/src/bilibili/style/beautify.video.sass b/src/bilibili/style/beautify.video.sass
@@ -0,0 +1,18 @@
+html,:root
+    body
+        // 视频上圆角
+        video
+            border-radius: 4px 4px 0 0
+        .bpx-player-video-area
+            border-radius: 4px 4px 0 0
+
+        // 播放器背景
+        #bilibili-player-placeholder
+            box-shadow: 0 -2px 4px 1px rgba(255,255,255,0.1)
+            border-radius: 4px 4px 12px 12px
+
+            #bilibili-player-placeholder-top
+                border-radius: 4px 4px 0 0
+                background: transparent !important
+            #bilibili-player-placeholder-bottom
+                border-radius: 0 0 12px 12px