@topvisor/ui 0.0.17 → 0.0.33

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 (86) hide show
  1. package/.chunks/datepicker-48f2fa8d.es.js +275 -0
  2. package/.chunks/datepicker-48f2fa8d.es.js.map +1 -0
  3. package/.chunks/datepicker-f94ba423.amd.js +234 -0
  4. package/.chunks/datepicker-f94ba423.amd.js.map +1 -0
  5. package/.chunks/forms-6c397f5a.es.js +935 -0
  6. package/.chunks/forms-6c397f5a.es.js.map +1 -0
  7. package/.chunks/forms-cab135c7.amd.js +3 -0
  8. package/.chunks/forms-cab135c7.amd.js.map +1 -0
  9. package/.chunks/popup-04c385e0.es.js +701 -0
  10. package/.chunks/popup-04c385e0.es.js.map +1 -0
  11. package/.chunks/popup-33f53a1c.amd.js +342 -0
  12. package/.chunks/popup-33f53a1c.amd.js.map +1 -0
  13. package/README.md +62 -62
  14. package/common/common.amd.js +1 -21
  15. package/common/common.amd.js.map +1 -1
  16. package/common/common.js +1 -20
  17. package/common/common.js.map +1 -1
  18. package/core/core.amd.js +1 -4
  19. package/core/core.amd.js.map +1 -1
  20. package/core/core.js +2 -3
  21. package/core/core.js.map +1 -1
  22. package/core.css +1 -648
  23. package/dark.css +1 -136
  24. package/forms/forms.amd.js +1 -12
  25. package/forms/forms.amd.js.map +1 -1
  26. package/forms/forms.js +11 -9
  27. package/forms/helpers.amd.js +1 -5
  28. package/forms/helpers.amd.js.map +1 -1
  29. package/forms/helpers.js +6 -3
  30. package/forms/helpers.js.map +1 -1
  31. package/forms.css +1 -505
  32. package/formsExt/formsExt.amd.js +3 -0
  33. package/formsExt/formsExt.amd.js.map +1 -0
  34. package/formsExt/formsExt.js +152 -0
  35. package/formsExt/formsExt.js.map +1 -0
  36. package/formsExt.css +1 -0
  37. package/icomoon/demo-files/demo.css +161 -161
  38. package/icomoon/demo-files/demo.js +30 -30
  39. package/icomoon/demo.html +2945 -2945
  40. package/icomoon/fonts/Topvisor-2.svg +232 -232
  41. package/icomoon/style.css +647 -647
  42. package/light.css +1 -136
  43. package/package.json +19 -19
  44. package/popup/popup.amd.js +2 -197
  45. package/popup/popup.amd.js.map +1 -1
  46. package/popup/popup.js +104 -158
  47. package/popup/popup.js.map +1 -1
  48. package/popup/worker.amd.js +1 -233
  49. package/popup/worker.amd.js.map +1 -1
  50. package/popup/worker.js +60 -143
  51. package/popup/worker.js.map +1 -1
  52. package/popup.css +1 -19
  53. package/tabs/tabs.amd.js +2 -122
  54. package/tabs/tabs.amd.js.map +1 -1
  55. package/tabs/tabs.js +63 -86
  56. package/tabs/tabs.js.map +1 -1
  57. package/tabs.css +1 -60
  58. package/utils/date.amd.js +2 -0
  59. package/utils/date.amd.js.map +1 -0
  60. package/utils/date.js +6 -0
  61. package/utils/date.js.map +1 -0
  62. package/utils/device.amd.js +1 -41
  63. package/utils/device.amd.js.map +1 -1
  64. package/utils/device.js +3 -38
  65. package/utils/device.js.map +1 -1
  66. package/utils/dom.amd.js +1 -94
  67. package/utils/dom.amd.js.map +1 -1
  68. package/utils/dom.js +47 -77
  69. package/utils/dom.js.map +1 -1
  70. package/.chunks/core-0b2c7817.es.js +0 -152
  71. package/.chunks/core-0b2c7817.es.js.map +0 -1
  72. package/.chunks/core-51f7b679.amd.js +0 -151
  73. package/.chunks/core-51f7b679.amd.js.map +0 -1
  74. package/.chunks/forms-245e3bc0.es.js +0 -565
  75. package/.chunks/forms-245e3bc0.es.js.map +0 -1
  76. package/.chunks/forms-f7b7b259.amd.js +0 -568
  77. package/.chunks/forms-f7b7b259.amd.js.map +0 -1
  78. package/.chunks/popup-8f650530.amd.js +0 -728
  79. package/.chunks/popup-8f650530.amd.js.map +0 -1
  80. package/.chunks/popup-d240ed19.es.js +0 -731
  81. package/.chunks/popup-d240ed19.es.js.map +0 -1
  82. package/editArea/editArea.amd.js +0 -126
  83. package/editArea/editArea.amd.js.map +0 -1
  84. package/editArea/editArea.js +0 -123
  85. package/editArea/editArea.js.map +0 -1
  86. package/editArea.css +0 -61
