@whitesev/pops 2.1.4 → 2.1.6

package/src/components/panel/config.ts

@@ -1,5 +1,5 @@
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import type { PopsPanelDetails } from "./indexType";
+import type { PopsPanelDetails } from "./types";
 
 export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 	return {

package/src/components/panel/{PanelHandleContentDetails.ts → handlerComponents.ts}

@@ -5,30 +5,33 @@ import { PopsMathFloatUtils } from "../../utils/PopsMathUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsAlert } from "../alert";
-import type { PopsAlertDetails } from "../alert/indexType";
+import type { PopsAlertDetails } from "../alert/types";
 import { PopsTooltip } from "../tooltip";
-import type { PopsPanelButtonDetails } from "./buttonType";
-import type { PopsPanelRightAsideContainerOptions } from "./commonType";
-import type { PopsPanelDeepMenuDetails } from "./deepMenuType";
-import type { PopsPanelFormsDetails } from "./formsType";
+import type { PopsPanelButtonDetails } from "./types/components-button";
+import type { PopsPanelRightAsideContainerOptions } from "./types/components-common";
+import type { PopsPanelDeepMenuDetails } from "./types/components-deepMenu";
+import type { PopsPanelFormsDetails } from "./types/components-forms";
 import type {
 	PopsPanelContentConfig,
 	PopsPanelDetails,
 	PopsPanelEventType,
 	PopsPanelFormsTotalDetails,
-} from "./indexType";
-import type { PopsPanelInputDetails } from "./inputType";
-import type { PopsPanelOwnDetails } from "./ownType";
+} from "./types";
+import type { PopsPanelInputDetails } from "./types/components-input";
+import type { PopsPanelOwnDetails } from "./types/components-own";
 import type {
 	PopsPanelSelectMultipleDataOption,
 	PopsPanelSelectMultipleDetails,
-} from "./selectMultipleType";
-import type { PopsPanelSelectDetails } from "./selectType";
-import type { PopsPanelSliderDetails } from "./sliderType";
-import type { PopsPanelSwitchDetails } from "./switchType";
-import type { PopsPanelTextAreaDetails } from "./textareaType";
+} from "./types/components-selectMultiple";
+import type { PopsPanelSelectDetails } from "./types/components-select";
+import type { PopsPanelSliderDetails } from "./types/components-slider";
+import type { PopsPanelSwitchDetails } from "./types/components-switch";
+import type { PopsPanelTextAreaDetails } from "./types/components-textarea";
 
