@emailmaker/filemanager 0.10.3 → 0.10.5

package/file-manager.css

@@ -8,9 +8,9 @@
 .em-filemanager .headerContainer {
   display: flex;
   justify-content: space-between;
-  margin-bottom: calc(var(--margin) * 1px);
+  margin-bottom: calc(var(--marginLG) * 1px);
   align-items: center;
-  padding: 0 16px;
+  padding: 24px calc(var(--marginLG) * 1px) 0 calc(var(--marginLG) * 1px);
 }
 
 .em-filemanager .actionsContainer {
@@ -41,6 +41,7 @@
   justify-content: center;
   margin-top: calc(var(--margin) * 1px);
   margin-bottom: calc(var(--margin) * 1px);
+  height: 90px;
 }
 
 .em-filemanager .paginationContainerEnd {
@@ -49,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);
@@ -96,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;
@@ -138,7 +96,6 @@
 .em-filemanager .fileManagerTableFolderInner {
   display: flex;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: 100%;
 }
@@ -150,12 +107,13 @@
 
 /* Sort select styles */
 .em-filemanager .sortSelect {
-  width: 140px;
+  width: 220px;
 }
 
 /* Table column styles */
-.em-filemanager .fileName {
-  font-weight: 500;
+.em-filemanager .fileNameCol {
+  max-width: calc(100% - 430px);
+  padding: 8px;
 }
 
 .em-filemanager .fileItemCount {
@@ -172,6 +130,12 @@
   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);
@@ -180,34 +144,75 @@
 .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-top: calc(var(--margin) * 1px);
-  margin-left: 0 !important;
-  margin-right: 0 !important;
+  margin: 0;
+  gap: 20px;
+  padding: 0 24px 24px;
 }
 
 .em-filemanager .gridCard {
   border-radius: 16px;
   overflow: hidden;
-  width: 310px;
+  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% - 240px);
+  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 {
@@ -215,6 +220,7 @@
   top: 8px;
   left: 8px;
   z-index: 1;
+  opacity: 0;
 }
 
 .em-filemanager .gridPreviewContainer {
@@ -223,7 +229,6 @@
   justify-content: center;
   align-items: center;
   margin-bottom: calc(var(--marginXS) * 1px);
-  padding: 4px;
 }
 
 .em-filemanager .gridPreviewContainerFolder {
@@ -232,14 +237,10 @@
   display: flex !important;
   justify-content: center;
   align-items: center;
-  /* background: #f7fafc; */
+  background: #F8F8F8;
   border-radius: calc(var(--borderRadiusSM) * 1px);
   margin-bottom: calc(var(--marginXS) * 1px);
-  height: 240px;
-}
-
-.em-filemanager .gridPreviewContainerFolder:hover {
-  background: var(--colorBgContainer);
+  height: 100%;
 }
 
 .em-filemanager .gridFolderIcon {
@@ -250,37 +251,39 @@
 }
 
 .em-filemanager .gridFolderIconImage {
-  font-size: 111px;
   color: var(--colorPrimary);
 }
 
 .em-filemanager .gridFileName {
-  font-weight: 500;
-  height: 28px;
-  white-space: nowrap;
-  overflow: hidden;
+  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.5;
-  margin-bottom: 8px;
+  line-height: 1.3;
+  font-weight: 600;
+  white-space: nowrap;
 }
 
