@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.umd.js CHANGED
@@ -998,7 +998,7 @@
998
998
  if (typeof currentParam === "boolean") {
999
999
  option.capture = currentParam;
1000
1000
  }
1001
- else if (typeof currentParam === "object" && "capture" in currentParam) {
1001
+ else if (typeof currentParam === "object" && currentParam != null && "capture" in currentParam) {
1002
1002
  option.capture = currentParam.capture;
1003
1003
  }
1004
1004
  return option;
@@ -1065,16 +1065,18 @@
1065
1065
  // 目标函数、事件名、子元素选择器
1066
1066
  isRemoveAll = true;
1067
1067
  }
1068
+ if (args.length === 5 && typeof args[4] === "function" && typeof filter !== "function") {
1069
+ // 目标函数、事件名、回调函数、事件配置、过滤函数
1070
+ filter = option;
1071
+ }
1068
1072
  elementList.forEach((elementItem) => {
1069
1073
  /* 获取对象上的事件 */
1070
1074
  const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
1071
1075
  eventTypeList.forEach((eventName) => {
1072
- let handlers = elementEvents[eventName] || [];
1073
- if (typeof filter === "function") {
1074
- handlers = handlers.filter(filter);
1075
- }
1076
- for (let index = 0; index < handlers.length; index++) {
1077
- const handler = handlers[index];
1076
+ const handlers = elementEvents[eventName] || [];
1077
+ const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
1078
+ for (let index = 0; index < filterHandler.length; index++) {
1079
+ const handler = filterHandler[index];
1078
1080
  let flag = true;
1079
1081
  if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
1080
1082
  // callback不同
@@ -1086,13 +1088,18 @@
1086
1088
  flag = false;
1087
1089
  }
1088
1090
  }
1089
- if (flag && listenerOption.capture !== handler.option.capture) {
1091
+ if (flag &&
1092
+ typeof handler.option.capture === "boolean" &&
1093
+ listenerOption.capture !== handler.option.capture) {
1090
1094
  // 事件的配置项不同
1091
1095
  flag = false;
1092
1096
  }
1093
1097
  if (flag || isRemoveAll) {
1094
1098
  elementItem.removeEventListener(eventName, handler.callback, handler.option);
1095
- handlers.splice(index--, 1);
1099
+ const findIndex = handlers.findIndex((item) => item === handler);
1100
+ if (findIndex !== -1) {
1101
+ handlers.splice(findIndex, 1);
1102
+ }
1096
1103
  }
1097
1104
  }
1098
1105
  if (handlers.length === 0) {
@@ -2583,9 +2590,9 @@
2583
2590
  popsStyle += `height: ${__config.height};`;
2584
2591
  }
2585
2592
  const hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
2586
- return /*html*/ `
2587
- <div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""}
2588
- <div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
2593
+ return /*html*/ `
2594
+ <div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""}
2595
+ <div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
2589
2596
  </div>`;
2590
2597
  },
2591
2598
  /**
@@ -2611,22 +2618,22 @@
2611
2618
  iframe_config.topRightButton.split("|").forEach((item) => {
2612
2619
  // 最小化、最大化、窗口化、关闭按钮
2613
2620
  item = item.toLowerCase();
2614
- topRightButtonHTML += /*html*/ `
2615
- <button class="pops-header-control" type="button" data-type="${item}">
2616
- <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
2621
+ topRightButtonHTML += /*html*/ `
2622
+ <button class="pops-header-control" type="button" data-type="${item}">
2623
+ <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
2617
2624
  </button>`;
2618
2625
  });
2619
- resultHTML = /*html*/ `
2626
+ resultHTML = /*html*/ `
2620
2627
  <div class="pops-header-controls" data-margin>${topRightButtonHTML}</div>`;
2621
2628
  }
2622
2629
  else {
2623
2630
  if (confirm_config.btn?.close?.enable) {
2624
2631
  // 关闭按钮
2625
- closeHTML = /*html*/ `
2626
- <div class="pops-header-controls">
2627
- <button class="pops-header-control" type="button" data-type="close" data-header>
2628
- <i class="pops-icon">${PopsIcon.getIcon("close")}</i>
2629
- </button>
2632
+ closeHTML = /*html*/ `
2633
+ <div class="pops-header-controls">
2634
+ <button class="pops-header-control" type="button" data-type="close" data-header>
2635
+ <i class="pops-icon">${PopsIcon.getIcon("close")}</i>
2636
+ </button>
2630
2637
  </div>`;
2631
2638
  }
2632
2639
  resultHTML = closeHTML;
@@ -2693,14 +2700,14 @@
2693
2700
  iconHTML = iconHTML || "";
2694
2701
  okIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${config.btn.ok.iconIsLoading}">${iconHTML}</i>`;
2695
2702
  }
2696
- okHTML = /*html*/ `
2697
- <button
2698
- class="pops-${type}-btn-ok ${okButtonSizeClassName}"
2699
- type="button"
2700
- data-type="${confirm_config.btn.ok?.type}"
2701
- data-has-icon="${(confirm_config.btn.ok.icon || "") !== ""}"
2702
- data-rightIcon="${confirm_config.btn.ok?.rightIcon}"
2703
- >${okIconHTML}<span>${config.btn.ok.text}</span>
2703
+ okHTML = /*html*/ `
2704
+ <button
2705
+ class="pops-${type}-btn-ok ${okButtonSizeClassName}"
2706
+ type="button"
2707
+ data-type="${confirm_config.btn.ok?.type}"
2708
+ data-has-icon="${(confirm_config.btn.ok.icon || "") !== ""}"
2709
+ data-rightIcon="${confirm_config.btn.ok?.rightIcon}"
2710
+ >${okIconHTML}<span>${config.btn.ok.text}</span>
2704
2711
  </button>`;
2705
2712
  }
2706
2713
  if (confirm_config.btn?.cancel?.enable) {
@@ -2726,14 +2733,14 @@
2726
2733
  iconHTML = iconHTML || "";
2727
2734
  cancelIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.cancel.iconIsLoading}">${iconHTML}</i>`;
2728
2735
  }
2729
- cancelHTML = /*html*/ `
2730
- <button
2731
- class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
2732
- type="button"
2733
- data-type="${confirm_config.btn.cancel.type}"
2734
- data-has-icon="${(confirm_config.btn.cancel.icon || "") !== ""}"
2735
- data-rightIcon="${confirm_config.btn.cancel.rightIcon}"
2736
- >${cancelIconHTML}<span>${confirm_config.btn.cancel.text}</span>
2736
+ cancelHTML = /*html*/ `
2737
+ <button
2738
+ class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
2739
+ type="button"
2740
+ data-type="${confirm_config.btn.cancel.type}"
2741
+ data-has-icon="${(confirm_config.btn.cancel.icon || "") !== ""}"
2742
+ data-rightIcon="${confirm_config.btn.cancel.rightIcon}"
2743
+ >${cancelIconHTML}<span>${confirm_config.btn.cancel.text}</span>
2737
2744
  </button>`;
2738
2745
  }
2739
2746
  if (confirm_config.btn?.other?.enable) {
@@ -2756,14 +2763,14 @@
2756
2763
  iconHTML = iconHTML || "";
2757
2764
  otherIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.other.iconIsLoading}">${iconHTML}</i>`;
2758
2765
  }