-export const PanelHandleContentDetails = () => {
+/**
+ * 处理组件（把组件配置转为组件元素）
+ */
+export const PanelHandlerComponents = () => {
 	return {
 		/**
 		 * 左侧的ul容器
@@ -2156,6 +2159,7 @@ export const PanelHandleContentDetails = () => {
 									--el-text-color-regular: #606266;
 									--el-color-primary: #409eff;
 									--el-fill-color-light: #f5f7fa;
+									--el-disable-color: #a8abb2;
 								}
 								.select-item{
 									cursor: pointer;
@@ -2173,7 +2177,7 @@ export const PanelHandleContentDetails = () => {
 								.select-item[aria-disabled],
 								.select-item[disabled]{
 									cursor: not-allowed;
-									color: #a8abb2;
+									color: var(--el-disable-color);
 									background: unset;
 								}
 								.select-item:hover{
@@ -2201,6 +2205,16 @@ export const PanelHandleContentDetails = () => {
 									width: 12px;
 									height: 12px;
 								}
+
+								
+								@media (prefers-color-scheme: dark) {
+									.select-container{
+										--el-text-color-regular: #f2f2f2;
+										--el-disable-color: #8D9095;
+										--el-fill-color-light: #262727;
+									}
+								}
+
 								${style || ""}
 								`,
 							} as PopsAlertDetails,

package/src/components/panel/index.css

@@ -3,7 +3,7 @@
 	--el-disabled-bg-color: #f5f7fa;
 	--el-disabled-border-color: #e4e7ed;
 	--pops-bg-color: #f2f2f2;
-	--pops-color: #333;
+	--pops-color: #333333;
 	--title-bg-color: #ffffff;
 	--aside-bg-color: #ffffff;
 	--aside-hover-color: rgb(64, 158, 255);
@@ -24,57 +24,52 @@
 	--pops-panel-forms-container-item-margin-left-right: var(
 		--pops-panel-forms-margin-left-right
 	);
+	--pops-panel-forms-container-li-border-color: rgb(
+		229,
+		229,
+		229,
+		var(--pops-bd-opacity)
+	);
 	--pops-panel-forms-container-li-padding-top-bottom: 12px;
 	--pops-panel-forms-container-li-padding-left-right: 16px;
+
+	--pops-panel-components-input-text-color: #000000;
+	--pops-panel-components-input-text-bg-color: transparent;
+	--pops-panel-components-input-bd-color: #dcdfe6;
+	--pops-panel-components-input-bg-color: #ffffff;
+	--pops-panel-components-input-hover-bd-color: #c0c4cc;
+	--pops-panel-components-input-focus-bd-color: #409eff;
+	--pops-panel-components-input-suffix-color: #a8abb2;
+
+	--pops-panel-components-textarea-text-color: #000000;
+	--pops-panel-components-textarea-text-bg-color: #ffffff;
+	--pops-panel-components-textarea-bd-color: #dcdfe6;
+	--pops-panel-components-textarea-hover-bd-color: #c0c4cc;
+	--pops-panel-components-textarea-focus-bd-color: #409eff;
+
+	--pops-panel-components-select-text-color: #000000;
+	--pops-panel-components-select-bd-color: rgb(
+		184,
+		184,
+		184,
+		var(--pops-bd-opacity)
+	);
+	--pops-panel-components-select-bg-color: rgb(
+		255,
+		255,
+		255,
+		var(--pops-bg-opacity)
+	);
+	--pops-panel-components-select-hover-bd-color: #c0c4cc;
 }
 .pops[type-value="panel"] {
 	color: var(--pops-color);
 	background: var(--pops-bg-color);
 }
 .pops[type-value] .pops-panel-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
 	background: var(--title-bg-color);
 }
 
-.pops[type-value="panel"] .pops-panel-title {
-	width: 100%;
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="panel"] .pops-panel-title p[pops] {
-	width: 100%;
-	overflow: hidden;
-	text-indent: 15px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	line-height: normal;
-	align-content: center;
-}
-.pops[type-value="panel"] .pops-panel-content {
-	width: 100%;
-	/*height: calc(
-		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);*/
-	flex: 1;
-	overflow: auto;
-	word-break: break-word;
-}
-.pops[type-value="panel"] .pops-panel-btn {
-	display: flex;
-	padding: 10px 10px 10px 10px;
-	width: 100%;
-	height: var(--container-bottom-btn-height);
-	max-height: var(--container-bottom-btn-height);
-	line-height: normal;
-	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-	text-align: right;
-	align-content: center;
-	align-items: center;
-}
-
 /* ↓panel的CSS↓ */
 aside.pops-panel-aside {
 	overflow: auto;
@@ -179,7 +174,7 @@ section.pops-panel-container .pops-panel-forms-container-item ul li {
 	align-items: center;
 	padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;
 	margin: 0px var(--pops-panel-forms-container-li-padding-left-right);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
+	border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);
 	text-align: left;
 }
 section.pops-panel-container
@@ -669,17 +664,23 @@ section.pops-panel-container
 .pops-panel-input {
 	display: flex;
 	align-items: center;
-	border: 1px solid #dcdfe6;
+	border: 1px solid var(--pops-panel-components-input-bd-color);
 	border-radius: 4px;
-	background-color: #ffffff;
+	background-color: var(--pops-panel-components-input-bg-color);
 	position: relative;
+	box-shadow: none;
 }
 .pops-panel-input:hover {
-	box-shadow: 0 0 0 1px #c0c4cc inset;
+	border: 1px solid var(--pops-panel-components-input-hover-bd-color);
+}
+.pops-panel-input:has(input:disabled):hover {
+	--pops-panel-components-input-hover-bd-color: var(
+		--pops-panel-components-input-bd-color
+	);
 }
 .pops-panel-input:has(input:focus) {
 	outline: 0;
-	border: 1px solid #409eff;
+	border: 1px solid var(--pops-panel-components-input-focus-bd-color);
 	border-radius: 4px;
 	box-shadow: none;
 }
@@ -699,7 +700,8 @@ section.pops-panel-container
 	vertical-align: middle;
 	-webkit-appearance: none;
 	appearance: none;
-	background-color: transparent;
+	color: var(--pops-panel-components-input-text-color);
+	background-color: var(--pops-panel-components-input-text-bg-color);
 	outline: 0;
 	transition: 0.1s;
 	border: 0;
@@ -719,7 +721,7 @@ section.pops-panel-container
 	flex-wrap: nowrap;
 	height: 100%;
 	text-align: center;
-	color: #a8abb2;
+	color: var(--pops-panel-components-input-suffix-color);
 	transition: all 0.3s;
 	pointer-events: none;
 	margin: 0 8px;
@@ -751,13 +753,14 @@ section.pops-panel-container
 
 .pops-input-disabled {
 	background-color: var(--el-disabled-bg-color);
-	box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
 }
 .pops-panel-input.pops-input-disabled {
 	border: none;
 }
 .pops-panel-input.pops-input-disabled:hover {
-	box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
+	--pops-panel-components-input-hover-bd-color: var(
+		--pops-panel-components-input-bd-color
+	);
 }
 .pops-panel-input input:disabled,
 .pops-panel-input input:disabled + .pops-panel-input__suffix {
@@ -786,42 +789,54 @@ section.pops-panel-container
 	box-sizing: border-box;
 	font-size: inherit;
 	font-family: inherit;
-	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+	color: var(--pops-panel-components-textarea-text-color);
+	background-color: var(--pops-panel-components-textarea-text-bg-color);
 	background-image: none;
 	-webkit-appearance: none;
 	appearance: none;
-	box-shadow: 0 0 0 1px #dcdfe6 inset;
+	box-shadow: none;
 	border-radius: 0;
 	transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-	border: none;
+	border: 1px solid var(--pops-panel-components-textarea-bd-color);
 }
 .pops-panel-textarea textarea:hover {
-	box-shadow: 0 0 0 1px #c0c4cc inset;
+	border-color: var(--pops-panel-components-textarea-hover-bd-color);
+}
+.pops-panel-textarea:has(textarea:disabled):hover {
+	--pops-panel-components-textarea-hover-bd-color: var(
+		--pops-panel-components-textarea-bd-color
+	);
 }
 .pops-panel-textarea-disable .pops-panel-textarea textarea:hover {
 	box-shadow: none;
 }
 .pops-panel-textarea textarea:focus {
 	outline: 0;
-	box-shadow: 0 0 0 1px #409eff inset;
+	border-color: var(--pops-panel-components-textarea-focus-bd-color);
 }
 /* textarea的CSS */
 
 /* select的CSS */
+.pops-panel-select {
+	border: 0;
+}
 .pops-panel-select select {
 	height: 32px;
 	line-height: normal;
 	align-content: center;
 	min-width: 200px;
-	border: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));
+	border: 1px solid var(--pops-panel-components-select-bd-color);
 	border-radius: 5px;
 	text-align: center;
 	outline: 0;
-	background: rgb(255, 255, 255, var(--pops-bg-opacity));
+	color: var(--pops-panel-components-select-text-color);
+	background-color: var(--pops-panel-components-select-bg-color);
 	box-shadow: none;
 }
 .pops-panel-select select:hover {
-	box-shadow: 0 0 0 1px #c0c4cc inset;
+	--pops-panel-components-select-bd-color: var(
+		--pops-panel-components-select-hover-bd-color
+	);
 }
 .pops-panel-select-disable .pops-panel-select select:hover {
 	box-shadow: none;
@@ -851,11 +866,6 @@ section.pops-panel-container
 	--el-color-primary: #409eff;
 	--el-color-white: #ffffff;
 	width: 200px;
-	/* 左侧内容*/
-	/* 左侧内容*/
-	/* 右侧箭头图标*/
-	/* 右侧箭头图标*/
-	/* tag*/
 }
 .pops-panel-select-multiple .el-select__wrapper {
 	display: flex;
@@ -1084,3 +1094,66 @@ section.pops-panel-container
 	display: flex;
 	align-items: baseline;
 }