package/core.css CHANGED
@@ -1,648 +1 @@
1
- :root{
2
- --color-white: rgba(255, 255, 255, 1);
3
- --color-black: rgba(0, 0, 0, 1);
4
- --color-black-transparent-40: rgba(0, 0, 0, 0.4);
5
- --color-black-transparent-50: rgba(0, 0, 0, 0.5);
6
- --color-steel-50: rgba(251, 252, 253, 1);
7
- --color-steel-100: rgba(248, 250, 252, 1);
8
- --color-steel-150: rgba(241, 244, 249, 1);
9
- --color-steel-200: rgba(234, 239, 245, 1);
10
- --color-steel-250: rgba(228, 234, 241, 1);
11
- --color-steel-300: rgba(221, 228, 238, 1);
12
- --color-steel-350: rgba(215, 223, 233, 1);
13
- --color-steel-400: rgba(209, 218, 229, 1);
14
- --color-steel-450: rgba(204, 213, 225, 1);
15
- --color-steel-500: rgba(198, 208, 220, 1);
16
- --color-steel-550: rgba(193, 203, 215, 1);
17
- --color-gray-50: rgba(225, 229, 234, 1);
18
- --color-gray-100: rgba(210, 216, 223, 1);
19
- --color-gray-150: rgba(196, 203, 212, 1);
20
- --color-gray-200: rgba(182, 190, 201, 1);
21
- --color-gray-250: rgba(168, 177, 189, 1);
22
- --color-gray-300: rgba(154, 164, 177, 1);
23
- --color-gray-350: rgba(141, 151, 165, 1);
24
- --color-gray-400: rgba(128, 138, 153, 1);
25
- --color-gray-450: rgba(115, 125, 140, 1);
26
- --color-gray-500: rgba(104, 113, 125, 1);
27
- --color-gray-550: rgba(94, 101, 110, 1);
28
- --color-gray-600: rgba(83, 88, 95, 1);
29
- --color-gray-650: rgba(72, 76, 81, 1);
30
- --color-gray-700: rgba(61, 63, 67, 1);
31
- --color-gray-750: rgba(49, 51, 53, 1);
32
- --color-gray-800: rgba(37, 38, 39, 1);
33
- --color-gray-850: rgba(25, 25, 26, 1);
34
- --color-gray-900: rgba(13, 13, 13, 1);
35
- --color-blue-50: rgba(250, 252, 255, 1);
36
- --color-blue-100: rgba(230, 240, 255, 1);
37
- --color-blue-150: rgba(204, 224, 255, 1);
38
- --color-blue-200: rgba(179, 210, 255, 1);
39
- --color-blue-250: rgba(153, 194, 255, 1);
40
- --color-blue-300: rgba(128, 179, 255, 1);
41
- --color-blue-350: rgba(102, 163, 255, 1);
42
- --color-blue-400: rgba(77, 148, 255, 1);
43
- --color-blue-450: rgba(51, 132, 255, 1);
44
- --color-blue-500: rgba(25, 117, 255, 1);
45
- --color-blue-550: rgba(23, 105, 227, 1);
46
- --color-blue-600: rgba(20, 91, 198, 1);
47
- --color-blue-650: rgba(17, 78, 170, 1);
48
- --color-blue-700: rgba(14, 65, 142, 1);
49
- --color-blue-750: rgba(12, 52, 113, 1);
50
- --color-blue-800: rgba(9, 40, 85, 1);
51
- --color-blue-850: rgba(6, 26, 57, 1);
52
- --color-blue-900: rgba(3, 13, 28, 1);
53
- --color-orange-50: rgba(255, 253, 250, 1);
54
- --color-orange-100: rgba(255, 244, 230, 1);
55
- --color-orange-150: rgba(255, 234, 204, 1);
56
- --color-orange-200: rgba(255, 223, 178, 1);
57
- --color-orange-250: rgba(255, 212, 153, 1);
58
- --color-orange-300: rgba(255, 202, 128, 1);
59
- --color-orange-350: rgba(255, 191, 102, 1);
60
- --color-orange-400: rgba(255, 180, 77, 1);
61
- --color-orange-450: rgba(255, 170, 51, 1);
62
- --color-orange-500: rgba(255, 159, 25, 1);
63
- --color-orange-550: rgba(227, 141, 23, 1);
64
- --color-orange-600: rgba(198, 124, 20, 1);
65
- --color-orange-650: rgba(170, 106, 17, 1);
66
- --color-orange-700: rgba(142, 88, 14, 1);
67
- --color-orange-750: rgba(113, 71, 12, 1);
68
- --color-orange-800: rgba(85, 53, 9, 1);
69
- --color-orange-850: rgba(57, 35, 6, 1);
70
- --color-orange-900: rgba(28, 18, 3, 1);
71
- --color-mint-50: rgba(251, 254, 253, 1);
72
- --color-mint-100: rgba(228, 251, 245, 1);
73
- --color-mint-150: rgba(200, 246, 235, 1);
74
- --color-mint-200: rgba(173, 242, 226, 1);
75
- --color-mint-250: rgba(146, 237, 216, 1);
76
- --color-mint-300: rgba(118, 233, 206, 1);
77
- --color-mint-350: rgba(91, 228, 196, 1);
78
- --color-mint-400: rgba(64, 224, 187, 1);
79
- --color-mint-450: rgba(36, 219, 177, 1);
80
- --color-mint-500: rgba(9, 215, 167, 1);
81
- --color-mint-550: rgba(8, 191, 148, 1);
82
- --color-mint-600: rgba(7, 167, 130, 1);
83
- --color-mint-650: rgba(6, 143, 111, 1);
84
- --color-mint-700: rgba(5, 119, 93, 1);
85
- --color-mint-750: rgba(4, 96, 74, 1);
86
- --color-mint-800: rgba(3, 72, 56, 1);
87
- --color-mint-850: rgba(2, 48, 37, 1);
88
- --color-mint-900: rgba(1, 24, 19, 1);
89
- --color-green-50: rgba(251, 254, 252, 1);
90
- --color-green-100: rgba(229, 248, 237, 1);
91
- --color-green-150: rgba(203, 242, 220, 1);
92
- --color-green-200: rgba(177, 235, 202, 1);
93
- --color-green-250: rgba(151, 229, 184, 1);
94
- --color-green-300: rgba(126, 222, 167, 1);
95
- --color-green-350: rgba(100, 216, 149, 1);
96
- --color-green-400: rgba(74, 209, 131, 1);
97
- --color-green-450: rgba(48, 203, 114, 1);
98
- --color-green-500: rgba(22, 196, 96, 1);
99
- --color-green-550: rgba(20, 174, 85, 1);
100
- --color-green-600: rgba(17, 152, 75, 1);
101
- --color-green-650: rgba(15, 131, 64, 1);
102
- --color-green-700: rgba(12, 109, 53, 1);
103
- --color-green-750: rgba(10, 87, 43, 1);
104
- --color-green-800: rgba(7, 65, 32, 1);
105
- --color-green-850: rgba(5, 44, 21, 1);
106
- --color-green-900: rgba(2, 22, 11, 1);
107
- --color-salad-50: rgba(252, 254, 250, 1);
108
- --color-salad-100: rgba(242, 252, 232, 1);
109
- --color-salad-150: rgba(228, 248, 208, 1);
110
- --color-salad-200: rgba(215, 245, 185, 1);
111
- --color-salad-250: rgba(202, 242, 162, 1);
112
- --color-salad-300: rgba(188, 238, 138, 1);
113
- --color-salad-350: rgba(175, 235, 115, 1);
114
- --color-salad-400: rgba(162, 232, 92, 1);
115
- --color-salad-450: rgba(148, 228, 68, 1);
116
- --color-salad-500: rgba(135, 225, 45, 1);
117
- --color-salad-550: rgba(120, 200, 40, 1);
118
- --color-salad-600: rgba(105, 175, 35, 1);
119
- --color-salad-650: rgba(90, 150, 30, 1);
120
- --color-salad-700: rgba(75, 125, 25, 1);
121
- --color-salad-750: rgba(60, 100, 20, 1);
122
- --color-salad-800: rgba(45, 75, 15, 1);
123
- --color-salad-850: rgba(30, 50, 10, 1);
124
- --color-salad-900: rgba(15, 25, 5, 1);
125
- --color-red-50: rgba(255, 251, 250, 1);
126
- --color-red-100: rgba(253, 234, 232, 1);
127
- --color-red-150: rgba(250, 213, 209, 1);
128
- --color-red-200: rgba(248, 192, 187, 1);
129
- --color-red-250: rgba(246, 171, 164, 1);
130
- --color-red-300: rgba(243, 149, 141, 1);
131
- --color-red-350: rgba(241, 128, 118, 1);
132
- --color-red-400: rgba(239, 107, 96, 1);
133
- --color-red-450: rgba(236, 86, 73, 1);
134
- --color-red-500: rgba(234, 65, 50, 1);
135
- --color-red-550: rgba(208, 58, 44, 1);
136
- --color-red-600: rgba(182, 51, 39, 1);
137
- --color-red-650: rgba(156, 43, 33, 1);
138
- --color-red-700: rgba(130, 36, 28, 1);
139
- --color-red-750: rgba(104, 29, 22, 1);
140
- --color-red-800: rgba(78, 22, 17, 1);
141
- --color-red-850: rgba(52, 14, 11, 1);
142
- --color-red-900: rgba(26, 7, 6, 1);
143
- --color-violet-50: rgba(251, 250, 255, 1);
144
- --color-violet-100: rgba(240, 235, 255, 1);
145
- --color-violet-150: rgba(225, 215, 255, 1);
146
- --color-violet-200: rgba(210, 195, 255, 1);
147
- --color-violet-250: rgba(195, 175, 255, 1);
148
- --color-violet-300: rgba(181, 156, 255, 1);
149
- --color-violet-350: rgba(166, 136, 255, 1);
150
- --color-violet-400: rgba(151, 116, 255, 1);
151
- --color-violet-450: rgba(136, 96, 255, 1);
152
- --color-violet-500: rgba(121, 76, 255, 1);
153
- --color-violet-550: rgba(108, 68, 227, 1);
154
- --color-violet-600: rgba(94, 59, 198, 1);
155
- --color-violet-650: rgba(81, 51, 170, 1);
156
- --color-violet-700: rgba(67, 42, 142, 1);
157
- --color-violet-750: rgba(54, 34, 113, 1);
158
- --color-violet-800: rgba(40, 25, 85, 1);
159
- --color-violet-850: rgba(27, 17, 57, 1);
160
- --color-violet-900: rgba(13, 8, 28, 1);
161
- --color-pink-50: rgba(254, 250, 254, 1);
162
- --color-pink-100: rgba(252, 231, 251, 1);
163
- --color-pink-150: rgba(250, 207, 246, 1);
164
- --color-pink-200: rgba(247, 183, 242, 1);
165
- --color-pink-250: rgba(244, 159, 237, 1);
166
- --color-pink-300: rgba(242, 135, 233, 1);
167
- --color-pink-350: rgba(239, 111, 228, 1);
168
- --color-pink-400: rgba(236, 87, 224, 1);
169
- --color-pink-450: rgba(234, 63, 219, 1);
170
- --color-pink-500: rgba(231, 39, 215, 1);
171
- --color-pink-550: rgba(205, 35, 191, 1);
172
- --color-pink-600: rgba(180, 30, 167, 1);
173
- --color-pink-650: rgba(154, 26, 143, 1);
174
- --color-pink-700: rgba(128, 22, 119, 1);
175
- --color-pink-750: rgba(103, 17, 96, 1);
176
- --color-pink-800: rgba(77, 13, 72, 1);
177
- --color-pink-850: rgba(51, 9, 48, 1);
178
- --color-pink-900: rgba(26, 4, 24, 1);
179
- --color-yellow-50: rgba(255, 254, 250, 1);
180
- --color-yellow-100: rgba(253, 252, 231, 1);
181
- --color-yellow-150: rgba(251, 248, 208, 1);
182
- --color-yellow-200: rgba(248, 245, 184, 1);
183
- --color-yellow-250: rgba(246, 242, 160, 1);
184
- --color-yellow-300: rgba(244, 238, 137, 1);
185
- --color-yellow-350: rgba(242, 235, 113, 1);
186
- --color-yellow-400: rgba(239, 232, 89, 1);
187
- --color-yellow-450: rgba(237, 228, 66, 1);
188
- --color-yellow-500: rgba(235, 225, 42, 1);
189
- --color-yellow-550: rgba(209, 200, 37, 1);
190
- --color-yellow-600: rgba(183, 175, 33, 1);
191
- --color-yellow-650: rgba(157, 150, 28, 1);
192
- --color-yellow-700: rgba(131, 125, 23, 1);
193
- --color-yellow-750: rgba(104, 100, 19, 1);
194
- --color-yellow-800: rgba(78, 75, 14, 1);
195
- --color-yellow-850: rgba(52, 50, 9, 1);
196
- --color-yellow-900: rgba(26, 25, 5, 1);
197
-
198
- --color-top-3: #3198DD;
199
- --color-top-10: #21936C;
200
- --color-top-30: #1ABC9C;
201
- --color-top-50: #A6E0A3;
202
- --color-top-100: #C7D7D7;
203
- --color-top-10000: #FCC94A;
204
- }:root {
205
- --top-padding-1: 4px;
206
- --top-padding-2: 8px;
207
- --top-padding-3: 12px;
208
- --top-padding-4: 16px;
209
- --top-padding-5: 20px;
210
- --top-padding-6: 24px;
211
- --top-padding-7: 28px;
212
- --top-padding-8: 32px;
213
- --top-padding-9: 36px;
214
- --top-padding-10: 40px;
215
- --top-padding-11: 44px;
216
- --top-padding-12: 48px;
217
-
218
- --top-gap-1: 4px;
219
- --top-gap-2: 8px;
220
- --top-gap-3: 12px;
221
- --top-gap-4: 16px;
222
- --top-gap-5: 20px;
223
- --top-gap-6: 24px;
224
- --top-gap-7: 28px;
225
- --top-gap-8: 32px;
226
- --top-gap-9: 36px;
227
- --top-gap-10: 40px;
228
- --top-gap-11: 44px;
229
- --top-gap-12: 48px;
230
-
231
- --top-radius-1: 4px;
232
- --top-radius-2: 8px;
233
- --top-radius-3: 12px;
234
- --top-radius-4: 16px;
235
- --top-radius-5: 20px;
236
- --top-radius-6: 24px;
237
- --top-radius-7: 28px;
238
- --top-radius-8: 32px;
239
- --top-radius-9: 36px;
240
- --top-radius-10: 40px;
241
- --top-radius-11: 44px;
242
- --top-radius-12: 48px;
243
- }.top-comment {
244
- color: var(--color-gray-350);
245
- font-size: 12px;
246
- }
247
-
248
- /* formsCaption */
249
- :root {
250
- --top-formsCaption-offset: 16px;
251
- }
252
-
253
- .top-formsCaptionWrapper {
254
- padding-top: 20px;
255
- }
256
-
257
- .top-formsCaption {
258
- pointer-events: none;
259
- width: calc(100% - var(--top-forms-padding) - var(--top-icon-both-width) - var(--top-forms_clear-width) - var(--top-select_arrow-width));
260
- padding: 0 var(--top-forms-padding);
261
- color: var(--color-placeholder);
262
- white-space: nowrap;
263
- text-overflow: ellipsis;
264
- transform: translate(var(--top-icon-both-width), 0);
265
- position: absolute;
266
- overflow: hidden;
267
- transition: 0.1s;
268
- }
269
- .top-error ~ .top-formsCaption {
270
- transition: 0.1s 0.1s;
271
- }
272
- /* перефокусировка на поле не должна влиять на отображении заголовка */
273
- .top-formsCaption * {
274
- pointer-events: auto;
275
- }
276
-
277
- .top-formsCaptionWrapper > input:not([readonly]):focus ~ .top-formsCaption,
278
- .top-formsCaptionWrapper > input:not(:placeholder-shown) ~ .top-formsCaption,
279
- .top-formsCaptionWrapper > textarea:not(:placeholder-shown) ~ .top-formsCaption,
280
- .top-formsCaptionWrapper.top-select > .top-formsCaption,
281
- .top-formsCaptionWrapper.top-inputRange > .top-formsCaption,
282
- .top-formsCaptionWrapper-always > .top-formsCaption {
283
- width: 100%;
284
- padding: 0;
285
- color: var(--color-placeholder-active);
286
- font-size: 11px;
287
- transform: translate(0, calc(-1em - var(--top-formsCaption-offset)));
288
- transition: 0.1s;
289
- }/* clear css */
290
- button,
291
- input,
292
- textarea,
293
- select {
294
- border: 1px solid var(--top-forms-border-color);
295
- color: var(--color-text);
296
- font-size: var(--top-font-size);
297
- font-family: inherit;
298
- }
299
- ::placeholder {
300
- color: var(--color-placeholder);
301
- }
302
- [contenteditable][placeholder]:empty:before {
303
- content: attr(placeholder);
304
- color: var(--color-text-secondary);
305
- }
306
- /* composes классы */
307
- /* checkbox, radio, switcher */
308
- .top-forms-optionWrapper {
309
- cursor: pointer;
310
- padding: 8px 0;
311
- color: var(--color-text);
312
- line-height: 1.3;
313
- display: inline-flex;
314
- align-items: flex-start;
315
- gap: 4px;
316
- }
317
- .top-forms-option {
318
- cursor: pointer;
319
- padding: 0;
320
- margin: 3px;
321
- display: inline-flex;
322
- flex-shrink: 0;
323
- appearance: none;
324
- -webkit-appearance: none;
325
- }
326
- /* TODO: см. :disabled в modifiers.css */
327
- .top-forms-option:disabled {
328
- filter: none;
329
- opacity: 1;
330
- }
331
- /* focusable */
332
- .top-forms-focusable:focus-visible,
333
- .top-focus {
334
- outline: calc(var(--top-forms-border-width) * 2) solid var(--top-forms-option-color);
335
- outline-offset: 2px;
336
- position: relative;
337
- z-index: 1;
338
- transition: border-color 150ms;
339
- }
340
- /* focusable hover */
341
- .top-forms-focusable:hover,
342
- .top-forms-focusable:focus,
343
- .top-focus:hover,
344
- .top-focus:focus,
345
- select.top-el:not(:disabled):hover,
346
- select.top-el:not(:disabled):hover ~ [data-action="top-select_changer"],
347
- select.top-el:not(:disabled):focus {
348
- --top-forms-border-color: var(--top-forms-border-color-hover);
349
- --top-forms-background-color: var(--top-forms-background-color-hover);
350
- }
351
- :root {
352
- --top-font-size: 14px;
353
-
354
- --top-forms-radius: 8px;
355
- --top-forms-border-width: 1px;
356
- --top-style_outline-color: transparent;
357
-
358
- --top-forms-base-height_s: 32px;
359
- --top-forms-base-height_l: 36px;
360
- --top-forms-base-height_xl: 40px;
361
-
362
- /* высота поля, должна быть одинаковой у всех форм в одном контексте */
363
- --top-forms-base-height: var(--top-forms-base-height_s);
364
-
365
- --top-forms-padding: 8px;
366
- --top-forms-padding_l: 12px;
367
- --top-forms-padding_xl: 16px;
368
-
369
- /* forms control */
370
- --top-forms-option-height: 24px;
371
- --top-forms-option-color: var(--color-primary);
372
- --top-forms-option-color-hover: var(--color-primary-2);
373
-
374
- --top-select_arrow-width: 0px;
375
- --top-forms_clear-width: 0px;
376
- }
377
- .top-size_s {
378
- --top-forms-base-height: var(--top-forms-base-height_s);
379
- }
380
- .top-size_l {
381
- --top-forms-base-height: var(--top-forms-base-height_l);
382
- }
383
- .top-size_xl {
384
- --top-forms-base-height: var(--top-forms-base-height_xl);
385
- }
386
- /* input, textarea, select */
387
- .top-input_input,
388
- .top-textarea_textarea,
389
- .top-editArea_form,
390
- select.top-el {
391
- box-sizing: border-box;
392
- border-radius: var(--top-forms-radius);
393
- border: var(--top-forms-border-width) solid var(--top-forms-border-color);
394
- display: inline-flex;
395
- appearance: none;
396
- -webkit-appearance: none;
397
- }
398
- .top-input_input,
399
- select.top-el {
400
- height: var(--top-forms-base-height);
401
- padding: 0;
402
- padding-right: calc(var(--top-forms-padding) + var(--top-forms_clear-width) + var(--top-select_arrow-width));
403
- padding-left: calc(max(var(--top-forms-padding), var(--top-icon-both-width)));
404
- }
405
- /* TODO: select */
406
- .top-select {
407
- cursor: pointer;
408
- width: 180px;
409
- }
410
- .top-select:before {
411
- vertical-align: middle;
412
- display: inline-block;
413
- }
414
- select.top-el,
415
- label.top-select_arrow {
416
- background-color: var(--top-forms-background-color);
417
- }
418
- select.top-el:not(:disabled):focus-visible,
419
- [contenteditable]:focus-visible,
420
- .top-selector-multiselect:focus-within {
421
- outline: 2px solid var(--color-blue-100);
422
- }
423
- /* убрать ширину добавляемых элементов */
424
- label[data-top-icon],
425
- label[data-top-icon2] {
426
- position: relative;
427
- }
428
- label[data-top-icon]:before,
429
- label[data-top-icon2]:after {
430
- position: absolute;
431
- z-index: 3;
432
- }
433
- label[data-top-icon][data-top-icon2]:after {
434
- left: calc(var(--top-icon-width));
435
- }
436
- /* text cleaner */
437
- .top-cleaner[data-top-icon] {
438
- --top-icon-size: 20px;
439
- --top-icon-width: 20px;
440
- --top-icon-color: var(--color-text-secondary);
441
-
442
- cursor: pointer;
443
- border-radius: 50%;
444
- width: 30px;
445
- height: 24px;
446
- margin-left: calc(-30px - 4px);
447
- transform: translateX(calc(0px - var(--top-forms-border-width) - var(--top-select_arrow-width)));
448
- display: flex;
449
- align-items: center;
450
- justify-content: center;
451
- position: relative;
452
- z-index: 1;
453
- }
454
- .top-cleaner[data-top-icon]:hover {
455
- --top-icon-color: var(--color-text-secondary-2);
456
- }:root {
457
- --top-icon-size: 24px;
458
- --top-icon-width: 0px;
459
-
460
- --top-icon2-size: 24px;
461
- --top-icon2-width: 0px;
462
-
463
- --top-icon-both-width: 0px;
464
- }
465
-
466
- /* data-top-icon */
467
- [data-top-icon] {
468
- --top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
469
- --top-icon-color: inherit;
470
- }
471
- [data-top-icon2] {
472
- --top-icon2-width: calc(var(--top-icon2-size) + 8px);
473
- --top-icon2-color: inherit;
474
- }
475
- [data-top-icon=""] {
476
- --top-icon-width: 0px;
477
- }
478
- [data-top-icon2=""] {
479
- --top-icon2-width: 0px;
480
- }
481
-
482
- [data-top-icon]:before,
483
- [data-top-icon2]:after {
484
- pointer-events: none;
485
- content: attr(data-top-icon);
486
- border-radius: var(--top-forms-radius);
487
- width: var(--top-icon-width);
488
- color: var(--top-icon-color);
489
- font-family: Topvisor-2;
490
- font-size: var(--top-icon-size);
491
- font-weight: 400;
492
- line-height: 1;
493
- display: inline-flex;
494
- align-items: center;
495
- justify-content: center;
496
- flex-shrink: 0;
497
- }
498
- [data-top-icon2]:after {
499
- content: attr(data-top-icon2);
500
- width: var(--top-icon2-width);
501
- color: var(--top-icon2-color);
502
- font-size: var(--top-icon2-size);
503
- }
504
-
505
- /* ширина добавляемых элементов */
506
- [data-top-icon],
507
- [data-top-icon2] {
508
- --top-icon-both-width: calc(var(--top-icon-width) + var(--top-icon2-width));
509
- }
510
-
511
- [data-top-icon=""]:before {
512
- font-family: Topvisor;
513
- }/* элемент в виде ссылки */
514
- .top-as-a {
515
- cursor: pointer;
516
- color: var(--color-text-link);
517
- }
518
-
519
- .top-as-a:hover {
520
- text-decoration: underline;
521
- }.top-ellipsis {
522
- max-height: 100%;
523
- text-overflow: ellipsis;
524
- overflow: hidden;
525
- line-height: 1.23;
526
- flex-grow: 1;
527
- }
528
- .top-ellipsis2,
529
- .top-ellipsis3 {
530
- max-width: fit-content;
531
- display: -webkit-box;
532
- -webkit-line-clamp: 2;
533
- -webkit-box-orient: vertical;
534
- overflow: hidden;
535
- }
536
- .top-ellipsis3 {
537
- -webkit-line-clamp: 3;
538
- }/* top-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
539
- .top-inited {
540
- }
541
-
542
- .top-hidden {
543
- display: none !important;
544
- }
545
-
546
- /* top-unvisible используется для скрытия элементов, без изменения видимости */
547
- .top-unvisible {
548
- width: 0;
549
- height: 0;
550
- overflow: hidden;
551
- position: absolute;
552
- }
553
-
554
- .top-loading {
555
-
556
- }
557
-
558
- /* disabled */
559
- .top-disabled {
560
- pointer-events: none;
561
- }
562
-
563
- /* TODO: определить стил :disabled во всех компонентах формы, и убрать его отсюда */
564
- :disabled:not(.top-forms-option),
565
- :disabled ~ .top-formsCaption,
566
- .top-disabled[data-top-icon]:before,
567
- .top-disabled[data-top-icon2]:after {
568
- opacity: 0.5;
569
- filter: grayscale(100%);
570
- }
571
-
572
- .top-error,
573
- .top-error::placeholder,
574
- .top-error:before {
575
- --top-forms-border-color: var(--color-negative);
576
-
577
- border-color: var(--color-negative);
578
- }
579
-
580
- .top-error {
581
- --top-icon-color: var(--color-negative);
582
-
583
- color: var(--color-negative);
584
- }
585
-
586
- .top-error ~ .top-formsCaption {
587
- color: var(--color-negative);
588
- }
589
-
590
- .top-warning {
591
- --top-icon-color: var(--color-orange-500);
592
-
593
- color: var(--color-orange-500);
594
- }
595
-
596
- input.top-error,
597
- textarea.top-error,
598
- .top-editArea_form.top-error {
599
- animation: top-error 0.8s;
600
- }
601
-
602
- @keyframes top-error {
603
- 0% {
604
- outline-offset: 10px;
605
- outline: 3px solid transparent;
606
- }
607
- 50% {
608
- outline: 3px solid var(--color-red-100);
609
- outline-offset: 2px;
610
- }
611
- 100% {
612
- outline: 3px solid transparent;
613
- outline-offset: 2px;
614
- }
615
- }@media only screen and (min-width: 900px) {
616
- .top-only-mobile {
617
- display: none !important;
618
- }
619
- }
620
- @media only screen and (max-width: 900px) {
621
- .top-only-pc {
622
- display: none !important;
623
- }
624
- }
625
-
626
- html:not([lang="ru"]) .top-only-ru,
627
- html:not([lang="en"]) .top-only-en {
628
- display: none !important;
629
- }
630
-
631
- html[data-is_admin="0"] .top-only-admin {
632
- display: none !important;
633
- }/* TODO: перенести в компонент */
634
- .top-select_arrow {
635
- --top-select_arrow-color: var(--color-gray-600);
636
- --top-select_arrow-size: 12px;
637
- --top-select_arrow-width: 24px;
638
-
639
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.293 0.29269L8 6.5857L1.70704 0.29269C1.31679 -0.0975633 0.682937 -0.0975633 0.292687 0.29269C-0.0975624 0.682943 -0.0975624 1.31656 0.292687 1.70682L7.29294 8.70713C7.68343 9.09762 8.31657 9.09762 8.70706 8.70713L15.7073 1.70682C16.0976 1.31656 16.0976 0.682943 15.7073 0.29269C15.3171 -0.0975633 14.6832 -0.0975633 14.293 0.29269Z' fill='%23808A99'/%3E%3C/svg%3E");
640
- background-size: 14px;
641
- background-position: calc(100% - var(--top-forms-padding)) 50%;
642
- background-repeat: no-repeat;
643
- padding-right: 32px;
644
- }
645
-
646
- .top-select_arrow ~ .top-cleaner {
647
- --top-select_arrow-width: 24px;
648
- }
1
+ :root{--color-white: rgba(255, 255, 255, 1);--color-black: rgba(0, 0, 0, 1);--color-black-transparent-40: rgba(0, 0, 0, .4);--color-black-transparent-50: rgba(0, 0, 0, .5);--color-steel-50: rgba(251, 252, 253, 1);--color-steel-100: rgba(248, 250, 252, 1);--color-steel-150: rgba(241, 244, 249, 1);--color-steel-200: rgba(234, 239, 245, 1);--color-steel-250: rgba(228, 234, 241, 1);--color-steel-300: rgba(221, 228, 238, 1);--color-steel-350: rgba(215, 223, 233, 1);--color-steel-400: rgba(209, 218, 229, 1);--color-steel-450: rgba(204, 213, 225, 1);--color-steel-500: rgba(198, 208, 220, 1);--color-steel-550: rgba(193, 203, 215, 1);--color-gray-50: rgba(225, 229, 234, 1);--color-gray-100: rgba(210, 216, 223, 1);--color-gray-150: rgba(196, 203, 212, 1);--color-gray-200: rgba(182, 190, 201, 1);--color-gray-250: rgba(168, 177, 189, 1);--color-gray-300: rgba(154, 164, 177, 1);--color-gray-350: rgba(141, 151, 165, 1);--color-gray-400: rgba(128, 138, 153, 1);--color-gray-450: rgba(115, 125, 140, 1);--color-gray-500: rgba(104, 113, 125, 1);--color-gray-550: rgba(94, 101, 110, 1);--color-gray-600: rgba(83, 88, 95, 1);--color-gray-650: rgba(72, 76, 81, 1);--color-gray-700: rgba(61, 63, 67, 1);--color-gray-750: rgba(49, 51, 53, 1);--color-gray-800: rgba(37, 38, 39, 1);--color-gray-850: rgba(25, 25, 26, 1);--color-gray-900: rgba(13, 13, 13, 1);--color-blue-50: rgba(250, 252, 255, 1);--color-blue-100: rgba(230, 240, 255, 1);--color-blue-150: rgba(204, 224, 255, 1);--color-blue-200: rgba(179, 210, 255, 1);--color-blue-250: rgba(153, 194, 255, 1);--color-blue-300: rgba(128, 179, 255, 1);--color-blue-350: rgba(102, 163, 255, 1);--color-blue-400: rgba(77, 148, 255, 1);--color-blue-450: rgba(51, 132, 255, 1);--color-blue-500: rgba(25, 117, 255, 1);--color-blue-550: rgba(23, 105, 227, 1);--color-blue-600: rgba(20, 91, 198, 1);--color-blue-650: rgba(17, 78, 170, 1);--color-blue-700: rgba(14, 65, 142, 1);--color-blue-750: rgba(12, 52, 113, 1);--color-blue-800: rgba(9, 40, 85, 1);--color-blue-850: rgba(6, 26, 57, 1);--color-blue-900: rgba(3, 13, 28, 1);--color-orange-50: rgba(255, 253, 250, 1);--color-orange-100: rgba(255, 244, 230, 1);--color-orange-150: rgba(255, 234, 204, 1);--color-orange-200: rgba(255, 223, 178, 1);--color-orange-250: rgba(255, 212, 153, 1);--color-orange-300: rgba(255, 202, 128, 1);--color-orange-350: rgba(255, 191, 102, 1);--color-orange-400: rgba(255, 180, 77, 1);--color-orange-450: rgba(255, 170, 51, 1);--color-orange-500: rgba(255, 159, 25, 1);--color-orange-550: rgba(227, 141, 23, 1);--color-orange-600: rgba(198, 124, 20, 1);--color-orange-650: rgba(170, 106, 17, 1);--color-orange-700: rgba(142, 88, 14, 1);--color-orange-750: rgba(113, 71, 12, 1);--color-orange-800: rgba(85, 53, 9, 1);--color-orange-850: rgba(57, 35, 6, 1);--color-orange-900: rgba(28, 18, 3, 1);--color-mint-50: rgba(251, 254, 253, 1);--color-mint-100: rgba(228, 251, 245, 1);--color-mint-150: rgba(200, 246, 235, 1);--color-mint-200: rgba(173, 242, 226, 1);--color-mint-250: rgba(146, 237, 216, 1);--color-mint-300: rgba(118, 233, 206, 1);--color-mint-350: rgba(91, 228, 196, 1);--color-mint-400: rgba(64, 224, 187, 1);--color-mint-450: rgba(36, 219, 177, 1);--color-mint-500: rgba(9, 215, 167, 1);--color-mint-550: rgba(8, 191, 148, 1);--color-mint-600: rgba(7, 167, 130, 1);--color-mint-650: rgba(6, 143, 111, 1);--color-mint-700: rgba(5, 119, 93, 1);--color-mint-750: rgba(4, 96, 74, 1);--color-mint-800: rgba(3, 72, 56, 1);--color-mint-850: rgba(2, 48, 37, 1);--color-mint-900: rgba(1, 24, 19, 1);--color-green-50: rgba(251, 254, 252, 1);--color-green-100: rgba(229, 248, 237, 1);--color-green-150: rgba(203, 242, 220, 1);--color-green-200: rgba(177, 235, 202, 1);--color-green-250: rgba(151, 229, 184, 1);--color-green-300: rgba(126, 222, 167, 1);--color-green-350: rgba(100, 216, 149, 1);--color-green-400: rgba(74, 209, 131, 1);--color-green-450: rgba(48, 203, 114, 1);--color-green-500: rgba(22, 196, 96, 1);--color-green-550: rgba(20, 174, 85, 1);--color-green-600: rgba(17, 152, 75, 1);--color-green-650: rgba(15, 131, 64, 1);--color-green-700: rgba(12, 109, 53, 1);--color-green-750: rgba(10, 87, 43, 1);--color-green-800: rgba(7, 65, 32, 1);--color-green-850: rgba(5, 44, 21, 1);--color-green-900: rgba(2, 22, 11, 1);--color-salad-50: rgba(252, 254, 250, 1);--color-salad-100: rgba(242, 252, 232, 1);--color-salad-150: rgba(228, 248, 208, 1);--color-salad-200: rgba(215, 245, 185, 1);--color-salad-250: rgba(202, 242, 162, 1);--color-salad-300: rgba(188, 238, 138, 1);--color-salad-350: rgba(175, 235, 115, 1);--color-salad-400: rgba(162, 232, 92, 1);--color-salad-450: rgba(148, 228, 68, 1);--color-salad-500: rgba(135, 225, 45, 1);--color-salad-550: rgba(120, 200, 40, 1);--color-salad-600: rgba(105, 175, 35, 1);--color-salad-650: rgba(90, 150, 30, 1);--color-salad-700: rgba(75, 125, 25, 1);--color-salad-750: rgba(60, 100, 20, 1);--color-salad-800: rgba(45, 75, 15, 1);--color-salad-850: rgba(30, 50, 10, 1);--color-salad-900: rgba(15, 25, 5, 1);--color-red-50: rgba(255, 251, 250, 1);--color-red-100: rgba(253, 234, 232, 1);--color-red-150: rgba(250, 213, 209, 1);--color-red-200: rgba(248, 192, 187, 1);--color-red-250: rgba(246, 171, 164, 1);--color-red-300: rgba(243, 149, 141, 1);--color-red-350: rgba(241, 128, 118, 1);--color-red-400: rgba(239, 107, 96, 1);--color-red-450: rgba(236, 86, 73, 1);--color-red-500: rgba(234, 65, 50, 1);--color-red-550: rgba(208, 58, 44, 1);--color-red-600: rgba(182, 51, 39, 1);--color-red-650: rgba(156, 43, 33, 1);--color-red-700: rgba(130, 36, 28, 1);--color-red-750: rgba(104, 29, 22, 1);--color-red-800: rgba(78, 22, 17, 1);--color-red-850: rgba(52, 14, 11, 1);--color-red-900: rgba(26, 7, 6, 1);--color-violet-50: rgba(251, 250, 255, 1);--color-violet-100: rgba(240, 235, 255, 1);--color-violet-150: rgba(225, 215, 255, 1);--color-violet-200: rgba(210, 195, 255, 1);--color-violet-250: rgba(195, 175, 255, 1);--color-violet-300: rgba(181, 156, 255, 1);--color-violet-350: rgba(166, 136, 255, 1);--color-violet-400: rgba(151, 116, 255, 1);--color-violet-450: rgba(136, 96, 255, 1);--color-violet-500: rgba(121, 76, 255, 1);--color-violet-550: rgba(108, 68, 227, 1);--color-violet-600: rgba(94, 59, 198, 1);--color-violet-650: rgba(81, 51, 170, 1);--color-violet-700: rgba(67, 42, 142, 1);--color-violet-750: rgba(54, 34, 113, 1);--color-violet-800: rgba(40, 25, 85, 1);--color-violet-850: rgba(27, 17, 57, 1);--color-violet-900: rgba(13, 8, 28, 1);--color-pink-50: rgba(254, 250, 254, 1);--color-pink-100: rgba(252, 231, 251, 1);--color-pink-150: rgba(250, 207, 246, 1);--color-pink-200: rgba(247, 183, 242, 1);--color-pink-250: rgba(244, 159, 237, 1);--color-pink-300: rgba(242, 135, 233, 1);--color-pink-350: rgba(239, 111, 228, 1);--color-pink-400: rgba(236, 87, 224, 1);--color-pink-450: rgba(234, 63, 219, 1);--color-pink-500: rgba(231, 39, 215, 1);--color-pink-550: rgba(205, 35, 191, 1);--color-pink-600: rgba(180, 30, 167, 1);--color-pink-650: rgba(154, 26, 143, 1);--color-pink-700: rgba(128, 22, 119, 1);--color-pink-750: rgba(103, 17, 96, 1);--color-pink-800: rgba(77, 13, 72, 1);--color-pink-850: rgba(51, 9, 48, 1);--color-pink-900: rgba(26, 4, 24, 1);--color-yellow-50: rgba(255, 254, 250, 1);--color-yellow-100: rgba(253, 252, 231, 1);--color-yellow-150: rgba(251, 248, 208, 1);--color-yellow-200: rgba(248, 245, 184, 1);--color-yellow-250: rgba(246, 242, 160, 1);--color-yellow-300: rgba(244, 238, 137, 1);--color-yellow-350: rgba(242, 235, 113, 1);--color-yellow-400: rgba(239, 232, 89, 1);--color-yellow-450: rgba(237, 228, 66, 1);--color-yellow-500: rgba(235, 225, 42, 1);--color-yellow-550: rgba(209, 200, 37, 1);--color-yellow-600: rgba(183, 175, 33, 1);--color-yellow-650: rgba(157, 150, 28, 1);--color-yellow-700: rgba(131, 125, 23, 1);--color-yellow-750: rgba(104, 100, 19, 1);--color-yellow-800: rgba(78, 75, 14, 1);--color-yellow-850: rgba(52, 50, 9, 1);--color-yellow-900: rgba(26, 25, 5, 1);--color-top-3: #3198DD;--color-top-10: #21936C;--color-top-30: #1ABC9C;--color-top-50: #A6E0A3;--color-top-100: #C7D7D7;--color-top-10000: #FCC94A}:root{--top-padding-1: 4px;--top-padding-2: 8px;--top-padding-3: 12px;--top-padding-4: 16px;--top-padding-5: 20px;--top-padding-6: 24px;--top-padding-7: 28px;--top-padding-8: 32px;--top-padding-9: 36px;--top-padding-10: 40px;--top-padding-11: 44px;--top-padding-12: 48px;--top-gap-1: 4px;--top-gap-2: 8px;--top-gap-3: 12px;--top-gap-4: 16px;--top-gap-5: 20px;--top-gap-6: 24px;--top-gap-7: 28px;--top-gap-8: 32px;--top-gap-9: 36px;--top-gap-10: 40px;--top-gap-11: 44px;--top-gap-12: 48px;--top-radius-1: 4px;--top-radius-2: 8px;--top-radius-3: 12px;--top-radius-4: 16px;--top-radius-5: 20px;--top-radius-6: 24px;--top-radius-7: 28px;--top-radius-8: 32px;--top-radius-9: 36px;--top-radius-10: 40px;--top-radius-11: 44px;--top-radius-12: 48px}.top-comment{color:var(--color-gray-350);font-size:12px}:root{--top-formsCaption-offset: 16px}.top-formsCaptionWrapper{padding-top:20px}.top-formsCaption{pointer-events:none;width:calc(100% - var(--top-forms-padding) - var(--top-icon-both-width) - var(--top-forms_clear-width) - var(--top-select_arrow-width));padding:0 var(--top-forms-padding);color:var(--color-placeholder);white-space:nowrap;text-overflow:ellipsis;transform:translate(var(--top-icon-both-width));position:absolute;overflow:hidden;transition:.1s}.top-error~.top-formsCaption{transition:.1s .1s}.top-formsCaption *{pointer-events:auto}.top-formsCaptionWrapper>input:not([readonly]):focus~.top-formsCaption,.top-formsCaptionWrapper>input:not(:placeholder-shown)~.top-formsCaption,.top-formsCaptionWrapper>textarea:not(:placeholder-shown)~.top-formsCaption,.top-formsCaptionWrapper.top-select>.top-formsCaption,.top-formsCaptionWrapper.top-inputRange>.top-formsCaption,.top-formsCaptionWrapper-always>.top-formsCaption{width:100%;padding:0;color:var(--color-placeholder-active);font-size:11px;transform:translateY(calc(-1em - var(--top-formsCaption-offset)));transition:.1s}.ui-tooltip{pointer-events:none;box-shadow:0 6px 18px #0e152f21,0 -2px 6px #0e152f08;border-radius:8px;border:none;background:var(--content-background-color);width:max-content;padding:16px;margin:0 18px;font-size:13px}.ui-tooltip img{margin:12px 0 0}.ui-tooltip ul{margin-left:24px}button,input,textarea,select{border:1px solid var(--top-forms-border-color);color:var(--color-text);font-size:var(--top-font-size);font-family:inherit}::placeholder{color:var(--color-placeholder)}[contenteditable][placeholder]:empty:before{content:attr(placeholder);color:var(--color-text-secondary)}.top-forms-optionWrapper{cursor:pointer;padding:8px 0;color:var(--color-text);line-height:1.3;display:inline-flex;align-items:flex-start;gap:4px}.top-forms-option{cursor:pointer;padding:0;margin:3px;display:inline-flex;flex-shrink:0;appearance:none;-webkit-appearance:none}.top-forms-option:disabled{filter:none;opacity:1}.top-forms-focusable:focus-visible,.top-focus{outline:calc(var(--top-forms-border-width) * 2) solid var(--top-forms-option-color);outline-offset:2px;position:relative;z-index:1;transition:border-color .15s}.top-forms-focusable:hover,.top-forms-focusable:focus,.top-focus:hover,.top-focus:focus,.top-input:hover>.top-input_input,.top-select:hover>.top-select_select{--top-forms-border-color: var(--top-forms-border-color-hover);--top-forms-background-color: var(--top-forms-background-color-hover)}[contenteditable]:focus-visible,.top-selector-multiselect:focus-within{outline:2px solid var(--color-blue-100)}:root{--top-font-size: 14px;--top-forms-radius: 8px;--top-forms-border-width: 1px;--top-style_outline-color: transparent;--top-forms-base-height_s: 32px;--top-forms-base-height_l: 36px;--top-forms-base-height_xl: 40px;--top-forms-base-height: var(--top-forms-base-height_s);--top-forms-padding: 8px;--top-forms-padding_l: 12px;--top-forms-padding_xl: 16px;--top-forms-option-height: 24px;--top-forms-option-color: var(--color-primary);--top-forms-option-color-hover: var(--color-primary-2);--top-select_arrow-width: 0px;--top-forms_clear-width: 0px}.top-size_s{--top-forms-base-height: var(--top-forms-base-height_s)}.top-size_l{--top-forms-base-height: var(--top-forms-base-height_l)}.top-size_xl{--top-forms-base-height: var(--top-forms-base-height_xl)}.top-input_input,.top-textarea_textarea,.top-editArea_form,.top-select_select{box-sizing:border-box;border-radius:var(--top-forms-radius);border:var(--top-forms-border-width) solid var(--top-forms-border-color);display:inline-flex;appearance:none;-webkit-appearance:none}.top-select_select{padding-right:calc(var(--top-forms-padding) + var(--top-forms_clear-width) + var(--top-select_arrow-width));padding-left:max(var(--top-forms-padding),var(--top-icon-both-width))}.top-select{position:relative}.top-select[data-top-icon]:before,.top-select[data-top-icon2]:after{position:absolute;z-index:3}.top-select[data-top-icon][data-top-icon2]:after{left:calc(var(--top-icon-width))}:root{--top-icon-size: 24px;--top-icon-width: 0px;--top-icon2-size: 24px;--top-icon2-width: 0px;--top-icon-both-width: 0px}[data-top-icon]{--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));--top-icon-color: inherit}[data-top-icon2]{--top-icon2-width: calc(var(--top-icon2-size) + 8px);--top-icon2-color: inherit}[data-top-icon=""]{--top-icon-width: 0px}[data-top-icon2=""]{--top-icon2-width: 0px}[data-top-icon]:before,[data-top-icon2]:after{pointer-events:none;content:attr(data-top-icon);border-radius:var(--top-forms-radius);width:var(--top-icon-width);color:var(--top-icon-color);font-family:Topvisor-2;font-size:var(--top-icon-size);font-weight:400;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}[data-top-icon2]:after{content:attr(data-top-icon2);width:var(--top-icon2-width);color:var(--top-icon2-color);font-size:var(--top-icon2-size)}[data-top-icon],[data-top-icon2]{--top-icon-both-width: calc(var(--top-icon-width) + var(--top-icon2-width))}[data-top-icon=]:before{font-family:Topvisor}.top-as-a{cursor:pointer;color:var(--color-text-link)}.top-as-a:hover{text-decoration:underline}.top-ellipsis{max-height:100%;text-overflow:ellipsis;overflow:hidden;line-height:1.23;flex-grow:1}.top-ellipsis2,.top-ellipsis3{max-width:fit-content;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.top-ellipsis3{-webkit-line-clamp:3}.top-hidden{display:none!important}.top-unvisible{width:0;height:0;overflow:hidden;position:absolute}.top-disabled{pointer-events:none;-webkit-user-select:none;user-select:none}:disabled:not(option):not(optgroup):not(.top-forms-option),:disabled~.top-formsCaption,.top-disabled[data-top-icon]:before,.top-disabled[data-top-icon2]:after{opacity:.5;filter:grayscale(100%)}.top-error,.top-error::placeholder,.top-error:before{--top-forms-border-color: var(--color-negative);border-color:var(--color-negative)}.top-error{--top-icon-color: var(--color-negative);color:var(--color-negative)}.top-error~.top-formsCaption{color:var(--color-negative)}.top-warning{--top-icon-color: var(--color-orange-500);color:var(--color-orange-500)}input.top-error,textarea.top-error,select.top-error,.top-editArea_form.top-error{animation:top-error .8s}@keyframes top-error{0%{outline-offset:10px;outline:3px solid transparent}50%{outline:3px solid var(--color-red-100);outline-offset:2px}to{outline:3px solid transparent;outline-offset:2px}}@media only screen and (min-width: 900px){.top-only-mobile{display:none!important}}@media only screen and (max-width: 900px){.top-only-pc{display:none!important}}html:not([lang=ru]) .top-only-ru,html:not([lang=en]) .top-only-en{display:none!important}html[data-is_admin="0"] .top-only-admin{display:none!important}.top-select_arrow{--top-select_arrow-color: var(--color-gray-600);--top-select_arrow-size: 12px;--top-select_arrow-width: 24px;background-image:url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.293 0.29269L8 6.5857L1.70704 0.29269C1.31679 -0.0975633 0.682937 -0.0975633 0.292687 0.29269C-0.0975624 0.682943 -0.0975624 1.31656 0.292687 1.70682L7.29294 8.70713C7.68343 9.09762 8.31657 9.09762 8.70706 8.70713L15.7073 1.70682C16.0976 1.31656 16.0976 0.682943 15.7073 0.29269C15.3171 -0.0975633 14.6832 -0.0975633 14.293 0.29269Z' fill='%23808A99'/%3E%3C/svg%3E");background-size:14px;background-position:calc(100% - var(--top-forms-padding)) 50%;background-repeat:no-repeat;padding-right:32px}.top-select_arrow~.top-cleaner{--top-select_arrow-width: 24px}