1berry/mastodon-bird-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix star interactions on mobile

Browse Source
This commit is contained in:
Roni Laukkarinen 2023-04-05 20:39:34 +03:00
parent 6fc782c044
commit a146e2886b
2 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -1,6 +1,8 @@
### 1.4.2rc1: 2024-04-05
### 1.4.2rc2: 2024-04-05
* Fix offset of the star micro-interaction in the Explore view
* Fix star/unstar interactions on mobile
* Fix sparkles not showing up on mobile devices
### 1.4.1: 2024-04-05

37
style.css
View File

@ -1,5 +1,5 @@
/* Mastodon Bird UI by @rolle@mementomori.social
1.4.2rc1 */
1.4.2rc2 */
/* CSS variables */
:root {
@ -3314,6 +3314,14 @@ body.embed .entry .detailed-status {
z-index: unset;
}
/* Ensure everything shows up on mobile */
.layout-single-column.no-reduce-motion .icon-button.star-icon.activate .fa-star::before,
.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate::after,
.layout-single-column .status__action-bar button.icon-button.activate.star-icon::after {
/* stylelint-disable-next-line */
display: block !important;
}
/* Star circle/ring */
.layout-single-column .detailed-status__action-bar button.icon-button.activate.star-icon::before,
.layout-single-column .status__action-bar button.icon-button.activate.star-icon::before {
@ -3335,6 +3343,16 @@ body.embed .entry .detailed-status {
color: var(--color-yellow);
}
.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.deactivate:hover .fa-star::before,
.layout-single-column .status__action-bar button.icon-button.deactivate.star-icon:hover .fa-star::before,
.layout-single-column .detailed-status__action-bar .icon-butto.deactivate .fa-star::before,
.layout-single-column .detailed-status button.icon-button.deactivate .fa-star::before,
.layout-single-column .status button.icon-button.deactivate .fa-star::before {
color: var(--color-dim);
/* stylelint-disable-next-line */
content: '\f006' !important;
}
.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate:hover .fa-star::before,
.layout-single-column .status__action-bar button.icon-button.activate.star-icon:hover .fa-star::before,
.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-star::before,
@ -3342,11 +3360,23 @@ body.embed .entry .detailed-status {
.layout-single-column .status button.icon-button:hover .fa-star::before {
color: var(--color-yellow);
/* stylelint-disable-next-line */
content: "\f006" !important;
content: "\f005" !important;
position: relative;
top: 0;
}
/* Mobile devices */
@media (hover: none) {
.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate:hover .fa-star::before,
.layout-single-column .status__action-bar button.icon-button.activate.star-icon:hover .fa-star::before,
.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-star::before,
.layout-single-column .detailed-status button.icon-button:hover .fa-star::before,
.layout-single-column .status button.icon-button:hover .fa-star::before {
/* stylelint-disable-next-line */
content: '\f005' !important;
}
}
/* Sparkle offset on numbered item */
.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.icon-button--with-counter.star-icon.activate::after,
.layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.star-icon.activate.star-icon::after {
@ -3358,7 +3388,8 @@ body.embed .entry .detailed-status {
}
/* Circle offset on numbered item */
.layout-single-column .detailed-status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before, .layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before {
.layout-single-column .detailed-status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before,
.layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before {
/* stylelint-disable-next-line */
left: calc(50% - 14px) !important;
}