-/* Upload zone positioning */
-.em-filemanager .uploadZoneFixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.9);
+.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 {
@@ -302,14 +305,87 @@
 .em-filemanager .actionsBox {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
 }
 
 @media (max-width: 1550px) {
   .em-filemanager .gridCard {
-    width: 300px;
+    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 {
@@ -326,8 +402,8 @@
 
 .em-filemanager .folderActions {
   position: absolute;
-  top: 4px; /* Выравниваем по заголовку Folders */
-  right: 4px;
+  top: 6px; /* Выравниваем по заголовку Folders */
+  right: 6px;
   display: flex;
   align-items: center;
   gap: 4px;
@@ -368,11 +444,6 @@
   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;
 } */
@@ -390,6 +461,9 @@
   width: 100%;
   margin-bottom: 8px;
 }
+.em-filemanager .uploadButton button:hover {
+  background-color: var(--colorPrimaryHover) !important;
+}
 
 .em-filemanager .folderMenu {
   padding-left: 0;
@@ -422,6 +496,9 @@
   text-overflow: ellipsis; /* Показываем троеточие */
   flex: 1; /* Занимает доступное место */
   min-width: 0; /* Позволяет сжиматься */
+  -webkit-user-select: none;
+          user-select: none;
+  margin-left: 8px;
 }
 
 .em-filemanager .foldersTitleItem {
@@ -457,191 +534,197 @@
 } */
 /* Стили для дивайдера между папками */
 .em-filemanager .divider {
-  margin: 12px 0 !important;
+  margin: calc(var(--marginLG) * 1px) 0;
 }
 
 .em-filemanager .uploadButton .ant-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 3px;
 }
 
 /* .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;
+  line-height: 1em;
 }
 
 .em-filemanager .emptyFolderContainer {
-  margin-left: -40px;
   -webkit-user-select: none;
           user-select: none;
   cursor: default;
   color: var(--colorTextTertiary);
 }
-.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;
-  }
-}
 
+.em-filemanager .folderItemContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px 0;
+  min-width: 0; /* Позволяет flex-элементам сжиматься */
+}
+@charset "UTF-8";
+.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;
+}
+
+.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;
+  }
+}
 .em-filemanager .gifTab {
-  padding: 16px;
+  padding: 24px 24px 0;
   height: 100%;
 }
 .em-filemanager .gifTab .ant-divider-horizontal {
@@ -654,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%;
@@ -662,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;
@@ -687,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;
@@ -815,7 +895,7 @@
   background: #2b2b2b;
 }
 .em-filemanager .stockTab {
-  padding: 16px;
+  padding: 24px 24px 0;
   height: 100%;
 }
 .em-filemanager .stockTab .ant-divider-horizontal {
@@ -828,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%;
@@ -841,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;
@@ -860,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;
@@ -972,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;
 }
@@ -1021,7 +1100,7 @@
   align-items: center;
 }
 .em-filemanager .imageAi {
-  height: 100%;
+  height: calc(100% - 142px);
   padding: 16px;
 }
 
@@ -1040,8 +1119,7 @@
   min-height: 100px;
   border-radius: 6px;
 }