2759
- ohterHTML = /*html*/ `
2760
- <button
2761
- class="pops-${type}-btn-other ${otherButtonSizeClassName}"
2762
- type="button"
2763
- data-type="${confirm_config.btn.other.type}"
2764
- data-has-icon="${(confirm_config.btn.other.icon || "") !== ""}"
2765
- data-rightIcon="${confirm_config.btn.other.rightIcon}"
2766
- >${otherIconHTML}<span>${confirm_config.btn.other.text}</span>
2766
+ ohterHTML = /*html*/ `
2767
+ <button
2768
+ class="pops-${type}-btn-other ${otherButtonSizeClassName}"
2769
+ type="button"
2770
+ data-type="${confirm_config.btn.other.type}"
2771
+ data-has-icon="${(confirm_config.btn.other.icon || "") !== ""}"
2772
+ data-rightIcon="${confirm_config.btn.other.rightIcon}"
2773
+ >${otherIconHTML}<span>${confirm_config.btn.other.text}</span>
2767
2774
  </button>`;
2768
2775
  }
2769
2776
  if (confirm_config.btn.merge) {
@@ -2774,11 +2781,11 @@
2774
2781
  else {
2775
2782
  flexStyle += "flex-direction: row;";
2776
2783
  }
2777
- resultHTML = /*html*/ `
2778
- <div class="pops-botttom-btn-controls pops-${type}-btn" style="${btnStyle}">${ohterHTML}<div
2779
- class="pops-${type}-btn-merge"
2780
- style="${flexStyle}">${okHTML}${cancelHTML}</div>
2781
- </div>
2784
+ resultHTML = /*html*/ `
2785
+ <div class="pops-botttom-btn-controls pops-${type}-btn" style="${btnStyle}">${ohterHTML}<div
2786
+ class="pops-${type}-btn-merge"
2787
+ style="${flexStyle}">${okHTML}${cancelHTML}</div>
2788
+ </div>
2782
2789
  `;
2783
2790
  }
2784
2791
  else {
@@ -2806,37 +2813,37 @@
2806
2813
  },
2807
2814
  };
2808
2815
 
2809
- 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";
2816
+ 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";
2810
2817
 
2811
- 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";
2818
+ 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";
2812
2819
 
2813
- 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";
2820
+ 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";
2814
2821
 
2815
- 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";
2822
+ 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";
2816
2823
 
2817
- 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";
2824
+ 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";
2818
2825
 
2819
- 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";
2826
+ 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";
2820
2827
 
2821
2828
  var alertCSS = "";
2822
2829
 
2823
2830
  var confirmCSS = "";
2824
2831
 
2825
- 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";
2832
+ 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";
2826
2833
 
2827
- 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";
2834
+ 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";
2828
2835
 
2829
- 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";
2836
+ 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";
2830
2837
 
2831
- 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";
2838
+ 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";
2832
2839
 
2833
- 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";
2840
+ 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";
2834
2841
 
2835
- 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";
2842
+ 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";
2836
2843
 
2837
- 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";
2844
+ 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";
2838
2845
 
2839
- 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";
2846
+ 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";
2840
2847
 
