@whitesev/pops 2.4.6 → 2.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/dist/index.amd.js +578 -571
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +578 -571
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +578 -571
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +578 -571
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +578 -571
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +578 -571
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +252 -252
  14. package/dist/types/src/types/animation.d.ts +19 -19
  15. package/dist/types/src/types/button.d.ts +187 -187
  16. package/dist/types/src/types/components.d.ts +210 -210
  17. package/dist/types/src/types/event.d.ts +63 -63
  18. package/dist/types/src/types/global.d.ts +25 -25
  19. package/dist/types/src/types/icon.d.ts +32 -32
  20. package/dist/types/src/types/inst.d.ts +24 -24
  21. package/dist/types/src/types/main.d.ts +111 -111
  22. package/dist/types/src/types/mask.d.ts +49 -49
  23. package/dist/types/src/types/position.d.ts +60 -60
  24. package/index.ts +3 -0
  25. package/package.json +4 -2
  26. package/src/Pops.ts +206 -0
  27. package/src/PopsAnimation.ts +32 -0
  28. package/src/PopsCSS.ts +51 -0
  29. package/src/PopsCore.ts +64 -0
  30. package/src/PopsIcon.ts +95 -0
  31. package/src/PopsInst.ts +21 -0
  32. package/src/components/alert/config.ts +62 -0
  33. package/src/components/alert/index.css +0 -0
  34. package/src/components/alert/index.ts +163 -0
  35. package/src/components/alert/types/index.ts +23 -0
  36. package/src/components/confirm/config.ts +90 -0
  37. package/src/components/confirm/index.css +0 -0
  38. package/src/components/confirm/index.ts +166 -0
  39. package/src/components/confirm/types/index.ts +17 -0
  40. package/src/components/drawer/config.ts +89 -0
  41. package/src/components/drawer/index.css +37 -0
  42. package/src/components/drawer/index.ts +237 -0
  43. package/src/components/drawer/types/index.ts +61 -0
  44. package/src/components/folder/config.ts +147 -0
  45. package/src/components/folder/folderIcon.ts +28 -0
  46. package/src/components/folder/index.css +303 -0
  47. package/src/components/folder/index.ts +929 -0
  48. package/src/components/folder/types/index.ts +97 -0
  49. package/src/components/iframe/config.ts +60 -0
  50. package/src/components/iframe/index.css +76 -0
  51. package/src/components/iframe/index.ts +334 -0
  52. package/src/components/iframe/types/index.ts +139 -0
  53. package/src/components/loading/config.ts +29 -0
  54. package/src/components/loading/index.css +66 -0
  55. package/src/components/loading/index.ts +99 -0
  56. package/src/components/loading/types/index.ts +34 -0
  57. package/src/components/panel/config.ts +519 -0
  58. package/src/components/panel/handlerComponents.ts +2900 -0
  59. package/src/components/panel/index.css +1222 -0
  60. package/src/components/panel/index.ts +207 -0
  61. package/src/components/panel/types/components-button.ts +68 -0
  62. package/src/components/panel/types/components-common.ts +50 -0
  63. package/src/components/panel/types/components-deepMenu.ts +84 -0
  64. package/src/components/panel/types/components-forms.ts +44 -0
  65. package/src/components/panel/types/components-input.ts +78 -0
  66. package/src/components/panel/types/components-own.ts +30 -0
  67. package/src/components/panel/types/components-select.ts +93 -0
  68. package/src/components/panel/types/components-selectMultiple.ts +130 -0
  69. package/src/components/panel/types/components-slider.ts +77 -0
  70. package/src/components/panel/types/components-switch.ts +56 -0
  71. package/src/components/panel/types/components-textarea.ts +68 -0
  72. package/src/components/panel/types/index.ts +177 -0
  73. package/src/components/prompt/config.ts +94 -0
  74. package/src/components/prompt/index.css +34 -0
  75. package/src/components/prompt/index.ts +216 -0
  76. package/src/components/prompt/types/index.ts +55 -0
  77. package/src/components/rightClickMenu/config.ts +98 -0
  78. package/src/components/rightClickMenu/index.css +112 -0
  79. package/src/components/rightClickMenu/index.ts +602 -0
  80. package/src/components/rightClickMenu/types/index.ts +97 -0
  81. package/src/components/searchSuggestion/config.ts +56 -0
  82. package/src/components/searchSuggestion/index.ts +856 -0
  83. package/src/components/searchSuggestion/types/index.ts +239 -0
  84. package/src/components/tooltip/config.ts +34 -0
  85. package/src/components/tooltip/index.css +199 -0
  86. package/src/components/tooltip/index.ts +604 -0
  87. package/src/components/tooltip/types/index.ts +117 -0
  88. package/src/config/CommonCSSClassName.ts +17 -0
  89. package/src/config/GlobalConfig.ts +63 -0
  90. package/src/css/animation.css +987 -0
  91. package/src/css/button.css +551 -0
  92. package/src/css/common.css +48 -0
  93. package/src/css/index.css +253 -0
  94. package/src/css/ninePalaceGridPosition.css +50 -0
  95. package/src/css/scrollbar.css +22 -0
  96. package/src/handler/PopsElementHandler.ts +304 -0
  97. package/src/handler/PopsHandler.ts +589 -0
  98. package/src/svg/arrowLeft.svg +4 -0
  99. package/src/svg/arrowRight.svg +4 -0
  100. package/src/svg/chromeFilled.svg +11 -0
  101. package/src/svg/circleClose.svg +8 -0
  102. package/src/svg/close.svg +5 -0
  103. package/src/svg/cpu.svg +8 -0
  104. package/src/svg/delete.svg +5 -0
  105. package/src/svg/documentCopy.svg +5 -0
  106. package/src/svg/edit.svg +8 -0
  107. package/src/svg/eleme.svg +5 -0
  108. package/src/svg/elemePlus.svg +5 -0
  109. package/src/svg/headset.svg +5 -0
  110. package/src/svg/hide.svg +8 -0
  111. package/src/svg/keyboard.svg +8 -0
  112. package/src/svg/loading.svg +5 -0
  113. package/src/svg/max.svg +5 -0
  114. package/src/svg/min.svg +5 -0
  115. package/src/svg/mise.svg +5 -0
  116. package/src/svg/monitor.svg +5 -0
  117. package/src/svg/next.svg +5 -0
  118. package/src/svg/picture.svg +8 -0
  119. package/src/svg/prev.svg +5 -0
  120. package/src/svg/search.svg +5 -0
  121. package/src/svg/share.svg +5 -0
  122. package/src/svg/upload.svg +5 -0
  123. package/src/svg/videoPause.svg +5 -0
  124. package/src/svg/videoPlay.svg +5 -0
  125. package/src/svg/view.svg +5 -0
  126. package/src/types/PopsDOMUtilsEventType.d.ts +252 -0
  127. package/src/types/animation.d.ts +19 -0
  128. package/src/types/button.d.ts +187 -0
  129. package/src/types/components.d.ts +210 -0
  130. package/src/types/event.d.ts +63 -0
  131. package/src/types/global.d.ts +25 -0
  132. package/src/types/icon.d.ts +32 -0
  133. package/src/types/inst.d.ts +24 -0
  134. package/src/types/main.d.ts +111 -0
  135. package/src/types/mask.d.ts +49 -0
  136. package/src/types/position.d.ts +60 -0
  137. package/src/utils/PopsDOMUtils.ts +2408 -0
  138. package/src/utils/PopsDOMUtilsEventsConfig.ts +4 -0
  139. package/src/utils/PopsInstanceUtils.ts +688 -0
  140. package/src/utils/PopsMathUtils.ts +71 -0
  141. package/src/utils/PopsSafeUtils.ts +22 -0
  142. package/src/utils/PopsUtils.ts +406 -0
