l_konstantin/TestingWebApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(tests list): stack card on mobile, full-width title and Pass button

Browse Source 
- max-width 640px: column layout, no split title/button in one row
- Pass button full width in side row; remove flex-end empty strip
- Scope list-row :hover to hover+fine pointer; add :active on link for touch
- list-row--action link hover also scoped to fine pointer

Made-with: Cursor
This commit is contained in:
Константин Лебединский
2026-04-27 20:08:33 +05:00
parent 9a85a13e08
commit f7d9cbb1c4
1 changed files with 42 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/cabinet-theme.css
+42 -17
View File
@@ -411,9 +411,17 @@ code,
transition: border-color 0.15s, box-shadow 0.15s; transition: border-color 0.15s, box-shadow 0.15s;
} }
.list-row:hover { /* Hover — только у устройств с нормальным hover (не залипает на тач после тапа) */
border-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant)); @media (hover: hover) and (pointer: fine) {
box-shadow: 0 2px 12px rgba(0, 113, 104, 0.08); .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 { .list-row a {
@@ -422,11 +430,6 @@ code,
font-weight: 600; font-weight: 600;
} }
.list-row a:hover {
color: var(--primary);
text-decoration: none;
}
.list-row__meta { .list-row__meta {
color: var(--secondary); color: var(--secondary);
font-size: 0.8rem; font-size: 0.8rem;
@@ -455,9 +458,11 @@ code,
transition: background 0.12s ease; transition: background 0.12s ease;
} }
.list-row--action .list-row__link:hover { @media (hover: hover) and (pointer: fine) {
background: color-mix(in srgb, var(--primary) 6%, transparent); .list-row--action .list-row__link:hover {
text-decoration: none; background: color-mix(in srgb, var(--primary) 6%, transparent);
text-decoration: none;
}
} }
.list-row--action .list-row__title { .list-row--action .list-row__title {
@@ -501,9 +506,15 @@ code,
-webkit-tap-highlight-color: color-mix(in srgb, var(--primary) 18%, transparent); -webkit-tap-highlight-color: color-mix(in srgb, var(--primary) 18%, transparent);
} }
.list-row--split .list-row__link:hover { .list-row--split .list-row__link:active {
background: color-mix(in srgb, var(--primary) 6%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent);
text-decoration: none; }
@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 { .list-row--split .list-row__side {
@@ -520,9 +531,17 @@ code,
font-weight: 600; font-weight: 600;
} }
@media (max-width: 520px) { /* Моб/узкий экран: заголовок на полную ширину, кнопка снизу на полную ширину — без пустой полосы */
@media (max-width: 640px) {
.list-row--split { .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 { .list-row--split .list-row__link {
@@ -530,12 +549,18 @@ code,
} }
.list-row--split .list-row__side { .list-row--split .list-row__side {
box-sizing: border-box;
width: 100%; width: 100%;
justify-content: flex-end; justify-content: stretch;
border-left: none; border-left: none;
border-top: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent); border-top: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent);
padding: 0.5rem 0.9rem 0.75rem; padding: 0.5rem 0.9rem 0.75rem;
} }
.list-row--split .list-row__side .btn {
width: 100%;
box-sizing: border-box;
}
} }
/* Карточка теста: визуальные блоки + сворачивание (удобно на узком экране) */ /* Карточка теста: визуальные блоки + сворачивание (удобно на узком экране) */