From 510e9cf20fd9e1f1aa573c3ee728c9330a0c928e Mon Sep 17 00:00:00 2001
From: zhuokuang <2183692898@qq.com>
Date: Thu, 18 Jan 2024 19:38:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E9=9D=9Eloading=20to?=
 =?UTF-8?q?ast=20zIndex=E5=B1=9E=E6=80=A7=E4=B8=8D=E7=94=9F=E6=95=88/popup?=
 =?UTF-8?q?-extra=E6=9A=B4=E9=9C=B2=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/quarkd/src/popupextra/doc-react.en-US.md | 1 +
 packages/quarkd/src/popupextra/doc-react.zh-CN.md | 1 +
 packages/quarkd/src/popupextra/doc.en-US.md       | 1 +
 packages/quarkd/src/popupextra/doc.zh-CN.md       | 1 +
 packages/quarkd/src/popupextra/style.css          | 2 +-
 packages/quarkd/src/toast/style.css               | 1 +
 6 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/quarkd/src/popupextra/doc-react.en-US.md b/packages/quarkd/src/popupextra/doc-react.en-US.md
index 49bdb9b5..1db0fa0d 100644
--- a/packages/quarkd/src/popupextra/doc-react.en-US.md
+++ b/packages/quarkd/src/popupextra/doc-react.en-US.md
@@ -85,6 +85,7 @@ The component provides the following [CSS variables](https://developer.mozilla.o
 | `--popup-extra-title-color`          | Title color          | `#242729`                                     |
 | `--popup-extra-subtitle-color`       | Subtitle color       | `#879099`                                     |
 | `--popup-extra-mask-color`           | Mask color           | `rgba(0, 0, 0, 0.7)`                          |
+| `--popup-extra-background`           | Popup background     | `#ffffff`                                     |
 | `--popup-extra-z-index`              | z-index              | `999`                                         |
 | `--popup-extra-max-height`           | Content max-height   | `90%`                                         |
 | `--popup-extra-min-height`           | Content min-height   | -                                             |
diff --git a/packages/quarkd/src/popupextra/doc-react.zh-CN.md b/packages/quarkd/src/popupextra/doc-react.zh-CN.md
index 7a5bac10..74f810c0 100644
--- a/packages/quarkd/src/popupextra/doc-react.zh-CN.md
+++ b/packages/quarkd/src/popupextra/doc-react.zh-CN.md
@@ -87,6 +87,7 @@ export default () => {
 | `--popup-extra-title-color`          | 主标题颜色               | `#242729`                                     |
 | `--popup-extra-subtitle-color`       | 副标题颜色               | `#879099`                                     |
 | `--popup-extra-mask-color`           | 蒙层背景                 | `rgba(0, 0, 0, 0.7)`                          |
+| `--popup-extra-background`           | 浮层背景                 | `#ffffff`                                     |
 | `--popup-extra-z-index`              | 组件层级                 | `999`                                         |
 | `--popup-extra-max-height`           | popup 内容区域最大高度   | `90%`                                         |
 | `--popup-extra-min-height`           | popup 内容区域最小高度   | -                                             |
diff --git a/packages/quarkd/src/popupextra/doc.en-US.md b/packages/quarkd/src/popupextra/doc.en-US.md
index df4251fa..46b4aa7d 100644
--- a/packages/quarkd/src/popupextra/doc.en-US.md
+++ b/packages/quarkd/src/popupextra/doc.en-US.md
@@ -97,6 +97,7 @@ The component provides the following [CSS variables](https://developer.mozilla.o
 | `--popup-extra-title-color`          | Title color          | `#242729`                                     |
 | `--popup-extra-subtitle-color`       | Subtitle color       | `#879099`                                     |
 | `--popup-extra-mask-color`           | Mask color           | `rgba(0, 0, 0, 0.7)`                          |
+| `--popup-extra-background`           | Popup background     | `#ffffff`                                     |
 | `--popup-extra-z-index`              | z-index              | `999`                                         |
 | `--popup-extra-max-height`           | Content max-height   | `90%`                                         |
 | `--popup-extra-min-height`           | Content min-height   | -                                             |
diff --git a/packages/quarkd/src/popupextra/doc.zh-CN.md b/packages/quarkd/src/popupextra/doc.zh-CN.md
index ef780f8b..568639a5 100644
--- a/packages/quarkd/src/popupextra/doc.zh-CN.md
+++ b/packages/quarkd/src/popupextra/doc.zh-CN.md
@@ -99,6 +99,7 @@ export default {
 | `--popup-extra-title-color`          | 主标题颜色               | `#242729`                                     |
 | `--popup-extra-subtitle-color`       | 副标题颜色               | `#879099`                                     |
 | `--popup-extra-mask-color`           | 蒙层背景                 | `rgba(0, 0, 0, 0.7)`                          |
+| `--popup-extra-background`           | 浮层背景                 | `#ffffff`                                     |
 | `--popup-extra-z-index`              | 组件层级                 | `999`                                         |
 | `--popup-extra-max-height`           | popup 内容区域最大高度   | `90%`                                         |
 | `--popup-extra-min-height`           | popup 内容区域最小高度   | -                                             |
diff --git a/packages/quarkd/src/popupextra/style.css b/packages/quarkd/src/popupextra/style.css
index dcc49778..aa8c6e05 100644
--- a/packages/quarkd/src/popupextra/style.css
+++ b/packages/quarkd/src/popupextra/style.css
@@ -33,7 +33,7 @@
   flex-direction: column;
   justify-content: flex-start;
   box-sizing: border-box;
-  background-color: quark-fillBaseColor;
+  background: var(--popup-extra-background, quark-fillBaseColor);
   opacity: 1;
   transition: transform quark-animationDurationBase;
   transition-timing-function: quark-animationTimingEnter;
diff --git a/packages/quarkd/src/toast/style.css b/packages/quarkd/src/toast/style.css
index 0ea9f943..b78b4373 100644
--- a/packages/quarkd/src/toast/style.css
+++ b/packages/quarkd/src/toast/style.css
@@ -1,6 +1,7 @@
 :host {
   display: flex;
   transition: quark-animationDurationBase;
+  position: relative;
 }
 
 :host quark-overlay {