chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Condition hover effect on posts to bigger screens

Browse source
This commit is contained in:
Niléane 2023-07-11 16:47:21 +02:00
commit 06093bedb3
No known key found for this signature in database
1 changed files with 13 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
TangerineUI-single-column.css
View file

@ -774,8 +774,7 @@ body.layout-single-column {
outline: 0; outline: 0;
background: var(--color-content-bg-focus); background: var(--color-content-bg-focus);
} }
.layout-single-column .status__wrapper.focusable:focus, .layout-single-column .status__wrapper.focusable:focus {
.layout-single-column .status__wrapper:has(.status__content:hover) {
box-shadow: box-shadow:
inset 72px 0 var(--color-content-bg-focus), inset 72px 0 var(--color-content-bg-focus),
0 -2px var(--color-content-secondary-bg) inset; 0 -2px var(--color-content-secondary-bg) inset;
@ -786,12 +785,19 @@ body.layout-single-column {
inset 72px 0 var(--color-content-bg-focus), inset 72px 0 var(--color-content-bg-focus),
0 -2px var(--color-content-secondary-bg) inset; 0 -2px var(--color-content-secondary-bg) inset;
} }
@media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */
.layout-single-column .status__wrapper:has(.status__content:hover) {
box-shadow:
inset 72px 0 var(--color-content-bg-focus),
0 -2px var(--color-content-secondary-bg) inset;
}
.layout-single-column .status__wrapper:has(.status--first-in-thread .status__content:hover) { .layout-single-column .status__wrapper:has(.status--first-in-thread .status__content:hover) {
box-shadow: box-shadow:
0 -3px var(--color-bg), 0 -3px var(--color-bg),
inset 72px 0 var(--color-content-bg-focus), inset 72px 0 var(--color-content-bg-focus),
0 -2px var(--color-content-secondary-bg) inset; 0 -2px var(--color-content-secondary-bg) inset;
} }
}
/* 👁️ Post detailed view */ /* 👁️ Post detailed view */
.layout-single-column .detailed-status .status__content { .layout-single-column .detailed-status .status__content {