package/dist/index.esm.js CHANGED
@@ -992,7 +992,7 @@ class PopsDOMUtilsEvent {
992
992
  if (typeof currentParam === "boolean") {
993
993
  option.capture = currentParam;
994
994
  }
995
- else if (typeof currentParam === "object" && "capture" in currentParam) {
995
+ else if (typeof currentParam === "object" && currentParam != null && "capture" in currentParam) {
996
996
  option.capture = currentParam.capture;
997
997
  }
998
998
  return option;
@@ -1059,16 +1059,18 @@ class PopsDOMUtilsEvent {
1059
1059
  // 目标函数、事件名、子元素选择器
1060
1060
  isRemoveAll = true;
1061
1061
  }
1062
+ if (args.length === 5 && typeof args[4] === "function" && typeof filter !== "function") {
1063
+ // 目标函数、事件名、回调函数、事件配置、过滤函数
1064
+ filter = option;
1065
+ }
1062
1066
  elementList.forEach((elementItem) => {
1063
1067
  /* 获取对象上的事件 */
1064
1068
  const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
1065
1069
  eventTypeList.forEach((eventName) => {
1066
- let handlers = elementEvents[eventName] || [];
1067
- if (typeof filter === "function") {
1068
- handlers = handlers.filter(filter);
1069
- }
1070
- for (let index = 0; index < handlers.length; index++) {
1071
- const handler = handlers[index];
1070
+ const handlers = elementEvents[eventName] || [];
1071
+ const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
1072
+ for (let index = 0; index < filterHandler.length; index++) {
1073
+ const handler = filterHandler[index];
1072
1074
  let flag = true;
1073
1075
  if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
1074
1076
  // callback不同
@@ -1080,13 +1082,18 @@ class PopsDOMUtilsEvent {
1080
1082
  flag = false;
1081
1083
  }
1082
1084
  }
1083
- if (flag && listenerOption.capture !== handler.option.capture) {
1085
+ if (flag &&
1086
+ typeof handler.option.capture === "boolean" &&
1087
+ listenerOption.capture !== handler.option.capture) {
1084
1088
  // 事件的配置项不同
1085
1089
  flag = false;
1086
1090
  }
1087
1091
  if (flag || isRemoveAll) {
1088
1092
  elementItem.removeEventListener(eventName, handler.callback, handler.option);
1089
- handlers.splice(index--, 1);
1093
+ const findIndex = handlers.findIndex((item) => item === handler);
1094
+ if (findIndex !== -1) {
1095
+ handlers.splice(findIndex, 1);
1096
+ }
1090
1097
  }
1091
1098
  }
1092
1099
  if (handlers.length === 0) {
@@ -2577,9 +2584,9 @@ const PopsElementHandler = {
2577
2584
  popsStyle += `height: ${__config.height};`;
2578
2585
  }
2579
2586
  const hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
2580
- return /*html*/ `
2581
- <div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""}
2582
- <div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
2587
+ return /*html*/ `
2588
+ <div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""}
2589
+ <div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
2583
2590
  </div>`;
2584
2591
  },
2585
2592
  /**
@@ -2605,22 +2612,22 @@ const PopsElementHandler = {
2605
2612
  iframe_config.topRightButton.split("|").forEach((item) => {
2606
2613
  // 最小化、最大化、窗口化、关闭按钮
2607
2614
  item = item.toLowerCase();
2608
- topRightButtonHTML += /*html*/ `
2609
- <button class="pops-header-control" type="button" data-type="${item}">
2610
- <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
2615
+ topRightButtonHTML += /*html*/ `
2616
+ <button class="pops-header-control" type="button" data-type="${item}">
2617
+ <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
2611
2618
  </button>`;
2612
2619
  });
2613
- resultHTML = /*html*/ `
2620
+ resultHTML = /*html*/ `
2614
2621
  <div class="pops-header-controls" data-margin>${topRightButtonHTML}</div>`;
2615
2622
  }
2616
2623
  else {
2617
2624
  if (confirm_config.btn?.close?.enable) {
2618
2625
  // 关闭按钮
2619
- closeHTML = /*html*/ `
2620
- <div class="pops-header-controls">
2621
- <button class="pops-header-control" type="button" data-type="close" data-header>
2622
- <i class="pops-icon">${PopsIcon.getIcon("close")}</i>
2623
- </button>
2626
+ closeHTML = /*html*/ `
2627
+ <div class="pops-header-controls">
2628
+ <button class="pops-header-control" type="button" data-type="close" data-header>
2629
+ <i class="pops-icon">${PopsIcon.getIcon("close")}</i>
2630
+ </button>
2624
2631
  </div>`;
2625
2632
  }
2626
2633
  resultHTML = closeHTML;
@@ -2687,14 +2694,14 @@ const PopsElementHandler = {
2687
2694
  iconHTML = iconHTML || "";
2688
2695
  okIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${config.btn.ok.iconIsLoading}">${iconHTML}</i>`;
2689
2696
  }
2690
- okHTML = /*html*/ `
2691
- <button
2692
- class="pops-${type}-btn-ok ${okButtonSizeClassName}"
2693
- type="button"
2694
- data-type="${confirm_config.btn.ok?.type}"
2695
- data-has-icon="${(confirm_config.btn.ok.icon || "") !== ""}"
2696
- data-rightIcon="${confirm_config.btn.ok?.rightIcon}"
2697
- >${okIconHTML}<span>${config.btn.ok.text}</span>
2697
+ okHTML = /*html*/ `
2698
+ <button
2699
+ class="pops-${type}-btn-ok ${okButtonSizeClassName}"
2700
+ type="button"
2701
+ data-type="${confirm_config.btn.ok?.type}"
2702
+ data-has-icon="${(confirm_config.btn.ok.icon || "") !== ""}"
2703
+ data-rightIcon="${confirm_config.btn.ok?.rightIcon}"
2704
+ >${okIconHTML}<span>${config.btn.ok.text}</span>
2698
2705
  </button>`;
2699
2706
  }
2700
2707
  if (confirm_config.btn?.cancel?.enable) {
@@ -2720,14 +2727,14 @@ const PopsElementHandler = {
2720
2727
  iconHTML = iconHTML || "";
2721
2728
  cancelIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.cancel.iconIsLoading}">${iconHTML}</i>`;
2722
2729
  }
2723
- cancelHTML = /*html*/ `
2724
- <button
2725
- class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
2726
- type="button"
2727
- data-type="${confirm_config.btn.cancel.type}"
2728
- data-has-icon="${(confirm_config.btn.cancel.icon || "") !== ""}"
2729
- data-rightIcon="${confirm_config.btn.cancel.rightIcon}"
2730
- >${cancelIconHTML}<span>${confirm_config.btn.cancel.text}</span>
2730
+ cancelHTML = /*html*/ `
2731
+ <button
2732
+ class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
2733
+ type="button"
2734
+ data-type="${confirm_config.btn.cancel.type}"
2735
+ data-has-icon="${(confirm_config.btn.cancel.icon || "") !== ""}"
2736
+ data-rightIcon="${confirm_config.btn.cancel.rightIcon}"
2737
+ >${cancelIconHTML}<span>${confirm_config.btn.cancel.text}</span>
2731
2738
  </button>`;
2732
2739
  }
2733
2740
  if (confirm_config.btn?.other?.enable) {
@@ -2750,14 +2757,14 @@ const PopsElementHandler = {
2750
2757
  iconHTML = iconHTML || "";
2751
2758
  otherIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.other.iconIsLoading}">${iconHTML}</i>`;
2752
2759
  }
2753
- ohterHTML = /*html*/ `
2754
- <button
2755
- class="pops-${type}-btn-other ${otherButtonSizeClassName}"
2756
- type="button"
2757
- data-type="${confirm_config.btn.other.type}"
2758
- data-has-icon="${(confirm_config.btn.other.icon || "") !== ""}"
2759
- data-rightIcon="${confirm_config.btn.other.rightIcon}"
2760
- >${otherIconHTML}<span>${confirm_config.btn.other.text}</span>
2760
+ ohterHTML = /*html*/ `
2761
+ <button
2762
+ class="pops-${type}-btn-other ${otherButtonSizeClassName}"
2763
+ type="button"
2764
+ data-type="${confirm_config.btn.other.type}"
2765
+ data-has-icon="${(confirm_config.btn.other.icon || "") !== ""}"
2766
+ data-rightIcon="${confirm_config.btn.other.rightIcon}"
2767
+ >${otherIconHTML}<span>${confirm_config.btn.other.text}</span>
2761
2768
  </button>`;
2762
2769
  }
2763
2770
  if (confirm_config.btn.merge) {
@@ -2768,11 +2775,11 @@ const PopsElementHandler = {
2768
2775
  else {
2769
2776
  flexStyle += "flex-direction: row;";
2770
2777
  }
2771
- resultHTML = /*html*/ `
2772
- <div class="pops-botttom-btn-controls pops-${type}-btn" style="${btnStyle}">${ohterHTML}<div
2773
- class="pops-${type}-btn-merge"
2774
- style="${flexStyle}">${okHTML}${cancelHTML}</div>
2775
- </div>
2778
+ resultHTML = /*html*/ `
2779
+ <div class="pops-botttom-btn-controls pops-${type}-btn" style="${btnStyle}">${ohterHTML}<div
2780
+ class="pops-${type}-btn-merge"
2781
+ style="${flexStyle}">${okHTML}${cancelHTML}</div>
2782
+ </div>
2776
2783
  `;
2777
2784
  }
2778
2785
  else {
@@ -2800,37 +2807,37 @@ const PopsElementHandler = {
2800
2807
  },
2801
2808
  };
2802
2809
 
2803
- var indexCSS = "@charset \"utf-8\";\n.pops * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -webkit-tap-highlight-color: transparent;\n /* 代替::-webkit-scrollbar */\n scrollbar-width: thin;\n}\n.pops {\n --pops-bg-opacity: 1;\n --pops-bd-opacity: 1;\n --pops-font-size: 16px;\n interpolate-size: allow-keywords;\n --pops-color: #000000;\n --pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\n --pops-box-shadow-color: rgba(0, 0, 0, 0.12);\n --pops-title-color: #000000;\n --pops-title-border-color: var(--pops-bd-color);\n --pops-content-color: #000000;\n --pops-bottom-btn-controls-border-color: var(--pops-bd-color);\n --pops-components-is-disabled-text-color: #a8abb2;\n --pops-components-is-disabled-bg-color: #f5f7fa;\n}\n@media (prefers-color-scheme: dark) {\n .pops {\n --pops-mask-bg-opacity: 0.8;\n --pops-color: #ffffff;\n --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));\n --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));\n --pops-box-shadow-color: rgba(81, 81, 81, 0.12);\n --pops-title-color: #e8e8e8;\n --pops-title-border-color: var(--pops-bd-color);\n --pops-content-color: #e5e5e5;\n --pops-components-is-disabled-text-color: #a8abb2;\n --pops-components-is-disabled-bg-color: #262727;\n }\n}\n.pops {\n color: var(--pops-color);\n background-color: var(--pops-bg-color);\n border: 1px solid var(--pops-bd-color);\n border-radius: 4px;\n font-size: var(--pops-font-size);\n line-height: normal;\n box-shadow: 0 0 12px var(--pops-box-shadow-color);\n box-sizing: border-box;\n overflow: hidden;\n transition: all 0.35s;\n display: flex;\n flex-direction: column;\n}\n.pops-anim {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.pops-anim[anim=\"\"] {\n top: unset;\n right: unset;\n bottom: unset;\n left: unset;\n width: unset;\n height: unset;\n transition: none;\n}\n/* 底部图标动画和样式 */\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\n animation: rotating 2s linear infinite;\n}\n.pops i.pops-bottom-icon {\n height: 1em;\n width: 1em;\n line-height: normal;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n fill: currentColor;\n color: inherit;\n font-size: inherit;\n}\n\n/* 遮罩层样式 */\n.pops-mask {\n --pops-mask-bg-opacity: 0.4;\n --pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\n}\n.pops-mask {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 0;\n border-radius: 0;\n background-color: var(--pops-mask-bg-color);\n box-shadow: none;\n transition: none;\n}\n\n.pops-header-controls button.pops-header-control[type][data-header] {\n float: right;\n margin: 0 0;\n outline: 0;\n border: 0;\n border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n background-color: transparent;\n color: #888;\n cursor: pointer;\n}\n.pops-header-controls button.pops-header-control[data-type=\"max\"],\n.pops-header-controls button.pops-header-control[data-type=\"mise\"],\n.pops-header-controls button.pops-header-control[data-type=\"min\"] {\n outline: 0 !important;\n border: 0;\n border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n background-color: transparent;\n color: rgb(136, 136, 136);\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n}\nbutton.pops-header-control i {\n color: rgb(144, 147, 153);\n font-size: inherit;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n fill: currentColor;\n}\nbutton.pops-header-control svg {\n height: 1.25em;\n width: 1.25em;\n}\nbutton.pops-header-control {\n right: 15px;\n padding: 0;\n border: none;\n outline: 0;\n background: 0 0;\n cursor: pointer;\n position: unset;\n line-height: normal;\n}\nbutton.pops-header-control i:hover {\n color: rgb(64, 158, 255);\n}\n.pops-header-controls[data-margin] button.pops-header-control {\n margin: 0 6px;\n display: flex;\n align-items: center;\n}\n.pops[type-value] .pops-header-controls {\n display: flex;\n gap: 6px;\n}\n\n/* 代码块 <code> */\n.pops code {\n font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n font-size: 0.85em;\n color: #000;\n background-color: #f0f0f0;\n border-radius: 3px;\n border: 0;\n padding: 0.2em 0;\n white-space: normal;\n background: #f5f5f5;\n text-wrap: wrap;\n text-align: left;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.4;\n -moz-tab-size: 8;\n -o-tab-size: 8;\n tab-size: 8;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n direction: ltr;\n}\n\n.pops code::before,\n.pops code::after {\n letter-spacing: -0.2em;\n content: \"\\00a0\";\n}\n\n/* 标题 */\n.pops .pops-title {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--pops-title-border-color);\n width: 100%;\n height: var(--container-title-height);\n}\n/* 标题-普通文本 */\n.pops .pops-title p[pops] {\n color: var(--pops-title-color);\n width: 100%;\n overflow: hidden;\n text-indent: 15px;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n line-height: normal;\n}\n\n/* 内容 */\n.pops .pops-content {\n width: 100%;\n /*height: calc(\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\n\t);*/\n flex: 1;\n overflow: auto;\n word-break: break-word;\n}\n/* 内容-普通文本 */\n.pops .pops-content p[pops] {\n color: var(--pops-content-color);\n padding: 5px 10px;\n text-indent: 15px;\n}\n\n/* 底部-按钮组 */\n.pops .pops-botttom-btn-controls {\n display: flex;\n padding: 10px 10px 10px 10px;\n width: 100%;\n height: var(--container-bottom-btn-height);\n max-height: var(--container-bottom-btn-height);\n line-height: normal;\n border-top: 1px solid var(--pops-bottom-btn-controls-border-color);\n text-align: right;\n align-items: center;\n}\n";
2810
+ var indexCSS = "@charset \"utf-8\";\r\n.pops * {\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n /* 代替::-webkit-scrollbar */\r\n scrollbar-width: thin;\r\n}\r\n.pops {\r\n --pops-bg-opacity: 1;\r\n --pops-bd-opacity: 1;\r\n --pops-font-size: 16px;\r\n interpolate-size: allow-keywords;\r\n --pops-color: #000000;\r\n --pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\r\n --pops-box-shadow-color: rgba(0, 0, 0, 0.12);\r\n --pops-title-color: #000000;\r\n --pops-title-border-color: var(--pops-bd-color);\r\n --pops-content-color: #000000;\r\n --pops-bottom-btn-controls-border-color: var(--pops-bd-color);\r\n --pops-components-is-disabled-text-color: #a8abb2;\r\n --pops-components-is-disabled-bg-color: #f5f7fa;\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n .pops {\r\n --pops-mask-bg-opacity: 0.8;\r\n --pops-color: #ffffff;\r\n --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));\r\n --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));\r\n --pops-box-shadow-color: rgba(81, 81, 81, 0.12);\r\n --pops-title-color: #e8e8e8;\r\n --pops-title-border-color: var(--pops-bd-color);\r\n --pops-content-color: #e5e5e5;\r\n --pops-components-is-disabled-text-color: #a8abb2;\r\n --pops-components-is-disabled-bg-color: #262727;\r\n }\r\n}\r\n.pops {\r\n color: var(--pops-color);\r\n background-color: var(--pops-bg-color);\r\n border: 1px solid var(--pops-bd-color);\r\n border-radius: 4px;\r\n font-size: var(--pops-font-size);\r\n line-height: normal;\r\n box-shadow: 0 0 12px var(--pops-box-shadow-color);\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n transition: all 0.35s;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.pops-anim {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n.pops-anim[anim=\"\"] {\r\n top: unset;\r\n right: unset;\r\n bottom: unset;\r\n left: unset;\r\n width: unset;\r\n height: unset;\r\n transition: none;\r\n}\r\n/* 底部图标动画和样式 */\r\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\r\n animation: rotating 2s linear infinite;\r\n}\r\n.pops i.pops-bottom-icon {\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: inherit;\r\n font-size: inherit;\r\n}\r\n\r\n/* 遮罩层样式 */\r\n.pops-mask {\r\n --pops-mask-bg-opacity: 0.4;\r\n --pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\r\n}\r\n.pops-mask {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n border-radius: 0;\r\n background-color: var(--pops-mask-bg-color);\r\n box-shadow: none;\r\n transition: none;\r\n}\r\n\r\n.pops-header-controls button.pops-header-control[type][data-header] {\r\n float: right;\r\n margin: 0 0;\r\n outline: 0;\r\n border: 0;\r\n border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n background-color: transparent;\r\n color: #888;\r\n cursor: pointer;\r\n}\r\n.pops-header-controls button.pops-header-control[data-type=\"max\"],\r\n.pops-header-controls button.pops-header-control[data-type=\"mise\"],\r\n.pops-header-controls button.pops-header-control[data-type=\"min\"] {\r\n outline: 0 !important;\r\n border: 0;\r\n border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n background-color: transparent;\r\n color: rgb(136, 136, 136);\r\n cursor: pointer;\r\n transition: all 0.3s ease-in-out;\r\n}\r\nbutton.pops-header-control i {\r\n color: rgb(144, 147, 153);\r\n font-size: inherit;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n}\r\nbutton.pops-header-control svg {\r\n height: 1.25em;\r\n width: 1.25em;\r\n}\r\nbutton.pops-header-control {\r\n right: 15px;\r\n padding: 0;\r\n border: none;\r\n outline: 0;\r\n background: 0 0;\r\n cursor: pointer;\r\n position: unset;\r\n line-height: normal;\r\n}\r\nbutton.pops-header-control i:hover {\r\n color: rgb(64, 158, 255);\r\n}\r\n.pops-header-controls[data-margin] button.pops-header-control {\r\n margin: 0 6px;\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops[type-value] .pops-header-controls {\r\n display: flex;\r\n gap: 6px;\r\n}\r\n\r\n/* 代码块 <code> */\r\n.pops code {\r\n font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\r\n font-size: 0.85em;\r\n color: #000;\r\n background-color: #f0f0f0;\r\n border-radius: 3px;\r\n border: 0;\r\n padding: 0.2em 0;\r\n white-space: normal;\r\n background: #f5f5f5;\r\n text-wrap: wrap;\r\n text-align: left;\r\n word-spacing: normal;\r\n word-break: normal;\r\n word-wrap: normal;\r\n line-height: 1.4;\r\n -moz-tab-size: 8;\r\n -o-tab-size: 8;\r\n tab-size: 8;\r\n -webkit-hyphens: none;\r\n -moz-hyphens: none;\r\n -ms-hyphens: none;\r\n hyphens: none;\r\n direction: ltr;\r\n}\r\n\r\n.pops code::before,\r\n.pops code::after {\r\n letter-spacing: -0.2em;\r\n content: \"\\00a0\";\r\n}\r\n\r\n/* 标题 */\r\n.pops .pops-title {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-bottom: 1px solid var(--pops-title-border-color);\r\n width: 100%;\r\n height: var(--container-title-height);\r\n}\r\n/* 标题-普通文本 */\r\n.pops .pops-title p[pops] {\r\n color: var(--pops-title-color);\r\n width: 100%;\r\n overflow: hidden;\r\n text-indent: 15px;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n line-height: normal;\r\n}\r\n\r\n/* 内容 */\r\n.pops .pops-content {\r\n width: 100%;\r\n /*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n flex: 1;\r\n overflow: auto;\r\n word-break: break-word;\r\n}\r\n/* 内容-普通文本 */\r\n.pops .pops-content p[pops] {\r\n color: var(--pops-content-color);\r\n padding: 5px 10px;\r\n text-indent: 15px;\r\n}\r\n\r\n/* 底部-按钮组 */\r\n.pops .pops-botttom-btn-controls {\r\n display: flex;\r\n padding: 10px 10px 10px 10px;\r\n width: 100%;\r\n height: var(--container-bottom-btn-height);\r\n max-height: var(--container-bottom-btn-height);\r\n line-height: normal;\r\n border-top: 1px solid var(--pops-bottom-btn-controls-border-color);\r\n text-align: right;\r\n align-items: center;\r\n}\r\n";
2804
2811
 
2805
- var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\n position: fixed;\n top: 0;\n left: 0;\n}\n.pops[position=\"top\"] {\n position: fixed;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n.pops[position=\"top_right\"] {\n position: fixed;\n top: 0;\n right: 0;\n}\n.pops[position=\"center_left\"] {\n position: fixed;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n.pops[position=\"center\"] {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.pops[position=\"center_right\"] {\n position: fixed;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n.pops[position=\"bottom_left\"] {\n position: fixed;\n bottom: 0;\n left: 0;\n}\n.pops[position=\"bottom\"] {\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 0);\n}\n.pops[position=\"bottom_right\"] {\n position: fixed;\n right: 0;\n bottom: 0;\n}\n";
2812
+ var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n}\r\n.pops[position=\"top\"] {\r\n position: fixed;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n.pops[position=\"top_right\"] {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n}\r\n.pops[position=\"center_left\"] {\r\n position: fixed;\r\n top: 50%;\r\n left: 0;\r\n transform: translateY(-50%);\r\n}\r\n.pops[position=\"center\"] {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n.pops[position=\"center_right\"] {\r\n position: fixed;\r\n top: 50%;\r\n right: 0;\r\n transform: translateY(-50%);\r\n}\r\n.pops[position=\"bottom_left\"] {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n}\r\n.pops[position=\"bottom\"] {\r\n position: fixed;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translate(-50%, 0);\r\n}\r\n.pops[position=\"bottom_right\"] {\r\n position: fixed;\r\n right: 0;\r\n bottom: 0;\r\n}\r\n";
2806
2813
 
2807
- var scrollbarCSS = "/* ::-webkit-scrollbar 是非标准的css */\n/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */\n.pops ::-webkit-scrollbar {\n width: 6px;\n height: 0;\n}\n\n/* 滚动条轨道 */\n.pops ::-webkit-scrollbar-track {\n width: 0;\n}\n/* 滚动条滑块 */\n.pops ::-webkit-scrollbar-thumb {\n min-height: 28px;\n border-radius: 2em;\n background: rgb(204, 204, 204, var(--pops-bg-opacity, 1));\n background-clip: padding-box;\n}\n/* 滚动条滑块 */\n.pops ::-webkit-scrollbar-thumb:hover {\n background: rgb(178, 178, 178, var(--pops-bg-opacity, 1));\n}\n";
2814
+ var scrollbarCSS = "/* ::-webkit-scrollbar 是非标准的css */\r\n/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */\r\n.pops ::-webkit-scrollbar {\r\n width: 6px;\r\n height: 0;\r\n}\r\n\r\n/* 滚动条轨道 */\r\n.pops ::-webkit-scrollbar-track {\r\n width: 0;\r\n}\r\n/* 滚动条滑块 */\r\n.pops ::-webkit-scrollbar-thumb {\r\n min-height: 28px;\r\n border-radius: 2em;\r\n background: rgb(204, 204, 204, var(--pops-bg-opacity, 1));\r\n background-clip: padding-box;\r\n}\r\n/* 滚动条滑块 */\r\n.pops ::-webkit-scrollbar-thumb:hover {\r\n background: rgb(178, 178, 178, var(--pops-bg-opacity, 1));\r\n}\r\n";
2808
2815
 
2809
- var buttonCSS = ".pops {\n --button-font-size: 14px;\n --button-height: 32px;\n --button-color: rgb(51, 51, 51);\n --button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n --button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n --button-margin-top: 0px;\n --button-margin-bottom: 0px;\n --button-margin-left: 5px;\n --button-margin-right: 5px;\n --button-padding-top: 6px;\n --button-padding-bottom: 6px;\n --button-padding-left: 12px;\n --button-padding-right: 12px;\n --button-radius: 4px;\n\n --container-title-height: 55px;\n --container-bottom-btn-height: 55px;\n\n /* default按钮 */\n --button-default-color: #333333;\n --button-default-bd-color: #dcdfe6;\n --button-default-bg-color: #ffffff;\n --button-default-active-color: #409eff;\n --button-default-active-bd-color: #409eff;\n --button-default-active-bg-color: #ecf5ff;\n --button-default-hover-color: #409eff;\n --button-default-hover-bd-color: #c6e2ff;\n --button-default-hover-bg-color: #ecf5ff;\n --button-default-focus-visible-outline-color: #a0cfff;\n --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n --button-default-focus-visible-outline-offset: 1px;\n --button-default-disabled-color: #a8abb2;\n --button-default-disabled-bd-color: #ffffff;\n --button-default-disabled-bg-color: #e4e7ed;\n\n /* primary按钮 */\n --button-primary-color: #ffffff;\n --button-primary-bd-color: #409eff;\n --button-primary-bg-color: #409eff;\n --button-primary-active-color: #ffffff;\n --button-primary-active-bd-color: #337ecc;\n --button-primary-active-bg-color: #337ecc;\n --button-primary-hover-color: #ffffff;\n --button-primary-hover-bd-color: #79bbff;\n --button-primary-hover-bg-color: #79bbff;\n --button-primary-focus-visible-outline-color: #a0cfff;\n --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n --button-primary-focus-visible-outline-offset: 1px;\n --button-primary-disabled-color: #ffffff80;\n --button-primary-disabled-bd-color: #a0cfff;\n --button-primary-disabled-bg-color: #a0cfff;\n\n /* success按钮 */\n --button-success-color: #ffffff;\n --button-success-bd-color: #4cae4c;\n --button-success-bg-color: #5cb85c;\n --button-success-active-color: #ffffff;\n --button-success-active-bd-color: #529b2e;\n --button-success-active-bg-color: #529b2e;\n --button-success-hover-color: #ffffff;\n --button-success-hover-bd-color: #95d475;\n --button-success-hover-bg-color: #95d475;\n --button-success-focus-visible-outline-color: #b3e19d;\n --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n --button-success-focus-visible-outline-offset: 1px;\n --button-success-disabled-color: #ffffff80;\n --button-success-disabled-bd-color: #b3e19d;\n --button-success-disabled-bg-color: #b3e19d;\n\n /* info按钮 */\n --button-info-color: #ffffff;\n --button-info-bd-color: #909399;\n --button-info-bg-color: #909399;\n --button-info-active-color: #ffffff;\n --button-info-active-bd-color: #73767a;\n --button-info-active-bg-color: #73767a;\n --button-info-hover-color: #ffffff;\n --button-info-hover-bd-color: #b1b3b8;\n --button-info-hover-bg-color: #b1b3b8;\n --button-info-focus-visible-outline-color: #c8c9cc;\n --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n --button-info-focus-visible-outline-offset: 1px;\n --button-info-disabled-color: #ffffff80;\n --button-info-disabled-bd-color: #c8c9cc;\n --button-info-disabled-bg-color: #c8c9cc;\n\n /* warning按钮 */\n --button-warning-color: #ffffff;\n --button-warning-bd-color: #e6a23c;\n --button-warning-bg-color: #e6a23c;\n --button-warning-active-color: #ffffff;\n --button-warning-active-bd-color: #b88230;\n --button-warning-active-bg-color: #b88230;\n --button-warning-hover-color: #ffffff80;\n --button-warning-hover-bd-color: #eebe77;\n --button-warning-hover-bg-color: #eebe77;\n --button-warning-focus-visible-outline-color: #f3d19e;\n --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n --button-warning-focus-visible-outline-offset: 1px;\n --button-warning-disabled-color: #ffffff80;\n --button-warning-disabled-bd-color: #f3d19e;\n --button-warning-disabled-bg-color: #f3d19e;\n\n /* danger按钮 */\n --button-danger-color: #ffffff;\n --button-danger-bd-color: #f56c6c;\n --button-danger-bg-color: #f56c6c;\n --button-danger-active-color: #ffffff;\n --button-danger-active-bd-color: #c45656;\n --button-danger-active-bg-color: #c45656;\n --button-danger-hover-color: #ffffff;\n --button-danger-hover-bd-color: #f89898;\n --button-danger-hover-bg-color: #f89898;\n --button-danger-focus-visible-outline-color: #fab6b6;\n --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n --button-danger-focus-visible-outline-offset: 1px;\n --button-danger-disabled-color: #ffffff80;\n --button-danger-disabled-bd-color: #fab6b6;\n --button-danger-disabled-bg-color: #fab6b6;\n\n /* xiaomi-primary按钮 */\n --button-xiaomi-primary-color: #ffffff;\n --button-xiaomi-primary-bd-color: #ff5c00;\n --button-xiaomi-primary-bg-color: #ff5c00;\n --button-xiaomi-primary-active-color: #ffffff;\n --button-xiaomi-primary-active-bd-color: #da4f00;\n --button-xiaomi-primary-active-bg-color: #da4f00;\n --button-xiaomi-primary-hover-color: #ffffff;\n --button-xiaomi-primary-hover-bd-color: #ff7e29;\n --button-xiaomi-primary-hover-bg-color: #ff7e29;\n --button-xiaomi-primary-focus-visible-outline-color: #ffa061;\n --button-xiaomi-primary-focus-visible-outline: 2px solid var(--button-xiaomi-primary-focus-visible-outline-color);\n --button-xiaomi-primary-focus-visible-outline-offset: 1px;\n --button-xiaomi-primary-disabled-color: #ffffff80;\n --button-xiaomi-primary-disabled-bd-color: #fad5b6;\n --button-xiaomi-primary-disabled-bg-color: #fad5b6;\n\n /* violet按钮 */\n --button-violet-color: #ffffff;\n --button-violet-bd-color: #626aef;\n --button-violet-bg-color: #626aef;\n --button-violet-active-color: #ffffff;\n --button-violet-active-bd-color: #8188f2;\n --button-violet-active-bg-color: #8188f2;\n --button-violet-hover-color: #ffffff;\n --button-violet-hover-bd-color: #4b50ad;\n --button-violet-hover-bg-color: #4b50ad;\n --button-violet-focus-visible-outline-color: #2a598a;\n --button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);\n --button-violet-focus-visible-outline-offset: 1px;\n --button-violet-disabled-color: #ffffff80;\n --button-violet-disabled-bd-color: #3b3f82;\n --button-violet-disabled-bg-color: #3b3f82;\n}\n\n@media (prefers-color-scheme: dark) {\n .pops {\n /* default按钮 */\n --button-default-color: #cfd3dc;\n --button-default-bd-color: #4c4d4f;\n --button-default-bg-color: transparent;\n --button-default-active-color: #409eff;\n --button-default-active-bd-color: #409eff;\n --button-default-active-bg-color: #18222c;\n --button-default-hover-color: #409eff;\n --button-default-hover-bd-color: #213d5b;\n --button-default-hover-bg-color: #18222c;\n --button-default-focus-visible-outline-color: #2a598a;\n --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n --button-default-focus-visible-outline-offset: 1px;\n --button-default-disabled-color: #ffffff80;\n --button-default-disabled-bd-color: #414243;\n --button-default-disabled-bg-color: transparent;\n\n /* primary按钮 */\n --button-primary-color: #ffffff;\n --button-primary-bd-color: #409eff;\n --button-primary-bg-color: #409eff;\n --button-primary-active-color: #ffffff;\n --button-primary-active-bd-color: #66b1ff;\n --button-primary-active-bg-color: #66b1ff;\n --button-primary-hover-color: #ffffff;\n --button-primary-hover-bd-color: #3375b9;\n --button-primary-hover-bg-color: #3375b9;\n --button-primary-focus-visible-outline-color: #2a598a;\n --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n --button-primary-focus-visible-outline-offset: 1px;\n --button-primary-disabled-color: #ffffff80;\n --button-primary-disabled-bd-color: #2a598a;\n --button-primary-disabled-bg-color: #2a598a;\n\n /* success按钮 */\n --button-success-color: #ffffff;\n --button-success-bd-color: #67c23a;\n --button-success-bg-color: #67c23a;\n --button-success-active-color: #ffffff;\n --button-success-active-bd-color: #85ce61;\n --button-success-active-bg-color: #85ce61;\n --button-success-hover-color: #ffffff;\n --button-success-hover-bd-color: #4e8e2f;\n --button-success-hover-bg-color: #4e8e2f;\n --button-success-focus-visible-outline-color: #3e6b27;\n --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n --button-success-focus-visible-outline-offset: 1px;\n --button-success-disabled-color: #ffffff80;\n --button-success-disabled-bd-color: #3e6b27;\n --button-success-disabled-bg-color: #3e6b27;\n\n /* info按钮 */\n --button-info-color: #ffffff;\n --button-info-bd-color: #909399;\n --button-info-bg-color: #909399;\n --button-info-active-color: #ffffff;\n --button-info-active-bd-color: #a6a9ad;\n --button-info-active-bg-color: #a6a9ad;\n --button-info-hover-color: #ffffff;\n --button-info-hover-bd-color: #6b6d71;\n --button-info-hover-bg-color: #6b6d71;\n --button-info-focus-visible-outline-color: #525457;\n --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n --button-info-focus-visible-outline-offset: 1px;\n --button-info-disabled-color: #ffffff80;\n --button-info-disabled-bd-color: #525457;\n --button-info-disabled-bg-color: #525457;\n\n /* warning按钮 */\n --button-warning-color: #ffffff;\n --button-warning-bd-color: #e6a23c;\n --button-warning-bg-color: #e6a23c;\n --button-warning-active-color: #ffffff;\n --button-warning-active-bd-color: #ebb563;\n --button-warning-active-bg-color: #ebb563;\n --button-warning-hover-color: #ffffff80;\n --button-warning-hover-bd-color: #a77730;\n --button-warning-hover-bg-color: #a77730;\n --button-warning-focus-visible-outline-color: #7d5b28;\n --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n --button-warning-focus-visible-outline-offset: 1px;\n --button-warning-disabled-color: #ffffff80;\n --button-warning-disabled-bd-color: #7d5b28;\n --button-warning-disabled-bg-color: #7d5b28;\n\n /* danger按钮 */\n --button-danger-color: #ffffff;\n --button-danger-bd-color: #f56c6c;\n --button-danger-bg-color: #f56c6c;\n --button-danger-active-color: #ffffff;\n --button-danger-active-bd-color: #f78989;\n --button-danger-active-bg-color: #f78989;\n --button-danger-hover-color: #ffffff;\n --button-danger-hover-bd-color: #b25252;\n --button-danger-hover-bg-color: #b25252;\n --button-danger-focus-visible-outline-color: #854040;\n --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n --button-danger-focus-visible-outline-offset: 1px;\n --button-danger-disabled-color: #ffffff80;\n --button-danger-disabled-bd-color: #854040;\n --button-danger-disabled-bg-color: #854040;\n }\n}\n.pops[data-bottom-btn=\"false\"] {\n --container-bottom-btn-height: 0px;\n}\n.pops button {\n white-space: nowrap;\n float: right;\n display: inline-block;\n margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);\n padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);\n outline: 0;\n}\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\n display: none;\n}\n.pops button {\n border-radius: var(--button-radius);\n box-shadow: none;\n font-weight: 400;\n font-size: var(--button-font-size);\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n}\n.pops button {\n display: flex;\n align-items: center;\n height: var(--button-height);\n line-height: normal;\n box-sizing: border-box;\n border: 1px solid var(--button-bd-color);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops button {\n color: var(--button-color);\n border-color: var(--button-bd-color);\n background-color: var(--button-bg-color);\n}\n.pops button:active {\n color: var(--button-color);\n border-color: var(--button-bd-color);\n background-color: var(--button-bg-color);\n outline: 0;\n}\n.pops button:hover {\n color: var(--button-color);\n border-color: var(--button-bd-color);\n background-color: var(--button-bg-color);\n}\n.pops button:focus-visible {\n color: var(--button-color);\n border-color: var(--button-bd-color);\n background-color: var(--button-bg-color);\n}\n.pops button:disabled {\n cursor: not-allowed;\n color: var(--button-color);\n border-color: var(--button-bd-color);\n background-color: var(--button-bg-color);\n}\n.pops button.pops-button-large {\n --button-height: 32px;\n --button-padding-top: 12px;\n --button-padding-bottom: 12px;\n --button-padding-left: 19px;\n --button-padding-right: 19px;\n --button-font-size: 14px;\n --button-border-radius: 4px;\n}\n\n.pops button.pops-button-small {\n --button-height: 24px;\n --button-padding-top: 5px;\n --button-padding-bottom: 5px;\n --button-padding-left: 11px;\n --button-padding-right: 11px;\n --button-font-size: 12px;\n --button-border-radius: 4px;\n}\n.pops-panel-button-no-icon .pops-panel-button_inner i {\n display: none;\n}\n.pops-panel-button-right-icon .pops-panel-button_inner {\n flex-direction: row-reverse;\n}\n.pops-panel-button .pops-panel-button_inner i:has(svg),\n.pops-panel-button-right-icon .pops-panel-button-text {\n margin-right: 6px;\n}\n\n.pops button[data-type=\"default\"] {\n --button-color: var(--button-default-color);\n --button-bd-color: var(--button-default-bd-color);\n --button-bg-color: var(--button-default-bg-color);\n}\n.pops button[data-type=\"default\"]:active {\n --button-color: var(--button-default-active-color);\n --button-bd-color: var(--button-default-active-bd-color);\n --button-bg-color: var(--button-default-active-bg-color);\n}\n.pops button[data-type=\"default\"]:hover {\n --button-color: var(--button-default-hover-color);\n --button-bd-color: var(--button-default-hover-bd-color);\n --button-bg-color: var(--button-default-hover-bg-color);\n}\n.pops button[data-type=\"default\"]:focus-visible {\n outline: var(--button-default-focus-visible-outline);\n outline-offset: var(--button-default-focus-visible-outline-offset);\n}\n.pops button[data-type=\"default\"]:disabled {\n --button-color: var(--button-default-disabled-color);\n --button-bd-color: var(--button-default-disabled-bd-color);\n --button-bg-color: var(--button-default-disabled-bg-color);\n}\n\n.pops button[data-type=\"primary\"] {\n --button-color: var(--button-primary-color);\n --button-bd-color: var(--button-primary-bd-color);\n --button-bg-color: var(--button-primary-bg-color);\n}\n.pops button[data-type=\"primary\"]:active {\n --button-color: var(--button-primary-active-color);\n --button-bd-color: var(--button-primary-active-bd-color);\n --button-bg-color: var(--button-primary-active-bg-color);\n}\n.pops button[data-type=\"primary\"]:hover {\n --button-color: var(--button-primary-hover-color);\n --button-bd-color: var(--button-primary-hover-bd-color);\n --button-bg-color: var(--button-primary-hover-bg-color);\n}\n.pops button[data-type=\"primary\"]:focus-visible {\n outline: var(--button-primary-focus-visible-outline);\n outline-offset: var(--button-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"primary\"]:disabled {\n --button-color: var(--button-primary-disabled-color);\n --button-bd-color: var(--button-primary-disabled-bd-color);\n --button-bg-color: var(--button-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"success\"] {\n --button-color: var(--button-success-color);\n --button-bd-color: var(--button-success-bd-color);\n --button-bg-color: var(--button-success-bg-color);\n}\n.pops button[data-type=\"success\"]:active {\n --button-color: var(--button-success-active-color);\n --button-bd-color: var(--button-success-active-bd-color);\n --button-bg-color: var(--button-success-active-bg-color);\n}\n.pops button[data-type=\"success\"]:hover {\n --button-color: var(--button-success-hover-color);\n --button-bd-color: var(--button-success-hover-bd-color);\n --button-bg-color: var(--button-success-hover-bg-color);\n}\n.pops button[data-type=\"success\"]:focus-visible {\n outline: var(--button-success-focus-visible-outline);\n outline-offset: var(--button-success-focus-visible-outline-offset);\n}\n.pops button[data-type=\"success\"]:disabled {\n --button-color: var(--button-success-disabled-color);\n --button-bd-color: var(--button-success-disabled-bd-color);\n --button-bg-color: var(--button-success-disabled-bg-color);\n}\n\n.pops button[data-type=\"info\"] {\n --button-color: var(--button-info-color);\n --button-bd-color: var(--button-info-bd-color);\n --button-bg-color: var(--button-info-bg-color);\n}\n.pops button[data-type=\"info\"]:active {\n --button-color: var(--button-info-active-color);\n --button-bd-color: var(--button-info-active-bd-color);\n --button-bg-color: var(--button-info-active-bg-color);\n}\n.pops button[data-type=\"info\"]:hover {\n --button-color: var(--button-info-hover-color);\n --button-bd-color: var(--button-info-hover-bd-color);\n --button-bg-color: var(--button-info-hover-bg-color);\n}\n.pops button[data-type=\"info\"]:focus-visible {\n outline: var(--button-info-focus-visible-outline);\n outline-offset: var(--button-info-focus-visible-outline-offset);\n}\n.pops button[data-type=\"info\"]:disabled {\n --button-color: var(--button-info-disabled-color);\n --button-bd-color: var(--button-info-disabled-bd-color);\n --button-bg-color: var(--button-info-disabled-bg-color);\n}\n\n.pops button[data-type=\"warning\"] {\n --button-color: var(--button-warning-color);\n --button-bd-color: var(--button-warning-bd-color);\n --button-bg-color: var(--button-warning-bg-color);\n}\n.pops button[data-type=\"warning\"]:active {\n --button-color: var(--button-warning-active-color);\n --button-bd-color: var(--button-warning-active-bd-color);\n --button-bg-color: var(--button-warning-active-bg-color);\n}\n.pops button[data-type=\"warning\"]:hover {\n --button-color: var(--button-warning-hover-color);\n --button-bd-color: var(--button-warning-hover-bd-color);\n --button-bg-color: var(--button-warning-hover-bg-color);\n}\n.pops button[data-type=\"warning\"]:focus-visible {\n outline: var(--button-warning-focus-visible-outline);\n outline-offset: var(--button-warning-focus-visible-outline-offset);\n}\n.pops button[data-type=\"warning\"]:disabled {\n --button-color: var(--button-warning-disabled-color);\n --button-bd-color: var(--button-warning-disabled-bd-color);\n --button-bg-color: var(--button-warning-disabled-bg-color);\n}\n\n.pops button[data-type=\"danger\"] {\n --button-color: var(--button-danger-color);\n --button-bd-color: var(--button-danger-bd-color);\n --button-bg-color: var(--button-danger-bg-color);\n}\n.pops button[data-type=\"danger\"]:active {\n --button-color: var(--button-danger-active-color);\n --button-bd-color: var(--button-danger-active-bd-color);\n --button-bg-color: var(--button-danger-active-bg-color);\n}\n.pops button[data-type=\"danger\"]:hover {\n --button-color: var(--button-danger-hover-color);\n --button-bd-color: var(--button-danger-hover-bd-color);\n --button-bg-color: var(--button-danger-hover-bg-color);\n}\n.pops button[data-type=\"danger\"]:focus-visible {\n outline: var(--button-danger-focus-visible-outline);\n outline-offset: var(--button-danger-focus-visible-outline-offset);\n}\n.pops button[data-type=\"danger\"]:disabled {\n --button-color: var(--button-danger-disabled-color);\n --button-bd-color: var(--button-danger-disabled-bd-color);\n --button-bg-color: var(--button-danger-disabled-bg-color);\n}\n\n.pops button[data-type=\"xiaomi-primary\"] {\n --button-color: var(--button-xiaomi-primary-color);\n --button-bd-color: var(--button-xiaomi-primary-bd-color);\n --button-bg-color: var(--button-xiaomi-primary-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:active {\n --button-color: var(--button-xiaomi-primary-active-color);\n --button-bd-color: var(--button-xiaomi-primary-active-bd-color);\n --button-bg-color: var(--button-xiaomi-primary-active-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:hover {\n --button-color: var(--button-xiaomi-primary-hover-color);\n --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\n --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:focus-visible {\n outline: var(--button-xiaomi-primary-focus-visible-outline);\n outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"xiaomi-primary\"]:disabled {\n --button-color: var(--button-xiaomi-primary-disabled-color);\n --button-bd-color: var(--button-xiaomi-primary-disabled-bd-color);\n --button-bg-color: var(--button-xiaomi-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"violet\"] {\n --button-color: var(--button-violet-color);\n --button-bd-color: var(--button-violet-bd-color);\n --button-bg-color: var(--button-violet-bg-color);\n}\n.pops button[data-type=\"violet\"]:active {\n --button-color: var(--button-violet-active-color);\n --button-bd-color: var(--button-violet-active-bd-color);\n --button-bg-color: var(--button-violet-active-bg-color);\n}\n.pops button[data-type=\"violet\"]:hover {\n --button-color: var(--button-violet-hover-color);\n --button-bd-color: var(--button-violet-hover-bd-color);\n --button-bg-color: var(--button-violet-hover-bg-color);\n}\n.pops button[data-type=\"violet\"]:focus-visible {\n outline: var(--button-violet-focus-visible-outline);\n outline-offset: var(--button-violet-focus-visible-outline-offset);\n}\n.pops button[data-type=\"violet\"]:disabled {\n --button-color: var(--button-violet-disabled-color);\n --button-bd-color: var(--button-violet-disabled-bd-color);\n --button-bg-color: var(--button-violet-disabled-bg-color);\n}\n";
2816
+ var buttonCSS = ".pops {\r\n --button-font-size: 14px;\r\n --button-height: 32px;\r\n --button-color: rgb(51, 51, 51);\r\n --button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --button-margin-top: 0px;\r\n --button-margin-bottom: 0px;\r\n --button-margin-left: 5px;\r\n --button-margin-right: 5px;\r\n --button-padding-top: 6px;\r\n --button-padding-bottom: 6px;\r\n --button-padding-left: 12px;\r\n --button-padding-right: 12px;\r\n --button-radius: 4px;\r\n\r\n --container-title-height: 55px;\r\n --container-bottom-btn-height: 55px;\r\n\r\n /* default按钮 */\r\n --button-default-color: #333333;\r\n --button-default-bd-color: #dcdfe6;\r\n --button-default-bg-color: #ffffff;\r\n --button-default-active-color: #409eff;\r\n --button-default-active-bd-color: #409eff;\r\n --button-default-active-bg-color: #ecf5ff;\r\n --button-default-hover-color: #409eff;\r\n --button-default-hover-bd-color: #c6e2ff;\r\n --button-default-hover-bg-color: #ecf5ff;\r\n --button-default-focus-visible-outline-color: #a0cfff;\r\n --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\r\n --button-default-focus-visible-outline-offset: 1px;\r\n --button-default-disabled-color: #a8abb2;\r\n --button-default-disabled-bd-color: #ffffff;\r\n --button-default-disabled-bg-color: #e4e7ed;\r\n\r\n /* primary按钮 */\r\n --button-primary-color: #ffffff;\r\n --button-primary-bd-color: #409eff;\r\n --button-primary-bg-color: #409eff;\r\n --button-primary-active-color: #ffffff;\r\n --button-primary-active-bd-color: #337ecc;\r\n --button-primary-active-bg-color: #337ecc;\r\n --button-primary-hover-color: #ffffff;\r\n --button-primary-hover-bd-color: #79bbff;\r\n --button-primary-hover-bg-color: #79bbff;\r\n --button-primary-focus-visible-outline-color: #a0cfff;\r\n --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\r\n --button-primary-focus-visible-outline-offset: 1px;\r\n --button-primary-disabled-color: #ffffff80;\r\n --button-primary-disabled-bd-color: #a0cfff;\r\n --button-primary-disabled-bg-color: #a0cfff;\r\n\r\n /* success按钮 */\r\n --button-success-color: #ffffff;\r\n --button-success-bd-color: #4cae4c;\r\n --button-success-bg-color: #5cb85c;\r\n --button-success-active-color: #ffffff;\r\n --button-success-active-bd-color: #529b2e;\r\n --button-success-active-bg-color: #529b2e;\r\n --button-success-hover-color: #ffffff;\r\n --button-success-hover-bd-color: #95d475;\r\n --button-success-hover-bg-color: #95d475;\r\n --button-success-focus-visible-outline-color: #b3e19d;\r\n --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\r\n --button-success-focus-visible-outline-offset: 1px;\r\n --button-success-disabled-color: #ffffff80;\r\n --button-success-disabled-bd-color: #b3e19d;\r\n --button-success-disabled-bg-color: #b3e19d;\r\n\r\n /* info按钮 */\r\n --button-info-color: #ffffff;\r\n --button-info-bd-color: #909399;\r\n --button-info-bg-color: #909399;\r\n --button-info-active-color: #ffffff;\r\n --button-info-active-bd-color: #73767a;\r\n --button-info-active-bg-color: #73767a;\r\n --button-info-hover-color: #ffffff;\r\n --button-info-hover-bd-color: #b1b3b8;\r\n --button-info-hover-bg-color: #b1b3b8;\r\n --button-info-focus-visible-outline-color: #c8c9cc;\r\n --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\r\n --button-info-focus-visible-outline-offset: 1px;\r\n --button-info-disabled-color: #ffffff80;\r\n --button-info-disabled-bd-color: #c8c9cc;\r\n --button-info-disabled-bg-color: #c8c9cc;\r\n\r\n /* warning按钮 */\r\n --button-warning-color: #ffffff;\r\n --button-warning-bd-color: #e6a23c;\r\n --button-warning-bg-color: #e6a23c;\r\n --button-warning-active-color: #ffffff;\r\n --button-warning-active-bd-color: #b88230;\r\n --button-warning-active-bg-color: #b88230;\r\n --button-warning-hover-color: #ffffff80;\r\n --button-warning-hover-bd-color: #eebe77;\r\n --button-warning-hover-bg-color: #eebe77;\r\n --button-warning-focus-visible-outline-color: #f3d19e;\r\n --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\r\n --button-warning-focus-visible-outline-offset: 1px;\r\n --button-warning-disabled-color: #ffffff80;\r\n --button-warning-disabled-bd-color: #f3d19e;\r\n --button-warning-disabled-bg-color: #f3d19e;\r\n\r\n /* danger按钮 */\r\n --button-danger-color: #ffffff;\r\n --button-danger-bd-color: #f56c6c;\r\n --button-danger-bg-color: #f56c6c;\r\n --button-danger-active-color: #ffffff;\r\n --button-danger-active-bd-color: #c45656;\r\n --button-danger-active-bg-color: #c45656;\r\n --button-danger-hover-color: #ffffff;\r\n --button-danger-hover-bd-color: #f89898;\r\n --button-danger-hover-bg-color: #f89898;\r\n --button-danger-focus-visible-outline-color: #fab6b6;\r\n --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\r\n --button-danger-focus-visible-outline-offset: 1px;\r\n --button-danger-disabled-color: #ffffff80;\r\n --button-danger-disabled-bd-color: #fab6b6;\r\n --button-danger-disabled-bg-color: #fab6b6;\r\n\r\n /* xiaomi-primary按钮 */\r\n --button-xiaomi-primary-color: #ffffff;\r\n --button-xiaomi-primary-bd-color: #ff5c00;\r\n --button-xiaomi-primary-bg-color: #ff5c00;\r\n --button-xiaomi-primary-active-color: #ffffff;\r\n --button-xiaomi-primary-active-bd-color: #da4f00;\r\n --button-xiaomi-primary-active-bg-color: #da4f00;\r\n --button-xiaomi-primary-hover-color: #ffffff;\r\n --button-xiaomi-primary-hover-bd-color: #ff7e29;\r\n --button-xiaomi-primary-hover-bg-color: #ff7e29;\r\n --button-xiaomi-primary-focus-visible-outline-color: #ffa061;\r\n --button-xiaomi-primary-focus-visible-outline: 2px solid var(--button-xiaomi-primary-focus-visible-outline-color);\r\n --button-xiaomi-primary-focus-visible-outline-offset: 1px;\r\n --button-xiaomi-primary-disabled-color: #ffffff80;\r\n --button-xiaomi-primary-disabled-bd-color: #fad5b6;\r\n --button-xiaomi-primary-disabled-bg-color: #fad5b6;\r\n\r\n /* violet按钮 */\r\n --button-violet-color: #ffffff;\r\n --button-violet-bd-color: #626aef;\r\n --button-violet-bg-color: #626aef;\r\n --button-violet-active-color: #ffffff;\r\n --button-violet-active-bd-color: #8188f2;\r\n --button-violet-active-bg-color: #8188f2;\r\n --button-violet-hover-color: #ffffff;\r\n --button-violet-hover-bd-color: #4b50ad;\r\n --button-violet-hover-bg-color: #4b50ad;\r\n --button-violet-focus-visible-outline-color: #2a598a;\r\n --button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);\r\n --button-violet-focus-visible-outline-offset: 1px;\r\n --button-violet-disabled-color: #ffffff80;\r\n --button-violet-disabled-bd-color: #3b3f82;\r\n --button-violet-disabled-bg-color: #3b3f82;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops {\r\n /* default按钮 */\r\n --button-default-color: #cfd3dc;\r\n --button-default-bd-color: #4c4d4f;\r\n --button-default-bg-color: transparent;\r\n --button-default-active-color: #409eff;\r\n --button-default-active-bd-color: #409eff;\r\n --button-default-active-bg-color: #18222c;\r\n --button-default-hover-color: #409eff;\r\n --button-default-hover-bd-color: #213d5b;\r\n --button-default-hover-bg-color: #18222c;\r\n --button-default-focus-visible-outline-color: #2a598a;\r\n --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\r\n --button-default-focus-visible-outline-offset: 1px;\r\n --button-default-disabled-color: #ffffff80;\r\n --button-default-disabled-bd-color: #414243;\r\n --button-default-disabled-bg-color: transparent;\r\n\r\n /* primary按钮 */\r\n --button-primary-color: #ffffff;\r\n --button-primary-bd-color: #409eff;\r\n --button-primary-bg-color: #409eff;\r\n --button-primary-active-color: #ffffff;\r\n --button-primary-active-bd-color: #66b1ff;\r\n --button-primary-active-bg-color: #66b1ff;\r\n --button-primary-hover-color: #ffffff;\r\n --button-primary-hover-bd-color: #3375b9;\r\n --button-primary-hover-bg-color: #3375b9;\r\n --button-primary-focus-visible-outline-color: #2a598a;\r\n --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\r\n --button-primary-focus-visible-outline-offset: 1px;\r\n --button-primary-disabled-color: #ffffff80;\r\n --button-primary-disabled-bd-color: #2a598a;\r\n --button-primary-disabled-bg-color: #2a598a;\r\n\r\n /* success按钮 */\r\n --button-success-color: #ffffff;\r\n --button-success-bd-color: #67c23a;\r\n --button-success-bg-color: #67c23a;\r\n --button-success-active-color: #ffffff;\r\n --button-success-active-bd-color: #85ce61;\r\n --button-success-active-bg-color: #85ce61;\r\n --button-success-hover-color: #ffffff;\r\n --button-success-hover-bd-color: #4e8e2f;\r\n --button-success-hover-bg-color: #4e8e2f;\r\n --button-success-focus-visible-outline-color: #3e6b27;\r\n --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\r\n --button-success-focus-visible-outline-offset: 1px;\r\n --button-success-disabled-color: #ffffff80;\r\n --button-success-disabled-bd-color: #3e6b27;\r\n --button-success-disabled-bg-color: #3e6b27;\r\n\r\n /* info按钮 */\r\n --button-info-color: #ffffff;\r\n --button-info-bd-color: #909399;\r\n --button-info-bg-color: #909399;\r\n --button-info-active-color: #ffffff;\r\n --button-info-active-bd-color: #a6a9ad;\r\n --button-info-active-bg-color: #a6a9ad;\r\n --button-info-hover-color: #ffffff;\r\n --button-info-hover-bd-color: #6b6d71;\r\n --button-info-hover-bg-color: #6b6d71;\r\n --button-info-focus-visible-outline-color: #525457;\r\n --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\r\n --button-info-focus-visible-outline-offset: 1px;\r\n --button-info-disabled-color: #ffffff80;\r\n --button-info-disabled-bd-color: #525457;\r\n --button-info-disabled-bg-color: #525457;\r\n\r\n /* warning按钮 */\r\n --button-warning-color: #ffffff;\r\n --button-warning-bd-color: #e6a23c;\r\n --button-warning-bg-color: #e6a23c;\r\n --button-warning-active-color: #ffffff;\r\n --button-warning-active-bd-color: #ebb563;\r\n --button-warning-active-bg-color: #ebb563;\r\n --button-warning-hover-color: #ffffff80;\r\n --button-warning-hover-bd-color: #a77730;\r\n --button-warning-hover-bg-color: #a77730;\r\n --button-warning-focus-visible-outline-color: #7d5b28;\r\n --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\r\n --button-warning-focus-visible-outline-offset: 1px;\r\n --button-warning-disabled-color: #ffffff80;\r\n --button-warning-disabled-bd-color: #7d5b28;\r\n --button-warning-disabled-bg-color: #7d5b28;\r\n\r\n /* danger按钮 */\r\n --button-danger-color: #ffffff;\r\n --button-danger-bd-color: #f56c6c;\r\n --button-danger-bg-color: #f56c6c;\r\n --button-danger-active-color: #ffffff;\r\n --button-danger-active-bd-color: #f78989;\r\n --button-danger-active-bg-color: #f78989;\r\n --button-danger-hover-color: #ffffff;\r\n --button-danger-hover-bd-color: #b25252;\r\n --button-danger-hover-bg-color: #b25252;\r\n --button-danger-focus-visible-outline-color: #854040;\r\n --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\r\n --button-danger-focus-visible-outline-offset: 1px;\r\n --button-danger-disabled-color: #ffffff80;\r\n --button-danger-disabled-bd-color: #854040;\r\n --button-danger-disabled-bg-color: #854040;\r\n }\r\n}\r\n.pops[data-bottom-btn=\"false\"] {\r\n --container-bottom-btn-height: 0px;\r\n}\r\n.pops button {\r\n white-space: nowrap;\r\n float: right;\r\n display: inline-block;\r\n margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);\r\n padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);\r\n outline: 0;\r\n}\r\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\r\n display: none;\r\n}\r\n.pops button {\r\n border-radius: var(--button-radius);\r\n box-shadow: none;\r\n font-weight: 400;\r\n font-size: var(--button-font-size);\r\n cursor: pointer;\r\n transition: all 0.3s ease-in-out;\r\n}\r\n.pops button {\r\n display: flex;\r\n align-items: center;\r\n height: var(--button-height);\r\n line-height: normal;\r\n box-sizing: border-box;\r\n border: 1px solid var(--button-bd-color);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops button {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button:active {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n outline: 0;\r\n}\r\n.pops button:hover {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button:focus-visible {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button:disabled {\r\n cursor: not-allowed;\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button.pops-button-large {\r\n --button-height: 32px;\r\n --button-padding-top: 12px;\r\n --button-padding-bottom: 12px;\r\n --button-padding-left: 19px;\r\n --button-padding-right: 19px;\r\n --button-font-size: 14px;\r\n --button-border-radius: 4px;\r\n}\r\n\r\n.pops button.pops-button-small {\r\n --button-height: 24px;\r\n --button-padding-top: 5px;\r\n --button-padding-bottom: 5px;\r\n --button-padding-left: 11px;\r\n --button-padding-right: 11px;\r\n --button-font-size: 12px;\r\n --button-border-radius: 4px;\r\n}\r\n.pops-panel-button-no-icon .pops-panel-button_inner i {\r\n display: none;\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner {\r\n flex-direction: row-reverse;\r\n}\r\n.pops-panel-button .pops-panel-button_inner i:has(svg),\r\n.pops-panel-button-right-icon .pops-panel-button-text {\r\n margin-right: 6px;\r\n}\r\n\r\n.pops button[data-type=\"default\"] {\r\n --button-color: var(--button-default-color);\r\n --button-bd-color: var(--button-default-bd-color);\r\n --button-bg-color: var(--button-default-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:active {\r\n --button-color: var(--button-default-active-color);\r\n --button-bd-color: var(--button-default-active-bd-color);\r\n --button-bg-color: var(--button-default-active-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:hover {\r\n --button-color: var(--button-default-hover-color);\r\n --button-bd-color: var(--button-default-hover-bd-color);\r\n --button-bg-color: var(--button-default-hover-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:focus-visible {\r\n outline: var(--button-default-focus-visible-outline);\r\n outline-offset: var(--button-default-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"default\"]:disabled {\r\n --button-color: var(--button-default-disabled-color);\r\n --button-bd-color: var(--button-default-disabled-bd-color);\r\n --button-bg-color: var(--button-default-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"primary\"] {\r\n --button-color: var(--button-primary-color);\r\n --button-bd-color: var(--button-primary-bd-color);\r\n --button-bg-color: var(--button-primary-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:active {\r\n --button-color: var(--button-primary-active-color);\r\n --button-bd-color: var(--button-primary-active-bd-color);\r\n --button-bg-color: var(--button-primary-active-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:hover {\r\n --button-color: var(--button-primary-hover-color);\r\n --button-bd-color: var(--button-primary-hover-bd-color);\r\n --button-bg-color: var(--button-primary-hover-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:focus-visible {\r\n outline: var(--button-primary-focus-visible-outline);\r\n outline-offset: var(--button-primary-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"primary\"]:disabled {\r\n --button-color: var(--button-primary-disabled-color);\r\n --button-bd-color: var(--button-primary-disabled-bd-color);\r\n --button-bg-color: var(--button-primary-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"success\"] {\r\n --button-color: var(--button-success-color);\r\n --button-bd-color: var(--button-success-bd-color);\r\n --button-bg-color: var(--button-success-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:active {\r\n --button-color: var(--button-success-active-color);\r\n --button-bd-color: var(--button-success-active-bd-color);\r\n --button-bg-color: var(--button-success-active-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:hover {\r\n --button-color: var(--button-success-hover-color);\r\n --button-bd-color: var(--button-success-hover-bd-color);\r\n --button-bg-color: var(--button-success-hover-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:focus-visible {\r\n outline: var(--button-success-focus-visible-outline);\r\n outline-offset: var(--button-success-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"success\"]:disabled {\r\n --button-color: var(--button-success-disabled-color);\r\n --button-bd-color: var(--button-success-disabled-bd-color);\r\n --button-bg-color: var(--button-success-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"info\"] {\r\n --button-color: var(--button-info-color);\r\n --button-bd-color: var(--button-info-bd-color);\r\n --button-bg-color: var(--button-info-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:active {\r\n --button-color: var(--button-info-active-color);\r\n --button-bd-color: var(--button-info-active-bd-color);\r\n --button-bg-color: var(--button-info-active-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:hover {\r\n --button-color: var(--button-info-hover-color);\r\n --button-bd-color: var(--button-info-hover-bd-color);\r\n --button-bg-color: var(--button-info-hover-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:focus-visible {\r\n outline: var(--button-info-focus-visible-outline);\r\n outline-offset: var(--button-info-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"info\"]:disabled {\r\n --button-color: var(--button-info-disabled-color);\r\n --button-bd-color: var(--button-info-disabled-bd-color);\r\n --button-bg-color: var(--button-info-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"warning\"] {\r\n --button-color: var(--button-warning-color);\r\n --button-bd-color: var(--button-warning-bd-color);\r\n --button-bg-color: var(--button-warning-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:active {\r\n --button-color: var(--button-warning-active-color);\r\n --button-bd-color: var(--button-warning-active-bd-color);\r\n --button-bg-color: var(--button-warning-active-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:hover {\r\n --button-color: var(--button-warning-hover-color);\r\n --button-bd-color: var(--button-warning-hover-bd-color);\r\n --button-bg-color: var(--button-warning-hover-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:focus-visible {\r\n outline: var(--button-warning-focus-visible-outline);\r\n outline-offset: var(--button-warning-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"warning\"]:disabled {\r\n --button-color: var(--button-warning-disabled-color);\r\n --button-bd-color: var(--button-warning-disabled-bd-color);\r\n --button-bg-color: var(--button-warning-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"danger\"] {\r\n --button-color: var(--button-danger-color);\r\n --button-bd-color: var(--button-danger-bd-color);\r\n --button-bg-color: var(--button-danger-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:active {\r\n --button-color: var(--button-danger-active-color);\r\n --button-bd-color: var(--button-danger-active-bd-color);\r\n --button-bg-color: var(--button-danger-active-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:hover {\r\n --button-color: var(--button-danger-hover-color);\r\n --button-bd-color: var(--button-danger-hover-bd-color);\r\n --button-bg-color: var(--button-danger-hover-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:focus-visible {\r\n outline: var(--button-danger-focus-visible-outline);\r\n outline-offset: var(--button-danger-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"danger\"]:disabled {\r\n --button-color: var(--button-danger-disabled-color);\r\n --button-bd-color: var(--button-danger-disabled-bd-color);\r\n --button-bg-color: var(--button-danger-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"xiaomi-primary\"] {\r\n --button-color: var(--button-xiaomi-primary-color);\r\n --button-bd-color: var(--button-xiaomi-primary-bd-color);\r\n --button-bg-color: var(--button-xiaomi-primary-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:active {\r\n --button-color: var(--button-xiaomi-primary-active-color);\r\n --button-bd-color: var(--button-xiaomi-primary-active-bd-color);\r\n --button-bg-color: var(--button-xiaomi-primary-active-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:hover {\r\n --button-color: var(--button-xiaomi-primary-hover-color);\r\n --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\r\n --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:focus-visible {\r\n outline: var(--button-xiaomi-primary-focus-visible-outline);\r\n outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:disabled {\r\n --button-color: var(--button-xiaomi-primary-disabled-color);\r\n --button-bd-color: var(--button-xiaomi-primary-disabled-bd-color);\r\n --button-bg-color: var(--button-xiaomi-primary-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"violet\"] {\r\n --button-color: var(--button-violet-color);\r\n --button-bd-color: var(--button-violet-bd-color);\r\n --button-bg-color: var(--button-violet-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:active {\r\n --button-color: var(--button-violet-active-color);\r\n --button-bd-color: var(--button-violet-active-bd-color);\r\n --button-bg-color: var(--button-violet-active-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:hover {\r\n --button-color: var(--button-violet-hover-color);\r\n --button-bd-color: var(--button-violet-hover-bd-color);\r\n --button-bg-color: var(--button-violet-hover-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:focus-visible {\r\n outline: var(--button-violet-focus-visible-outline);\r\n outline-offset: var(--button-violet-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"violet\"]:disabled {\r\n --button-color: var(--button-violet-disabled-color);\r\n --button-bd-color: var(--button-violet-disabled-bd-color);\r\n --button-bg-color: var(--button-violet-disabled-bg-color);\r\n}\r\n";
2810
2817
 
2811
- var commonCSS = ".pops-flex-items-center {\n display: flex;\n align-items: center;\n}\n.pops-flex-y-center {\n display: flex;\n justify-content: space-between;\n}\n.pops-flex-x-center {\n display: flex;\n align-content: center;\n}\n.pops-hide {\n display: none;\n}\n.pops-hide-important {\n display: none !important;\n}\n.pops-no-border {\n border: 0;\n}\n.pops-no-border-important {\n border: 0 !important;\n}\n.pops-user-select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops-line-height-center {\n line-height: normal;\n align-content: center;\n}\n.pops-width-fill {\n width: -webkit-fill-available;\n width: -moz-available;\n}\n.pops-text-is-disabled {\n --pops-text-is-disabled-color: #a8abb2;\n color: var(--pops-text-is-disabled-color);\n --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);\n}\n.pops-text-is-disabled-important {\n --pops-text-is-disabled-color: #a8abb2;\n color: var(--pops-text-is-disabled-color) !important;\n --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;\n}\n";
2818
+ var commonCSS = ".pops-flex-items-center {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-flex-y-center {\r\n display: flex;\r\n justify-content: space-between;\r\n}\r\n.pops-flex-x-center {\r\n display: flex;\r\n align-content: center;\r\n}\r\n.pops-hide {\r\n display: none;\r\n}\r\n.pops-hide-important {\r\n display: none !important;\r\n}\r\n.pops-no-border {\r\n border: 0;\r\n}\r\n.pops-no-border-important {\r\n border: 0 !important;\r\n}\r\n.pops-user-select-none {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-line-height-center {\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops-width-fill {\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n}\r\n.pops-text-is-disabled {\r\n --pops-text-is-disabled-color: #a8abb2;\r\n color: var(--pops-text-is-disabled-color);\r\n --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);\r\n}\r\n.pops-text-is-disabled-important {\r\n --pops-text-is-disabled-color: #a8abb2;\r\n color: var(--pops-text-is-disabled-color) !important;\r\n --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;\r\n}\r\n";
2812
2819
 
2813
- var animCSS = "@keyframes rotating {\n 0% {\n transform: rotate(0);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes iframeLoadingChange_85 {\n 0% {\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n }\n 20% {\n background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\n }\n 40% {\n background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\n }\n 60% {\n background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\n }\n 80% {\n background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\n }\n 100% {\n background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\n }\n from {\n width: 75%;\n }\n to {\n width: 100%;\n }\n}\n@keyframes iframeLoadingChange {\n 0% {\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n }\n 20% {\n background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\n }\n 40% {\n background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\n }\n 60% {\n background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\n }\n 80% {\n background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\n }\n 100% {\n background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\n }\n from {\n width: 0;\n }\n to {\n width: 75%;\n }\n}\n\n@keyframes searchSelectFalIn {\n from {\n opacity: 0;\n display: none;\n }\n to {\n display: block;\n opacity: 1;\n }\n}\n@keyframes searchSelectFalOut {\n from {\n display: block;\n opacity: 1;\n }\n to {\n opacity: 0;\n display: none;\n }\n}\n\n@keyframes pops-anim-wait-rotate {\n form {\n transform: rotate(0);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pops-anim-spread {\n 0% {\n opacity: 0;\n transform: scaleX(0);\n }\n 100% {\n opacity: 1;\n transform: scaleX(1);\n }\n}\n@keyframes pops-anim-shake {\n 0%,\n 100% {\n transform: translateX(0);\n }\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translateX(-10px);\n }\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translateX(10px);\n }\n}\n@keyframes pops-anim-rolling-left {\n 0% {\n opacity: 0;\n transform: translateX(-100%) rotate(-120deg);\n }\n 100% {\n opacity: 1;\n transform: translateX(0) rotate(0);\n }\n}\n@keyframes pops-anim-rolling-right {\n 0% {\n opacity: 0;\n transform: translateX(100%) rotate(120deg);\n }\n 100% {\n opacity: 1;\n transform: translateX(0) rotate(0);\n }\n}\n@keyframes pops-anim-slide-top {\n 0% {\n opacity: 0;\n transform: translateY(-200%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes pops-anim-slide-bottom {\n 0% {\n opacity: 0;\n transform: translateY(200%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes pops-anim-slide-left {\n 0% {\n opacity: 0;\n transform: translateX(-200%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes pops-anim-slide-right {\n 0% {\n transform: translateX(200%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes pops-anim-fadein {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes pops-anim-fadein-zoom {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes pops-anim-fadein-alert {\n 0% {\n transform: scale(0.5);\n }\n 45% {\n transform: scale(1.05);\n }\n 80% {\n transform: scale(0.95);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes pops-anim-don {\n 0% {\n opacity: 0;\n transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 2.08333% {\n transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 4.16667% {\n transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 6.25% {\n transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 8.33333% {\n transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 10.4167% {\n transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 12.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 14.5833% {\n transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 16.6667% {\n transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 18.75% {\n transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 20.8333% {\n transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 22.9167% {\n transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 25% {\n transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 27.0833% {\n transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 29.1667% {\n transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 31.25% {\n transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 33.3333% {\n transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 35.4167% {\n transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 37.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 39.5833% {\n transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 41.6667% {\n transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 43.75% {\n transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 45.8333% {\n transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 47.9167% {\n transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 50% {\n opacity: 1;\n transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 52.0833% {\n transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 54.1667% {\n transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 56.25% {\n transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 58.3333% {\n transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 60.4167% {\n transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 62.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 64.5833% {\n transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 66.6667% {\n transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 68.75% {\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 70.8333% {\n transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 72.9167% {\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 75% {\n transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 77.0833% {\n transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 79.1667% {\n transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 81.25% {\n transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 83.3333% {\n transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 85.4167% {\n transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 87.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 89.5833% {\n transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 91.6667% {\n transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 93.75% {\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 95.8333% {\n transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 97.9167% {\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 100% {\n opacity: 1;\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n}\n@keyframes pops-anim-roll {\n 0% {\n transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\n }\n 100% {\n transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\n }\n}\n@keyframes pops-anim-sandra {\n 0% {\n opacity: 0;\n transform: scale3d(1.1, 1.1, 1);\n }\n 100% {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n}\n@keyframes pops-anim-gather {\n 0% {\n opacity: 0;\n transform: scale(5, 0);\n }\n 100% {\n opacity: 1;\n transform: scale(1, 1);\n }\n}\n@keyframes pops-anim-spread-reverse {\n 0% {\n opacity: 1;\n transform: scaleX(1);\n }\n 100% {\n opacity: 0;\n transform: scaleX(0);\n }\n}\n@keyframes pops-anim-shake-reverse {\n 0%,\n 100% {\n transform: translateX(10px);\n }\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translateX(-10px);\n }\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translateX(0);\n }\n}\n@keyframes pops-anim-rolling-left-reverse {\n 0% {\n opacity: 1;\n transform: translateX(0) rotate(0);\n }\n 100% {\n opacity: 0;\n transform: translateX(-100%) rotate(-120deg);\n }\n}\n@keyframes pops-anim-rolling-right-reverse {\n 0% {\n opacity: 1;\n transform: translateX(0) rotate(0);\n }\n 100% {\n opacity: 0;\n transform: translateX(100%) rotate(120deg);\n }\n}\n@keyframes pops-anim-slide-top-reverse {\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-200%);\n }\n}\n@keyframes pops-anim-slide-bottom-reverse {\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(200%);\n }\n}\n@keyframes pops-anim-slide-left-reverse {\n 0% {\n opacity: 1;\n transform: translateX(0);\n }\n 100% {\n opacity: 0;\n transform: translateX(-200%);\n }\n}\n@keyframes pops-anim-slide-right-reverse {\n 0% {\n opacity: 1;\n transform: translateX(0);\n }\n 100% {\n transform: translateX(200%);\n }\n}\n@keyframes pops-anim-fadein-reverse {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes pops-anim-fadein-zoom-reverse {\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(0.5);\n }\n}\n@keyframes pops-anim-fadein-alert-reverse {\n 0% {\n transform: scale(1);\n }\n 45% {\n transform: scale(0.95);\n }\n 80% {\n transform: scale(1.05);\n }\n 100% {\n transform: scale(0.5);\n }\n}\n@keyframes pops-anim-don-reverse {\n 100% {\n opacity: 0;\n transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 97.9167% {\n transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 95.8333% {\n transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 93.75% {\n transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 91.6667% {\n transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 89.5833% {\n transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 87.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 85.4167% {\n transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 83.3333% {\n transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 81.25% {\n transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 79.1667% {\n transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 77.0833% {\n transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 75% {\n transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 72.9167% {\n transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 70.8333% {\n transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 68.75% {\n transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 66.6667% {\n transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 64.5833% {\n transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 62.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 60.4167% {\n transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 58.3333% {\n transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 56.25% {\n transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 54.1667% {\n transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 52.0833% {\n transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 50% {\n opacity: 1;\n transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 47.9167% {\n transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 45.8333% {\n transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 43.75% {\n transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 41.6667% {\n transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 39.5833% {\n transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 37.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 35.4167% {\n transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 33.3333% {\n transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 31.25% {\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 29.1667% {\n transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 27.0833% {\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 25% {\n transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 22.9167% {\n transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 20.8333% {\n transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 18.75% {\n transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 16.6667% {\n transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 14.5833% {\n transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 12.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 10.4167% {\n transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 8.33333% {\n transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 6.25% {\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 4.16667% {\n transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 2.08333% {\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 0% {\n opacity: 1;\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n}\n@keyframes pops-anim-roll-reverse {\n 0% {\n transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\n }\n 100% {\n transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\n }\n}\n@keyframes pops-anim-sandra-reverse {\n 0% {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n 100% {\n opacity: 0;\n transform: scale3d(1.1, 1.1, 1);\n }\n}\n@keyframes pops-anim-gather-reverse {\n 0% {\n opacity: 0;\n transform: scale(5, 0);\n }\n 100% {\n opacity: 0;\n transform: scale(5, 0);\n }\n}\n\n@-webkit-keyframes pops-motion-fadeInTop {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@keyframes pops-motion-fadeInTop {\n 0% {\n opacity: 0;\n transform: translateY(-30px);\n -ms-transform: translateY(-30px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n -ms-transform: translateX(0);\n }\n}\n@-webkit-keyframes pops-motion-fadeOutTop {\n 0% {\n opacity: 10;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px);\n }\n}\n@keyframes pops-motion-fadeOutTop {\n 0% {\n opacity: 1;\n transform: translateY(0);\n -ms-transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-30px);\n -ms-transform: translateY(-30px);\n }\n}\n@-webkit-keyframes pops-motion-fadeInBottom {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n@keyframes pops-motion-fadeInBottom {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n -ms-transform: translateY(20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n -ms-transform: translateY(0);\n }\n}\n@-webkit-keyframes pops-motion-fadeOutBottom {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n }\n}\n@keyframes pops-motion-fadeOutBottom {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n -ms-transform: translateY(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n -ms-transform: translateY(20px);\n }\n}\n@-webkit-keyframes pops-motion-fadeInLeft {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-20px);\n transform: translateX(-20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@keyframes pops-motion-fadeInLeft {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-30px);\n transform: translateX(-30px);\n -ms-transform: translateX(-30px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n -ms-transform: translateX(0);\n }\n}\n@-webkit-keyframes pops-motion-fadeOutLeft {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-30px);\n transform: translateX(-30px);\n }\n}\n@keyframes pops-motion-fadeOutLeft {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n -ms-transform: translateX(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-20px);\n transform: translateX(-20px);\n -ms-transform: translateX(-20px);\n }\n}\n@-webkit-keyframes pops-motion-fadeInRight {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@keyframes pops-motion-fadeInRight {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n -ms-transform: translateX(20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n -ms-transform: translateX(0);\n }\n}\n@-webkit-keyframes pops-motion-fadeOutRight {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n }\n}\n@keyframes pops-motion-fadeOutRight {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n -ms-transform: translateX(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n -ms-transform: translateX(20px);\n }\n}\n\n/* 动画 */\n.pops-anim[anim=\"pops-anim-spread\"] {\n animation: pops-anim-spread 0.3s;\n}\n.pops-anim[anim=\"pops-anim-shake\"] {\n animation: pops-anim-shake 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-left\"] {\n animation: pops-anim-rolling-left 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-right\"] {\n animation: pops-anim-rolling-right 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-top\"] {\n animation: pops-anim-slide-top 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-bottom\"] {\n animation: pops-anim-slide-bottom 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-left\"] {\n animation: pops-anim-slide-left 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-right\"] {\n animation: pops-anim-slide-right 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein\"] {\n animation: pops-anim-fadein 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-zoom\"] {\n animation: pops-anim-fadein-zoom 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-alert\"] {\n animation: pops-anim-fadein-alert 0.3s;\n}\n.pops-anim[anim=\"pops-anim-don\"] {\n animation: pops-anim-don 0.3s;\n}\n.pops-anim[anim=\"pops-anim-roll\"] {\n animation: pops-anim-roll 0.3s;\n}\n.pops-anim[anim=\"pops-anim-sandra\"] {\n animation: pops-anim-sandra 0.3s;\n}\n.pops-anim[anim=\"pops-anim-gather\"] {\n animation: pops-anim-gather 0.3s;\n}\n.pops-anim[anim=\"pops-anim-spread-reverse\"] {\n animation: pops-anim-spread-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-shake-reverse\"] {\n animation: pops-anim-shake-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-left-reverse\"] {\n animation: pops-anim-rolling-left-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-right-reverse\"] {\n animation: pops-anim-rolling-right-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-top-reverse\"] {\n animation: pops-anim-slide-top-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-bottom-reverse\"] {\n animation: pops-anim-slide-bottom-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-left-reverse\"] {\n animation: pops-anim-slide-left-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-right-reverse\"] {\n animation: pops-anim-slide-right-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-reverse\"] {\n animation: pops-anim-fadein-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-zoom-reverse\"] {\n animation: pops-anim-fadein-zoom-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-alert-reverse\"] {\n animation: pops-anim-fadein-alert-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-don-reverse\"] {\n animation: pops-anim-don-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-roll-reverse\"] {\n animation: pops-anim-roll-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-sandra-reverse\"] {\n animation: pops-anim-sandra-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-gather-reverse\"] {\n animation: pops-anim-gather-reverse 0.3s;\n}\n";
2820
+ var animCSS = "@keyframes rotating {\r\n 0% {\r\n transform: rotate(0);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n@keyframes iframeLoadingChange_85 {\r\n 0% {\r\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n }\r\n 20% {\r\n background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n }\r\n 40% {\r\n background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n }\r\n 60% {\r\n background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n }\r\n 80% {\r\n background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n }\r\n 100% {\r\n background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n }\r\n from {\r\n width: 75%;\r\n }\r\n to {\r\n width: 100%;\r\n }\r\n}\r\n@keyframes iframeLoadingChange {\r\n 0% {\r\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n }\r\n 20% {\r\n background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n }\r\n 40% {\r\n background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n }\r\n 60% {\r\n background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n }\r\n 80% {\r\n background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n }\r\n 100% {\r\n background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n }\r\n from {\r\n width: 0;\r\n }\r\n to {\r\n width: 75%;\r\n }\r\n}\r\n\r\n@keyframes searchSelectFalIn {\r\n from {\r\n opacity: 0;\r\n display: none;\r\n }\r\n to {\r\n display: block;\r\n opacity: 1;\r\n }\r\n}\r\n@keyframes searchSelectFalOut {\r\n from {\r\n display: block;\r\n opacity: 1;\r\n }\r\n to {\r\n opacity: 0;\r\n display: none;\r\n }\r\n}\r\n\r\n@keyframes pops-anim-wait-rotate {\r\n form {\r\n transform: rotate(0);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n@keyframes pops-anim-spread {\r\n 0% {\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n}\r\n@keyframes pops-anim-shake {\r\n 0%,\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n 10%,\r\n 30%,\r\n 50%,\r\n 70%,\r\n 90% {\r\n transform: translateX(-10px);\r\n }\r\n 20%,\r\n 40%,\r\n 60%,\r\n 80% {\r\n transform: translateX(10px);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-left {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(-100%) rotate(-120deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-right {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(100%) rotate(120deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-top {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-bottom {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-left {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(-200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-right {\r\n 0% {\r\n transform: translateX(200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-anim-fadein {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n@keyframes pops-anim-fadein-zoom {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(0.5);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n}\r\n@keyframes pops-anim-fadein-alert {\r\n 0% {\r\n transform: scale(0.5);\r\n }\r\n 45% {\r\n transform: scale(1.05);\r\n }\r\n 80% {\r\n transform: scale(0.95);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n}\r\n@keyframes pops-anim-don {\r\n 0% {\r\n opacity: 0;\r\n transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 2.08333% {\r\n transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 4.16667% {\r\n transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 6.25% {\r\n transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 8.33333% {\r\n transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 10.4167% {\r\n transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 12.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 14.5833% {\r\n transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 16.6667% {\r\n transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 18.75% {\r\n transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 20.8333% {\r\n transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 22.9167% {\r\n transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 25% {\r\n transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 27.0833% {\r\n transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 29.1667% {\r\n transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 31.25% {\r\n transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 33.3333% {\r\n transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 35.4167% {\r\n transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 37.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 39.5833% {\r\n transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 41.6667% {\r\n transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 43.75% {\r\n transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 45.8333% {\r\n transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 47.9167% {\r\n transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 52.0833% {\r\n transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 54.1667% {\r\n transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 56.25% {\r\n transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 58.3333% {\r\n transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 60.4167% {\r\n transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 62.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 64.5833% {\r\n transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 66.6667% {\r\n transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 68.75% {\r\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 70.8333% {\r\n transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 72.9167% {\r\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 75% {\r\n transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 77.0833% {\r\n transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 79.1667% {\r\n transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 81.25% {\r\n transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 83.3333% {\r\n transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 85.4167% {\r\n transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 87.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 89.5833% {\r\n transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 91.6667% {\r\n transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 93.75% {\r\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 95.8333% {\r\n transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 97.9167% {\r\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n}\r\n@keyframes pops-anim-roll {\r\n 0% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n }\r\n 100% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n }\r\n}\r\n@keyframes pops-anim-sandra {\r\n 0% {\r\n opacity: 0;\r\n transform: scale3d(1.1, 1.1, 1);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scale3d(1, 1, 1);\r\n }\r\n}\r\n@keyframes pops-anim-gather {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(5, 0);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scale(1, 1);\r\n }\r\n}\r\n@keyframes pops-anim-spread-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n}\r\n@keyframes pops-anim-shake-reverse {\r\n 0%,\r\n 100% {\r\n transform: translateX(10px);\r\n }\r\n 10%,\r\n 30%,\r\n 50%,\r\n 70%,\r\n 90% {\r\n transform: translateX(-10px);\r\n }\r\n 20%,\r\n 40%,\r\n 60%,\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-left-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateX(-100%) rotate(-120deg);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-right-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateX(100%) rotate(120deg);\r\n }\r\n}\r\n@keyframes pops-anim-slide-top-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-200%);\r\n }\r\n}\r\n@keyframes pops-anim-slide-bottom-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(200%);\r\n }\r\n}\r\n@keyframes pops-anim-slide-left-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateX(-200%);\r\n }\r\n}\r\n@keyframes pops-anim-slide-right-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(200%);\r\n }\r\n}\r\n@keyframes pops-anim-fadein-reverse {\r\n 0% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n@keyframes pops-anim-fadein-zoom-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale(0.5);\r\n }\r\n}\r\n@keyframes pops-anim-fadein-alert-reverse {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 45% {\r\n transform: scale(0.95);\r\n }\r\n 80% {\r\n transform: scale(1.05);\r\n }\r\n 100% {\r\n transform: scale(0.5);\r\n }\r\n}\r\n@keyframes pops-anim-don-reverse {\r\n 100% {\r\n opacity: 0;\r\n transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 97.9167% {\r\n transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 95.8333% {\r\n transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 93.75% {\r\n transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 91.6667% {\r\n transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 89.5833% {\r\n transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 87.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 85.4167% {\r\n transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 83.3333% {\r\n transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 81.25% {\r\n transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 79.1667% {\r\n transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 77.0833% {\r\n transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 75% {\r\n transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 72.9167% {\r\n transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 70.8333% {\r\n transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 68.75% {\r\n transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 66.6667% {\r\n transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 64.5833% {\r\n transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 62.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 60.4167% {\r\n transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 58.3333% {\r\n transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 56.25% {\r\n transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 54.1667% {\r\n transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 52.0833% {\r\n transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 47.9167% {\r\n transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 45.8333% {\r\n transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 43.75% {\r\n transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 41.6667% {\r\n transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 39.5833% {\r\n transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 37.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 35.4167% {\r\n transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 33.3333% {\r\n transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 31.25% {\r\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 29.1667% {\r\n transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 27.0833% {\r\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 25% {\r\n transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 22.9167% {\r\n transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 20.8333% {\r\n transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 18.75% {\r\n transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 16.6667% {\r\n transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 14.5833% {\r\n transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 12.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 10.4167% {\r\n transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 8.33333% {\r\n transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 6.25% {\r\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 4.16667% {\r\n transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 2.08333% {\r\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 0% {\r\n opacity: 1;\r\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n}\r\n@keyframes pops-anim-roll-reverse {\r\n 0% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n }\r\n 100% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n }\r\n}\r\n@keyframes pops-anim-sandra-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: scale3d(1, 1, 1);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale3d(1.1, 1.1, 1);\r\n }\r\n}\r\n@keyframes pops-anim-gather-reverse {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(5, 0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale(5, 0);\r\n }\r\n}\r\n\r\n@-webkit-keyframes pops-motion-fadeInTop {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateY(-30px);\r\n transform: translateY(-30px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInTop {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n -ms-transform: translateY(-30px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutTop {\r\n 0% {\r\n opacity: 10;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateY(-30px);\r\n transform: translateY(-30px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutTop {\r\n 0% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n -ms-transform: translateY(-30px);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInBottom {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInBottom {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n -ms-transform: translateY(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutBottom {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutBottom {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n -ms-transform: translateY(20px);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInLeft {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-20px);\r\n transform: translateX(-20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInLeft {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-30px);\r\n transform: translateX(-30px);\r\n -ms-transform: translateX(-30px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutLeft {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-30px);\r\n transform: translateX(-30px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutLeft {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-20px);\r\n transform: translateX(-20px);\r\n -ms-transform: translateX(-20px);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInRight {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInRight {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n -ms-transform: translateX(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutRight {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutRight {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n -ms-transform: translateX(20px);\r\n }\r\n}\r\n\r\n/* 动画 */\r\n.pops-anim[anim=\"pops-anim-spread\"] {\r\n animation: pops-anim-spread 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake\"] {\r\n animation: pops-anim-shake 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left\"] {\r\n animation: pops-anim-rolling-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right\"] {\r\n animation: pops-anim-rolling-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top\"] {\r\n animation: pops-anim-slide-top 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom\"] {\r\n animation: pops-anim-slide-bottom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left\"] {\r\n animation: pops-anim-slide-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right\"] {\r\n animation: pops-anim-slide-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein\"] {\r\n animation: pops-anim-fadein 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom\"] {\r\n animation: pops-anim-fadein-zoom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert\"] {\r\n animation: pops-anim-fadein-alert 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don\"] {\r\n animation: pops-anim-don 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll\"] {\r\n animation: pops-anim-roll 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra\"] {\r\n animation: pops-anim-sandra 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather\"] {\r\n animation: pops-anim-gather 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-spread-reverse\"] {\r\n animation: pops-anim-spread-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake-reverse\"] {\r\n animation: pops-anim-shake-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left-reverse\"] {\r\n animation: pops-anim-rolling-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right-reverse\"] {\r\n animation: pops-anim-rolling-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top-reverse\"] {\r\n animation: pops-anim-slide-top-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom-reverse\"] {\r\n animation: pops-anim-slide-bottom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left-reverse\"] {\r\n animation: pops-anim-slide-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right-reverse\"] {\r\n animation: pops-anim-slide-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-reverse\"] {\r\n animation: pops-anim-fadein-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom-reverse\"] {\r\n animation: pops-anim-fadein-zoom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert-reverse\"] {\r\n animation: pops-anim-fadein-alert-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don-reverse\"] {\r\n animation: pops-anim-don-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll-reverse\"] {\r\n animation: pops-anim-roll-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra-reverse\"] {\r\n animation: pops-anim-sandra-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather-reverse\"] {\r\n animation: pops-anim-gather-reverse 0.3s;\r\n}\r\n";
2814
2821
 
2815
2822
  var alertCSS = "";
2816
2823
 
2817
2824
  var confirmCSS = "";
2818
2825
 
2819
- var promptCSS = ".pops[type-value=\"prompt\"] {\n --input-color: #000000;\n --input-bg-color: none;\n --input-placeholder-color: #a1a4ac;\n}\n.pops[type-value=\"prompt\"] input[pops],\n.pops[type-value=\"prompt\"] textarea[pops] {\n width: 100%;\n height: 100%;\n outline: 0;\n border: 0;\n color: var(--input-color);\n background-color: var(--input-bg-color);\n}\n\n.pops[type-value=\"prompt\"] input[pops] {\n padding: 5px 10px;\n}\n.pops[type-value=\"prompt\"] textarea[pops] {\n padding: 5px 10px;\n resize: none;\n}\n\n.pops[type-value=\"prompt\"] input[pops]::placeholder,\n.pops[type-value=\"prompt\"] textarea[pops]::placeholder {\n color: var(--input-placeholder-color);\n}\n@media (prefers-color-scheme: dark) {\n .pops[type-value=\"prompt\"] {\n --input-color: #ffffff;\n --input-bg-color: #333333;\n --input-placeholder-color: #8d9095;\n }\n}\n";
2826
+ var promptCSS = ".pops[type-value=\"prompt\"] {\r\n --input-color: #000000;\r\n --input-bg-color: none;\r\n --input-placeholder-color: #a1a4ac;\r\n}\r\n.pops[type-value=\"prompt\"] input[pops],\r\n.pops[type-value=\"prompt\"] textarea[pops] {\r\n width: 100%;\r\n height: 100%;\r\n outline: 0;\r\n border: 0;\r\n color: var(--input-color);\r\n background-color: var(--input-bg-color);\r\n}\r\n\r\n.pops[type-value=\"prompt\"] input[pops] {\r\n padding: 5px 10px;\r\n}\r\n.pops[type-value=\"prompt\"] textarea[pops] {\r\n padding: 5px 10px;\r\n resize: none;\r\n}\r\n\r\n.pops[type-value=\"prompt\"] input[pops]::placeholder,\r\n.pops[type-value=\"prompt\"] textarea[pops]::placeholder {\r\n color: var(--input-placeholder-color);\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n .pops[type-value=\"prompt\"] {\r\n --input-color: #ffffff;\r\n --input-bg-color: #333333;\r\n --input-placeholder-color: #8d9095;\r\n }\r\n}\r\n";
2820
2827
 
2821
- var loadingCSS = ".pops[type-value=\"loading\"] {\n --loading-bd-color: rgba(0, 0, 0, 0.2);\n --loading-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --loading-box-shadow-color: rgb(0 0 0 / 50%);\n --loading-icon-color: rgba(100, 149, 237, 0.1);\n --loading-icon-bd-top-color: rgb(100, 149, 237, var(--pops-bd-opacity));\n}\n.pops[type-value=\"loading\"] {\n position: absolute;\n top: 272.5px;\n top: 50%;\n left: 26px;\n left: 50%;\n display: flex;\n overflow: hidden;\n padding: 10px 15px;\n max-width: 100%;\n max-height: 100%;\n min-width: 0;\n min-height: 0;\n border: 1px solid var(--loading-bd-color);\n border-radius: 5px;\n background-color: var(--loading-bg-color);\n box-shadow: 0 0 5px var(--loading-box-shadow-color);\n vertical-align: middle;\n transition: all 0.35s;\n transform: translate(-50%, -50%);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n align-content: center;\n}\n.pops[type-value=\"loading\"]:before {\n float: left;\n display: inline-block;\n width: 2em;\n height: 2em;\n border: 0.3em solid var(--loading-icon-color);\n border-top: 0.3em solid var(--loading-icon-bd-top-color);\n border-radius: 50%;\n content: \" \";\n vertical-align: middle;\n font-size: inherit;\n animation: pops-anim-wait-rotate 1.2s linear infinite;\n}\n.pops[type-value=\"loading\"] .pops-loading-content {\n position: static;\n top: 0;\n bottom: 0;\n float: left;\n overflow: hidden;\n width: auto;\n font-size: inherit;\n line-height: normal;\n align-content: center;\n}\n\n@media (prefers-color-scheme: dark) {\n .pops[type-value=\"loading\"] {\n --loading-bg-color: #222222;\n }\n}\n";
2828
+ var loadingCSS = ".pops[type-value=\"loading\"] {\r\n --loading-bd-color: rgba(0, 0, 0, 0.2);\r\n --loading-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --loading-box-shadow-color: rgb(0 0 0 / 50%);\r\n --loading-icon-color: rgba(100, 149, 237, 0.1);\r\n --loading-icon-bd-top-color: rgb(100, 149, 237, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"loading\"] {\r\n position: absolute;\r\n top: 272.5px;\r\n top: 50%;\r\n left: 26px;\r\n left: 50%;\r\n display: flex;\r\n overflow: hidden;\r\n padding: 10px 15px;\r\n max-width: 100%;\r\n max-height: 100%;\r\n min-width: 0;\r\n min-height: 0;\r\n border: 1px solid var(--loading-bd-color);\r\n border-radius: 5px;\r\n background-color: var(--loading-bg-color);\r\n box-shadow: 0 0 5px var(--loading-box-shadow-color);\r\n vertical-align: middle;\r\n transition: all 0.35s;\r\n transform: translate(-50%, -50%);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n align-content: center;\r\n}\r\n.pops[type-value=\"loading\"]:before {\r\n float: left;\r\n display: inline-block;\r\n width: 2em;\r\n height: 2em;\r\n border: 0.3em solid var(--loading-icon-color);\r\n border-top: 0.3em solid var(--loading-icon-bd-top-color);\r\n border-radius: 50%;\r\n content: \" \";\r\n vertical-align: middle;\r\n font-size: inherit;\r\n animation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"loading\"] .pops-loading-content {\r\n position: static;\r\n top: 0;\r\n bottom: 0;\r\n float: left;\r\n overflow: hidden;\r\n width: auto;\r\n font-size: inherit;\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops[type-value=\"loading\"] {\r\n --loading-bg-color: #222222;\r\n }\r\n}\r\n";
2822
2829
 
2823
- var iframeCSS = ".pops[type-value=\"iframe\"] {\n --container-title-height: 55px;\n transition:\n width 0.35s ease,\n height 0.35s ease;\n}\n.pops[type-value=\"iframe\"] .pops-content {\n overflow: hidden;\n}\n.pops-loading {\n position: absolute;\n top: 40px;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 5;\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n}\n.pops-loading:before {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 3;\n display: block;\n margin: -20px 0 0 -20px;\n padding: 20px;\n border: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\n border-radius: 50%;\n content: \"\";\n border-top-color: transparent;\n animation: pops-anim-wait-rotate 1.2s linear infinite;\n}\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] {\n bottom: 0;\n max-width: 200px;\n max-height: 53px;\n position: unset;\n}\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] .pops-header-control[data-type=\"min\"] {\n display: none;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-top {\n top: unset !important;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-left {\n left: unset !important;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-transform {\n transform: none !important;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-transition {\n transition: none !important;\n}\n.pops[type-value=\"iframe\"].pops[type-module=\"max\"] {\n width: 100% !important;\n height: 100% !important;\n}\n.pops[type-value=\"iframe\"] iframe[pops] {\n width: 100%;\n height: 100%;\n border: 0;\n}\n.pops-iframe-content-global-loading {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 999999;\n width: 0;\n height: 4px;\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n animation: iframeLoadingChange 2s forwards;\n}\n\n.pops-anim:has(.pops[type-value=\"iframe\"].pops[type-module=\"min\"]) {\n position: unset;\n}\n";
2830
+ var iframeCSS = ".pops[type-value=\"iframe\"] {\r\n --container-title-height: 55px;\r\n transition:\r\n width 0.35s ease,\r\n height 0.35s ease;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-content {\r\n overflow: hidden;\r\n}\r\n.pops-loading {\r\n position: absolute;\r\n top: 40px;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n z-index: 5;\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-loading:before {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n z-index: 3;\r\n display: block;\r\n margin: -20px 0 0 -20px;\r\n padding: 20px;\r\n border: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\r\n border-radius: 50%;\r\n content: \"\";\r\n border-top-color: transparent;\r\n animation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] {\r\n bottom: 0;\r\n max-width: 200px;\r\n max-height: 53px;\r\n position: unset;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] .pops-header-control[data-type=\"min\"] {\r\n display: none;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-top {\r\n top: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-left {\r\n left: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transform {\r\n transform: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transition {\r\n transition: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"max\"] {\r\n width: 100% !important;\r\n height: 100% !important;\r\n}\r\n.pops[type-value=\"iframe\"] iframe[pops] {\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n}\r\n.pops-iframe-content-global-loading {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n z-index: 999999;\r\n width: 0;\r\n height: 4px;\r\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n animation: iframeLoadingChange 2s forwards;\r\n}\r\n\r\n.pops-anim:has(.pops[type-value=\"iframe\"].pops[type-module=\"min\"]) {\r\n position: unset;\r\n}\r\n";
2824
2831
 
2825
- var tooltipCSS = ".pops-tip {\n --pops-bg-opacity: 1;\n --tooltip-color: #4e4e4e;\n --tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --tooltip-bd-radius: 2px;\n --tooltip-box-shadow-left-color: rgba(0, 0, 0, 0.24);\n --tooltip-box-shadow-right-color: rgba(0, 0, 0, 0.12);\n --tooltip-font-size: 14px;\n --tooltip-padding-top: 13px;\n --tooltip-padding-right: 13px;\n --tooltip-padding-bottom: 13px;\n --tooltip-padding-left: 13px;\n\n --tooltip-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);\n --tooltip-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);\n --tooltip-arrow--after-color: rgb(78, 78, 78);\n --tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --tooltip-arrow--after-width: 12px;\n --tooltip-arrow--after-height: 12px;\n}\n.pops-tip {\n padding: var(--tooltip-padding-top) var(--tooltip-padding-right) var(--tooltip-padding-bottom)\n var(--tooltip-padding-left);\n max-width: 400px;\n max-height: 300px;\n border-radius: var(--tooltip-bd-radius);\n background-color: var(--tooltip-bg-color);\n box-shadow:\n 0 1.5px 4px var(--tooltip-box-shadow-left-color),\n 0 1.5px 6px var(--tooltip-box-shadow-right-color);\n color: var(--tooltip-color);\n font-size: var(--tooltip-font-size);\n}\n.pops-tip[data-position=\"absolute\"] {\n position: absolute;\n}\n.pops-tip[data-position=\"fixed\"] {\n position: fixed;\n}\n\n.pops-tip .pops-tip-arrow {\n position: absolute;\n top: 100%;\n left: 50%;\n overflow: hidden;\n width: 100%;\n height: 12.5px;\n transform: translateX(-50%);\n}\n\n.pops-tip .pops-tip-arrow::after {\n position: absolute;\n top: 0;\n left: 50%;\n width: var(--tooltip-arrow--after-width);\n height: var(--tooltip-arrow--after-height);\n background: var(--tooltip-arrow--after-bg-color);\n color: var(--tooltip-arrow--after-color);\n box-shadow:\n 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),\n 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);\n content: \"\";\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\n position: absolute;\n top: 100%;\n left: 50%;\n overflow: hidden;\n width: 100%;\n height: 12.5px;\n transform: translateX(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\n position: absolute;\n top: 0;\n left: 50%;\n width: var(--tooltip-arrow--after-width);\n height: var(--tooltip-arrow--after-height);\n background: var(--tooltip-arrow--after-bg-color);\n box-shadow:\n 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),\n 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);\n content: \"\";\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\n top: 50%;\n left: -12.5px;\n width: 12.5px;\n height: 50px;\n transform: translateY(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\n position: absolute;\n top: 50%;\n left: 100%;\n content: \"\";\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\n top: 50%;\n right: -12.5px;\n left: auto;\n width: 12.5px;\n height: 50px;\n transform: translateY(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\n position: absolute;\n top: 50%;\n left: 0;\n content: \"\";\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\n top: -12.5px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\n position: absolute;\n top: 100%;\n left: 50%;\n content: \"\";\n}\n\n.pops-tip[data-motion] {\n -webkit-animation-duration: 0.25s;\n animation-duration: 0.25s;\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n}\n.pops-tip[data-motion=\"fadeOutRight\"] {\n -webkit-animation-name: pops-motion-fadeOutRight;\n animation-name: pops-motion-fadeOutRight;\n}\n.pops-tip[data-motion=\"fadeInTop\"] {\n -webkit-animation-name: pops-motion-fadeInTop;\n animation-name: pops-motion-fadeInTop;\n animation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\n}\n.pops-tip[data-motion=\"fadeOutTop\"] {\n -webkit-animation-name: pops-motion-fadeOutTop;\n animation-name: pops-motion-fadeOutTop;\n animation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\n}\n.pops-tip[data-motion=\"fadeInBottom\"] {\n -webkit-animation-name: pops-motion-fadeInBottom;\n animation-name: pops-motion-fadeInBottom;\n}\n.pops-tip[data-motion=\"fadeOutBottom\"] {\n -webkit-animation-name: pops-motion-fadeOutBottom;\n animation-name: pops-motion-fadeOutBottom;\n}\n.pops-tip[data-motion=\"fadeInLeft\"] {\n -webkit-animation-name: pops-motion-fadeInLeft;\n animation-name: pops-motion-fadeInLeft;\n}\n.pops-tip[data-motion=\"fadeOutLeft\"] {\n -webkit-animation-name: pops-motion-fadeOutLeft;\n animation-name: pops-motion-fadeOutLeft;\n}\n.pops-tip[data-motion=\"fadeInRight\"] {\n -webkit-animation-name: pops-motion-fadeInRight;\n animation-name: pops-motion-fadeInRight;\n}\n\n/* github的样式 */\n.pops-tip.github-tooltip {\n --tooltip-bg-opacity: 1;\n --tooltip-color: #ffffff;\n --tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\n --tooltip-bd-radius: 6px;\n --tooltip-padding-top: 6px;\n --tooltip-padding-right: 8px;\n --tooltip-padding-bottom: 6px;\n --tooltip-padding-left: 8px;\n\n --tooltip-arrow--after-color: rgb(255, 255, 255);\n --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\n --tooltip-arrow--after-width: 8px;\n --tooltip-arrow--after-height: 8px;\n}\n\n@media (prefers-color-scheme: dark) {\n .pops-tip {\n --tooltip-color: #ffffff;\n --tooltip-bg-color: #fafafa;\n --tooltip-arrow--after-color: #fafafa;\n --tooltip-arrow--after-bg-color: rgb(250, 250, 250, var(--pops-bg-opacity));\n }\n}\n";
2832
+ var tooltipCSS = ".pops-tip {\r\n --pops-bg-opacity: 1;\r\n --tooltip-color: #4e4e4e;\r\n --tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --tooltip-bd-radius: 2px;\r\n --tooltip-box-shadow-left-color: rgba(0, 0, 0, 0.24);\r\n --tooltip-box-shadow-right-color: rgba(0, 0, 0, 0.12);\r\n --tooltip-font-size: 14px;\r\n --tooltip-padding-top: 13px;\r\n --tooltip-padding-right: 13px;\r\n --tooltip-padding-bottom: 13px;\r\n --tooltip-padding-left: 13px;\r\n\r\n --tooltip-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);\r\n --tooltip-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);\r\n --tooltip-arrow--after-color: rgb(78, 78, 78);\r\n --tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --tooltip-arrow--after-width: 12px;\r\n --tooltip-arrow--after-height: 12px;\r\n}\r\n.pops-tip {\r\n padding: var(--tooltip-padding-top) var(--tooltip-padding-right) var(--tooltip-padding-bottom)\r\n var(--tooltip-padding-left);\r\n max-width: 400px;\r\n max-height: 300px;\r\n border-radius: var(--tooltip-bd-radius);\r\n background-color: var(--tooltip-bg-color);\r\n box-shadow:\r\n 0 1.5px 4px var(--tooltip-box-shadow-left-color),\r\n 0 1.5px 6px var(--tooltip-box-shadow-right-color);\r\n color: var(--tooltip-color);\r\n font-size: var(--tooltip-font-size);\r\n}\r\n.pops-tip[data-position=\"absolute\"] {\r\n position: absolute;\r\n}\r\n.pops-tip[data-position=\"fixed\"] {\r\n position: fixed;\r\n}\r\n\r\n.pops-tip .pops-tip-arrow {\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 12.5px;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow::after {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n width: var(--tooltip-arrow--after-width);\r\n height: var(--tooltip-arrow--after-height);\r\n background: var(--tooltip-arrow--after-bg-color);\r\n color: var(--tooltip-arrow--after-color);\r\n box-shadow:\r\n 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),\r\n 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);\r\n content: \"\";\r\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 12.5px;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n width: var(--tooltip-arrow--after-width);\r\n height: var(--tooltip-arrow--after-height);\r\n background: var(--tooltip-arrow--after-bg-color);\r\n box-shadow:\r\n 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),\r\n 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);\r\n content: \"\";\r\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\r\n top: 50%;\r\n left: -12.5px;\r\n width: 12.5px;\r\n height: 50px;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\r\n position: absolute;\r\n top: 50%;\r\n left: 100%;\r\n content: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\r\n top: 50%;\r\n right: -12.5px;\r\n left: auto;\r\n width: 12.5px;\r\n height: 50px;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n content: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\r\n top: -12.5px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n content: \"\";\r\n}\r\n\r\n.pops-tip[data-motion] {\r\n -webkit-animation-duration: 0.25s;\r\n animation-duration: 0.25s;\r\n -webkit-animation-fill-mode: forwards;\r\n animation-fill-mode: forwards;\r\n}\r\n.pops-tip[data-motion=\"fadeOutRight\"] {\r\n -webkit-animation-name: pops-motion-fadeOutRight;\r\n animation-name: pops-motion-fadeOutRight;\r\n}\r\n.pops-tip[data-motion=\"fadeInTop\"] {\r\n -webkit-animation-name: pops-motion-fadeInTop;\r\n animation-name: pops-motion-fadeInTop;\r\n animation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\r\n}\r\n.pops-tip[data-motion=\"fadeOutTop\"] {\r\n -webkit-animation-name: pops-motion-fadeOutTop;\r\n animation-name: pops-motion-fadeOutTop;\r\n animation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\r\n}\r\n.pops-tip[data-motion=\"fadeInBottom\"] {\r\n -webkit-animation-name: pops-motion-fadeInBottom;\r\n animation-name: pops-motion-fadeInBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeOutBottom\"] {\r\n -webkit-animation-name: pops-motion-fadeOutBottom;\r\n animation-name: pops-motion-fadeOutBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeInLeft\"] {\r\n -webkit-animation-name: pops-motion-fadeInLeft;\r\n animation-name: pops-motion-fadeInLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeOutLeft\"] {\r\n -webkit-animation-name: pops-motion-fadeOutLeft;\r\n animation-name: pops-motion-fadeOutLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeInRight\"] {\r\n -webkit-animation-name: pops-motion-fadeInRight;\r\n animation-name: pops-motion-fadeInRight;\r\n}\r\n\r\n/* github的样式 */\r\n.pops-tip.github-tooltip {\r\n --tooltip-bg-opacity: 1;\r\n --tooltip-color: #ffffff;\r\n --tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n --tooltip-bd-radius: 6px;\r\n --tooltip-padding-top: 6px;\r\n --tooltip-padding-right: 8px;\r\n --tooltip-padding-bottom: 6px;\r\n --tooltip-padding-left: 8px;\r\n\r\n --tooltip-arrow--after-color: rgb(255, 255, 255);\r\n --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n --tooltip-arrow--after-width: 8px;\r\n --tooltip-arrow--after-height: 8px;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops-tip {\r\n --tooltip-color: #ffffff;\r\n --tooltip-bg-color: #fafafa;\r\n --tooltip-arrow--after-color: #fafafa;\r\n --tooltip-arrow--after-bg-color: rgb(250, 250, 250, var(--pops-bg-opacity));\r\n }\r\n}\r\n";
2826
2833
 
2827
- var drawerCSS = ".pops[type-value=\"drawer\"] {\n position: fixed;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n box-shadow:\n 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\n 0px 12px 32px rgba(0, 0, 0, 0.12),\n 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\n overflow: hidden;\n transition: all 0.3s;\n}\n\n.pops[type-value=\"drawer\"][direction=\"top\"] {\n width: 100%;\n left: 0;\n right: 0;\n top: 0;\n}\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\n width: 100%;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.pops[type-value=\"drawer\"][direction=\"left\"] {\n height: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n}\n.pops[type-value=\"drawer\"][direction=\"right\"] {\n height: 100%;\n top: 0;\n bottom: 0;\n right: 0;\n}\n";
2834
+ var drawerCSS = ".pops[type-value=\"drawer\"] {\r\n position: fixed;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n box-shadow:\r\n 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\r\n 0px 12px 32px rgba(0, 0, 0, 0.12),\r\n 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\r\n overflow: hidden;\r\n transition: all 0.3s;\r\n}\r\n\r\n.pops[type-value=\"drawer\"][direction=\"top\"] {\r\n width: 100%;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\r\n width: 100%;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"left\"] {\r\n height: 100%;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"right\"] {\r\n height: 100%;\r\n top: 0;\r\n bottom: 0;\r\n right: 0;\r\n}\r\n";
2828
2835
 
2829
- var folderCSS = ".pops-folder-list {\n --folder-arrow-fill-color: #d4d7de;\n --folder-arrow-active-fill-color: #06a7ff;\n --header-breadcrumb-text-color: #06a7ff;\n --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\n --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\n --header-breadcrumb-all-files-last-text-color: #999999;\n --table-header-row-text-color: #818999;\n --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\n --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\n --table-body-row-text-color: #05082c;\n --table-body-row-file-name-text-color: #05082c;\n --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\n --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\n --table-body-row-file-name-hover-text-color: #06a7ff;\n --table-body-row-content-text-color: #818999;\n}\n.pops-folder-list .cursor-p {\n cursor: pointer;\n}\n.pops-folder-list a {\n background: 0 0;\n text-decoration: none;\n -webkit-tap-highlight-color: transparent;\n color: var(--header-breadcrumb-text-color);\n}\ntable.pops-folder-list-table__body,\ntable.pops-folder-list-table__header {\n width: 100%;\n table-layout: fixed;\n border-collapse: collapse;\n border-spacing: 0;\n padding: 0 20px;\n}\ntable.pops-folder-list-table__body,\ntable.pops-folder-list-table__header {\n height: 100%;\n background: 0 0;\n overflow: hidden;\n display: -webkit-box;\n display: -ms-flexbox;\n -ms-flex-direction: column;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n}\ntable.pops-folder-list-table__body {\n height: 100%;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops-folder-list table tr {\n line-height: normal;\n align-content: center;\n}\n.pops-folder-list-table__header-row {\n height: 50px;\n line-height: normal;\n align-content: center;\n color: var(--table-header-row-text-color);\n text-align: left;\n font-size: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops-folder-list-table__body-row {\n height: 50px;\n line-height: normal;\n align-content: center;\n color: var(--table-body-row-text-color);\n font-size: 12px;\n}\n.pops-folder-list-table__body-row:hover {\n background-color: var(--table-body-row-hover-bg-color);\n border-color: var(--table-body-row-hover-bd-color);\n border: 0;\n outline: none;\n}\n.pops-folder-list table th {\n border: 0;\n border-bottom: 1px solid var(--table-body-th-text-color);\n}\n.pops-folder-list table td {\n border: 0;\n border-bottom: 1px solid var(--table-body-td-text-color);\n position: relative;\n}\n.pops-folder-list .list-name-text {\n display: inline-block;\n padding-left: 12px;\n line-height: normal;\n align-content: center;\n max-width: 176px;\n}\n.pops-folder-list-file-name > div {\n display: flex;\n align-items: center;\n}\n\n.pops-mobile-folder-list-file-name {\n display: flex;\n align-items: center;\n}\n.pops-mobile-folder-list-file-name > div {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 6px 0px;\n flex-direction: column;\n}\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\n width: 45px;\n height: 45px;\n}\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\n padding-left: unset;\n max-width: 250px;\n overflow-x: hidden;\n font-weight: 400;\n line-height: unset;\n margin-bottom: 4px;\n white-space: normal;\n text-overflow: unset;\n}\n\n/* 修改滚动 */\n.pops-folder-content {\n overflow: hidden !important;\n}\n.pops-folder-content .pops-folder-list {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n.pops-folder-content .pops-folder-list-table__body-div {\n height: 100%;\n flex: 1 auto;\n overflow: auto;\n padding-bottom: 0;\n}\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\n height: 100%;\n flex: 1 auto;\n overflow: auto;\n padding-bottom: 0;\n}\n.pops-folder-content table.pops-folder-list-table__body {\n overflow: auto;\n}\n.pops-folder-content .pops-folder-list-table__header-div {\n flex: 0;\n}\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\n display: none;\n}\n\n.pops-folder-list .pops-folder-list-file-name-title-text {\n color: var(--table-body-row-file-name-text-color);\n}\n.pops-folder-list .pops-folder-list-file-name-title-text:hover {\n text-decoration: none;\n color: var(--table-body-row-file-name-hover-text-color);\n}\n.pops-folder-list .text-ellip {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.pops-folder-list .content {\n color: var(--table-body-row-content-text-color);\n position: relative;\n width: 100%;\n text-align: left;\n}\n.pops-folder-list .inline-block-v-middle {\n display: inline-block;\n vertical-align: middle;\n}\n.pops-folder-list .flex-a-i-center {\n display: flex;\n align-items: center;\n}\n.pops-folder-list .u-file-icon {\n display: inline-block;\n vertical-align: middle;\n}\n.pops-folder-list .u-file-icon--list {\n width: 32px;\n height: 32px;\n}\n.pops-folder-list .pops-folder-list-file-icon {\n line-height: normal;\n align-content: center;\n position: relative;\n vertical-align: middle;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\n flex: 1;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n min-height: 17px;\n flex-wrap: wrap;\n}\n.pops-folder-list .pops-folder-list-table__sort {\n display: inline-flex;\n margin-left: 4px;\n flex-direction: column;\n}\n\n.pops-folder-list .pops-folder-icon-arrow {\n width: 10px;\n height: 10px;\n fill: var(--folder-arrow-fill-color);\n}\n.pops-folder-list .pops-folder-icon-active {\n fill: var(--folder-arrow-active-fill-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb {\n padding: 4px 20px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: start;\n -webkit-justify-content: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n min-height: 35px;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\n font-size: 12px;\n color: var(--header-breadcrumb-all-files-text-color);\n line-height: normal;\n align-content: center;\n font-weight: 700;\n display: inline-block;\n max-width: 140px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: normal;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\n color: var(--header-breadcrumb-all-files-last-text-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\n font-size: 14px;\n color: var(--header-breadcrumb-all-files-first-text-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\n width: 16px;\n height: 16px;\n}\n.pops-folder-list .iconArrow {\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\n 55% 50%/6px 9px no-repeat;\n}\n\n@media (prefers-color-scheme: dark) {\n .pops[type-value=\"folder\"] {\n --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n }\n .pops-folder-list {\n --header-breadcrumb-text-color: #06a7ff;\n --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\n --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\n --header-breadcrumb-all-files-last-text-color: #818999;\n --table-body-row-text-color: #f7f8fa;\n --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n --table-body-td-text-color: #495366;\n --table-body-row-hover-bd-color: #1f2022;\n --table-body-row-hover-bg-color: #1f2022;\n --table-body-row-file-name-text-color: #f7f8fa;\n }\n}\n";
2836
+ var folderCSS = ".pops-folder-list {\r\n --folder-arrow-fill-color: #d4d7de;\r\n --folder-arrow-active-fill-color: #06a7ff;\r\n --header-breadcrumb-text-color: #06a7ff;\r\n --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-last-text-color: #999999;\r\n --table-header-row-text-color: #818999;\r\n --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n --table-body-row-text-color: #05082c;\r\n --table-body-row-file-name-text-color: #05082c;\r\n --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n --table-body-row-file-name-hover-text-color: #06a7ff;\r\n --table-body-row-content-text-color: #818999;\r\n}\r\n.pops-folder-list .cursor-p {\r\n cursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n background: 0 0;\r\n text-decoration: none;\r\n -webkit-tap-highlight-color: transparent;\r\n color: var(--header-breadcrumb-text-color);\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n width: 100%;\r\n table-layout: fixed;\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n padding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n height: 100%;\r\n background: 0 0;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n -ms-flex-direction: column;\r\n -webkit-box-orient: vertical;\r\n -webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n height: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n height: 50px;\r\n line-height: normal;\r\n align-content: center;\r\n color: var(--table-header-row-text-color);\r\n text-align: left;\r\n font-size: 12px;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n height: 50px;\r\n line-height: normal;\r\n align-content: center;\r\n color: var(--table-body-row-text-color);\r\n font-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n background-color: var(--table-body-row-hover-bg-color);\r\n border-color: var(--table-body-row-hover-bd-color);\r\n border: 0;\r\n outline: none;\r\n}\r\n.pops-folder-list table th {\r\n border: 0;\r\n border-bottom: 1px solid var(--table-body-th-text-color);\r\n}\r\n.pops-folder-list table td {\r\n border: 0;\r\n border-bottom: 1px solid var(--table-body-td-text-color);\r\n position: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n display: inline-block;\r\n padding-left: 12px;\r\n line-height: normal;\r\n align-content: center;\r\n max-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n padding: 6px 0px;\r\n flex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n width: 45px;\r\n height: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n padding-left: unset;\r\n max-width: 250px;\r\n overflow-x: hidden;\r\n font-weight: 400;\r\n line-height: unset;\r\n margin-bottom: 4px;\r\n white-space: normal;\r\n text-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n overflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n height: 100%;\r\n flex: 1 auto;\r\n overflow: auto;\r\n padding-bottom: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n height: 100%;\r\n flex: 1 auto;\r\n overflow: auto;\r\n padding-bottom: 0;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n overflow: auto;\r\n}\r\n.pops-folder-content .pops-folder-list-table__header-div {\r\n flex: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n display: none;\r\n}\r\n\r\n.pops-folder-list .pops-folder-list-file-name-title-text {\r\n color: var(--table-body-row-file-name-text-color);\r\n}\r\n.pops-folder-list .pops-folder-list-file-name-title-text:hover {\r\n text-decoration: none;\r\n color: var(--table-body-row-file-name-hover-text-color);\r\n}\r\n.pops-folder-list .text-ellip {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n color: var(--table-body-row-content-text-color);\r\n position: relative;\r\n width: 100%;\r\n text-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n display: inline-block;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n display: inline-block;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n width: 32px;\r\n height: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n line-height: normal;\r\n align-content: center;\r\n position: relative;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n flex: 1;\r\n display: -webkit-box;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-align: center;\r\n -webkit-align-items: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -webkit-flex-direction: row;\r\n -ms-flex-direction: row;\r\n flex-direction: row;\r\n min-height: 17px;\r\n flex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n display: inline-flex;\r\n margin-left: 4px;\r\n flex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n width: 10px;\r\n height: 10px;\r\n fill: var(--folder-arrow-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n fill: var(--folder-arrow-active-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n padding: 4px 20px;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n display: -webkit-box;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-align: center;\r\n -webkit-align-items: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -webkit-flex-direction: row;\r\n -ms-flex-direction: row;\r\n flex-direction: row;\r\n -webkit-box-pack: start;\r\n -webkit-justify-content: start;\r\n -ms-flex-pack: start;\r\n justify-content: flex-start;\r\n min-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n font-size: 12px;\r\n color: var(--header-breadcrumb-all-files-text-color);\r\n line-height: normal;\r\n align-content: center;\r\n font-weight: 700;\r\n display: inline-block;\r\n max-width: 140px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n word-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n color: var(--header-breadcrumb-all-files-last-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n font-size: 14px;\r\n color: var(--header-breadcrumb-all-files-first-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n 55% 50%/6px 9px no-repeat;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops[type-value=\"folder\"] {\r\n --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n }\r\n .pops-folder-list {\r\n --header-breadcrumb-text-color: #06a7ff;\r\n --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-last-text-color: #818999;\r\n --table-body-row-text-color: #f7f8fa;\r\n --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n --table-body-td-text-color: #495366;\r\n --table-body-row-hover-bd-color: #1f2022;\r\n --table-body-row-hover-bg-color: #1f2022;\r\n --table-body-row-file-name-text-color: #f7f8fa;\r\n }\r\n}\r\n";
2830
2837
 
2831
- var panelCSS = ".pops[type-value=\"panel\"] {\n --pops-bg-color: #f2f2f2;\n --pops-color: #333333;\n --panel-title-bg-color: #ffffff;\n\n --panel-aside-bg-color: #ffffff;\n --panel-aside-hover-color: rgb(64, 158, 255);\n --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\n\n --pops-panel-forms-margin-top-bottom: 10px;\n --pops-panel-forms-margin-left-right: 20px;\n --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\n --pops-panel-forms-header-padding-top-bottom: 15px;\n --pops-panel-forms-header-padding-left-right: 10px;\n --pops-panel-forms-container-item-left-text-gap: 6px;\n --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n --pops-panel-forms-container-item-bg-color: #ffffff;\n --pops-panel-forms-container-item-title-color: #333;\n --pops-panel-forms-container-item-border-radius: 6px;\n --pops-panel-forms-container-item-margin-top-bottom: 10px;\n --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\n --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\n --pops-panel-forms-container-li-padding-top-bottom: 12px;\n --pops-panel-forms-container-li-padding-left-right: 16px;\n\n --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\n}\n.pops[type-value=\"panel\"] {\n color: var(--pops-color);\n background: var(--pops-bg-color);\n}\n.pops[type-value] .pops-panel-title {\n background: var(--panel-title-bg-color);\n}\n\n/* ↓panel的CSS↓ */\n/* 左侧的列表 */\naside.pops-panel-aside {\n box-sizing: border-box;\n flex-shrink: 0;\n max-width: 200px;\n min-width: 100px;\n height: 100%;\n background: var(--panel-aside-bg-color);\n border-right: 1px solid var(--panel-aside-bg-color);\n font-size: 0.9em;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\naside.pops-panel-aside {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\naside.pops-panel-aside .pops-panel-aside-top-container {\n overflow: auto;\n}\naside.pops-panel-aside ul li {\n margin: 6px 8px;\n border-radius: 4px;\n padding: 6px 10px;\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\naside.pops-panel-aside .pops-is-visited,\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\n color: var(--panel-aside-hover-color);\n background: var(--panel-aside-hover-bg-color);\n}\n/* 左侧的列表 */\n\n.pops-panel-content {\n display: flex;\n flex-direction: row;\n flex: 1;\n overflow: auto;\n flex-basis: auto;\n box-sizing: border-box;\n min-width: 0;\n bottom: 0 !important;\n}\n\n.pops-panel-section-wrapper {\n width: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\nsection.pops-panel-container {\n width: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\nsection.pops-panel-container .pops-panel-container-header-ul,\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\n border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\n flex: 0 auto;\n}\nsection.pops-panel-container .pops-panel-container-header-ul li,\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\n display: flex;\n justify-content: flex-start !important;\n margin: 0px !important;\n padding: var(--pops-panel-forms-header-padding-top-bottom)\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\n text-align: left;\n}\nsection.pops-panel-container ul.pops-panel-container-main-ul {\n overflow: auto;\n /*flex: 1;*/\n}\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: var(--pops-panel-forms-margin-top-bottom)\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\n gap: 10px;\n}\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\n margin: 10px;\n margin-left: calc(\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\n );\n font-size: 0.9em;\n text-align: left;\n color: var(--pops-panel-forms-container-item-title-color);\n}\nsection.pops-panel-container li.pops-panel-forms-container-item {\n /* 去除<li>左侧的圆点 */\n display: block;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\n border-radius: var(--pops-panel-forms-container-item-border-radius);\n background: var(--pops-panel-forms-container-item-bg-color);\n margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\n var(--pops-panel-forms-container-li-padding-left-right);\n margin: 0px 0px;\n border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n text-align: left;\n}\n/*section.pops-panel-container\n\t.pops-panel-forms-container-item\n\tul\n\tli.pops-panel-deepMenu-nav-item {\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n}*/\nsection.pops-panel-container\n .pops-panel-forms-container-item\n ul.pops-panel-forms-container-item-formlist\n li:last-child {\n border: 0px;\n}\n/* 左侧的文字 */\nsection.pops-panel-container .pops-panel-item-left-text {\n display: flex;\n flex-direction: column;\n gap: var(--pops-panel-forms-container-item-left-text-gap);\n}\n\n/* 左侧的主文字 */\n/*section.pops-panel-container .pops-panel-item-left-main-text {\n\t\n}*/\n/* 左侧的描述文字 */\nsection.pops-panel-container .pops-panel-item-left-desc-text {\n font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\n color: var(--pops-panel-forms-container-item-left-desc-text-color);\n}\n\n/* 折叠面板 */\nsection.pops-panel-container .pops-panel-forms-fold {\n border-radius: var(--pops-panel-forms-container-item-border-radius);\n background: var(--pops-panel-forms-container-item-bg-color);\n margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\n display: flex;\n align-items: center;\n fill: #6c6c6c;\n justify-content: space-between;\n margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\n padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\n}\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\n transform: rotate(90deg);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\n width: 15px;\n height: 15px;\n display: flex;\n align-items: center;\n transform: rotate(-90deg);\n transition: transform 0.3s;\n}\n/* 折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\n height: 0;\n}\n/* 非折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\n margin: 0;\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\n transition: height 0.3s;\n overflow: hidden;\n border-radius: unset;\n background: unset;\n margin: 0;\n height: calc-size(auto, size);\n}\n/* 折叠面板 */\n\n/* 姑且认为小于600px的屏幕为移动端 */\n@media (max-width: 600px) {\n /* 兼容移动端CSS */\n .pops[type-value=\"panel\"] {\n --pops-panel-forms-margin-left-right: 10px;\n }\n .pops[type-value=\"panel\"] {\n width: 92%;\n width: 92vw;\n width: 92dvw;\n }\n .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\n max-width: 20%;\n min-width: auto;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\n text-align: left;\n --pops-panel-forms-margin-left-right: 0px;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\n margin: 0px !important;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\n margin: 10px 10px;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\n max-width: 55%;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\n min-width: 88px !important;\n width: -webkit-fill-available;\n width: -moz-available;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\n font-size: 16px;\n }\n .pops[type-value=\"panel\"] .pops-panel-title p[pops],\n .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\n .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\n font-size: 14px;\n }\n}\n/* switch的CSS */\n.pops-panel-switch {\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n --panel-switch-circle-color: #dcdfe6;\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --panel-switch-checked-circle-color: #409eff;\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n}\n.pops-panel-switch {\n display: inline-flex;\n flex-direction: row-reverse;\n align-items: center;\n position: relative;\n font-size: 14px;\n line-height: normal;\n align-content: center;\n height: 32px;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops-panel-switch input.pops-panel-switch__input {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n margin: 0;\n}\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\n.pops-panel-switch[data-disabled],\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.pops-panel-switch span.pops-panel-switch__core {\n display: inline-flex;\n position: relative;\n align-items: center;\n min-width: 40px;\n height: 20px;\n border: 1px solid var(--panel-switch-core-bd-color);\n outline: 0;\n border-radius: 10px;\n box-sizing: border-box;\n background: var(--panel-switch-core-bg-color);\n cursor: pointer;\n transition:\n border-color 0.3s,\n background-color 0.3s;\n}\n.pops-panel-switch .pops-panel-switch__action {\n position: absolute;\n left: 1px;\n border-radius: 100%;\n transition: all 0.3s;\n width: 16px;\n height: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--panel-switch-circle-bg-color);\n color: var(--panel-switch-circle-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\n border-color: var(--panel-switch-checked-core-bd-color);\n background-color: var(--panel-switch-checked-core-bg-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\n left: calc(100% - 17px);\n color: var(--panel-switch-checked-circle-color);\n}\n/* switch的CSS */\n\n/* slider旧的CSS */\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\n overflow: hidden;\n height: 25px;\n line-height: normal;\n align-content: center;\n display: flex;\n align-items: center;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\n height: 6px;\n background: rgb(228, 231, 237, var(--pops-bg-opacity));\n outline: 0;\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n box-shadow:\n 0 0 2px rgba(0, 0, 0, 0.3),\n 0 3px 5px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n box-shadow:\n 0 0 2px rgba(0, 0, 0, 0.3),\n 0 3px 5px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\n height: 6px;\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\n/* slider旧的CSS */\n\n/* slider的CSS */\n.pops-slider {\n --pops-slider-color-white: #ffffff;\n --pops-slider-color-primary: #409eff;\n --pops-slider-color-info: #909399;\n --pops-slider-text-color-placeholder: #a8abb2;\n --pops-slider-border-color-light: #e4e7ed;\n --pops-slider-border-radius-circle: 100%;\n --pops-slider-transition-duration-fast: 0.2s;\n\n --pops-slider-main-bg-color: var(--pops-slider-color-primary);\n --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\n --pops-slider-stop-bg-color: var(--pops-slider-color-white);\n --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\n --pops-slider-border-radius: 3px;\n --pops-slider-height: 6px;\n --pops-slider-button-size: 20px;\n --pops-slider-button-wrapper-size: 36px;\n --pops-slider-button-wrapper-offset: -15px;\n}\n\n.pops-slider {\n width: 100%;\n height: 32px;\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.pops-slider-width {\n flex: 0 0 52%;\n margin-left: 10px;\n}\n\n.pops-slider__runway {\n flex: 1;\n height: var(--pops-slider-height);\n background-color: var(--pops-slider-runway-bg-color);\n border-radius: var(--pops-slider-border-radius);\n position: relative;\n cursor: pointer;\n}\n\n.pops-slider__runway.show-input {\n margin-right: 30px;\n width: auto;\n}\n\n.pops-slider__runway.pops-slider-is-disabled {\n cursor: default;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\n background-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\n border-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n cursor: not-allowed;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n transform: scale(1);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n cursor: not-allowed;\n}\n\n.pops-slider__input {\n flex-shrink: 0;\n width: 130px;\n}\n\n.pops-slider__bar {\n height: var(--pops-slider-height);\n background-color: var(--pops-slider-main-bg-color);\n border-top-left-radius: var(--pops-slider-border-radius);\n border-bottom-left-radius: var(--pops-slider-border-radius);\n position: absolute;\n}\n\n.pops-slider__button-wrapper {\n height: var(--pops-slider-button-wrapper-size);\n width: var(--pops-slider-button-wrapper-size);\n position: absolute;\n z-index: 1;\n top: var(--pops-slider-button-wrapper-offset);\n transform: translate(-50%);\n background-color: transparent;\n text-align: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n line-height: normal;\n outline: none;\n}\n\n.pops-slider__button-wrapper:after {\n display: inline-block;\n content: \"\";\n height: 100%;\n vertical-align: middle;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n cursor: grab;\n}\n\n.pops-slider__button {\n display: inline-block;\n width: var(--pops-slider-button-size);\n height: var(--pops-slider-button-size);\n vertical-align: middle;\n border: solid 2px var(--pops-slider-main-bg-color);\n background-color: var(--pops-slider-color-white);\n border-radius: 50%;\n box-sizing: border-box;\n transition: var(--pops-slider-transition-duration-fast);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover,\n.pops-slider__button.dragging {\n transform: scale(1.2);\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n cursor: grab;\n}\n\n.pops-slider__button.dragging {\n cursor: grabbing;\n}\n\n.pops-slider__stop {\n position: absolute;\n height: var(--pops-slider-height);\n width: var(--pops-slider-height);\n border-radius: var(--pops-slider-border-radius-circle);\n background-color: var(--pops-slider-stop-bg-color);\n transform: translate(-50%);\n}\n\n.pops-slider__marks {\n top: 0;\n left: 12px;\n width: 18px;\n height: 100%;\n}\n\n.pops-slider__marks-text {\n position: absolute;\n transform: translate(-50%);\n font-size: 14px;\n color: var(--pops-slider-color-info);\n margin-top: 15px;\n white-space: pre;\n}\n\n.pops-slider.is-vertical {\n position: relative;\n display: inline-flex;\n width: auto;\n height: 100%;\n flex: 0;\n}\n\n.pops-slider.is-vertical .pops-slider__runway {\n width: var(--pops-slider-height);\n height: 100%;\n margin: 0 16px;\n}\n\n.pops-slider.is-vertical .pops-slider__bar {\n width: var(--pops-slider-height);\n height: auto;\n border-radius: 0 0 3px 3px;\n}\n\n.pops-slider.is-vertical .pops-slider__button-wrapper {\n top: auto;\n left: var(--pops-slider-button-wrapper-offset);\n transform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__stop {\n transform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__marks-text {\n margin-top: 0;\n left: 15px;\n transform: translateY(50%);\n}\n\n.pops-slider--large {\n height: 40px;\n}\n\n.pops-slider--small {\n height: 24px;\n}\n/* slider的CSS */\n\n/* input的CSS */\n.pops-panel-input {\n --el-disabled-text-color: #a8abb2;\n --el-disabled-bg-color: #f5f7fa;\n --el-disabled-border-color: #e4e7ed;\n\n --pops-panel-components-input-text-color: #000000;\n --pops-panel-components-input-text-bg-color: transparent;\n --pops-panel-components-input-text-default-padding: 8px;\n --pops-panel-components-input-bd-color: #dcdfe6;\n --pops-panel-components-input-bg-color: #ffffff;\n --pops-panel-components-input-hover-bd-color: #c0c4cc;\n --pops-panel-components-input-focus-bd-color: #409eff;\n --pops-panel-components-input-suffix-color: #a8abb2;\n --pops-panel-components-input-suffix-bg-color: #ffffff;\n}\n.pops-panel-input {\n display: flex;\n align-items: center;\n border: 1px solid var(--pops-panel-components-input-bd-color);\n border-radius: 4px;\n background-color: var(--pops-panel-components-input-bg-color);\n position: relative;\n box-shadow: none;\n}\n.pops-panel-input:hover {\n border: 1px solid var(--pops-panel-components-input-hover-bd-color);\n}\n.pops-panel-input:has(input:disabled):hover {\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input:has(input:focus) {\n outline: 0;\n border: 1px solid var(--pops-panel-components-input-focus-bd-color);\n border-radius: 4px;\n box-shadow: none;\n}\n.pops-panel-input input {\n display: inline-flex;\n justify-content: center;\n text-align: start;\n align-items: center;\n align-content: center;\n white-space: nowrap;\n cursor: text;\n box-sizing: border-box;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n vertical-align: middle;\n -webkit-appearance: none;\n appearance: none;\n color: var(--pops-panel-components-input-text-color);\n background-color: var(--pops-panel-components-input-text-bg-color);\n outline: 0;\n transition: 0.1s;\n border: 0;\n font-size: 14px;\n font-weight: 500;\n line-height: normal;\n height: 32px;\n width: 100%;\n flex: 1;\n /*margin-right: calc(1em + 8px);*/\n margin: 0px;\n padding: var(--pops-panel-components-input-text-default-padding);\n}\n.pops-panel-input span.pops-panel-input__suffix {\n display: inline-flex;\n white-space: nowrap;\n flex-shrink: 0;\n flex-wrap: nowrap;\n height: 100%;\n text-align: center;\n color: var(--pops-panel-components-input-suffix-color);\n background: var(--pops-panel-components-input-suffix-bg-color);\n transition: all 0.3s;\n pointer-events: none;\n padding: 0 8px;\n position: absolute;\n right: 0px;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n border: 1px solid transparent;\n}\n.pops-panel-input span.pops-panel-input__suffix-inner {\n pointer-events: all;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n/* 如果包含清空图标的按钮,则默认隐藏清空图标,当:hover、:focus、:focus-within、:active时显示清空图标 */\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n display: none;\n}\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n display: inline-flex;\n}\n.pops-panel-input .pops-panel-icon {\n cursor: pointer;\n}\n.pops-panel-input .pops-panel-icon {\n height: inherit;\n line-height: normal;\n align-content: center;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.3s;\n}\n.pops-panel-input .pops-panel-icon svg {\n height: 1em;\n width: 1em;\n}\n\n.pops-input-disabled {\n background-color: var(--pops-components-is-disabled-bg-color);\n}\n.pops-panel-input.pops-input-disabled:hover {\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input input:disabled,\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: var(--el-disabled-text-color);\n -webkit-text-fill-color: var(--el-disabled-text-color);\n cursor: not-allowed;\n}\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n display: none;\n}\n/* input的CSS */\n\n/* textarea的CSS */\n.pops-panel-textarea {\n --pops-panel-components-textarea-text-color: #000000;\n --pops-panel-components-textarea-text-bg-color: #ffffff;\n --pops-panel-components-textarea-bd-color: #dcdfe6;\n --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\n --pops-panel-components-textarea-focus-bd-color: #409eff;\n}\n.pops-panel-textarea textarea {\n width: 100%;\n /*vertical-align: bottom;*/\n position: relative;\n display: block;\n resize: none;\n padding: 5px 11px;\n /*line-height: 1;*/\n box-sizing: border-box;\n font-size: inherit;\n font-family: inherit;\n color: var(--pops-panel-components-textarea-text-color);\n background-color: var(--pops-panel-components-textarea-text-bg-color);\n background-image: none;\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n border-radius: 0;\n transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n border: 1px solid var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea textarea:hover {\n border-color: var(--pops-panel-components-textarea-hover-bd-color);\n}\n.pops-panel-textarea:has(textarea:disabled):hover {\n --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea-disable {\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-textarea-disable textarea {\n cursor: not-allowed;\n}\n.pops-panel-textarea textarea:focus {\n outline: 0;\n border-color: var(--pops-panel-components-textarea-focus-bd-color);\n}\n/* textarea的CSS */\n\n/* select的CSS */\n.pops-panel-select {\n --pops-panel-components-select-text-color: #000000;\n --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n}\n.pops-panel-select {\n border: 0;\n}\n.pops-panel-select select {\n height: 32px;\n line-height: normal;\n align-content: center;\n min-width: 200px;\n border: 1px solid var(--pops-panel-components-select-bd-color);\n border-radius: 5px;\n text-align: center;\n outline: 0;\n color: var(--pops-panel-components-select-text-color);\n background-color: var(--pops-panel-components-select-bg-color);\n box-shadow: none;\n}\n.pops-panel-select select:hover {\n border: 1px solid var(--pops-panel-components-select-hover-bd-color);\n}\n.pops-panel-select-disable {\n --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\n --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\n}\n.pops-panel-select-disable select {\n cursor: not-allowed;\n}\n.pops-panel-select-disable select:hover {\n box-shadow: none;\n --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\n}\n.pops-panel-select select:focus {\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n box-shadow: none;\n}\n/* select的CSS */\n\n/* select-multiple的CSS*/\n.pops-panel-select-multiple {\n --el-border-radius-base: 4px;\n --el-fill-color-blank: #ffffff;\n --el-transition-duration: 0.3s;\n --el-border-color: #cbcbcb;\n --el-text-color-placeholder: #a8abb2;\n --color: inherit;\n --el-select-input-color: #a8abb2;\n --el-select-input-font-size: 14px;\n --el-text-color-regular: #606266;\n --el-color-info: #909399;\n --el-color-info-light-9: #f4f4f5;\n --el-color-info-light-8: #e9e9eb;\n --el-color-primary-light-9: #ecf5ff;\n --el-color-primary-light-8: #d9ecff;\n --el-color-primary: #409eff;\n --el-color-white: #ffffff;\n width: 200px;\n}\n.pops-panel-select-multiple .el-select__wrapper {\n display: flex;\n align-items: center;\n position: relative;\n box-sizing: border-box;\n cursor: pointer;\n text-align: left;\n font-size: 14px;\n padding: 4px 12px;\n gap: 6px;\n min-height: 32px;\n line-height: normal;\n align-content: center;\n border-radius: var(--el-border-radius-base);\n background-color: var(--el-fill-color-blank);\n transition: var(--el-transition-duration);\n transform: translateZ(0);\n border: 1px solid var(--el-border-color);\n}\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\n --el-border-color: var(--el-color-primary);\n}\n.pops-panel-select-multiple .el-select__selection {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n flex: 1;\n min-width: 0;\n gap: 6px;\n}\n.pops-panel-select-multiple .el-select__selected-item {\n display: flex;\n flex-wrap: wrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\n max-width: 200px;\n}\n.pops-panel-select-multiple .el-select__input-wrapper {\n max-width: 100%;\n}\n.pops-panel-select-multiple .el-select__selection.is-near {\n margin-left: -8px;\n}\n.pops-panel-select-multiple .el-select__placeholder {\n position: absolute;\n display: block;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--el-input-text-color, var(--el-text-color-regular));\n}\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: var(--el-text-color-placeholder);\n}\n.pops-panel-select-multiple .el-select__prefix,\n.pops-panel-select-multiple .el-select__suffix {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n gap: 6px;\n color: var(--el-input-icon-color, var(--el-text-color-placeholder));\n}\n.pops-panel-select-multiple .el-icon {\n --color: inherit;\n height: 1em;\n width: 1em;\n line-height: normal;\n align-content: center;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n fill: currentColor;\n color: var(--color);\n font-size: inherit;\n}\n.pops-panel-select-multiple .el-icon svg {\n height: 1em;\n width: 1em;\n}\n.pops-panel-select-multiple .el-select__caret {\n color: var(--el-select-input-color);\n font-size: var(--el-select-input-font-size);\n transition: var(--el-transition-duration);\n transform: rotate(0);\n cursor: pointer;\n}\n.pops-panel-select-multiple .el-tag {\n --el-tag-font-size: 12px;\n --el-tag-border-radius: 4px;\n --el-tag-border-radius-rounded: 9999px;\n}\n.pops-panel-select-multiple .el-tag {\n background-color: var(--el-tag-bg-color);\n border-color: var(--el-tag-border-color);\n color: var(--el-tag-text-color);\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: middle;\n height: 24px;\n padding: 0 9px;\n font-size: var(--el-tag-font-size);\n line-height: normal;\n align-content: center;\n border-width: 1px;\n border-style: solid;\n border-radius: var(--el-tag-border-radius);\n box-sizing: border-box;\n white-space: nowrap;\n --el-icon-size: 14px;\n --el-tag-bg-color: var(--el-color-primary-light-9);\n --el-tag-border-color: var(--el-color-primary-light-8);\n --el-tag-hover-color: var(--el-color-primary);\n}\n.pops-panel-select-multiple .el-select__selection .el-tag {\n cursor: pointer;\n border-color: transparent;\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n --el-tag-bg-color: var(--el-color-info-light-9);\n --el-tag-border-color: var(--el-color-info-light-8);\n --el-tag-hover-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n --el-tag-text-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.is-closable {\n padding-right: 5px;\n}\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\n min-width: 0;\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n flex-shrink: 0;\n color: var(--el-tag-text-color);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\n color: var(--el-color-white);\n background-color: var(--el-tag-hover-color);\n}\n.pops-panel-select-multiple .el-tag .el-icon {\n border-radius: 50%;\n cursor: pointer;\n font-size: calc(var(--el-icon-size) - 2px);\n height: var(--el-icon-size);\n width: var(--el-icon-size);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n margin-left: 6px;\n}\n.pops-panel-select-multiple .el-select__tags-text {\n display: block;\n line-height: normal;\n align-content: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pops-panel-select-multiple-disable {\n --el-fill-color-blank: #f5f7fa;\n --color: #a8abb2;\n --el-border-color: #cbcbcb;\n}\n.pops-panel-select-multiple-disable .el-tag.el-tag--info {\n --el-tag-bg-color: #e7e7e7;\n --el-tag-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-select-multiple-disable .el-select__selection .el-tag,\n.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,\n.pops-panel-select-multiple-disable .el-select__wrapper,\n.pops-panel-select-multiple-disable .el-select__caret {\n cursor: not-allowed;\n}\n/* select-multiple的CSS*/\n\n/* deepMenu的css */\n.pops-panel-deepMenu-nav-item {\n cursor: pointer;\n}\n.pops-panel-deepMenu-nav-item:active {\n background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\n var(--pops-panel-forms-container-li-padding-left-right);\n margin: 0px;\n}\n/* 去除上个兄弟item的底部边框颜色 */\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\n border-bottom: 1px solid transparent;\n}\n/* 第一个和最后一个跟随圆角 */\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\n border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\n border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\n border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\n border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\n display: flex;\n align-items: center;\n color: #6c6c6c;\n fill: #6c6c6c;\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\n width: 15px;\n height: 15px;\n display: flex;\n align-items: center;\n}\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\n display: flex;\n align-items: center;\n width: -webkit-fill-available;\n width: -moz-available;\n padding: var(--pops-panel-forms-header-padding-top-bottom)\n calc(\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\n var(--pops-panel-forms-header-icon-size)\n );\n gap: 0px;\n}\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n width: var(--pops-panel-forms-header-icon-size);\n height: var(--pops-panel-forms-header-icon-size);\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n/* 修复safari上图标大小未正常显示 */\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\n width: inherit;\n height: inherit;\n}\n/* deepMenu的css */\n\n/* 文字对齐 */\n.pops-panel-item-left-desc-text:has(code) {\n display: flex;\n align-items: baseline;\n flex-wrap: wrap;\n}\n\n@media (prefers-color-scheme: dark) {\n .pops[type-value=\"panel\"] {\n --pops-bg-color: #000000;\n --pops-color: #f2f2f2;\n --panel-title-bg-color: #000000;\n --panel-aside-bg-color: #262626;\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n --pops-panel-forms-container-item-bg-color: #262626;\n --pops-panel-forms-container-item-title-color: #c1c1c1;\n\n --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\n }\n .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n fill: #f2f2f2;\n }\n\n /* switch的CSS */\n .pops-panel-switch {\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n --panel-switch-circle-color: #dcdfe6;\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --panel-switch-checked-circle-color: #409eff;\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n }\n /* select的CSS */\n .pops-panel-select {\n --pops-panel-components-select-text-color: #f2f2f2;\n --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n --pops-panel-components-select-bg-color: #141414;\n }\n /* select-multiple的CSS*/\n .pops-panel-select-multiple {\n --el-fill-color-blank: #141414;\n --el-border-color: #4c4d4f;\n --el-text-color-placeholder: #a8abb2;\n --el-select-input-color: #a8abb2;\n --el-text-color-regular: #606266;\n --el-color-info: #909399;\n --el-color-info-light-8: #e9e9eb;\n --el-color-primary-light-9: #ecf5ff;\n --el-color-primary-light-8: #d9ecff;\n --el-color-primary: #409eff;\n --el-color-white: #ffffff;\n }\n .pops-panel-select-multiple .el-tag {\n --el-color-info-light-9: #202121;\n }\n .pops-panel-select-multiple-disable {\n --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n }\n .pops-panel-select-multiple-disable .el-tag.el-tag--info {\n --el-tag-bg-color: #2f2f2f;\n }\n /* select-multiple的CSS*/\n /* slider的CSS */\n .pops-slider {\n --pops-slider-border-color-light: #414243;\n }\n /* input的CSS */\n .pops-panel-input {\n --pops-panel-components-input-text-color: #f2f2f2;\n --pops-panel-components-input-bd-color: #4f5052;\n --pops-panel-components-input-bg-color: #141414;\n --pops-panel-components-input-hover-bd-color: #6f7175;\n --pops-panel-components-input-focus-bd-color: #409eff;\n --pops-panel-components-input-suffix-color: #a8abb2;\n }\n /* textarea的CSS */\n .pops-panel-textarea {\n --pops-panel-components-textarea-text-color: #f2f2f2;\n --pops-panel-components-textarea-text-bg-color: #141414;\n --pops-panel-components-textarea-bd-color: #4f5052;\n --pops-panel-components-textarea-hover-bd-color: #6f7175;\n --pops-panel-components-textarea-focus-bd-color: #409eff;\n }\n .pops-panel-textarea-disable {\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\n }\n /* slider */\n .pops-slider {\n --pops-slider-text-color-placeholder: #8d9095;\n }\n}\n";
2838
+ var panelCSS = ".pops[type-value=\"panel\"] {\r\n --pops-bg-color: #f2f2f2;\r\n --pops-color: #333333;\r\n --panel-title-bg-color: #ffffff;\r\n\r\n --panel-aside-bg-color: #ffffff;\r\n --panel-aside-hover-color: rgb(64, 158, 255);\r\n --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n --pops-panel-forms-margin-top-bottom: 10px;\r\n --pops-panel-forms-margin-left-right: 20px;\r\n --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\r\n --pops-panel-forms-header-padding-top-bottom: 15px;\r\n --pops-panel-forms-header-padding-left-right: 10px;\r\n --pops-panel-forms-container-item-left-text-gap: 6px;\r\n --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n --pops-panel-forms-container-item-bg-color: #ffffff;\r\n --pops-panel-forms-container-item-title-color: #333;\r\n --pops-panel-forms-container-item-border-radius: 6px;\r\n --pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\r\n --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\r\n --pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n --pops-panel-forms-container-li-padding-left-right: 16px;\r\n\r\n --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n color: var(--pops-color);\r\n background: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n background: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\n/* 左侧的列表 */\r\naside.pops-panel-aside {\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n max-width: 200px;\r\n min-width: 100px;\r\n height: 100%;\r\n background: var(--panel-aside-bg-color);\r\n border-right: 1px solid var(--panel-aside-bg-color);\r\n font-size: 0.9em;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n}\r\naside.pops-panel-aside {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\naside.pops-panel-aside .pops-panel-aside-top-container {\r\n overflow: auto;\r\n}\r\naside.pops-panel-aside ul li {\r\n margin: 6px 8px;\r\n border-radius: 4px;\r\n padding: 6px 10px;\r\n cursor: default;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\r\n color: var(--panel-aside-hover-color);\r\n background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 左侧的列表 */\r\n\r\n.pops-panel-content {\r\n display: flex;\r\n flex-direction: row;\r\n flex: 1;\r\n overflow: auto;\r\n flex-basis: auto;\r\n box-sizing: border-box;\r\n min-width: 0;\r\n bottom: 0 !important;\r\n}\r\n\r\n.pops-panel-section-wrapper {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\nsection.pops-panel-container {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\r\n flex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li,\r\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\r\n display: flex;\r\n justify-content: flex-start !important;\r\n margin: 0px !important;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\r\n text-align: left;\r\n}\r\nsection.pops-panel-container ul.pops-panel-container-main-ul {\r\n overflow: auto;\r\n /*flex: 1;*/\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin: var(--pops-panel-forms-margin-top-bottom)\r\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\r\n gap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n margin: 10px;\r\n margin-left: calc(\r\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\r\n );\r\n font-size: 0.9em;\r\n text-align: left;\r\n color: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n /* 去除<li>左侧的圆点 */\r\n display: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px 0px;\r\n border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n text-align: left;\r\n}\r\n/*section.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul\r\n\tli.pops-panel-deepMenu-nav-item {\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n}*/\r\nsection.pops-panel-container\r\n .pops-panel-forms-container-item\r\n ul.pops-panel-forms-container-item-formlist\r\n li:last-child {\r\n border: 0px;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\n/*section.pops-panel-container .pops-panel-item-left-main-text {\r\n\t\r\n}*/\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n color: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\r\n display: flex;\r\n align-items: center;\r\n fill: #6c6c6c;\r\n justify-content: space-between;\r\n margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\r\n transform: rotate(90deg);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n transform: rotate(-90deg);\r\n transition: transform 0.3s;\r\n}\r\n/* 折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\r\n height: 0;\r\n}\r\n/* 非折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\r\n margin: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\r\n transition: height 0.3s;\r\n overflow: hidden;\r\n border-radius: unset;\r\n background: unset;\r\n margin: 0;\r\n height: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n /* 兼容移动端CSS */\r\n .pops[type-value=\"panel\"] {\r\n --pops-panel-forms-margin-left-right: 10px;\r\n }\r\n .pops[type-value=\"panel\"] {\r\n width: 92%;\r\n width: 92vw;\r\n width: 92dvw;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n max-width: 20%;\r\n min-width: auto;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\r\n text-align: left;\r\n --pops-panel-forms-margin-left-right: 0px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\r\n margin: 0px !important;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n margin: 10px 10px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\r\n max-width: 55%;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\r\n min-width: 88px !important;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\r\n font-size: 16px;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n font-size: 14px;\r\n }\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --panel-switch-circle-color: #dcdfe6;\r\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --panel-switch-checked-circle-color: #409eff;\r\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch {\r\n display: inline-flex;\r\n flex-direction: row-reverse;\r\n align-items: center;\r\n position: relative;\r\n font-size: 14px;\r\n line-height: normal;\r\n align-content: center;\r\n height: 32px;\r\n vertical-align: middle;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n opacity: 0;\r\n margin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n display: inline-flex;\r\n position: relative;\r\n align-items: center;\r\n min-width: 40px;\r\n height: 20px;\r\n border: 1px solid var(--panel-switch-core-bd-color);\r\n outline: 0;\r\n border-radius: 10px;\r\n box-sizing: border-box;\r\n background: var(--panel-switch-core-bg-color);\r\n cursor: pointer;\r\n transition:\r\n border-color 0.3s,\r\n background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n position: absolute;\r\n left: 1px;\r\n border-radius: 100%;\r\n transition: all 0.3s;\r\n width: 16px;\r\n height: 16px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: var(--panel-switch-circle-bg-color);\r\n color: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n border-color: var(--panel-switch-checked-core-bd-color);\r\n background-color: var(--panel-switch-checked-core-bg-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n left: calc(100% - 17px);\r\n color: var(--panel-switch-checked-circle-color);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\r\n overflow: hidden;\r\n height: 25px;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n height: 6px;\r\n background: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n outline: 0;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 100%;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow:\r\n 0 0 2px rgba(0, 0, 0, 0.3),\r\n 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow:\r\n 0 0 2px rgba(0, 0, 0, 0.3),\r\n 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\r\n height: 6px;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n --pops-slider-color-white: #ffffff;\r\n --pops-slider-color-primary: #409eff;\r\n --pops-slider-color-info: #909399;\r\n --pops-slider-text-color-placeholder: #a8abb2;\r\n --pops-slider-border-color-light: #e4e7ed;\r\n --pops-slider-border-radius-circle: 100%;\r\n --pops-slider-transition-duration-fast: 0.2s;\r\n\r\n --pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n --pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n --pops-slider-border-radius: 3px;\r\n --pops-slider-height: 6px;\r\n --pops-slider-button-size: 20px;\r\n --pops-slider-button-wrapper-size: 36px;\r\n --pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n width: 100%;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n flex: 0 0 52%;\r\n margin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n flex: 1;\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-runway-bg-color);\r\n border-radius: var(--pops-slider-border-radius);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n margin-right: 30px;\r\n width: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n cursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n background-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n border-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n transform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n flex-shrink: 0;\r\n width: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-main-bg-color);\r\n border-top-left-radius: var(--pops-slider-border-radius);\r\n border-bottom-left-radius: var(--pops-slider-border-radius);\r\n position: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n height: var(--pops-slider-button-wrapper-size);\r\n width: var(--pops-slider-button-wrapper-size);\r\n position: absolute;\r\n z-index: 1;\r\n top: var(--pops-slider-button-wrapper-offset);\r\n transform: translate(-50%);\r\n background-color: transparent;\r\n text-align: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n line-height: normal;\r\n outline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n display: inline-block;\r\n content: \"\";\r\n height: 100%;\r\n vertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n display: inline-block;\r\n width: var(--pops-slider-button-size);\r\n height: var(--pops-slider-button-size);\r\n vertical-align: middle;\r\n border: solid 2px var(--pops-slider-main-bg-color);\r\n background-color: var(--pops-slider-color-white);\r\n border-radius: 50%;\r\n box-sizing: border-box;\r\n transition: var(--pops-slider-transition-duration-fast);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n transform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n cursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n position: absolute;\r\n height: var(--pops-slider-height);\r\n width: var(--pops-slider-height);\r\n border-radius: var(--pops-slider-border-radius-circle);\r\n background-color: var(--pops-slider-stop-bg-color);\r\n transform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n top: 0;\r\n left: 12px;\r\n width: 18px;\r\n height: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n position: absolute;\r\n transform: translate(-50%);\r\n font-size: 14px;\r\n color: var(--pops-slider-color-info);\r\n margin-top: 15px;\r\n white-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n position: relative;\r\n display: inline-flex;\r\n width: auto;\r\n height: 100%;\r\n flex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n width: var(--pops-slider-height);\r\n height: 100%;\r\n margin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n width: var(--pops-slider-height);\r\n height: auto;\r\n border-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n top: auto;\r\n left: var(--pops-slider-button-wrapper-offset);\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n margin-top: 0;\r\n left: 15px;\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n height: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n height: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n --el-disabled-text-color: #a8abb2;\r\n --el-disabled-bg-color: #f5f7fa;\r\n --el-disabled-border-color: #e4e7ed;\r\n\r\n --pops-panel-components-input-text-color: #000000;\r\n --pops-panel-components-input-text-bg-color: transparent;\r\n --pops-panel-components-input-text-default-padding: 8px;\r\n --pops-panel-components-input-bd-color: #dcdfe6;\r\n --pops-panel-components-input-bg-color: #ffffff;\r\n --pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n --pops-panel-components-input-focus-bd-color: #409eff;\r\n --pops-panel-components-input-suffix-color: #a8abb2;\r\n --pops-panel-components-input-suffix-bg-color: #ffffff;\r\n}\r\n.pops-panel-input {\r\n display: flex;\r\n align-items: center;\r\n border: 1px solid var(--pops-panel-components-input-bd-color);\r\n border-radius: 4px;\r\n background-color: var(--pops-panel-components-input-bg-color);\r\n position: relative;\r\n box-shadow: none;\r\n}\r\n.pops-panel-input:hover {\r\n border: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n outline: 0;\r\n border: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n border-radius: 4px;\r\n box-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n display: inline-flex;\r\n justify-content: center;\r\n text-align: start;\r\n align-items: center;\r\n align-content: center;\r\n white-space: nowrap;\r\n cursor: text;\r\n box-sizing: border-box;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n vertical-align: middle;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n color: var(--pops-panel-components-input-text-color);\r\n background-color: var(--pops-panel-components-input-text-bg-color);\r\n outline: 0;\r\n transition: 0.1s;\r\n border: 0;\r\n font-size: 14px;\r\n font-weight: 500;\r\n line-height: normal;\r\n height: 32px;\r\n width: 100%;\r\n flex: 1;\r\n /*margin-right: calc(1em + 8px);*/\r\n margin: 0px;\r\n padding: var(--pops-panel-components-input-text-default-padding);\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n display: inline-flex;\r\n white-space: nowrap;\r\n flex-shrink: 0;\r\n flex-wrap: nowrap;\r\n height: 100%;\r\n text-align: center;\r\n color: var(--pops-panel-components-input-suffix-color);\r\n background: var(--pops-panel-components-input-suffix-bg-color);\r\n transition: all 0.3s;\r\n pointer-events: none;\r\n padding: 0 8px;\r\n position: absolute;\r\n right: 0px;\r\n border-top-right-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n border: 1px solid transparent;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n pointer-events: all;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n/* 如果包含清空图标的按钮,则默认隐藏清空图标,当:hover、:focus、:focus-within、:active时显示清空图标 */\r\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n display: none;\r\n}\r\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n display: inline-flex;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n cursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n height: inherit;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n background-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n color: var(--el-disabled-text-color);\r\n -webkit-text-fill-color: var(--el-disabled-text-color);\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n display: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n --pops-panel-components-textarea-text-color: #000000;\r\n --pops-panel-components-textarea-text-bg-color: #ffffff;\r\n --pops-panel-components-textarea-bd-color: #dcdfe6;\r\n --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n width: 100%;\r\n /*vertical-align: bottom;*/\r\n position: relative;\r\n display: block;\r\n resize: none;\r\n padding: 5px 11px;\r\n /*line-height: 1;*/\r\n box-sizing: border-box;\r\n font-size: inherit;\r\n font-family: inherit;\r\n color: var(--pops-panel-components-textarea-text-color);\r\n background-color: var(--pops-panel-components-textarea-text-bg-color);\r\n background-image: none;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n box-shadow: none;\r\n border-radius: 0;\r\n transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n border: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n border-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea-disable {\r\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\r\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-textarea-disable textarea {\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n outline: 0;\r\n border-color: var(--pops-panel-components-textarea-focus-bd-color);\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select {\r\n --pops-panel-components-select-text-color: #000000;\r\n --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-select {\r\n border: 0;\r\n}\r\n.pops-panel-select select {\r\n height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n min-width: 200px;\r\n border: 1px solid var(--pops-panel-components-select-bd-color);\r\n border-radius: 5px;\r\n text-align: center;\r\n outline: 0;\r\n color: var(--pops-panel-components-select-text-color);\r\n background-color: var(--pops-panel-components-select-bg-color);\r\n box-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n border: 1px solid var(--pops-panel-components-select-hover-bd-color);\r\n}\r\n.pops-panel-select-disable {\r\n --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\r\n --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-select-disable select {\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-select-disable select:hover {\r\n box-shadow: none;\r\n --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\r\n}\r\n.pops-panel-select select:focus {\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n box-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n --el-border-radius-base: 4px;\r\n --el-fill-color-blank: #ffffff;\r\n --el-transition-duration: 0.3s;\r\n --el-border-color: #cbcbcb;\r\n --el-text-color-placeholder: #a8abb2;\r\n --color: inherit;\r\n --el-select-input-color: #a8abb2;\r\n --el-select-input-font-size: 14px;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-9: #f4f4f5;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n text-align: left;\r\n font-size: 14px;\r\n padding: 4px 12px;\r\n gap: 6px;\r\n min-height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n border-radius: var(--el-border-radius-base);\r\n background-color: var(--el-fill-color-blank);\r\n transition: var(--el-transition-duration);\r\n transform: translateZ(0);\r\n border: 1px solid var(--el-border-color);\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n --el-border-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n position: relative;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n flex: 1;\r\n min-width: 0;\r\n gap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n display: flex;\r\n flex-wrap: wrap;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\r\n max-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n max-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n margin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n position: absolute;\r\n display: block;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n color: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n color: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n gap: 6px;\r\n color: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n --color: inherit;\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: var(--color);\r\n font-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n color: var(--el-select-input-color);\r\n font-size: var(--el-select-input-font-size);\r\n transition: var(--el-transition-duration);\r\n transform: rotate(0);\r\n cursor: pointer;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n --el-tag-font-size: 12px;\r\n --el-tag-border-radius: 4px;\r\n --el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n background-color: var(--el-tag-bg-color);\r\n border-color: var(--el-tag-border-color);\r\n color: var(--el-tag-text-color);\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n vertical-align: middle;\r\n height: 24px;\r\n padding: 0 9px;\r\n font-size: var(--el-tag-font-size);\r\n line-height: normal;\r\n align-content: center;\r\n border-width: 1px;\r\n border-style: solid;\r\n border-radius: var(--el-tag-border-radius);\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n --el-icon-size: 14px;\r\n --el-tag-bg-color: var(--el-color-primary-light-9);\r\n --el-tag-border-color: var(--el-color-primary-light-8);\r\n --el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n cursor: pointer;\r\n border-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-bg-color: var(--el-color-info-light-9);\r\n --el-tag-border-color: var(--el-color-info-light-8);\r\n --el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n padding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n min-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n flex-shrink: 0;\r\n color: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n color: var(--el-color-white);\r\n background-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: calc(var(--el-icon-size) - 2px);\r\n height: var(--el-icon-size);\r\n width: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n margin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n display: block;\r\n line-height: normal;\r\n align-content: center;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n.pops-panel-select-multiple-disable {\r\n --el-fill-color-blank: #f5f7fa;\r\n --color: #a8abb2;\r\n --el-border-color: #cbcbcb;\r\n}\r\n.pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n --el-tag-bg-color: #e7e7e7;\r\n --el-tag-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-select-multiple-disable .el-select__selection .el-tag,\r\n.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,\r\n.pops-panel-select-multiple-disable .el-select__wrapper,\r\n.pops-panel-select-multiple-disable .el-select__caret {\r\n cursor: not-allowed;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n cursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px;\r\n}\r\n/* 去除上个兄弟item的底部边框颜色 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\r\n border-bottom: 1px solid transparent;\r\n}\r\n/* 第一个和最后一个跟随圆角 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\r\n border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\r\n border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n display: flex;\r\n align-items: center;\r\n color: #6c6c6c;\r\n fill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\r\n display: flex;\r\n align-items: center;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(\r\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\r\n var(--pops-panel-forms-header-icon-size)\r\n );\r\n gap: 0px;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n width: var(--pops-panel-forms-header-icon-size);\r\n height: var(--pops-panel-forms-header-icon-size);\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\r\n width: inherit;\r\n height: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n display: flex;\r\n align-items: baseline;\r\n flex-wrap: wrap;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops[type-value=\"panel\"] {\r\n --pops-bg-color: #000000;\r\n --pops-color: #f2f2f2;\r\n --panel-title-bg-color: #000000;\r\n --panel-aside-bg-color: #262626;\r\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n --pops-panel-forms-container-item-bg-color: #262626;\r\n --pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n fill: #f2f2f2;\r\n }\r\n\r\n /* switch的CSS */\r\n .pops-panel-switch {\r\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --panel-switch-circle-color: #dcdfe6;\r\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --panel-switch-checked-circle-color: #409eff;\r\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n }\r\n /* select的CSS */\r\n .pops-panel-select {\r\n --pops-panel-components-select-text-color: #f2f2f2;\r\n --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n --pops-panel-components-select-bg-color: #141414;\r\n }\r\n /* select-multiple的CSS*/\r\n .pops-panel-select-multiple {\r\n --el-fill-color-blank: #141414;\r\n --el-border-color: #4c4d4f;\r\n --el-text-color-placeholder: #a8abb2;\r\n --el-select-input-color: #a8abb2;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n }\r\n .pops-panel-select-multiple .el-tag {\r\n --el-color-info-light-9: #202121;\r\n }\r\n .pops-panel-select-multiple-disable {\r\n --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n }\r\n .pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n --el-tag-bg-color: #2f2f2f;\r\n }\r\n /* select-multiple的CSS*/\r\n /* slider的CSS */\r\n .pops-slider {\r\n --pops-slider-border-color-light: #414243;\r\n }\r\n /* input的CSS */\r\n .pops-panel-input {\r\n --pops-panel-components-input-text-color: #f2f2f2;\r\n --pops-panel-components-input-bd-color: #4f5052;\r\n --pops-panel-components-input-bg-color: #141414;\r\n --pops-panel-components-input-hover-bd-color: #6f7175;\r\n --pops-panel-components-input-focus-bd-color: #409eff;\r\n --pops-panel-components-input-suffix-color: #a8abb2;\r\n }\r\n /* textarea的CSS */\r\n .pops-panel-textarea {\r\n --pops-panel-components-textarea-text-color: #f2f2f2;\r\n --pops-panel-components-textarea-text-bg-color: #141414;\r\n --pops-panel-components-textarea-bd-color: #4f5052;\r\n --pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n }\r\n .pops-panel-textarea-disable {\r\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\r\n }\r\n /* slider */\r\n .pops-slider {\r\n --pops-slider-text-color-placeholder: #8d9095;\r\n }\r\n}\r\n";
2832
2839
 
2833
- var rightClickMenuCSS = ".pops-rightClickMenu {\n --pops-right-context-color: #000000;\n --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\n --pops-right-context-backdrop-filter: blur(10px);\n --pops-right-context-z-index: 10000;\n --pops-right-context-bd-radius: 6px;\n --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\n --pops-right-context-menu-row-bd-radius: 6px;\n --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\n --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\n}\n.pops-rightClickMenu * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -webkit-tap-highlight-color: transparent;\n scrollbar-width: thin;\n}\n.pops-rightClickMenu {\n position: fixed;\n z-index: var(--pops-right-context-z-index);\n text-align: center;\n border-radius: var(--pops-right-context-bd-radius);\n font-size: 16px;\n font-weight: 500;\n color: var(--pops-right-context-color);\n background: var(--pops-right-context-bg-color);\n box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\n -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\n backdrop-filter: var(--pops-right-context-backdrop-filter);\n}\n/* scale动画 */\n.pops-rightClickMenu-anim-scale {\n transition:\n opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\n transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\n transform: scale(0.85);\n}\n.pops-rightClickMenu-anim-scale-open {\n transform: scale(1);\n}\n.pops-rightClickMenu-anim-scale-not-open {\n opacity: 0;\n}\n/* 展开动画 */\n.pops-rightClickMenu-anim-grid {\n display: grid;\n transition: 0.3s;\n grid-template-rows: 0fr;\n}\n.pops-rightClickMenu-anim-show {\n grid-template-rows: 1fr;\n}\n.pops-rightClickMenu-is-visited {\n background: var(--pops-right-context-menu-row-visited-color);\n}\ni.pops-rightClickMenu-icon {\n height: 1em;\n width: 1em;\n line-height: normal;\n align-content: center;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n fill: currentColor;\n color: inherit;\n font-size: inherit;\n margin-right: 6px;\n}\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\n animation: rotating 2s linear infinite;\n}\n.pops-rightClickMenu li:hover {\n background: var(--pops-right-context-menu-row-hover-color);\n cursor: pointer;\n}\n.pops-rightClickMenu ul {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n overflow: hidden;\n}\n.pops-rightClickMenu ul li {\n padding: 5px 10px;\n margin: 5px 5px;\n border-radius: var(--pops-right-context-menu-row-bd-radius);\n display: flex;\n width: -webkit-fill-available;\n width: -moz-available;\n text-align: left;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n@media (prefers-color-scheme: dark) {\n /*.pops-rightClickMenu {\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\n\t}*/\n}\n@media (hover: hover) {\n .pops-rightClickMenu ul li:active {\n transform: scale(0.98);\n }\n}\n";
2840
+ var rightClickMenuCSS = ".pops-rightClickMenu {\r\n --pops-right-context-color: #000000;\r\n --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\r\n --pops-right-context-backdrop-filter: blur(10px);\r\n --pops-right-context-z-index: 10000;\r\n --pops-right-context-bd-radius: 6px;\r\n --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\r\n --pops-right-context-menu-row-bd-radius: 6px;\r\n --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\r\n --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\r\n}\r\n.pops-rightClickMenu * {\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n scrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n position: fixed;\r\n z-index: var(--pops-right-context-z-index);\r\n text-align: center;\r\n border-radius: var(--pops-right-context-bd-radius);\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: var(--pops-right-context-color);\r\n background: var(--pops-right-context-bg-color);\r\n box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\r\n -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n}\r\n/* scale动画 */\r\n.pops-rightClickMenu-anim-scale {\r\n transition:\r\n opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\r\n transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\r\n transform: scale(0.85);\r\n}\r\n.pops-rightClickMenu-anim-scale-open {\r\n transform: scale(1);\r\n}\r\n.pops-rightClickMenu-anim-scale-not-open {\r\n opacity: 0;\r\n}\r\n/* 展开动画 */\r\n.pops-rightClickMenu-anim-grid {\r\n display: grid;\r\n transition: 0.3s;\r\n grid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n grid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n background: var(--pops-right-context-menu-row-visited-color);\r\n}\r\ni.pops-rightClickMenu-icon {\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: inherit;\r\n font-size: inherit;\r\n margin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n animation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n background: var(--pops-right-context-menu-row-hover-color);\r\n cursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n overflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n padding: 5px 10px;\r\n margin: 5px 5px;\r\n border-radius: var(--pops-right-context-menu-row-bd-radius);\r\n display: flex;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n text-align: left;\r\n align-items: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n /*.pops-rightClickMenu {\r\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\r\n\t}*/\r\n}\r\n@media (hover: hover) {\r\n .pops-rightClickMenu ul li:active {\r\n transform: scale(0.98);\r\n }\r\n}\r\n";
2834
2841
 
2835
2842
  const PopsCSS = {
2836
2843
  /** 主CSS */
@@ -4077,10 +4084,10 @@ const PopsAlert = {
4077
4084
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
4078
4085
  const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
4079
4086
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
4080
- /*html*/ `
4087
+ /*html*/ `
4081
4088
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
4082
4089
  ? config.title.text
4083
- : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4090
+ : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4084
4091
  <div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
4085
4092
  ? config.content.text
4086
4093
  : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
@@ -4281,10 +4288,10 @@ const PopsConfirm = {
4281
4288
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
4282
4289
  const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
4283
4290
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
4284
- /*html*/ `
4291
+ /*html*/ `
4285
4292
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
4286
4293
  ? config.title.text
4287
- : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4294
+ : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4288
4295
  <div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
4289
4296
  ? config.content.text
4290
4297
  : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
@@ -4485,12 +4492,12 @@ const PopsDrawer = {
4485
4492
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
4486
4493
  const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
4487
4494
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
4488
- /*html*/ `
4495
+ /*html*/ `
4489
4496
  ${config.title.enable
4490
4497
  ? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${config.title.html
4491
4498
  ? config.title.text
4492
4499
  : /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
4493
- : ""}
4500
+ : ""}
4494
4501
  <div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
4495
4502
  ? config.content.text
4496
4503
  : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
@@ -4665,19 +4672,19 @@ const PopsLoading = {
4665
4672
  const maskHTML = PopsElementHandler.createMask(guid, zIndex);
4666
4673
  const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
4667
4674
  const animHTML = PopsElementHandler.createAnim(guid, PopsType, config,
4668
- /*html*/ `
4675
+ /*html*/ `
4669
4676
  <div class="pops-content pops-${PopsType}-content">${config.addIndexCSS
4670
- ? /*html*/ `
4671
- <style data-model-name="index">${PopsCSS.index}</style>
4672
- <style data-model-name="anim">${PopsCSS.anim}</style>
4673
- <style data-model-name="common">${PopsCSS.common}</style>
4677
+ ? /*html*/ `
4678
+ <style data-model-name="index">${PopsCSS.index}</style>
4679
+ <style data-model-name="anim">${PopsCSS.anim}</style>
4680
+ <style data-model-name="common">${PopsCSS.common}</style>
4674
4681
  `
4675
- : ""}
4676
- <style data-model-name="loadingCSS">
4677
- ${PopsCSS.loadingCSS}
4678
- </style>
4679
- ${config.style != null ? `<style>${config.style}</style>` : ""}
4680
- <p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
4682
+ : ""}
4683
+ <style data-model-name="loadingCSS">
4684
+ ${PopsCSS.loadingCSS}
4685
+ </style>
4686
+ ${config.style != null ? `<style>${config.style}</style>` : ""}
4687
+ <p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
4681
4688
  </div>`, "", zIndex);
4682
4689
  /**
4683
4690
  * 弹窗的主元素,包括动画层
@@ -4994,103 +5001,103 @@ const PopsFolder = {
4994
5001
  const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
4995
5002
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
4996
5003
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
4997
- /*html*/ `
5004
+ /*html*/ `
4998
5005
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
4999
5006
  ? config.title.text
5000
- : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
5001
- <div class="pops-content pops-${popsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
5002
- <div class="pops-folder-list">
5003
- <div class="pops-folder-file-list-breadcrumb">
5004
- <div class="pops-folder-file-list-breadcrumb-primary">
5005
- <span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
5006
- <a>全部文件</a>
5007
- </span>
5008
- </div>
5009
- </div>
5010
- <div class="pops-folder-list-table__header-div">
5011
- <table class="pops-folder-list-table__header">
5012
- <colgroup>
5013
- <col width="52%">
5014
- <col width="24%">
5015
- <col width="16%">
5016
- </colgroup>
5017
- <thead>
5018
- <tr class="pops-folder-list-table__header-row">
5019
- <th class="pops-folder-list-table__header-th cursor-p">
5020
- <div class="text-ellip content flex-a-i-center">
5021
- <span>文件名</span>
5022
- <div class="pops-folder-list-table__sort" data-sort="fileName">
5023
- <div class="pops-folder-icon-arrow" data-sort="按文件名排序">
5024
- <svg
5025
- viewBox="0 0 1024 1024"
5026
- xmlns="http://www.w3.org/2000/svg">
5027
- <path
5028
- d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5029
- class="pops-folder-icon-arrow-up"></path>
5030
- <path
5031
- d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5032
- class="pops-folder-icon-arrow-down"></path>
5033
- </svg>
5034
- </div>
5035
- </div>
5036
- </div>
5037
- </th>
5038
- <th class="pops-folder-list-table__header-th cursor-p">
5039
- <div class="text-ellip content flex-a-i-center">
5040
- <span>修改时间</span>
5041
- <div class="pops-folder-list-table__sort" data-sort="latestTime">
5042
- <div class="pops-folder-icon-arrow" title="按修改时间排序">
5043
- <svg
5044
- viewBox="0 0 1024 1024"
5045
- xmlns="http://www.w3.org/2000/svg">
5046
- <path
5047
- d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5048
- class="pops-folder-icon-arrow-up"></path>
5049
- <path
5050
- d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5051
- class="pops-folder-icon-arrow-down"></path>
5052
- </svg>
5053
- </div>
5054
- </div>
5055
- </div>
5056
- </th>
5057
- <th class="pops-folder-list-table__header-th cursor-p">
5058
- <div class="text-ellip content flex-a-i-center">
5059
- <span>大小</span>
5060
- <div class="pops-folder-list-table__sort" data-sort="fileSize">
5061
- <div class="pops-folder-icon-arrow" title="按大小排序">
5062
- <svg
5063
- viewBox="0 0 1024 1024"
5064
- xmlns="http://www.w3.org/2000/svg">
5065
- <path
5066
- d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5067
- class="pops-folder-icon-arrow-up"></path>
5068
- <path
5069
- d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5070
- class="pops-folder-icon-arrow-down"></path>
5071
- </svg>
5072
- </div>
5073
- </div>
5074
- </div>
5075
- </th>
5076
- </tr>
5077
- </thead>
5078
- </table>
5079
- </div>
5080
- <div class="pops-folder-list-table__body-div">
5081
- <table class="pops-folder-list-table__body">
5082
- <colgroup>
5007
+ : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
5008
+ <div class="pops-content pops-${popsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
5009
+ <div class="pops-folder-list">
5010
+ <div class="pops-folder-file-list-breadcrumb">
5011
+ <div class="pops-folder-file-list-breadcrumb-primary">
5012
+ <span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
5013
+ <a>全部文件</a>
5014
+ </span>
5015
+ </div>
5016
+ </div>
5017
+ <div class="pops-folder-list-table__header-div">
5018
+ <table class="pops-folder-list-table__header">
5019
+ <colgroup>
5020
+ <col width="52%">
5021
+ <col width="24%">
5022
+ <col width="16%">
5023
+ </colgroup>
5024
+ <thead>
5025
+ <tr class="pops-folder-list-table__header-row">
5026
+ <th class="pops-folder-list-table__header-th cursor-p">
5027
+ <div class="text-ellip content flex-a-i-center">
5028
+ <span>文件名</span>
5029
+ <div class="pops-folder-list-table__sort" data-sort="fileName">
5030
+ <div class="pops-folder-icon-arrow" data-sort="按文件名排序">
5031
+ <svg
5032
+ viewBox="0 0 1024 1024"
5033
+ xmlns="http://www.w3.org/2000/svg">
5034
+ <path
5035
+ d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5036
+ class="pops-folder-icon-arrow-up"></path>
5037
+ <path
5038
+ d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5039
+ class="pops-folder-icon-arrow-down"></path>
5040
+ </svg>
5041
+ </div>
5042
+ </div>
5043
+ </div>
5044
+ </th>
5045
+ <th class="pops-folder-list-table__header-th cursor-p">
5046
+ <div class="text-ellip content flex-a-i-center">
5047
+ <span>修改时间</span>
5048
+ <div class="pops-folder-list-table__sort" data-sort="latestTime">
5049
+ <div class="pops-folder-icon-arrow" title="按修改时间排序">
5050
+ <svg
5051
+ viewBox="0 0 1024 1024"
5052
+ xmlns="http://www.w3.org/2000/svg">
5053
+ <path
5054
+ d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5055
+ class="pops-folder-icon-arrow-up"></path>
5056
+ <path
5057
+ d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5058
+ class="pops-folder-icon-arrow-down"></path>
5059
+ </svg>
5060
+ </div>
5061
+ </div>
5062
+ </div>
5063
+ </th>
5064
+ <th class="pops-folder-list-table__header-th cursor-p">
5065
+ <div class="text-ellip content flex-a-i-center">
5066
+ <span>大小</span>
5067
+ <div class="pops-folder-list-table__sort" data-sort="fileSize">
5068
+ <div class="pops-folder-icon-arrow" title="按大小排序">
5069
+ <svg
5070
+ viewBox="0 0 1024 1024"
5071
+ xmlns="http://www.w3.org/2000/svg">
5072
+ <path
5073
+ d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5074
+ class="pops-folder-icon-arrow-up"></path>
5075
+ <path
5076
+ d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5077
+ class="pops-folder-icon-arrow-down"></path>
5078
+ </svg>
5079
+ </div>
5080
+ </div>
5081
+ </div>
5082
+ </th>
5083
+ </tr>
5084
+ </thead>
5085
+ </table>
5086
+ </div>
5087
+ <div class="pops-folder-list-table__body-div">
5088
+ <table class="pops-folder-list-table__body">
5089
+ <colgroup>
5083
5090
  ${popsUtils.isPhone()
5084
5091
  ? `<col width="100%">`
5085
- : `
5086
- <col width="52%">
5087
- <col width="24%">
5088
- <col width="16%">`}
5089
- </colgroup>
5090
- <tbody></tbody>
5091
- </table>
5092
- </div>
5093
- </div>
5092
+ : `
5093
+ <col width="52%">
5094
+ <col width="24%">
5095
+ <col width="16%">`}
5096
+ </colgroup>
5097
+ <tbody></tbody>
5098
+ </table>
5099
+ </div>
5100
+ </div>
5094
5101
  </div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
5095
5102
  /**
5096
5103
  * 弹窗的主元素,包括动画层
@@ -5229,27 +5236,27 @@ const PopsFolder = {
5229
5236
  fileTimeElement.className = "pops-folder-list-table__body-td";
5230
5237
  fileFormatSize.className = "pops-folder-list-table__body-td";
5231
5238
  PopsSafeUtils.setSafeHTML(fileNameElement,
5232
- /*html*/ `
5233
- <div class="pops-folder-list-file-name cursor-p">
5234
- <div>
5235
- <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
5236
- <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
5237
- ${fileName}
5238
- </a>
5239
- </div>
5240
- </div>
5239
+ /*html*/ `
5240
+ <div class="pops-folder-list-file-name cursor-p">
5241
+ <div>
5242
+ <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
5243
+ <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
5244
+ ${fileName}
5245
+ </a>
5246
+ </div>
5247
+ </div>
5241
5248
  `);
5242
5249
  PopsSafeUtils.setSafeHTML(fileTimeElement,
5243
- /*html*/ `
5244
- <div class="pops-folder-list__time">
5245
- <span>${latestTime}</span>
5246
- </div>
5250
+ /*html*/ `
5251
+ <div class="pops-folder-list__time">
5252
+ <span>${latestTime}</span>
5253
+ </div>
5247
5254
  `);
5248
5255
  PopsSafeUtils.setSafeHTML(fileFormatSize,
5249
- /*html*/ `
5250
- <div class="pops-folder-list-format-size">
5251
- <span>${fileSize}</span>
5252
- </div>
5256
+ /*html*/ `
5257
+ <div class="pops-folder-list-format-size">
5258
+ <span>${fileSize}</span>
5259
+ </div>
5253
5260
  `);
5254
5261
  /* 存储原来的值 */
5255
5262
  const __value__ = {
@@ -5316,14 +5323,14 @@ const PopsFolder = {
5316
5323
  folderElement.className = "pops-folder-list-table__body-row";
5317
5324
  fileNameElement.className = "pops-folder-list-table__body-td";
5318
5325
  PopsSafeUtils.setSafeHTML(fileNameElement,
5319
- /*html*/ `
5320
- <div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
5321
- <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
5322
- <div>
5323
- <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
5324
- <span>${latestTime} ${fileSize}</span>
5325
- </div>
5326
- </div>
5326
+ /*html*/ `
5327
+ <div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
5328
+ <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
5329
+ <div>
5330
+ <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
5331
+ <span>${latestTime} ${fileSize}</span>
5332
+ </div>
5333
+ </div>
5327
5334
  `);
5328
5335
  /* 存储原来的值 */
5329
5336
  const __value__ = {
@@ -5813,14 +5820,14 @@ const PopsIframe = {
5813
5820
  const titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
5814
5821
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
5815
5822
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
5816
- /*html*/ `
5823
+ /*html*/ `
5817
5824
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
5818
5825
  ? titleText
5819
- : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
5820
- <div class="pops-content pops-${popsType}-content">
5821
- <div class="pops-${popsType}-content-global-loading"></div>
5822
- <iframe src="${config.url}" pops ${config.sandbox ? "sandbox='allow-forms allow-same-origin allow-scripts'" : ""}>
5823
- </iframe>
5826
+ : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
5827
+ <div class="pops-content pops-${popsType}-content">
5828
+ <div class="pops-${popsType}-content-global-loading"></div>
5829
+ <iframe src="${config.url}" pops ${config.sandbox ? "sandbox='allow-forms allow-same-origin allow-scripts'" : ""}>
5830
+ </iframe>
5824
5831
  </div>${config.loading.enable ? iframeLoadingHTML : ""}`, "", zIndex);
5825
5832
  /**
5826
5833
  * 弹窗的主元素,包括动画层
@@ -6452,8 +6459,8 @@ const PopsPanelConfig = () => {
6452
6459
  },
6453
6460
  {
6454
6461
  id: "whitesev-panel-bottom-config-1",
6455
- title: /*html*/ `
6456
- <a rel="nofollow" href="https://www.npmjs.com/package/@whitesev/pops" target="_blank"><img src="https://img.shields.io/npm/v/@whitesev/pops?label=pops" alt="npm pops version"></a>
6462
+ title: /*html*/ `
6463
+ <a rel="nofollow" href="https://www.npmjs.com/package/@whitesev/pops" target="_blank"><img src="https://img.shields.io/npm/v/@whitesev/pops?label=pops" alt="npm pops version"></a>
6457
6464
  `,
6458
6465
  isBottom: true,
6459
6466
  disableAsideItemHoverCSS: true,
@@ -6682,9 +6689,9 @@ class ToolTip {
6682
6689
  createToolTip() {
6683
6690
  const $toolTipContainer = popsDOMUtils.createElement("div", {
6684
6691
  className: "pops-tip",
6685
- innerHTML: /*html*/ `
6686
- <div class="pops-tip-content" style="text-align: center;"></div>
6687
- <div class="pops-tip-arrow"></div>
6692
+ innerHTML: /*html*/ `
6693
+ <div class="pops-tip-content" style="text-align: center;"></div>
6694
+ <div class="pops-tip-arrow"></div>
6688
6695
  `,
6689
6696
  }, {
6690
6697
  "data-position": this.$data.config.isFixed ? "fixed" : "absolute",
@@ -7400,15 +7407,15 @@ const PanelHandlerComponents = () => {
7400
7407
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7401
7408
  }
7402
7409
  PopsSafeUtils.setSafeHTML($li,
7403
- /*html*/ `
7404
- <div class="pops-panel-item-left-text">
7405
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7406
- <div class="pops-panel-switch">
7407
- <input class="pops-panel-switch__input" type="checkbox">
7408
- <span class="pops-panel-switch__core">
7409
- <div class="pops-panel-switch__action">
7410
- </div>
7411
- </span>
7410
+ /*html*/ `
7411
+ <div class="pops-panel-item-left-text">
7412
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7413
+ <div class="pops-panel-switch">
7414
+ <input class="pops-panel-switch__input" type="checkbox">
7415
+ <span class="pops-panel-switch__core">
7416
+ <div class="pops-panel-switch__action">
7417
+ </div>
7418
+ </span>
7412
7419
  </div>`);
7413
7420
  const PopsPanelSwitch = {
7414
7421
  [Symbol.toStringTag]: "PopsPanelSwitch",
@@ -7506,12 +7513,12 @@ const PanelHandlerComponents = () => {
7506
7513
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7507
7514
  }
7508
7515
  PopsSafeUtils.setSafeHTML($li,
7509
- /*html*/ `
7510
- <div class="pops-panel-item-left-text">
7511
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7512
- <div class="pops-panel-slider">
7513
- <input type="range" min="${formConfig.min}" max="${formConfig.max}">
7514
- </div>
7516
+ /*html*/ `
7517
+ <div class="pops-panel-item-left-text">
7518
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7519
+ <div class="pops-panel-slider">
7520
+ <input type="range" min="${formConfig.min}" max="${formConfig.max}">
7521
+ </div>
7515
7522
  `);
7516
7523
  const $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
7517
7524
  if (formConfig.step) {
@@ -7569,16 +7576,16 @@ const PanelHandlerComponents = () => {
7569
7576
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7570
7577
  }
7571
7578
  PopsSafeUtils.setSafeHTML($li,
7572
- /*html*/ `
7573
- <div class="pops-panel-item-left-text" style="flex: 1;">
7574
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7575
- <div class="pops-slider pops-slider-width">
7576
- <div class="pops-slider__runway">
7577
- <div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
7578
- <div class="pops-slider__button-wrapper" style="left: 0%">
7579
- <div class="pops-slider__button"></div>
7580
- </div>
7581
- </div>
7579
+ /*html*/ `
7580
+ <div class="pops-panel-item-left-text" style="flex: 1;">
7581
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7582
+ <div class="pops-slider pops-slider-width">
7583
+ <div class="pops-slider__runway">
7584
+ <div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
7585
+ <div class="pops-slider__button-wrapper" style="left: 0%">
7586
+ <div class="pops-slider__button"></div>
7587
+ </div>
7588
+ </div>
7582
7589
  </div>`);
7583
7590
  const PopsPanelSlider = {
7584
7591
  [Symbol.toStringTag]: "PopsPanelSlider",
@@ -8161,12 +8168,12 @@ const PanelHandlerComponents = () => {
8161
8168
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8162
8169
  }
8163
8170
  PopsSafeUtils.setSafeHTML($li,
8164
- /*html*/ `
8165
- <div class="pops-panel-item-left-text">
8166
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8167
- <div class="pops-panel-input">
8168
- <input type="${inputType}" placeholder="${formConfig.placeholder ?? ""}">
8169
- </div>
8171
+ /*html*/ `
8172
+ <div class="pops-panel-item-left-text">
8173
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8174
+ <div class="pops-panel-input">
8175
+ <input type="${inputType}" placeholder="${formConfig.placeholder ?? ""}">
8176
+ </div>
8170
8177
  `);
8171
8178
  const PopsPanelInput = {
8172
8179
  [Symbol.toStringTag]: "PopsPanelInput",
@@ -8214,10 +8221,10 @@ const PanelHandlerComponents = () => {
8214
8221
  this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
8215
8222
  this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
8216
8223
  PopsSafeUtils.setSafeHTML(this.$ele.inputSpanIcon,
8217
- /*html*/ `
8218
- <span class="pops-panel-input__suffix-inner">
8219
- <i class="pops-panel-icon"></i>
8220
- </span>
8224
+ /*html*/ `
8225
+ <span class="pops-panel-input__suffix-inner">
8226
+ <i class="pops-panel-icon"></i>
8227
+ </span>
8221
8228
  `);
8222
8229
  this.$ele.inputSpanIconInner = this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
8223
8230
  this.$ele.icon = this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
@@ -8359,12 +8366,12 @@ const PanelHandlerComponents = () => {
8359
8366
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8360
8367
  }
8361
8368
  PopsSafeUtils.setSafeHTML($li,
8362
- /*html*/ `
8363
- <div class="pops-panel-item-left-text">
8364
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8365
- <div class="pops-panel-textarea">
8366
- <textarea placeholder="${formConfig.placeholder ?? ""}"></textarea>
8367
- </div>
8369
+ /*html*/ `
8370
+ <div class="pops-panel-item-left-text">
8371
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8372
+ <div class="pops-panel-textarea">
8373
+ <textarea placeholder="${formConfig.placeholder ?? ""}"></textarea>
8374
+ </div>
8368
8375
  `);
8369
8376
  const PopsPanelTextArea = {
8370
8377
  [Symbol.toStringTag]: "PopsPanelTextArea",
@@ -8436,12 +8443,12 @@ const PanelHandlerComponents = () => {
8436
8443
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8437
8444
  }
8438
8445
  PopsSafeUtils.setSafeHTML($li,
8439
- /*html*/ `
8440
- <div class="pops-panel-item-left-text">
8441
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8442
- <div class="pops-panel-select">
8443
- <select></select>
8444
- </div>
8446
+ /*html*/ `
8447
+ <div class="pops-panel-item-left-text">
8448
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8449
+ <div class="pops-panel-select">
8450
+ <select></select>
8451
+ </div>
8445
8452
  `);
8446
8453
  const PopsPanelSelect = {
8447
8454
  [Symbol.toStringTag]: "PopsPanelSelect",
@@ -8633,30 +8640,30 @@ const PanelHandlerComponents = () => {
8633
8640
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8634
8641
  }
8635
8642
  PopsSafeUtils.setSafeHTML($li,
8636
- /*html*/ `
8637
- <div class="pops-panel-item-left-text">
8638
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8639
- <div class="pops-panel-select-multiple">
8640
- <div class="el-select__wrapper">
8641
- <div class="el-select__selection">
8642
- <!-- 这个是用于手动输入的,这里暂不适配 -->
8643
- <div class="el-select__selected-item el-select__input-wrapper">
8644
-
8645
- </div>
8646
- <!-- 这个是placeholder -->
8647
- <div class="el-select__selected-item el-select__placeholder">
8648
- </div>
8649
- </div>
8650
- <!-- 下拉箭头 -->
8651
- <div class="el-select__suffix">
8652
- <i class="el-icon el-select__caret el-select__icon">
8653
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
8654
- <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
8655
- </svg>
8656
- </i>
8657
- </div>
8658
- </div>
8659
- </div>
8643
+ /*html*/ `
8644
+ <div class="pops-panel-item-left-text">
8645
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8646
+ <div class="pops-panel-select-multiple">
8647
+ <div class="el-select__wrapper">
8648
+ <div class="el-select__selection">
8649
+ <!-- 这个是用于手动输入的,这里暂不适配 -->
8650
+ <div class="el-select__selected-item el-select__input-wrapper">
8651
+
8652
+ </div>
8653
+ <!-- 这个是placeholder -->
8654
+ <div class="el-select__selected-item el-select__placeholder">
8655
+ </div>
8656
+ </div>
8657
+ <!-- 下拉箭头 -->
8658
+ <div class="el-select__suffix">
8659
+ <i class="el-icon el-select__caret el-select__icon">
8660
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
8661
+ <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
8662
+ </svg>
8663
+ </i>
8664
+ </div>
8665
+ </div>
8666
+ </div>
8660
8667
  `);
8661
8668
  const PopsPanelSelectMultiple = {
8662
8669
  [Symbol.toStringTag]: "PopsPanelSelectMultiple",
@@ -8766,18 +8773,18 @@ const PanelHandlerComponents = () => {
8766
8773
  createSelectedTagItem(data) {
8767
8774
  const $selectedItem = popsDOMUtils.createElement("div", {
8768
8775
  className: "el-select__selected-item el-select__choose_tag",
8769
- innerHTML: /*html*/ `
8770
- <span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
8771
- <span class="el-tag__content">
8772
- <span class="el-select__tags-text"></span>
8773
- </span>
8774
- <!-- 关闭tag的图标 -->
8775
- <i class="el-icon el-tag__close">
8776
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
8777
- <path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
8778
- </svg>
8779
- </i>
8780
- </span>
8776
+ innerHTML: /*html*/ `
8777
+ <span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
8778
+ <span class="el-tag__content">
8779
+ <span class="el-select__tags-text"></span>
8780
+ </span>
8781
+ <!-- 关闭tag的图标 -->
8782
+ <i class="el-icon el-tag__close">
8783
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
8784
+ <path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
8785
+ </svg>
8786
+ </i>
8787
+ </span>
8781
8788
  `,
8782
8789
  });
8783
8790
  /** 标签 */
@@ -8986,8 +8993,8 @@ const PanelHandlerComponents = () => {
8986
8993
  createSelectItemElement(data) {
8987
8994
  const $select = popsDOMUtils.createElement("li", {
8988
8995
  className: "select-item",
8989
- innerHTML: /*html*/ `
8990
- <span class="select-item-text"></span>
8996
+ innerHTML: /*html*/ `
8997
+ <span class="select-item-text"></span>
8991
8998
  `,
8992
8999
  });
8993
9000
  this.setSelectItemText(data, $select);
@@ -9079,8 +9086,8 @@ const PanelHandlerComponents = () => {
9079
9086
  position: "center",
9080
9087
  },
9081
9088
  content: {
9082
- text: /*html*/ `
9083
- <ul class="select-container"></ul>
9089
+ text: /*html*/ `
9090
+ <ul class="select-container"></ul>
9084
9091
  `,
9085
9092
  html: true,
9086
9093
  },
@@ -9114,69 +9121,69 @@ const PanelHandlerComponents = () => {
9114
9121
  dragLimit: true,
9115
9122
  width: "300px",
9116
9123
  height: "300px",
9117
- style: /*css*/ `
9118
- .select-container{
9119
- --el-font-size-base: 14px;
9120
- --el-text-color-regular: #606266;
9121
- --el-color-primary: #409eff;
9122
- --el-fill-color-light: #f5f7fa;
9123
- --el-disable-color: #a8abb2;
9124
- }
9125
- .select-item{
9126
- cursor: pointer;
9127
- font-size: var(--el-font-size-base);
9128
- padding: 0 32px 0 20px;
9129
- position: relative;
9130
- white-space: nowrap;
9131
- overflow: hidden;
9132
- text-overflow: ellipsis;
9133
- color: var(--el-text-color-regular);
9134
- height: 34px;
9135
- line-height: 34px;
9136
- box-sizing: border-box;
9137
- }
9138
- .select-item[aria-disabled],
9139
- .select-item[disabled]{
9140
- cursor: not-allowed;
9141
- color: var(--el-disable-color);
9142
- background: unset;
9143
- }
9144
- .select-item:hover{
9145
- background-color: var(--el-fill-color-light);
9146
- }
9147
- .select-item.select-item-is-selected{
9148
- color: var(--el-color-primary);
9149
- font-weight: 700;
9150
- }
9151
- .select-item.select-item-is-selected::after{
9152
- content: "";
9153
- position: absolute;
9154
- top: 50%;
9155
- right: 20px;
9156
- border-top: none;
9157
- border-right: none;
9158
- background-repeat: no-repeat;
9159
- background-position: center;
9160
- background-color: var(--el-color-primary);
9161
- mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
9162
- mask-size: 100% 100%;
9163
- -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
9164
- -webkit-mask-size: 100% 100%;
9165
- transform: translateY(-50%);
9166
- width: 12px;
9167
- height: 12px;
9168
- }
9169
-
9170
-
9171
- @media (prefers-color-scheme: dark) {
9172
- .select-container{
9173
- --el-text-color-regular: #f2f2f2;
9174
- --el-disable-color: #8D9095;
9175
- --el-fill-color-light: #262727;
9176
- }
9177
- }
9178
-
9179
- ${style || ""}
9124
+ style: /*css*/ `
9125
+ .select-container{
9126
+ --el-font-size-base: 14px;
9127
+ --el-text-color-regular: #606266;
9128
+ --el-color-primary: #409eff;
9129
+ --el-fill-color-light: #f5f7fa;
9130
+ --el-disable-color: #a8abb2;
9131
+ }
9132
+ .select-item{
9133
+ cursor: pointer;
9134
+ font-size: var(--el-font-size-base);
9135
+ padding: 0 32px 0 20px;
9136
+ position: relative;
9137
+ white-space: nowrap;
9138
+ overflow: hidden;
9139
+ text-overflow: ellipsis;
9140
+ color: var(--el-text-color-regular);
9141
+ height: 34px;
9142
+ line-height: 34px;
9143
+ box-sizing: border-box;
9144
+ }
9145
+ .select-item[aria-disabled],
9146
+ .select-item[disabled]{
9147
+ cursor: not-allowed;
9148
+ color: var(--el-disable-color);
9149
+ background: unset;
9150
+ }
9151
+ .select-item:hover{
9152
+ background-color: var(--el-fill-color-light);
9153
+ }
9154
+ .select-item.select-item-is-selected{
9155
+ color: var(--el-color-primary);
9156
+ font-weight: 700;
9157
+ }
9158
+ .select-item.select-item-is-selected::after{
9159
+ content: "";
9160
+ position: absolute;
9161
+ top: 50%;
9162
+ right: 20px;
9163
+ border-top: none;
9164
+ border-right: none;
9165
+ background-repeat: no-repeat;
9166
+ background-position: center;
9167
+ background-color: var(--el-color-primary);
9168
+ mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
9169
+ mask-size: 100% 100%;
9170
+ -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
9171
+ -webkit-mask-size: 100% 100%;
9172
+ transform: translateY(-50%);
9173
+ width: 12px;
9174
+ height: 12px;
9175
+ }
9176
+
9177
+
9178
+ @media (prefers-color-scheme: dark) {
9179
+ .select-container{
9180
+ --el-text-color-regular: #f2f2f2;
9181
+ --el-disable-color: #8D9095;
9182
+ --el-fill-color-light: #262727;
9183
+ }
9184
+ }
9185
+
9186
+ ${style || ""}
9180
9187
  `,
9181
9188
  }, userConfirmDetails);
9182
9189
  const $dialog = PopsAlert.init(confirmDetails);
@@ -9325,15 +9332,15 @@ const PanelHandlerComponents = () => {
9325
9332
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
9326
9333
  }
9327
9334
  PopsSafeUtils.setSafeHTML($li,
9328
- /*html*/ `
9329
- <div class="pops-panel-item-left-text">
9330
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
9331
- <div class="pops-panel-button">
9332
- <button class="pops-panel-button_inner" type="button">
9333
- <i class="pops-bottom-icon"></i>
9334
- <span class="pops-panel-button-text"></span>
9335
- </button>
9336
- </div>
9335
+ /*html*/ `
9336
+ <div class="pops-panel-item-left-text">
9337
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
9338
+ <div class="pops-panel-button">
9339
+ <button class="pops-panel-button_inner" type="button">
9340
+ <i class="pops-bottom-icon"></i>
9341
+ <span class="pops-panel-button-text"></span>
9342
+ </button>
9343
+ </div>
9337
9344
  `);
9338
9345
  const PopsPanelButton = {
9339
9346
  [Symbol.toStringTag]: "PopsPanelButton",
@@ -9488,10 +9495,10 @@ const PanelHandlerComponents = () => {
9488
9495
  rightText = /*html*/ `<p class="pops-panel-item-right-text">${formConfig.rightText}</p>`;
9489
9496
  }
9490
9497
  PopsSafeUtils.setSafeHTML($li,
9491
- /*html*/ `
9492
- <div class="pops-panel-item-left-text">
9493
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
9494
- <div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
9498
+ /*html*/ `
9499
+ <div class="pops-panel-item-left-text">
9500
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
9501
+ <div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
9495
9502
  `);
9496
9503
  const PopsPanelDeepMenu = {
9497
9504
  [Symbol.toStringTag]: "PopsPanelDeepMenu",
@@ -9527,13 +9534,13 @@ const PanelHandlerComponents = () => {
9527
9534
  /* 添加第一个 */
9528
9535
  /* 加进容器内 */
9529
9536
  PopsSafeUtils.setSafeHTML(formHeaderDivElement,
9530
- /*html*/ `
9531
- <p>${formConfig_forms.text}</p>
9532
- <i class="pops-panel-forms-fold-container-icon">
9533
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9534
- <path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
9535
- </svg>
9536
- </i>
9537
+ /*html*/ `
9538
+ <p>${formConfig_forms.text}</p>
9539
+ <i class="pops-panel-forms-fold-container-icon">
9540
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9541
+ <path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
9542
+ </svg>
9543
+ </i>
9537
9544
  `);
9538
9545
  // 添加点击事件
9539
9546
  popsDOMUtils.on(formHeaderDivElement, "click", () => {
@@ -9802,13 +9809,13 @@ const PanelHandlerComponents = () => {
9802
9809
  if (formConfig_forms.isFold) {
9803
9810
  /* 加进容器内 */
9804
9811
  PopsSafeUtils.setSafeHTML(formHeaderDivElement,
9805
- /*html*/ `
9806
- <p>${formConfig_forms.text}</p>
9807
- <i class="pops-panel-forms-fold-container-icon">
9808
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9809
- <path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
9810
- </svg>
9811
- </i>
9812
+ /*html*/ `
9813
+ <p>${formConfig_forms.text}</p>
9814
+ <i class="pops-panel-forms-fold-container-icon">
9815
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9816
+ <path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
9817
+ </svg>
9818
+ </i>
9812
9819
  `);
9813
9820
  // 添加点击事件
9814
9821
  popsDOMUtils.on(formHeaderDivElement, "click", () => {
@@ -9982,21 +9989,21 @@ const PopsPanel = {
9982
9989
  const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
9983
9990
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
9984
9991
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
9985
- /*html*/ `
9992
+ /*html*/ `
9986
9993
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
9987
9994
  ? config.title.text
9988
- : `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
9989
- <div class="pops-content pops-${popsType}-content">
9990
- <aside class="pops-${popsType}-aside">
9991
- <ul class="pops-${popsType}-aside-top-container"></ul>
9992
- <ul class="pops-${popsType}-aside-bottom-container"></ul>
9993
- </aside>
9994
- <div class="pops-${popsType}-section-wrapper">
9995
- <section class="pops-${popsType}-container">
9996
- <ul class="pops-${popsType}-container-header-ul"></ul>
9997
- <ul class="pops-${popsType}-container-main-ul"></ul>
9998
- </section>
9999
- </div>
9995
+ : `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
9996
+ <div class="pops-content pops-${popsType}-content">
9997
+ <aside class="pops-${popsType}-aside">
9998
+ <ul class="pops-${popsType}-aside-top-container"></ul>
9999
+ <ul class="pops-${popsType}-aside-bottom-container"></ul>
10000
+ </aside>
10001
+ <div class="pops-${popsType}-section-wrapper">
10002
+ <section class="pops-${popsType}-container">
10003
+ <ul class="pops-${popsType}-container-header-ul"></ul>
10004
+ <ul class="pops-${popsType}-container-main-ul"></ul>
10005
+ </section>
10006
+ </div>
10000
10007
  </div>`, "", zIndex);
10001
10008
  /**
10002
10009
  * 弹窗的主元素,包括动画层
@@ -10226,10 +10233,10 @@ const PopsPrompt = {
10226
10233
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
10227
10234
  const { contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
10228
10235
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
10229
- /*html*/ `
10236
+ /*html*/ `
10230
10237
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
10231
10238
  ? config.title.text
10232
- : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
10239
+ : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
10233
10240
  <div class="pops-content pops-${popsType}-content" style="${contentPStyle}">${config.content.row
10234
10241
  ? '<textarea name="pops-input-text" pops="" placeholder="' +
10235
10242
  config.content.placeholder +
@@ -11103,108 +11110,108 @@ const PopsSearchSuggestion = {
11103
11110
  createSearchSelectElement() {
11104
11111
  const $el = popsDOMUtils.createElement("div", {
11105
11112
  className: `pops pops-${popsType}-search-suggestion`,
11106
- innerHTML: /*html*/ `
11107
- <style type="text/css">
11108
- .pops-${popsType}-animation{
11109
- -moz-animation: searchSelectFalIn 0.5s 1 linear;
11110
- -webkit-animation: searchSelectFalIn 0.5s 1 linear;
11111
- -o-animation: searchSelectFalIn 0.5s 1 linear;
11112
- -ms-animation: searchSelectFalIn 0.5s 1 linear;
11113
- }
11114
- </style>
11115
- <style type="text/css">
11116
- .pops-${popsType}-search-suggestion-arrow{
11117
- --suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
11118
- --suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
11119
- --suggestion-arrow--after-color: rgb(78, 78, 78);
11120
- --suggestion-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
11121
- --suggestion-arrow--after-width: 10px;
11122
- --suggestion-arrow--after-height: 10px;
11123
- }
11124
- .pops-${popsType}-search-suggestion-arrow{
11125
- position: absolute;
11126
- top: 100%;
11127
- left: 50%;
11128
- overflow: hidden;
11129
- width: 100%;
11130
- height: 12.5px;
11131
- transform: translateX(-50%);
11132
- }
11133
- .pops-${popsType}-search-suggestion-arrow::after{
11134
- position: absolute;
11135
- top: 0;
11136
- left: 50%;
11137
- width: var(--suggestion-arrow--after-width);
11138
- height: var(--suggestion-arrow--after-height);
11139
- background: var(--suggestion-arrow--after-bg-color);
11140
- color: var(--suggestion-arrow--after-color);
11141
- box-shadow:
11142
- 0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
11143
- 0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
11144
- content: "";
11145
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
11146
- }
11147
- .pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow{
11148
- position: absolute;
11149
- top: 100%;
11150
- left: 50%;
11151
- overflow: hidden;
11152
- width: 100%;
11153
- height: 12.5px;
11154
- transform: translateX(-50%);
11155
- }
11156
- .pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow::after{
11157
- position: absolute;
11158
- top: 0;
11159
- left: 50%;
11160
- width: var(--suggestion-arrow--after-width);
11161
- height: var(--suggestion-arrow--after-height);
11162
- background: var(--suggestion-arrow--after-bg-color);
11163
- box-shadow:
11164
- 0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
11165
- 0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
11166
- content: "";
11167
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
11168
- }
11169
- .pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow{
11170
- top: -12.5px;
11171
- left: 50%;
11172
- transform: translateX(-50%);
11173
- }
11174
- .pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow::after{
11175
- position: absolute;
11176
- top: 100%;
11177
- left: 50%;
11178
- content: "";
11179
- }
11180
- </style>
11181
- <style type="text/css" data-dynamic="true">
11182
- ${SearchSuggestion.getDynamicCSS()}
11183
- </style>
11184
- <style>
11185
- .el-zoom-in-top-animation{
11186
- --el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
11187
- opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
11188
- transition: var(--el-transition-md-fade);
11189
- transform-origin: center top;
11190
- }
11191
- .el-zoom-in-top-animation[data-popper-placement^="top"] {
11192
- transform-origin: center bottom;
11193
- }
11194
- .el-zoom-in-top-animation-hide{
11195
- opacity: 0;
11196
- transform: scaleY(0);
11197
- }
11198
- .el-zoom-in-top-animation-show{
11199
- opacity: 1;
11200
- transform: scaleY(1);
11201
- }
11202
- </style>
11203
- <style type="text/css" data-user-css>
11204
- ${config.style || ""}
11205
- </style>
11206
- <ul class="pops-${popsType}-search-suggestion-hint ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
11207
- ${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
11113
+ innerHTML: /*html*/ `
11114
+ <style type="text/css">
11115
+ .pops-${popsType}-animation{
11116
+ -moz-animation: searchSelectFalIn 0.5s 1 linear;
11117
+ -webkit-animation: searchSelectFalIn 0.5s 1 linear;
11118
+ -o-animation: searchSelectFalIn 0.5s 1 linear;
11119
+ -ms-animation: searchSelectFalIn 0.5s 1 linear;
11120
+ }
11121
+ </style>
11122
+ <style type="text/css">
11123
+ .pops-${popsType}-search-suggestion-arrow{
11124
+ --suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
11125
+ --suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
11126
+ --suggestion-arrow--after-color: rgb(78, 78, 78);
11127
+ --suggestion-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
11128
+ --suggestion-arrow--after-width: 10px;
11129
+ --suggestion-arrow--after-height: 10px;
11130
+ }
11131
+ .pops-${popsType}-search-suggestion-arrow{
11132
+ position: absolute;
11133
+ top: 100%;
11134
+ left: 50%;
11135
+ overflow: hidden;
11136
+ width: 100%;
11137
+ height: 12.5px;
11138
+ transform: translateX(-50%);
11139
+ }
11140
+ .pops-${popsType}-search-suggestion-arrow::after{
11141
+ position: absolute;
11142
+ top: 0;
11143
+ left: 50%;
11144
+ width: var(--suggestion-arrow--after-width);
11145
+ height: var(--suggestion-arrow--after-height);
11146
+ background: var(--suggestion-arrow--after-bg-color);
11147
+ color: var(--suggestion-arrow--after-color);
11148
+ box-shadow:
11149
+ 0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
11150
+ 0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
11151
+ content: "";
11152
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
11153
+ }
11154
+ .pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow{
11155
+ position: absolute;
11156
+ top: 100%;
11157
+ left: 50%;
11158
+ overflow: hidden;
11159
+ width: 100%;
11160
+ height: 12.5px;
11161
+ transform: translateX(-50%);
11162
+ }
11163
+ .pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow::after{
11164
+ position: absolute;
11165
+ top: 0;
11166
+ left: 50%;
11167
+ width: var(--suggestion-arrow--after-width);
11168
+ height: var(--suggestion-arrow--after-height);
11169
+ background: var(--suggestion-arrow--after-bg-color);
11170
+ box-shadow:
11171
+ 0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
11172
+ 0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
11173
+ content: "";
11174
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
11175
+ }
11176
+ .pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow{
11177
+ top: -12.5px;
11178
+ left: 50%;
11179
+ transform: translateX(-50%);
11180
+ }
11181
+ .pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow::after{
11182
+ position: absolute;
11183
+ top: 100%;
11184
+ left: 50%;
11185
+ content: "";
11186
+ }
11187
+ </style>
11188
+ <style type="text/css" data-dynamic="true">
11189
+ ${SearchSuggestion.getDynamicCSS()}
11190
+ </style>
11191
+ <style>
11192
+ .el-zoom-in-top-animation{
11193
+ --el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
11194
+ opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
11195
+ transition: var(--el-transition-md-fade);
11196
+ transform-origin: center top;
11197
+ }
11198
+ .el-zoom-in-top-animation[data-popper-placement^="top"] {
11199
+ transform-origin: center bottom;
11200
+ }
11201
+ .el-zoom-in-top-animation-hide{
11202
+ opacity: 0;
11203
+ transform: scaleY(0);
11204
+ }
11205
+ .el-zoom-in-top-animation-show{
11206
+ opacity: 1;
11207
+ transform: scaleY(1);
11208
+ }
11209
+ </style>
11210
+ <style type="text/css" data-user-css>
11211
+ ${config.style || ""}
11212
+ </style>
11213
+ <ul class="pops-${popsType}-search-suggestion-hint ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
11214
+ ${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
11208
11215
  `,
11209
11216
  }, {
11210
11217
  "data-guid": guid,
@@ -11225,67 +11232,67 @@ const PopsSearchSuggestion = {
11225
11232
  * 动态获取CSS
11226
11233
  */
11227
11234
  getDynamicCSS() {
11228
- return /*css*/ `
11229
- .pops-${popsType}-search-suggestion{
11230
- --search-suggestion-bg-color: #ffffff;
11231
- --search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
11232
- --search-suggestion-item-color: #515a6e;
11233
- --search-suggestion-item-none-color: #8e8e8e;
11234
- --search-suggestion-item-is-hover-bg-color: #f5f7fa;
11235
- --search-suggestion-item-is-select-bg-color: #409eff;
11236
- }
11237
- .pops-${popsType}-search-suggestion{
11238
- border: initial;
11239
- overflow: initial;
11240
- position: ${config.isAbsolute ? "absolute" : "fixed"};
11241
- z-index: ${PopsHandler.handleZIndex(config.zIndex)};
11242
- }
11243
- ul.pops-${popsType}-search-suggestion-hint{
11244
- max-height: ${config.maxHeight};
11245
- overflow-x: hidden;
11246
- overflow-y: auto;
11247
- padding: 5px 0;
11248
- background-color: var(--search-suggestion-bg-color);
11249
- box-sizing: border-box;
11250
- border-radius: 4px;
11251
- box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
11252
- }
11253
- /* 建议框在上面时 */
11254
- .pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint{
11255
- display: flex;
11256
- flex-direction: column-reverse;
11257
- }
11258
- .pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint li{
11259
- flex-shrink: 0;
11260
- }
11261
- ul.pops-${popsType}-search-suggestion-hint li{
11262
- padding: 7px;
11263
- margin: 0;
11264
- clear: both;
11265
- color: var(--search-suggestion-item-color);
11266
- font-size: 14px;
11267
- list-style: none;
11268
- cursor: pointer;
11269
- transition: background .2s ease-in-out;
11270
- overflow: hidden;
11271
- text-overflow: ellipsis;
11272
- width: 100%;
11273
- }
11274
- ul.pops-${popsType}-search-suggestion-hint li[data-none]{
11275
- text-align: center;
11276
- font-size: 12px;
11277
- color: var(--search-suggestion-item-none-color);
11278
- }
11279
- ul.pops-${popsType}-search-suggestion-hint li:not([data-none]):hover{
11280
- background-color: var(--search-suggestion-item-is-hover-bg-color);
11281
- }
11282
- @media (prefers-color-scheme: dark){
11283
- .pops-${popsType}-search-suggestion{
11284
- --search-suggestion-bg-color: #1d1e1f;
11285
- --search-suggestion-item-color: #cfd3d4;
11286
- --search-suggestion-item-is-hover-bg-color: rgba(175, 175, 175, .1);
11287
- }
11288
- }
11235
+ return /*css*/ `
11236
+ .pops-${popsType}-search-suggestion{
11237
+ --search-suggestion-bg-color: #ffffff;
11238
+ --search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
11239
+ --search-suggestion-item-color: #515a6e;
11240
+ --search-suggestion-item-none-color: #8e8e8e;
11241
+ --search-suggestion-item-is-hover-bg-color: #f5f7fa;
11242
+ --search-suggestion-item-is-select-bg-color: #409eff;
11243
+ }
11244
+ .pops-${popsType}-search-suggestion{
11245
+ border: initial;
11246
+ overflow: initial;
11247
+ position: ${config.isAbsolute ? "absolute" : "fixed"};
11248
+ z-index: ${PopsHandler.handleZIndex(config.zIndex)};
11249
+ }
11250
+ ul.pops-${popsType}-search-suggestion-hint{
11251
+ max-height: ${config.maxHeight};
11252
+ overflow-x: hidden;
11253
+ overflow-y: auto;
11254
+ padding: 5px 0;
11255
+ background-color: var(--search-suggestion-bg-color);
11256
+ box-sizing: border-box;
11257
+ border-radius: 4px;
11258
+ box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
11259
+ }
11260
+ /* 建议框在上面时 */
11261
+ .pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint{
11262
+ display: flex;
11263
+ flex-direction: column-reverse;
11264
+ }
11265
+ .pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint li{
11266
+ flex-shrink: 0;
11267
+ }
11268
+ ul.pops-${popsType}-search-suggestion-hint li{
11269
+ padding: 7px;
11270
+ margin: 0;
11271
+ clear: both;
11272
+ color: var(--search-suggestion-item-color);
11273
+ font-size: 14px;
11274
+ list-style: none;
11275
+ cursor: pointer;
11276
+ transition: background .2s ease-in-out;
11277
+ overflow: hidden;
11278
+ text-overflow: ellipsis;
11279
+ width: 100%;
11280
+ }
11281
+ ul.pops-${popsType}-search-suggestion-hint li[data-none]{
11282
+ text-align: center;
11283
+ font-size: 12px;
11284
+ color: var(--search-suggestion-item-none-color);
11285
+ }
11286
+ ul.pops-${popsType}-search-suggestion-hint li:not([data-none]):hover{
11287
+ background-color: var(--search-suggestion-item-is-hover-bg-color);
11288
+ }
11289
+ @media (prefers-color-scheme: dark){
11290
+ .pops-${popsType}-search-suggestion{
11291
+ --search-suggestion-bg-color: #1d1e1f;
11292
+ --search-suggestion-item-color: #cfd3d4;
11293
+ --search-suggestion-item-is-hover-bg-color: rgba(175, 175, 175, .1);
11294
+ }
11295
+ }
11289
11296
  `;
11290
11297
  },
11291
11298
  /**
@@ -11552,11 +11559,11 @@ const PopsSearchSuggestion = {
11552
11559
  * 获取删除按钮的html
11553
11560
  */
11554
11561
  createItemDeleteIcon(size = 16, fill = "#bababa") {
11555
- const $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
11556
- <svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
11557
- <path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
11558
- <path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
11559
- </svg>
11562
+ const $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
11563
+ <svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
11564
+ <path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
11565
+ <path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
11566
+ </svg>
11560
11567
  `);
11561
11568
  return $svg;
11562
11569
  },
@@ -11787,7 +11794,7 @@ const PopsSearchSuggestion = {
11787
11794
  },
11788
11795
  };
11789
11796
 
11790
- const version = "2.4.6";
11797
+ const version = "2.4.7";
11791
11798
 
11792
11799
  class Pops {
11793
11800
  /** 配置 */