From 5e802e62818ab0cd3ccccc89fd20cc4dd1443ce4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Thu, 21 Sep 2023 21:43:50 +0200 Subject: [PATCH] Fixed hover state on notifications --- TangerineUI-purple.css | 9 ++++++++- TangerineUI.css | 9 ++++++++- .../styles/tangerineui-purple/layout-single-column.scss | 9 ++++++++- .../styles/tangerineui/layout-single-column.scss | 9 ++++++++- 4 files changed, 32 insertions(+), 4 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index e53cc25..3829c82 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -998,7 +998,8 @@ body.layout-single-column { background: var(--color-content-bg-focus); } @media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ - .layout-single-column .status__wrapper:has(.status__content:hover) { + .layout-single-column .status__wrapper:has(.status__content:hover), + .layout-single-column .notification__message:has(+ div > .status__wrapper .status__content:hover) { background: var(--color-content-bg-focus); } } @@ -2751,6 +2752,11 @@ body.layout-single-column { line-height: 28px; padding: 6px 17px; } +@media (prefers-color-scheme: dark) { + .layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { + background: linear-gradient(to top, rgba(122, 122, 249, .5), rgba(122, 122, 249, .3)); + } +} @@ -2780,6 +2786,7 @@ body.layout-single-column { padding: 12px 12px 0; background-color: var(--color-content-bg); color: var(--color-content-fg-bold); + transition: all .3s; } .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); diff --git a/TangerineUI.css b/TangerineUI.css index 5eb4c48..638f5a9 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -998,7 +998,8 @@ body.layout-single-column { background: var(--color-content-bg-focus); } @media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ - .layout-single-column .status__wrapper:has(.status__content:hover) { + .layout-single-column .status__wrapper:has(.status__content:hover), + .layout-single-column .notification__message:has(+ div > .status__wrapper .status__content:hover) { background: var(--color-content-bg-focus); } } @@ -2751,6 +2752,11 @@ body.layout-single-column { line-height: 28px; padding: 6px 17px; } +@media (prefers-color-scheme: dark) { + .layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { + background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3)); + } +} @@ -2780,6 +2786,7 @@ body.layout-single-column { padding: 12px 12px 0; background-color: var(--color-content-bg); color: var(--color-content-fg-bold); + transition: all .3s; } .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); 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 e53cc25..3829c82 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -998,7 +998,8 @@ body.layout-single-column { background: var(--color-content-bg-focus); } @media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ - .layout-single-column .status__wrapper:has(.status__content:hover) { + .layout-single-column .status__wrapper:has(.status__content:hover), + .layout-single-column .notification__message:has(+ div > .status__wrapper .status__content:hover) { background: var(--color-content-bg-focus); } } @@ -2751,6 +2752,11 @@ body.layout-single-column { line-height: 28px; padding: 6px 17px; } +@media (prefers-color-scheme: dark) { + .layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { + background: linear-gradient(to top, rgba(122, 122, 249, .5), rgba(122, 122, 249, .3)); + } +} @@ -2780,6 +2786,7 @@ body.layout-single-column { padding: 12px 12px 0; background-color: var(--color-content-bg); color: var(--color-content-fg-bold); + transition: all .3s; } .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 5eb4c48..638f5a9 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -998,7 +998,8 @@ body.layout-single-column { background: var(--color-content-bg-focus); } @media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ - .layout-single-column .status__wrapper:has(.status__content:hover) { + .layout-single-column .status__wrapper:has(.status__content:hover), + .layout-single-column .notification__message:has(+ div > .status__wrapper .status__content:hover) { background: var(--color-content-bg-focus); } } @@ -2751,6 +2752,11 @@ body.layout-single-column { line-height: 28px; padding: 6px 17px; } +@media (prefers-color-scheme: dark) { + .layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { + background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3)); + } +} @@ -2780,6 +2786,7 @@ body.layout-single-column { padding: 12px 12px 0; background-color: var(--color-content-bg); color: var(--color-content-fg-bold); + transition: all .3s; } .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines);