feat: blur background of Mask

foray1010 · Feb 28, 2023 · 5a283c8 · 5a283c8
1 parent 12452cb
commit 5a283c8
Show file tree

Hide file tree

Showing 12 changed files with 18 additions and 18 deletions.
diff --git a/.size-limit.json b/.size-limit.json
@@ -1,11 +1,11 @@
 [
   {
     "path": "build/production/css/options.css",
-    "limit": "1.79 kB"
+    "limit": "1.81 kB"
   },
   {
     "path": "build/production/css/popup.css",
-    "limit": "1.91 kB"
+    "limit": "1.94 kB"
   },
   {
     "path": "build/production/js/common.js",
@@ -17,6 +17,6 @@
   },
   {
     "path": "build/production/js/popup.js",
-    "limit": "13.78 kB"
+    "limit": "13.81 kB"
   }
 ]
diff --git a/src/core/styles/globals.module.css b/src/core/styles/globals.module.css
@@ -15,15 +15,15 @@
   --highlight-level3: #bdbdbd;
   --highlight-level4: #9e9e9e;
   --highlight-level5: #757575;
-  --main-background-color: #fff;
+  --bg-color-rgb: 255, 255, 255;
   --main-color1: #42a5f5;
   --main-color2: #ff9800;
   --main-color3: #26a69a;
   --main-color4: #f44336;
   --main-color5: #8d6e63;
   --main-font-color: #212121;
 
-  background-color: var(--main-background-color);
+  background-color: rgb(var(--bg-color-rgb));
   color: var(--main-font-color);
   font-family: sans-serif;
   font-size: 75%;
@@ -36,7 +36,7 @@
     --highlight-level3: #757575;
     --highlight-level4: #9e9e9e;
     --highlight-level5: #bdbdbd;
-    --main-background-color: #212121;
+    --bg-color-rgb: 33, 33, 33;
     --main-font-color: #fff;
   }
 }

diff --git a/src/options/components/NavBar/styles.module.css b/src/options/components/NavBar/styles.module.css
@@ -12,7 +12,7 @@
   cursor: default;
   padding-block-start: var(--gap-px-2x);
   text-align: center;
-  color: var(--main-background-color);
+  color: rgb(var(--bg-color-rgb));
   font: 1.5rem 'Archivo Narrow', sans-serif;
   composes: focus from '../../../core/styles/composes.module.css';
 

diff --git a/src/options/components/OptionForm/OptionItem/InputSelect/styles.module.css b/src/options/components/OptionForm/OptionItem/InputSelect/styles.module.css
@@ -15,7 +15,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background-color: var(--main-background-color);
+  background-color: rgb(var(--bg-color-rgb));
   width: 85%;
 }
 

diff --git a/src/options/components/OptionForm/OptionItem/SelectButton/styles.module.css b/src/options/components/OptionForm/OptionItem/SelectButton/styles.module.css
@@ -8,7 +8,7 @@
 
 .main {
   --frontground-color: var(--main-color1);
-  --background-color: var(--main-background-color);
+  --background-color: rgb(var(--bg-color-rgb));
   --transition-duration: 0.4s;
 
   display: inline flow-root;

diff --git a/src/popup/components/App/globals.module.css b/src/popup/components/App/globals.module.css
@@ -11,7 +11,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  border-inline-start: var(--gap-px) solid var(--main-background-color);
+  border-inline-start: var(--gap-px) solid rgb(var(--bg-color-rgb));
   background-color: var(--highlight-level3);
 
   &:hover {

diff --git a/src/popup/components/BookmarkTree/bookmark-tree.module.css b/src/popup/components/BookmarkTree/bookmark-tree.module.css
@@ -9,6 +9,6 @@
 
 .main {
   position: absolute;
-  background-color: var(--main-background-color);
+  background-color: rgb(var(--bg-color-rgb));
   width: 100%;
 }
diff --git a/src/popup/components/BookmarkTree/tree-header.module.css b/src/popup/components/BookmarkTree/tree-header.module.css
@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding: 6px;
   height: 100%;
-  color: var(--main-background-color);
+  color: rgb(var(--bg-color-rgb));
 
   &:hover {
     background-color: var(--main-color4);
@@ -21,7 +21,7 @@
   margin: var(--gap-px-2x);
   cursor: default;
   line-height: 1;
-  color: var(--main-background-color);
+  color: rgb(var(--bg-color-rgb));
   font-family: 'Archivo Narrow', simhei, sans-serif;
   font-size: 1.75rem;
   /* stylelint-disable-next-line value-keyword-case */

diff --git a/src/popup/components/Mask/index.tsx b/src/popup/components/Mask/index.tsx
@@ -14,7 +14,7 @@ export default function Mask({ opacity, ...props }: Props) {
       style={React.useMemo(
         () => ({
           ...props.style,
-          opacity,
+          backgroundColor: `rgba(var(--bg-color-rgb), ${opacity})`,
         }),
         [opacity, props.style],
       )}

diff --git a/src/popup/components/Mask/mask.module.css b/src/popup/components/Mask/mask.module.css
@@ -2,7 +2,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background-color: var(--main-background-color);
+  backdrop-filter: blur(1px);
   width: 100%;
   height: 100%;
 }
diff --git a/src/popup/components/editor/editor-form.module.css b/src/popup/components/editor/editor-form.module.css
@@ -12,7 +12,7 @@
   cursor: default;
   padding-block: var(--gap-px);
   padding-inline: var(--gap-px-4x);
-  color: var(--main-background-color);
+  color: rgb(var(--bg-color-rgb));
 }
 
 .input {
@@ -25,7 +25,7 @@
 .main {
   box-sizing: border-box;
   border-block: 1px solid var(--highlight-level3);
-  background-color: var(--main-background-color);
+  background-color: rgb(var(--bg-color-rgb));
   padding-inline: var(--gap-px-2x);
   text-align: right;
 }
diff --git a/src/popup/components/menu/menu.module.css b/src/popup/components/menu/menu.module.css
@@ -1,7 +1,7 @@
 .main {
   border: 1px solid var(--highlight-level3);
   box-shadow: 0 2px 4px rgba(0 0 0 20%);
-  background-color: var(--main-background-color);
+  background-color: rgb(var(--bg-color-rgb));
   padding: var(--gap-px-2x);
 
   /* separator between menu fields */