@topvisor/ui 0.0.8 → 0.0.10

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 (55) hide show
  1. package/README.md +11 -5
  2. package/c/Icon/Icon.amd.js +22 -0
  3. package/c/Icon/Icon.amd.js.map +1 -0
  4. package/c/Icon/Icon.js +22 -0
  5. package/c/Icon/Icon.js.map +1 -0
  6. package/c/README.md +86 -0
  7. package/c/button/button.amd.js +1 -1
  8. package/c/button/button.amd.js.map +1 -1
  9. package/c/button/button.js +1 -1
  10. package/c/button/button.js.map +1 -1
  11. package/c/example/example.amd.js +1 -1
  12. package/c/example/example.js +1 -1
  13. package/c/icomoon/demo-files/Read Me.txt +7 -0
  14. package/c/icomoon/demo-files/demo.css +161 -0
  15. package/c/icomoon/demo-files/demo.js +30 -0
  16. package/c/icomoon/demo.html +2931 -0
  17. package/c/icomoon/fonts/Topvisor-2.svg +232 -0
  18. package/c/icomoon/fonts/Topvisor-2.ttf +0 -0
  19. package/c/icomoon/fonts/Topvisor-2.woff +0 -0
  20. package/c/icomoon/selection.json +1 -0
  21. package/c/icomoon/style.css +644 -0
  22. package/c/style.css +23 -21
  23. package/core.css +398 -377
  24. package/dark.css +115 -115
  25. package/icomoon/Read Me.txt +7 -0
  26. package/icomoon/demo-files/Read Me.txt +7 -0
  27. package/icomoon/demo-files/demo.css +161 -0
  28. package/icomoon/demo-files/demo.js +30 -0
  29. package/icomoon/demo.html +2931 -0
  30. package/icomoon/fonts/Topvisor-2.svg +232 -0
  31. package/icomoon/fonts/Topvisor-2.ttf +0 -0
  32. package/icomoon/fonts/Topvisor-2.woff +0 -0
  33. package/icomoon/selection.json +1 -0
  34. package/icomoon/style.css +644 -0
  35. package/l/README.md +86 -0
  36. package/l/common/common.amd.js +22 -0
  37. package/l/common/common.amd.js.map +1 -0
  38. package/l/common/common.js +22 -0
  39. package/l/common/common.js.map +1 -0
  40. package/l/forms/forms.amd.js +51 -4
  41. package/l/forms/forms.amd.js.map +1 -1
  42. package/l/forms/forms.js +52 -4
  43. package/l/forms/forms.js.map +1 -1
  44. package/l/icomoon/demo-files/Read Me.txt +7 -0
  45. package/l/icomoon/demo-files/demo.css +161 -0
  46. package/l/icomoon/demo-files/demo.js +30 -0
  47. package/l/icomoon/demo.html +2931 -0
  48. package/l/icomoon/fonts/Topvisor-2.svg +232 -0
  49. package/l/icomoon/fonts/Topvisor-2.ttf +0 -0
  50. package/l/icomoon/fonts/Topvisor-2.woff +0 -0
  51. package/l/icomoon/selection.json +1 -0
  52. package/l/icomoon/style.css +644 -0
  53. package/l/style.css +23 -21
  54. package/light.css +128 -128
  55. package/package.json +1 -1
