refactor(files): merge grid and list builder, use CSS only to switch between views
This commit is contained in:
Edouard Vanbelle
@@ -1,11 +1,16 @@
|
||||
/* Files grid */
|
||||
.files-grid {
|
||||
.files-grid-view {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* header not visible in grid mode */
|
||||
.files-grid-view .list-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Rubber band / lasso selection rectangle */
|
||||
.selection-rect {
|
||||
position: fixed;
|
||||
@@ -17,7 +22,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-card {
|
||||
.files-grid-view .file-item {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e2e8f0;
|
||||
@@ -27,65 +32,67 @@
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||
width: 100%;
|
||||
min-height: 160px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-card:hover {
|
||||
.files-grid-view .file-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
|
||||
border-color: #cbd5e0;
|
||||
}
|
||||
|
||||
.file-card.selected {
|
||||
.files-grid-view .file-item.selected {
|
||||
border-color: #ff5e3a;
|
||||
background: #fff8f6;
|
||||
box-shadow: 0 0 0 1px rgba(255, 94, 58, 0.15), 0 4px 12px rgba(255, 94, 58, 0.1);
|
||||
}
|
||||
|
||||
.file-card.selected:hover {
|
||||
.files-grid-view .file-item.selected:hover {
|
||||
border-color: #ff5e3a;
|
||||
box-shadow: 0 0 0 1px rgba(255, 94, 58, 0.2), 0 6px 18px rgba(255, 94, 58, 0.15);
|
||||
}
|
||||
|
||||
/* element hidden on grid view */
|
||||
.files-grid-view .file-item .date-cell,
|
||||
.files-grid-view .file-item .size-cell {
|
||||
display: none;
|
||||
}
|
||||
/* Selection checkbox */
|
||||
.file-card-checkbox {
|
||||
.files-grid-view .file-item .checkbox-cell {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 6px;
|
||||
border: 2px solid #cbd5e0;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, background 0.15s, border-color 0.15s;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-card:hover .file-card-checkbox {
|
||||
.files-grid-view .file-item:hover .checkbox-cell {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.file-card.selected .file-card-checkbox {
|
||||
.files-grid-view .file-item.selected .checkbox-cell {
|
||||
opacity: 1;
|
||||
background: #ff5e3a;
|
||||
border-color: #ff5e3a;
|
||||
}
|
||||
|
||||
.file-card.selected .file-card-checkbox i {
|
||||
.files-grid-view .file-item.selected .checkbox-cell i {
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* More actions button (three dots) */
|
||||
.file-card-more {
|
||||
.files-grid-view .file-actions {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
@@ -98,24 +105,23 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, background 0.15s;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
color: #64748b;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.file-card:hover .file-card-more {
|
||||
.files-grid-view .file-item:hover .file-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.file-card-more:hover {
|
||||
.files-grid-view .file-actions:hover {
|
||||
background: #f1f5f9;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
/* Favorite star (mirrors file-card-more button pattern) */
|
||||
button.favorite-star {
|
||||
/* Favorite star (mirrors file-actions button pattern) */
|
||||
.files-grid-view .file-item button.favorite-star {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 38px;
|
||||
@@ -128,7 +134,6 @@ button.favorite-star {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, color 0.15s, background 0.15s;
|
||||
z-index: 12;
|
||||
cursor: pointer;
|
||||
color: #cbd5e0;
|
||||
@@ -137,40 +142,45 @@ button.favorite-star {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.file-card:hover .favorite-star {
|
||||
.files-grid-view .file-item:hover button.favorite-star {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.favorite-star:hover {
|
||||
.files-grid-view .file-item button.favorite-star:hover {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.favorite-star.active {
|
||||
.files-grid-view .file-item button.favorite-star.active {
|
||||
opacity: 1;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.favorite-star.active:hover {
|
||||
.files-grid-view .file-item button.favorite-star.active:hover {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.file-card.dragging {
|
||||
.files-grid-view .file-item.dragging {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.95);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.file-card.drop-target {
|
||||
.files-grid-view .file-item.drop-target {
|
||||
background-color: rgba(255, 193, 7, 0.1);
|
||||
border: 2px dashed #ffc107;
|
||||
}
|
||||
|
||||
/* ensure icon centered */
|
||||
.files-grid-view .file-item .name-cell .file-icon {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Hide FontAwesome / SVG icons inside grid card thumbnails — the decorative
|
||||
CSS shapes (::before / ::after) already convey the file type visually.
|
||||
Icons.js replaces <i> with <svg class="oxi-icon">, so we target both.
|
||||
List-view icons (.file-item .file-icon) are NOT affected. */
|
||||
.file-card .file-icon > i,
|
||||
.file-card .file-icon > svg {
|
||||
.files-grid-view .file-item .file-icon > i,
|
||||
.files-grid-view .file-item .file-icon > svg {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -331,7 +341,7 @@ button.favorite-star {
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
.file-icon.image-icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -342,7 +352,7 @@ button.favorite-star {
|
||||
background-color: #ffda79;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
*/
|
||||
.file-icon.video-icon {
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
@@ -735,7 +745,7 @@ button.favorite-star {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
.files-grid-view .file-item .name-cell {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
@@ -745,51 +755,62 @@ button.favorite-star {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
.files-grid-view .file-item .name-cell span {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.files-grid-view .file-item .name-cell svg.favorite-star-inline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.files-grid-view .file-item .type-cell {
|
||||
font-size: 12px;
|
||||
color: #718096;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-card {
|
||||
[data-theme="dark"] .files-grid-view .file-item {
|
||||
background-color: #1e293b;
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-card:hover {
|
||||
[data-theme="dark"] .files-grid-view .file-item:hover {
|
||||
border-color: #475569;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-card.selected {
|
||||
[data-theme="dark"] .files-grid-view .file-item.selected {
|
||||
border-color: #ff5e3a;
|
||||
background: #1a1520;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-card-checkbox {
|
||||
[data-theme="dark"] .files-grid-view .file-item .checkbox-cell {
|
||||
background: #1e293b;
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-card-more {
|
||||
[data-theme="dark"] .files-grid-view .file-actions {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-card-more:hover {
|
||||
[data-theme="dark"] .files-grid-view .file-actions:hover {
|
||||
background: #334155;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-name {
|
||||
[data-theme="dark"] .files-grid-view .file-item .name-cell {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-info {
|
||||
[data-theme="dark"] .files-grid-view .file-item .type-cell {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-card.drop-target {
|
||||
[data-theme="dark"] .files-grid-view .file-item.drop-target {
|
||||
background-color: rgba(255, 193, 7, 0.05);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* File list - Improved style */
|
||||
.files-list-view {
|
||||
--files-list-columns: 36px minmax(200px, 2fr) 100px 110px 130px 36px;
|
||||
--files-list-columns: 36px minmax(200px, 2fr) 100px 110px 130px 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@@ -22,7 +22,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
.files-list-view .file-item {
|
||||
display: grid;
|
||||
grid-template-columns: var(--files-list-columns);
|
||||
column-gap: 12px;
|
||||
@@ -30,15 +30,14 @@
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.file-item.selected {
|
||||
.files-list-view .file-item.selected {
|
||||
background-color: #fff8f6;
|
||||
}
|
||||
|
||||
.file-item.selected:hover {
|
||||
.files-list-view .file-item.selected:hover {
|
||||
background-color: #fff0ec;
|
||||
}
|
||||
|
||||
@@ -50,22 +49,22 @@
|
||||
grid-template-columns: minmax(180px, 1.5fr) 0.5fr 1fr 140px 100px;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
.files-list-view .file-item:hover {
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
|
||||
.list-header > div,
|
||||
.file-item > div {
|
||||
.files-list-view .file-item > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-header > div:nth-child(4),
|
||||
.file-item .size-cell {
|
||||
.files-list-view .file-item .size-cell {
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.file-item .name-cell {
|
||||
.files-list-view .file-item .name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@@ -73,17 +72,13 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-item .action-cell {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file-item .name-cell span {
|
||||
.files-list-view .file-item .name-cell span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-item .file-icon {
|
||||
.files-list-view .file-item .file-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
@@ -95,7 +90,7 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-item .file-icon.folder-icon {
|
||||
.files-list-view .file-item .file-icon.folder-icon {
|
||||
background-color: #ffeaa7;
|
||||
position: relative;
|
||||
width: 36px;
|
||||
@@ -103,7 +98,7 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.file-item .file-icon.folder-icon::before {
|
||||
.files-list-view .file-item .file-icon.folder-icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -114,90 +109,90 @@
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.file-item .file-icon.folder-icon i,
|
||||
.file-item .file-icon.folder-icon svg {
|
||||
.files-list-view .file-item .file-icon.folder-icon i,
|
||||
.files-list-view .file-item .file-icon.folder-icon svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.doc-icon {
|
||||
.files-list-view .file-item .file-icon.doc-icon {
|
||||
background-color: #e0ecff;
|
||||
}
|
||||
|
||||
.file-item .file-icon.doc-icon i,
|
||||
.file-item .file-icon.doc-icon svg {
|
||||
.files-list-view .file-item .file-icon.doc-icon i,
|
||||
.files-list-view .file-item .file-icon.doc-icon svg {
|
||||
color: #3171d8;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.doc-icon::before,
|
||||
.file-item .file-icon.doc-icon::after {
|
||||
.files-list-view .file-item .file-icon.doc-icon::before,
|
||||
.files-list-view .file-item .file-icon.doc-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.pdf-icon {
|
||||
.files-list-view .file-item .file-icon.pdf-icon {
|
||||
background-color: #fee2e2;
|
||||
}
|
||||
|
||||
.file-item .file-icon.pdf-icon i,
|
||||
.file-item .file-icon.pdf-icon svg {
|
||||
.files-list-view .file-item .file-icon.pdf-icon i,
|
||||
.files-list-view .file-item .file-icon.pdf-icon svg {
|
||||
color: #e53e3e;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.pdf-icon::before,
|
||||
.file-item .file-icon.pdf-icon::after {
|
||||
.files-list-view .file-item .file-icon.pdf-icon::before,
|
||||
.files-list-view .file-item .file-icon.pdf-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.image-icon {
|
||||
.files-list-view .file-item .file-icon.image-icon {
|
||||
background-color: #e0f2fe;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.file-item .file-icon.image-icon i,
|
||||
.file-item .file-icon.image-icon svg {
|
||||
.files-list-view .file-item .file-icon.image-icon i,
|
||||
.files-list-view .file-item .file-icon.image-icon svg {
|
||||
color: #3b82f6;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.image-icon::before,
|
||||
.file-item .file-icon.image-icon::after {
|
||||
.files-list-view .file-item .file-icon.image-icon::before,
|
||||
.files-list-view .file-item .file-icon.image-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.video-icon {
|
||||
.files-list-view .file-item .file-icon.video-icon {
|
||||
background: linear-gradient(135deg, #ede9fe, #fce7f3);
|
||||
}
|
||||
|
||||
.file-item .file-icon.video-icon i,
|
||||
.file-item .file-icon.video-icon svg {
|
||||
.files-list-view .file-item .file-icon.video-icon i,
|
||||
.files-list-view .file-item .file-icon.video-icon svg {
|
||||
color: #8b5cf6;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.video-icon::before,
|
||||
.file-item .file-icon.video-icon::after {
|
||||
.files-list-view .file-item .file-icon.video-icon::before,
|
||||
.files-list-view .file-item .file-icon.video-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.audio-icon {
|
||||
.files-list-view .file-item .file-icon.audio-icon {
|
||||
background-color: #fef3c7;
|
||||
}
|
||||
|
||||
.file-item .file-icon.audio-icon i,
|
||||
.file-item .file-icon.audio-icon svg {
|
||||
.files-list-view .file-item .file-icon.audio-icon i,
|
||||
.files-list-view .file-item .file-icon.audio-icon svg {
|
||||
color: #f59e0b;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.audio-icon::before,
|
||||
.file-item .file-icon.audio-icon::after {
|
||||
.files-list-view .file-item .file-icon.audio-icon::before,
|
||||
.files-list-view .file-item .file-icon.audio-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.spreadsheet-icon {
|
||||
.files-list-view .file-item .file-icon.spreadsheet-icon {
|
||||
background-color: #e6f4ea;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -205,18 +200,18 @@
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.spreadsheet-icon i,
|
||||
.file-item .file-icon.spreadsheet-icon svg {
|
||||
.files-list-view .file-item .file-icon.spreadsheet-icon i,
|
||||
.files-list-view .file-item .file-icon.spreadsheet-icon svg {
|
||||
color: #0d904f;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.spreadsheet-icon::before,
|
||||
.file-item .file-icon.spreadsheet-icon::after {
|
||||
.files-list-view .file-item .file-icon.spreadsheet-icon::before,
|
||||
.files-list-view .file-item .file-icon.spreadsheet-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.presentation-icon {
|
||||
.files-list-view .file-item .file-icon.presentation-icon {
|
||||
background-color: #fef3e2;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -224,18 +219,18 @@
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.presentation-icon i,
|
||||
.file-item .file-icon.presentation-icon svg {
|
||||
.files-list-view .file-item .file-icon.presentation-icon i,
|
||||
.files-list-view .file-item .file-icon.presentation-icon svg {
|
||||
color: #d04423;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.presentation-icon::before,
|
||||
.file-item .file-icon.presentation-icon::after {
|
||||
.files-list-view .file-item .file-icon.presentation-icon::before,
|
||||
.files-list-view .file-item .file-icon.presentation-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.audio-icon {
|
||||
.files-list-view .file-item .file-icon.audio-icon {
|
||||
background-color: #fff3e0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -243,7 +238,7 @@
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.archive-icon {
|
||||
.files-list-view .file-item .file-icon.archive-icon {
|
||||
background-color: #f5f0eb;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -251,18 +246,18 @@
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.archive-icon i,
|
||||
.file-item .file-icon.archive-icon svg {
|
||||
.files-list-view .file-item .file-icon.archive-icon i,
|
||||
.files-list-view .file-item .file-icon.archive-icon svg {
|
||||
color: #8d6e63;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.archive-icon::before,
|
||||
.file-item .file-icon.archive-icon::after {
|
||||
.files-list-view .file-item .file-icon.archive-icon::before,
|
||||
.files-list-view .file-item .file-icon.archive-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.installer-icon {
|
||||
.files-list-view .file-item .file-icon.installer-icon {
|
||||
background-color: #f3e8ff;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -270,100 +265,115 @@
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.installer-icon i,
|
||||
.file-item .file-icon.installer-icon svg {
|
||||
.files-list-view .file-item .file-icon.installer-icon i,
|
||||
.files-list-view .file-item .file-icon.installer-icon svg {
|
||||
color: #7c3aed;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.installer-icon::before,
|
||||
.file-item .file-icon.installer-icon::after {
|
||||
.files-list-view .file-item .file-icon.installer-icon::before,
|
||||
.files-list-view .file-item .file-icon.installer-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.script-icon {
|
||||
.files-list-view .file-item .file-icon.script-icon {
|
||||
background-color: #e8f5e9;
|
||||
}
|
||||
|
||||
.file-item .file-icon.script-icon i,
|
||||
.file-item .file-icon.script-icon svg {
|
||||
.files-list-view .file-item .file-icon.script-icon i,
|
||||
.files-list-view .file-item .file-icon.script-icon svg {
|
||||
color: #4eaa25;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.script-icon::before,
|
||||
.file-item .file-icon.script-icon::after {
|
||||
.files-list-view .file-item .file-icon.script-icon::before,
|
||||
.files-list-view .file-item .file-icon.script-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-item .file-icon.config-icon {
|
||||
.files-list-view .file-item .file-icon.config-icon {
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
|
||||
.file-item .file-icon.config-icon i,
|
||||
.file-item .file-icon.config-icon svg {
|
||||
.files-list-view .file-item .file-icon.config-icon i,
|
||||
.files-list-view .file-item .file-icon.config-icon svg {
|
||||
color: #718096;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.file-item .file-icon.config-icon::before,
|
||||
.file-item .file-icon.config-icon::after {
|
||||
.files-list-view .file-item .file-icon.config-icon::before,
|
||||
.files-list-view .file-item .file-icon.config-icon::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-header > div:nth-child(5),
|
||||
.file-item .date-cell {
|
||||
.files-list-view .file-item .date-cell {
|
||||
justify-self: center;
|
||||
text-align: center;
|
||||
}
|
||||
.file-item .date-cell {
|
||||
.files-list-view .file-item .date-cell {
|
||||
color: #718096;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-item .size-cell {
|
||||
.files-list-view .file-item .size-cell {
|
||||
color: #718096;
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.file-item .type-cell {
|
||||
.files-list-view .file-item .type-cell {
|
||||
color: #4b5563;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-item.dragging {
|
||||
.files-list-view .file-item.dragging {
|
||||
opacity: 0.5;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.file-item.drop-target {
|
||||
.files-list-view .file-item.drop-target {
|
||||
background-color: rgba(255, 193, 7, 0.1);
|
||||
border: 2px dashed #ffc107;
|
||||
}
|
||||
|
||||
/* More actions button (three dots) */
|
||||
.file-more {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
.files-list-view .file-item .action-cell {
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.files-list-view .file-item .action-cell button {
|
||||
display: inline;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.15s, background 0.15s;
|
||||
cursor: pointer;
|
||||
color: #64748b;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.file-more:hover {
|
||||
.files-list-view .file-item .action-cell button:hover {
|
||||
background: #e0e5e8;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
/* could be visible if we want */
|
||||
.files-list-view .file-item .action-cell button.favorite-star {
|
||||
display: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.files-list-view .file-item:hover .action-cell button.favorite-star {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
[data-theme="dark"] .files-list-view {
|
||||
background-color: #1e293b;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
@@ -375,49 +385,49 @@
|
||||
border-bottom-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-item {
|
||||
[data-theme="dark"] .files-list-view .file-item {
|
||||
background-color: #1e293b;
|
||||
border-bottom-color: #293548;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-item:hover {
|
||||
[data-theme="dark"] .files-list-view .file-item:hover {
|
||||
background-color: #253345;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-item.selected {
|
||||
[data-theme="dark"] .files-list-view .file-item.selected {
|
||||
background-color: #1a1520;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-item.selected:hover {
|
||||
[data-theme="dark"] .files-list-view .file-item.selected:hover {
|
||||
background-color: #231a2a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-item .name-cell {
|
||||
[data-theme="dark"] .files-list-view .file-item .name-cell {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-item .date-cell,
|
||||
[data-theme="dark"] .file-item .size-cell {
|
||||
[data-theme="dark"] .files-list-view .file-item .date-cell,
|
||||
[data-theme="dark"] .files-list-view .file-item .size-cell {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-item .type-cell {
|
||||
[data-theme="dark"] .files-list-view .file-item .type-cell {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-item.dragging {
|
||||
[data-theme="dark"] .files-list-view .file-item.dragging {
|
||||
background-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-item.drop-target {
|
||||
[data-theme="dark"] .files-list-view .file-item.drop-target {
|
||||
background-color: rgba(255, 193, 7, 0.05);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-more {
|
||||
[data-theme="dark"] .files-list-view .file-actions {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .file-more:hover {
|
||||
[data-theme="dark"] .files-list-view .file-actions:hover {
|
||||
background: #334155;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
/* Multi-Select – checkboxes & batch action bar */
|
||||
.list-header-checkbox,
|
||||
.list-item-checkbox {
|
||||
.file-item .checkbox-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.list-header-checkbox input[type="checkbox"],
|
||||
.list-item-checkbox input[type="checkbox"] {
|
||||
.file-item .checkbox-cell input[type="checkbox"] {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
cursor: pointer;
|
||||
@@ -125,8 +125,8 @@
|
||||
}
|
||||
|
||||
[data-theme="dark"] .list-header-checkbox input,
|
||||
[data-theme="dark"] .list-item-checkbox input,
|
||||
[data-theme="dark"] .file-card-checkbox input {
|
||||
[data-theme="dark"] .file-item .checkbox-cell input,
|
||||
[data-theme="dark"] .file-item .checkbox-cell input {
|
||||
accent-color: #ff5e3a;
|
||||
}
|
||||
|
||||
|
||||
@@ -48,18 +48,76 @@
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.dragged-items > div {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
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 rgba(0,0,0,0.05);*/
|
||||
}
|
||||
|
||||
.dragged-items .file-item {
|
||||
display: grid;
|
||||
grid-template-columns: var(--dragged-files-list-columns);
|
||||
column-gap: 12px;
|
||||
padding: 12px 15px;
|
||||
/*border-bottom: 1px solid #f0f0f0;*/
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.dragged-items .file-item {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
width: 336px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.dragged-items > div.fading {
|
||||
-webkit-mask-image: linear-gradient(to bottom, white 20%, transparent);
|
||||
mask-image: linear-gradient(to bottom, white 20%, transparent);
|
||||
/* 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: #ffeaa7;
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dragged-items .file-item .file-icon.folder-icon {
|
||||
background-color: #ffeaa7;
|
||||
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: #fdcb6e;
|
||||
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, white 10%, transparent);
|
||||
mask-image: linear-gradient(to bottom, white 10%, transparent);
|
||||
}
|
||||
|
||||
.dragged-items-badge {
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
/* Adjustments for grid view */
|
||||
.file-card.favorite-item {
|
||||
.file-item.favorite-item {
|
||||
border-left: 3px solid #ffc107;
|
||||
|
||||
[dir='rtl'] & {
|
||||
@@ -101,13 +101,13 @@
|
||||
/* ── Star badge on file/folder cards (normal view) ── */
|
||||
|
||||
/* Grid view: keep interactive star button behavior from style.css */
|
||||
.file-card .favorite-star {
|
||||
.file-item .favorite-star {
|
||||
pointer-events: auto;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.file-card .favorite-star.active i,
|
||||
.file-card .favorite-star.active svg {
|
||||
.file-item .favorite-star.active i,
|
||||
.file-item .favorite-star.active svg {
|
||||
animation: favorite-pulse 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -123,4 +123,4 @@
|
||||
margin-left: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
/* Adjustments for grid view */
|
||||
.file-card.recent-item {
|
||||
.files-grid-view .file-item.recent-item {
|
||||
border-left: 3px solid #6c757d;
|
||||
|
||||
[dir='rtl'] & {
|
||||
@@ -77,7 +77,7 @@
|
||||
}
|
||||
|
||||
/* Tooltip for access time */
|
||||
.recent-item .file-info {
|
||||
.recent-item .type-cell {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
@@ -89,4 +89,4 @@
|
||||
@keyframes recent-fade-in {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.file-card.trash-item:hover .trash-actions,
|
||||
.file-item.trash-item:hover .actions-cell {
|
||||
.files-grid-view .file-card.trash-item:hover .trash-actions,
|
||||
.files-list-view .file-item.trash-item:hover .actions-cell {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user