2841
2848
  const PopsCSS = {
2842
2849
  /** 主CSS */
@@ -4083,10 +4090,10 @@
4083
4090
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
4084
4091
  const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
4085
4092
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
4086
- /*html*/ `
4093
+ /*html*/ `
4087
4094
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
4088
4095
  ? config.title.text
4089
- : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4096
+ : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4090
4097
  <div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
4091
4098
  ? config.content.text
4092
4099
  : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
@@ -4287,10 +4294,10 @@
4287
4294
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
4288
4295
  const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
4289
4296
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
4290
- /*html*/ `
4297
+ /*html*/ `
4291
4298
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
4292
4299
  ? config.title.text
4293
- : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4300
+ : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4294
4301
  <div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
4295
4302
  ? config.content.text
4296
4303
  : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
@@ -4491,12 +4498,12 @@
4491
4498
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
4492
4499
  const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
4493
4500
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
4494
- /*html*/ `
4501
+ /*html*/ `
4495
4502
  ${config.title.enable
4496
4503
  ? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${config.title.html
4497
4504
  ? config.title.text
4498
4505
  : /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
4499
- : ""}
4506
+ : ""}
4500
4507
  <div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
4501
4508
  ? config.content.text
4502
4509
  : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
@@ -4671,19 +4678,19 @@
4671
4678
  const maskHTML = PopsElementHandler.createMask(guid, zIndex);
4672
4679
  const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
4673
4680
  const animHTML = PopsElementHandler.createAnim(guid, PopsType, config,
4674
- /*html*/ `
4681
+ /*html*/ `
4675
4682
  <div class="pops-content pops-${PopsType}-content">${config.addIndexCSS
4676
- ? /*html*/ `
4677
- <style data-model-name="index">${PopsCSS.index}</style>
4678
- <style data-model-name="anim">${PopsCSS.anim}</style>
4679
- <style data-model-name="common">${PopsCSS.common}</style>
4683
+ ? /*html*/ `
4684
+ <style data-model-name="index">${PopsCSS.index}</style>
4685
+ <style data-model-name="anim">${PopsCSS.anim}</style>
4686
+ <style data-model-name="common">${PopsCSS.common}</style>
4680
4687
  `
4681
- : ""}
4682
- <style data-model-name="loadingCSS">
4683
- ${PopsCSS.loadingCSS}
4684
- </style>
4685
- ${config.style != null ? `<style>${config.style}</style>` : ""}
4686
- <p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
4688
+ : ""}
4689
+ <style data-model-name="loadingCSS">
4690
+ ${PopsCSS.loadingCSS}
4691
+ </style>
4692
+ ${config.style != null ? `<style>${config.style}</style>` : ""}
4693
+ <p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
4687
4694
  </div>`, "", zIndex);
4688
4695
  /**
4689
4696
  * 弹窗的主元素,包括动画层
@@ -5000,103 +5007,103 @@
5000
5007
  const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
5001
5008
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
5002
5009
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
5003
- /*html*/ `
5010
+ /*html*/ `
5004
5011
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
5005
5012
  ? config.title.text
5006
- : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
5007
- <div class="pops-content pops-${popsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
5008
- <div class="pops-folder-list">
5009
- <div class="pops-folder-file-list-breadcrumb">
5010
- <div class="pops-folder-file-list-breadcrumb-primary">
5011
- <span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
5012
- <a>全部文件</a>
5013
- </span>
5014
- </div>
5015
- </div>
5016
- <div class="pops-folder-list-table__header-div">
5017
- <table class="pops-folder-list-table__header">
5018
- <colgroup>
5019
- <col width="52%">
5020
- <col width="24%">
5021
- <col width="16%">
5022
- </colgroup>
5023
- <thead>
5024
- <tr class="pops-folder-list-table__header-row">
5025
- <th class="pops-folder-list-table__header-th cursor-p">
5026
- <div class="text-ellip content flex-a-i-center">
5027
- <span>文件名</span>
5028
- <div class="pops-folder-list-table__sort" data-sort="fileName">
5029
- <div class="pops-folder-icon-arrow" data-sort="按文件名排序">
5030
- <svg
5031
- viewBox="0 0 1024 1024"
5032
- xmlns="http://www.w3.org/2000/svg">
5033
- <path
5034
- d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5035
- class="pops-folder-icon-arrow-up"></path>
5036
- <path
5037
- d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5038
- class="pops-folder-icon-arrow-down"></path>
5039
- </svg>
5040
- </div>
5041
- </div>
5042
- </div>
5043
- </th>
5044
- <th class="pops-folder-list-table__header-th cursor-p">
5045
- <div class="text-ellip content flex-a-i-center">
5046
- <span>修改时间</span>
5047
- <div class="pops-folder-list-table__sort" data-sort="latestTime">
5048
- <div class="pops-folder-icon-arrow" title="按修改时间排序">
5049
- <svg
5050
- viewBox="0 0 1024 1024"
5051
- xmlns="http://www.w3.org/2000/svg">
5052
- <path
5053
- d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5054
- class="pops-folder-icon-arrow-up"></path>
5055
- <path
5056
- d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5057
- class="pops-folder-icon-arrow-down"></path>
5058
- </svg>
5059
- </div>
5060
- </div>
5061
- </div>
5062
- </th>
5063
- <th class="pops-folder-list-table__header-th cursor-p">
5064
- <div class="text-ellip content flex-a-i-center">
5065
- <span>大小</span>
5066
- <div class="pops-folder-list-table__sort" data-sort="fileSize">
5067
- <div class="pops-folder-icon-arrow" title="按大小排序">
5068
- <svg
5069
- viewBox="0 0 1024 1024"
5070
- xmlns="http://www.w3.org/2000/svg">
5071
- <path
5072
- d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5073
- class="pops-folder-icon-arrow-up"></path>
5074
- <path
5075
- d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5076
- class="pops-folder-icon-arrow-down"></path>
5077
- </svg>
5078
- </div>
5079
- </div>
5080
- </div>
5081
- </th>
5082
- </tr>
5083
- </thead>
5084
- </table>
5085
- </div>
5086
- <div class="pops-folder-list-table__body-div">
5087
- <table class="pops-folder-list-table__body">
5088
- <colgroup>
5013
+ : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
5014
+ <div class="pops-content pops-${popsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
5015
+ <div class="pops-folder-list">
5016
+ <div class="pops-folder-file-list-breadcrumb">
5017
+ <div class="pops-folder-file-list-breadcrumb-primary">
5018
+ <span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
5019
+ <a>全部文件</a>
5020
+ </span>
5021
+ </div>
5022
+ </div>
5023
+ <div class="pops-folder-list-table__header-div">
5024
+ <table class="pops-folder-list-table__header">
5025
+ <colgroup>
5026
+ <col width="52%">
5027
+ <col width="24%">
5028
+ <col width="16%">
5029
+ </colgroup>
5030
+ <thead>
5031
+ <tr class="pops-folder-list-table__header-row">
5032
+ <th class="pops-folder-list-table__header-th cursor-p">
5033
+ <div class="text-ellip content flex-a-i-center">
5034
+ <span>文件名</span>
5035
+ <div class="pops-folder-list-table__sort" data-sort="fileName">
5036
+ <div class="pops-folder-icon-arrow" data-sort="按文件名排序">
5037
+ <svg
5038
+ viewBox="0 0 1024 1024"
5039
+ xmlns="http://www.w3.org/2000/svg">
5040
+ <path
5041
+ d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5042
+ class="pops-folder-icon-arrow-up"></path>
5043
+ <path
5044
+ d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5045
+ class="pops-folder-icon-arrow-down"></path>
5046
+ </svg>
5047
+ </div>
5048
+ </div>
5049
+ </div>
5050
+ </th>
5051
+ <th class="pops-folder-list-table__header-th cursor-p">
5052
+ <div class="text-ellip content flex-a-i-center">
5053
+ <span>修改时间</span>
5054
+ <div class="pops-folder-list-table__sort" data-sort="latestTime">
5055
+ <div class="pops-folder-icon-arrow" title="按修改时间排序">
5056
+ <svg
5057
+ viewBox="0 0 1024 1024"
5058
+ xmlns="http://www.w3.org/2000/svg">
5059
+ <path
5060
+ d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5061
+ class="pops-folder-icon-arrow-up"></path>
5062
+ <path
5063
+ d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5064
+ class="pops-folder-icon-arrow-down"></path>
5065
+ </svg>
5066
+ </div>
5067
+ </div>
5068
+ </div>
5069
+ </th>
5070
+ <th class="pops-folder-list-table__header-th cursor-p">
5071
+ <div class="text-ellip content flex-a-i-center">
5072
+ <span>大小</span>
5073
+ <div class="pops-folder-list-table__sort" data-sort="fileSize">
5074
+ <div class="pops-folder-icon-arrow" title="按大小排序">
5075
+ <svg
5076
+ viewBox="0 0 1024 1024"
5077
+ xmlns="http://www.w3.org/2000/svg">
5078
+ <path
5079
+ d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
5080
+ class="pops-folder-icon-arrow-up"></path>
5081
+ <path
5082
+ d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
5083
+ class="pops-folder-icon-arrow-down"></path>
5084
+ </svg>
5085
+ </div>
5086
+ </div>
5087
+ </div>
5088
+ </th>
5089
+ </tr>
5090
+ </thead>
5091
+ </table>
5092
+ </div>
5093
+ <div class="pops-folder-list-table__body-div">
5094
+ <table class="pops-folder-list-table__body">
5095
+ <colgroup>
5089
5096
  ${popsUtils.isPhone()
5090
5097
  ? `<col width="100%">`
5091
- : `
5092
- <col width="52%">
5093
- <col width="24%">
5094
- <col width="16%">`}
5095
- </colgroup>
5096
- <tbody></tbody>
5097
- </table>
5098
- </div>
5099
- </div>
5098
+ : `
5099
+ <col width="52%">
5100
+ <col width="24%">
5101
+ <col width="16%">`}
5102
+ </colgroup>
5103
+ <tbody></tbody>
5104
+ </table>
5105
+ </div>
5106
+ </div>
5100
5107
  </div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
5101
5108
  /**
5102
5109
  * 弹窗的主元素,包括动画层
@@ -5235,27 +5242,27 @@
5235
5242
  fileTimeElement.className = "pops-folder-list-table__body-td";
5236
5243
  fileFormatSize.className = "pops-folder-list-table__body-td";
5237
5244
  PopsSafeUtils.setSafeHTML(fileNameElement,
5238
- /*html*/ `
5239
- <div class="pops-folder-list-file-name cursor-p">
5240
- <div>
5241
- <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
5242
- <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
5243
- ${fileName}
5244
- </a>
5245
- </div>
5246
- </div>
5245
+ /*html*/ `
5246
+ <div class="pops-folder-list-file-name cursor-p">
5247
+ <div>
5248
+ <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
5249
+ <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
5250
+ ${fileName}
5251
+ </a>
5252
+ </div>
5253
+ </div>
5247
5254
  `);
5248
5255
  PopsSafeUtils.setSafeHTML(fileTimeElement,
5249
- /*html*/ `
5250
- <div class="pops-folder-list__time">
5251
- <span>${latestTime}</span>
5252
- </div>
5256
+ /*html*/ `
5257
+ <div class="pops-folder-list__time">
5258
+ <span>${latestTime}</span>
5259
+ </div>
5253
5260
  `);
