Fix style for ground-class mask (sheepzh#241)

Author: sheepzh

src/content-script/limit/delay/confirm.ts

@@ -1,6 +1,6 @@
 import { VerificationPair } from "@service/limit-service/verification/common"
 import verificationProcessor from "@service/limit-service/verification/processor"
-import { LINK_STYLE } from "../modal-style"
+import { FILTER_STYLES, LINK_STYLE } from "../modal-style"
 import { t as t_, locale, I18nKey, tN as tN_, I18nResultItem } from "@i18n"
 import { LimitMessage, verificationMessages } from "@i18n/message/app/limit"
 
@@ -49,10 +49,16 @@ const CONFIRM_STYLE: Partial<CSSStyleDeclaration> = {
     padding: "50px 20px 20px 20px",
     position: "absolute",
     textAlign: "center",
-    background: "#111",
     borderRadius: "8px",
 }
 
+const computeConfirmStyle = (limitFilter: timer.limit.FilterType): Partial<CSSStyleDeclaration> => {
+    return {
+        ...CONFIRM_STYLE,
+        ...FILTER_STYLES[limitFilter || "translucent"]?.delayConfirm || {}
+    }
+}
+
 const INPUT_STYLE: Partial<CSSStyleDeclaration> = {
     color: "#000",
     padding: "2px 6px",
@@ -94,7 +100,7 @@ export class DelayConfirm {
     private onError: (msg: string) => void
 
     constructor(option: timer.option.DailyLimitOption) {
-        const { limitLevel = "nothing", limitPassword, limitVerifyDifficulty } = option || {}
+        const { limitLevel = "nothing", limitPassword, limitVerifyDifficulty, limitFilter } = option || {}
         let tips: I18nResultItem<HTMLElement>[] = []
         if (limitLevel === "password" && limitPassword) {
             this.answerValue = limitPassword
@@ -121,9 +127,8 @@ export class DelayConfirm {
             return
         }
         this.dom = document.createElement("div")
-        Object.assign(this.dom.style || {}, CONFIRM_STYLE)
+        Object.assign(this.dom.style || {}, computeConfirmStyle(limitFilter))
         this.dom.style.display = 'none'
-        // tips
         const tipContainer = document.createElement('div')
         tipContainer.append(...tips)
         this.dom.append(tipContainer)

src/content-script/limit/modal-style.ts

@@ -16,14 +16,29 @@ export const MASK_STYLE: Partial<CSSStyleDeclaration> = {
     paddingTop: '120px'
 }
 
-export const FILTER_STYLES: Record<timer.limit.FilterType, Partial<CSSStyleDeclaration & { backdropFilter: string }>> = {
+export type FilterStyle = {
+    mask: Partial<CSSStyleDeclaration>
+    delayConfirm: Partial<CSSStyleDeclaration>
+}
+
+export const FILTER_STYLES: Record<timer.limit.FilterType, FilterStyle> = {
     translucent: {
-        backgroundColor: '#444',
-        opacity: '0.9',
-        color: '#EEE',
+        mask: {
+            backgroundColor: '#444',
+            opacity: '0.9',
+            color: '#EEE',
+        },
+        delayConfirm: {
+            background: "#111",
+        },
     },
     groundGlass: {
-        backdropFilter: 'blur(5px)',
-        color: '#111',
+        mask: {
+            color: '#111',
+            backdropFilter: 'blur(5px)',
+        },
+        delayConfirm: {
+            background: "#dedede",
+        },
     }
 }

src/content-script/limit/modal.ts

@@ -5,7 +5,7 @@ import { sendMsg2Runtime } from "@api/chrome/runtime"
 import optionService from "@service/option-service"
 import { FILTER_STYLES, LINK_STYLE, MASK_STYLE } from "./modal-style"
 import { DelayConfirm } from "./delay/confirm"
-import { DelayButton } from "./delay/Button"
+import { DelayButton } from "./delay/button"
 
 const TYPE_SORT: { [reason in LimitType]: number } = {
     PERIOD: 0,
@@ -100,7 +100,7 @@ class ModalInstance implements MaskModal {
         const filterType = (await optionService.getAllOption())?.limitFilter
         const realMaskStyle = {
             ...MASK_STYLE,
-            ...FILTER_STYLES[filterType || 'translucent']
+            ...FILTER_STYLES[filterType || 'translucent']?.mask || {}
         }
         Object.assign(this.mask.style || {}, realMaskStyle)
     }