@whitesev/pops 3.2.1 → 3.3.0

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 (127) hide show
  1. package/README.md +249 -249
  2. package/dist/index.amd.js +736 -948
  3. package/dist/index.amd.js.map +1 -1
  4. package/dist/index.amd.min.js +1 -1
  5. package/dist/index.amd.min.js.map +1 -1
  6. package/dist/index.cjs.js +736 -948
  7. package/dist/index.cjs.js.map +1 -1
  8. package/dist/index.cjs.min.js +1 -1
  9. package/dist/index.cjs.min.js.map +1 -1
  10. package/dist/index.esm.js +736 -948
  11. package/dist/index.esm.js.map +1 -1
  12. package/dist/index.esm.min.js +1 -1
  13. package/dist/index.esm.min.js.map +1 -1
  14. package/dist/index.iife.js +736 -948
  15. package/dist/index.iife.js.map +1 -1
  16. package/dist/index.iife.min.js +1 -1
  17. package/dist/index.iife.min.js.map +1 -1
  18. package/dist/index.system.js +736 -948
  19. package/dist/index.system.js.map +1 -1
  20. package/dist/index.system.min.js +1 -1
  21. package/dist/index.system.min.js.map +1 -1
  22. package/dist/index.umd.js +736 -948
  23. package/dist/index.umd.js.map +1 -1
  24. package/dist/index.umd.min.js +1 -1
  25. package/dist/index.umd.min.js.map +1 -1
  26. package/dist/types/src/PopsCore.d.ts +15 -7
  27. package/dist/types/src/components/folder/types/index.d.ts +43 -13
  28. package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +313 -313
  29. package/dist/types/src/types/animation.d.ts +19 -19
  30. package/dist/types/src/types/button.d.ts +94 -94
  31. package/dist/types/src/types/components.d.ts +211 -211
  32. package/dist/types/src/types/event.d.ts +43 -43
  33. package/dist/types/src/types/global.d.ts +31 -31
  34. package/dist/types/src/types/icon.d.ts +32 -32
  35. package/dist/types/src/types/inst.d.ts +28 -28
  36. package/dist/types/src/types/main.d.ts +66 -66
  37. package/dist/types/src/types/mask.d.ts +52 -52
  38. package/dist/types/src/types/position.d.ts +60 -60
  39. package/package.json +28 -27
  40. package/src/Pops.ts +206 -206
  41. package/src/PopsAnimation.ts +32 -32
  42. package/src/PopsCSS.ts +54 -54
  43. package/src/PopsCore.ts +53 -37
  44. package/src/PopsIcon.ts +95 -95
  45. package/src/PopsInst.ts +21 -21
  46. package/src/components/alert/defaultConfig.ts +62 -62
  47. package/src/components/alert/index.ts +163 -163
  48. package/src/components/alert/types/index.ts +23 -23
  49. package/src/components/confirm/defaultConfig.ts +90 -90
  50. package/src/components/confirm/index.ts +165 -165
  51. package/src/components/confirm/types/index.ts +13 -17
  52. package/src/components/drawer/defaultConfig.ts +89 -89
  53. package/src/components/drawer/index.css +37 -37
  54. package/src/components/drawer/index.ts +245 -245
  55. package/src/components/drawer/types/index.ts +62 -61
  56. package/src/components/folder/defaultConfig.ts +151 -151
  57. package/src/components/folder/folderIcon.ts +28 -28
  58. package/src/components/folder/index.css +303 -303
  59. package/src/components/folder/index.ts +953 -932
  60. package/src/components/folder/types/index.ts +143 -110
  61. package/src/components/iframe/defaultConfig.ts +60 -60
  62. package/src/components/iframe/index.css +76 -76
  63. package/src/components/iframe/index.ts +331 -331
  64. package/src/components/iframe/types/index.ts +96 -96
  65. package/src/components/loading/defaultConfig.ts +29 -29
  66. package/src/components/loading/index.css +66 -66
  67. package/src/components/loading/index.ts +101 -101
  68. package/src/components/loading/types/index.ts +36 -34
  69. package/src/components/panel/css/components-select.css +84 -84
  70. package/src/components/panel/defaultConfig.ts +868 -868
  71. package/src/components/panel/handlerComponents.ts +3993 -3993
  72. package/src/components/panel/index.css +1403 -1403
  73. package/src/components/panel/index.ts +221 -221
  74. package/src/components/panel/types/components-button.ts +56 -56
  75. package/src/components/panel/types/components-common.ts +73 -73
  76. package/src/components/panel/types/components-container.ts +25 -25
  77. package/src/components/panel/types/components-deepMenu.ts +64 -64
  78. package/src/components/panel/types/components-input.ts +90 -90
  79. package/src/components/panel/types/components-own.ts +16 -16
  80. package/src/components/panel/types/components-select.ts +169 -169
  81. package/src/components/panel/types/components-selectMultiple.ts +105 -104
  82. package/src/components/panel/types/components-slider.ts +55 -55
  83. package/src/components/panel/types/components-switch.ts +33 -33
  84. package/src/components/panel/types/components-textarea.ts +45 -45
  85. package/src/components/panel/types/index.ts +244 -244
  86. package/src/components/prompt/defaultConfig.ts +94 -94
  87. package/src/components/prompt/index.css +34 -34
  88. package/src/components/prompt/index.ts +187 -215
  89. package/src/components/prompt/types/index.ts +57 -56
  90. package/src/components/rightClickMenu/defaultConfig.ts +103 -103
  91. package/src/components/rightClickMenu/index.css +115 -115
  92. package/src/components/rightClickMenu/index.ts +662 -662
  93. package/src/components/rightClickMenu/types/index.ts +145 -143
  94. package/src/components/searchSuggestion/defaultConfig.ts +63 -63
  95. package/src/components/searchSuggestion/index.ts +813 -813
  96. package/src/components/searchSuggestion/types/index.ts +244 -242
  97. package/src/components/tooltip/defaultConfig.ts +33 -33
  98. package/src/components/tooltip/index.css +199 -199
  99. package/src/components/tooltip/index.ts +617 -617
  100. package/src/components/tooltip/types/index.ts +123 -121
  101. package/src/config/CommonCSSClassName.ts +17 -17
  102. package/src/config/GlobalConfig.ts +63 -63
  103. package/src/css/animation.css +987 -987
  104. package/src/css/button.css +551 -551
  105. package/src/css/common.css +54 -54
  106. package/src/css/index.css +253 -253
  107. package/src/css/ninePalaceGridPosition.css +50 -50
  108. package/src/css/scrollbar.css +22 -22
  109. package/src/handler/PopsElementHandler.ts +303 -303
  110. package/src/handler/PopsHandler.ts +611 -611
  111. package/src/types/PopsDOMUtilsEventType.d.ts +313 -313
  112. package/src/types/animation.d.ts +19 -19
  113. package/src/types/button.d.ts +94 -94
  114. package/src/types/components.d.ts +211 -211
  115. package/src/types/event.d.ts +43 -43
  116. package/src/types/global.d.ts +31 -31
  117. package/src/types/icon.d.ts +32 -32
  118. package/src/types/inst.d.ts +28 -28
  119. package/src/types/main.d.ts +66 -66
  120. package/src/types/mask.d.ts +52 -52
  121. package/src/types/position.d.ts +60 -60
  122. package/src/utils/PopsDOMUtils.ts +2483 -2483
  123. package/src/utils/PopsDOMUtilsEventsConfig.ts +4 -4
  124. package/src/utils/PopsInstanceUtils.ts +714 -714
  125. package/src/utils/PopsMathUtils.ts +71 -71
  126. package/src/utils/PopsSafeUtils.ts +22 -22
  127. package/src/utils/PopsUtils.ts +391 -421