5254
5261
  PopsSafeUtils.setSafeHTML(fileFormatSize,
5255
- /*html*/ `
5256
- <div class="pops-folder-list-format-size">
5257
- <span>${fileSize}</span>
5258
- </div>
5262
+ /*html*/ `
5263
+ <div class="pops-folder-list-format-size">
5264
+ <span>${fileSize}</span>
5265
+ </div>
5259
5266
  `);
5260
5267
  /* 存储原来的值 */
5261
5268
  const __value__ = {
@@ -5322,14 +5329,14 @@
5322
5329
  folderElement.className = "pops-folder-list-table__body-row";
5323
5330
  fileNameElement.className = "pops-folder-list-table__body-td";
5324
5331
  PopsSafeUtils.setSafeHTML(fileNameElement,
5325
- /*html*/ `
5326
- <div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
5327
- <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
5328
- <div>
5329
- <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
5330
- <span>${latestTime} ${fileSize}</span>
5331
- </div>
5332
- </div>
5332
+ /*html*/ `
5333
+ <div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
5334
+ <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
5335
+ <div>
5336
+ <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
5337
+ <span>${latestTime} ${fileSize}</span>
5338
+ </div>
5339
+ </div>
5333
5340
  `);
5334
5341
  /* 存储原来的值 */