-
-.em-filemanager .buttons {
+.em-filemanager .imageItem .buttons {
   display: flex;
   justify-content: space-between;
   position: absolute;
@@ -1086,7 +1164,6 @@
 .em-filemanager .carousel {
   border-radius: 6px;
   overflow: hidden;
-  margin-top: 24px;
 }
 
 .em-filemanager .carouselImage {
@@ -1193,7 +1270,7 @@
 }
 .em-filemanager .file-manager__layout .actions-header {
   background: transparent;
-  padding: 24px 40px;
+  padding: 24px;
   display: flex;
   align-items: center;
 }
@@ -1207,40 +1284,46 @@
 .em-filemanager .file-manager__layout h5.header-title {
   margin-right: calc(var(--margin) * 1px);
   margin-bottom: 0;
-  font-size: 24px;
+  font-size: 18px;
   font-weight: 500;
 }
 .em-filemanager .file-manager__layout .selected-text {
   white-space: nowrap;
+  margin-right: auto;
 }
 .em-filemanager .file-manager__layout .file-manager__content {
   flex: 1;
 }
 .em-filemanager .file-manager__layout .file-manager-sider {
   position: relative;
-  background: transparent;
+  border-radius: 0 24px 24px 0;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-dropdown-button {
   grid-template-columns: 10fr 40px;
   margin-bottom: 0;
-  gap: 2px;
+  gap: 4px;
   border-radius: calc(var(--borderRadius) * 1px);
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-dropdown-button button {
-  height: 44px;
+  height: 40px;
   font-weight: 500;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-dropdown-button .ant-btn-compact-first-item {
   justify-content: flex-start;
   width: 100%;
   min-width: 160px;
-  border-radius: calc(var(--borderRadius) * 1px) 2px 2px calc(var(--borderRadius) * 1px);
+  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: 2px calc(var(--borderRadius) * 1px) calc(var(--borderRadius) * 1px) 2px;
+  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;
@@ -1249,16 +1332,24 @@
   border: none;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .folder-menu li {
-  margin: 0;
   height: 44px;
   line-height: 44px;
   display: flex;
   padding: 0 12px;
   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 .ant-menu-item-selected {
-  font-weight: 500;
+.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 {
+  background-color: transparent;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree {
   background: none;
@@ -1268,23 +1359,31 @@
   height: 44px;
   line-height: 44px;
   display: flex;
-  padding: 0 4px;
+  padding: 0 12px;
   overflow: hidden;
   width: 100%;
   border-radius: calc(var(--borderRadius) * 1px);
 }
-.em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-treenode:hover, .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-treenode.ant-tree-treenode-selected {
-  background-color: var(--colorFillSecondary);
+.em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-treenode.ant-tree-treenode-selected {
+  background-color: transparent;
+}
+.em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-treenode:hover {
+  background-color: var(--colorFillQuaternary);
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-node-content-wrapper {
   flex: 1;
+  display: flex;
+  width: 100%;
   align-items: center;
   padding: 0;
   transition: background-color 0.2s ease;
-  max-width: calc(100% - 50px);
   background-color: transparent;
-  /* display: flex; */
-  /* border-radius: 4px; */
+}
+.em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-node-content-wrapper .ant-tree-icon__customize {
+  display: none;
+}
+.em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-node-content-wrapper .ant-tree-title {
+  width: 100%;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-node-content-wrapper:hover {
   background-color: transparent;
@@ -1292,27 +1391,28 @@
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-btn.ant-btn-icon-only {
   width: inherit;
 }
+.em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-title {
+  color: inherit;
+}
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-switcher {
-  height: 36px;
-  width: 36px;
-  margin-top: 2px;
-  margin-left: -4px;
   display: flex;
+  height: 20px;
+  margin: auto;
   align-items: center;
   justify-content: center;
   transition: color 0.2s ease;
   flex-shrink: 0; /* Запрещаем сжатие переключателя */
-}
-.em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-switcher:before {
-  margin-top: 2px;
-  margin-left: -2px;
-  height: 36px;
-  width: 36px;
+  color: inherit;
+  padding: 0;
+  width: 0;
+  overflow: hidden;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-switcher > .anticon {
-  font-size: 14px;
-  margin-left: -4px;
-  margin-top: 2px;
+  width: 0;
+  overflow: hidden;
+}
+.em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-switcher:not(.ant-tree-switcher-noop):hover:before {
+  background: inherit;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .folder-item-container {
   width: 100%;
@@ -1354,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;
@@ -1366,8 +1468,8 @@
   padding: 0 16px;
 }
 .em-filemanager .file-manager__layout .main-content .content-layout .search-container input {
-  height: 22px;
-  line-height: 22px;
+  height: 30px;
+  line-height: 1;
 }
 .em-filemanager .file-manager__layout .main-content .content-layout .sort-label {
   color: var(--colorTextTertiary);
@@ -1389,23 +1491,28 @@
   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: 8px 16px;
+  padding: 12px;
 }
 .em-filemanager .file-manager__layout .main-content .ant-image {
   display: block;
   height: 100%;
   background: var(--colorBorder);
-  border-radius: calc(var(--borderRadiusLG) * 1px);
+  border-radius: 4px;
 }
 .em-filemanager .file-manager__layout .main-content .ant-image-mask,
 .em-filemanager .file-manager__layout .main-content .ant-card-cover img + .ant-image-mask {
-  border-radius: calc(var(--borderRadiusLG) * 1px);
+  border-radius: 4px;
 }
 .em-filemanager .file-manager__layout .main-content .ant-table-wrapper {
-  padding-right: 8px;
-  padding-left: 16px;
+  padding-right: 24px;
+  padding-left: 24px;
 }
 .em-filemanager .file-manager__layout .main-content .ant-table-wrapper .ant-table {
   background: none;
@@ -1417,16 +1524,26 @@
   box-shadow: 0 8px 16px 0 rgba(25, 29, 58, 0.0392156863);
 }
 .em-filemanager .file-manager__layout .main-content .ant-table-wrapper .ant-table .ant-table-row td {
-  border-bottom: 4px solid var(--colorBgLayout);
+  border-bottom: 2px solid var(--colorBgLayout);
+  border-top: 2px solid var(--colorBgLayout);
   cursor: pointer;
   -webkit-user-select: none;
           user-select: none;
+  padding: 8px 4px;
+}
+.em-filemanager .file-manager__layout .main-content .ant-table-wrapper .ant-table .ant-table-row td.ant-table-cell-row-hover {
+  color: var(--colorPrimary);
 }
 .em-filemanager .file-manager__layout .main-content .ant-table-wrapper .ant-table .ant-table-row td:first-child {
   border-radius: calc(var(--borderRadiusLG) * 1px) 0 0 calc(var(--borderRadiusLG) * 1px);
+  padding-left: 8px;
+}
+.em-filemanager .file-manager__layout .main-content .ant-table-wrapper .ant-table .ant-table-row td:first-child .ant-checkbox.ant-wave-target {
+  margin-left: 8px;
 }
 .em-filemanager .file-manager__layout .main-content .ant-table-wrapper .ant-table .ant-table-row td:last-child {
   border-radius: 0 calc(var(--borderRadiusLG) * 1px) calc(var(--borderRadiusLG) * 1px) 0;
+  padding-right: 8px;
 }
 .em-filemanager .file-manager__layout .resize-guide {
   position: fixed;
@@ -1454,15 +1571,15 @@
 }
 .em-filemanager .file-manager__layout .sidebar-resizer:hover,
 .em-filemanager .file-manager__layout .sidebar-resizer.resizing {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--colorBorder);
 }
 .em-filemanager .file-manager__layout .sidebar-resizer-indicator {
   position: absolute;
   top: 0;
-  left: 0;
+  right: 0;
   width: 1px;
   height: 100%;
-  background-color: var(--colorBorder);
+  background-color: transparent;
 }
 .em-filemanager .file-manager__layout .sidebar-resizer-dots {
   display: flex;
@@ -1488,15 +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 {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: calc(var(--margin) * 1px);
-  align-items: center;
+.em-filemanager .file-manager__layout .header-container .ant-btn {
+  padding: 8px;
+  line-height: 1;
+  gap: 4px;
 }
 .em-filemanager .file-manager__layout .actions-container {
   display: flex;
@@ -1512,7 +1631,10 @@
   display: flex;
   gap: 16px;
   align-items: center;
-  width: 652px;
+  width: 300px;
+}
+.em-filemanager .file-manager__layout .search-container .ant-input-affix-wrapper {
+  padding: 0 12px;
 }
 .em-filemanager .file-manager__layout .breadcrumb-container {
   margin-bottom: calc(var(--margin) * 1px);
@@ -1546,7 +1668,7 @@
 }
 .em-filemanager .file-manager__layout .sidebar-container {
   height: 100%;
-  padding: 36px 24px 36px 40px;
+  padding: 32px;
   overflow: hidden;
 }
 .em-filemanager .file-manager__layout .sidebar-container .ant-tree-treenode {
@@ -1559,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;
@@ -1581,7 +1706,7 @@
 .em-filemanager .file-manager__layout .folder-menu .select > .ant-menu-submenu-title,
 .em-filemanager .file-manager__layout .folder-menu .select:not(.ant-menu-submenu-selected),
 .em-filemanager .file-manager__layout .folder-menu .ant-menu-item-selected {
-  background-color: var(--colorFillSecondary);
+  background-color: var(--controlItemBgActive);
 }
 .em-filemanager .file-manager__layout .folder-label {
   cursor: pointer;
@@ -1632,11 +1757,21 @@
 .em-filemanager .file-manager__layout .folderMenu .ant-tree-treenode-selected .folderLabel .folderIcon,
 .em-filemanager .file-manager__layout .folderMenu .ant-tree-treenode-selected .folderLabelItem,
 .em-filemanager .file-manager__layout .folderMenu .ant-tree-treenode-selected .folderIcon {
-  color: var(--colorText);
+  color: var(--colorLink);
 }
 .em-filemanager .file-manager__layout .gridCard .ant-card-cover {
-  height: 240px;
+  height: 180px;
   overflow: hidden;
+  border-radius: 16px;
+}
+.em-filemanager .file-manager__layout .gridCard .ant-checkbox {
+  height: 20px;
+  width: 20px;
+  border: 2px solid white;
+  border-radius: 6px;
+}
+.em-filemanager .file-manager__layout .gridCard .ant-checkbox .ant-checkbox-inner {
+  border: none;
 }
 .em-filemanager .file-manager__layout .ant-image .ant-image-img {
   max-width: 100%;
@@ -1646,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 {
@@ -1660,9 +1800,9 @@
   transform: scale(1.05);
 }
 
-@media (max-width: 1550px) {
-  .em-filemanager .file-manager__layout .search-container {
-    width: 632px;
+@media (max-width: 1200px) {
+  .em-filemanager .header-container .ant-btn > span:nth-child(2) {
+    display: none;
   }
 }
 .em-filemanager .files-grid-container {