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

added hover style on posts

Browse source
This commit is contained in:
Niléane 2023-07-10 17:04:11 +02:00
commit f6632d6120
No known key found for this signature in database
1 changed files with 21 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

27
TangerineUIforMastodon-singlecolumnlayout.css
View file

@ -522,6 +522,7 @@ body.layout-single-column {
border-bottom: 0; border-bottom: 0;
} }
.layout-single-column .status__wrapper { .layout-single-column .status__wrapper {
transition: background .3s, box-shadow .3s;
box-shadow: box-shadow:
inset 72px 0 var(--color-content-bg), inset 72px 0 var(--color-content-bg),
0 -2px var(--color-content-secondary-bg) inset; 0 -2px var(--color-content-secondary-bg) inset;
@ -727,19 +728,33 @@ body.layout-single-column {
} }
/* ⏺️ Posts when in focus */ /* ⏺️ Posts when in focus */
.layout-single-column .scrollable .status__wrapper.focusable:focus, .layout-single-column .status__wrapper.focusable:focus,
.layout-single-column .scrollable .detailed-status__wrapper.focusable:focus, .layout-single-column .detailed-status__wrapper.focusable:focus,
.layout-single-column .focusable:focus .detailed-status, .layout-single-column .focusable:focus .detailed-status,
.layout-single-column .focusable:focus .detailed-status__action-bar, .layout-single-column .focusable:focus .detailed-status__action-bar,
.layout-single-column .scrollable .status__wrapper.focusable:focus .detailed-status, .layout-single-column .status__wrapper.focusable:focus .detailed-status,
.layout-single-column .scrollable .focusable:focus .detailed-status__action-bar { .layout-single-column .focusable:focus .detailed-status__action-bar,
.layout-single-column .status__wrapper:has(.status__content:hover) {
outline: 0; outline: 0;
background: var(--color-content-bg-focus); background: var(--color-content-bg-focus);
} }
.layout-single-column .scrollable .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 -1px var(--color-content-secondary-bg) inset; 0 -2px var(--color-content-secondary-bg) inset;
}
.layout-single-column .status__wrapper.focusable:has(.status--first-in-thread .status__content):focus {
box-shadow:
0 -3px var(--color-bg),
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 */ /* 👁️ Post detailed view */