diff --git a/frontend/src/styles/cabinet-theme.css b/frontend/src/styles/cabinet-theme.css index b4deb52..dbf9e9e 100644 --- a/frontend/src/styles/cabinet-theme.css +++ b/frontend/src/styles/cabinet-theme.css @@ -411,9 +411,17 @@ code, transition: border-color 0.15s, box-shadow 0.15s; } -.list-row:hover { - border-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant)); - box-shadow: 0 2px 12px rgba(0, 113, 104, 0.08); +/* Hover — только у устройств с нормальным hover (не залипает на тач после тапа) */ +@media (hover: hover) and (pointer: fine) { + .list-row:hover { + border-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant)); + box-shadow: 0 2px 12px rgba(0, 113, 104, 0.08); + } + + .list-row a:hover { + color: var(--primary); + text-decoration: none; + } } .list-row a { @@ -422,11 +430,6 @@ code, font-weight: 600; } -.list-row a:hover { - color: var(--primary); - text-decoration: none; -} - .list-row__meta { color: var(--secondary); font-size: 0.8rem; @@ -455,9 +458,11 @@ code, transition: background 0.12s ease; } -.list-row--action .list-row__link:hover { - background: color-mix(in srgb, var(--primary) 6%, transparent); - text-decoration: none; +@media (hover: hover) and (pointer: fine) { + .list-row--action .list-row__link:hover { + background: color-mix(in srgb, var(--primary) 6%, transparent); + text-decoration: none; + } } .list-row--action .list-row__title { @@ -501,9 +506,15 @@ code, -webkit-tap-highlight-color: color-mix(in srgb, var(--primary) 18%, transparent); } -.list-row--split .list-row__link:hover { - background: color-mix(in srgb, var(--primary) 6%, transparent); - text-decoration: none; +.list-row--split .list-row__link:active { + background: color-mix(in srgb, var(--primary) 10%, transparent); +} + +@media (hover: hover) and (pointer: fine) { + .list-row--split .list-row__link:hover { + background: color-mix(in srgb, var(--primary) 6%, transparent); + text-decoration: none; + } } .list-row--split .list-row__side { @@ -520,9 +531,17 @@ code, font-weight: 600; } -@media (max-width: 520px) { +/* Моб/узкий экран: заголовок на полную ширину, кнопка снизу на полную ширину — без пустой полосы */ +@media (max-width: 640px) { .list-row--split { - flex-wrap: wrap; + flex-direction: column; + flex-wrap: nowrap; + align-items: stretch; + } + + .list-row--split .list-row__main { + flex: 0 0 auto; + width: 100%; } .list-row--split .list-row__link { @@ -530,12 +549,18 @@ code, } .list-row--split .list-row__side { + box-sizing: border-box; width: 100%; - justify-content: flex-end; + justify-content: stretch; border-left: none; border-top: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent); padding: 0.5rem 0.9rem 0.75rem; } + + .list-row--split .list-row__side .btn { + width: 100%; + box-sizing: border-box; + } } /* Карточка теста: визуальные блоки + сворачивание (удобно на узком экране) */