From 1c5eb76787f4fd3a64e49615e34bc50967345910 Mon Sep 17 00:00:00 2001 From: Roni Laukkarinen Date: Sun, 29 Oct 2023 20:04:02 +0200 Subject: [PATCH] Make hearts as default --- layout-single-column.css | 59 +++------------------------------------- 1 file changed, 4 insertions(+), 55 deletions(-) diff --git a/layout-single-column.css b/layout-single-column.css index d1d60ec..4833f9c 100644 --- a/layout-single-column.css +++ b/layout-single-column.css @@ -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 { @@ -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); } @@ -4157,23 +4153,19 @@ 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 { @@ -4181,25 +4173,18 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 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; @@ -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; } @@ -4231,15 +4213,11 @@ 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; @@ -4247,20 +4225,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 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); @@ -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); } @@ -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; @@ -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; } } @@ -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 */