@topvisor/ui 0.0.15 → 0.0.17

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 (69) hide show
  1. package/.chunks/core-0b2c7817.es.js +152 -0
  2. package/.chunks/core-0b2c7817.es.js.map +1 -0
  3. package/.chunks/core-51f7b679.amd.js +151 -0
  4. package/.chunks/core-51f7b679.amd.js.map +1 -0
  5. package/.chunks/{forms-5e17154c.es.js → forms-245e3bc0.es.js} +175 -32
  6. package/.chunks/forms-245e3bc0.es.js.map +1 -0
  7. package/.chunks/forms-f7b7b259.amd.js +568 -0
  8. package/.chunks/forms-f7b7b259.amd.js.map +1 -0
  9. package/.chunks/popup-8f650530.amd.js +728 -0
  10. package/.chunks/popup-8f650530.amd.js.map +1 -0
  11. package/.chunks/popup-d240ed19.es.js +731 -0
  12. package/.chunks/popup-d240ed19.es.js.map +1 -0
  13. package/README.md +62 -62
  14. package/common/common.amd.js +1 -1
  15. package/core/core.amd.js +5 -0
  16. package/core/core.amd.js.map +1 -0
  17. package/core/core.js +7 -0
  18. package/core/core.js.map +1 -0
  19. package/core.css +647 -658
  20. package/dark.css +135 -135
  21. package/editArea/editArea.amd.js +126 -0
  22. package/editArea/editArea.amd.js.map +1 -0
  23. package/editArea/editArea.js +123 -0
  24. package/editArea/editArea.js.map +1 -0
  25. package/editArea.css +61 -0
  26. package/forms/forms.amd.js +5 -3
  27. package/forms/forms.amd.js.map +1 -1
  28. package/forms/forms.js +6 -4
  29. package/{helpers → forms}/helpers.amd.js +2 -2
  30. package/{helpers → forms}/helpers.js +1 -1
  31. package/forms.css +344 -254
  32. package/icomoon/demo-files/demo.css +161 -161
  33. package/icomoon/demo-files/demo.js +30 -30
  34. package/icomoon/demo.html +2945 -2931
  35. package/icomoon/fonts/Topvisor-2.svg +232 -231
  36. package/icomoon/fonts/Topvisor-2.ttf +0 -0
  37. package/icomoon/fonts/Topvisor-2.woff +0 -0
  38. package/icomoon/selection.json +1 -1
  39. package/icomoon/style.css +647 -644
  40. package/light.css +135 -135
  41. package/package.json +19 -19
  42. package/popup/popup.amd.js +198 -0
  43. package/popup/popup.amd.js.map +1 -0
  44. package/popup/popup.js +198 -0
  45. package/popup/popup.js.map +1 -0
  46. package/popup/worker.amd.js +234 -0
  47. package/popup/worker.amd.js.map +1 -0
  48. package/popup/worker.js +237 -0
  49. package/popup/worker.js.map +1 -0
  50. package/popup.css +19 -0
  51. package/tabs/tabs.amd.js +123 -0
  52. package/tabs/tabs.amd.js.map +1 -0
  53. package/tabs/tabs.js +120 -0
  54. package/tabs/tabs.js.map +1 -0
  55. package/tabs.css +60 -0
  56. package/utils/device.amd.js +42 -0
  57. package/utils/device.amd.js.map +1 -0
  58. package/utils/device.js +41 -0
  59. package/utils/device.js.map +1 -0
  60. package/utils/dom.amd.js +95 -0
  61. package/utils/dom.amd.js.map +1 -0
  62. package/utils/dom.js +94 -0
  63. package/utils/dom.js.map +1 -0
  64. package/.chunks/forms-2abb7eaa.amd.js +0 -425
  65. package/.chunks/forms-2abb7eaa.amd.js.map +0 -1
  66. package/.chunks/forms-5e17154c.es.js.map +0 -1
  67. package/icomoon/demo-files/Read Me.txt +0 -7
  68. /package/{helpers → forms}/helpers.amd.js.map +0 -0
  69. /package/{helpers → forms}/helpers.js.map +0 -0
package/core.css CHANGED
@@ -1,659 +1,648 @@
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
- .top-title {
249
- margin: 1em 0;
250
- font-weight: 600;
251
- }
252
-
253
- /* formsCaption */
254
- :root {
255
- --top-formsCaption-offset: 16px;
256
- }
257
-
258
- .top-formsCaptionWrapper {
259
- padding-top: 20px;
260
- }
261
-
262
- .top-formsCaption {
263
- pointer-events: none;
264
- width: calc(100% - var(--top-forms-padding) - var(--top-icon-both-width) - var(--top-forms_clear-width) - var(--top-select_arrow-width));
265
- padding: 0 var(--top-forms-padding);
266
- color: var(--color-placeholder);
267
- white-space: nowrap;
268
- text-overflow: ellipsis;
269
- transform: translate(var(--top-icon-both-width), 0);
270
- position: absolute;
271
- overflow: hidden;
272
- transition: 0.1s;
273
- }
274
- .top-error ~ .top-formsCaption {
275
- transition: 0.1s 0.1s;
276
- }
277
- /* перефокусировка на поле не должна влиять на отображении заголовка */
278
- .top-formsCaption * {
279
- pointer-events: auto;
280
- }
281
-
282
- .top-formsCaptionWrapper > input:not([readonly]):focus ~ .top-formsCaption,
283
- .top-formsCaptionWrapper > input:not(:placeholder-shown) ~ .top-formsCaption,
284
- .top-formsCaptionWrapper > textarea:not(:placeholder-shown) ~ .top-formsCaption,
285
- .top-formsCaptionWrapper.top-select > .top-formsCaption,
286
- .top-formsCaptionWrapper.top-inputRange > .top-formsCaption,
287
- .top-formsCaptionWrapper-always > .top-formsCaption {
288
- width: 100%;
289
- padding: 0;
290
- color: var(--color-placeholder-active);
291
- font-size: 11px;
292
- transform: translate(0, calc(-1em - var(--top-formsCaption-offset)));
293
- transition: 0.1s;
294
- }:root {
295
- --top-font-size: 14px;
296
-
297
- --top-forms-radius: 8px;
298
- --top-forms-border-width: 1px;
299
- --top-style_outline-color: transparent;
300
-
301
- --top-forms-base-height_s: 32px;
302
- --top-forms-base-height_l: 36px;
303
- --top-forms-base-height_xl: 40px;
304
-
305
- /* высота поля, должна быть одинаковой у всех форм в одном контексте */
306
- --top-forms-base-height: var(--top-forms-base-height_s);
307
-
308
- --top-forms-padding: 8px;
309
- --top-forms-padding_l: 12px;
310
- --top-forms-padding_xl: 16px;
311
-
312
- /* forms control */
313
- --top-forms-option-height: 24px;
314
- --top-forms-option-color: var(--color-primary);
315
- --top-forms-option-color-hover: var(--color-primary-2);
316
-
317
- --top-select_arrow-width: 0px;
318
- --top-forms_clear-width: 0px;
319
- }
320
-
321
- .top-size_s {
322
- --top-forms-base-height: var(--top-forms-base-height_s);
323
- }
324
-
325
- .top-size_l {
326
- --top-forms-base-height: var(--top-forms-base-height_l);
327
- }
328
-
329
- .top-size_xl {
330
- --top-forms-base-height: var(--top-forms-base-height_xl);
331
- }
332
-
333
- /* clear css */
334
- button,
335
- input,
336
- textarea,
337
- select {
338
- border: 1px solid var(--top-forms-border-color);
339
- color: var(--color-text);
340
- font-size: var(--top-font-size);
341
- font-family: inherit;
342
- }
343
-
344
- ::placeholder {
345
- color: var(--color-placeholder);
346
- }
347
-
348
- [contenteditable][placeholder]:empty:before {
349
- content: attr(placeholder);
350
- color: var(--color-text-secondary);
351
- }
352
-
353
- /* focusable */
354
- .top-forms-focusable:focus-visible {
355
- outline: calc(var(--top-forms-border-width) * 2) solid var(--top-forms-option-color);
356
- outline-offset: 2px;
357
- position: relative;
358
- z-index: 1;
359
- transition: border-color 150ms;
360
- }
361
-
362
- /* focusable hover */
363
- .top-forms-focusable:hover,
364
- .top-forms-focusable:focus,
365
- textarea.top-el:not(:disabled):not([readonly]):hover,
366
- textarea.top-el:not(:disabled):not([readonly]):focus,
367
- select.top-el:not(:disabled):hover,
368
- select.top-el:not(:disabled):hover ~ [data-action="top-select_changer"],
369
- select.top-el:not(:disabled):focus {
370
- --top-forms-border-color: var(--top-forms-border-color-hover);
371
- --top-forms-background-color: var(--top-forms-background-color-hover);
372
- }
373
-
374
- /* checkbox, radio, switcher */
375
- .top-forms-optionWrapper {
376
- cursor: pointer;
377
- padding: 8px 0;
378
- color: var(--color-text);
379
- line-height: 1.3;
380
- display: inline-flex;
381
- align-items: flex-start;
382
- gap: 4px;
383
- }
384
-
385
- .top-forms-option {
386
- cursor: pointer;
387
- padding: 0;
388
- margin: 3px;
389
- display: inline-flex;
390
- flex-shrink: 0;
391
- appearance: none;
392
- -webkit-appearance: none;
393
- }
394
-
395
- .top-forms-option:disabled{
396
- background: var(--color-theme-50);
397
- border-color: var(--color-line-1-opacity);
398
- opacity: 1;
399
- }
400
-
401
- /* input, textarea, select */
402
- .top-input_input,
403
- textarea.top-el,
404
- select.top-el {
405
- box-sizing: border-box;
406
- border-radius: var(--top-forms-radius);
407
- border: var(--top-forms-border-width) solid var(--top-forms-border-color);
408
- height: var(--top-forms-base-height);
409
- padding: 0;
410
- padding-right: calc(var(--top-forms-padding) + var(--top-forms_clear-width) + var(--top-select_arrow-width));
411
- padding-left: calc(max(var(--top-forms-padding), var(--top-icon-both-width)));
412
- display: inline-flex;
413
- appearance: none;
414
- -webkit-appearance: none;
415
- }
416
-
417
- /* TODO: select */
418
- .top-select {
419
- cursor: pointer;
420
- width: 180px;
421
- }
422
-
423
- .top-select:before {
424
- vertical-align: middle;
425
- display: inline-block;
426
- }
427
-
428
- select.top-el,
429
- label.top-select_arrow {
430
- background-color: var(--top-forms-background-color);
431
- }
432
-
433
- select.top-el:not(:disabled):focus-visible,
434
- [contenteditable]:focus-visible,
435
- .top-selector-multiselect:focus-within {
436
- outline: 2px solid var(--color-blue-100);
437
- }
438
-
439
- /* disabled */
440
- :disabled,
441
- :disabled ~ .top-formsCaption,
442
- .top-disabled[data-top-icon]:before,
443
- .top-disabled[data-top-icon2]:after {
444
- cursor: default;
445
- opacity: 0.5;
446
- filter: grayscale(100%);
447
- pointer-events: none;
448
- }
449
-
450
- /* убрать ширину добавляемых элементов */
451
- label[data-top-icon],
452
- label[data-top-icon2] {
453
- position: relative;
454
- }
455
- label[data-top-icon]:before,
456
- label[data-top-icon2]:after {
457
- position: absolute;
458
- z-index: 3;
459
- }
460
- label[data-top-icon][data-top-icon2]:after {
461
- left: calc(var(--top-icon-width));
462
- }
463
-
464
- /* text cleaner */
465
- .top-cleaner[data-top-icon] {
466
- --top-icon-size: 20px;
467
- --top-icon-width: 20px;
468
- --top-icon-color: var(--color-text-secondary);
469
-
470
- cursor: pointer;
471
- border-radius: 50%;
472
- width: 30px;
473
- height: 24px;
474
- margin-left: calc(-30px - 4px);
475
- transform: translateX(calc(0px - var(--top-forms-border-width) - var(--top-select_arrow-width)));
476
- display: flex;
477
- align-items: center;
478
- justify-content: center;
479
- position: relative;
480
- z-index: 1;
481
- }
482
- .top-cleaner[data-top-icon]:hover {
483
- --top-icon-color: var(--color-text-secondary-2);
484
- }:root {
485
- --top-icon-size: 24px;
486
- --top-icon-width: 0px;
487
-
488
- --top-icon2-size: 24px;
489
- --top-icon2-width: 0px;
490
-
491
- --top-icon-both-width: 0px;
492
- }
493
-
494
- /* data-top-icon */
495
- [data-top-icon] {
496
- --top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
497
- --top-icon-color: inherit;
498
- }
499
- [data-top-icon2] {
500
- --top-icon2-width: calc(var(--top-icon2-size) + 8px);
501
- --top-icon2-color: inherit;
502
- }
503
- [data-top-icon=""] {
504
- --top-icon-width: 0px;
505
- }
506
- [data-top-icon2=""] {
507
- --top-icon2-width: 0px;
508
- }
509
-
510
- [data-top-icon]:before,
511
- [data-top-icon2]:after {
512
- pointer-events: none;
513
- content: attr(data-top-icon);
514
- border-radius: var(--top-forms-radius);
515
- width: var(--top-icon-width);
516
- color: var(--top-icon-color);
517
- font-family: Topvisor-2;
518
- font-size: var(--top-icon-size);
519
- font-weight: 400;
520
- line-height: 1;
521
- display: inline-flex;
522
- align-items: center;
523
- justify-content: center;
524
- flex-shrink: 0;
525
- }
526
- [data-top-icon2]:after {
527
- content: attr(data-top-icon2);
528
- width: var(--top-icon2-width);
529
- color: var(--top-icon2-color);
530
- font-size: var(--top-icon2-size);
531
- }
532
-
533
- /* ширина добавляемых элементов */
534
- [data-top-icon],
535
- [data-top-icon2] {
536
- --top-icon-both-width: calc(var(--top-icon-width) + var(--top-icon2-width));
537
- }
538
-
539
- [data-top-icon=""]:before {
540
- font-family: Topvisor;
541
- }/* элемент в виде ссылки */
542
- .top-as-a {
543
- cursor: pointer;
544
- color: var(--color-text-link);
545
- }
546
-
547
- .top-as-a:hover {
548
- text-decoration: underline;
549
- }.top-ellipsis {
550
- max-height: 100%;
551
- text-overflow: ellipsis;
552
- overflow: hidden;
553
- line-height: 1.23;
554
- flex-grow: 1;
555
- }
556
- .top-ellipsis2,
557
- .top-ellipsis3 {
558
- max-width: fit-content;
559
- display: -webkit-box;
560
- -webkit-line-clamp: 2;
561
- -webkit-box-orient: vertical;
562
- overflow: hidden;
563
- }
564
- .top-ellipsis3 {
565
- -webkit-line-clamp: 3;
566
- }/* top-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
567
- .top-inited {}
568
-
569
- .top-hidden {
570
- display: none !important;
571
- }
572
-
573
- /* top-unvisible используется для скрытия элементов, без изменения видимости */
574
- .top-unvisible {
575
- width: 0;
576
- height: 0;
577
- overflow: hidden;
578
- position: absolute;
579
- }
580
-
581
- .top-loading {}
582
-
583
- .top-disabled {
584
- pointer-events: none;
585
- }
586
-
587
- .top-error,
588
- .top-error::placeholder,
589
- .top-error:before {
590
- --top-forms-border-color: var(--color-negative);
591
-
592
- border-color: var(--color-negative);
593
- }
594
- .top-error {
595
- --top-icon-color: var(--color-negative);
596
-
597
- color: var(--color-negative);
598
- }
599
- .top-error ~ .top-formsCaption {
600
- color: var(--color-negative);
601
- }
602
-
603
- .top-warning {
604
- --top-icon-color: var(--color-orange-500);
605
-
606
- color: var(--color-orange-500);
607
- }
608
-
609
- input.top-error {
610
- animation: top-error 0.8s;
611
- }
612
-
613
- @keyframes top-error {
614
- 0% {
615
- outline-offset: 10px;
616
- outline: 3px solid transparent;
617
- }
618
- 50% {
619
- outline: 3px solid var(--color-red-100);
620
- outline-offset: 2px;
621
- }
622
- 100% {
623
- outline: 3px solid transparent;
624
- outline-offset: 2px;
625
- }
626
- }@media only screen and (min-width: 900px) {
627
- .top-only-mobile {
628
- display: none !important;
629
- }
630
- }
631
- @media only screen and (max-width: 900px) {
632
- .top-only-pc {
633
- display: none !important;
634
- }
635
- }
636
-
637
- html:not([lang="ru"]) .top-only-ru,
638
- html:not([lang="en"]) .top-only-en {
639
- display: none !important;
640
- }
641
-
642
- html[data-is_admin="0"] .top-only-admin {
643
- display: none !important;
644
- }/* TODO: перенести в компонент */
645
- .top-select_arrow {
646
- --top-select_arrow-color: var(--color-gray-600);
647
- --top-select_arrow-size: 12px;
648
- --top-select_arrow-width: 24px;
649
-
650
- 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");
651
- background-size: 14px;
652
- background-position: calc(100% - var(--top-forms-padding)) 50%;
653
- background-repeat: no-repeat;
654
- padding-right: 32px;
655
- }
656
-
657
- .top-select_arrow ~ .top-cleaner {
658
- --top-select_arrow-width: 24px;
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;
659
648
  }