Skip to content

Commit

Permalink
Make hearts as default
Browse files Browse the repository at this point in the history
  • Loading branch information
@ronilaukkarinen
ronilaukkarinen committed Oct 29, 2023
1 parent a9dba42 commit 1c5eb76
Showing 1 changed file with 4 additions and 55 deletions.
59 changes: 4 additions & 55 deletions layout-single-column.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4123,15 +4123,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
* Heart animation micro-interaction ends
*/


/*
* Star animation micro-interaction start (depends on the heart icon above)
* If you prefer hearts, remove everything below this comment until
* "Star animation micro-interaction ends"
* Star animation micro-interaction start (depends on the hearts above)
* -------------------------------------------------------------------------
*/

/* If a hover device */
/* 1/2: If you prefer stars remove this line and the last line of this file
@media (hover: hover) {
.layout-single-column button.icon-button:not(.active):hover .icon-star ~ span,
.layout-single-column button.icon-button:not(.active):hover .icon-star {
Expand All @@ -4143,8 +4141,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
}
/* stylelint-disable no-duplicate-selectors */
/* Left sidebar column links */
.layout-single-column .column-link .icon-star {
background-image: var(--icon-star-column-link);
}
Expand All @@ -4157,49 +4153,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-image: var(--icon-star-notification);
}
/* Replace notification tab bar icon with star */
.layout-single-column .notification__filter-bar .active .icon-star {
background-image: var(--icon-star-active);
}
/* Numbers on hover */
.layout-single-column button.icon-button:hover .icon-star ~ span {
color: var(--color-dim);
}
/* Numbers when the star is active/activated */
.layout-single-column button.icon-button.activate .icon-star ~ span,
.layout-single-column button.icon-button.active .icon-star ~ span {
color: var(--color-yellow);
}
/* The actual star icon */
.layout-single-column .notification__filter-bar .icon-star,
.layout-single-column .detailed-status__action-bar .icon-button .icon-star,
.layout-single-column .status__action-bar .icon-button .icon-star {
--size-icon: 20px;
background-image: var(--icon-star-detailed-status-action-bar);
}
/* Active star icon */
.layout-single-column .notification__filter-bar button.icon-button.active .icon-star,
.layout-single-column .detailed-status__action-bar button.icon-button.active .icon-star,
.layout-single-column .status__action-bar button.icon-button.active .icon-star {
/* stylelint-disable-next-line */
background-image: var(--icon-star-detailed-status-action-bar) !important;
display: block;
}
/* Active star when activated */
.layout-single-column.no-reduce-motion .icon-button.star-icon.activate .icon-star {
/* stylelint-disable-next-line */
background-color: unset !important;
/* stylelint-disable-next-line */
background-image: var(--icon-star-detailed-status-action-bar-active) !important;
background-position: center;
/* stylelint-disable-next-line */
color: var(--color-yellow);
/* stylelint-disable-next-line */
left: unset !important;
position: relative;
top: 0;
Expand All @@ -4208,15 +4193,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
.layout-single-column.no-reduce-motion .icon-button.star-icon.active .icon-star {
/* stylelint-disable-next-line */
animation: none !important;
/* stylelint-disable-next-line */
background-image: var(--icon-star-detailed-status-action-bar-active) !important;
}
@media (prefers-reduced-motion: no-preference) {
.layout-single-column.no-reduce-motion .icon-button.star-icon.activate .icon-star {
/* stylelint-disable-next-line */
animation: sparkles-width .65s 1, sparkles-size .65s 1, popping .5s 1 !important;
}
Expand All @@ -4231,36 +4213,28 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
}
/* Star sparkles, when activated */
.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 */
background-color: unset !important;
content: '';
/* stylelint-disable-next-line */
height: 50px !important;
/* stylelint-disable-next-line */
left: 50% !important;
margin-left: -24px;
margin-top: -20px;
opacity: unset;
position: absolute;
top: calc(50% + 1px);
transform: none;
/* stylelint-disable-next-line */
width: 50px !important;
z-index: unset;
}
/* Ensure everything shows up on mobile */
.layout-single-column.no-reduce-motion .icon-button.star-icon.activate .icon-star,
.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 {
border: 0px solid var(--color-yellow);
Expand All @@ -4285,7 +4259,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.layout-single-column .detailed-status__action-bar .icon-butto.deactivate .icon-star,
.layout-single-column .detailed-status button.icon-button.deactivate .icon-star,
.layout-single-column .status button.icon-button.deactivate .icon-star {
/* stylelint-disable-next-line */
background-image: var(--icon-star-detailed-status-action-bar-hover) !important;
color: var(--color-dim);
}
Expand All @@ -4295,21 +4268,18 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.layout-single-column .detailed-status__action-bar .icon-button:hover .icon-star,
.layout-single-column .detailed-status button.icon-button:hover .icon-star,
.layout-single-column .status button.icon-button:hover .icon-star {
/* stylelint-disable-next-line */
background-image: var(--icon-star-detailed-status-action-bar-active) !important;
color: var(--color-yellow);
position: relative;
top: 0;
}
/* Prevent the star from being highlighted when the button is focused, especially while logged out */
.layout-single-column .detailed-status__action-bar .icon-button:focus .icon-star,
.layout-single-column .detailed-status button.icon-button:focus .icon-star,
.layout-single-column .status button.icon-button:hover .icon-star {
color: var(--color-dim);
}
/* Fix focus for mouse users on v4.1.4-nighly-20230721 */
.layout-single-column button:focus,
.layout-single-column .icon-button:focus {
outline: 0;
Expand All @@ -4320,55 +4290,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
outline: 2px solid var(--color-accent);
}
/* Alignment fixes */
/* Fix the x position in recent searches,
@link https://nileane.fr/@nileane/111110441774473219 */

.layout-single-column .search__popout__menu__item {
align-items: initial;
}
/* 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 {
/* stylelint-disable-next-line */
left: calc(50% - 14px) !important;

/* stylelint-disable-next-line */
top: calc(50% + -1px) !important;
}
/* 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 {
/* stylelint-disable-next-line */
left: calc(50% - 14px) !important;
}
/* Mobile devices */
@media (hover: none) {
.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate:hover .icon-star,
.layout-single-column .status__action-bar button.icon-button.activate.star-icon:hover .icon-star,
.layout-single-column .detailed-status__action-bar .icon-button:hover .icon-star,
.layout-single-column .detailed-status button.icon-button:hover .icon-star,
.layout-single-column .status button.icon-button:hover .icon-star {
/* stylelint-disable-next-line */
content: var(--icon-star-detailed-status-action-bar-active) !important;
}
}
/* Fix the sparkle and circle position on small screens on the Explore */
@media (max-width: 888px) {
/* Sparkle offset on numbered item */
.layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.star-icon.activate.star-icon::after {
/* stylelint-disable-next-line */
left: calc(50% - 11px) !important;
}
/* 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 {
/* stylelint-disable-next-line */
left: calc(50% - 11px) !important;
}
}
Expand Down Expand Up @@ -4833,8 +4786,4 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
}
/* stylelint-enable no-duplicate-selectors */
/*
* Star animation micro-interactions end
* -------------------------------------
*/
2/2: If you prefer stars remove this line too */

0 comments on commit 1c5eb76

Please sign in to comment.