+
+@media (prefers-color-scheme: dark) {
+	.pops[type-value="panel"] {
+		--pops-bg-color: #000000;
+		--pops-color: #f2f2f2;
+		--title-bg-color: #000000;
+		--aside-bg-color: #262626;
+		--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;
+		--pops-panel-forms-container-item-bg-color: #262626;
+		--pops-panel-forms-container-item-title-color: #c1c1c1;
+
+		--pops-panel-forms-container-li-border-color: rgb(
+			51,
+			51,
+			51,
+			var(--pops-bd-opacity)
+		);
+
+		--pops-panel-components-input-text-color: #f2f2f2;
+		--pops-panel-components-input-bd-color: #4f5052;
+		--pops-panel-components-input-bg-color: #141414;
+		--pops-panel-components-input-hover-bd-color: #6f7175;
+		--pops-panel-components-input-focus-bd-color: #409eff;
+		--pops-panel-components-input-suffix-color: #a8abb2;
+
+		--pops-panel-components-textarea-text-color: #f2f2f2;
+		--pops-panel-components-textarea-text-bg-color: #141414;
+		--pops-panel-components-textarea-bd-color: #4f5052;
+		--pops-panel-components-textarea-hover-bd-color: #6f7175;
+		--pops-panel-components-textarea-focus-bd-color: #409eff;
+
+		--pops-panel-components-select-text-color: #f2f2f2;
+		--pops-panel-components-select-bd-color: rgb(
+			51,
+			51,
+			51,
+			var(--pops-bd-opacity)
+		);
+		--pops-panel-components-select-bg-color: #141414;
+	}
+	.pops[type-value="panel"]
+		.pops-panel-deepMenu-container
+		.pops-panel-deepMenu-container-left-arrow-icon {
+		fill: #f2f2f2;
+	}
+
+	.pops-panel-select-multiple {
+		--el-fill-color-blank: #141414;
+		--el-border-color: #4c4d4f;
+		--el-text-color-placeholder: #a8abb2;
+		--el-select-input-color: #a8abb2;
+		--el-text-color-regular: #606266;
+		--el-color-info: #909399;
+		--el-color-info-light-8: #e9e9eb;
+		--el-color-primary-light-9: #ecf5ff;
+		--el-color-primary-light-8: #d9ecff;
+		--el-color-primary: #409eff;
+		--el-color-white: #ffffff;
+	}
+	.pops-panel-select-multiple .el-tag {
+		--el-color-info-light-9: #202121;
+	}
+}

