@whitesev/pops 2.1.4 → 2.1.6

package/src/components/confirm/index.css

@@ -1,47 +0,0 @@
-.pops[type-value] .pops-confirm-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.pops[type-value="confirm"] .pops-confirm-title {
-	width: 100%;
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="confirm"] .pops-confirm-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;
-}
-.pops[type-value="confirm"] .pops-confirm-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="confirm"] .pops-confirm-content p[pops] {
-	padding: 5px 10px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-}
-.pops[type-value="confirm"] .pops-confirm-btn {
-	/*position: absolute;
-	bottom: 0;*/
-	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-items: center;
-}

package/src/components/confirm/index.ts

@@ -6,7 +6,7 @@ import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsConfirmConfig } from "./config";
-import type { PopsConfirmDetails } from "./indexType";
+import type { PopsConfirmDetails } from "./types";
 
 export const PopsConfirm = {
 	init(details: PopsConfirmDetails) {
@@ -48,14 +48,14 @@ export const PopsConfirm = {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-confirm-title" style="text-align: ${
-							config.title.position
-						};${headerStyle}">${
+            <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-confirm-content" style="${contentStyle}">${
+                        <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
 					: `<p pops style="${contentPStyle}">${config.content.text}</p>`

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

@@ -4,7 +4,7 @@ import type {
 	PopsDragConfig,
 	PopsCommonConfig,
 	PopsMoreButtonConfig,
-} from "../../types/components";
+} from "../../../types/components";
 
 /**
  * pops.confirm

package/src/components/drawer/config.ts

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

package/src/components/drawer/index.css

@@ -8,24 +8,7 @@
 	overflow: hidden;
 	transition: all 0.3s;
 }
-.pops[type-value] .pops-drawer-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.pops[type-value] .pops-drawer-title p[pops] {
-	line-height: normal;
-	align-content: center;
-}
 
-.pops-drawer-content {
-	flex: 1;
-	overflow: auto;
-}
-.pops[type-value="drawer"] .pops-drawer-btn {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
 .pops[type-value="drawer"][direction="top"] {
 	width: 100%;
 	left: 0;

package/src/components/drawer/index.ts

@@ -5,7 +5,7 @@ import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsDrawerConfig } from "./config";
-import type { PopsDrawerDetails } from "./indexType";
+import type { PopsDrawerDetails } from "./types";
 
 export const PopsDrawer = {
 	init(details: PopsDrawerDetails) {
@@ -49,15 +49,14 @@ export const PopsDrawer = {
 			/*html*/ `
             ${
 							config.title.enable
-								? /*html*/ `
-            <div class="pops-${PopsType}-title" style="${headerStyle}">${
+								? /*html*/ `<div class="pops-title pops-${PopsType}-title" style="${headerStyle}">${
 										config.title.html
 											? config.title.text
 											: /*html*/ `<p pops style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`
 								  }${headerBtnHTML}</div>`
 								: ""
 						}
-            <div class="pops-${PopsType}-content" style="${contentStyle}">${
+            <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
 					: `<p pops style="${contentPStyle}">${config.content.text}</p>`

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

@@ -4,7 +4,7 @@ import type {
 	// PopsDragConfig,
 	PopsCommonConfig,
 	PopsMoreButtonConfig,
-} from "../../types/components";
+} from "../../../types/components";
 
 /**
  * pops.drawer

package/src/components/folder/config.ts

@@ -1,4 +1,4 @@
-import type { PopsFolderDetails } from "./indexType";
+import type { PopsFolderDetails } from "./types";
 
 export const PopsFolderConfig = (): DeepRequired<PopsFolderDetails> => {
 	return {
@@ -27,16 +27,30 @@ export const PopsFolderConfig = (): DeepRequired<PopsFolderDetails> => {
 				clickEvent() {
 					return [
 						{
-							fileName: "内部-测试文件.zip",
-							fileSize: 1025000,
-							fileType: "zip",
-							createTime: 1702038410440,
-							latestTime: 1702039602126,
-							isFolder: false,
-							index: 1,
+							fileName: "测试文件夹2222",
+							fileSize: 0,
+							fileType: "",
+							createTime: 0,
+							latestTime: 0,
+							isFolder: true,
+							index: 0,
+							// @ts-ignore
 							clickEvent() {
-								console.log("下载文件：", this.fileName);
-								return "https://update.greasyfork.org/scripts/456485/pops.js";
+								return [
+									{
+										fileName: "内部-测试文件.zip",
+										fileSize: 1025000,
+										fileType: "zip",
+										createTime: 1702038410440,
+										latestTime: 1702039602126,
+										isFolder: false,
+										index: 1,
+										clickEvent() {
+											console.log("下载文件：", this.fileName);
+											return "https://update.greasyfork.org/scripts/456485/pops.js";
+										},
+									},
+								];
 							},
 						},
 					];

package/src/components/folder/index.css

@@ -1,49 +1,21 @@
-.pops[type-value] .pops-folder-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.pops[type-value="folder"] .pops-folder-title {
-	width: 100%;
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="folder"] .pops-folder-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;
-}
-.pops[type-value="folder"] .pops-folder-content p[pops] {
-	padding: 5px 10px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-}
-.pops[type-value="folder"] .pops-folder-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="folder"] .pops-folder-btn {
-	/*position: absolute;
-	bottom: 0;*/
-	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-items: center;
+.pops-folder-list {
+	--folder-arrow-fill-color: #d4d7de;
+	--folder-arrow-active-fill-color: #06a7ff;
+	--header-breadcrumb-text-color: #06a7ff;
+	--header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);
+	--header-breadcrumb-all-files-first-text-color: var(
+		--header-breadcrumb-text-color
+	);
+	--header-breadcrumb-all-files-last-text-color: #999999;
+	--table-header-row-text-color: #818999;
+	--table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));
+	--table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));
+	--table-body-row-text-color: #05082c;
+	--table-body-row-file-name-text-color: #05082c;
+	--table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));
+	--table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));
+	--table-body-row-file-name-hover-text-color: #06a7ff;
+	--table-body-row-content-text-color: #818999;
 }
 .pops-folder-list .cursor-p {
 	cursor: pointer;
@@ -52,7 +24,7 @@
 	background: 0 0;
 	text-decoration: none;
 	-webkit-tap-highlight-color: transparent;
-	color: #05082c;
+	color: var(--header-breadcrumb-text-color);
 }
 table.pops-folder-list-table__body,
 table.pops-folder-list-table__header {
@@ -88,11 +60,9 @@ table.pops-folder-list-table__body {
 	height: 50px;
 	line-height: normal;
 	align-content: center;
-	color: rgb(129, 137, 153);
+	color: var(--table-header-row-text-color);
 	text-align: left;
 	font-size: 12px;
-}
-.pops-folder-list-table__header-row {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -102,19 +72,22 @@ table.pops-folder-list-table__body {
 	height: 50px;
 	line-height: normal;
 	align-content: center;
-	color: #03081a;
+	color: var(--table-body-row-text-color);
 	font-size: 12px;
 }
 .pops-folder-list-table__body-row:hover {
-	background: rgb(245, 246, 247, var(--pops-bg-opacity));
+	background-color: var(--table-body-row-hover-bg-color);
+	border-color: var(--table-body-row-hover-bd-color);
+	border: 0;
+	outline: none;
 }
 .pops-folder-list table th {
 	border: 0;
-	border-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));
+	border-bottom: 1px solid var(--table-body-th-text-color);
 }
 .pops-folder-list table td {
 	border: 0;
-	border-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));
+	border-bottom: 1px solid var(--table-body-td-text-color);
 	position: relative;
 }
 .pops-folder-list .list-name-text {
@@ -187,9 +160,12 @@ table.pops-folder-list-table__body {
 	display: none;
 }
 
-.pops-folder-list-file-name-title-text:hover {
+.pops-folder-list .pops-folder-list-file-name-title-text {
+	color: var(--table-body-row-file-name-text-color);
+}
+.pops-folder-list .pops-folder-list-file-name-title-text:hover {
 	text-decoration: none;
-	color: rgb(6, 167, 255);
+	color: var(--table-body-row-file-name-hover-text-color);
 }
 .pops-folder-list .text-ellip {
 	overflow: hidden;
@@ -197,7 +173,7 @@ table.pops-folder-list-table__body {
 	text-overflow: ellipsis;
 }
 .pops-folder-list .content {
-	color: rgb(129, 137, 153);
+	color: var(--table-body-row-content-text-color);
 	position: relative;
 	width: 100%;
 	text-align: left;
@@ -251,10 +227,10 @@ table.pops-folder-list-table__body {
 .pops-folder-list .pops-folder-icon-arrow {
 	width: 10px;
 	height: 10px;
-	fill: rgb(212, 215, 222);
+	fill: var(--folder-arrow-fill-color);
 }
 .pops-folder-list .pops-folder-icon-active {
-	fill: rgb(6, 167, 255);
+	fill: var(--folder-arrow-active-fill-color);
 }
 .pops-folder-list .pops-folder-file-list-breadcrumb {
 	padding: 4px 20px;
@@ -281,7 +257,7 @@ table.pops-folder-list-table__body {
 }
 .pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {
 	font-size: 12px;
-	color: #333;
+	color: var(--header-breadcrumb-all-files-text-color);
 	line-height: normal;
 	align-content: center;
 	font-weight: 700;
@@ -293,11 +269,11 @@ table.pops-folder-list-table__body {
 	word-wrap: normal;
 }
 .pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {
-	color: rgb(153, 153, 153);
+	color: var(--header-breadcrumb-all-files-last-text-color);
 }
 .pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {
 	font-size: 14px;
-	color: rgb(18, 22, 26);
+	color: var(--header-breadcrumb-all-files-first-text-color);
 }
 .pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {
 	width: 16px;
@@ -307,3 +283,32 @@ table.pops-folder-list-table__body {
 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)
 		55% 50%/6px 9px no-repeat;
 }
+
+@media (prefers-color-scheme: dark) {
+	.pops[type-value="folder"] {
+		--pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));
+		--pops-bottom-btn-controls-border-color: rgb(
+			73,
+			83,
+			102,
+			var(--pops-bg-opacity)
+		);
+	}
+	.pops-folder-list {
+		--header-breadcrumb-text-color: #06a7ff;
+		--header-breadcrumb-all-files-text-color: var(
+			--header-breadcrumb-text-color
+		);
+		--header-breadcrumb-all-files-first-text-color: var(
+			--header-breadcrumb-text-color
+		);
+		--header-breadcrumb-all-files-last-text-color: #818999;
+		--table-body-row-text-color: #f7f8fa;
+		--table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));
+		--table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));
+		--table-body-td-text-color: #495366;
+		--table-body-row-hover-bd-color: #1f2022;
+		--table-body-row-hover-bg-color: #1f2022;
+		--table-body-row-file-name-text-color: #f7f8fa;
+	}
+}

package/src/components/folder/index.ts

@@ -9,7 +9,7 @@ import { popsUtils } from "../../utils/PopsUtils";
 import { PopsLoading } from "../loading";
 import { PopsFolderConfig } from "./config";
 import { Folder_ICON } from "./folderIcon";
-import type { PopsFolderDataConfig, PopsFolderDetails } from "./indexType";
+import type { PopsFolderDataConfig, PopsFolderDetails } from "./types";
 
 export const PopsFolder = {
 	init(details: PopsFolderDetails) {
@@ -122,14 +122,14 @@ export const PopsFolder = {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-folder-title" style="text-align: ${
-							config.title.position
-						};${headerStyle}">${
+            <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-folder-content ${
+			<div class="pops-content pops-${PopsType}-content ${
 				popsUtils.isPhone() ? "pops-mobile-folder-content" : ""
 			}">
                 <div class="pops-folder-list">

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

@@ -3,7 +3,7 @@ import type {
 	PopsDragConfig,
 	PopsCommonConfig,
 	PopsMoreButtonConfig,
-} from "../../types/components";
+} from "../../../types/components";
 
 /**
  * pops.folder的folder配置信息

package/src/components/iframe/config.ts

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

package/src/components/iframe/index.css

@@ -2,38 +2,8 @@
 	--container-title-height: 55px;
 	transition: width 0.35s ease, height 0.35s ease;
 }
-.pops[type-value] .pops-iframe-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.pops[type-value="iframe"] .pops-iframe-title {
-	width: calc(100% - 0px);
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="iframe"] .pops-iframe-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="iframe"] .pops-iframe-content {
-	width: 100%;
-	/*height: calc(100% - var(--container-title-height));*/
-	flex: 1;
+.pops[type-value="iframe"] .pops-content {
 	overflow: hidden;
-	word-break: break-word;
-}
-.pops[type-value="iframe"] .pops-iframe-content p[pops] {
-	padding: 5px 10px;
-	color: #333;
-	text-indent: 15px;
 }
 .pops-loading {
 	position: absolute;
@@ -85,8 +55,8 @@
 	height: 100% !important;
 }
 .pops[type-value="iframe"] iframe[pops] {
-	width: calc(100% - 4px);
-	height: calc(100% - 4px);
+	width: 100%;
+	height: 100%;
 	border: 0;
 }
 .pops-iframe-content-global-loading {

package/src/components/iframe/index.ts

@@ -1,15 +1,15 @@
-import { PopsCore } from "../../Core";
+import { PopsCore } from "../../PopsCore";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
-import { PopsLayer } from "../../PopsLayer";
+import { PopsLayerData } from "../../PopsLayer";
 import type { PopsEventDetails } from "../../types/event";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsIframeConfig } from "./config";
-import type { PopsIframeDetails } from "./indexType";
+import type { PopsIframeDetails } from "./types";
 
 export const PopsIframe = {
 	init(details: PopsIframeDetails) {
@@ -58,15 +58,15 @@ export const PopsIframe = {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-iframe-title" style="text-align: ${
-							config.title.position
-						};${headerStyle}">${
+            <div class="pops-title pops-${PopsType}-title" style="text-align: ${
+				config.title.position
+			};${headerStyle}">${
 				config.title.html
 					? titleText
 					: `<p pops style="${headerPStyle}">${titleText}</p>`
 			}${headerBtnHTML}</div>
-			<div class="pops-iframe-content">
-                <div class="pops-iframe-content-global-loading"></div>
+			<div class="pops-content pops-${PopsType}-content">
+                <div class="pops-${PopsType}-content-global-loading"></div>
                 <iframe src="${config.url}" pops ${
 				config.sandbox
 					? "sandbox='allow-forms allow-same-origin allow-scripts'"
@@ -305,7 +305,7 @@ export const PopsIframe = {
 			(event) => {
 				event.preventDefault();
 				event.stopPropagation();
-				PopsInstanceUtils.removeInstance([PopsLayer.iframe], guid, false);
+				PopsInstanceUtils.removeInstance([PopsLayerData.iframe], guid, false);
 				if (typeof config?.btn?.close?.callback === "function") {
 					config.btn.close.callback(eventDetails, event);
 				}

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

@@ -2,9 +2,9 @@ import type {
 	PopsTitleConfig,
 	PopsDragConfig,
 	PopsCommonConfig,
-} from "../../types/components";
+} from "../../../types/components";
 
-import type { PopsEventDetails } from "../../types/event";
+import type { PopsEventDetails } from "../../../types/event";
 
 /**
  * pops.iframe的按钮的点击回调参数event

package/src/components/loading/config.ts

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

package/src/components/loading/index.css

@@ -1,3 +1,10 @@
+.pops[type-value="loading"] {
+	--loading-bd-color: rgba(0, 0, 0, 0.2);
+	--loading-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+	--loading-box-shadow-color: rgb(0 0 0 / 50%);
+	--loading-icon-color: rgba(100, 149, 237, 0.1);
+	--loading-icon-bd-top-color: rgb(100, 149, 237, var(--pops-bd-opacity));
+}
 .pops[type-value="loading"] {
 	position: absolute;
 	top: 272.5px;
@@ -11,10 +18,10 @@
 	max-height: 100%;
 	min-width: 0;
 	min-height: 0;
-	border: 1px solid rgba(0, 0, 0, 0.2);
+	border: 1px solid var(--loading-bd-color);
 	border-radius: 5px;
-	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
-	box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+	background-color: var(--loading-bg-color);
+	box-shadow: 0 0 5px var(--loading-box-shadow-color);
 	vertical-align: middle;
 	transition: all 0.35s;
 	transform: translate(-50%, -50%);
@@ -32,8 +39,8 @@
 	display: inline-block;
 	width: 2em;
 	height: 2em;
-	border: 0.3em solid rgba(100, 149, 237, 0.1);
-	border-top: 0.3em solid rgb(100, 149, 237, var(--pops-bd-opacity));
+	border: 0.3em solid var(--loading-icon-color);
+	border-top: 0.3em solid var(--loading-icon-bd-top-color);
 	border-radius: 50%;
 	content: " ";
 	vertical-align: middle;
@@ -51,11 +58,9 @@
 	line-height: normal;
 	align-content: center;
 }
-.pops[type-value="loading"] .pops-loading-content p[pops] {
-	display: inline-block;
-	padding: 5px 0px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-	font-size: inherit;
-	text-align: center;
+
+@media (prefers-color-scheme: dark) {
+	.pops[type-value="loading"] {
+		--loading-bg-color: #222222;
+	}
 }

package/src/components/loading/index.ts

@@ -5,7 +5,7 @@ import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsLoadingConfig } from "./config";
-import type { PopsLoadingDetails } from "./indexType";
+import type { PopsLoadingDetails } from "./types";
 
 export const PopsLoading = {
 	init(details: PopsLoadingDetails) {
@@ -30,15 +30,15 @@ export const PopsLoading = {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-loading-content">${
-							config.addIndexCSS
-								? /*html*/ `
+            <div class="pops-content pops-${PopsType}-content">${
+				config.addIndexCSS
+					? /*html*/ `
                 <style data-model-name="index">${PopsCSS.index}</style>
                 <style data-model-name="anim">${PopsCSS.anim}</style>
                 <style data-model-name="common">${PopsCSS.common}</style>
                 `
-								: ""
-						}
+					: ""
+			}
                 <style data-model-name="loadingCSS">
                     ${PopsCSS.loadingCSS}
                 </style>

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

@@ -1,7 +1,7 @@
 import type {
 	PopsCommonConfig,
 	PopsContentConfig,
-} from "../../types/components";
+} from "../../../types/components";
 
 /**
  * pops.loading