package/core.css CHANGED
@@ -1,378 +1,399 @@
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
- }/* элемент в виде ссылки */
205
- .g-link{ cursor: pointer; color: var(--color-text-link); }
206
- .g-link:hover{ text-decoration: underline; }
207
-
208
- /* блок с информацией */
209
- .g-comment{ color: var(--color-gray-350); font-size: 12px; }
210
-
211
- .g-title{ margin: 1em 0; font-weight: 600; }:root{
212
- --g-forms-radius: 8px;
213
- --g-forms-border-width: 1px;
214
- --g-style_outline-color: transparent;
215
-
216
- --g-forms-base-height: 32px; /* базовая высота поля, должна быть одинаковой у всех форм в одном контексте */
217
- --g-forms-base-height_l: 36px;
218
- --g-forms-base-height_xl: 40px;
219
-
220
- --g-forms-padding: 8px;
221
- --g-forms-padding_l: 12px;
222
- --g-forms-padding_xl: 16px;
223
-
224
- /* g-radio */
225
- --g-radio-color: var(--color-primary);
226
- --g-radio-color-hover: var(--color-primary-2);
227
- }
228
-
229
- /* placeholder для textarea */
230
- [contenteditable][placeholder]:empty:before{
231
- content: attr(placeholder);
232
- color: var(--color-text-secondary);
233
- }
234
-
235
- [type="text"].g,
236
- [type="number"].g,
237
- [type="date"].g,
238
- [type="email"].g,
239
- [type="password"].g,
240
- textarea.g,
241
- select.g,
242
- .top-button{
243
- box-sizing: border-box;
244
- border-radius: var(--g-forms-radius); border: var(--g-forms-border-width) solid var(--g-forms-border-color); height: var(--g-forms-base-height);
245
- padding: 0;
246
- padding-right: calc(var(--g-forms-padding) + var(--g-forms_clear-width) + var(--g_select_arrow-width));
247
- padding-left: calc(max(var(--g-forms-padding), var(--g-icon-both-width)));
248
-
249
- transition: border-color 150ms;
250
- }
251
-
252
- .top-button:not(:disabled):focus-visible,
253
- [type="checkbox"]:focus-visible,
254
- [type="radio"]:focus-visible{ outline: 2px solid var(--g-radio-color); z-index: 1; position: relative; }
255
- .top-button:not(:disabled):focus-visible{ outline-offset: 2px; }:root{
256
- --g-icon-size: 0px;
257
- --g-icon-width: 0px;
258
-
259
- --g-icon2-size: 0px;
260
- --g-icon2-width: 0px;
261
-
262
- --g-icon-both-width: 0px;
263
- }
264
-
265
- /* data-g-icon */
266
- [data-g-icon]{
267
- --g-icon-size: 24px;
268
- --g-icon-width: calc(var(--g-icon-size) + var(--g-forms-padding));
269
- --g-icon-color: inherit;
270
- }
271
- [data-g-icon2]{
272
- --g-icon2-size: 24px;
273
- --g-icon2-width: calc(var(--g-icon2-size) + 8px);
274
- --g-icon2-color: inherit;
275
- }
276
- [data-g-icon=""]{ --g-icon-width: 0px; }
277
- [data-g-icon2=""]{ --g-icon2-width: 0px; }
278
-
279
- [data-g-icon]:before,
280
- [data-g-icon2]:after{
281
- pointer-events: none;
282
- content: attr(data-g-icon);
283
- border-radius: var(--g-forms-radius);
284
- width: var(--g-icon-width);
285
- color: var(--g-icon-color); font-family: Topvisor-2; font-size: var(--g-icon-size); font-weight: 400; line-height: 1;
286
- display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
287
- }
288
- [data-g-icon2]:after{
289
- content: attr(data-g-icon2);
290
- width: var(--g-icon2-width);
291
- color: var(--g-icon2-color);
292
- font-size: var(--g-icon2-size);
293
- }
294
-
295
- /* ширина добавляемых элементов */
296
- [data-g-icon],
297
- [data-g-icon2]{ --g-icon-both-width: calc(var(--g-icon-width) + var(--g-icon2-width)); }
298
-
299
- /* убрать ширину добавляемых элементов */
300
- label.g[data-g-icon],
301
- label.g[data-g-icon2]{ position: relative; }
302
- label.g[data-g-icon]:before,
303
- label.g[data-g-icon2]:after{ position: absolute; z-index: 3; }
304
- label.g[data-g-icon][data-g-icon2]:after{ left: calc(var(--g-icon-width)); }
305
-
306
- [data-g-icon=""]:before{ font-family: Topvisor; }/* оформление строк с сокращением под три точки */
307
- .g-ellipsis {
308
- max-height: 100%;
309
- text-overflow: ellipsis;
310
- overflow: hidden;
311
- line-height: 1.23;
312
- flex-grow: 1;
313
- }
314
- .g-ellipsis2,
315
- .g-ellipsis3 {
316
- max-width: fit-content;
317
- display: -webkit-box;
318
- -webkit-line-clamp: 2;
319
- -webkit-box-orient: vertical;
320
- overflow: hidden;
321
- }
322
- .g-ellipsis3 {
323
- -webkit-line-clamp: 3;
324
- }/* g-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
325
- .g-inited{ }
326
-
327
- .g-hidden{ display: none !important; }
328
-
329
- /* g-unvisible используется для скрытия элементов, без изменения видимости */
330
- .g-unvisible{ width: 0; height: 0; overflow: hidden; position: absolute; }
331
-
332
- .g-loading{ }
333
-
334
- .g-error,
335
- .g-error::placeholder,
336
- .g-error:before{
337
- --g-forms-border-color: var(--color-negative);
338
-
339
- border-color: var(--color-negative);
340
- }
341
- .g-error{
342
- --g-icon-color: var(--color-negative);
343
-
344
- color: var(--color-negative);
345
- }
346
- .g-error ~ .g-caption{ color: var(--color-negative); }
347
-
348
- .g-warning{
349
- --g-icon-color: var(--color-orange-500);
350
-
351
- color: var(--color-orange-500);
352
- }
353
-
354
- input.g-error{ animation: g-error 0.3s; }
355
-
356
- @keyframes g-error{
357
- 0%{ }
358
- 30%{ box-shadow: inset var(--color-red-200) 0 0 20px; }
359
- 100%{ }
360
- }@media only screen and (min-width: 900px) {
361
- .g-only-mobile {
362
- display: none !important;
363
- }
364
- }
365
- @media only screen and (max-width: 900px) {
366
- .g-only-pc {
367
- display: none !important;
368
- }
369
- }
370
-
371
- html:not([lang="ru"]) .g-only-ru,
372
- html:not([lang="en"]) .g-only-en {
373
- display: none !important;
374
- }
375
-
376
- html[data-is_admin="0"] .g-only-admin {
377
- display: none !important;
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
+ }/* элемент в виде ссылки */
205
+ .g-link{ cursor: pointer; color: var(--color-text-link); }
206
+ .g-link:hover{ text-decoration: underline; }
207
+
208
+ /* блок с информацией */
209
+ .g-comment{ color: var(--color-gray-350); font-size: 12px; }
210
+
211
+ .g-title{ margin: 1em 0; font-weight: 600; }:root{
212
+ --g-forms-radius: 8px;
213
+ --g-forms-border-width: 1px;
214
+ --g-style_outline-color: transparent;
215
+
216
+ --g-forms-base-height: 32px; /* базовая высота поля, должна быть одинаковой у всех форм в одном контексте */
217
+ --g-forms-base-height_l: 36px;
218
+ --g-forms-base-height_xl: 40px;
219
+
220
+ --g-forms-padding: 8px;
221
+ --g-forms-padding_l: 12px;
222
+ --g-forms-padding_xl: 16px;
223
+
224
+ /* g-radio */
225
+ --g-radio-color: var(--color-primary);
226
+ --g-radio-color-hover: var(--color-primary-2);
227
+ }
228
+
229
+ /* placeholder для textarea */
230
+ [contenteditable][placeholder]:empty:before{
231
+ content: attr(placeholder);
232
+ color: var(--color-text-secondary);
233
+ }
234
+
235
+ [type="text"].g,
236
+ [type="number"].g,
237
+ [type="date"].g,
238
+ [type="email"].g,
239
+ [type="password"].g,
240
+ textarea.g,
241
+ select.g,
242
+ .top-button{
243
+ box-sizing: border-box;
244
+ border-radius: var(--g-forms-radius); border: var(--g-forms-border-width) solid var(--g-forms-border-color); height: var(--g-forms-base-height);
245
+ padding: 0;
246
+ padding-right: calc(var(--g-forms-padding) + var(--g-forms_clear-width) + var(--g_select_arrow-width));
247
+ padding-left: calc(max(var(--g-forms-padding), var(--g-icon-both-width)));
248
+
249
+ transition: border-color 150ms;
250
+ }
251
+
252
+ .top-button:not(:disabled):focus-visible,
253
+ [type="checkbox"]:focus-visible,
254
+ [type="radio"]:focus-visible{ outline: 2px solid var(--g-radio-color); z-index: 1; position: relative; }
255
+ .top-button:not(:disabled):focus-visible{ outline-offset: 2px; }
256
+
257
+ /* убрать ширину добавляемых элементов */
258
+ label.g[data-g-icon],
259
+ label.g[data-g-icon2] {
260
+ position: relative;
261
+ }
262
+ label.g[data-g-icon]:before,
263
+ label.g[data-g-icon2]:after {
264
+ position: absolute;
265
+ z-index: 3;
266
+ }
267
+ label.g[data-g-icon][data-g-icon2]:after {
268
+ left: calc(var(--g-icon-width));
269
+ }:root {
270
+ --g-icon-size: 0px;
271
+ --g-icon-width: 0px;
272
+
273
+ --g-icon2-size: 0px;
274
+ --g-icon2-width: 0px;
275
+
276
+ --g-icon-both-width: 0px;
277
+ }
278
+
279
+ /* data-g-icon */
280
+ [data-g-icon] {
281
+ --g-icon-size: 24px;
282
+ --g-icon-width: calc(var(--g-icon-size) + var(--g-forms-padding));
283
+ --g-icon-color: inherit;
284
+ }
285
+ [data-g-icon2] {
286
+ --g-icon2-size: 24px;
287
+ --g-icon2-width: calc(var(--g-icon2-size) + 8px);
288
+ --g-icon2-color: inherit;
289
+ }
290
+ [data-g-icon=""] {
291
+ --g-icon-width: 0px;
292
+ }
293
+ [data-g-icon2=""] {
294
+ --g-icon2-width: 0px;
295
+ }
296
+
297
+ [data-g-icon]:before,
298
+ [data-g-icon2]:after {
299
+ pointer-events: none;
300
+ content: attr(data-g-icon);
301
+ border-radius: var(--g-forms-radius);
302
+ width: var(--g-icon-width);
303
+ color: var(--g-icon-color);
304
+ font-family: Topvisor-2;
305
+ font-size: var(--g-icon-size);
306
+ font-weight: 400;
307
+ line-height: 1;
308
+ display: inline-flex;
309
+ align-items: center;
310
+ justify-content: center;
311
+ flex-shrink: 0;
312
+ }
313
+ [data-g-icon2]:after {
314
+ content: attr(data-g-icon2);
315
+ width: var(--g-icon2-width);
316
+ color: var(--g-icon2-color);
317
+ font-size: var(--g-icon2-size);
318
+ }
319
+
320
+ /* ширина добавляемых элементов */
321
+ [data-g-icon],
322
+ [data-g-icon2] {
323
+ --g-icon-both-width: calc(var(--g-icon-width) + var(--g-icon2-width));
324
+ }
325
+
326
+ [data-g-icon=""]:before {
327
+ font-family: Topvisor;
328
+ }.g-ellipsis {
329
+ max-height: 100%;
330
+ text-overflow: ellipsis;
331
+ overflow: hidden;
332
+ line-height: 1.23;
333
+ flex-grow: 1;
334
+ }
335
+ .g-ellipsis2,
336
+ .g-ellipsis3 {
337
+ max-width: fit-content;
338
+ display: -webkit-box;
339
+ -webkit-line-clamp: 2;
340
+ -webkit-box-orient: vertical;
341
+ overflow: hidden;
342
+ }
343
+ .g-ellipsis3 {
344
+ -webkit-line-clamp: 3;
345
+ }/* g-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
346
+ .g-inited{ }
347
+
348
+ .g-hidden{ display: none !important; }
349
+
350
+ /* g-unvisible используется для скрытия элементов, без изменения видимости */
351
+ .g-unvisible{ width: 0; height: 0; overflow: hidden; position: absolute; }
352
+
353
+ .g-loading{ }
354
+
355
+ .g-error,
356
+ .g-error::placeholder,
357
+ .g-error:before{
358
+ --g-forms-border-color: var(--color-negative);
359
+
360
+ border-color: var(--color-negative);
361
+ }
362
+ .g-error{
363
+ --g-icon-color: var(--color-negative);
364
+
365
+ color: var(--color-negative);
366
+ }
367
+ .g-error ~ .g-caption{ color: var(--color-negative); }
368
+
369
+ .g-warning{
370
+ --g-icon-color: var(--color-orange-500);
371
+
372
+ color: var(--color-orange-500);
373
+ }
374
+
375
+ input.g-error{ animation: g-error 0.3s; }
376
+
377
+ @keyframes g-error{
378
+ 0%{ }
379
+ 30%{ box-shadow: inset var(--color-red-200) 0 0 20px; }
380
+ 100%{ }
381
+ }@media only screen and (min-width: 900px) {
382
+ .g-only-mobile {
383
+ display: none !important;
384
+ }
385
+ }
386
+ @media only screen and (max-width: 900px) {
387
+ .g-only-pc {
388
+ display: none !important;
389
+ }
390
+ }
391
+
392
+ html:not([lang="ru"]) .g-only-ru,
393
+ html:not([lang="en"]) .g-only-en {
394
+ display: none !important;
395
+ }
396
+
397
+ html[data-is_admin="0"] .g-only-admin {
398
+ display: none !important;
378
399
  }