@ -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 ;
}
}
}
/* Карточка теста: визуальные блоки + сворачивание (удобно на узком экране) */
/* Карточка теста: визуальные блоки + сворачивание (удобно на узком экране) */