@emailmaker/filemanager 0.10.78 → 0.10.79

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.
package/file-manager.css CHANGED
@@ -1,2119 +1,2070 @@
1
- .em-filemanager .noFilesContainer {
2
- text-align: center;
3
- }
4
-
5
- .em-filemanager .noFilesImage {
6
- margin: calc(var(--marginLG) * 1px) auto;
7
- color: var(--colorPrimary);
8
- }
9
- .em-filemanager .noFilesImage > svg {
10
- width: 100%;
11
- height: 100%;
12
- }
13
-
14
- .em-filemanager .noFilesTitle {
15
- text-align: center;
16
- padding: 0 calc(var(--marginLG) * 1px);
17
- font-weight: 500;
18
- line-height: 1;
19
- font-size: 16px;
20
- }
21
-
22
- .em-filemanager .noFilesDescription {
23
- text-align: center;
24
- color: var(--colorTextSecondary);
25
- padding: 0 calc(var(--marginLG) * 1px);
26
- line-height: 1.5;
27
- margin: auto;
28
- max-width: 420px;
29
- }
30
- @charset "UTF-8";
31
- .em-filemanager .contentLayout {
1
+ .em-filemanager .iconsTab {
32
2
  display: flex;
33
3
  flex-direction: column;
34
4
  height: 100%;
35
5
  min-height: 0;
36
- padding: 36px 16px;
6
+ }
7
+ .em-filemanager .iconsTab.hasSearch {
8
+ padding-top: 0;
37
9
  }
38
10
 
39
- .em-filemanager .headerContainer {
11
+ .em-filemanager .iconsSearchWrapper {
12
+ width: 100%;
13
+ height: 100%;
14
+ min-height: 0;
15
+ overflow: hidden;
16
+ box-sizing: border-box;
17
+ line-height: 0;
40
18
  display: flex;
41
- justify-content: space-between;
42
- margin-bottom: calc(var(--marginLG) * 1px);
19
+ flex-direction: column;
43
20
  align-items: center;
44
- padding: calc(var(--marginLG) * 1px) calc(var(--marginLG) * 1px) 0 calc(var(--marginLG) * 1px);
21
+ padding: 24px;
45
22
  }
46
23
 
47
- .em-filemanager .actionsContainer {
24
+ .em-filemanager .iconsSearchForm {
48
25
  display: flex;
49
26
  gap: 8px;
27
+ width: 100%;
28
+ margin-bottom: 0;
50
29
  }
51
30
 
52
- .em-filemanager .filesContainer {
53
- position: relative;
54
- flex: 1;
55
- min-height: 0;
56
- overflow-y: auto;
31
+ .em-filemanager .iconsSearchFormCenteredContainer {
57
32
  display: flex;
58
33
  flex-direction: column;
59
- z-index: 1;
60
- -webkit-overflow-scrolling: touch;
61
- isolation: isolate;
34
+ align-items: flex-start;
35
+ justify-content: flex-start;
36
+ width: 100%;
37
+ padding: 24px 24px 0;
62
38
  }
63
39
 
64
- .em-filemanager .filesLoadingOverlay {
65
- position: absolute;
66
- inset: 0;
67
- z-index: 5;
40
+ .em-filemanager .iconsSearchFormCentered {
68
41
  display: flex;
69
- align-items: center;
42
+ flex-direction: row;
43
+ width: 100%;
44
+ align-items: flex-start;
70
45
  justify-content: center;
71
- background: rgba(255, 255, 255, 0.45);
72
- backdrop-filter: blur(1px);
73
- pointer-events: auto;
74
46
  }
75
-
76
- .em-filemanager .emptyStateWrapper {
77
- flex: 1;
78
- display: flex;
79
- justify-content: center;
80
- align-items: center;
47
+ .em-filemanager .iconsSearchFormCentered .iconsSearchFormInput {
48
+ width: 640px;
49
+ max-width: 100%;
50
+ padding: 0;
51
+ margin: auto auto 12px;
52
+ transition: all 300ms ease;
81
53
  }
82
-
83
- .em-filemanager .searchContainer {
84
- display: flex;
85
- gap: 16px;
86
- align-items: center;
87
- width: 300px;
54
+ .em-filemanager .iconsSearchFormCentered .iconsSearchFormInputInput {
55
+ max-width: 100%;
56
+ width: 100%;
88
57
  }
89
58
 
90
- .em-filemanager .breadcrumbContainer {
91
- margin-bottom: calc(var(--margin) * 1px);
59
+ .em-filemanager .iconsSearchFormInput {
60
+ width: 240px;
61
+ padding: 0;
62
+ margin-bottom: 0;
63
+ transition: all 300ms ease;
92
64
  }
93
65
 
94
- .em-filemanager .paginationContainer {
66
+ .em-filemanager .iconsSearchResults {
67
+ width: 100%;
95
68
  display: flex;
96
- justify-content: center;
97
- margin-top: calc(var(--margin) * 1px);
98
- margin-bottom: calc(var(--margin) * 1px);
99
- height: 90px;
69
+ flex-direction: row;
70
+ gap: 8px;
71
+ align-items: flex-start;
72
+ justify-content: flex-start;
73
+ }
74
+ .em-filemanager .iconsSearchResults .iconsSearchFormInput {
75
+ width: 240px;
76
+ flex: 0 0 auto;
77
+ margin-bottom: 0;
100
78
  }
101
79
 
102
- .em-filemanager .paginationContainerEnd {
80
+ .em-filemanager .iconsControlsControls {
103
81
  display: flex;
104
- justify-content: flex-end;
105
- margin-top: calc(var(--margin) * 1px);
82
+ align-items: center;
83
+ gap: 16px;
106
84
  }
107
85
 
108
- .em-filemanager .uploadIcon > span {
109
- font-size: 64px;
110
- color: var(--colorPrimary);
111
- margin-bottom: calc(var(--margin) * 1px);
112
- animation: uploadIconPulse 2s infinite;
86
+ .em-filemanager .iconsSearchFormInputInput {
87
+ width: 100%;
113
88
  }
114
89
 
115
- .em-filemanager .uploadText {
116
- font-size: 18px;
117
- color: var(--colorPrimary);
118
- font-weight: 500;
119
- text-align: center;
120
- margin-top: calc(var(--marginXS) * 1px);
90
+ .em-filemanager .iconsControls {
91
+ display: flex;
92
+ justify-content: space-between;
93
+ align-items: center;
94
+ width: 100%;
95
+ padding: 24px 6px 24px 24px;
96
+ border-bottom: 1px solid var(--colorBorder);
121
97
  }
122
98
 
123
- .em-filemanager .uploadSubtext {
124
- font-size: 14px;
125
- color: var(--colorTextSecondary);
126
- text-align: center;
127
- margin-top: calc(var(--paddingXXS) * 1px);
99
+ .em-filemanager .iconsControlsFamilySlug {
100
+ opacity: 0.7;
128
101
  }
129
102
 
130
- .em-filemanager .tableContainer {
131
- flex: 1;
132
- min-height: 0;
133
- overflow: hidden;
134
- width: 100%;
103
+ .em-filemanager .iconsControlElement {
135
104
  display: flex;
136
- flex-direction: column;
137
- position: relative;
138
- z-index: 0;
105
+ align-items: center;
106
+ gap: 8px;
107
+ }
108
+ .em-filemanager .iconsControlElement > span {
109
+ color: var(--colorTextTertiary);
139
110
  }
140
111
 
141
- .em-filemanager .tableLoadingWrapper {
142
- width: 100%;
112
+ .em-filemanager .iconsControlsStrokeWidth {
113
+ display: flex;
114
+ align-items: center;
115
+ gap: 8px;
143
116
  }
144
- .tableLoadingWrapper .ant-table-tbody > tr {
145
- cursor: pointer;
117
+ .em-filemanager .iconsControlsStrokeWidth > span {
118
+ color: var(--colorTextTertiary);
146
119
  }
147
-
148
- .em-filemanager .imagePreview {
149
- max-width: 100%;
150
- display: block;
151
- transition: transform 0.3s ease;
120
+ .em-filemanager .iconsControlsStrokeWidth .ant-input-number {
121
+ width: 80px;
152
122
  }
153
123
 
154
- .em-filemanager .imagePreview:hover {
155
- transform: scale(1.05);
124
+ .em-filemanager .iconsControlsCompact {
125
+ position: relative;
156
126
  }
157
127
 
158
- .em-filemanager .fileManagerTableFolder {
159
- display: flex;
160
- justify-content: center;
161
- align-items: center;
128
+ .em-filemanager .iconsControlsInputNumber {
129
+ width: 110px;
162
130
  }
163
131
 
164
- .em-filemanager .fileManagerTableFolderInner {
165
- display: flex;
132
+ .em-filemanager .iconsControlsDropdownBtn {
133
+ padding: 0;
134
+ height: 32px;
135
+ min-width: 36px;
136
+ width: 36px;
137
+ border-top-right-radius: 6px !important;
138
+ border-bottom-right-radius: 6px !important;
139
+ border-top-left-radius: 0 !important;
140
+ border-bottom-left-radius: 0 !important;
141
+ display: inline-flex;
166
142
  align-items: center;
167
- justify-content: flex-start;
168
- width: 100%;
169
- height: 100%;
143
+ justify-content: center;
144
+ color: var(--colorTextTertiary);
145
+ }
146
+ .em-filemanager .iconsControlsDropdownBtn:hover {
147
+ color: var(--colorTextSecondary);
170
148
  }
171
149
 
172
- /* Breadcrumb styles */
173
- .em-filemanager .breadcrumbLink {
174
- cursor: pointer;
150
+ .em-filemanager .iconsControlsCompact .iconsControlsDropdownBtn {
151
+ border-top-right-radius: 6px !important;
152
+ border-bottom-right-radius: 6px !important;
175
153
  }
176
154
 
177
- /* Sort select styles */
178
- .em-filemanager .sortSelect {
179
- width: 220px;
155
+ .em-filemanager .sliderDropdown {
156
+ position: absolute;
157
+ left: 50%;
158
+ transform: translateX(-50%);
159
+ top: calc(100% + 6px);
160
+ width: 240px;
161
+ background: #fff;
162
+ border: 1px solid rgba(0, 0, 0, 0.08);
163
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
164
+ border-radius: 8px;
165
+ padding: 10px 12px;
166
+ z-index: 1000;
180
167
  }
181
168
 
182
- /* Table column styles */
183
- .em-filemanager .fileNameCol {
184
- max-width: calc(100% - 430px);
185
- padding: 8px;
169
+ .em-filemanager .iconsControlsHeader {
170
+ display: flex;
171
+ align-items: center;
186
172
  }
187
173
 
188
- .em-filemanager .fileItemCount {
189
- font-size: 12px;
190
- color: var(--colorTextTertiary);
191
- margin-top: 2px;
174
+ .em-filemanager .iconsSearchFormSelect {
175
+ width: 160px !important;
192
176
  }
193
177
 
194
- .em-filemanager .fileSize {
195
- color: var(--colorTextTertiary);
178
+ .em-filemanager .iconsSearchFormStyleItem {
179
+ margin-bottom: 0;
180
+ animation: fadeInSlide 300ms ease forwards;
196
181
  }
197
182
 
198
- .em-filemanager .fileDate {
199
- color: var(--colorTextTertiary);
200
- white-space: nowrap;
201
- position: relative;
202
- text-overflow: ellipsis;
203
- overflow: hidden;
204
- display: block;
183
+ @keyframes fadeInSlide {
184
+ from {
185
+ opacity: 0;
186
+ transform: translateX(-10px);
187
+ }
188
+ to {
189
+ opacity: 1;
190
+ transform: translateX(0);
191
+ }
205
192
  }
206
-
207
- .em-filemanager .tableMenu {
208
- padding: 20px 7px;
209
- display: flex;
210
- text-align: center;
211
- justify-content: center;
193
+ .em-filemanager .iconsSearchDivider {
194
+ margin-top: 24px;
195
+ margin-bottom: 0;
196
+ border-color: var(--colorBorder);
197
+ width: 100%;
212
198
  }
213
199
 
214
- .em-filemanager .tableImagePreview {
215
- display: block !important;
216
- object-fit: contain;
217
- border-radius: calc(var(--borderRadius) * 1px);
200
+ .em-filemanager .iconsSearchFormInputIcon {
201
+ font-size: 16px;
202
+ cursor: pointer;
218
203
  }
219
204
 
220
- .em-filemanager .tableFolderIcon {
221
- color: var(--colorPrimary);
222
- font-size: 28px;
223
- width: 44px;
224
- height: 44px;
205
+ .em-filemanager .iconsGrid {
206
+ width: 100%;
207
+ flex: 1 1 auto;
208
+ min-height: 0;
209
+ overflow: auto;
210
+ overflow-x: hidden;
211
+ box-sizing: border-box;
212
+ padding: 24px;
225
213
  }
226
- .em-filemanager .tableFolderIcon > svg {
214
+
215
+ .em-filemanager .iconsBottomBar {
216
+ position: sticky;
217
+ bottom: 0;
218
+ background: var(--colorBgLayout);
219
+ z-index: 5;
227
220
  width: 100%;
228
- height: 100%;
229
221
  }
230
222
 
231
- .em-filemanager .buttonDeselected {
232
- margin-left: 12px;
233
- margin-right: 12px;
223
+ .em-filemanager .iconsBottomBarContent {
224
+ display: flex;
225
+ justify-content: right;
226
+ padding: 17px 24px;
227
+ align-items: center;
234
228
  }
235
229
 
236
- .em-filemanager .buttonSelectAll {
237
- margin-left: 12px;
230
+ .em-filemanager .iconsGridEmpty {
231
+ margin: 40px 0px;
238
232
  }
239
233
 
240
- .em-filemanager .gridRow {
241
- margin: 0;
242
- gap: 20px;
243
- padding: 0 24px 24px;
234
+ .em-filemanager .iconsGridEmptyState {
235
+ display: flex;
236
+ justify-content: center;
237
+ align-items: center;
238
+ padding: 0;
244
239
  }
245
240
 
246
- .em-filemanager .gridCard {
247
- border-radius: 16px;
248
- overflow: hidden;
249
- width: 220px;
250
- height: 100%;
251
- -webkit-user-select: none;
252
- user-select: none;
253
- cursor: pointer;
254
- border: 2px solid transparent;
241
+ .em-filemanager .resultsContainer {
242
+ width: 640px;
243
+ max-width: 100%;
244
+ overflow: auto;
245
+ box-sizing: border-box;
246
+ padding: 60px 16px;
247
+ border-radius: 12px;
248
+ background-color: var(--colorBgContainer);
249
+ display: flex;
250
+ align-items: center;
251
+ justify-content: center;
252
+ flex-direction: column;
253
+ text-align: center;
255
254
  }
256
- .em-filemanager .gridCard:hover {
255
+
256
+ .em-filemanager .playButton {
257
257
  color: var(--colorPrimary);
258
- box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.1607843137), 0 3px 6px 0 rgba(0, 0, 0, 0.1215686275), 0 5px 12px 4px rgba(0, 0, 0, 0.0901960784);
259
- }
260
- .gridCard .ant-card-body {
261
- height: calc(100% - 180px);
262
- max-height: calc(100% - 180px);
263
- display: flex;
264
- flex-direction: row;
265
- justify-content: space-between;
258
+ margin-bottom: 16px;
266
259
  }
267
260
 
268
- .em-filemanager .selectedRow {
269
- outline: 2px solid var(--colorPrimary) !important;
270
- outline-offset: -1px;
261
+ .em-filemanager .title {
262
+ font-size: 16px;
263
+ font-weight: 600;
264
+ line-height: 1.2;
265
+ margin-bottom: 4px;
271
266
  }
272
267
 
273
- .em-filemanager .gridCardSelected,
274
- .em-filemanager .gridCardSelected:hover {
275
- border-color: var(--colorPrimary);
268
+ .em-filemanager .subtitle {
269
+ font-size: 14px;
270
+ color: var(--colorSecondary);
271
+ line-height: 1.2;
276
272
  }
277
- .em-filemanager .gridCardSelected .gridCheckbox,
278
- .em-filemanager .gridCardSelected:hover .gridCheckbox {
279
- opacity: 1;
273
+
274
+ .em-filemanager .iconsGridInfiniteScroll {
275
+ overflow: hidden !important;
280
276
  }
281
277
 
282
- .em-filemanager .gridCardContent {
283
- position: relative;
284
- padding: 0;
285
- height: 100%;
278
+ .em-filemanager .iconsGridLoadingMore {
286
279
  display: flex;
287
- flex-direction: column;
288
- justify-content: space-between;
289
- width: 100%;
280
+ justify-content: center;
281
+ padding: 16px 0;
290
282
  }
291
283
 
292
- .em-filemanager .gridCheckbox {
293
- position: absolute;
294
- top: 8px;
295
- left: 8px;
296
- z-index: 1;
297
- opacity: 0;
284
+ .em-filemanager .iconsGridGrid {
285
+ display: grid;
286
+ grid-template-columns: repeat(auto-fill, minmax(var(--icons-grid-min-col, 148px), 1fr));
287
+ gap: 16px;
298
288
  }
299
289
 
300
- .em-filemanager .gridPreviewContainer {
290
+ .em-filemanager .iconsGridVirtualCanvas {
291
+ position: relative;
301
292
  width: 100%;
302
- height: 100%;
303
- justify-content: center;
304
- align-items: center;
305
- margin-bottom: calc(var(--marginXS) * 1px);
306
293
  }
307
294
 
308
- .em-filemanager .gridPreviewContainerFolder {
309
- width: 100%;
310
- /* aspect-ratio: 1 / 1; */
311
- display: flex !important;
312
- justify-content: center;
313
- align-items: center;
314
- background-color: var(--colorBgContainer);
315
- border-radius: calc(var(--borderRadiusSM) * 1px);
316
- margin-bottom: calc(var(--marginXS) * 1px);
317
- height: 100%;
295
+ .em-filemanager .iconsGridItem {
296
+ position: relative;
297
+ border-radius: 8px;
298
+ padding: 12px;
299
+ background: #fff;
300
+ cursor: pointer;
301
+ display: flex;
302
+ flex-direction: column;
303
+ box-sizing: border-box;
304
+ overflow: hidden;
305
+ box-shadow: inset 0 0 0 1px #f0f0f0;
318
306
  }
319
307
 
320
- .em-filemanager .gridFolderIcon {
308
+ .em-filemanager .iconsGridItemThumbnail {
321
309
  display: flex;
322
310
  align-items: center;
323
311
  justify-content: center;
324
- border-radius: 8px;
312
+ flex: 1 1 auto;
313
+ min-height: 0;
325
314
  }
326
315
 
327
- .em-filemanager .gridFolderIconImage {
328
- color: var(--colorPrimary);
329
- width: 64px;
330
- height: 64px;
331
- }
332
- .em-filemanager .gridFolderIconImage > svg {
316
+ .em-filemanager .iconsGridItemSvg {
333
317
  width: 100%;
334
318
  height: 100%;
319
+ display: flex;
320
+ align-items: center;
321
+ justify-content: center;
335
322
  }
336
323
 
337
- .em-filemanager .gridFileName {
338
- font-weight: 400;
339
- line-height: 1.3;
340
- margin-bottom: 4px;
341
- text-overflow: ellipsis;
342
- word-break: break-word;
343
- display: -webkit-box;
344
- -webkit-line-clamp: 2;
345
- -webkit-box-orient: vertical;
346
- overflow: hidden;
324
+ .em-filemanager .iconsGridItemImg {
325
+ max-width: 100%;
326
+ object-fit: contain;
347
327
  }
348
328
 
349
- .em-filemanager .gridFileInfo {
350
- color: #8c8c8c;
351
- font-size: 13px;
352
- line-height: 1.3;
329
+ .em-filemanager .iconsGridItemName {
330
+ margin-top: 8px;
331
+ font-size: 12px;
332
+ line-height: 1.2;
353
333
  white-space: nowrap;
334
+ text-overflow: ellipsis;
335
+ overflow: hidden;
336
+ flex: 0 0 auto;
354
337
  }
355
338
 
356
- .em-filemanager .gridCard .gridFileMenu {
357
- opacity: 0;
358
- }
359
- .em-filemanager .gridCard:hover .gridCheckbox,
360
- .em-filemanager .gridCard:hover .gridFileMenu {
361
- opacity: 1;
362
- }
363
-
364
- .em-filemanager .gridFileMenuButton {
365
- padding: 0;
366
- width: calc(var(--formControlHeight) * 1px);
367
- min-width: calc(var(--formControlHeight) * 1px);
368
- height: calc(var(--formControlHeight) * 1px);
369
- min-height: calc(var(--formControlHeight) * 1px);
339
+ .em-filemanager .iconsGridItemSelected::after {
340
+ content: "";
341
+ position: absolute;
342
+ inset: 0;
343
+ border: 2px solid #1890ff;
344
+ border-radius: inherit;
345
+ pointer-events: none;
370
346
  }
371
347
 
372
- .em-filemanager .classsssssss {
373
- background: red;
374
- color: #4361ee;
348
+ .em-filemanager .iconsGridItemInsertButton {
349
+ position: absolute;
350
+ top: 8px;
351
+ right: 8px;
375
352
  }
376
353
 
377
- .em-filemanager .sortContainer {
354
+ .em-filemanager .iconsGridLoading {
378
355
  display: flex;
379
356
  align-items: center;
380
- gap: 8px;
357
+ justify-content: center;
358
+ width: 100%;
359
+ min-height: 50vh;
381
360
  }
382
361
 
383
- .em-filemanager .sortLabel {
384
- font-size: 14px;
385
- color: #6b7280;
362
+ .em-filemanager .iconsControlsBackButton {
363
+ margin-right: 20px;
386
364
  }
387
365
 
388
- .em-filemanager .actionsBox {
366
+ .em-filemanager .iconsGridCheckbox {
367
+ position: absolute;
368
+ top: 8px;
369
+ left: 8px;
370
+ z-index: 2;
371
+ opacity: 0;
372
+ pointer-events: none;
373
+ transition: opacity 0.15s ease-in-out;
374
+ }
375
+
376
+ .em-filemanager .iconsGridItem:hover .iconsGridCheckbox {
377
+ opacity: 1;
378
+ pointer-events: auto;
379
+ }
380
+
381
+ .em-filemanager .iconsGridShowCheckboxes .iconsGridCheckbox {
382
+ opacity: 1;
383
+ pointer-events: auto;
384
+ }
385
+
386
+ .em-filemanager .iconsHeaderContainer {
389
387
  display: flex;
390
388
  align-items: center;
391
- gap: 8px;
389
+ justify-content: space-between;
390
+ gap: 12px;
391
+ width: 100%;
392
+ box-sizing: border-box;
393
+ padding: 24px 24px;
394
+ margin: 0;
395
+ border-bottom: 1px solid var(--colorBorder);
392
396
  }
393
397
 
394
- @media (max-width: 1550px) {
395
- .em-filemanager .gridCard {
396
- width: 220px;
397
- }
398
+ .em-filemanager .iconsHeaderContainerLeft {
399
+ display: flex;
400
+ gap: 10px;
401
+ align-items: center;
398
402
  }
399
- /* Upload Container Styles */
400
- .em-filemanager .uploadContainer {
401
- width: 640px;
402
- border-radius: 12px;
403
- padding: 20px;
404
- margin: auto;
405
- position: relative;
403
+
404
+ .em-filemanager .iconsHeaderDivider {
405
+ margin-top: 24px;
406
+ margin-bottom: 0;
407
+ border-color: var(--colorBorder);
408
+ width: 100%;
406
409
  }
407
410
 
408
- .em-filemanager .uploadArea {
409
- border: 2px dashed var(--colorBorder);
410
- border-radius: 12px;
411
- background-color: var(--colorBgContainer);
412
- cursor: pointer;
413
- padding: 16px 36px;
414
- text-align: center;
415
- margin-bottom: 16px;
411
+ .em-filemanager .copyToFolderModalBody {
416
412
  position: relative;
417
413
  }
418
- .em-filemanager .uploadArea:hover {
419
- border-color: var(--colorPrimary);
414
+
415
+ .em-filemanager .copyToFolderModalLoadingOverlay {
416
+ position: absolute;
417
+ inset: 0;
418
+ z-index: 10;
419
+ display: flex;
420
+ align-items: center;
421
+ justify-content: center;
422
+ background: rgba(255, 255, 255, 0.6);
423
+ pointer-events: all;
420
424
  }
421
- .em-filemanager .uploadArea.active {
422
- border-color: var(--colorPrimary);
423
- background-color: var(--colorBgContainer);
425
+ .em-filemanager .noFilesContainer {
426
+ text-align: center;
424
427
  }
425
428
 
426
- .em-filemanager .uploadIcon {
427
- font-size: 48px;
429
+ .em-filemanager .noFilesImage {
430
+ margin: calc(var(--marginLG) * 1px) auto;
428
431
  color: var(--colorPrimary);
429
- margin-bottom: 10px;
430
432
  }
431
-
432
- .em-filemanager .blockText {
433
- display: flex;
434
- flex-direction: column;
435
- text-align: left;
433
+ .em-filemanager .noFilesImage > svg {
434
+ width: 100%;
435
+ height: 100%;
436
436
  }
437
437
 
438
- .em-filemanager .textTitle {
438
+ .em-filemanager .noFilesTitle {
439
+ text-align: center;
440
+ padding: 0 calc(var(--marginLG) * 1px);
441
+ font-weight: 500;
442
+ line-height: 1;
439
443
  font-size: 16px;
440
- font-weight: 600;
441
- color: var(--colorTextPrimary);
442
444
  }
443
445
 
444
- .em-filemanager .textDescription {
445
- font-size: 14px;
446
- color: #8c8c8c;
446
+ .em-filemanager .noFilesDescription {
447
+ text-align: center;
448
+ color: var(--colorTextSecondary);
449
+ padding: 0 calc(var(--marginLG) * 1px);
450
+ line-height: 1.5;
451
+ margin: auto;
452
+ max-width: 420px;
447
453
  }
448
-
449
- .em-filemanager .buttons {
454
+ @charset "UTF-8";
455
+ .em-filemanager .contentLayout {
450
456
  display: flex;
451
- gap: 16px;
457
+ flex-direction: column;
458
+ height: 100%;
459
+ min-height: 0;
460
+ padding: 36px 16px;
452
461
  }
453
462
 
454
- .em-filemanager .btnAi,
455
- .em-filemanager .btnPhoto {
456
- flex: 1;
457
- font-size: 14px;
458
- cursor: pointer;
463
+ .em-filemanager .headerContainer {
459
464
  display: flex;
465
+ justify-content: space-between;
466
+ margin-bottom: calc(var(--marginLG) * 1px);
460
467
  align-items: center;
461
- justify-content: center;
462
- border: 1px solid var(--colorBorder);
463
- border-radius: 12px;
464
- background-color: var(--colorBgContainer);
465
- padding: 24px 26px;
466
- gap: 16px;
468
+ padding: calc(var(--marginLG) * 1px) calc(var(--marginLG) * 1px) 0 calc(var(--marginLG) * 1px);
467
469
  }
468
- .em-filemanager .btnAi:hover,
469
- .em-filemanager .btnPhoto:hover {
470
- border-color: var(--colorPrimary);
470
+
471
+ .em-filemanager .actionsContainer {
472
+ display: flex;
473
+ gap: 8px;
471
474
  }
472
475
 
473
- /* Drag overlay for non-empty folder drop */
474
- .em-filemanager .dragOverlay {
476
+ .em-filemanager .filesContainer {
477
+ position: relative;
478
+ flex: 1;
479
+ min-height: 0;
480
+ overflow-y: auto;
481
+ display: flex;
482
+ flex-direction: column;
483
+ z-index: 1;
484
+ -webkit-overflow-scrolling: touch;
485
+ isolation: isolate;
486
+ }
487
+
488
+ .em-filemanager .filesLoadingOverlay {
475
489
  position: absolute;
476
- top: 0;
477
- left: 0;
478
- right: 0;
479
- bottom: 0;
480
- background: rgba(0, 0, 0, 0.35);
490
+ inset: 0;
491
+ z-index: 5;
481
492
  display: flex;
482
493
  align-items: center;
483
494
  justify-content: center;
484
- z-index: 99999;
495
+ background: rgba(255, 255, 255, 0.45);
496
+ backdrop-filter: blur(1px);
485
497
  pointer-events: auto;
486
- backdrop-filter: blur(2px);
487
- -webkit-backdrop-filter: blur(2px);
488
- }
489
- .em-filemanager .dragOverlay .uploadIcon {
490
- color: var(--colorPrimary, var(--ant-color-primary, #1677ff)) !important;
491
498
  }
492
- .em-filemanager .dragOverlay .uploadIcon span,
493
- .em-filemanager .dragOverlay .uploadIcon .anticon,
494
- .em-filemanager .dragOverlay .uploadIcon svg {
495
- color: inherit !important;
499
+
500
+ .em-filemanager .emptyStateWrapper {
501
+ flex: 1;
502
+ display: flex;
503
+ justify-content: center;
504
+ align-items: center;
496
505
  }
497
506
 
498
- .em-filemanager .dragOverlayInner {
499
- background: rgba(255, 255, 255, 0.95);
500
- border: 2px dashed var(--colorPrimary);
501
- border-radius: 16px;
502
- padding: 28px 36px;
503
- text-align: center;
504
- pointer-events: none;
507
+ .em-filemanager .searchContainer {
508
+ display: flex;
509
+ gap: 16px;
510
+ align-items: center;
511
+ width: 300px;
505
512
  }
506
513
 
507
- /* Невидимый capture layer для перехвата drag событий в Chrome на macOS.
508
- Покрывает весь viewport с максимальным z-index, чтобы перехватить события
509
- до того, как их перехватит родительское приложение. */
510
- .em-filemanager .dragCaptureLayer {
511
- position: fixed !important;
512
- top: 0 !important;
513
- left: 0 !important;
514
- right: 0 !important;
515
- bottom: 0 !important;
516
- width: 100vw !important;
517
- height: 100vh !important;
518
- z-index: 2147483647 !important;
519
- background: transparent !important;
520
- pointer-events: auto !important;
521
- opacity: 1 !important;
522
- cursor: copy;
523
- isolation: isolate;
524
- overflow: visible !important;
525
- transform: none !important;
514
+ .em-filemanager .breadcrumbContainer {
515
+ margin-bottom: calc(var(--margin) * 1px);
526
516
  }
527
517
 
528
- /* Полноэкранный overlay при drag файлов (покрывает viewport, в т.ч. маску модалки) */
529
- .em-filemanager .dragOverlayGlobal {
530
- position: fixed !important;
531
- top: 0 !important;
532
- left: 0 !important;
533
- right: 0 !important;
534
- bottom: 0 !important;
535
- width: 100vw !important;
536
- height: 100vh !important;
537
- z-index: 2147483646 !important;
538
- background: rgba(0, 0, 0, 0.35) !important;
539
- display: flex !important;
540
- align-items: center;
518
+ .em-filemanager .paginationContainer {
519
+ display: flex;
541
520
  justify-content: center;
542
- pointer-events: auto !important;
543
- backdrop-filter: blur(2px);
544
- -webkit-backdrop-filter: blur(2px);
545
- isolation: isolate;
546
- overflow: visible !important;
547
- transform: none !important;
521
+ margin-top: calc(var(--margin) * 1px);
522
+ margin-bottom: calc(var(--margin) * 1px);
523
+ height: 90px;
548
524
  }
549
- .em-filemanager .dragOverlayGlobal .uploadIcon {
550
- color: var(--colorPrimary, var(--ant-color-primary, #1677ff)) !important;
525
+
526
+ .em-filemanager .paginationContainerEnd {
527
+ display: flex;
528
+ justify-content: flex-end;
529
+ margin-top: calc(var(--margin) * 1px);
551
530
  }
552
- .em-filemanager .dragOverlayGlobal .uploadIcon span,
553
- .em-filemanager .dragOverlayGlobal .uploadIcon .anticon,
554
- .em-filemanager .dragOverlayGlobal .uploadIcon svg {
555
- color: inherit !important;
531
+
532
+ .em-filemanager .uploadIcon > span {
533
+ font-size: 64px;
534
+ color: var(--colorPrimary);
535
+ margin-bottom: calc(var(--margin) * 1px);
536
+ animation: uploadIconPulse 2s infinite;
556
537
  }
557
538
 
558
- .em-filemanager .noFiles {
559
- width: 640px;
560
- text-align: center;
561
- padding: calc(var(--marginLG) * 1px);
562
- padding-top: 57px !important;
563
- padding-bottom: 57px !important;
564
- margin: auto;
565
- line-height: 1.3;
566
- border: 1px solid var(--colorBorderSecondary);
567
- border-radius: calc(var(--borderRadius) * 2px);
568
- }
569
-
570
- .em-filemanager .noFilesIcon {
539
+ .em-filemanager .uploadText {
540
+ font-size: 18px;
571
541
  color: var(--colorPrimary);
572
- margin-bottom: calc(var(--margin) * 1px);
573
- }
574
-
575
- .em-filemanager .textTitle_trash {
576
- margin-top: 2px;
577
- font-size: 16px;
578
- font-style: normal;
579
- font-weight: 600;
542
+ font-weight: 500;
543
+ text-align: center;
544
+ margin-top: calc(var(--marginXS) * 1px);
580
545
  }
581
546
 
582
- .em-filemanager .textDescription_trash {
583
- margin-top: 10px;
547
+ .em-filemanager .uploadSubtext {
584
548
  font-size: 14px;
585
- font-style: normal;
586
- font-weight: 400;
587
- line-height: normal;
588
- color: #8c8c8c;
589
- }
590
- @charset "UTF-8";
591
- .em-filemanager .folderTree .emptyFolderContainer {
549
+ color: var(--colorTextSecondary);
592
550
  text-align: center;
593
- color: #999;
594
- line-height: 1.3;
595
- }
596
- .em-filemanager .folderTree .folderItemContainer {
597
- display: flex;
598
- justify-content: space-between;
599
- align-items: center;
600
- width: 100%;
601
- min-width: 0; /* Позволяет flex-элементам сжиматься */
551
+ margin-top: calc(var(--paddingXXS) * 1px);
602
552
  }
603
- .em-filemanager .folderTree .folderItemContainer .folderLabel {
604
- display: flex;
605
- align-items: center;
606
- gap: 8px;
607
- padding: 0 8px;
553
+
554
+ .em-filemanager .tableContainer {
608
555
  flex: 1;
609
- min-width: 0; /* Позволяет сжиматься */
610
- overflow: hidden; /* Скрываем переполнение */
611
- /* Иконки не должны сжиматься */
612
- }
613
- .em-filemanager .folderTree .folderItemContainer .folderLabel > svg,
614
- .em-filemanager .folderTree .folderItemContainer .folderLabel > *:first-child {
615
- flex-shrink: 0;
616
- }
617
- .em-filemanager .folderTree .folderItemContainer .folderLabel .folderLabelItem {
618
- font-size: 14px;
619
- white-space: nowrap; /* Запрещаем перенос строк */
620
- overflow: hidden; /* Скрываем переполнение */
621
- text-overflow: ellipsis; /* Показываем троеточие */
622
- flex: 1; /* Занимает доступное место */
623
- min-width: 0; /* Позволяет сжиматься */
624
- }
625
- .em-filemanager .folderTree .folderItemContainer .fileCount {
626
- color: #666;
627
- font-size: 12px;
628
- min-width: 20px;
629
- flex-shrink: 0; /* Запрещаем сжатие счетчика */
630
- }
631
- .em-filemanager .folderTree .foldersTitle {
632
- cursor: pointer;
556
+ min-height: 0;
557
+ overflow: hidden;
633
558
  width: 100%;
634
- min-width: 0; /* Позволяет сжиматься */
635
- overflow: hidden; /* Скрываем переполнение */
636
- }
637
- .em-filemanager .folderTree .foldersTitle .foldersTitleItem {
638
559
  display: flex;
639
- align-items: center;
640
- gap: 8px;
641
- padding: 0 8px;
642
- flex: 1;
643
- min-width: 0; /* Позволяет сжиматься */
644
- overflow: hidden; /* Скрываем переполнение */
645
- /* Иконки не должны сжиматься */
646
- }
647
- .em-filemanager .folderTree .foldersTitle .foldersTitleItem > svg,
648
- .em-filemanager .folderTree .foldersTitle .foldersTitleItem > *:first-child {
649
- flex-shrink: 0;
650
- }
651
- .em-filemanager .folderTree .foldersTitle .foldersTitleItem .folderLabelItem {
652
- font-size: 14px;
653
- white-space: nowrap; /* Запрещаем перенос строк */
654
- overflow: hidden; /* Скрываем переполнение */
655
- text-overflow: ellipsis; /* Показываем троеточие */
656
- flex: 1; /* Занимает доступное место */
657
- min-width: 0; /* Позволяет сжиматься */
658
- }
659
-
660
- .em-filemanager .folderSelectionTree {
661
- max-height: 300px;
662
- overflow-y: auto;
560
+ flex-direction: column;
561
+ position: relative;
562
+ z-index: 0;
663
563
  }
664
564
 
665
- /* Component-specific tree overrides */
666
-
667
- .em-filemanager .folderMenu .folderItemContainer {
565
+ .em-filemanager .tableLoadingWrapper {
668
566
  width: 100%;
669
- display: flex;
670
- align-items: center;
671
- justify-content: space-between;
672
- padding: 2px 0;
673
- min-width: 0;
567
+ }
568
+ .tableLoadingWrapper .ant-table-tbody > tr {
569
+ cursor: pointer;
674
570
  }
675
571
 
676
- .em-filemanager .folderIcon {
677
- margin-right: 8px;
678
- font-size: 18px;
679
- flex-shrink: 0; /* Запрещаем сжатие иконки */
572
+ .em-filemanager .imagePreview {
573
+ max-width: 100%;
574
+ display: block;
575
+ transition: transform 0.3s ease;
680
576
  }
681
577
 
682
- .em-filemanager .folderLabelItem {
683
- font-size: 14px;
684
- white-space: nowrap; /* Запрещаем перенос строк */
685
- overflow: hidden; /* Скрываем переполнение */
686
- text-overflow: ellipsis; /* Показываем троеточие */
687
- flex: 1; /* Занимает доступное место */
688
- min-width: 0; /* Позволяет сжиматься */
689
- -webkit-user-select: none;
690
- user-select: none;
578
+ .em-filemanager .imagePreview:hover {
579
+ transform: scale(1.05);
691
580
  }
692
581
 
693
- .em-filemanager .foldersTitleItem {
582
+ .em-filemanager .fileManagerTableFolder {
694
583
  display: flex;
584
+ justify-content: center;
695
585
  align-items: center;
696
- flex: 1;
697
- cursor: pointer;
698
- min-width: 0; /* Позволяет сжиматься */
699
- overflow: hidden; /* Скрываем переполнение */
700
586
  }
701
- .em-filemanager .formFooter {
587
+
588
+ .em-filemanager .fileManagerTableFolderInner {
702
589
  display: flex;
703
- justify-content: space-between;
590
+ align-items: center;
591
+ justify-content: flex-start;
592
+ width: 100%;
593
+ height: 100%;
704
594
  }
705
595
 
706
- .em-filemanager .folderButton {
707
- display: flex;
708
- gap: 4px;
596
+ /* Breadcrumb styles */
597
+ .em-filemanager .breadcrumbLink {
598
+ cursor: pointer;
709
599
  }
710
- .em-filemanager .folderButton .span {
711
- line-height: 1.5;
600
+
601
+ /* Sort select styles */
602
+ .em-filemanager .sortSelect {
603
+ width: 220px;
712
604
  }
713
605
 
714
- .em-filemanager .foldersWrapper {
715
- padding: 16px;
716
- background-color: var(--colorFillTertiary);
717
- border-radius: 12px;
606
+ /* Table column styles */
607
+ .em-filemanager .fileNameCol {
608
+ max-width: calc(100% - 430px);
609
+ padding: 8px;
718
610
  }
719
611
 
720
- .em-filemanager .ant-modal-footer {
721
- margin-top: 24px;
612
+ .em-filemanager .fileItemCount {
613
+ font-size: 12px;
614
+ color: var(--colorTextTertiary);
615
+ margin-top: 2px;
722
616
  }
723
617
 
724
- .em-filemanager .formItem {
725
- margin-bottom: 0;
618
+ .em-filemanager .fileSize {
619
+ color: var(--colorTextTertiary);
726
620
  }
727
621
 
728
- .em-filemanager .folderToolsField {
729
- display: none;
622
+ .em-filemanager .fileDate {
623
+ color: var(--colorTextTertiary);
624
+ white-space: nowrap;
625
+ position: relative;
626
+ text-overflow: ellipsis;
627
+ overflow: hidden;
628
+ display: block;
730
629
  }
731
- .em-filemanager .folderToolsField .ant-btn {
732
- height: 32px;
733
- padding: 0 10px;
734
- display: inline-flex;
735
- align-items: center;
630
+
631
+ .em-filemanager .tableMenu {
632
+ padding: 20px 7px;
633
+ display: flex;
634
+ text-align: center;
736
635
  justify-content: center;
737
636
  }
738
- .em-filemanager .folderToolsField .ant-btn:first-child {
739
- width: 32px;
740
- min-width: 32px;
741
- padding: 0;
742
- }
743
637
 
744
- .em-filemanager .inputButtonOk {
745
- border: 1px solid var(--colorBorder);
746
- margin-right: -11px;
747
- }
748
- .em-filemanager .inputButtonOk:hover {
749
- color: var(--colorPrimary) !important;
750
- border-color: var(--colorPrimary);
751
- background-color: transparent !important;
638
+ .em-filemanager .tableImagePreview {
639
+ display: block !important;
640
+ object-fit: contain;
641
+ border-radius: calc(var(--borderRadius) * 1px);
752
642
  }
753
643
 
754
- .em-filemanager .permanentDeleteWarning {
755
- margin-top: 12px;
756
- margin-bottom: 0;
757
- line-height: 1.5;
644
+ .em-filemanager .tableFolderIcon {
645
+ color: var(--colorPrimary);
646
+ font-size: 28px;
647
+ width: 44px;
648
+ height: 44px;
758
649
  }
759
-
760
- .em-filemanager .clearTrashProgress {
761
- margin-top: 16px;
650
+ .em-filemanager .tableFolderIcon > svg {
651
+ width: 100%;
652
+ height: 100%;
762
653
  }
763
- .em-filemanager .clearTrashProgress .progressText {
764
- text-align: center;
765
- margin-top: 8px;
766
- color: #666;
654
+
655
+ .em-filemanager .buttonDeselected {
656
+ margin-left: 12px;
657
+ margin-right: 12px;
767
658
  }
768
659
 
769
- .em-filemanager .closeIcon {
770
- color: rgba(0, 0, 0, 0.45) !important;
660
+ .em-filemanager .buttonSelectAll {
661
+ margin-left: 12px;
771
662
  }
772
663
 
773
- .em-filemanager .modalContentWithLoader {
774
- position: relative;
664
+ .em-filemanager .gridRow {
665
+ margin: 0;
666
+ gap: 20px;
667
+ padding: 0 24px 24px;
775
668
  }
776
669
 
777
- .em-filemanager .modalLoaderOverlay {
778
- position: absolute;
779
- inset: 0;
670
+ .em-filemanager .gridCard {
671
+ border-radius: 16px;
672
+ overflow: hidden;
673
+ width: 220px;
674
+ height: 100%;
675
+ -webkit-user-select: none;
676
+ user-select: none;
677
+ cursor: pointer;
678
+ border: 2px solid transparent;
679
+ }
680
+ .em-filemanager .gridCard:hover {
681
+ color: var(--colorPrimary);
682
+ box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.1607843137), 0 3px 6px 0 rgba(0, 0, 0, 0.1215686275), 0 5px 12px 4px rgba(0, 0, 0, 0.0901960784);
683
+ }
684
+ .gridCard .ant-card-body {
685
+ height: calc(100% - 180px);
686
+ max-height: calc(100% - 180px);
780
687
  display: flex;
781
- align-items: center;
782
- justify-content: center;
783
- background-color: rgba(255, 255, 255, 0.6);
784
- z-index: 1000;
688
+ flex-direction: row;
689
+ justify-content: space-between;
785
690
  }
786
- @charset "UTF-8";
787
691
 
788
- .em-filemanager .button:hover {
789
- background-color: var(--colorBgContainer);
790
- color: var(--colorPrimary);
692
+ .em-filemanager .selectedRow {
693
+ outline: 2px solid var(--colorPrimary) !important;
694
+ outline-offset: -1px;
791
695
  }
792
696
 
793
- .em-filemanager .foldersTitle {
697
+ .em-filemanager .gridCardSelected,
698
+ .em-filemanager .gridCardSelected:hover {
699
+ border-color: var(--colorPrimary);
700
+ }
701
+ .em-filemanager .gridCardSelected .gridCheckbox,
702
+ .em-filemanager .gridCardSelected:hover .gridCheckbox {
703
+ opacity: 1;
704
+ }
705
+
706
+ .em-filemanager .gridCardContent {
707
+ position: relative;
708
+ padding: 0;
709
+ height: 100%;
794
710
  display: flex;
795
- align-items: center;
796
- flex: 1;
797
- cursor: pointer;
711
+ flex-direction: column;
712
+ justify-content: space-between;
713
+ width: 100%;
798
714
  }
799
715
 
800
- .em-filemanager .folderActions {
716
+ .em-filemanager .gridCheckbox {
801
717
  position: absolute;
802
- top: 4px; /* Выравниваем по заголовку Folders */
803
- right: 4px;
804
- display: flex;
805
- align-items: center;
806
- gap: 4px;
807
- z-index: 10;
718
+ top: 8px;
719
+ left: 8px;
720
+ z-index: 1;
721
+ opacity: 0;
808
722
  }
809
- .em-filemanager .folderActions .button.ant-btn.ant-btn-icon-only {
810
- padding: calc(var(--paddingXXS) * 1px) calc(var(--paddingSM) * 1px);
811
- cursor: pointer;
812
- color: var(--colorTextSecondary);
813
- display: flex;
814
- gap: calc(var(--marginXS) * 1px);
723
+
724
+ .em-filemanager .gridPreviewContainer {
725
+ width: 100%;
726
+ height: 100%;
727
+ justify-content: center;
815
728
  align-items: center;
729
+ margin-bottom: calc(var(--marginXS) * 1px);
730
+ }
731
+
732
+ .em-filemanager .gridPreviewContainerFolder {
733
+ width: 100%;
734
+ /* aspect-ratio: 1 / 1; */
735
+ display: flex !important;
816
736
  justify-content: center;
737
+ align-items: center;
738
+ background-color: var(--colorBgContainer);
817
739
  border-radius: calc(var(--borderRadiusSM) * 1px);
818
- transition: all var(--motionDurationFast);
819
- box-shadow: none;
820
- border: none;
821
- width: 32px;
822
- height: 32px;
823
- }
824
- .em-filemanager .folderActions .button.ant-btn.ant-btn-icon-only:hover {
825
- background-color: var(--colorBgLayout);
826
- color: inherit;
740
+ margin-bottom: calc(var(--marginXS) * 1px);
741
+ height: 100%;
827
742
  }
828
743
 
829
- .em-filemanager .customExpandIcon {
830
- display: inline-flex;
744
+ .em-filemanager .gridFolderIcon {
745
+ display: flex;
831
746
  align-items: center;
832
747
  justify-content: center;
833
- width: 16px;
834
- height: 16px;
835
- margin-right: 8px;
836
- cursor: pointer;
837
- color: #666;
838
- font-size: 10px;
839
- transition: transform 0.2s ease;
748
+ border-radius: 8px;
840
749
  }
841
750
 
842
- .em-filemanager .customExpandIcon:hover {
751
+ .em-filemanager .gridFolderIconImage {
843
752
  color: var(--colorPrimary);
753
+ width: 64px;
754
+ height: 64px;
844
755
  }
845
-
846
- .em-filemanager .fileCount {
847
- display: inline-flex;
848
- align-items: center;
849
- justify-content: center;
850
- min-width: 20px;
756
+ .em-filemanager .gridFolderIconImage > svg {
757
+ width: 100%;
851
758
  height: 100%;
852
- padding: 0 6px;
853
- margin-left: 8px;
854
- color: #8D8D8D;
855
- font-size: 14px;
856
- font-weight: 500;
857
- transition: all 0.2s ease;
858
- white-space: nowrap;
859
- cursor: default;
860
- flex-shrink: 0; /* Запрещаем сжатие счетчика */
861
- margin-right: 10px;
862
759
  }
863
760
 
864
- /* :global(.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected):hover {
865
- color: red !important;
866
- } */
867
- /* Стили для выделения текста в выбранной папке */
761
+ .em-filemanager .gridFileName {
762
+ font-weight: 400;
763
+ line-height: 1.3;
764
+ margin-bottom: 4px;
765
+ text-overflow: ellipsis;
766
+ word-break: break-word;
767
+ display: -webkit-box;
768
+ -webkit-line-clamp: 2;
769
+ -webkit-box-orient: vertical;
770
+ overflow: hidden;
771
+ }
868
772
 
869
- /* Стили для иконки в выбранной папке */
870
- /* .folderMenu :global(.ant-tree-treenode-selected .folderIcon),
871
- .folderMenu :global(.ant-tree-node-selected .folderIcon) {
872
- color: red !important;
873
- } */
874
- /* CSS переменные для упрощения расчетов */
875
- .em-filemanager .uploadButton {
876
- width: 100%;
877
- justify-content: flex-start;
773
+ .em-filemanager .gridFileInfo {
774
+ color: #8c8c8c;
775
+ font-size: 13px;
776
+ line-height: 1.3;
777
+ white-space: nowrap;
878
778
  }
879
- .em-filemanager .uploadButton button:hover {
880
- background-color: var(--colorPrimaryHover) !important;
779
+
780
+ .em-filemanager .gridCard .gridFileMenu {
781
+ opacity: 0;
782
+ }
783
+ .em-filemanager .gridCard:hover .gridCheckbox,
784
+ .em-filemanager .gridCard:hover .gridFileMenu {
785
+ opacity: 1;
881
786
  }
882
787
 
883
- .em-filemanager .folderMenu {
884
- padding-left: 0;
885
- padding-right: 0; /* Место для кнопки справа */
788
+ .em-filemanager .gridFileMenuButton {
789
+ padding: 0;
790
+ width: calc(var(--formControlHeight) * 1px);
791
+ min-width: calc(var(--formControlHeight) * 1px);
792
+ height: calc(var(--formControlHeight) * 1px);
793
+ min-height: calc(var(--formControlHeight) * 1px);
886
794
  }
887
795
 
888
- /* Стили для линий дерева */
796
+ .em-filemanager .classsssssss {
797
+ background: red;
798
+ color: #4361ee;
799
+ }
889
800
 
890
- /* Улучшение отображения folder-item-container */
891
- .em-filemanager .folderMenu .folderItemContainer {
892
- width: 100%;
801
+ .em-filemanager .sortContainer {
893
802
  display: flex;
894
803
  align-items: center;
895
- justify-content: space-between;
896
- padding: 2px 0;
897
- min-width: 0; /* Позволяет flex-элементам сжиматься */
804
+ gap: 8px;
898
805
  }
899
806
 
900
- /* Стили для корневого элемента Folders */
807
+ .em-filemanager .sortLabel {
808
+ font-size: 14px;
809
+ color: #6b7280;
810
+ }
901
811
 
902
- /* Стили для ellipsis - удаляем max-width для гибкости */
812
+ .em-filemanager .actionsBox {
813
+ display: flex;
814
+ align-items: center;
815
+ gap: 8px;
816
+ }
903
817
 
904
- /* Стили для пустого состояния */
905
- .em-filemanager .folderMenu .emptyFolderContainer {
818
+ @media (max-width: 1550px) {
819
+ .em-filemanager .gridCard {
820
+ width: 220px;
821
+ }
822
+ }
823
+ /* Upload Container Styles */
824
+ .em-filemanager .uploadContainer {
825
+ width: 640px;
826
+ border-radius: 12px;
906
827
  padding: 20px;
907
- text-align: center;
828
+ margin: auto;
829
+ position: relative;
908
830
  }
909
831
 
910
- /* Убираем отступы у корневого узла */
911
-
912
- .em-filemanager .folderIcon {
913
- margin-right: 8px;
914
- font-size: 18px;
915
- flex-shrink: 0; /* Запрещаем сжатие иконки */
832
+ .em-filemanager .uploadArea {
833
+ border: 2px dashed var(--colorBorder);
834
+ border-radius: 12px;
835
+ background-color: var(--colorBgContainer);
836
+ cursor: pointer;
837
+ padding: 16px 36px;
838
+ text-align: center;
839
+ margin-bottom: 16px;
840
+ position: relative;
841
+ }
842
+ .em-filemanager .uploadArea:hover {
843
+ border-color: var(--colorPrimary);
844
+ }
845
+ .em-filemanager .uploadArea.active {
846
+ border-color: var(--colorPrimary);
847
+ background-color: var(--colorBgContainer);
916
848
  }
917
849
 
918
- .em-filemanager .folderLabelItem {
919
- font-size: 14px;
920
- white-space: nowrap; /* Запрещаем перенос строк */
921
- overflow: hidden; /* Скрываем переполнение */
922
- text-overflow: ellipsis; /* Показываем троеточие */
923
- flex: 1; /* Занимает доступное место */
924
- min-width: 0; /* Позволяет сжиматься */
925
- -webkit-user-select: none;
926
- user-select: none;
850
+ .em-filemanager .uploadIcon {
851
+ font-size: 48px;
852
+ color: var(--colorPrimary);
853
+ margin-bottom: 10px;
927
854
  }
928
855
 
929
- .em-filemanager .foldersTitleItem {
856
+ .em-filemanager .blockText {
930
857
  display: flex;
931
- align-items: center;
932
- flex: 1;
933
- cursor: pointer;
934
- min-width: 0; /* Позволяет сжиматься */
935
- overflow: hidden; /* Скрываем переполнение */
858
+ flex-direction: column;
859
+ text-align: left;
936
860
  }
937
861
 
938
- /* .foldersTitleItem .folderLabelItem {
939
- font-weight: 500;
940
- color: #262626;
941
- } */
942
- /* Класс для заголовка папок */
943
- .em-filemanager .folderLabel {
944
- display: flex;
945
- align-items: center;
946
- flex: 1;
947
- min-width: 0;
948
- overflow: hidden;
862
+ .em-filemanager .textTitle {
863
+ font-size: 16px;
864
+ font-weight: 600;
865
+ color: var(--colorTextPrimary);
949
866
  }
950
867
 
951
- .em-filemanager .foldersContainer {
952
- position: relative;
953
- width: 100%;
868
+ .em-filemanager .textDescription {
869
+ font-size: 14px;
870
+ color: #8c8c8c;
954
871
  }
955
872
 
956
- /* Дополнительные стили для улучшения визуала */
957
- /* .folderMenu :global(.ant-tree-treenode:hover .folder-label span) {
958
- color: #1890ff;
959
- } */
960
- /* Стили для дивайдера между папками */
961
- .em-filemanager .uploadButton .ant-btn {
873
+ .em-filemanager .buttons {
874
+ display: flex;
875
+ gap: 16px;
876
+ }
877
+
878
+ .em-filemanager .btnAi,
879
+ .em-filemanager .btnPhoto {
880
+ flex: 1;
881
+ font-size: 14px;
882
+ cursor: pointer;
962
883
  display: flex;
963
884
  align-items: center;
964
885
  justify-content: center;
965
- gap: 3px;
886
+ border: 1px solid var(--colorBorder);
887
+ border-radius: 12px;
888
+ background-color: var(--colorBgContainer);
889
+ padding: 24px 26px;
890
+ gap: 16px;
891
+ }
892
+ .em-filemanager .btnAi:hover,
893
+ .em-filemanager .btnPhoto:hover {
894
+ border-color: var(--colorPrimary);
966
895
  }
967
896
 
968
- /* .folderMenu :global(.ant-tree-treenode-selected) .folderLabelItem {
969
- color: #1890ff !important;
970
- } */
971
- .em-filemanager .buttonWrapper {
972
- margin-bottom: 24px;
897
+ /* Drag overlay for non-empty folder drop */
898
+ .em-filemanager .dragOverlay {
899
+ position: absolute;
900
+ top: 0;
901
+ left: 0;
902
+ right: 0;
903
+ bottom: 0;
904
+ background: rgba(0, 0, 0, 0.35);
973
905
  display: flex;
974
- gap: 4px;
975
- }
976
- .em-filemanager .buttonWrapper > :first-child {
977
- flex: 1;
978
- height: 40px;
979
- padding-left: 10px;
906
+ align-items: center;
907
+ justify-content: center;
908
+ z-index: 99999;
909
+ pointer-events: auto;
910
+ backdrop-filter: blur(2px);
911
+ -webkit-backdrop-filter: blur(2px);
980
912
  }
981
- .em-filemanager .buttonWrapper > :last-child {
982
- width: 40px;
983
- height: 40px;
984
- flex-shrink: 0;
913
+ .em-filemanager .dragOverlay .uploadIcon {
914
+ color: var(--colorPrimary, var(--ant-color-primary, #1677ff)) !important;
985
915
  }
986
-
987
- .em-filemanager .uploadButtonIcon {
988
- font-size: 20px;
916
+ .em-filemanager .dragOverlay .uploadIcon span,
917
+ .em-filemanager .dragOverlay .uploadIcon .anticon,
918
+ .em-filemanager .dragOverlay .uploadIcon svg {
919
+ color: inherit !important;
989
920
  }
990
921
 
991
- .em-filemanager .uploadButtonTitle {
992
- line-height: 1em;
922
+ .em-filemanager .dragOverlayInner {
923
+ background: rgba(255, 255, 255, 0.95);
924
+ border: 2px dashed var(--colorPrimary);
925
+ border-radius: 16px;
926
+ padding: 28px 36px;
927
+ text-align: center;
928
+ pointer-events: none;
993
929
  }
994
930
 
995
- .em-filemanager .emptyFolderContainer {
996
- -webkit-user-select: none;
997
- user-select: none;
998
- cursor: default;
999
- color: var(--colorTextTertiary);
931
+ /* Невидимый capture layer для перехвата drag событий в Chrome на macOS.
932
+ Покрывает весь viewport с максимальным z-index, чтобы перехватить события
933
+ до того, как их перехватит родительское приложение. */
934
+ .em-filemanager .dragCaptureLayer {
935
+ position: fixed !important;
936
+ top: 0 !important;
937
+ left: 0 !important;
938
+ right: 0 !important;
939
+ bottom: 0 !important;
940
+ width: 100vw !important;
941
+ height: 100vh !important;
942
+ z-index: 2147483647 !important;
943
+ background: transparent !important;
944
+ pointer-events: auto !important;
945
+ opacity: 1 !important;
946
+ cursor: copy;
947
+ isolation: isolate;
948
+ overflow: visible !important;
949
+ transform: none !important;
1000
950
  }
1001
951
 
1002
- .em-filemanager .folderItemContainer {
1003
- width: 100%;
1004
- display: flex;
952
+ /* Полноэкранный overlay при drag файлов (покрывает viewport, в т.ч. маску модалки) */
953
+ .em-filemanager .dragOverlayGlobal {
954
+ position: fixed !important;
955
+ top: 0 !important;
956
+ left: 0 !important;
957
+ right: 0 !important;
958
+ bottom: 0 !important;
959
+ width: 100vw !important;
960
+ height: 100vh !important;
961
+ z-index: 2147483646 !important;
962
+ background: rgba(0, 0, 0, 0.35) !important;
963
+ display: flex !important;
1005
964
  align-items: center;
1006
- justify-content: space-between;
1007
- padding: 2px 0;
1008
- min-width: 0; /* Позволяет flex-элементам сжиматься */
1009
- }
1010
- @charset "UTF-8";
1011
- .em-filemanager .uploadProgress {
1012
- position: fixed;
1013
- bottom: 20px;
1014
- right: 20px;
1015
- z-index: 4005;
1016
- max-width: 400px;
1017
- min-width: 320px;
965
+ justify-content: center;
966
+ pointer-events: auto !important;
967
+ backdrop-filter: blur(2px);
968
+ -webkit-backdrop-filter: blur(2px);
969
+ isolation: isolate;
970
+ overflow: visible !important;
971
+ transform: none !important;
1018
972
  }
1019
-
1020
- .em-filemanager .uploadProgress__card {
1021
- background: var(--colorBgContainer);
1022
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1023
- border-radius: 8px;
1024
- overflow: hidden;
973
+ .em-filemanager .dragOverlayGlobal .uploadIcon {
974
+ color: var(--colorPrimary, var(--ant-color-primary, #1677ff)) !important;
1025
975
  }
1026
-
1027
- .em-filemanager .uploadProgress__header {
1028
- display: flex;
1029
- justify-content: space-between;
1030
- align-items: center;
1031
- width: 100%;
1032
- padding: 12px 16px;
1033
- border-bottom: 1px solid var(--colorBorderSecondary);
976
+ .em-filemanager .dragOverlayGlobal .uploadIcon span,
977
+ .em-filemanager .dragOverlayGlobal .uploadIcon .anticon,
978
+ .em-filemanager .dragOverlayGlobal .uploadIcon svg {
979
+ color: inherit !important;
1034
980
  }
1035
981
 
1036
- .em-filemanager .uploadProgress__header-title {
1037
- font-size: 14px;
1038
- color: var(--colorText);
982
+ .em-filemanager .noFiles {
983
+ width: 640px;
984
+ text-align: center;
985
+ padding: calc(var(--marginLG) * 1px);
986
+ padding-top: 57px !important;
987
+ padding-bottom: 57px !important;
988
+ margin: auto;
989
+ line-height: 1.3;
990
+ border: 1px solid var(--colorBorderSecondary);
991
+ border-radius: calc(var(--borderRadius) * 2px);
1039
992
  }
1040
993
 
1041
- .em-filemanager .uploadProgress__header-buttons {
1042
- display: flex;
1043
- gap: 4px;
994
+ .em-filemanager .noFilesIcon {
995
+ color: var(--colorPrimary);
996
+ margin-bottom: calc(var(--margin) * 1px);
1044
997
  }
1045
998
 
1046
- .em-filemanager .uploadProgress__header-button {
1047
- padding: 0;
1048
- width: 24px;
1049
- height: 24px;
1050
- display: flex;
1051
- align-items: center;
1052
- justify-content: center;
1053
- color: rgba(0, 0, 0, 0.45);
999
+ .em-filemanager .textTitle_trash {
1000
+ margin-top: 2px;
1001
+ font-size: 16px;
1002
+ font-style: normal;
1003
+ font-weight: 600;
1054
1004
  }
1055
1005
 
1056
- .em-filemanager .uploadProgress__header-button:hover {
1057
- background-color: rgba(0, 0, 0, 0.04);
1058
- color: rgba(0, 0, 0, 0.65);
1006
+ .em-filemanager .textDescription_trash {
1007
+ margin-top: 10px;
1008
+ font-size: 14px;
1009
+ font-style: normal;
1010
+ font-weight: 400;
1011
+ line-height: normal;
1012
+ color: #8c8c8c;
1059
1013
  }
1060
-
1061
- .em-filemanager .uploadProgress__close-icon {
1062
- color: var(--colorTextTertiary) !important;
1014
+ @charset "UTF-8";
1015
+ .em-filemanager .folderTree .emptyFolderContainer {
1016
+ text-align: center;
1017
+ color: #999;
1018
+ line-height: 1.3;
1063
1019
  }
1064
-
1065
- .uploadProgress__body {
1066
- padding: 12px;
1020
+ .em-filemanager .folderTree .folderItemContainer {
1067
1021
  display: flex;
1068
- flex-direction: column;
1022
+ justify-content: space-between;
1023
+ align-items: center;
1024
+ width: 100%;
1025
+ min-width: 0; /* Позволяет flex-элементам сжиматься */
1069
1026
  }
1070
- .uploadProgress__body .ant-list-item-meta {
1027
+ .em-filemanager .folderTree .folderItemContainer .folderLabel {
1071
1028
  display: flex;
1072
- flex: 1 1 auto;
1073
- min-width: 0;
1029
+ align-items: center;
1030
+ gap: 8px;
1031
+ padding: 0 8px;
1032
+ flex: 1;
1033
+ min-width: 0; /* Позволяет сжиматься */
1034
+ overflow: hidden; /* Скрываем переполнение */
1035
+ /* Иконки не должны сжиматься */
1074
1036
  }
1075
- .uploadProgress__body .ant-list-item-meta-content {
1076
- width: auto;
1077
- min-width: 0;
1037
+ .em-filemanager .folderTree .folderItemContainer .folderLabel > svg,
1038
+ .em-filemanager .folderTree .folderItemContainer .folderLabel > *:first-child {
1039
+ flex-shrink: 0;
1078
1040
  }
1079
- .uploadProgress__body .ant-list-item-meta-title {
1080
- margin: 0;
1041
+ .em-filemanager .folderTree .folderItemContainer .folderLabel .folderLabelItem {
1042
+ font-size: 14px;
1043
+ white-space: nowrap; /* Запрещаем перенос строк */
1044
+ overflow: hidden; /* Скрываем переполнение */
1045
+ text-overflow: ellipsis; /* Показываем троеточие */
1046
+ flex: 1; /* Занимает доступное место */
1047
+ min-width: 0; /* Позволяет сжиматься */
1081
1048
  }
1082
- .uploadProgress__body .ant-list-item-action {
1083
- margin-inline-start: 16px;
1084
- flex-shrink: 0;
1049
+ .em-filemanager .folderTree .folderItemContainer .fileCount {
1050
+ color: #666;
1051
+ font-size: 12px;
1052
+ min-width: 20px;
1053
+ flex-shrink: 0; /* Запрещаем сжатие счетчика */
1085
1054
  }
1086
-
1087
- .em-filemanager .uploadProgress__common-error {
1088
- display: flex;
1089
- flex-direction: column;
1090
- gap: 4px;
1091
- padding: 10px 12px;
1092
- margin-top: 12px;
1093
- background: var(--colorErrorBg, #fff2f0);
1094
- border-radius: 6px;
1095
- border: 1px solid var(--colorErrorBorder, #ffccc7);
1055
+ .em-filemanager .folderTree .foldersTitle {
1056
+ cursor: pointer;
1057
+ width: 100%;
1058
+ min-width: 0; /* Позволяет сжиматься */
1059
+ overflow: hidden; /* Скрываем переполнение */
1096
1060
  }
1097
-
1098
- .em-filemanager .uploadProgress__common-error-row {
1061
+ .em-filemanager .folderTree .foldersTitle .foldersTitleItem {
1099
1062
  display: flex;
1100
- align-items: flex-start;
1063
+ align-items: center;
1101
1064
  gap: 8px;
1065
+ padding: 0 8px;
1066
+ flex: 1;
1067
+ min-width: 0; /* Позволяет сжиматься */
1068
+ overflow: hidden; /* Скрываем переполнение */
1069
+ /* Иконки не должны сжиматься */
1102
1070
  }
1103
-
1104
- .em-filemanager .uploadProgress__common-error-hint {
1105
- font-size: 12px !important;
1106
- margin-top: 4px;
1107
- margin-left: 28px; /* icon width + gap */
1071
+ .em-filemanager .folderTree .foldersTitle .foldersTitleItem > svg,
1072
+ .em-filemanager .folderTree .foldersTitle .foldersTitleItem > *:first-child {
1073
+ flex-shrink: 0;
1074
+ }
1075
+ .em-filemanager .folderTree .foldersTitle .foldersTitleItem .folderLabelItem {
1076
+ font-size: 14px;
1077
+ white-space: nowrap; /* Запрещаем перенос строк */
1078
+ overflow: hidden; /* Скрываем переполнение */
1079
+ text-overflow: ellipsis; /* Показываем троеточие */
1080
+ flex: 1; /* Занимает доступное место */
1081
+ min-width: 0; /* Позволяет сжиматься */
1108
1082
  }
1109
1083
 
1110
- .em-filemanager .uploadProgress__list-wrapper {
1084
+ .em-filemanager .folderSelectionTree {
1111
1085
  max-height: 300px;
1112
1086
  overflow-y: auto;
1113
- overflow-x: hidden;
1114
1087
  }
1115
1088
 
1116
- .em-filemanager .uploadProgress__status-icon {
1089
+ /* Component-specific tree overrides */
1090
+
1091
+ .em-filemanager .folderMenu .folderItemContainer {
1092
+ width: 100%;
1117
1093
  display: flex;
1118
1094
  align-items: center;
1119
- justify-content: center;
1120
- width: 20px;
1121
- height: 20px;
1122
- }
1123
-
1124
- .em-filemanager .uploadProgress__status-icon-icon {
1125
- font-size: 20px;
1126
- color: #52c41a;
1127
- }
1128
-
1129
- .em-filemanager .uploadProgress__file-item {
1130
- padding: 8px 0 !important;
1131
- border-bottom: 1px solid var(--colorBorderSecondary);
1095
+ justify-content: space-between;
1096
+ padding: 2px 0;
1097
+ min-width: 0;
1132
1098
  }
1133
1099
 
1134
- .em-filemanager .uploadProgress__file-item--error {
1135
- padding: 10px 0 !important;
1100
+ .em-filemanager .folderIcon {
1101
+ margin-right: 8px;
1102
+ font-size: 18px;
1103
+ flex-shrink: 0; /* Запрещаем сжатие иконки */
1136
1104
  }
1137
1105
 
1138
- .uploadProgress__body--error .uploadProgress__file-item {
1139
- display: grid !important;
1106
+ .em-filemanager .folderLabelItem {
1107
+ font-size: 14px;
1108
+ white-space: nowrap; /* Запрещаем перенос строк */
1109
+ overflow: hidden; /* Скрываем переполнение */
1110
+ text-overflow: ellipsis; /* Показываем троеточие */
1111
+ flex: 1; /* Занимает доступное место */
1112
+ min-width: 0; /* Позволяет сжиматься */
1113
+ -webkit-user-select: none;
1114
+ user-select: none;
1140
1115
  }
1141
1116
 
1142
- /* Ошибка загрузки: стиль как у уведомления — читаемый список */
1143
- .em-filemanager .uploadProgress__error-item {
1117
+ .em-filemanager .foldersTitleItem {
1144
1118
  display: flex;
1145
- flex-direction: column;
1146
- gap: 4px;
1147
- margin-top: 4px;
1148
- }
1149
-
1150
- .em-filemanager .uploadProgress__error-message {
1151
- font-size: 12px !important;
1152
- line-height: 1.3;
1153
- }
1154
-
1155
- .em-filemanager .uploadProgress__error-hint {
1156
- font-size: 11px !important;
1157
- line-height: 1.3;
1158
- color: var(--colorTextSecondary) !important;
1159
- }
1160
-
1161
- .em-filemanager .uploadProgress__file-item:last-child {
1162
- border-bottom: none;
1163
- }
1164
-
1165
- .em-filemanager .uploadProgress__file-avatar {
1166
- background-color: transparent !important;
1119
+ align-items: center;
1120
+ flex: 1;
1121
+ cursor: pointer;
1122
+ min-width: 0; /* Позволяет сжиматься */
1123
+ overflow: hidden; /* Скрываем переполнение */
1167
1124
  }
1168
-
1169
- .em-filemanager .uploadProgress__file-info {
1125
+ .em-filemanager .formFooter {
1170
1126
  display: flex;
1171
- flex-direction: column;
1172
- gap: 2px;
1173
- }
1174
-
1175
- .em-filemanager .uploadProgress__file-name {
1176
- font-size: 13px;
1177
- line-height: 1.2;
1178
- max-width: 100%;
1179
- }
1180
-
1181
- .em-filemanager .uploadProgress__file-size {
1182
- font-size: 12px;
1183
- }
1184
-
1185
- .em-filemanager .uploadProgress__progress-bar {
1186
- margin-top: 4px;
1127
+ justify-content: space-between;
1187
1128
  }
1188
1129
 
1189
- /* Минимизированное состояние */
1190
- .em-filemanager .uploadProgress__minimized {
1191
- position: fixed;
1192
- top: 20px;
1193
- left: 20px;
1194
- z-index: 4005;
1130
+ .em-filemanager .folderButton {
1131
+ display: flex;
1132
+ gap: 4px;
1195
1133
  }
1196
-
1197
- .em-filemanager .uploadProgress__minimized-button {
1198
- font-size: 12px;
1199
- height: 28px;
1200
- padding: 0 12px;
1201
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
1134
+ .em-filemanager .folderButton .span {
1135
+ line-height: 1.5;
1202
1136
  }
1203
1137
 
1204
- /* Скроллбар для списка файлов */
1205
- .em-filemanager .uploadProgress__file-list::-webkit-scrollbar {
1206
- width: 6px;
1138
+ .em-filemanager .foldersWrapper {
1139
+ padding: 16px;
1140
+ background-color: var(--colorFillTertiary);
1141
+ border-radius: 12px;
1207
1142
  }
1208
1143
 
1209
- .em-filemanager .uploadProgress__file-list::-webkit-scrollbar-track {
1210
- background: #f1f1f1;
1211
- border-radius: 3px;
1144
+ .em-filemanager .ant-modal-footer {
1145
+ margin-top: 24px;
1212
1146
  }
1213
1147
 
1214
- .em-filemanager .uploadProgress__file-list::-webkit-scrollbar-thumb {
1215
- background: #c1c1c1;
1216
- border-radius: 3px;
1148
+ .em-filemanager .formItem {
1149
+ margin-bottom: 0;
1217
1150
  }
1218
1151
 
1219
- .em-filemanager .uploadProgress__file-list::-webkit-scrollbar-thumb:hover {
1220
- background: #a8a8a8;
1152
+ .em-filemanager .folderToolsField {
1153
+ display: none;
1221
1154
  }
1222
-
1223
- /* Анимации */
1224
- .em-filemanager .uploadProgress {
1225
- animation: slideInFromLeft 0.3s ease-out;
1155
+ .em-filemanager .folderToolsField .ant-btn {
1156
+ height: 32px;
1157
+ padding: 0 10px;
1158
+ display: inline-flex;
1159
+ align-items: center;
1160
+ justify-content: center;
1226
1161
  }
1227
-
1228
- .em-filemanager .uploadProgress__minimized {
1229
- animation: slideInFromLeft 0.3s ease-out;
1162
+ .em-filemanager .folderToolsField .ant-btn:first-child {
1163
+ width: 32px;
1164
+ min-width: 32px;
1165
+ padding: 0;
1230
1166
  }
1231
1167
 
1232
- @keyframes slideInFromLeft {
1233
- from {
1234
- transform: translateX(-100%);
1235
- opacity: 0;
1236
- }
1237
- to {
1238
- transform: translateX(0);
1239
- opacity: 1;
1240
- }
1241
- }
1242
- /* Адаптивность */
1243
- @media (max-width: 768px) {
1244
- .em-filemanager .uploadProgress {
1245
- top: 10px;
1246
- left: 10px;
1247
- right: 10px;
1248
- max-width: calc(100vw - 20px);
1249
- min-width: auto;
1250
- }
1251
- .em-filemanager .uploadProgress__minimized {
1252
- top: 10px;
1253
- left: 10px;
1254
- }
1168
+ .em-filemanager .inputButtonOk {
1169
+ border: 1px solid var(--colorBorder);
1170
+ margin-right: -11px;
1255
1171
  }
1256
- .em-filemanager .gifTab {
1257
- height: 100%;
1258
- min-height: 0;
1172
+ .em-filemanager .inputButtonOk:hover {
1173
+ color: var(--colorPrimary) !important;
1174
+ border-color: var(--colorPrimary);
1175
+ background-color: transparent !important;
1259
1176
  }
1260
1177
 
1261
- .em-filemanager .scrollableDiv {
1262
- width: 100%;
1263
- height: 100%;
1264
- overflow: auto;
1265
- overflow-x: hidden;
1266
- box-sizing: border-box;
1267
- line-height: 0;
1268
- display: flex;
1269
- flex-direction: column;
1270
- align-items: center;
1271
- padding: 24px;
1178
+ .em-filemanager .permanentDeleteWarning {
1179
+ margin-top: 12px;
1180
+ margin-bottom: 0;
1181
+ line-height: 1.5;
1272
1182
  }
1273
1183
 
1274
- .em-filemanager .gifSearchInput {
1275
- padding: 0;
1276
- width: 640px;
1277
- max-width: 100%;
1278
- transition: width 1s ease;
1279
- margin: auto auto 24px;
1184
+ .em-filemanager .clearTrashProgress {
1185
+ margin-top: 16px;
1280
1186
  }
1281
-
1282
- .em-filemanager .search {
1283
- max-width: 100%;
1187
+ .em-filemanager .clearTrashProgress .progressText {
1188
+ text-align: center;
1189
+ margin-top: 8px;
1190
+ color: #666;
1284
1191
  }
1285
1192
 
1286
- .em-filemanager .searchResults {
1287
- width: 100%;
1288
- }
1289
- .em-filemanager .searchResults .gifSearchInput {
1290
- width: 100%;
1193
+ .em-filemanager .closeIcon {
1194
+ color: rgba(0, 0, 0, 0.45) !important;
1291
1195
  }
1292
1196
 
1293
- .em-filemanager .virtualCanvas {
1197
+ .em-filemanager .modalContentWithLoader {
1294
1198
  position: relative;
1295
- width: 100%;
1296
1199
  }
1297
1200
 
1298
- .em-filemanager .myMasonryGrid {
1201
+ .em-filemanager .modalLoaderOverlay {
1202
+ position: absolute;
1203
+ inset: 0;
1299
1204
  display: flex;
1300
- width: auto;
1301
- text-align: center;
1205
+ align-items: center;
1206
+ justify-content: center;
1207
+ background-color: rgba(255, 255, 255, 0.6);
1208
+ z-index: 1000;
1302
1209
  }
1210
+ @charset "UTF-8";
1303
1211
 
1304
- .em-filemanager .myMasonryGridColumn {
1305
- background-clip: padding-box;
1212
+ .em-filemanager .button:hover {
1213
+ background-color: var(--colorBgContainer);
1214
+ color: var(--colorPrimary);
1306
1215
  }
1307
1216
 
1308
- .em-filemanager .listItem {
1217
+ .em-filemanager .foldersTitle {
1218
+ display: flex;
1219
+ align-items: center;
1220
+ flex: 1;
1309
1221
  cursor: pointer;
1310
- position: relative;
1311
- transition: all 0.3s ease;
1312
- border: 1px solid #f0f2f5;
1313
- margin-bottom: 20px;
1314
- display: inline-block;
1315
- border-radius: 6px;
1316
- min-height: 100px;
1317
- max-height: 100px;
1318
- max-width: inherit;
1319
- overflow: hidden;
1320
- background: #f0f2f5;
1321
1222
  }
1322
- .em-filemanager .listItem .overlayImage {
1223
+
1224
+ .em-filemanager .folderActions {
1323
1225
  position: absolute;
1324
- bottom: 10px;
1325
- right: 10px;
1326
- width: 110px;
1327
- height: 40px;
1328
- background-size: cover;
1329
- opacity: 0;
1330
- transition: opacity 0.5s ease;
1331
- }
1332
- .em-filemanager .listItem img {
1333
- display: block;
1334
- border-radius: 6px;
1335
- height: auto;
1336
- object-fit: contain;
1337
- opacity: 0;
1338
- transition: opacity 0.5s ease-in-out;
1339
- }
1340
- .em-filemanager .listItem.loaded {
1341
- max-height: 1000px;
1342
- border: 1px solid #d9d9d9;
1343
- }
1344
- .em-filemanager .listItem.loaded img {
1345
- opacity: 1;
1346
- height: 100%;
1347
- width: 100%;
1348
- margin: auto;
1349
- }
1350
- .em-filemanager .listItem.loaded .loadedImage {
1351
- opacity: 0.5;
1352
- }
1353
- .em-filemanager .listItem:hover {
1354
- box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
1226
+ top: 4px; /* Выравниваем по заголовку Folders */
1227
+ right: 4px;
1228
+ display: flex;
1229
+ align-items: center;
1230
+ gap: 4px;
1231
+ z-index: 10;
1355
1232
  }
1356
- .em-filemanager .listItem:hover p.creatorInfo {
1357
- opacity: 1;
1233
+ .em-filemanager .folderActions .button.ant-btn.ant-btn-icon-only {
1234
+ padding: calc(var(--paddingXXS) * 1px) calc(var(--paddingSM) * 1px);
1235
+ cursor: pointer;
1236
+ color: var(--colorTextSecondary);
1237
+ display: flex;
1238
+ gap: calc(var(--marginXS) * 1px);
1239
+ align-items: center;
1240
+ justify-content: center;
1241
+ border-radius: calc(var(--borderRadiusSM) * 1px);
1242
+ transition: all var(--motionDurationFast);
1243
+ box-shadow: none;
1244
+ border: none;
1245
+ width: 32px;
1246
+ height: 32px;
1358
1247
  }
1359
- .em-filemanager .listItem:hover .overlayImage {
1360
- opacity: 1;
1248
+ .em-filemanager .folderActions .button.ant-btn.ant-btn-icon-only:hover {
1249
+ background-color: var(--colorBgLayout);
1250
+ color: inherit;
1361
1251
  }
1362
- .em-filemanager .listItem p.creatorInfo {
1363
- position: absolute;
1364
- border-radius: 0 0 6px 0;
1365
- bottom: 0;
1366
- right: 0;
1367
- margin: 0;
1368
- background-color: rgba(0, 0, 0, 0.5);
1369
- color: #fff;
1370
- padding: 5px;
1252
+
1253
+ .em-filemanager .customExpandIcon {
1254
+ display: inline-flex;
1255
+ align-items: center;
1256
+ justify-content: center;
1257
+ width: 16px;
1258
+ height: 16px;
1259
+ margin-right: 8px;
1260
+ cursor: pointer;
1261
+ color: #666;
1371
1262
  font-size: 10px;
1372
- opacity: 0;
1373
- line-height: 1.2;
1374
- }
1375
- .em-filemanager .listItem p.creatorInfo:hover a {
1376
- color: #fff;
1377
- text-decoration: underline;
1263
+ transition: transform 0.2s ease;
1378
1264
  }
1379
- .em-filemanager .listItem p.creatorInfo a {
1380
- color: #fff;
1381
- text-decoration: none;
1265
+
1266
+ .em-filemanager .customExpandIcon:hover {
1267
+ color: var(--colorPrimary);
1382
1268
  }
1383
1269
 
1384
- .em-filemanager .searchOutputWrapper {
1270
+ .em-filemanager .fileCount {
1271
+ display: inline-flex;
1272
+ align-items: center;
1273
+ justify-content: center;
1274
+ min-width: 20px;
1385
1275
  height: 100%;
1386
- min-height: 0;
1387
- overflow: hidden;
1276
+ padding: 0 6px;
1277
+ margin-left: 8px;
1278
+ color: #8D8D8D;
1279
+ font-size: 14px;
1280
+ font-weight: 500;
1281
+ transition: all 0.2s ease;
1282
+ white-space: nowrap;
1283
+ cursor: default;
1284
+ flex-shrink: 0; /* Запрещаем сжатие счетчика */
1285
+ margin-right: 10px;
1388
1286
  }
1389
1287
 
1390
- .em-filemanager .divider {
1391
- margin-bottom: calc(var(--marginLG) * 1px);
1392
- border-color: var(--colorBorder);
1393
- }
1288
+ /* :global(.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected):hover {
1289
+ color: red !important;
1290
+ } */
1291
+ /* Стили для выделения текста в выбранной папке */
1394
1292
 
1395
- .em-filemanager .myMasonryGrid {
1396
- display: flex;
1397
- width: auto;
1398
- text-align: center;
1399
- gap: calc(var(--marginLG) * 1px);
1293
+ /* Стили для иконки в выбранной папке */
1294
+ /* .folderMenu :global(.ant-tree-treenode-selected .folderIcon),
1295
+ .folderMenu :global(.ant-tree-node-selected .folderIcon) {
1296
+ color: red !important;
1297
+ } */
1298
+ /* CSS переменные для упрощения расчетов */
1299
+ .em-filemanager .uploadButton {
1300
+ width: 100%;
1301
+ justify-content: flex-start;
1302
+ }
1303
+ .em-filemanager .uploadButton button:hover {
1304
+ background-color: var(--colorPrimaryHover) !important;
1400
1305
  }
1401
1306
 
1402
- .em-filemanager .myMasonryGridColumn {
1403
- background-clip: padding-box;
1307
+ .em-filemanager .folderMenu {
1308
+ padding-left: 0;
1309
+ padding-right: 0; /* Место для кнопки справа */
1404
1310
  }
1405
1311
 
1406
- .em-filemanager .resultsContainer {
1407
- width: 640px;
1408
- max-width: 100%;
1409
- overflow: auto;
1410
- box-sizing: border-box;
1411
- padding: 60px 16px;
1412
- border-radius: 12px;
1413
- background-color: var(--colorBgContainer);
1312
+ /* Стили для линий дерева */
1313
+
1314
+ /* Улучшение отображения folder-item-container */
1315
+ .em-filemanager .folderMenu .folderItemContainer {
1316
+ width: 100%;
1414
1317
  display: flex;
1415
1318
  align-items: center;
1416
- justify-content: center;
1417
- flex-direction: column;
1319
+ justify-content: space-between;
1320
+ padding: 2px 0;
1321
+ min-width: 0; /* Позволяет flex-элементам сжиматься */
1418
1322
  }
1419
1323
 
1420
- .em-filemanager .playButton {
1421
- color: var(--colorPrimary);
1422
- margin-bottom: 16px;
1324
+ /* Стили для корневого элемента Folders */
1325
+
1326
+ /* Стили для ellipsis - удаляем max-width для гибкости */
1327
+
1328
+ /* Стили для пустого состояния */
1329
+ .em-filemanager .folderMenu .emptyFolderContainer {
1330
+ padding: 20px;
1331
+ text-align: center;
1423
1332
  }
1424
1333
 
1425
- .em-filemanager .title {
1426
- font-size: 16px;
1427
- font-weight: 600;
1428
- line-height: 1.2;
1429
- margin-bottom: 4px;
1334
+ /* Убираем отступы у корневого узла */
1335
+
1336
+ .em-filemanager .folderIcon {
1337
+ margin-right: 8px;
1338
+ font-size: 18px;
1339
+ flex-shrink: 0; /* Запрещаем сжатие иконки */
1430
1340
  }
1431
1341
 
1432
- .em-filemanager .subtitle {
1342
+ .em-filemanager .folderLabelItem {
1433
1343
  font-size: 14px;
1434
- color: var(--colorSecondary);
1435
- line-height: 1.2;
1436
- }
1437
- .em-filemanager .stockTab {
1438
- height: 100%;
1439
- min-height: 0;
1344
+ white-space: nowrap; /* Запрещаем перенос строк */
1345
+ overflow: hidden; /* Скрываем переполнение */
1346
+ text-overflow: ellipsis; /* Показываем троеточие */
1347
+ flex: 1; /* Занимает доступное место */
1348
+ min-width: 0; /* Позволяет сжиматься */
1349
+ -webkit-user-select: none;
1350
+ user-select: none;
1440
1351
  }
1441
1352
 
1442
- .em-filemanager .stockSearchInput {
1443
- padding: 0;
1444
- width: 640px;
1445
- transition: all 200ms ease;
1446
- margin: auto auto 24px;
1353
+ .em-filemanager .foldersTitleItem {
1354
+ display: flex;
1355
+ align-items: center;
1356
+ flex: 1;
1357
+ cursor: pointer;
1358
+ min-width: 0; /* Позволяет сжиматься */
1359
+ overflow: hidden; /* Скрываем переполнение */
1447
1360
  }
1448
1361
 
1449
- .em-filemanager .searchOutputWrapper {
1450
- height: 100%;
1451
- min-height: 0;
1362
+ /* .foldersTitleItem .folderLabelItem {
1363
+ font-weight: 500;
1364
+ color: #262626;
1365
+ } */
1366
+ /* Класс для заголовка папок */
1367
+ .em-filemanager .folderLabel {
1368
+ display: flex;
1369
+ align-items: center;
1370
+ flex: 1;
1371
+ min-width: 0;
1452
1372
  overflow: hidden;
1453
1373
  }
1454
1374
 
1455
- .em-filemanager .divider {
1456
- margin-bottom: calc(var(--marginLG) * 1px);
1457
- border-color: var(--colorBorder);
1375
+ .em-filemanager .foldersContainer {
1376
+ position: relative;
1377
+ width: 100%;
1458
1378
  }
1459
1379
 
1460
- .em-filemanager .search {
1461
- max-width: 100%;
1380
+ /* Дополнительные стили для улучшения визуала */
1381
+ /* .folderMenu :global(.ant-tree-treenode:hover .folder-label span) {
1382
+ color: #1890ff;
1383
+ } */
1384
+ /* Стили для дивайдера между папками */
1385
+ .em-filemanager .uploadButton .ant-btn {
1386
+ display: flex;
1387
+ align-items: center;
1388
+ justify-content: center;
1389
+ gap: 3px;
1462
1390
  }
1463
1391
 
1464
- .em-filemanager .searchResults {
1465
- width: 100%;
1392
+ /* .folderMenu :global(.ant-tree-treenode-selected) .folderLabelItem {
1393
+ color: #1890ff !important;
1394
+ } */
1395
+ .em-filemanager .buttonWrapper {
1396
+ margin-bottom: 24px;
1397
+ display: flex;
1398
+ gap: 4px;
1466
1399
  }
1467
- .em-filemanager .searchResults .stockSearchInput {
1468
- width: 100%;
1400
+ .em-filemanager .buttonWrapper > :first-child {
1401
+ flex: 1;
1402
+ height: 40px;
1403
+ padding-left: 10px;
1469
1404
  }
1470
- .em-filemanager .searchResults label {
1471
- height: calc(var(--formControlHeight) * 1px);
1472
- line-height: calc(var(--formControlHeight) * 1px);
1405
+ .em-filemanager .buttonWrapper > :last-child {
1406
+ width: 40px;
1407
+ height: 40px;
1408
+ flex-shrink: 0;
1473
1409
  }
1474
1410
 
1475
- .em-filemanager .virtualCanvas {
1476
- position: relative;
1477
- width: 100%;
1411
+ .em-filemanager .uploadButtonIcon {
1412
+ font-size: 20px;
1478
1413
  }
1479
1414
 
1480
- .em-filemanager .blocksSearchDividerWrapper {
1481
- margin: 0;
1415
+ .em-filemanager .uploadButtonTitle {
1416
+ line-height: 1em;
1482
1417
  }
1483
1418
 
1484
- .em-filemanager .scrollableDiv {
1485
- width: 100%;
1486
- height: 100%;
1487
- overflow: auto;
1488
- overflow-x: hidden;
1489
- box-sizing: border-box;
1490
- line-height: 0;
1491
- display: flex;
1492
- flex-direction: column;
1493
- align-items: center;
1494
- padding: 24px;
1419
+ .em-filemanager .emptyFolderContainer {
1420
+ -webkit-user-select: none;
1421
+ user-select: none;
1422
+ cursor: default;
1423
+ color: var(--colorTextTertiary);
1495
1424
  }
1496
1425
 
1497
- .em-filemanager .myMasonryGrid {
1426
+ .em-filemanager .folderItemContainer {
1427
+ width: 100%;
1498
1428
  display: flex;
1499
- width: auto;
1500
- text-align: center;
1501
- gap: calc(var(--marginLG) * 1px);
1429
+ align-items: center;
1430
+ justify-content: space-between;
1431
+ padding: 2px 0;
1432
+ min-width: 0; /* Позволяет flex-элементам сжиматься */
1502
1433
  }
1503
-
1504
- .em-filemanager .myMasonryGridColumn {
1505
- background-clip: padding-box;
1434
+ @charset "UTF-8";
1435
+ .em-filemanager .uploadProgress {
1436
+ position: fixed;
1437
+ bottom: 20px;
1438
+ right: 20px;
1439
+ z-index: 4005;
1440
+ max-width: 400px;
1441
+ min-width: 320px;
1506
1442
  }
1507
1443
 
1508
- .em-filemanager .listItem {
1509
- cursor: pointer;
1510
- position: relative;
1511
- transition: all 0.3s ease;
1512
- border: 1px solid #f0f2f5;
1513
- margin-bottom: 20px;
1514
- display: inline-block;
1515
- border-radius: 6px;
1516
- min-height: 100px;
1517
- max-height: 100px;
1518
- max-width: inherit;
1444
+ .em-filemanager .uploadProgress__card {
1445
+ background: var(--colorBgContainer);
1446
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1447
+ border-radius: 8px;
1519
1448
  overflow: hidden;
1520
- background: #f0f2f5;
1521
- }
1522
- .em-filemanager .listItem .overlayImage {
1523
- position: absolute;
1524
- bottom: 10px;
1525
- right: 10px;
1526
- width: 110px;
1527
- height: 40px;
1528
- background-size: cover;
1529
- opacity: 0;
1530
- transition: opacity 0.5s ease;
1531
- }
1532
- .em-filemanager .listItem img {
1533
- display: block;
1534
- border-radius: 6px;
1535
- height: auto;
1536
- object-fit: contain;
1537
- opacity: 0;
1538
- transition: opacity 0.5s ease-in-out;
1539
- }
1540
- .em-filemanager .listItem.loaded {
1541
- max-height: 1000px;
1542
- border: 1px solid #d9d9d9;
1543
1449
  }
1544
- .em-filemanager .listItem.loaded img {
1545
- opacity: 1;
1546
- height: 100%;
1450
+
1451
+ .em-filemanager .uploadProgress__header {
1452
+ display: flex;
1453
+ justify-content: space-between;
1454
+ align-items: center;
1547
1455
  width: 100%;
1548
- margin: auto;
1549
- }
1550
- .em-filemanager .listItem.loaded .loadedImage {
1551
- opacity: 0.5;
1552
- }
1553
- .em-filemanager .listItem:hover {
1554
- box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
1555
- }
1556
- .em-filemanager .listItem:hover p.creatorInfo {
1557
- opacity: 1;
1558
- }
1559
- .em-filemanager .listItem:hover .overlayImage {
1560
- opacity: 1;
1561
- }
1562
- .em-filemanager .listItem p.creatorInfo {
1563
- position: absolute;
1564
- border-radius: 0 0 6px 0;
1565
- bottom: 0;
1566
- right: 0;
1567
- margin: 0;
1568
- background-color: rgba(0, 0, 0, 0.5);
1569
- color: #fff;
1570
- padding: 5px;
1571
- font-size: 10px;
1572
- opacity: 0;
1573
- line-height: 1.2;
1574
- }
1575
- .em-filemanager .listItem p.creatorInfo:hover a {
1576
- color: #fff;
1577
- text-decoration: underline;
1456
+ padding: 12px 16px;
1457
+ border-bottom: 1px solid var(--colorBorderSecondary);
1578
1458
  }
1579
- .em-filemanager .listItem p.creatorInfo a {
1580
- color: #fff;
1581
- text-decoration: none;
1459
+
1460
+ .em-filemanager .uploadProgress__header-title {
1461
+ font-size: 14px;
1462
+ color: var(--colorText);
1582
1463
  }
1583
1464
 
1584
- .em-filemanager .stockColorFilter {
1465
+ .em-filemanager .uploadProgress__header-buttons {
1585
1466
  display: flex;
1467
+ gap: 4px;
1586
1468
  }
1587
- .em-filemanager .stockColorFilter label,
1588
- .em-filemanager .stockColorFilter [class^=ant-radio] {
1589
- border-radius: 6px !important;
1469
+
1470
+ .em-filemanager .uploadProgress__header-button {
1471
+ padding: 0;
1590
1472
  width: 24px;
1591
1473
  height: 24px;
1592
- margin: 4px 4px;
1593
- padding: 0;
1594
- font-size: 0;
1595
- border-width: 1px;
1596
- }
1597
- .em-filemanager .stockColorFilter label::before,
1598
- .em-filemanager .stockColorFilter [class^=ant-radio]::before {
1599
- display: none;
1474
+ display: flex;
1475
+ align-items: center;
1476
+ justify-content: center;
1477
+ color: rgba(0, 0, 0, 0.45);
1600
1478
  }
1601
- .em-filemanager .stockColorFilter label.allColors,
1602
- .em-filemanager .stockColorFilter [class^=ant-radio].allColors {
1603
- background-image: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
1479
+
1480
+ .em-filemanager .uploadProgress__header-button:hover {
1481
+ background-color: rgba(0, 0, 0, 0.04);
1482
+ color: rgba(0, 0, 0, 0.65);
1604
1483
  }
1605
- .em-filemanager .stockColorFilter label.blackColor,
1606
- .em-filemanager .stockColorFilter [class^=ant-radio].blackColor {
1607
- background: #222222;
1484
+
1485
+ .em-filemanager .uploadProgress__close-icon {
1486
+ color: var(--colorTextTertiary) !important;
1608
1487
  }
1609
- .em-filemanager .stockColorFilter label.bwColor,
1610
- .em-filemanager .stockColorFilter [class^=ant-radio].bwColor {
1611
- background-image: linear-gradient(135deg, #222222 50%, white 50%);
1488
+
1489
+ .uploadProgress__body {
1490
+ padding: 12px;
1491
+ display: flex;
1492
+ flex-direction: column;
1612
1493
  }
1613
- .em-filemanager .stockColorFilter label.whiteColor,
1614
- .em-filemanager .stockColorFilter [class^=ant-radio].whiteColor {
1615
- background: #ffffff;
1494
+ .uploadProgress__body .ant-list-item-meta {
1495
+ display: flex;
1496
+ flex: 1 1 auto;
1497
+ min-width: 0;
1616
1498
  }
1617
- .em-filemanager .stockColorFilter label.orangeColor,
1618
- .em-filemanager .stockColorFilter [class^=ant-radio].orangeColor {
1619
- background: #fa8c16;
1499
+ .uploadProgress__body .ant-list-item-meta-content {
1500
+ width: auto;
1501
+ min-width: 0;
1620
1502
  }
1621
- .em-filemanager .stockColorFilter label.redColor,
1622
- .em-filemanager .stockColorFilter [class^=ant-radio].redColor {
1623
- background: #f5222d;
1503
+ .uploadProgress__body .ant-list-item-meta-title {
1504
+ margin: 0;
1624
1505
  }
1625
- .em-filemanager .stockColorFilter label.purpleColor,
1626
- .em-filemanager .stockColorFilter [class^=ant-radio].purpleColor {
1627
- background: #722ed1;
1506
+ .uploadProgress__body .ant-list-item-action {
1507
+ margin-inline-start: 16px;
1508
+ flex-shrink: 0;
1628
1509
  }
1629
- .em-filemanager .stockColorFilter label.magentaColor,
1630
- .em-filemanager .stockColorFilter [class^=ant-radio].magentaColor {
1631
- background: #eb2f96;
1510
+
1511
+ .em-filemanager .uploadProgress__common-error {
1512
+ display: flex;
1513
+ flex-direction: column;
1514
+ gap: 4px;
1515
+ padding: 10px 12px;
1516
+ margin-top: 12px;
1517
+ background: var(--colorErrorBg, #fff2f0);
1518
+ border-radius: 6px;
1519
+ border: 1px solid var(--colorErrorBorder, #ffccc7);
1632
1520
  }
1633
- .em-filemanager .stockColorFilter label.greenColor,
1634
- .em-filemanager .stockColorFilter [class^=ant-radio].greenColor {
1635
- background: #52c41a;
1521
+
1522
+ .em-filemanager .uploadProgress__common-error-row {
1523
+ display: flex;
1524
+ align-items: flex-start;
1525
+ gap: 8px;
1636
1526
  }
1637
- .em-filemanager .stockColorFilter label.tealColor,
1638
- .em-filemanager .stockColorFilter [class^=ant-radio].tealColor {
1639
- background: #43c3c3;
1527
+
1528
+ .em-filemanager .uploadProgress__common-error-hint {
1529
+ font-size: 12px !important;
1530
+ margin-top: 4px;
1531
+ margin-left: 28px; /* icon width + gap */
1640
1532
  }
1641
- .em-filemanager .stockColorFilter label.blueColor,
1642
- .em-filemanager .stockColorFilter [class^=ant-radio].blueColor {
1643
- background: #1677ff;
1533
+
1534
+ .em-filemanager .uploadProgress__list-wrapper {
1535
+ max-height: 300px;
1536
+ overflow-y: auto;
1537
+ overflow-x: hidden;
1644
1538
  }
1645
1539
 
1646
- .em-filemanager .resultsContainer {
1647
- width: 640px;
1648
- max-width: 100%;
1649
- overflow: auto;
1650
- box-sizing: border-box;
1651
- padding: 60px 16px;
1652
- border-radius: 12px;
1653
- background-color: var(--colorBgContainer);
1540
+ .em-filemanager .uploadProgress__status-icon {
1654
1541
  display: flex;
1655
1542
  align-items: center;
1656
1543
  justify-content: center;
1657
- flex-direction: column;
1544
+ width: 20px;
1545
+ height: 20px;
1658
1546
  }
1659
1547
 
1660
- .em-filemanager .playButton {
1661
- color: var(--colorPrimary);
1662
- margin-bottom: 16px;
1548
+ .em-filemanager .uploadProgress__status-icon-icon {
1549
+ font-size: 20px;
1550
+ color: #52c41a;
1663
1551
  }
1664
1552
 
1665
- .em-filemanager .title {
1666
- font-size: 16px;
1667
- font-weight: 600;
1668
- line-height: 1.2;
1669
- margin-bottom: 4px;
1553
+ .em-filemanager .uploadProgress__file-item {
1554
+ padding: 8px 0 !important;
1555
+ border-bottom: 1px solid var(--colorBorderSecondary);
1670
1556
  }
1671
1557
 
1672
- .em-filemanager .subtitle {
1673
- font-size: 14px;
1674
- color: var(--colorSecondary);
1675
- line-height: 1.2;
1558
+ .em-filemanager .uploadProgress__file-item--error {
1559
+ padding: 10px 0 !important;
1676
1560
  }
1677
1561
 
1678
- .em-filemanager .dark .stockTab .listItem {
1679
- border: 1px solid #2b2b2b;
1680
- background: #2b2b2b;
1562
+ .uploadProgress__body--error .uploadProgress__file-item {
1563
+ display: grid !important;
1681
1564
  }
1682
- .em-filemanager .slideshowContainer {
1683
- position: relative;
1684
- margin: auto;
1685
- overflow: hidden;
1686
- border-radius: 6px;
1687
- width: 100%;
1688
- height: 100%;
1689
- object-fit: contain;
1565
+
1566
+ /* Ошибка загрузки: стиль как у уведомления — читаемый список */
1567
+ .em-filemanager .uploadProgress__error-item {
1690
1568
  display: flex;
1691
- align-items: center;
1692
- justify-content: center;
1569
+ flex-direction: column;
1570
+ gap: 4px;
1571
+ margin-top: 4px;
1693
1572
  }
1694
1573
 
1695
- .em-filemanager .slideshowImage {
1696
- position: absolute;
1697
- top: 50%;
1698
- left: 50%;
1699
- transform: translate(-50%, -50%);
1700
- max-width: 100%;
1701
- max-height: 100%;
1702
- width: auto;
1703
- height: auto;
1704
- opacity: 0;
1705
- object-fit: contain;
1574
+ .em-filemanager .uploadProgress__error-message {
1575
+ font-size: 12px !important;
1576
+ line-height: 1.3;
1706
1577
  }
1707
- .em-filemanager .limits-couter-wrapper {
1708
- display: flex;
1709
- justify-content: space-between;
1710
- align-items: center;
1578
+
1579
+ .em-filemanager .uploadProgress__error-hint {
1580
+ font-size: 11px !important;
1581
+ line-height: 1.3;
1582
+ color: var(--colorTextSecondary) !important;
1711
1583
  }
1712
- .em-filemanager .limits-couter-wrapper .limit-counter {
1713
- margin: 15px 16px 15px 0;
1714
- padding: 0 12px;
1715
- border-radius: 20px;
1716
- font-size: 14px;
1717
- pointer-events: none;
1718
- height: 34px;
1584
+
1585
+ .em-filemanager .uploadProgress__file-item:last-child {
1586
+ border-bottom: none;
1587
+ }
1588
+
1589
+ .em-filemanager .uploadProgress__file-avatar {
1590
+ background-color: transparent !important;
1591
+ }
1592
+
1593
+ .em-filemanager .uploadProgress__file-info {
1719
1594
  display: flex;
1720
- align-items: center;
1595
+ flex-direction: column;
1596
+ gap: 2px;
1721
1597
  }
1722
- .em-filemanager .imageAi {
1723
- height: calc(100% - 142px);
1724
- padding: calc(var(--marginLG) * 1px);
1725
- overflow: hidden;
1598
+
1599
+ .em-filemanager .uploadProgress__file-name {
1600
+ font-size: 13px;
1601
+ line-height: 1.2;
1602
+ max-width: 100%;
1726
1603
  }
1727
- .em-filemanager .imageAi .imageAiExample {
1728
- padding-bottom: calc(var(--marginLG) * 1px);
1604
+
1605
+ .em-filemanager .uploadProgress__file-size {
1606
+ font-size: 12px;
1729
1607
  }
1730
- .em-filemanager .imageAi .imageAiExample span {
1731
- color: var(--colorTextSecondary);
1608
+
1609
+ .em-filemanager .uploadProgress__progress-bar {
1610
+ margin-top: 4px;
1732
1611
  }
1733
1612
 
1734
- .em-filemanager .slideshowImage {
1735
- width: auto;
1736
- height: auto;
1737
- border-radius: 6px;
1613
+ /* Минимизированное состояние */
1614
+ .em-filemanager .uploadProgress__minimized {
1615
+ position: fixed;
1616
+ top: 20px;
1617
+ left: 20px;
1618
+ z-index: 4005;
1738
1619
  }
1739
1620
 
1740
- .em-filemanager .imageItem {
1741
- display: flex;
1742
- justify-content: center;
1743
- align-items: center;
1744
- position: relative;
1745
- text-align: center;
1746
- min-height: 100px;
1747
- border-radius: 6px;
1621
+ .em-filemanager .uploadProgress__minimized-button {
1622
+ font-size: 12px;
1623
+ height: 28px;
1624
+ padding: 0 12px;
1625
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
1748
1626
  }
1749
- .em-filemanager .imageItem .buttons {
1750
- display: flex;
1751
- justify-content: space-between;
1752
- position: absolute;
1753
- bottom: 10px;
1754
- left: 50%;
1755
- transform: translateX(-50%);
1627
+
1628
+ /* Скроллбар для списка файлов */
1629
+ .em-filemanager .uploadProgress__file-list::-webkit-scrollbar {
1630
+ width: 6px;
1756
1631
  }
1757
1632
 
1758
- .em-filemanager .textAreaInputHybrid {
1759
- padding: 0 0 0 1px;
1760
- border: none;
1761
- outline: none;
1762
- min-height: 0;
1633
+ .em-filemanager .uploadProgress__file-list::-webkit-scrollbar-track {
1634
+ background: #f1f1f1;
1635
+ border-radius: 3px;
1763
1636
  }
1764
1637
 
1765
- .em-filemanager .textAreaInputHybrid textarea {
1766
- padding: 3px 11px;
1767
- line-height: 26px;
1768
- height: 32px;
1769
- min-height: 32px;
1638
+ .em-filemanager .uploadProgress__file-list::-webkit-scrollbar-thumb {
1639
+ background: #c1c1c1;
1640
+ border-radius: 3px;
1770
1641
  }
1771
1642
 
1772
- .em-filemanager .loading {
1773
- display: flex;
1774
- justify-content: center;
1775
- align-items: center;
1776
- min-height: 150px;
1643
+ .em-filemanager .uploadProgress__file-list::-webkit-scrollbar-thumb:hover {
1644
+ background: #a8a8a8;
1777
1645
  }
1778
1646
 
1779
- .em-filemanager .spin {
1780
- display: flex;
1781
- flex-direction: column;
1782
- justify-content: center;
1783
- align-items: center;
1784
- height: 150px;
1647
+ /* Анимации */
1648
+ .em-filemanager .uploadProgress {
1649
+ animation: slideInFromLeft 0.3s ease-out;
1785
1650
  }
1786
1651
 
1787
- .em-filemanager .status {
1788
- margin: calc(var(--margin) * 1px) 0 0 0;
1652
+ .em-filemanager .uploadProgress__minimized {
1653
+ animation: slideInFromLeft 0.3s ease-out;
1789
1654
  }
1790
1655
 
1791
- .em-filemanager .carousel {
1792
- border-radius: 6px;
1793
- overflow: hidden;
1656
+ @keyframes slideInFromLeft {
1657
+ from {
1658
+ transform: translateX(-100%);
1659
+ opacity: 0;
1660
+ }
1661
+ to {
1662
+ transform: translateX(0);
1663
+ opacity: 1;
1664
+ }
1665
+ }
1666
+ /* Адаптивность */
1667
+ @media (max-width: 768px) {
1668
+ .em-filemanager .uploadProgress {
1669
+ top: 10px;
1670
+ left: 10px;
1671
+ right: 10px;
1672
+ max-width: calc(100vw - 20px);
1673
+ min-width: auto;
1674
+ }
1675
+ .em-filemanager .uploadProgress__minimized {
1676
+ top: 10px;
1677
+ left: 10px;
1678
+ }
1679
+ }
1680
+ .em-filemanager .gifTab {
1681
+ height: 100%;
1682
+ min-height: 0;
1794
1683
  }
1795
1684
 
1796
- .em-filemanager .carouselImage {
1797
- border-radius: calc(var(--borderRadiusLG) * 1px);
1798
- overflow: hidden;
1799
- transition: width 1s;
1800
- transition: height 1s;
1801
- max-height: 100%;
1802
- left: 50%;
1803
- top: 50%;
1804
- transform: translate(-50%, -50%);
1805
- object-fit: contain;
1685
+ .em-filemanager .scrollableDiv {
1686
+ width: 100%;
1687
+ height: 100%;
1688
+ overflow: auto;
1689
+ overflow-x: hidden;
1690
+ box-sizing: border-box;
1691
+ line-height: 0;
1692
+ display: flex;
1693
+ flex-direction: column;
1694
+ align-items: center;
1695
+ padding: 24px;
1806
1696
  }
1807
1697
 
1808
- .em-filemanager .small {
1809
- width: 302px;
1810
- height: 202px;
1698
+ .em-filemanager .gifSearchInput {
1699
+ padding: 0;
1700
+ width: 640px;
1701
+ max-width: 100%;
1702
+ transition: width 1s ease;
1703
+ margin: auto auto 24px;
1811
1704
  }
1812
1705
 
1813
- .em-filemanager .large {
1814
- width: 524px;
1815
- height: 350px;
1706
+ .em-filemanager .search {
1707
+ max-width: 100%;
1816
1708
  }
1817
1709
 
1818
- .em-filemanager .arrow {
1819
- z-index: 3000;
1820
- display: block;
1821
- position: absolute;
1822
- top: 50%;
1823
- background-color: transparent;
1824
- opacity: 0.8;
1825
- transform: translateY(-50%);
1710
+ .em-filemanager .searchResults {
1711
+ width: 100%;
1712
+ }
1713
+ .em-filemanager .searchResults .gifSearchInput {
1714
+ width: 100%;
1826
1715
  }
1827
1716
 
1828
- .em-filemanager .arrowNext {
1829
- right: 0;
1830
- transform: translateY(-50%) translateX(-100%);
1717
+ .em-filemanager .virtualCanvas {
1718
+ position: relative;
1719
+ width: 100%;
1831
1720
  }
1832
1721
 
1833
- .em-filemanager .arrowPrev {
1834
- left: 0;
1722
+ .em-filemanager .myMasonryGrid {
1723
+ display: flex;
1724
+ width: auto;
1725
+ text-align: center;
1835
1726
  }
1836
1727
 
1837
- .em-filemanager .arrowBtn {
1838
- border-radius: 100px;
1728
+ .em-filemanager .myMasonryGridColumn {
1729
+ background-clip: padding-box;
1839
1730
  }
1840
1731
 
1841
- .em-filemanager .arrowBtnNext {
1732
+ .em-filemanager .listItem {
1733
+ cursor: pointer;
1734
+ position: relative;
1735
+ transition: all 0.3s ease;
1736
+ border: 1px solid #f0f2f5;
1737
+ margin-bottom: 20px;
1738
+ display: inline-block;
1739
+ border-radius: 6px;
1740
+ min-height: 100px;
1741
+ max-height: 100px;
1742
+ max-width: inherit;
1743
+ overflow: hidden;
1744
+ background: #f0f2f5;
1745
+ }
1746
+ .em-filemanager .listItem .overlayImage {
1747
+ position: absolute;
1748
+ bottom: 10px;
1842
1749
  right: 10px;
1750
+ width: 110px;
1751
+ height: 40px;
1752
+ background-size: cover;
1753
+ opacity: 0;
1754
+ transition: opacity 0.5s ease;
1843
1755
  }
1844
-
1845
- .em-filemanager .arrowBtnPrev {
1846
- left: 10px;
1756
+ .em-filemanager .listItem img {
1757
+ display: block;
1758
+ border-radius: 6px;
1759
+ height: auto;
1760
+ object-fit: contain;
1761
+ opacity: 0;
1762
+ transition: opacity 0.5s ease-in-out;
1847
1763
  }
1848
-
1849
- .em-filemanager .row {
1850
- padding: 0 2px;
1764
+ .em-filemanager .listItem.loaded {
1765
+ max-height: 1000px;
1766
+ border: 1px solid #d9d9d9;
1851
1767
  }
1852
-
1853
- .em-filemanager .inputAffixWrapper {
1854
- padding-left: 0;
1768
+ .em-filemanager .listItem.loaded img {
1769
+ opacity: 1;
1770
+ height: 100%;
1771
+ width: 100%;
1772
+ margin: auto;
1855
1773
  }
1856
-
1857
- .em-filemanager .textarea {
1858
- font-size: 16px;
1774
+ .em-filemanager .listItem.loaded .loadedImage {
1775
+ opacity: 0.5;
1859
1776
  }
1860
-
1861
- .em-filemanager .inputIcon {
1862
- font-size: 16px;
1863
- top: 0;
1864
- right: 0;
1777
+ .em-filemanager .listItem:hover {
1778
+ box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
1865
1779
  }
1866
-
1867
- .em-filemanager .imageAiDark .carouselImage {
1868
- border: 1px solid #434343;
1869
- background: #2b2b2b;
1780
+ .em-filemanager .listItem:hover p.creatorInfo {
1781
+ opacity: 1;
1870
1782
  }
1871
-
1872
- .em-filemanager .imageAiDark .antBtn {
1873
- background: #1f1f1f;
1783
+ .em-filemanager .listItem:hover .overlayImage {
1784
+ opacity: 1;
1874
1785
  }
1875
-
1876
- .em-filemanager .imageAiDark .antBtn:hover {
1877
- color: var(--colorPrimary);
1786
+ .em-filemanager .listItem p.creatorInfo {
1787
+ position: absolute;
1788
+ border-radius: 0 0 6px 0;
1789
+ bottom: 0;
1790
+ right: 0;
1791
+ margin: 0;
1792
+ background-color: rgba(0, 0, 0, 0.5);
1793
+ color: #fff;
1794
+ padding: 5px;
1795
+ font-size: 10px;
1796
+ opacity: 0;
1797
+ line-height: 1.2;
1878
1798
  }
1879
- .em-filemanager .iconsTab {
1880
- display: flex;
1881
- flex-direction: column;
1882
- height: 100%;
1883
- min-height: 0;
1799
+ .em-filemanager .listItem p.creatorInfo:hover a {
1800
+ color: #fff;
1801
+ text-decoration: underline;
1884
1802
  }
1885
- .em-filemanager .iconsTab.hasSearch {
1886
- padding-top: 0;
1803
+ .em-filemanager .listItem p.creatorInfo a {
1804
+ color: #fff;
1805
+ text-decoration: none;
1887
1806
  }
1888
1807
 
1889
- .em-filemanager .iconsSearchWrapper {
1890
- width: 100%;
1808
+ .em-filemanager .searchOutputWrapper {
1891
1809
  height: 100%;
1892
1810
  min-height: 0;
1893
1811
  overflow: hidden;
1894
- box-sizing: border-box;
1895
- line-height: 0;
1896
- display: flex;
1897
- flex-direction: column;
1898
- align-items: center;
1899
- padding: 24px;
1900
1812
  }
1901
1813
 
1902
- .em-filemanager .iconsSearchForm {
1903
- display: flex;
1904
- gap: 8px;
1905
- width: 100%;
1906
- margin-bottom: 0;
1814
+ .em-filemanager .divider {
1815
+ margin-bottom: calc(var(--marginLG) * 1px);
1816
+ border-color: var(--colorBorder);
1907
1817
  }
1908
1818
 
1909
- .em-filemanager .iconsSearchFormCenteredContainer {
1819
+ .em-filemanager .myMasonryGrid {
1910
1820
  display: flex;
1911
- flex-direction: column;
1912
- align-items: flex-start;
1913
- justify-content: flex-start;
1914
- width: 100%;
1915
- padding: 24px 24px 0;
1821
+ width: auto;
1822
+ text-align: center;
1823
+ gap: calc(var(--marginLG) * 1px);
1916
1824
  }
1917
1825
 
1918
- .em-filemanager .iconsSearchFormCentered {
1919
- display: flex;
1920
- flex-direction: row;
1921
- width: 100%;
1922
- align-items: flex-start;
1923
- justify-content: center;
1826
+ .em-filemanager .myMasonryGridColumn {
1827
+ background-clip: padding-box;
1924
1828
  }
1925
- .em-filemanager .iconsSearchFormCentered .iconsSearchFormInput {
1829
+
1830
+ .em-filemanager .resultsContainer {
1926
1831
  width: 640px;
1927
1832
  max-width: 100%;
1928
- padding: 0;
1929
- margin: auto auto 12px;
1930
- transition: all 300ms ease;
1833
+ overflow: auto;
1834
+ box-sizing: border-box;
1835
+ padding: 60px 16px;
1836
+ border-radius: 12px;
1837
+ background-color: var(--colorBgContainer);
1838
+ display: flex;
1839
+ align-items: center;
1840
+ justify-content: center;
1841
+ flex-direction: column;
1931
1842
  }
1932
- .em-filemanager .iconsSearchFormCentered .iconsSearchFormInputInput {
1933
- max-width: 100%;
1934
- width: 100%;
1843
+
1844
+ .em-filemanager .playButton {
1845
+ color: var(--colorPrimary);
1846
+ margin-bottom: 16px;
1935
1847
  }
1936
1848
 
1937
- .em-filemanager .iconsSearchFormInput {
1938
- width: 240px;
1849
+ .em-filemanager .title {
1850
+ font-size: 16px;
1851
+ font-weight: 600;
1852
+ line-height: 1.2;
1853
+ margin-bottom: 4px;
1854
+ }
1855
+
1856
+ .em-filemanager .subtitle {
1857
+ font-size: 14px;
1858
+ color: var(--colorSecondary);
1859
+ line-height: 1.2;
1860
+ }
1861
+ .em-filemanager .stockTab {
1862
+ height: 100%;
1863
+ min-height: 0;
1864
+ }
1865
+
1866
+ .em-filemanager .stockSearchInput {
1939
1867
  padding: 0;
1940
- margin-bottom: 0;
1941
- transition: all 300ms ease;
1868
+ width: 640px;
1869
+ transition: all 200ms ease;
1870
+ margin: auto auto 24px;
1942
1871
  }
1943
1872
 
1944
- .em-filemanager .iconsSearchResults {
1945
- width: 100%;
1946
- display: flex;
1947
- flex-direction: row;
1948
- gap: 8px;
1949
- align-items: flex-start;
1950
- justify-content: flex-start;
1873
+ .em-filemanager .searchOutputWrapper {
1874
+ height: 100%;
1875
+ min-height: 0;
1876
+ overflow: hidden;
1951
1877
  }
1952
- .em-filemanager .iconsSearchResults .iconsSearchFormInput {
1953
- width: 240px;
1954
- flex: 0 0 auto;
1955
- margin-bottom: 0;
1878
+
1879
+ .em-filemanager .divider {
1880
+ margin-bottom: calc(var(--marginLG) * 1px);
1881
+ border-color: var(--colorBorder);
1956
1882
  }
1957
1883
 
1958
- .em-filemanager .iconsControlsControls {
1959
- display: flex;
1960
- align-items: center;
1961
- gap: 16px;
1884
+ .em-filemanager .search {
1885
+ max-width: 100%;
1962
1886
  }
1963
1887
 
1964
- .em-filemanager .iconsSearchFormInputInput {
1888
+ .em-filemanager .searchResults {
1889
+ width: 100%;
1890
+ }
1891
+ .em-filemanager .searchResults .stockSearchInput {
1965
1892
  width: 100%;
1966
1893
  }
1894
+ .em-filemanager .searchResults label {
1895
+ height: calc(var(--formControlHeight) * 1px);
1896
+ line-height: calc(var(--formControlHeight) * 1px);
1897
+ }
1967
1898
 
1968
- .em-filemanager .iconsControls {
1969
- display: flex;
1970
- justify-content: space-between;
1971
- align-items: center;
1899
+ .em-filemanager .virtualCanvas {
1900
+ position: relative;
1972
1901
  width: 100%;
1973
- padding: 24px 6px 24px 24px;
1974
- border-bottom: 1px solid var(--colorBorder);
1975
1902
  }
1976
1903
 
1977
- .em-filemanager .iconsControlsFamilySlug {
1978
- opacity: 0.7;
1904
+ .em-filemanager .blocksSearchDividerWrapper {
1905
+ margin: 0;
1979
1906
  }
1980
1907
 
1981
- .em-filemanager .iconsControlElement {
1908
+ .em-filemanager .scrollableDiv {
1909
+ width: 100%;
1910
+ height: 100%;
1911
+ overflow: auto;
1912
+ overflow-x: hidden;
1913
+ box-sizing: border-box;
1914
+ line-height: 0;
1982
1915
  display: flex;
1916
+ flex-direction: column;
1983
1917
  align-items: center;
1984
- gap: 8px;
1985
- }
1986
- .em-filemanager .iconsControlElement > span {
1987
- color: var(--colorTextTertiary);
1918
+ padding: 24px;
1988
1919
  }
1989
1920
 
1990
- .em-filemanager .iconsControlsStrokeWidth {
1921
+ .em-filemanager .myMasonryGrid {
1991
1922
  display: flex;
1992
- align-items: center;
1993
- gap: 8px;
1994
- }
1995
- .em-filemanager .iconsControlsStrokeWidth > span {
1996
- color: var(--colorTextTertiary);
1923
+ width: auto;
1924
+ text-align: center;
1925
+ gap: calc(var(--marginLG) * 1px);
1997
1926
  }
1998
- .em-filemanager .iconsControlsStrokeWidth .ant-input-number {
1999
- width: 80px;
1927
+
1928
+ .em-filemanager .myMasonryGridColumn {
1929
+ background-clip: padding-box;
2000
1930
  }
2001
1931
 
2002
- .em-filemanager .iconsControlsCompact {
1932
+ .em-filemanager .listItem {
1933
+ cursor: pointer;
2003
1934
  position: relative;
1935
+ transition: all 0.3s ease;
1936
+ border: 1px solid #f0f2f5;
1937
+ margin-bottom: 20px;
1938
+ display: inline-block;
1939
+ border-radius: 6px;
1940
+ min-height: 100px;
1941
+ max-height: 100px;
1942
+ max-width: inherit;
1943
+ overflow: hidden;
1944
+ background: #f0f2f5;
2004
1945
  }
2005
-
2006
- .em-filemanager .iconsControlsInputNumber {
1946
+ .em-filemanager .listItem .overlayImage {
1947
+ position: absolute;
1948
+ bottom: 10px;
1949
+ right: 10px;
2007
1950
  width: 110px;
1951
+ height: 40px;
1952
+ background-size: cover;
1953
+ opacity: 0;
1954
+ transition: opacity 0.5s ease;
2008
1955
  }
2009
-
2010
- .em-filemanager .iconsControlsDropdownBtn {
2011
- padding: 0;
2012
- height: 32px;
2013
- min-width: 36px;
2014
- width: 36px;
2015
- border-top-right-radius: 6px !important;
2016
- border-bottom-right-radius: 6px !important;
2017
- border-top-left-radius: 0 !important;
2018
- border-bottom-left-radius: 0 !important;
2019
- display: inline-flex;
2020
- align-items: center;
2021
- justify-content: center;
2022
- color: var(--colorTextTertiary);
1956
+ .em-filemanager .listItem img {
1957
+ display: block;
1958
+ border-radius: 6px;
1959
+ height: auto;
1960
+ object-fit: contain;
1961
+ opacity: 0;
1962
+ transition: opacity 0.5s ease-in-out;
2023
1963
  }
2024
- .em-filemanager .iconsControlsDropdownBtn:hover {
2025
- color: var(--colorTextSecondary);
1964
+ .em-filemanager .listItem.loaded {
1965
+ max-height: 1000px;
1966
+ border: 1px solid #d9d9d9;
2026
1967
  }
2027
-
2028
- .em-filemanager .iconsControlsCompact .iconsControlsDropdownBtn {
2029
- border-top-right-radius: 6px !important;
2030
- border-bottom-right-radius: 6px !important;
1968
+ .em-filemanager .listItem.loaded img {
1969
+ opacity: 1;
1970
+ height: 100%;
1971
+ width: 100%;
1972
+ margin: auto;
2031
1973
  }
2032
-
2033
- .em-filemanager .sliderDropdown {
1974
+ .em-filemanager .listItem.loaded .loadedImage {
1975
+ opacity: 0.5;
1976
+ }
1977
+ .em-filemanager .listItem:hover {
1978
+ box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
1979
+ }
1980
+ .em-filemanager .listItem:hover p.creatorInfo {
1981
+ opacity: 1;
1982
+ }
1983
+ .em-filemanager .listItem:hover .overlayImage {
1984
+ opacity: 1;
1985
+ }
1986
+ .em-filemanager .listItem p.creatorInfo {
2034
1987
  position: absolute;
2035
- left: 50%;
2036
- transform: translateX(-50%);
2037
- top: calc(100% + 6px);
2038
- width: 240px;
2039
- background: #fff;
2040
- border: 1px solid rgba(0, 0, 0, 0.08);
2041
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
2042
- border-radius: 8px;
2043
- padding: 10px 12px;
2044
- z-index: 1000;
1988
+ border-radius: 0 0 6px 0;
1989
+ bottom: 0;
1990
+ right: 0;
1991
+ margin: 0;
1992
+ background-color: rgba(0, 0, 0, 0.5);
1993
+ color: #fff;
1994
+ padding: 5px;
1995
+ font-size: 10px;
1996
+ opacity: 0;
1997
+ line-height: 1.2;
1998
+ }
1999
+ .em-filemanager .listItem p.creatorInfo:hover a {
2000
+ color: #fff;
2001
+ text-decoration: underline;
2002
+ }
2003
+ .em-filemanager .listItem p.creatorInfo a {
2004
+ color: #fff;
2005
+ text-decoration: none;
2045
2006
  }
2046
2007
 
2047
- .em-filemanager .iconsControlsHeader {
2008
+ .em-filemanager .stockColorFilter {
2048
2009
  display: flex;
2049
- align-items: center;
2050
2010
  }
2051
-
2052
- .em-filemanager .iconsSearchFormSelect {
2053
- width: 160px !important;
2011
+ .em-filemanager .stockColorFilter label,
2012
+ .em-filemanager .stockColorFilter [class^=ant-radio] {
2013
+ border-radius: 6px !important;
2014
+ width: 24px;
2015
+ height: 24px;
2016
+ margin: 4px 4px;
2017
+ padding: 0;
2018
+ font-size: 0;
2019
+ border-width: 1px;
2054
2020
  }
2055
-
2056
- .em-filemanager .iconsSearchFormStyleItem {
2057
- margin-bottom: 0;
2058
- animation: fadeInSlide 300ms ease forwards;
2021
+ .em-filemanager .stockColorFilter label::before,
2022
+ .em-filemanager .stockColorFilter [class^=ant-radio]::before {
2023
+ display: none;
2059
2024
  }
2060
-
2061
- @keyframes fadeInSlide {
2062
- from {
2063
- opacity: 0;
2064
- transform: translateX(-10px);
2065
- }
2066
- to {
2067
- opacity: 1;
2068
- transform: translateX(0);
2069
- }
2025
+ .em-filemanager .stockColorFilter label.allColors,
2026
+ .em-filemanager .stockColorFilter [class^=ant-radio].allColors {
2027
+ background-image: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
2070
2028
  }
2071
- .em-filemanager .iconsSearchDivider {
2072
- margin-top: 24px;
2073
- margin-bottom: 0;
2074
- border-color: var(--colorBorder);
2075
- width: 100%;
2029
+ .em-filemanager .stockColorFilter label.blackColor,
2030
+ .em-filemanager .stockColorFilter [class^=ant-radio].blackColor {
2031
+ background: #222222;
2076
2032
  }
2077
-
2078
- .em-filemanager .iconsSearchFormInputIcon {
2079
- font-size: 16px;
2080
- cursor: pointer;
2033
+ .em-filemanager .stockColorFilter label.bwColor,
2034
+ .em-filemanager .stockColorFilter [class^=ant-radio].bwColor {
2035
+ background-image: linear-gradient(135deg, #222222 50%, white 50%);
2081
2036
  }
2082
-
2083
- .em-filemanager .iconsGrid {
2084
- width: 100%;
2085
- flex: 1 1 auto;
2086
- min-height: 0;
2087
- overflow: auto;
2088
- overflow-x: hidden;
2089
- box-sizing: border-box;
2090
- padding: 24px;
2037
+ .em-filemanager .stockColorFilter label.whiteColor,
2038
+ .em-filemanager .stockColorFilter [class^=ant-radio].whiteColor {
2039
+ background: #ffffff;
2091
2040
  }
2092
-
2093
- .em-filemanager .iconsBottomBar {
2094
- position: sticky;
2095
- bottom: 0;
2096
- background: var(--colorBgLayout);
2097
- z-index: 5;
2098
- width: 100%;
2041
+ .em-filemanager .stockColorFilter label.orangeColor,
2042
+ .em-filemanager .stockColorFilter [class^=ant-radio].orangeColor {
2043
+ background: #fa8c16;
2099
2044
  }
2100
-
2101
- .em-filemanager .iconsBottomBarContent {
2102
- display: flex;
2103
- justify-content: right;
2104
- padding: 17px 24px;
2105
- align-items: center;
2045
+ .em-filemanager .stockColorFilter label.redColor,
2046
+ .em-filemanager .stockColorFilter [class^=ant-radio].redColor {
2047
+ background: #f5222d;
2106
2048
  }
2107
-
2108
- .em-filemanager .iconsGridEmpty {
2109
- margin: 40px 0px;
2049
+ .em-filemanager .stockColorFilter label.purpleColor,
2050
+ .em-filemanager .stockColorFilter [class^=ant-radio].purpleColor {
2051
+ background: #722ed1;
2110
2052
  }
2111
-
2112
- .em-filemanager .iconsGridEmptyState {
2113
- display: flex;
2114
- justify-content: center;
2115
- align-items: center;
2116
- padding: 0;
2053
+ .em-filemanager .stockColorFilter label.magentaColor,
2054
+ .em-filemanager .stockColorFilter [class^=ant-radio].magentaColor {
2055
+ background: #eb2f96;
2056
+ }
2057
+ .em-filemanager .stockColorFilter label.greenColor,
2058
+ .em-filemanager .stockColorFilter [class^=ant-radio].greenColor {
2059
+ background: #52c41a;
2060
+ }
2061
+ .em-filemanager .stockColorFilter label.tealColor,
2062
+ .em-filemanager .stockColorFilter [class^=ant-radio].tealColor {
2063
+ background: #43c3c3;
2064
+ }
2065
+ .em-filemanager .stockColorFilter label.blueColor,
2066
+ .em-filemanager .stockColorFilter [class^=ant-radio].blueColor {
2067
+ background: #1677ff;
2117
2068
  }
2118
2069
 
2119
2070
  .em-filemanager .resultsContainer {
@@ -2128,7 +2079,6 @@
2128
2079
  align-items: center;
2129
2080
  justify-content: center;
2130
2081
  flex-direction: column;
2131
- text-align: center;
2132
2082
  }
2133
2083
 
2134
2084
  .em-filemanager .playButton {
@@ -2149,156 +2099,206 @@
2149
2099
  line-height: 1.2;
2150
2100
  }
2151
2101
 
2152
- .em-filemanager .iconsGridInfiniteScroll {
2153
- overflow: hidden !important;
2102
+ .em-filemanager .dark .stockTab .listItem {
2103
+ border: 1px solid #2b2b2b;
2104
+ background: #2b2b2b;
2154
2105
  }
2155
-
2156
- .em-filemanager .iconsGridLoadingMore {
2106
+ .em-filemanager .slideshowContainer {
2107
+ position: relative;
2108
+ margin: auto;
2109
+ overflow: hidden;
2110
+ border-radius: 6px;
2111
+ width: 100%;
2112
+ height: 100%;
2113
+ object-fit: contain;
2157
2114
  display: flex;
2115
+ align-items: center;
2158
2116
  justify-content: center;
2159
- padding: 16px 0;
2160
2117
  }
2161
2118
 
2162
- .em-filemanager .iconsGridGrid {
2163
- display: grid;
2164
- grid-template-columns: repeat(auto-fill, minmax(var(--icons-grid-min-col, 148px), 1fr));
2165
- gap: 16px;
2119
+ .em-filemanager .slideshowImage {
2120
+ position: absolute;
2121
+ top: 50%;
2122
+ left: 50%;
2123
+ transform: translate(-50%, -50%);
2124
+ max-width: 100%;
2125
+ max-height: 100%;
2126
+ width: auto;
2127
+ height: auto;
2128
+ opacity: 0;
2129
+ object-fit: contain;
2166
2130
  }
2167
-
2168
- .em-filemanager .iconsGridVirtualCanvas {
2169
- position: relative;
2170
- width: 100%;
2131
+ .em-filemanager .limits-couter-wrapper {
2132
+ display: flex;
2133
+ justify-content: space-between;
2134
+ align-items: center;
2171
2135
  }
2172
-
2173
- .em-filemanager .iconsGridItem {
2174
- position: relative;
2175
- border-radius: 8px;
2176
- padding: 12px;
2177
- background: #fff;
2178
- cursor: pointer;
2136
+ .em-filemanager .limits-couter-wrapper .limit-counter {
2137
+ margin: 15px 16px 15px 0;
2138
+ padding: 0 12px;
2139
+ border-radius: 20px;
2140
+ font-size: 14px;
2141
+ pointer-events: none;
2142
+ height: 34px;
2179
2143
  display: flex;
2180
- flex-direction: column;
2181
- box-sizing: border-box;
2144
+ align-items: center;
2145
+ }
2146
+ .em-filemanager .imageAi {
2147
+ height: calc(100% - 142px);
2148
+ padding: calc(var(--marginLG) * 1px);
2182
2149
  overflow: hidden;
2183
- box-shadow: inset 0 0 0 1px #f0f0f0;
2150
+ }
2151
+ .em-filemanager .imageAi .imageAiExample {
2152
+ padding-bottom: calc(var(--marginLG) * 1px);
2153
+ }
2154
+ .em-filemanager .imageAi .imageAiExample span {
2155
+ color: var(--colorTextSecondary);
2184
2156
  }
2185
2157
 
2186
- .em-filemanager .iconsGridItemThumbnail {
2158
+ .em-filemanager .slideshowImage {
2159
+ width: auto;
2160
+ height: auto;
2161
+ border-radius: 6px;
2162
+ }
2163
+
2164
+ .em-filemanager .imageItem {
2187
2165
  display: flex;
2188
- align-items: center;
2189
2166
  justify-content: center;
2190
- flex: 1 1 auto;
2167
+ align-items: center;
2168
+ position: relative;
2169
+ text-align: center;
2170
+ min-height: 100px;
2171
+ border-radius: 6px;
2172
+ }
2173
+ .em-filemanager .imageItem .buttons {
2174
+ display: flex;
2175
+ justify-content: space-between;
2176
+ position: absolute;
2177
+ bottom: 10px;
2178
+ left: 50%;
2179
+ transform: translateX(-50%);
2180
+ }
2181
+
2182
+ .em-filemanager .textAreaInputHybrid {
2183
+ padding: 0 0 0 1px;
2184
+ border: none;
2185
+ outline: none;
2191
2186
  min-height: 0;
2192
2187
  }
2193
2188
 
2194
- .em-filemanager .iconsGridItemSvg {
2195
- width: 100%;
2196
- height: 100%;
2189
+ .em-filemanager .textAreaInputHybrid textarea {
2190
+ padding: 3px 11px;
2191
+ line-height: 26px;
2192
+ height: 32px;
2193
+ min-height: 32px;
2194
+ }
2195
+
2196
+ .em-filemanager .loading {
2197
2197
  display: flex;
2198
+ justify-content: center;
2198
2199
  align-items: center;
2200
+ min-height: 150px;
2201
+ }
2202
+
2203
+ .em-filemanager .spin {
2204
+ display: flex;
2205
+ flex-direction: column;
2199
2206
  justify-content: center;
2207
+ align-items: center;
2208
+ height: 150px;
2200
2209
  }
2201
2210
 
2202
- .em-filemanager .iconsGridItemImg {
2203
- max-width: 100%;
2204
- object-fit: contain;
2211
+ .em-filemanager .status {
2212
+ margin: calc(var(--margin) * 1px) 0 0 0;
2205
2213
  }
2206
2214
 
2207
- .em-filemanager .iconsGridItemName {
2208
- margin-top: 8px;
2209
- font-size: 12px;
2210
- line-height: 1.2;
2211
- white-space: nowrap;
2212
- text-overflow: ellipsis;
2215
+ .em-filemanager .carousel {
2216
+ border-radius: 6px;
2213
2217
  overflow: hidden;
2214
- flex: 0 0 auto;
2215
2218
  }
2216
2219
 
2217
- .em-filemanager .iconsGridItemSelected::after {
2218
- content: "";
2219
- position: absolute;
2220
- inset: 0;
2221
- border: 2px solid #1890ff;
2222
- border-radius: inherit;
2223
- pointer-events: none;
2220
+ .em-filemanager .carouselImage {
2221
+ border-radius: calc(var(--borderRadiusLG) * 1px);
2222
+ overflow: hidden;
2223
+ transition: width 1s;
2224
+ transition: height 1s;
2225
+ max-height: 100%;
2226
+ left: 50%;
2227
+ top: 50%;
2228
+ transform: translate(-50%, -50%);
2229
+ object-fit: contain;
2224
2230
  }
2225
2231
 
2226
- .em-filemanager .iconsGridItemInsertButton {
2232
+ .em-filemanager .small {
2233
+ width: 302px;
2234
+ height: 202px;
2235
+ }
2236
+
2237
+ .em-filemanager .large {
2238
+ width: 524px;
2239
+ height: 350px;
2240
+ }
2241
+
2242
+ .em-filemanager .arrow {
2243
+ z-index: 3000;
2244
+ display: block;
2227
2245
  position: absolute;
2228
- top: 8px;
2229
- right: 8px;
2246
+ top: 50%;
2247
+ background-color: transparent;
2248
+ opacity: 0.8;
2249
+ transform: translateY(-50%);
2230
2250
  }
2231
2251
 
2232
- .em-filemanager .iconsGridLoading {
2233
- display: flex;
2234
- align-items: center;
2235
- justify-content: center;
2236
- width: 100%;
2237
- min-height: 50vh;
2252
+ .em-filemanager .arrowNext {
2253
+ right: 0;
2254
+ transform: translateY(-50%) translateX(-100%);
2238
2255
  }
2239
2256
 
2240
- .em-filemanager .iconsControlsBackButton {
2241
- margin-right: 20px;
2257
+ .em-filemanager .arrowPrev {
2258
+ left: 0;
2242
2259
  }
2243
2260
 
2244
- .em-filemanager .iconsGridCheckbox {
2245
- position: absolute;
2246
- top: 8px;
2247
- left: 8px;
2248
- z-index: 2;
2249
- opacity: 0;
2250
- pointer-events: none;
2251
- transition: opacity 0.15s ease-in-out;
2261
+ .em-filemanager .arrowBtn {
2262
+ border-radius: 100px;
2252
2263
  }
2253
2264
 
2254
- .em-filemanager .iconsGridItem:hover .iconsGridCheckbox {
2255
- opacity: 1;
2256
- pointer-events: auto;
2265
+ .em-filemanager .arrowBtnNext {
2266
+ right: 10px;
2257
2267
  }
2258
2268
 
2259
- .em-filemanager .iconsGridShowCheckboxes .iconsGridCheckbox {
2260
- opacity: 1;
2261
- pointer-events: auto;
2269
+ .em-filemanager .arrowBtnPrev {
2270
+ left: 10px;
2262
2271
  }
2263
2272
 
2264
- .em-filemanager .iconsHeaderContainer {
2265
- display: flex;
2266
- align-items: center;
2267
- justify-content: space-between;
2268
- gap: 12px;
2269
- width: 100%;
2270
- box-sizing: border-box;
2271
- padding: 24px 24px;
2272
- margin: 0;
2273
- border-bottom: 1px solid var(--colorBorder);
2273
+ .em-filemanager .row {
2274
+ padding: 0 2px;
2274
2275
  }
2275
2276
 
2276
- .em-filemanager .iconsHeaderContainerLeft {
2277
- display: flex;
2278
- gap: 10px;
2279
- align-items: center;
2277
+ .em-filemanager .inputAffixWrapper {
2278
+ padding-left: 0;
2280
2279
  }
2281
2280
 
2282
- .em-filemanager .iconsHeaderDivider {
2283
- margin-top: 24px;
2284
- margin-bottom: 0;
2285
- border-color: var(--colorBorder);
2286
- width: 100%;
2281
+ .em-filemanager .textarea {
2282
+ font-size: 16px;
2287
2283
  }
2288
2284
 
2289
- .em-filemanager .copyToFolderModalBody {
2290
- position: relative;
2285
+ .em-filemanager .inputIcon {
2286
+ font-size: 16px;
2287
+ top: 0;
2288
+ right: 0;
2291
2289
  }
2292
2290
 
2293
- .em-filemanager .copyToFolderModalLoadingOverlay {
2294
- position: absolute;
2295
- inset: 0;
2296
- z-index: 10;
2297
- display: flex;
2298
- align-items: center;
2299
- justify-content: center;
2300
- background: rgba(255, 255, 255, 0.6);
2301
- pointer-events: all;
2291
+ .em-filemanager .imageAiDark .carouselImage {
2292
+ border: 1px solid #434343;
2293
+ background: #2b2b2b;
2294
+ }
2295
+
2296
+ .em-filemanager .imageAiDark .antBtn {
2297
+ background: #1f1f1f;
2298
+ }
2299
+
2300
+ .em-filemanager .imageAiDark .antBtn:hover {
2301
+ color: var(--colorPrimary);
2302
2302
  }
2303
2303
  @charset "UTF-8";
2304
2304
  /* FileManagerApp стили */