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