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

20
TangerineUI-single-column.css
View file

@ -774,8 +774,7 @@ body.layout-single-column {
outline: 0;
background: var(--color-content-bg-focus);
}
.layout-single-column .status__wrapper.focusable:focus,
.layout-single-column .status__wrapper:has(.status__content:hover) {
.layout-single-column .status__wrapper.focusable:focus {
box-shadow:
inset 72px 0 var(--color-content-bg-focus),
0 -2px var(--color-content-secondary-bg) inset;
@ -786,11 +785,18 @@ body.layout-single-column {
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) {
box-shadow:
0 -3px var(--color-bg),
inset 72px 0 var(--color-content-bg-focus),
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) {
box-shadow:
0 -3px var(--color-bg),
inset 72px 0 var(--color-content-bg-focus),
0 -2px var(--color-content-secondary-bg) inset;
}
}
/* 👁️ Post detailed view */