5335
5342
  const __value__ = {
@@ -5819,14 +5826,14 @@
5819
5826
  const titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
5820
5827
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
5821
5828
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
5822
- /*html*/ `
5829
+ /*html*/ `
5823
5830
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
5824
5831
  ? titleText
5825
- : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
5826
- <div class="pops-content pops-${popsType}-content">
5827
- <div class="pops-${popsType}-content-global-loading"></div>
5828
- <iframe src="${config.url}" pops ${config.sandbox ? "sandbox='allow-forms allow-same-origin allow-scripts'" : ""}>
5829
- </iframe>
5832
+ : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
5833
+ <div class="pops-content pops-${popsType}-content">
5834
+ <div class="pops-${popsType}-content-global-loading"></div>
5835
+ <iframe src="${config.url}" pops ${config.sandbox ? "sandbox='allow-forms allow-same-origin allow-scripts'" : ""}>
5836
+ </iframe>
5830
5837
  </div>${config.loading.enable ? iframeLoadingHTML : ""}`, "", zIndex);
5831
5838
  /**
5832
5839
  * 弹窗的主元素,包括动画层
@@ -6458,8 +6465,8 @@
6458
6465
  },
6459
6466
  {
6460
6467
  id: "whitesev-panel-bottom-config-1",
6461
- title: /*html*/ `
6462
- <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>
6468
+ title: /*html*/ `
6469
+ <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>
6463
6470
  `,
6464
6471
  isBottom: true,
6465
6472
  disableAsideItemHoverCSS: true,
@@ -6688,9 +6695,9 @@
6688
6695
  createToolTip() {
6689
6696
  const $toolTipContainer = popsDOMUtils.createElement("div", {
6690
6697
  className: "pops-tip",
6691
- innerHTML: /*html*/ `
6692
- <div class="pops-tip-content" style="text-align: center;"></div>
6693
- <div class="pops-tip-arrow"></div>
6698
+ innerHTML: /*html*/ `
6699
+ <div class="pops-tip-content" style="text-align: center;"></div>
6700
+ <div class="pops-tip-arrow"></div>
6694
6701
  `,
6695
6702
  }, {
6696
6703
  "data-position": this.$data.config.isFixed ? "fixed" : "absolute",
@@ -7406,15 +7413,15 @@
7406
7413
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7407
7414
  }
7408
7415
  PopsSafeUtils.setSafeHTML($li,
7409
- /*html*/ `
7410
- <div class="pops-panel-item-left-text">
7411
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7412
- <div class="pops-panel-switch">
7413
- <input class="pops-panel-switch__input" type="checkbox">
7414
- <span class="pops-panel-switch__core">
7415
- <div class="pops-panel-switch__action">
7416
- </div>
7417
- </span>
7416
+ /*html*/ `
7417
+ <div class="pops-panel-item-left-text">
7418
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7419
+ <div class="pops-panel-switch">
7420
+ <input class="pops-panel-switch__input" type="checkbox">
7421
+ <span class="pops-panel-switch__core">
7422
+ <div class="pops-panel-switch__action">
7423
+ </div>
7424
+ </span>
7418
7425
  </div>`);
7419
7426
  const PopsPanelSwitch = {
7420
7427
  [Symbol.toStringTag]: "PopsPanelSwitch",
@@ -7512,12 +7519,12 @@
7512
7519
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7513
7520
  }
7514
7521
  PopsSafeUtils.setSafeHTML($li,
7515
- /*html*/ `
7516
- <div class="pops-panel-item-left-text">
7517
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7518
- <div class="pops-panel-slider">
7519
- <input type="range" min="${formConfig.min}" max="${formConfig.max}">
7520
- </div>
7522
+ /*html*/ `
7523
+ <div class="pops-panel-item-left-text">
7524
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7525
+ <div class="pops-panel-slider">
7526
+ <input type="range" min="${formConfig.min}" max="${formConfig.max}">
7527
+ </div>
7521
7528
  `);
7522
7529
  const $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
7523
7530
  if (formConfig.step) {
@@ -7575,16 +7582,16 @@
7575
7582
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7576
7583
  }
7577
7584
  PopsSafeUtils.setSafeHTML($li,
7578
- /*html*/ `
7579
- <div class="pops-panel-item-left-text" style="flex: 1;">
7580
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7581
- <div class="pops-slider pops-slider-width">
7582
- <div class="pops-slider__runway">
7583
- <div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
7584
- <div class="pops-slider__button-wrapper" style="left: 0%">
7585
- <div class="pops-slider__button"></div>
7586
- </div>
7587
- </div>
7585
+ /*html*/ `
7586
+ <div class="pops-panel-item-left-text" style="flex: 1;">
7587
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7588
+ <div class="pops-slider pops-slider-width">
7589
+ <div class="pops-slider__runway">
7590
+ <div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
7591
+ <div class="pops-slider__button-wrapper" style="left: 0%">
7592
+ <div class="pops-slider__button"></div>
7593
+ </div>
7594
+ </div>
7588
7595
  </div>`);
7589
7596
  const PopsPanelSlider = {
7590
7597
  [Symbol.toStringTag]: "PopsPanelSlider",
@@ -8167,12 +8174,12 @@
8167
8174
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8168
8175
  }
8169
8176
  PopsSafeUtils.setSafeHTML($li,
8170
- /*html*/ `
8171
- <div class="pops-panel-item-left-text">
8172
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8173
- <div class="pops-panel-input">
8174
- <input type="${inputType}" placeholder="${formConfig.placeholder ?? ""}">
8175
- </div>
8177
+ /*html*/ `
8178
+ <div class="pops-panel-item-left-text">
8179
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8180
+ <div class="pops-panel-input">
8181
+ <input type="${inputType}" placeholder="${formConfig.placeholder ?? ""}">
8182
+ </div>
8176
8183
  `);
8177
8184
  const PopsPanelInput = {
8178
8185
  [Symbol.toStringTag]: "PopsPanelInput",
@@ -8220,10 +8227,10 @@
8220
8227
  this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
8221
8228
  this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
8222
8229
  PopsSafeUtils.setSafeHTML(this.$ele.inputSpanIcon,
8223
- /*html*/ `
8224
- <span class="pops-panel-input__suffix-inner">
8225
- <i class="pops-panel-icon"></i>
8226
- </span>
8230
+ /*html*/ `
8231
+ <span class="pops-panel-input__suffix-inner">
8232
+ <i class="pops-panel-icon"></i>
8233
+ </span>
8227
8234
  `);
8228
8235
  this.$ele.inputSpanIconInner = this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
8229
8236
  this.$ele.icon = this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
@@ -8365,12 +8372,12 @@
8365
8372
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8366
8373
  }
8367
8374
  PopsSafeUtils.setSafeHTML($li,
8368
- /*html*/ `
8369
- <div class="pops-panel-item-left-text">
8370
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8371
- <div class="pops-panel-textarea">
8372
- <textarea placeholder="${formConfig.placeholder ?? ""}"></textarea>
8373
- </div>
8375
+ /*html*/ `
8376
+ <div class="pops-panel-item-left-text">
8377
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8378
+ <div class="pops-panel-textarea">
8379
+ <textarea placeholder="${formConfig.placeholder ?? ""}"></textarea>
8380
+ </div>
8374
8381
  `);
8375
8382
  const PopsPanelTextArea = {
8376
8383
  [Symbol.toStringTag]: "PopsPanelTextArea",
@@ -8442,12 +8449,12 @@
8442
8449
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8443
8450
  }
8444
8451
  PopsSafeUtils.setSafeHTML($li,
8445
- /*html*/ `
8446
- <div class="pops-panel-item-left-text">
8447
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8448
- <div class="pops-panel-select">
8449
- <select></select>
8450
- </div>
8452
+ /*html*/ `
8453
+ <div class="pops-panel-item-left-text">
8454
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8455
+ <div class="pops-panel-select">
8456
+ <select></select>
8457
+ </div>
8451
8458
  `);
8452
8459
  const PopsPanelSelect = {
8453
8460
  [Symbol.toStringTag]: "PopsPanelSelect",
@@ -8639,30 +8646,30 @@
8639
8646
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8640
8647
  }
8641
8648
  PopsSafeUtils.setSafeHTML($li,
8642
- /*html*/ `
8643
- <div class="pops-panel-item-left-text">
8644
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8645
- <div class="pops-panel-select-multiple">
8646
- <div class="el-select__wrapper">
8647
- <div class="el-select__selection">
8648
- <!-- 这个是用于手动输入的,这里暂不适配 -->
8649
- <div class="el-select__selected-item el-select__input-wrapper">
8650
-
8651
- </div>
8652
- <!-- 这个是placeholder -->
8653
- <div class="el-select__selected-item el-select__placeholder">
8654
- </div>
8655
- </div>
8656
- <!-- 下拉箭头 -->
8657
- <div class="el-select__suffix">
8658
- <i class="el-icon el-select__caret el-select__icon">
8659
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
8660
- <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>
8661
- </svg>
8662
- </i>
8663
- </div>
8664
- </div>
8665
- </div>
8649
+ /*html*/ `
8650
+ <div class="pops-panel-item-left-text">
8651
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
8652
+ <div class="pops-panel-select-multiple">
8653
+ <div class="el-select__wrapper">
8654
+ <div class="el-select__selection">
8655
+ <!-- 这个是用于手动输入的,这里暂不适配 -->
8656
+ <div class="el-select__selected-item el-select__input-wrapper">
8657
+
8658
+ </div>
8659
+ <!-- 这个是placeholder -->
8660
+ <div class="el-select__selected-item el-select__placeholder">
8661
+ </div>
8662
+ </div>
8663
+ <!-- 下拉箭头 -->
8664
+ <div class="el-select__suffix">
8665
+ <i class="el-icon el-select__caret el-select__icon">
8666
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
8667
+ <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>
8668
+ </svg>
8669
+ </i>
8670
+ </div>
8671
+ </div>
8672
+ </div>
8666
8673
  `);
8667
8674
  const PopsPanelSelectMultiple = {
8668
8675
  [Symbol.toStringTag]: "PopsPanelSelectMultiple",
@@ -8772,18 +8779,18 @@
8772
8779
  createSelectedTagItem(data) {
8773
8780
  const $selectedItem = popsDOMUtils.createElement("div", {
8774
8781
  className: "el-select__selected-item el-select__choose_tag",
8775
- innerHTML: /*html*/ `
8776
- <span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
8777
- <span class="el-tag__content">
8778
- <span class="el-select__tags-text"></span>
8779
- </span>
8780
- <!-- 关闭tag的图标 -->
8781
- <i class="el-icon el-tag__close">
8782
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
8783
- <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>
8784
- </svg>
8785
- </i>
8786
- </span>
8782
+ innerHTML: /*html*/ `
8783
+ <span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
8784
+ <span class="el-tag__content">
8785
+ <span class="el-select__tags-text"></span>
8786
+ </span>
8787
+ <!-- 关闭tag的图标 -->
8788
+ <i class="el-icon el-tag__close">
8789
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
8790
+ <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>
8791
+ </svg>
8792
+ </i>
8793
+ </span>
8787
8794
  `,
8788
8795
  });
8789
8796
  /** 标签 */
@@ -8992,8 +8999,8 @@
8992
8999
  createSelectItemElement(data) {
8993
9000
  const $select = popsDOMUtils.createElement("li", {
8994
9001
  className: "select-item",
8995
- innerHTML: /*html*/ `
8996
- <span class="select-item-text"></span>
9002
+ innerHTML: /*html*/ `
9003
+ <span class="select-item-text"></span>
8997
9004
  `,
8998
9005
  });
8999
9006
  this.setSelectItemText(data, $select);
@@ -9085,8 +9092,8 @@
9085
9092
  position: "center",
9086
9093
  },
9087
9094
  content: {
9088
- text: /*html*/ `
9089
- <ul class="select-container"></ul>
9095
+ text: /*html*/ `
9096
+ <ul class="select-container"></ul>
9090
9097
  `,
9091
9098
  html: true,
9092
9099
  },
@@ -9120,69 +9127,69 @@
9120
9127
  dragLimit: true,
9121
9128
  width: "300px",
9122
9129
  height: "300px",
9123
- style: /*css*/ `
9124
- .select-container{
9125
- --el-font-size-base: 14px;
9126
- --el-text-color-regular: #606266;
9127
- --el-color-primary: #409eff;
9128
- --el-fill-color-light: #f5f7fa;
9129
- --el-disable-color: #a8abb2;
9130
- }
9131
- .select-item{
9132
- cursor: pointer;
9133
- font-size: var(--el-font-size-base);
9134
- padding: 0 32px 0 20px;
9135
- position: relative;
9136
- white-space: nowrap;
9137
- overflow: hidden;
9138
- text-overflow: ellipsis;
9139
- color: var(--el-text-color-regular);
9140
- height: 34px;
9141
- line-height: 34px;
9142
- box-sizing: border-box;
9143
- }
9144
- .select-item[aria-disabled],
9145
- .select-item[disabled]{
9146
- cursor: not-allowed;
9147
- color: var(--el-disable-color);
9148
- background: unset;
9149
- }
9150
- .select-item:hover{
9151
- background-color: var(--el-fill-color-light);
9152
- }
9153
- .select-item.select-item-is-selected{
9154
- color: var(--el-color-primary);
9155
- font-weight: 700;
9156
- }
9157
- .select-item.select-item-is-selected::after{
9158
- content: "";
9159
- position: absolute;
9160
- top: 50%;
9161
- right: 20px;
9162
- border-top: none;
9163
- border-right: none;
9164
- background-repeat: no-repeat;
9165
- background-position: center;
9166
- background-color: var(--el-color-primary);
9167
- 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;
9168
- mask-size: 100% 100%;
9169
- -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;
9170
- -webkit-mask-size: 100% 100%;
9171
- transform: translateY(-50%);
9172
- width: 12px;
9173
- height: 12px;
9174
- }
9175
-
9176
-
9177
- @media (prefers-color-scheme: dark) {
9178
- .select-container{
9179
- --el-text-color-regular: #f2f2f2;
9180
- --el-disable-color: #8D9095;
9181
- --el-fill-color-light: #262727;
9182
- }
9183
- }
9184
-
9185
- ${style || ""}
9130
+ style: /*css*/ `
9131
+ .select-container{
9132
+ --el-font-size-base: 14px;
9133
+ --el-text-color-regular: #606266;
9134
+ --el-color-primary: #409eff;
9135
+ --el-fill-color-light: #f5f7fa;
9136
+ --el-disable-color: #a8abb2;
9137
+ }
9138
+ .select-item{
9139
+ cursor: pointer;
9140
+ font-size: var(--el-font-size-base);
9141
+ padding: 0 32px 0 20px;
9142
+ position: relative;
9143
+ white-space: nowrap;
9144
+ overflow: hidden;
9145
+ text-overflow: ellipsis;
9146
+ color: var(--el-text-color-regular);
9147
+ height: 34px;
9148
+ line-height: 34px;
9149
+ box-sizing: border-box;
9150
+ }
9151
+ .select-item[aria-disabled],
9152
+ .select-item[disabled]{
9153
+ cursor: not-allowed;
9154
+ color: var(--el-disable-color);
9155
+ background: unset;
9156
+ }
9157
+ .select-item:hover{
9158
+ background-color: var(--el-fill-color-light);
9159
+ }
9160
+ .select-item.select-item-is-selected{
9161
+ color: var(--el-color-primary);
9162
+ font-weight: 700;
9163
+ }
9164
+ .select-item.select-item-is-selected::after{
9165
+ content: "";
9166
+ position: absolute;
9167
+ top: 50%;
9168
+ right: 20px;
9169
+ border-top: none;
9170
+ border-right: none;
9171
+ background-repeat: no-repeat;
9172
+ background-position: center;
9173
+ background-color: var(--el-color-primary);
9174
+ 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;
9175
+ mask-size: 100% 100%;
9176
+ -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;
9177
+ -webkit-mask-size: 100% 100%;
9178
+ transform: translateY(-50%);
9179
+ width: 12px;
9180
+ height: 12px;
9181
+ }
9182
+
9183
+
9184
+ @media (prefers-color-scheme: dark) {
9185
+ .select-container{
9186
+ --el-text-color-regular: #f2f2f2;
9187
+ --el-disable-color: #8D9095;
9188
+ --el-fill-color-light: #262727;
9189
+ }
9190
+ }
9191
+
9192
+ ${style || ""}
9186
9193
  `,
9187
9194
  }, userConfirmDetails);
9188
9195
  const $dialog = PopsAlert.init(confirmDetails);
@@ -9331,15 +9338,15 @@
9331
9338
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
9332
9339
  }
9333
9340
  PopsSafeUtils.setSafeHTML($li,
9334
- /*html*/ `
9335
- <div class="pops-panel-item-left-text">
9336
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
9337
- <div class="pops-panel-button">
9338
- <button class="pops-panel-button_inner" type="button">
9339
- <i class="pops-bottom-icon"></i>
9340
- <span class="pops-panel-button-text"></span>
9341
- </button>
9342
- </div>
9341
+ /*html*/ `
9342
+ <div class="pops-panel-item-left-text">
9343
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
9344
+ <div class="pops-panel-button">
9345
+ <button class="pops-panel-button_inner" type="button">
9346
+ <i class="pops-bottom-icon"></i>
9347
+ <span class="pops-panel-button-text"></span>
9348
+ </button>
9349
+ </div>
9343
9350
  `);
9344
9351
  const PopsPanelButton = {
9345
9352
  [Symbol.toStringTag]: "PopsPanelButton",
@@ -9494,10 +9501,10 @@
9494
9501
  rightText = /*html*/ `<p class="pops-panel-item-right-text">${formConfig.rightText}</p>`;
9495
9502
  }
9496
9503
  PopsSafeUtils.setSafeHTML($li,
9497
- /*html*/ `
9498
- <div class="pops-panel-item-left-text">
9499
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
9500
- <div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
9504
+ /*html*/ `
9505
+ <div class="pops-panel-item-left-text">
9506
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
9507
+ <div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
9501
9508
  `);
9502
9509
  const PopsPanelDeepMenu = {
9503
9510
  [Symbol.toStringTag]: "PopsPanelDeepMenu",
@@ -9533,13 +9540,13 @@
9533
9540
  /* 添加第一个 */
9534
9541
  /* 加进容器内 */
9535
9542
  PopsSafeUtils.setSafeHTML(formHeaderDivElement,
9536
- /*html*/ `
9537
- <p>${formConfig_forms.text}</p>
9538
- <i class="pops-panel-forms-fold-container-icon">
9539
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9540
- <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>
9541
- </svg>
9542
- </i>
9543
+ /*html*/ `
9544
+ <p>${formConfig_forms.text}</p>
9545
+ <i class="pops-panel-forms-fold-container-icon">
9546
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9547
+ <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>
9548
+ </svg>
9549
+ </i>
9543
9550
  `);
9544
9551
  // 添加点击事件
9545
9552
  popsDOMUtils.on(formHeaderDivElement, "click", () => {
@@ -9808,13 +9815,13 @@
9808
9815
  if (formConfig_forms.isFold) {
9809
9816
  /* 加进容器内 */
9810
9817
  PopsSafeUtils.setSafeHTML(formHeaderDivElement,
9811
- /*html*/ `
9812
- <p>${formConfig_forms.text}</p>
9813
- <i class="pops-panel-forms-fold-container-icon">
9814
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9815
- <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>
9816
- </svg>
9817
- </i>
9818
+ /*html*/ `
9819
+ <p>${formConfig_forms.text}</p>
9820
+ <i class="pops-panel-forms-fold-container-icon">
9821
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9822
+ <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>
9823
+ </svg>
9824
+ </i>
9818
9825
  `);
9819
9826
  // 添加点击事件
9820
9827
  popsDOMUtils.on(formHeaderDivElement, "click", () => {
@@ -9988,21 +9995,21 @@
9988
9995
  const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
9989
9996
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
9990
9997
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
9991
- /*html*/ `
9998
+ /*html*/ `
9992
9999
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
9993
10000
  ? config.title.text
9994
- : `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
9995
- <div class="pops-content pops-${popsType}-content">
9996
- <aside class="pops-${popsType}-aside">
9997
- <ul class="pops-${popsType}-aside-top-container"></ul>
9998
- <ul class="pops-${popsType}-aside-bottom-container"></ul>
9999
- </aside>
10000
- <div class="pops-${popsType}-section-wrapper">
10001
- <section class="pops-${popsType}-container">
10002
- <ul class="pops-${popsType}-container-header-ul"></ul>
10003
- <ul class="pops-${popsType}-container-main-ul"></ul>
10004
- </section>
10005
- </div>
10001
+ : `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
10002
+ <div class="pops-content pops-${popsType}-content">
10003
+ <aside class="pops-${popsType}-aside">
10004
+ <ul class="pops-${popsType}-aside-top-container"></ul>
10005
+ <ul class="pops-${popsType}-aside-bottom-container"></ul>
10006
+ </aside>
10007
+ <div class="pops-${popsType}-section-wrapper">
10008
+ <section class="pops-${popsType}-container">
10009
+ <ul class="pops-${popsType}-container-header-ul"></ul>
10010
+ <ul class="pops-${popsType}-container-main-ul"></ul>
10011
+ </section>
10012
+ </div>
10006
10013
  </div>`, "", zIndex);
10007
10014
  /**
10008
10015
  * 弹窗的主元素,包括动画层
@@ -10232,10 +10239,10 @@
10232
10239
  const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
10233
10240
  const { contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
10234
10241
  const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
10235
- /*html*/ `
10242
+ /*html*/ `
10236
10243
  <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
10237
10244
  ? config.title.text
10238
- : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
10245
+ : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
10239
10246
  <div class="pops-content pops-${popsType}-content" style="${contentPStyle}">${config.content.row
10240
10247
  ? '<textarea name="pops-input-text" pops="" placeholder="' +
10241
10248
  config.content.placeholder +
@@ -11109,108 +11116,108 @@
11109
11116
  createSearchSelectElement() {
11110
11117
  const $el = popsDOMUtils.createElement("div", {
11111
11118
  className: `pops pops-${popsType}-search-suggestion`,
11112
- innerHTML: /*html*/ `
11113
- <style type="text/css">
11114
- .pops-${popsType}-animation{
11115
- -moz-animation: searchSelectFalIn 0.5s 1 linear;
11116
- -webkit-animation: searchSelectFalIn 0.5s 1 linear;
11117
- -o-animation: searchSelectFalIn 0.5s 1 linear;
11118
- -ms-animation: searchSelectFalIn 0.5s 1 linear;
11119
- }
11120
- </style>
11121
- <style type="text/css">
11122
- .pops-${popsType}-search-suggestion-arrow{
11123
- --suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
11124
- --suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
11125
- --suggestion-arrow--after-color: rgb(78, 78, 78);
11126
- --suggestion-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
11127
- --suggestion-arrow--after-width: 10px;
11128
- --suggestion-arrow--after-height: 10px;
11129
- }
11130
- .pops-${popsType}-search-suggestion-arrow{
11131
- position: absolute;
11132
- top: 100%;
11133
- left: 50%;
11134
- overflow: hidden;
11135
- width: 100%;
11136
- height: 12.5px;
11137
- transform: translateX(-50%);
11138
- }
11139
- .pops-${popsType}-search-suggestion-arrow::after{
11140
- position: absolute;
11141
- top: 0;
11142
- left: 50%;
11143
- width: var(--suggestion-arrow--after-width);
11144
- height: var(--suggestion-arrow--after-height);
11145
- background: var(--suggestion-arrow--after-bg-color);
11146
- color: var(--suggestion-arrow--after-color);
11147
- box-shadow:
11148
- 0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
11149
- 0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
11150
- content: "";
11151
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
11152
- }
11153
- .pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow{
11154
- position: absolute;
11155
- top: 100%;
11156
- left: 50%;
11157
- overflow: hidden;
11158
- width: 100%;
11159
- height: 12.5px;
11160
- transform: translateX(-50%);
11161
- }
11162
- .pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow::after{
11163
- position: absolute;
11164
- top: 0;
11165
- left: 50%;
11166
- width: var(--suggestion-arrow--after-width);
11167
- height: var(--suggestion-arrow--after-height);
11168
- background: var(--suggestion-arrow--after-bg-color);
11169
- box-shadow:
11170
- 0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
11171
- 0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
11172
- content: "";
11173
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
11174
- }
11175
- .pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow{
11176
- top: -12.5px;
11177
- left: 50%;
11178
- transform: translateX(-50%);
11179
- }
11180
- .pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow::after{
11181
- position: absolute;
11182
- top: 100%;
11183
- left: 50%;
11184
- content: "";
11185
- }
11186
- </style>
11187
- <style type="text/css" data-dynamic="true">
11188
- ${SearchSuggestion.getDynamicCSS()}
11189
- </style>
11190
- <style>
11191
- .el-zoom-in-top-animation{
11192
- --el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
11193
- opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
11194
- transition: var(--el-transition-md-fade);
11195
- transform-origin: center top;
11196
- }
11197
- .el-zoom-in-top-animation[data-popper-placement^="top"] {
11198
- transform-origin: center bottom;
11199
- }
11200
- .el-zoom-in-top-animation-hide{
11201
- opacity: 0;
11202
- transform: scaleY(0);
11203
- }
11204
- .el-zoom-in-top-animation-show{
11205
- opacity: 1;
11206
- transform: scaleY(1);
11207
- }
11208
- </style>
11209
- <style type="text/css" data-user-css>
11210
- ${config.style || ""}
11211
- </style>
11212
- <ul class="pops-${popsType}-search-suggestion-hint ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
11213
- ${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
11119
+ innerHTML: /*html*/ `
11120
+ <style type="text/css">
11121
+ .pops-${popsType}-animation{
11122
+ -moz-animation: searchSelectFalIn 0.5s 1 linear;
11123
+ -webkit-animation: searchSelectFalIn 0.5s 1 linear;
11124
+ -o-animation: searchSelectFalIn 0.5s 1 linear;
11125
+ -ms-animation: searchSelectFalIn 0.5s 1 linear;
11126
+ }
11127
+ </style>
11128
+ <style type="text/css">
11129
+ .pops-${popsType}-search-suggestion-arrow{
11130
+ --suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
11131
+ --suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
11132
+ --suggestion-arrow--after-color: rgb(78, 78, 78);
11133
+ --suggestion-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
11134
+ --suggestion-arrow--after-width: 10px;
11135
+ --suggestion-arrow--after-height: 10px;
11136
+ }
11137
+ .pops-${popsType}-search-suggestion-arrow{
11138
+ position: absolute;
11139
+ top: 100%;
11140
+ left: 50%;
11141
+ overflow: hidden;
11142
+ width: 100%;
11143
+ height: 12.5px;
11144
+ transform: translateX(-50%);
11145
+ }
11146
+ .pops-${popsType}-search-suggestion-arrow::after{
11147
+ position: absolute;
11148
+ top: 0;
11149
+ left: 50%;
11150
+ width: var(--suggestion-arrow--after-width);
11151
+ height: var(--suggestion-arrow--after-height);
11152
+ background: var(--suggestion-arrow--after-bg-color);
11153
+ color: var(--suggestion-arrow--after-color);
11154
+ box-shadow:
11155
+ 0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
11156
+ 0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
11157
+ content: "";
11158
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
11159
+ }
11160
+ .pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow{
11161
+ position: absolute;
11162
+ top: 100%;
11163
+ left: 50%;
11164
+ overflow: hidden;
11165
+ width: 100%;
11166
+ height: 12.5px;
11167
+ transform: translateX(-50%);
11168
+ }
11169
+ .pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow::after{
11170
+ position: absolute;
11171
+ top: 0;
11172
+ left: 50%;
11173
+ width: var(--suggestion-arrow--after-width);
11174
+ height: var(--suggestion-arrow--after-height);
11175
+ background: var(--suggestion-arrow--after-bg-color);
11176
+ box-shadow:
11177
+ 0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
11178
+ 0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
11179
+ content: "";
11180
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
11181
+ }
11182
+ .pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow{
11183
+ top: -12.5px;
11184
+ left: 50%;
11185
+ transform: translateX(-50%);
11186
+ }
11187
+ .pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow::after{
11188
+ position: absolute;
11189
+ top: 100%;
11190
+ left: 50%;
11191
+ content: "";
11192
+ }
11193
+ </style>
11194
+ <style type="text/css" data-dynamic="true">
11195
+ ${SearchSuggestion.getDynamicCSS()}
11196
+ </style>
11197
+ <style>
11198
+ .el-zoom-in-top-animation{
11199
+ --el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
11200
+ opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
11201
+ transition: var(--el-transition-md-fade);
11202
+ transform-origin: center top;
11203
+ }
11204
+ .el-zoom-in-top-animation[data-popper-placement^="top"] {
11205
+ transform-origin: center bottom;
11206
+ }
11207
+ .el-zoom-in-top-animation-hide{
11208
+ opacity: 0;
11209
+ transform: scaleY(0);
11210
+ }
11211
+ .el-zoom-in-top-animation-show{
11212
+ opacity: 1;
11213
+ transform: scaleY(1);
11214
+ }
11215
+ </style>
11216
+ <style type="text/css" data-user-css>
11217
+ ${config.style || ""}
11218
+ </style>
11219
+ <ul class="pops-${popsType}-search-suggestion-hint ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
11220
+ ${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
11214
11221
  `,
11215
11222
  }, {
11216
11223
  "data-guid": guid,
@@ -11231,67 +11238,67 @@
11231
11238
  * 动态获取CSS
11232
11239
  */
11233
11240
  getDynamicCSS() {
11234
- return /*css*/ `
11235
- .pops-${popsType}-search-suggestion{
11236
- --search-suggestion-bg-color: #ffffff;
11237
- --search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
11238
- --search-suggestion-item-color: #515a6e;
11239
- --search-suggestion-item-none-color: #8e8e8e;
11240
- --search-suggestion-item-is-hover-bg-color: #f5f7fa;
11241
- --search-suggestion-item-is-select-bg-color: #409eff;
11242
- }
11243
- .pops-${popsType}-search-suggestion{
11244
- border: initial;
11245
- overflow: initial;
11246
- position: ${config.isAbsolute ? "absolute" : "fixed"};
11247
- z-index: ${PopsHandler.handleZIndex(config.zIndex)};
11248
- }
11249
- ul.pops-${popsType}-search-suggestion-hint{
11250
- max-height: ${config.maxHeight};
11251
- overflow-x: hidden;
11252
- overflow-y: auto;
11253
- padding: 5px 0;
11254
- background-color: var(--search-suggestion-bg-color);
11255
- box-sizing: border-box;
11256
- border-radius: 4px;
11257
- box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
11258
- }
11259
- /* 建议框在上面时 */
11260
- .pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint{
11261
- display: flex;
11262
- flex-direction: column-reverse;
11263
- }
11264
- .pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint li{
11265
- flex-shrink: 0;
11266
- }
11267
- ul.pops-${popsType}-search-suggestion-hint li{
11268
- padding: 7px;
11269
- margin: 0;
11270
- clear: both;
11271
- color: var(--search-suggestion-item-color);
11272
- font-size: 14px;
11273
- list-style: none;
11274
- cursor: pointer;
11275
- transition: background .2s ease-in-out;
11276
- overflow: hidden;
11277
- text-overflow: ellipsis;
11278
- width: 100%;
11279
- }
11280
- ul.pops-${popsType}-search-suggestion-hint li[data-none]{
11281
- text-align: center;
11282
- font-size: 12px;
11283
- color: var(--search-suggestion-item-none-color);
11284
- }
11285
- ul.pops-${popsType}-search-suggestion-hint li:not([data-none]):hover{
11286
- background-color: var(--search-suggestion-item-is-hover-bg-color);
11287
- }
11288
- @media (prefers-color-scheme: dark){
11289
- .pops-${popsType}-search-suggestion{
11290
- --search-suggestion-bg-color: #1d1e1f;
11291
- --search-suggestion-item-color: #cfd3d4;
11292
- --search-suggestion-item-is-hover-bg-color: rgba(175, 175, 175, .1);
11293
- }
11294
- }
11241
+ return /*css*/ `
11242
+ .pops-${popsType}-search-suggestion{
11243
+ --search-suggestion-bg-color: #ffffff;
11244
+ --search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
11245
+ --search-suggestion-item-color: #515a6e;
11246
+ --search-suggestion-item-none-color: #8e8e8e;
11247
+ --search-suggestion-item-is-hover-bg-color: #f5f7fa;
11248
+ --search-suggestion-item-is-select-bg-color: #409eff;
11249
+ }
11250
+ .pops-${popsType}-search-suggestion{
11251
+ border: initial;
11252
+ overflow: initial;
11253
+ position: ${config.isAbsolute ? "absolute" : "fixed"};
11254
+ z-index: ${PopsHandler.handleZIndex(config.zIndex)};
11255
+ }
11256
+ ul.pops-${popsType}-search-suggestion-hint{
11257
+ max-height: ${config.maxHeight};
11258
+ overflow-x: hidden;
11259
+ overflow-y: auto;
11260
+ padding: 5px 0;
11261
+ background-color: var(--search-suggestion-bg-color);
11262
+ box-sizing: border-box;
11263
+ border-radius: 4px;
11264
+ box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
11265
+ }
11266
+ /* 建议框在上面时 */
11267
+ .pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint{
11268
+ display: flex;
11269
+ flex-direction: column-reverse;
11270
+ }
11271
+ .pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint li{
11272
+ flex-shrink: 0;
11273
+ }
11274
+ ul.pops-${popsType}-search-suggestion-hint li{
11275
+ padding: 7px;
11276
+ margin: 0;
11277
+ clear: both;
11278
+ color: var(--search-suggestion-item-color);
11279
+ font-size: 14px;
11280
+ list-style: none;
11281
+ cursor: pointer;
11282
+ transition: background .2s ease-in-out;
11283
+ overflow: hidden;
11284
+ text-overflow: ellipsis;
11285
+ width: 100%;
11286
+ }
11287
+ ul.pops-${popsType}-search-suggestion-hint li[data-none]{
11288
+ text-align: center;
11289
+ font-size: 12px;
11290
+ color: var(--search-suggestion-item-none-color);
11291
+ }
11292
+ ul.pops-${popsType}-search-suggestion-hint li:not([data-none]):hover{
11293
+ background-color: var(--search-suggestion-item-is-hover-bg-color);
11294
+ }
11295
+ @media (prefers-color-scheme: dark){
11296
+ .pops-${popsType}-search-suggestion{
11297
+ --search-suggestion-bg-color: #1d1e1f;
11298
+ --search-suggestion-item-color: #cfd3d4;
11299
+ --search-suggestion-item-is-hover-bg-color: rgba(175, 175, 175, .1);
11300
+ }
11301
+ }
11295
11302
  `;
11296
11303
  },
11297
11304
  /**
@@ -11558,11 +11565,11 @@
11558
11565
  * 获取删除按钮的html
11559
11566
  */
11560
11567
  createItemDeleteIcon(size = 16, fill = "#bababa") {
11561
- const $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
11562
- <svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
11563
- <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>
11564
- <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>
11565
- </svg>
11568
+ const $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
11569
+ <svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
11570
+ <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>
11571
+ <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>
11572
+ </svg>
11566
11573
  `);
11567
11574
  return $svg;
11568
11575
  },
@@ -11793,7 +11800,7 @@
11793
11800
  },
11794
11801
  };
11795
11802
 
11796
- const version = "2.4.6";
11803
+ const version = "2.4.7";
11797
11804
 
11798
11805
  class Pops {
11799
11806
  /** 配置 */