diff --git a/apps/web/src/widgets/FullPlayer.module.css b/apps/web/src/widgets/FullPlayer.module.css
index 3038711..b11c82f 100644
--- a/apps/web/src/widgets/FullPlayer.module.css
+++ b/apps/web/src/widgets/FullPlayer.module.css
@@ -77,12 +77,46 @@
pointer-events: none;
}
+/* Кнопки на обложке видны только при наведении / фокусе (на тач-экранах — всегда). */
+.shade,
+.round,
+.controls,
+.moreWrap {
+ opacity: 0;
+ transition: opacity 0.18s, background 0.12s;
+}
+
+.card:hover .shade,
+.card:hover .round,
+.card:hover .controls,
+.card:hover .moreWrap,
+.card:focus-within .shade,
+.card:focus-within .round,
+.card:focus-within .controls,
+.card:focus-within .moreWrap,
+.cardOpen .shade,
+.cardOpen .round,
+.cardOpen .controls,
+.cardOpen .moreWrap {
+ opacity: 1;
+}
+
+@media (hover: none) {
+ .shade,
+ .round,
+ .controls,
+ .moreWrap {
+ opacity: 1;
+ }
+}
+
.round {
position: absolute;
+ flex: none;
display: grid;
place-items: center;
- width: 48px;
- height: 48px;
+ width: 52px;
+ height: 52px;
border-radius: 50%;
background: rgba(20, 20, 20, 0.82);
color: #fff;
@@ -101,6 +135,11 @@
color: #ffe600;
}
+.topLeft {
+ top: 16px;
+ left: 16px;
+}
+
.topRight {
top: 16px;
right: 16px;
@@ -154,7 +193,7 @@
display: flex;
align-items: center;
justify-content: center;
- gap: 12px;
+ gap: 20px;
pointer-events: none;
}
diff --git a/apps/web/src/widgets/FullPlayer.tsx b/apps/web/src/widgets/FullPlayer.tsx
index c01dac4..f479964 100644
--- a/apps/web/src/widgets/FullPlayer.tsx
+++ b/apps/web/src/widgets/FullPlayer.tsx
@@ -60,12 +60,21 @@ export function FullPlayer({ onClose, onQueue, share }: { onClose: () => void; o