refactor(css): change css grouping fileType & filesView

- fileType.css for filetype to icons representation
 - filesViews.css for grid and list view (merge of previous cards.css & fileList.css)

static/css/layout/content.css

@@ -56,99 +56,3 @@
     pointer-events: none;
     width: 360px;
 }
-
-.dragged-items {
-    --dragged-files-list-columns: 36px minmax(200px, 1fr);
-    /*display: flex;*/
-    flex-direction: column;
-    /*width: 360px;*/
-    background-color: transparent;
-    overflow: hidden;
-    border-radius: 10px;
-    width: 100%;
-    /*box-shadow: 0 1px 3px var(--color-shadow-xs);*/
-}
-
-.dragged-items .file-item {
-    display: grid;
-    grid-template-columns: var(--dragged-files-list-columns);
-    column-gap: 12px;
-    padding: 12px 15px;
-    /*border-bottom: 1px solid var(--color-border-xfaint);*/
-    align-items: center;
-    background-color: var(--color-bg-surface);
-}
-
-.dragged-items .file-item {
-    display: flex;
-    padding: 4px;
-    width: 336px;
-    height: 46px;
-}
-
-/* file name, text is wrapped */
-.dragged-items .file-item div:nth-child(2) {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.dragged-items .file-item .file-icon {
-    background-color: var(--color-warning-bg);
-    position: relative;
-    width: 36px;
-    height: 36px;
-    margin-bottom: 0;
-}
-
-.dragged-items .file-item .file-icon.folder-icon {
-    background-color: var(--color-warning-bg);
-    position: relative;
-    width: 36px;
-    height: 36px;
-    margin-bottom: 0;
-}
-.dragged-items .file-item .file-icon.folder-icon::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 8px;
-    background-color: var(--color-warning-bg-dark);
-    border-radius: 8px 8px 0 0;
-}
-
-.dragged-items .file-item .file-icon.folder-icon i,
-.dragged-items .file-item .file-icon.folder-icon svg {
-    display: none;
-}
-
-.dragged-items div.fading {
-    -webkit-mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent);
-    mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent);
-}
-
-.dragged-items-badge {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    transform: translate(50%, -50%);
-
-    background: var(--color-content-debug-bg);
-    color: var(--color-content-debug-text);
-
-    border-radius: 50%;
-    min-width: 20px;
-    height: 20px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    font-size: 12px;
-    font-weight: bold;
-
-    padding: 2px;
-}