From 88ed86034cbd60a5c2dbf620b4c8d639ff5b6cf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Mon, 9 Oct 2023 12:33:02 +0200 Subject: [PATCH] New look for the hashtag bar on posts --- TangerineUI-purple.css | 22 +++++++++++++++++++ TangerineUI.css | 22 +++++++++++++++++++ .../layout-single-column.scss | 22 +++++++++++++++++++ .../tangerineui/layout-single-column.scss | 22 +++++++++++++++++++ 4 files changed, 88 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 90b0c1e..b26edd5 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1112,12 +1112,33 @@ body.layout-single-column { .layout-single-column .hashtag-bar a, .layout-single-column .hashtag-bar .link-button { color: var(--color-fg-muted); + font-size: 90%; +} +.layout-single-column .hashtag-bar .link-button { + font-size: 80%; + margin-left: 3px; +} +.layout-single-column .hashtag-bar a { + background-color: var(--color-content-secondary-bg); transition: all .3s; + padding: 3px 8px; + border-radius: 8px; } .layout-single-column .hashtag-bar a:hover, .layout-single-column .hashtag-bar .link-button:hover { color: var(--color-accent); } +.layout-single-column .hashtag-bar a:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .hashtag-bar a:active, +.layout-single-column .hashtag-bar a:focus { + color: var(--color-accent-fg); + background-color: var(--color-accent); +} +.layout-single-column .hashtag-bar a:hover span { + text-decoration: none; +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { @@ -3073,6 +3094,7 @@ body.layout-single-column { .layout-single-column .reply-indicator__content .status__content__spoiler-link, .layout-single-column .status__content .status__content__spoiler-link { background-color: var(--color-accent-bg); + border-radius: 8px; } .layout-single-column .account__header__tabs__buttons .icon-button { padding: 3px; diff --git a/TangerineUI.css b/TangerineUI.css index 1b1360b..9cd2d57 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1112,12 +1112,33 @@ body.layout-single-column { .layout-single-column .hashtag-bar a, .layout-single-column .hashtag-bar .link-button { color: var(--color-fg-muted); + font-size: 90%; +} +.layout-single-column .hashtag-bar .link-button { + font-size: 80%; + margin-left: 3px; +} +.layout-single-column .hashtag-bar a { + background-color: var(--color-content-secondary-bg); transition: all .3s; + padding: 3px 8px; + border-radius: 8px; } .layout-single-column .hashtag-bar a:hover, .layout-single-column .hashtag-bar .link-button:hover { color: var(--color-accent); } +.layout-single-column .hashtag-bar a:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .hashtag-bar a:active, +.layout-single-column .hashtag-bar a:focus { + color: var(--color-accent-fg); + background-color: var(--color-accent); +} +.layout-single-column .hashtag-bar a:hover span { + text-decoration: none; +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { @@ -3073,6 +3094,7 @@ body.layout-single-column { .layout-single-column .reply-indicator__content .status__content__spoiler-link, .layout-single-column .status__content .status__content__spoiler-link { background-color: var(--color-accent-bg); + border-radius: 8px; } .layout-single-column .account__header__tabs__buttons .icon-button { padding: 3px; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 90b0c1e..b26edd5 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1112,12 +1112,33 @@ body.layout-single-column { .layout-single-column .hashtag-bar a, .layout-single-column .hashtag-bar .link-button { color: var(--color-fg-muted); + font-size: 90%; +} +.layout-single-column .hashtag-bar .link-button { + font-size: 80%; + margin-left: 3px; +} +.layout-single-column .hashtag-bar a { + background-color: var(--color-content-secondary-bg); transition: all .3s; + padding: 3px 8px; + border-radius: 8px; } .layout-single-column .hashtag-bar a:hover, .layout-single-column .hashtag-bar .link-button:hover { color: var(--color-accent); } +.layout-single-column .hashtag-bar a:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .hashtag-bar a:active, +.layout-single-column .hashtag-bar a:focus { + color: var(--color-accent-fg); + background-color: var(--color-accent); +} +.layout-single-column .hashtag-bar a:hover span { + text-decoration: none; +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { @@ -3073,6 +3094,7 @@ body.layout-single-column { .layout-single-column .reply-indicator__content .status__content__spoiler-link, .layout-single-column .status__content .status__content__spoiler-link { background-color: var(--color-accent-bg); + border-radius: 8px; } .layout-single-column .account__header__tabs__buttons .icon-button { padding: 3px; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 1b1360b..9cd2d57 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1112,12 +1112,33 @@ body.layout-single-column { .layout-single-column .hashtag-bar a, .layout-single-column .hashtag-bar .link-button { color: var(--color-fg-muted); + font-size: 90%; +} +.layout-single-column .hashtag-bar .link-button { + font-size: 80%; + margin-left: 3px; +} +.layout-single-column .hashtag-bar a { + background-color: var(--color-content-secondary-bg); transition: all .3s; + padding: 3px 8px; + border-radius: 8px; } .layout-single-column .hashtag-bar a:hover, .layout-single-column .hashtag-bar .link-button:hover { color: var(--color-accent); } +.layout-single-column .hashtag-bar a:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .hashtag-bar a:active, +.layout-single-column .hashtag-bar a:focus { + color: var(--color-accent-fg); + background-color: var(--color-accent); +} +.layout-single-column .hashtag-bar a:hover span { + text-decoration: none; +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { @@ -3073,6 +3094,7 @@ body.layout-single-column { .layout-single-column .reply-indicator__content .status__content__spoiler-link, .layout-single-column .status__content .status__content__spoiler-link { background-color: var(--color-accent-bg); + border-radius: 8px; } .layout-single-column .account__header__tabs__buttons .icon-button { padding: 3px;