package/src/components/panel/index.ts

@@ -3,9 +3,9 @@ import { PopsHandler } from "../../handler/PopsHandler";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
-import type { PopsPanelDetails, PopsPanelEventType } from "./indexType";
+import type { PopsPanelDetails, PopsPanelEventType } from "./types";
 import { PopsPanelConfig } from "./config";
-import { PanelHandleContentDetails } from "./PanelHandleContentDetails";
+import { PanelHandlerComponents } from "./handlerComponents";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsCSS } from "../../PopsCSS";
 
@@ -49,14 +49,14 @@ export const PopsPanel = {
 			PopsType,
 			config,
 			/*html*/ `
-			<div class="pops-${PopsType}-title" style="text-align: ${
+			<div class="pops-title pops-${PopsType}-title" style="text-align: ${
 				config.title.position
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-			<div class="pops-${PopsType}-content">
+			<div class="pops-content pops-${PopsType}-content">
 				<aside class="pops-${PopsType}-aside">
 					<ul></ul>
 				</aside>
@@ -135,11 +135,11 @@ export const PopsPanel = {
 		if ($mask != null) {
 			$anim.after($mask);
 		}
-		let panelHandleContentDetails = PanelHandleContentDetails();
+		let panelHandlerComponents = PanelHandlerComponents();
 		/**
 		 * 处理内部配置
 		 */
-		panelHandleContentDetails.init({
+		panelHandlerComponents.init({
 			config: config,
 			$el: {
 				$pops: $pops,

package/src/components/panel/{buttonType.ts → types/components-button.ts}

@@ -1,10 +1,11 @@
-import type { PopsPanelCommonDetails } from "./commonType";
-import type { PopsButtonStyleType } from "../../types/button";
-import type { PopsIconType } from "../../types/icon";
+import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsButtonStyleType } from "../../../types/button";
+import type { PopsIconType } from "../../../types/icon";
 /**
  * pops.panel的 button
  */
-export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanelButtonDetails> {
+export interface PopsPanelButtonDetails
+	extends PopsPanelCommonDetails<PopsPanelButtonDetails> {
 	/**
 	 * （可选）className属性
 	 */

package/src/components/panel/{commonType.ts → types/components-common.ts}

@@ -1,5 +1,5 @@
-import type { PopsPanelFormsDetails } from "./formsType";
-import { PopsPanelFormsTotalDetails } from "./indexType";
+import type { PopsPanelFormsDetails } from "./components-forms";
+import { PopsPanelFormsTotalDetails } from ".";
 
 /**
  * 右侧容器的配置

package/src/components/panel/{deepMenuType.ts → types/components-deepMenu.ts}

@@ -1,6 +1,6 @@
-import type { PopsPanelFormsTotalDetails } from "./indexType";
-import type { PopsPanelFormsDetails } from "./formsType";
-import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsPanelFormsTotalDetails } from ".";
+import type { PopsPanelFormsDetails } from "./components-forms";
+import type { PopsPanelCommonDetails } from "./components-common";
 /**
  * pops.panel的 深层菜单
  */

package/src/components/panel/{formsType.ts → types/components-forms.ts}

@@ -1,5 +1,5 @@
-import type { PopsPanelCommonDetails } from "./commonType";
-import type { PopsPanelFormsTotalDetails } from "./indexType";
+import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelFormsTotalDetails } from ".";
 
 /**
  * pops.panel的 forms

package/src/components/panel/{inputType.ts → types/components-input.ts}

@@ -1,4 +1,4 @@
-import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsPanelCommonDetails } from "./components-common";
 
 /**
  * pops.panel的 input

package/src/components/panel/{ownType.ts → types/components-own.ts}

@@ -1,4 +1,4 @@
-import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsPanelCommonDetails } from "./components-common";
 
 /**
  * pops.panel的 own

package/src/components/panel/{selectType.ts → types/components-select.ts}

@@ -1,6 +1,6 @@
-import type { PopsPanelCommonDetails } from "./commonType";
-import type { PopsPanelFormsDetails } from "./formsType";
-import type { PopsPanelFormsTotalDetails } from "./indexType";
+import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelFormsDetails } from "./components-forms";
+import type { PopsPanelFormsTotalDetails } from ".";
 
 /**
  * pops.panel的 select

package/src/components/panel/{selectMultipleType.ts → types/components-selectMultiple.ts}

@@ -1,5 +1,5 @@
-import type { PopsAlertDetails } from "../alert/indexType";
-import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsAlertDetails } from "../../alert/types";
+import type { PopsPanelCommonDetails } from "./components-common";
 
 export interface PopsPanelSelectMultipleDataOption<T> {
 	/**

package/src/components/panel/{sliderType.ts → types/components-slider.ts}

@@ -1,4 +1,4 @@
-import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsPanelCommonDetails } from "./components-common";
 
 /**
  * pops.panel的 slider

package/src/components/panel/{switchType.ts → types/components-switch.ts}

@@ -1,4 +1,4 @@
-import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsPanelCommonDetails } from "./components-common";
 
 /**
  * pops.panel的 switch

package/src/components/panel/{textareaType.ts → types/components-textarea.ts}

@@ -1,4 +1,4 @@
-import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsPanelCommonDetails } from "./components-common";
 
 /**
  * pops.panel的 textarea

package/src/components/panel/{indexType.ts → types/index.ts}

@@ -2,18 +2,18 @@ import type {
 	PopsTitleConfig,
 	PopsDragConfig,
 	PopsCommonConfig,
-} from "../../types/components";
-import type { PopsPanelFormsDetails } from "./formsType";
-import type { PopsPanelSwitchDetails } from "./switchType";
-import type { PopsPanelSliderDetails } from "./sliderType";
-import type { PopsPanelInputDetails } from "./inputType";
-import type { PopsPanelTextAreaDetails } from "./textareaType";
-import type { PopsPanelSelectDetails } from "./selectType";
-import type { PopsPanelButtonDetails } from "./buttonType";
-import type { PopsPanelDeepMenuDetails } from "./deepMenuType";
-import type { PopsPanelOwnDetails } from "./ownType";
-import type { PopsHeaderCloseButtonDetails } from "../../types/button";
-import { PopsPanelSelectMultipleDetails } from "./selectMultipleType";
+} from "../../../types/components";
+import type { PopsPanelFormsDetails } from "./components-forms";
+import type { PopsPanelSwitchDetails } from "./components-switch";
+import type { PopsPanelSliderDetails } from "./components-slider";
+import type { PopsPanelInputDetails } from "./components-input";
+import type { PopsPanelTextAreaDetails } from "./components-textarea";
+import type { PopsPanelSelectDetails } from "./components-select";
+import type { PopsPanelButtonDetails } from "./components-button";
+import type { PopsPanelDeepMenuDetails } from "./components-deepMenu";
+import type { PopsPanelOwnDetails } from "./components-own";
+import type { PopsHeaderCloseButtonDetails } from "../../../types/button";
+import { PopsPanelSelectMultipleDetails } from "./components-selectMultiple";
 
 /** panel的各种类型的配置项 */
 export type PopsPanelFormsTotalDetails =

package/src/components/prompt/config.ts

@@ -1,4 +1,4 @@
-import type { PopsPromptDetails } from "./indexType";
+import type { PopsPromptDetails } from "./types/index";
 
 export const PopsPromptConfig = (): DeepRequired<PopsPromptDetails> => {
 	return {

package/src/components/prompt/index.css

@@ -1,50 +1,18 @@
-.pops[type-value] .pops-prompt-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
+.pops[type-value="prompt"] {
+	--input-color: #000000;
+	--input-bg-color: none;
+	--input-placeholder-color: #a1a4ac;
 }
-.pops[type-value="prompt"] .pops-prompt-title {
-	width: 100%;
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="prompt"] .pops-prompt-title p[pops] {
-	width: 100%;
-	overflow: hidden;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	line-height: normal;
-	align-content: center;
-}
-.pops[type-value="prompt"] .pops-prompt-content {
-	width: 100%;
-	/*height: calc(
-		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);*/
-	flex: 1;
-	overflow: auto;
-	word-break: break-word;
-}
-.pops[type-value="prompt"] .pops-prompt-content p[pops] {
-	padding: 5px 10px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-}
-.pops[type-value="prompt"] .pops-prompt-btn {
-	display: flex;
-	padding: 10px 10px 10px 10px;
+.pops[type-value="prompt"] input[pops],
+.pops[type-value="prompt"] textarea[pops] {
 	width: 100%;
-	height: var(--container-bottom-btn-height);
-	max-height: var(--container-bottom-btn-height);
-	line-height: normal;
-	align-content: center;
-	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-	text-align: right;
-	align-items: center;
+	height: 100%;
+	outline: 0;
+	border: 0;
+	color: var(--input-color);
+	background-color: var(--input-bg-color);
 }
+
 .pops[type-value="prompt"] input[pops] {
 	padding: 5px 10px;
 }
@@ -52,11 +20,15 @@
 	padding: 5px 10px;
 	resize: none;
 }
-.pops[type-value="prompt"] input[pops],
-.pops[type-value="prompt"] textarea[pops] {
-	width: 100%;
-	height: 100%;
-	outline: 0;
-	border: 0;
-	color: rgb(51, 51, 51);
+
+.pops[type-value="prompt"] input[pops]::placeholder,
+.pops[type-value="prompt"] textarea[pops]::placeholder {
+	color: var(--input-placeholder-color);
+}
+@media (prefers-color-scheme: dark) {
+	.pops[type-value="prompt"] {
+		--input-color: #ffffff;
+		--input-bg-color: #333333;
+		--input-placeholder-color: #8d9095;
+	}
 }