UI Change

This commit is contained in:
2025-10-26 22:28:22 +03:00
parent acc38d419c
commit 1760441ce7

View File

@@ -793,14 +793,16 @@
} }
.media-card { .media-card {
position: relative; position: relative;
background: #f5f5f5; background: #f6f6f6;
border-radius: 12px; border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid #e2e2e2;
box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: transition:
transform 0.18s ease, border-color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease; box-shadow 0.18s ease;
cursor: pointer; cursor: pointer;
} }
@@ -808,23 +810,31 @@
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.18); background: rgba(0, 0, 0, 0.08);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.18s ease; transition: opacity 0.18s ease;
} }
.media-card:hover {
border-color: #d4d4d4;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(15, 15, 15, 0.06);
}
.media-card:hover::after { .media-card:hover::after {
opacity: 0.22; opacity: 0.16;
} }
.media-card.is-selected { .media-card.is-selected {
transform: translateY(-6px) scale(0.965); border-color: #2d965a;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22); background: #f4fbf7;
box-shadow:
0 0 0 1px rgba(45, 150, 90, 0.35),
0 4px 12px rgba(45, 150, 90, 0.12);
} }
.media-card.is-selected::after { .media-card.is-selected::after {
opacity: 0.32; opacity: 0.12;
} }
.media-card.is-selected:hover::after { .media-card.is-selected:hover::after {
opacity: 0.35; opacity: 0.18;
} }
.media-card.list-view { .media-card.list-view {
flex-direction: row; flex-direction: row;
@@ -841,10 +851,10 @@
flex-shrink: 0; flex-shrink: 0;
} }
.media-card:hover { .media-card:hover {
transform: translateY(-4px) scale(0.98); transform: none;
} }
.media-card.is-selected:hover { .media-card.is-selected:hover {
transform: translateY(-6px) scale(0.965); transform: none;
} }
.selection-toggle { .selection-toggle {
position: absolute; position: absolute;