package/src/components/tooltip/index.css CHANGED
@@ -1,199 +1,199 @@
1
- .pops-tip {
2
- --pops-bg-opacity: 1;
3
- --tooltip-color: #4e4e4e;
4
- --tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
5
- --tooltip-bd-radius: 2px;
6
- --tooltip-box-shadow-left-color: rgba(0, 0, 0, 0.24);
7
- --tooltip-box-shadow-right-color: rgba(0, 0, 0, 0.12);
8
- --tooltip-font-size: 14px;
9
- --tooltip-padding-top: 13px;
10
- --tooltip-padding-right: 13px;
11
- --tooltip-padding-bottom: 13px;
12
- --tooltip-padding-left: 13px;
13
-
14
- --tooltip-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
15
- --tooltip-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
16
- --tooltip-arrow--after-color: rgb(78, 78, 78);
17
- --tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
18
- --tooltip-arrow--after-width: 12px;
19
- --tooltip-arrow--after-height: 12px;
20
- }
21
- .pops-tip {
22
- padding: var(--tooltip-padding-top) var(--tooltip-padding-right) var(--tooltip-padding-bottom)
23
- var(--tooltip-padding-left);
24
- max-width: 400px;
25
- max-height: 300px;
26
- border-radius: var(--tooltip-bd-radius);
27
- background-color: var(--tooltip-bg-color);
28
- box-shadow:
29
- 0 1.5px 4px var(--tooltip-box-shadow-left-color),
30
- 0 1.5px 6px var(--tooltip-box-shadow-right-color);
31
- color: var(--tooltip-color);
32
- font-size: var(--tooltip-font-size);
33
- }
34
- .pops-tip[data-position="absolute"] {
35
- position: absolute;
36
- }
37
- .pops-tip[data-position="fixed"] {
38
- position: fixed;
39
- }
40
-
41
- .pops-tip .pops-tip-arrow {
42
- position: absolute;
43
- top: 100%;
44
- left: 50%;
45
- overflow: hidden;
46
- width: 100%;
47
- height: 12.5px;
48
- transform: translateX(-50%);
49
- }
50
-
51
- .pops-tip .pops-tip-arrow::after {
52
- position: absolute;
53
- top: 0;
54
- left: 50%;
55
- width: var(--tooltip-arrow--after-width);
56
- height: var(--tooltip-arrow--after-height);
57
- background: var(--tooltip-arrow--after-bg-color);
58
- color: var(--tooltip-arrow--after-color);
59
- box-shadow:
60
- 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),
61
- 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);
62
- content: "";
63
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
64
- }
65
-
66
- .pops-tip .pops-tip-arrow[data-position="bottom"] {
67
- position: absolute;
68
- top: 100%;
69
- left: 50%;
70
- overflow: hidden;
71
- width: 100%;
72
- height: 12.5px;
73
- transform: translateX(-50%);
74
- }
75
-
76
- .pops-tip .pops-tip-arrow[data-position="bottom"]:after {
77
- position: absolute;
78
- top: 0;
79
- left: 50%;
80
- width: var(--tooltip-arrow--after-width);
81
- height: var(--tooltip-arrow--after-height);
82
- background: var(--tooltip-arrow--after-bg-color);
83
- box-shadow:
84
- 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),
85
- 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);
86
- content: "";
87
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
88
- }
89
-
90
- .pops-tip .pops-tip-arrow[data-position="left"] {
91
- top: 50%;
92
- left: -12.5px;
93
- width: 12.5px;
94
- height: 50px;
95
- transform: translateY(-50%);
96
- }
97
-
98
- .pops-tip .pops-tip-arrow[data-position="left"]:after {
99
- position: absolute;
100
- top: 50%;
101
- left: 100%;
102
- content: "";
103
- }
104
-
105
- .pops-tip .pops-tip-arrow[data-position="right"] {
106
- top: 50%;
107
- right: -12.5px;
108
- left: auto;
109
- width: 12.5px;
110
- height: 50px;
111
- transform: translateY(-50%);
112
- }
113
-
114
- .pops-tip .pops-tip-arrow[data-position="right"]:after {
115
- position: absolute;
116
- top: 50%;
117
- left: 0;
118
- content: "";
119
- }
120
-
121
- .pops-tip .pops-tip-arrow[data-position="top"] {
122
- top: -12.5px;
123
- left: 50%;
124
- transform: translateX(-50%);
125
- }
126
-
127
- .pops-tip .pops-tip-arrow[data-position="top"]:after {
128
- position: absolute;
129
- top: 100%;
130
- left: 50%;
131
- content: "";
132
- }
133
-
134
- .pops-tip[data-motion] {
135
- -webkit-animation-duration: 0.25s;
136
- animation-duration: 0.25s;
137
- -webkit-animation-fill-mode: forwards;
138
- animation-fill-mode: forwards;
139
- }
140
- .pops-tip[data-motion="fadeOutRight"] {
141
- -webkit-animation-name: pops-motion-fadeOutRight;
142
- animation-name: pops-motion-fadeOutRight;
143
- }
144
- .pops-tip[data-motion="fadeInTop"] {
145
- -webkit-animation-name: pops-motion-fadeInTop;
146
- animation-name: pops-motion-fadeInTop;
147
- animation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);
148
- }
149
- .pops-tip[data-motion="fadeOutTop"] {
150
- -webkit-animation-name: pops-motion-fadeOutTop;
151
- animation-name: pops-motion-fadeOutTop;
152
- animation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);
153
- }
154
- .pops-tip[data-motion="fadeInBottom"] {
155
- -webkit-animation-name: pops-motion-fadeInBottom;
156
- animation-name: pops-motion-fadeInBottom;
157
- }
158
- .pops-tip[data-motion="fadeOutBottom"] {
159
- -webkit-animation-name: pops-motion-fadeOutBottom;
160
- animation-name: pops-motion-fadeOutBottom;
161
- }
162
- .pops-tip[data-motion="fadeInLeft"] {
163
- -webkit-animation-name: pops-motion-fadeInLeft;
164
- animation-name: pops-motion-fadeInLeft;
165
- }
166
- .pops-tip[data-motion="fadeOutLeft"] {
167
- -webkit-animation-name: pops-motion-fadeOutLeft;
168
- animation-name: pops-motion-fadeOutLeft;
169
- }
170
- .pops-tip[data-motion="fadeInRight"] {
171
- -webkit-animation-name: pops-motion-fadeInRight;
172
- animation-name: pops-motion-fadeInRight;
173
- }
174
-
175
- /* github的样式 */
176
- .pops-tip.github-tooltip {
177
- --tooltip-bg-opacity: 1;
178
- --tooltip-color: #ffffff;
179
- --tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
180
- --tooltip-bd-radius: 6px;
181
- --tooltip-padding-top: 6px;
182
- --tooltip-padding-right: 8px;
183
- --tooltip-padding-bottom: 6px;
184
- --tooltip-padding-left: 8px;
185
-
186
- --tooltip-arrow--after-color: rgb(255, 255, 255);
187
- --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
188
- --tooltip-arrow--after-width: 8px;
189
- --tooltip-arrow--after-height: 8px;
190
- }
191
-
192
- @media (prefers-color-scheme: dark) {
193
- .pops-tip {
194
- --tooltip-color: #ffffff;
195
- --tooltip-bg-color: #fafafa;
196
- --tooltip-arrow--after-color: #fafafa;
197
- --tooltip-arrow--after-bg-color: rgb(250, 250, 250, var(--pops-bg-opacity));
198
- }
199
- }
1
+ .pops-tip {
2
+ --pops-bg-opacity: 1;
3
+ --tooltip-color: #4e4e4e;
4
+ --tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
5
+ --tooltip-bd-radius: 2px;
6
+ --tooltip-box-shadow-left-color: rgba(0, 0, 0, 0.24);
7
+ --tooltip-box-shadow-right-color: rgba(0, 0, 0, 0.12);
8
+ --tooltip-font-size: 14px;
9
+ --tooltip-padding-top: 13px;
10
+ --tooltip-padding-right: 13px;
11
+ --tooltip-padding-bottom: 13px;
12
+ --tooltip-padding-left: 13px;
13
+
14
+ --tooltip-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
15
+ --tooltip-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
16
+ --tooltip-arrow--after-color: rgb(78, 78, 78);
17
+ --tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
18
+ --tooltip-arrow--after-width: 12px;
19
+ --tooltip-arrow--after-height: 12px;
20
+ }
21
+ .pops-tip {
22
+ padding: var(--tooltip-padding-top) var(--tooltip-padding-right) var(--tooltip-padding-bottom)
23
+ var(--tooltip-padding-left);
24
+ max-width: 400px;
25
+ max-height: 300px;
26
+ border-radius: var(--tooltip-bd-radius);
27
+ background-color: var(--tooltip-bg-color);
28
+ box-shadow:
29
+ 0 1.5px 4px var(--tooltip-box-shadow-left-color),
30
+ 0 1.5px 6px var(--tooltip-box-shadow-right-color);
31
+ color: var(--tooltip-color);
32
+ font-size: var(--tooltip-font-size);
33
+ }
34
+ .pops-tip[data-position="absolute"] {
35
+ position: absolute;
36
+ }
37
+ .pops-tip[data-position="fixed"] {
38
+ position: fixed;
39
+ }
40
+
41
+ .pops-tip .pops-tip-arrow {
42
+ position: absolute;
43
+ top: 100%;
44
+ left: 50%;
45
+ overflow: hidden;
46
+ width: 100%;
47
+ height: 12.5px;
48
+ transform: translateX(-50%);
49
+ }
50
+
51
+ .pops-tip .pops-tip-arrow::after {
52
+ position: absolute;
53
+ top: 0;
54
+ left: 50%;
55
+ width: var(--tooltip-arrow--after-width);
56
+ height: var(--tooltip-arrow--after-height);
57
+ background: var(--tooltip-arrow--after-bg-color);
58
+ color: var(--tooltip-arrow--after-color);
59
+ box-shadow:
60
+ 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),
61
+ 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);
62
+ content: "";
63
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
64
+ }
65
+
66
+ .pops-tip .pops-tip-arrow[data-position="bottom"] {
67
+ position: absolute;
68
+ top: 100%;
69
+ left: 50%;
70
+ overflow: hidden;
71
+ width: 100%;
72
+ height: 12.5px;
73
+ transform: translateX(-50%);
74
+ }
75
+
76
+ .pops-tip .pops-tip-arrow[data-position="bottom"]:after {
77
+ position: absolute;
78
+ top: 0;
79
+ left: 50%;
80
+ width: var(--tooltip-arrow--after-width);
81
+ height: var(--tooltip-arrow--after-height);
82
+ background: var(--tooltip-arrow--after-bg-color);
83
+ box-shadow:
84
+ 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),
85
+ 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);
86
+ content: "";
87
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
88
+ }
89
+
90
+ .pops-tip .pops-tip-arrow[data-position="left"] {
91
+ top: 50%;
92
+ left: -12.5px;
93
+ width: 12.5px;
94
+ height: 50px;
95
+ transform: translateY(-50%);
96
+ }
97
+
98
+ .pops-tip .pops-tip-arrow[data-position="left"]:after {
99
+ position: absolute;
100
+ top: 50%;
101
+ left: 100%;
102
+ content: "";
103
+ }
104
+
105
+ .pops-tip .pops-tip-arrow[data-position="right"] {
106
+ top: 50%;
107
+ right: -12.5px;
108
+ left: auto;
109
+ width: 12.5px;
110
+ height: 50px;
111
+ transform: translateY(-50%);
112
+ }
113
+
114
+ .pops-tip .pops-tip-arrow[data-position="right"]:after {
115
+ position: absolute;
116
+ top: 50%;
117
+ left: 0;
118
+ content: "";
119
+ }
120
+
121
+ .pops-tip .pops-tip-arrow[data-position="top"] {
122
+ top: -12.5px;
123
+ left: 50%;
124
+ transform: translateX(-50%);
125
+ }
126
+
127
+ .pops-tip .pops-tip-arrow[data-position="top"]:after {
128
+ position: absolute;
129
+ top: 100%;
130
+ left: 50%;
131
+ content: "";
132
+ }
133
+
134
+ .pops-tip[data-motion] {
135
+ -webkit-animation-duration: 0.25s;
136
+ animation-duration: 0.25s;
137
+ -webkit-animation-fill-mode: forwards;
138
+ animation-fill-mode: forwards;
139
+ }
140
+ .pops-tip[data-motion="fadeOutRight"] {
141
+ -webkit-animation-name: pops-motion-fadeOutRight;
142
+ animation-name: pops-motion-fadeOutRight;
143
+ }
144
+ .pops-tip[data-motion="fadeInTop"] {
145
+ -webkit-animation-name: pops-motion-fadeInTop;
146
+ animation-name: pops-motion-fadeInTop;
147
+ animation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);
148
+ }
149
+ .pops-tip[data-motion="fadeOutTop"] {
150
+ -webkit-animation-name: pops-motion-fadeOutTop;
151
+ animation-name: pops-motion-fadeOutTop;
152
+ animation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);
153
+ }
154
+ .pops-tip[data-motion="fadeInBottom"] {
155
+ -webkit-animation-name: pops-motion-fadeInBottom;
156
+ animation-name: pops-motion-fadeInBottom;
157
+ }
158
+ .pops-tip[data-motion="fadeOutBottom"] {
159
+ -webkit-animation-name: pops-motion-fadeOutBottom;
160
+ animation-name: pops-motion-fadeOutBottom;
161
+ }
162
+ .pops-tip[data-motion="fadeInLeft"] {
163
+ -webkit-animation-name: pops-motion-fadeInLeft;
164
+ animation-name: pops-motion-fadeInLeft;
165
+ }
166
+ .pops-tip[data-motion="fadeOutLeft"] {
167
+ -webkit-animation-name: pops-motion-fadeOutLeft;
168
+ animation-name: pops-motion-fadeOutLeft;
169
+ }
170
+ .pops-tip[data-motion="fadeInRight"] {
171
+ -webkit-animation-name: pops-motion-fadeInRight;
172
+ animation-name: pops-motion-fadeInRight;
173
+ }
174
+
175
+ /* github的样式 */
176
+ .pops-tip.github-tooltip {
177
+ --tooltip-bg-opacity: 1;
178
+ --tooltip-color: #ffffff;
179
+ --tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
180
+ --tooltip-bd-radius: 6px;
181
+ --tooltip-padding-top: 6px;
182
+ --tooltip-padding-right: 8px;
183
+ --tooltip-padding-bottom: 6px;
184
+ --tooltip-padding-left: 8px;
185
+
186
+ --tooltip-arrow--after-color: rgb(255, 255, 255);
187
+ --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
188
+ --tooltip-arrow--after-width: 8px;
189
+ --tooltip-arrow--after-height: 8px;
190
+ }
191
+
192
+ @media (prefers-color-scheme: dark) {
193
+ .pops-tip {
194
+ --tooltip-color: #ffffff;
195
+ --tooltip-bg-color: #fafafa;
196
+ --tooltip-arrow--after-color: #fafafa;
197
+ --tooltip-arrow--after-bg-color: rgb(250, 250, 250, var(--pops-bg-opacity));
198
+ }
199
+ }