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
-
+
+ +
-
{menu && (