@emailmaker/filemanager 0.10.4 → 0.10.5

package/file-manager.css

@@ -1,198 +1,3 @@
-@charset "UTF-8";
-
-.em-filemanager .button:hover {
-  background-color: var(--colorBgContainer);
-  color: var(--colorPrimary);
-}
-
-.em-filemanager .foldersTitle {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  cursor: pointer;
-}
-
-.em-filemanager .folderActions {
-  position: absolute;
-  top: 6px; /* Выравниваем по заголовку Folders */
-  right: 6px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  z-index: 10;
-}
-
-.em-filemanager .customExpandIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  cursor: pointer;
-  color: #666;
-  font-size: 10px;
-  transition: transform 0.2s ease;
-}
-
-.em-filemanager .customExpandIcon:hover {
-  color: var(--colorPrimary);
-}
-
-.em-filemanager .fileCount {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 100%;
-  padding: 0 6px;
-  margin-left: 8px;
-  color: #8D8D8D;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  cursor: default;
-  flex-shrink: 0; /* Запрещаем сжатие счетчика */
-}
-
-.em-filemanager .fileCount:hover {
-  border-color: var(--colorPrimary);
-  color: var(--colorPrimary);
-}
-
-/* :global(.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected):hover {
-  color: red !important;
-} */
-/* Стили для выделения текста в выбранной папке */
-
-/* Стили для иконки в выбранной папке */
-/* .folderMenu :global(.ant-tree-treenode-selected .folderIcon),
-.folderMenu :global(.ant-tree-node-selected .folderIcon) {
-  color: red !important;
-} */
-/* CSS переменные для упрощения расчетов */
-.em-filemanager .uploadButton {
-  display: grid;
-  grid-template-columns: 3fr 1fr;
-  width: 100%;
-  margin-bottom: 8px;
-}
-
-.em-filemanager .folderMenu {
-  padding-left: 0;
-  padding-right: 0; /* Место для кнопки справа */
-}
-
-/* Стили для линий дерева */
-
-/* Улучшение отображения folder-item-container */
-
-/* Стили для корневого элемента Folders */
-
-/* Стили для ellipsis - удаляем max-width для гибкости */
-
-/* Стили для пустого состояния */
-
-/* Убираем отступы у корневого узла */
-
-.em-filemanager .folderIcon {
-  margin-right: 8px;
-  font-size: 18px;
-  flex-shrink: 0; /* Запрещаем сжатие иконки */
-}
-
-.em-filemanager .folderLabelItem {
-  font-size: 14px;
-  font-weight: 400;
-  white-space: nowrap; /* Запрещаем перенос строк */
-  overflow: hidden; /* Скрываем переполнение */
-  text-overflow: ellipsis; /* Показываем троеточие */
-  flex: 1; /* Занимает доступное место */
-  min-width: 0; /* Позволяет сжиматься */
-  -webkit-user-select: none;
-          user-select: none;
-}
-
-.em-filemanager .foldersTitleItem {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  cursor: pointer;
-  min-width: 0; /* Позволяет сжиматься */
-  overflow: hidden; /* Скрываем переполнение */
-}
-
-/* .foldersTitleItem .folderLabelItem {
-  font-weight: 500;
-  color: #262626;
-} */
-/* Класс для заголовка папок */
-.em-filemanager .folderLabel {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.em-filemanager .foldersContainer {
-  position: relative;
-  width: 100%;
-}
-
-/* Дополнительные стили для улучшения визуала */
-/* .folderMenu :global(.ant-tree-treenode:hover .folder-label span) {
-  color: #1890ff;
-} */
-/* Стили для дивайдера между папками */
-.em-filemanager .divider {
-  margin: calc(var(--marginLG) * 1px) 0;
-}
-
-.em-filemanager .uploadButton .ant-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-/* .folderMenu :global(.ant-tree-treenode-selected) .folderLabelItem {
-  color: #1890ff !important;
-} */
-
-.em-filemanager .buttonWrapper {
-  overflow: hidden;
-  margin-bottom: 24px;
-  border-radius: calc(var(--borderRadius) * 1px);
-}
-
-.em-filemanager .uploadButtonIcon {
-  font-size: 20px;
-}
-
-.em-filemanager .uploadButtonTitle {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.em-filemanager .emptyFolderContainer {
-  margin-left: -40px;
-  -webkit-user-select: none;
-          user-select: none;
-  cursor: default;
-  color: var(--colorTextTertiary);
-}
-
-.em-filemanager .folderItemContainer {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 2px 0;
-  min-width: 0; /* Позволяет flex-элементам сжиматься */
-}
 .em-filemanager .contentLayout {
   display: flex;
   flex-direction: column;
@@ -205,7 +10,7 @@
   justify-content: space-between;
   margin-bottom: calc(var(--marginLG) * 1px);
   align-items: center;
-  padding: 0 calc(var(--marginLG) * 1px);
+  padding: 24px calc(var(--marginLG) * 1px) 0 calc(var(--marginLG) * 1px);
 }
 
 .em-filemanager .actionsContainer {
@@ -236,7 +41,7 @@
   justify-content: center;
   margin-top: calc(var(--margin) * 1px);
   margin-bottom: calc(var(--margin) * 1px);
-  min-height: 150px;
+  height: 90px;
 }
 
 .em-filemanager .paginationContainerEnd {
@@ -245,31 +50,6 @@
   margin-top: calc(var(--margin) * 1px);
 }
 
-.em-filemanager .uploadZone {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(4px);
-  border: 3px solid var(--colorPrimary);
-  border-radius: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  transition: all var(--motionDurationSlow);
-  animation: uploadZoneFadeIn 0.3s ease-out;
-}
-
-.em-filemanager .uploadZone.active {
-  border-color: var(--colorPrimary);
-  background-color: rgba(230, 247, 255, 0.95);
-  box-shadow: 0 0 20px rgba(24, 144, 255, 0.3);
-}
-
 .em-filemanager .uploadIcon {
   font-size: 64px;
   color: var(--colorPrimary);
@@ -292,24 +72,6 @@
   margin-top: calc(var(--paddingXXS) * 1px);
 }
 
-@keyframes uploadZoneFadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes uploadIconPulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-}
 .em-filemanager .tableContainer {
   flex: 1;
   overflow: auto;
@@ -334,7 +96,6 @@
 .em-filemanager .fileManagerTableFolderInner {
   display: flex;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: 100%;
 }
@@ -350,8 +111,9 @@
 }
 
 /* Table column styles */
-.em-filemanager .fileName {
-  font-weight: 500;
+.em-filemanager .fileNameCol {
+  max-width: calc(100% - 430px);
+  padding: 8px;
 }
 
 .em-filemanager .fileItemCount {
@@ -360,355 +122,609 @@
   margin-top: 2px;
 }
 
-.em-filemanager .fileSize {
-  color: var(--colorTextTertiary);
+.em-filemanager .fileSize {
+  color: var(--colorTextTertiary);
+}
+
+.em-filemanager .fileDate {
+  color: var(--colorTextTertiary);
+}
+
+.em-filemanager .tableMenu {
+  padding: 20px 7px;
+  display: flex;
+  text-align: center;
+}
+
+.em-filemanager .tableImagePreview {
+  object-fit: contain;
+  border-radius: calc(var(--borderRadius) * 1px);
+}
+
+.em-filemanager .tableFolderIcon {
+  color: var(--colorPrimary);
+  font-size: 28px;
+  width: 44px;
+  height: 44px;
+}
+
+.em-filemanager .buttonDeselected {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+.em-filemanager .gridRow {
+  margin: 0;
+  gap: 20px;
+  padding: 0 24px 24px;
+}
+
+.em-filemanager .gridCard {
+  border-radius: 16px;
+  overflow: hidden;
+  width: 220px;
+  height: 100%;
+  -webkit-user-select: none;
+          user-select: none;
+  border: 2px solid transparent;
+}
+.em-filemanager .gridCard:hover {
+  color: var(--colorPrimary);
+  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);
+}
+.gridCard .ant-card-body {
+  height: calc(100% - 180px);
+  max-height: calc(100% - 180px);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.em-filemanager .selectedRow > td {
+  border-top: 2px solid var(--colorPrimary) !important;
+  border-bottom: 2px solid var(--colorPrimary) !important;
+  margin-bottom: 4px;
+}
+
+.em-filemanager .selectedRow > td:first-child {
+  border-left: 2px solid var(--colorPrimary) !important;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.em-filemanager .selectedRow > td:last-child {
+  border-right: 2px solid var(--colorPrimary) !important;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.em-filemanager .gridCardSelected, .em-filemanager .gridCardSelected:hover {
+  border-color: var(--colorPrimary);
+}
+.em-filemanager .gridCardSelected .gridCheckbox, .em-filemanager .gridCardSelected:hover .gridCheckbox {
+  opacity: 1;
+}
+
+.em-filemanager .gridCardContent {
+  position: relative;
+  padding: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.em-filemanager .gridCheckbox {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 1;
+  opacity: 0;
+}
+
+.em-filemanager .gridPreviewContainer {
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: calc(var(--marginXS) * 1px);
+}
+
+.em-filemanager .gridPreviewContainerFolder {
+  width: 100%;
+  /* aspect-ratio: 1 / 1; */
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  background: #F8F8F8;
+  border-radius: calc(var(--borderRadiusSM) * 1px);
+  margin-bottom: calc(var(--marginXS) * 1px);
+  height: 100%;
+}
+
+.em-filemanager .gridFolderIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+}
+
+.em-filemanager .gridFolderIconImage {
+  color: var(--colorPrimary);
+}
+
+.em-filemanager .gridFileName {
+  font-weight: 400;
+  line-height: 1.3;
+  margin-bottom: 4px;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.em-filemanager .gridFileInfo {
+  color: #8c8c8c;
+  font-size: 13px;
+  line-height: 1.3;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.em-filemanager .gridCard .gridFileMenu {
+  opacity: 0;
+}
+.em-filemanager .gridCard:hover .gridCheckbox,
+.em-filemanager .gridCard:hover .gridFileMenu {
+  opacity: 1;
+}
+
+.em-filemanager .gridFileMenuButton {
+  padding: 4px 7px;
+}
+
+.em-filemanager .classsssssss {
+  background: red;
+  color: #4361ee;
+}
+
+.em-filemanager .sortContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.em-filemanager .sortLabel {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.em-filemanager .actionsBox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+@media (max-width: 1550px) {
+  .em-filemanager .gridCard {
+    width: 220px;
+  }
+}
+/* Upload Container Styles */
+.em-filemanager .uploadContainer {
+  width: 640px;
+  border-radius: 12px;
+  padding: 20px;
+  margin: auto;
+  position: relative;
+}
+
+.em-filemanager .uploadArea {
+  border: 2px dashed #ccc;
+  border-radius: 12px;
+  background: #f8f8f8;
+  cursor: pointer;
+  padding: 16px 36px;
+  text-align: center;
+  margin-bottom: 16px;
+  position: relative;
+}
+.em-filemanager .uploadArea:hover {
+  border-color: #007bff;
+}
+.em-filemanager .uploadArea.active {
+  border-color: #007bff;
+  background: #f8f8f8;
+}
+
+.em-filemanager .uploadIcon {
+  font-size: 48px;
+  color: #007bff;
+  margin-bottom: 10px;
+}
+
+.em-filemanager .blockText {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+.em-filemanager .textTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--colorTextPrimary);
+}
+
+.em-filemanager .textDescription {
+  font-size: 14px;
+  color: #8c8c8c;
+}
+
+.em-filemanager .buttons {
+  display: flex;
+  gap: 16px;
+}
+
+.em-filemanager .btnAi,
+.em-filemanager .btnPhoto {
+  flex: 1;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #ccc;
+  border-radius: 12px;
+  background: #f8f8f8;
+  padding: 24px 26px;
+  gap: 16px;
+}
+.em-filemanager .btnAi:hover,
+.em-filemanager .btnPhoto:hover {
+  border-color: #007bff;
+}
+@charset "UTF-8";
+
+.em-filemanager .button:hover {
+  background-color: var(--colorBgContainer);
+  color: var(--colorPrimary);
+}
+
+.em-filemanager .foldersTitle {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  cursor: pointer;
+}
+
+.em-filemanager .folderActions {
+  position: absolute;
+  top: 6px; /* Выравниваем по заголовку Folders */
+  right: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 10;
+}
+
+.em-filemanager .customExpandIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  cursor: pointer;
+  color: #666;
+  font-size: 10px;
+  transition: transform 0.2s ease;
+}
+
+.em-filemanager .customExpandIcon:hover {
+  color: var(--colorPrimary);
+}
+
+.em-filemanager .fileCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 100%;
+  padding: 0 6px;
+  margin-left: 8px;
+  color: #8D8D8D;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  cursor: default;
+  flex-shrink: 0; /* Запрещаем сжатие счетчика */
+}
+
+/* :global(.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected):hover {
+  color: red !important;
+} */
+/* Стили для выделения текста в выбранной папке */
+
+/* Стили для иконки в выбранной папке */
+/* .folderMenu :global(.ant-tree-treenode-selected .folderIcon),
+.folderMenu :global(.ant-tree-node-selected .folderIcon) {
+  color: red !important;
+} */
+/* CSS переменные для упрощения расчетов */
+.em-filemanager .uploadButton {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  width: 100%;
+  margin-bottom: 8px;
+}
+.em-filemanager .uploadButton button:hover {
+  background-color: var(--colorPrimaryHover) !important;
+}
+
+.em-filemanager .folderMenu {
+  padding-left: 0;
+  padding-right: 0; /* Место для кнопки справа */
+}
+
+/* Стили для линий дерева */
+
+/* Улучшение отображения folder-item-container */
+
+/* Стили для корневого элемента Folders */
+
+/* Стили для ellipsis - удаляем max-width для гибкости */
+
+/* Стили для пустого состояния */
+
+/* Убираем отступы у корневого узла */
+
+.em-filemanager .folderIcon {
+  margin-right: 8px;
+  font-size: 18px;
+  flex-shrink: 0; /* Запрещаем сжатие иконки */
+}
+
+.em-filemanager .folderLabelItem {
+  font-size: 14px;
+  font-weight: 400;
+  white-space: nowrap; /* Запрещаем перенос строк */
+  overflow: hidden; /* Скрываем переполнение */
+  text-overflow: ellipsis; /* Показываем троеточие */
+  flex: 1; /* Занимает доступное место */
+  min-width: 0; /* Позволяет сжиматься */
+  -webkit-user-select: none;
+          user-select: none;
+  margin-left: 8px;
+}
+
+.em-filemanager .foldersTitleItem {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  cursor: pointer;
+  min-width: 0; /* Позволяет сжиматься */
+  overflow: hidden; /* Скрываем переполнение */
+}
+
+/* .foldersTitleItem .folderLabelItem {
+  font-weight: 500;
+  color: #262626;
+} */
+/* Класс для заголовка папок */
+.em-filemanager .folderLabel {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
 
-.em-filemanager .fileDate {
-  color: var(--colorTextTertiary);
+.em-filemanager .foldersContainer {
+  position: relative;
+  width: 100%;
 }
 
-.em-filemanager .tableMenu {
-  padding: 20px 14px;
+/* Дополнительные стили для улучшения визуала */
+/* .folderMenu :global(.ant-tree-treenode:hover .folder-label span) {
+  color: #1890ff;
+} */
+/* Стили для дивайдера между папками */
+.em-filemanager .divider {
+  margin: calc(var(--marginLG) * 1px) 0;
 }
 
-.em-filemanager .tableImagePreview {
-  object-fit: contain;
-  border-radius: calc(var(--borderRadius) * 1px);
+.em-filemanager .uploadButton .ant-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
 }
 
-.em-filemanager .tableFolderIcon {
-  color: var(--colorPrimary);
-  font-size: 28px;
+/* .folderMenu :global(.ant-tree-treenode-selected) .folderLabelItem {
+  color: #1890ff !important;
+} */
+.em-filemanager .buttonWrapper {
+  overflow: hidden;
+  margin-bottom: 24px;
+  border-radius: calc(var(--borderRadius) * 1px);
 }
 
-.em-filemanager .buttonDeselected {
-  margin-left: 12px;
-  margin-right: 12px;
+.em-filemanager .uploadButtonIcon {
+  font-size: 20px;
 }
 
-.em-filemanager .gridRow {
-  margin: 0;
-  gap: 20px;
-  padding: 0 24px 24px;
+.em-filemanager .uploadButtonTitle {
+  line-height: 1em;
 }
 
-.em-filemanager .gridCard {
-  border-radius: 16px;
-  overflow: hidden;
-  width: 300px;
-  height: 100%;
+.em-filemanager .emptyFolderContainer {
   -webkit-user-select: none;
           user-select: none;
-  border: 2px solid transparent;
-}
-.em-filemanager .gridCard:hover {
-  color: var(--colorPrimary);
+  cursor: default;
+  color: var(--colorTextTertiary);
 }
-.gridCard .ant-card-body {
-  height: calc(100% - 180px);
-  max-height: calc(100% - 180px);
+
+.em-filemanager .folderItemContainer {
+  width: 100%;
   display: flex;
-  flex-direction: row;
+  align-items: center;
   justify-content: space-between;
+  padding: 2px 0;
+  min-width: 0; /* Позволяет flex-элементам сжиматься */
 }
-
-.em-filemanager .selectedRow > td {
-  border-top: 2px solid var(--colorPrimary) !important;
-  border-bottom: 2px solid var(--colorPrimary) !important;
-  margin-bottom: 4px;
-}
-
-.em-filemanager .selectedRow > td:first-child {
-  border-left: 2px solid var(--colorPrimary) !important;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
+@charset "UTF-8";
+.em-filemanager .container {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  z-index: 1000;
+  max-width: 400px;
+  min-width: 320px;
 }
 
-.em-filemanager .selectedRow > td:last-child {
-  border-right: 2px solid var(--colorPrimary) !important;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
+.em-filemanager .uploadCard {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
 }
 
-.em-filemanager .gridCardSelected, .em-filemanager .gridCardSelected:hover {
-  border-color: var(--colorPrimary);
+.em-filemanager .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
 
-.em-filemanager .gridCardContent {
-  position: relative;
+.em-filemanager .headerButton {
   padding: 0;
-  height: 100%;
+  width: 24px;
+  height: 24px;
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
+  align-items: center;
+  justify-content: center;
 }
 
-.em-filemanager .gridCheckbox {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  z-index: 1;
+.em-filemanager .headerButton:hover {
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
-.em-filemanager .gridPreviewContainer {
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: calc(var(--marginXS) * 1px);
+.em-filemanager .fileList {
+  max-height: 300px;
+  overflow-y: auto;
 }
 
-.em-filemanager .gridPreviewContainerFolder {
-  width: 100%;
-  /* aspect-ratio: 1 / 1; */
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-  background: #F8F8F8;
-  border-radius: calc(var(--borderRadiusSM) * 1px);
-  margin-bottom: calc(var(--marginXS) * 1px);
-  height: 100%;
+.em-filemanager .fileItem {
+  padding: 8px 0 !important;
+  border-bottom: 1px solid var(--colorBorderSecondary);
 }
 
-.em-filemanager .gridFolderIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
+.em-filemanager .fileItem:last-child {
+  border-bottom: none;
 }
 
-.em-filemanager .gridFolderIconImage {
-  color: var(--colorPrimary);
+.em-filemanager .fileAvatar {
+  background-color: transparent !important;
 }
 
-.em-filemanager .gridFileName {
-  font-weight: 400;
-  line-height: 1.3;
-  margin-bottom: 4px;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+.em-filemanager .fileInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
-.em-filemanager .gridFileInfo {
-  color: #8c8c8c;
+.em-filemanager .fileName {
   font-size: 13px;
-  line-height: 1.3;
-  font-weight: 600;
-  white-space: nowrap;
+  line-height: 1.2;
 }
 
-.em-filemanager .gridFileMenu {
-  display: none;
+.em-filemanager .fileSize {
+  font-size: 11px;
+  line-height: 1;
 }
 
-.em-filemanager .gridCard:hover .gridFileMenu {
-  display: block;
+.em-filemanager .progressBar {
+  margin-top: 4px;
 }
 
-.em-filemanager .gridFileMenuButton {
-  padding: 4px 7px;
+.em-filemanager .errorNote {
+  margin-top: 8px;
+  padding: 8px;
+  background-color: #fff2f0;
+  border: 1px solid #ffccc7;
+  border-radius: 4px;
 }
 
-/* Upload zone positioning */
-.em-filemanager .uploadZoneFixed {
+/* Минимизированное состояние */
+.em-filemanager .minimizedContainer {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: 20px;
+  left: 20px;
   z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.9);
 }
 
-.em-filemanager .classsssssss {
-  background: red;
-  color: #4361ee;
+.em-filemanager .minimizedButton {
+  font-size: 12px;
+  height: 28px;
+  padding: 0 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.em-filemanager .sortContainer {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+/* Скроллбар для списка файлов */
+.em-filemanager .fileList::-webkit-scrollbar {
+  width: 6px;
 }
 
-.em-filemanager .sortLabel {
-  font-size: 14px;
-  color: #6b7280;
+.em-filemanager .fileList::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
 }
 
-.em-filemanager .actionsBox {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+.em-filemanager .fileList::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
 }
 
-@media (max-width: 1550px) {
-  .em-filemanager .gridCard {
-    width: 220px;
-  }
+.em-filemanager .fileList::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Анимации */
+.em-filemanager .container {
+  animation: slideInFromLeft 0.3s ease-out;
+}
+
+.em-filemanager .minimizedContainer {
+  animation: slideInFromLeft 0.3s ease-out;
 }
-.em-filemanager .container {
-  position: fixed;
-  top: 20px;
-  left: 20px;
-  z-index: 1000;
-  max-width: 400px;
-  min-width: 320px;
-}
-
-.em-filemanager .uploadCard {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border-radius: 8px;
-  border: 1px solid #d9d9d9;
-}
-
-.em-filemanager .header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.em-filemanager .headerButton {
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.em-filemanager .headerButton:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-.em-filemanager .fileList {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.em-filemanager .fileItem {
-  padding: 8px 0 !important;
-  border-bottom: 1px solid var(--colorBorderSecondary);
-}
-
-.em-filemanager .fileItem:last-child {
-  border-bottom: none;
-}
-
-.em-filemanager .fileAvatar {
-  background-color: transparent !important;
-}
-
-.em-filemanager .fileInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.em-filemanager .fileName {
-  font-size: 13px;
-  line-height: 1.2;
-  max-width: 200px;
-}
-
-.em-filemanager .fileSize {
-  font-size: 11px;
-  line-height: 1;
-}
-
-.em-filemanager .progressBar {
-  margin-top: 4px;
-}
-
-.em-filemanager .errorNote {
-  margin-top: 8px;
-  padding: 8px;
-  background-color: #fff2f0;
-  border: 1px solid #ffccc7;
-  border-radius: 4px;
-}
-
-/* Минимизированное состояние */
-.em-filemanager .minimizedContainer {
-  position: fixed;
-  top: 20px;
-  left: 20px;
-  z-index: 1000;
-}
-
-.em-filemanager .minimizedButton {
-  font-size: 12px;
-  height: 28px;
-  padding: 0 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* Скроллбар для списка файлов */
-.em-filemanager .fileList::-webkit-scrollbar {
-  width: 6px;
-}
-
-.em-filemanager .fileList::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
-}
-
-.em-filemanager .fileList::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.em-filemanager .fileList::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
-
-/* Анимации */
-.em-filemanager .container {
-  animation: slideInFromLeft 0.3s ease-out;
-}
-
-.em-filemanager .minimizedContainer {
-  animation: slideInFromLeft 0.3s ease-out;
-}
-
-@keyframes slideInFromLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-/* Адаптивность */
-@media (max-width: 768px) {
-  .em-filemanager .container {
-    left: 10px;
-    right: 10px;
-    max-width: calc(100vw - 20px);
-    min-width: auto;
-  }
-
-  .em-filemanager .minimizedContainer {
-    left: 10px;
-  }
-}
 
+@keyframes slideInFromLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+/* Адаптивность */
+@media (max-width: 768px) {
+  .em-filemanager .container {
+    left: 10px;
+    right: 10px;
+    max-width: calc(100vw - 20px);
+    min-width: auto;
+  }
+  .em-filemanager .minimizedContainer {
+    left: 10px;
+  }
+}
 .em-filemanager .gifTab {
-  padding: 16px;
+  padding: 24px 24px 0;
   height: 100%;
 }
 .em-filemanager .gifTab .ant-divider-horizontal {
@@ -721,7 +737,8 @@
 }
 .em-filemanager .gifTab .gifSearchInput {
   padding: 0 2px 0 2px;
-  margin-bottom: calc(var(--margin) * 1px);
+  width: 300px;
+  margin-bottom: 24px;
 }
 .em-filemanager .gifTab .scrollableDiv {
   width: 100%;
@@ -729,10 +746,7 @@
   overflow: auto;
   padding-right: 0;
   line-height: 0;
-  box-sizing: unset;
-  padding-top: 12px;
-  padding-left: 12px;
-  margin: 0 0 0 -12px;
+  padding-top: 24px;
 }
 .em-filemanager .gifTab .myMasonryGrid {
   display: flex;
@@ -754,9 +768,8 @@
   max-height: 100px;
   overflow: hidden;
   background: var(--colorBgLayout);
-  height: 320px;
-  width: 320px;
-  margin-right: 30px;
+  height: 220px;
+  width: 220px;
 }
 .em-filemanager .gifTab .listItem .overlayImage {
   position: absolute;
@@ -882,7 +895,7 @@
   background: #2b2b2b;
 }
 .em-filemanager .stockTab {
-  padding: 16px;
+  padding: 24px 24px 0;
   height: 100%;
 }
 .em-filemanager .stockTab .ant-divider-horizontal {
@@ -895,7 +908,8 @@
 }
 .em-filemanager .stockTab .stockSearchInput {
   padding: 0 2px 0 2px;
-  margin-bottom: calc(var(--margin) * 1px);
+  margin-bottom: 24px;
+  width: 300px;
 }
 .em-filemanager .stockTab .searchResults .stockSearchInput {
   width: 100%;
@@ -908,11 +922,8 @@
   height: 100%;
   overflow: auto;
   padding-right: 0;
-  padding-top: 12px;
-  padding-left: 12px;
-  margin: 0 0 0 -12px;
+  padding-top: 24px;
   line-height: 0;
-  box-sizing: unset;
 }
 .em-filemanager .stockTab .myMasonryGrid {
   display: flex;
@@ -927,16 +938,14 @@
   position: relative;
   transition: all 0.3s ease;
   border: 1px solid #f0f2f5;
-  margin-bottom: 30px;
-  margin-right: 30px;
   display: inline-block;
   border-radius: 16px;
   min-height: 100px;
   max-height: 100px;
   overflow: hidden;
   background: var(--colorBgLayout);
-  height: 320px;
-  width: 320px;
+  height: 220px;
+  width: 220px;
 }
 .em-filemanager .stockTab .listItem .ant-spin {
   font-size: 20px;
@@ -1039,6 +1048,9 @@
 .em-filemanager .stockTab .stockColorFilter label.blueColor, .em-filemanager .stockTab .stockColorFilter [class^=ant-radio].blueColor {
   background: #1677ff;
 }
+.em-filemanager .stockTab .stockColorFilter label::before {
+  display: none;
+}
 .em-filemanager .stockTab .ant-divider-horizontal.ant-divider-with-text::before, .em-filemanager .stockTab .ant-divider-horizontal.ant-divider-with-text::after {
   transform: none;
 }
@@ -1088,7 +1100,7 @@
   align-items: center;
 }
 .em-filemanager .imageAi {
-  height: 100%;
+  height: calc(100% - 142px);
   padding: 16px;
 }
 
@@ -1107,8 +1119,7 @@
   min-height: 100px;
   border-radius: 6px;
 }
-
-.em-filemanager .buttons {
+.em-filemanager .imageItem .buttons {
   display: flex;
   justify-content: space-between;
   position: absolute;
@@ -1153,7 +1164,6 @@
 .em-filemanager .carousel {
   border-radius: 6px;
   overflow: hidden;
-  margin-top: 24px;
 }
 
 .em-filemanager .carouselImage {
@@ -1305,11 +1315,15 @@
   border-radius: 6px;
   background-color: var(--colorPrimary);
   margin-right: 4px;
+  padding: 0 10px;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-dropdown-button .ant-btn-compact-last-item {
   border-radius: 6px;
   background-color: var(--colorPrimary);
 }
+.em-filemanager .file-manager__layout .file-manager-sider .ant-dropdown-button .ant-btn-compact-last-item.ant-btn-primary:not([disabled])::before {
+  display: none;
+}
 .em-filemanager .file-manager__layout .file-manager-sider .sidebar__sections-title {
   color: var(--colorTextTertiary);
   margin-bottom: 10px;
@@ -1325,6 +1339,13 @@
   width: 100%;
   border-radius: calc(var(--borderRadius) * 1px);
   margin: 0 0 3px;
+  align-items: center;
+}
+.em-filemanager .file-manager__layout .file-manager-sider .folder-menu li:not(.ant-menu-item-selected):hover {
+  background-color: var(--colorFillQuaternary);
+}
+.em-filemanager .file-manager__layout .file-manager-sider .folder-menu .ant-menu-item .ant-menu-item-icon + span {
+  margin-inline-start: 8px;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper:before,
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper:hover:before {
@@ -1347,7 +1368,7 @@
   background-color: transparent;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-treenode:hover {
-  background-color: var(--colorBgLayout);
+  background-color: var(--colorFillQuaternary);
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-node-content-wrapper {
   flex: 1;
@@ -1433,10 +1454,12 @@
 }
 .em-filemanager .file-manager__layout .main-content {
   margin: 0;
-  min-height: 280px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 .em-filemanager .file-manager__layout .main-content .content-layout {
-  padding: 24px 0 0;
+  padding: 0;
 }
 .em-filemanager .file-manager__layout .main-content .content-layout h1 {
   font-size: 32px;
@@ -1468,9 +1491,14 @@
   min-height: 28px;
   line-height: 28px;
   padding: 0 11px;
+  display: flex;
+}
+.em-filemanager .file-manager__layout .main-content .content-layout .ant-segmented .ant-segmented-item-label .ant-segmented-item-icon {
+  display: inline-flex;
+  align-items: center;
 }
 .file-manager__layout .main-content .ant-card-body {
-  padding: 12px 16px;
+  padding: 12px;
 }
 .em-filemanager .file-manager__layout .main-content .ant-image {
   display: block;
@@ -1577,13 +1605,17 @@
   margin: 0;
 }
 .em-filemanager .file-manager__layout .content-layout {
-  display: flex;
+  flex: 1 1 auto;
+  min-height: 0; /* чтобы внутренние скроллы работали корректно */
+  display: flex; /* если внутри тоже колонки/скроллы */
   flex-direction: column;
-  height: 100%;
+  /* по желанию: если нужен внутренний скролл содержимого */
+  /* overflow: auto; */
 }
 .em-filemanager .file-manager__layout .header-container .ant-btn {
   padding: 8px;
-  line-height: 1.3;
+  line-height: 1;
+  gap: 4px;
 }
 .em-filemanager .file-manager__layout .actions-container {
   display: flex;
@@ -1649,6 +1681,9 @@
   width: 100%;
   margin-bottom: 0;
 }
+.em-filemanager .file-manager__layout .ant-checkbox .ant-checkbox-inner {
+  border-radius: 2px !important;
+}
 .em-filemanager .file-manager__layout .upload-button {
   background: #4361ee;
   color: white;
@@ -1746,9 +1781,14 @@
   object-fit: contain;
 }
 .em-filemanager .file-manager__layout .serach-output-wrapper {
-  margin-right: -16px;
   height: calc(100vh - 32px);
 }
+.em-filemanager .file-manager__layout .fileNameCol {
+  max-width: calc(100% - 430px);
+}
+.em-filemanager .file-manager__layout .ant-btn .ant-btn-icon > svg {
+  vertical-align: -0.33em;
+}
 
 /* Добавляем стили для превью изображений */
 .em-filemanager .image-preview {