From cb694b633fcc3bf9a68b3d6da580d5291607969e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sat, 3 Feb 2024 15:05:48 +0100 Subject: [PATCH] Added support for the new inline follow suggestions --- TangerineUI-cherry.css | 51 ++++++++++++++++++++++++++++++++++++++++++ TangerineUI-purple.css | 51 ++++++++++++++++++++++++++++++++++++++++++ TangerineUI.css | 51 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 153 insertions(+) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index e54a944..89bf0f2 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -4589,6 +4589,57 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } +/* Inline Follow Suggesitons */ +.app-body .inline-follow-suggestions { + background-color: var(--color-content-secondary-bg); + border-top: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); + position: relative; +} +.app-body .inline-follow-suggestions__header h3 { + font-weight: bold; + color: var(--color-content-fg); +} +.app-body .inline-follow-suggestions__body__scrollable__card { + border-radius: 8px; + background-color: var(--color-content-bg); + border: 0; +} +.app-body .inline-follow-suggestions__body__scrollable__card :is(.display-name__html, .display-name__account), +.app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source { + color: var(--color-content-fg); +} +.app-body .inline-follow-suggestions__body__scrollable__card .display-name__account { + opacity: .6; +} +.app-body .inline-follow-suggestions__body__scrollable__card .verified-badge { + color: var(--color-accent); +} +.app-body .inline-follow-suggestions__body__scrollable__card button:active { + transform: scale(.95); +} +.app-body .inline-follow-suggestions__body__scroll-button__icon { + background-color: var(--color-accent); + transition: background-color .2s; +} +.app-body .inline-follow-suggestions__body__scroll-button { + transition: all .3s; +} +.app-body .inline-follow-suggestions__body__scroll-button:is(:active) { + transform: scale(.9); +} +.app-body .inline-follow-suggestions__body__scroll-button:is(:active, :focus, :hover) .inline-follow-suggestions__body__scroll-button__icon { + background-color: var(--color-accent-focus); +} + +.app-body .inline-follow-suggestions__body__scrollable__card .account__avatar { + border-radius: 50px; + background-color: var(--color-content-bg); + border: 0; + outline: 3px solid var(--color-content-bg); + box-shadow: 0 2px 5px rgba(0, 0, 0, .1); +} + .app-body .button, .app-body .account__header__tabs__buttons .icon-button { diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index df51268..b07a898 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -4589,6 +4589,57 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } +/* Inline Follow Suggesitons */ +.app-body .inline-follow-suggestions { + background-color: var(--color-content-secondary-bg); + border-top: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); + position: relative; +} +.app-body .inline-follow-suggestions__header h3 { + font-weight: bold; + color: var(--color-content-fg); +} +.app-body .inline-follow-suggestions__body__scrollable__card { + border-radius: 8px; + background-color: var(--color-content-bg); + border: 0; +} +.app-body .inline-follow-suggestions__body__scrollable__card :is(.display-name__html, .display-name__account), +.app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source { + color: var(--color-content-fg); +} +.app-body .inline-follow-suggestions__body__scrollable__card .display-name__account { + opacity: .6; +} +.app-body .inline-follow-suggestions__body__scrollable__card .verified-badge { + color: var(--color-accent); +} +.app-body .inline-follow-suggestions__body__scrollable__card button:active { + transform: scale(.95); +} +.app-body .inline-follow-suggestions__body__scroll-button__icon { + background-color: var(--color-accent); + transition: background-color .2s; +} +.app-body .inline-follow-suggestions__body__scroll-button { + transition: all .3s; +} +.app-body .inline-follow-suggestions__body__scroll-button:is(:active) { + transform: scale(.9); +} +.app-body .inline-follow-suggestions__body__scroll-button:is(:active, :focus, :hover) .inline-follow-suggestions__body__scroll-button__icon { + background-color: var(--color-accent-focus); +} + +.app-body .inline-follow-suggestions__body__scrollable__card .account__avatar { + border-radius: 50px; + background-color: var(--color-content-bg); + border: 0; + outline: 3px solid var(--color-content-bg); + box-shadow: 0 2px 5px rgba(0, 0, 0, .1); +} + .app-body .button, .app-body .account__header__tabs__buttons .icon-button { diff --git a/TangerineUI.css b/TangerineUI.css index 0d10014..dee486b 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -4589,6 +4589,57 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } +/* Inline Follow Suggesitons */ +.app-body .inline-follow-suggestions { + background-color: var(--color-content-secondary-bg); + border-top: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); + position: relative; +} +.app-body .inline-follow-suggestions__header h3 { + font-weight: bold; + color: var(--color-content-fg); +} +.app-body .inline-follow-suggestions__body__scrollable__card { + border-radius: 8px; + background-color: var(--color-content-bg); + border: 0; +} +.app-body .inline-follow-suggestions__body__scrollable__card :is(.display-name__html, .display-name__account), +.app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source { + color: var(--color-content-fg); +} +.app-body .inline-follow-suggestions__body__scrollable__card .display-name__account { + opacity: .6; +} +.app-body .inline-follow-suggestions__body__scrollable__card .verified-badge { + color: var(--color-accent); +} +.app-body .inline-follow-suggestions__body__scrollable__card button:active { + transform: scale(.95); +} +.app-body .inline-follow-suggestions__body__scroll-button__icon { + background-color: var(--color-accent); + transition: background-color .2s; +} +.app-body .inline-follow-suggestions__body__scroll-button { + transition: all .3s; +} +.app-body .inline-follow-suggestions__body__scroll-button:is(:active) { + transform: scale(.9); +} +.app-body .inline-follow-suggestions__body__scroll-button:is(:active, :focus, :hover) .inline-follow-suggestions__body__scroll-button__icon { + background-color: var(--color-accent-focus); +} + +.app-body .inline-follow-suggestions__body__scrollable__card .account__avatar { + border-radius: 50px; + background-color: var(--color-content-bg); + border: 0; + outline: 3px solid var(--color-content-bg); + box-shadow: 0 2px 5px rgba(0, 0, 0, .1); +} + .app-body .button, .app-body .account__header__tabs__buttons .icon-button {