mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2024-12-02 16:58:10 +09:00
Code

Fixed hover state on notifications

Browse Source
This commit is contained in:
Niléane 2023-09-21 21:43:50 +02:00
parent 7a4caede8d
commit 5e802e6281
No known key found for this signature in database
4 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
TangerineUI-purple.css
View File

@ -998,7 +998,8 @@ body.layout-single-column {
background: var(--color-content-bg-focus); 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. */ @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); background: var(--color-content-bg-focus);
} }
} }
@ -2751,6 +2752,11 @@ body.layout-single-column {
line-height: 28px; line-height: 28px;
padding: 6px 17px; 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; padding: 12px 12px 0;
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg-bold); color: var(--color-content-fg-bold);
transition: all .3s;
} }
.layout-single-column .scrollable > div > article:first-child .notification__message { .layout-single-column .scrollable > div > article:first-child .notification__message {
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);

9
TangerineUI.css
View File

@ -998,7 +998,8 @@ body.layout-single-column {
background: var(--color-content-bg-focus); 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. */ @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); background: var(--color-content-bg-focus);
} }
} }
@ -2751,6 +2752,11 @@ body.layout-single-column {
line-height: 28px; line-height: 28px;
padding: 6px 17px; 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; padding: 12px 12px 0;
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg-bold); color: var(--color-content-fg-bold);
transition: all .3s;
} }
.layout-single-column .scrollable > div > article:first-child .notification__message { .layout-single-column .scrollable > div > article:first-child .notification__message {
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);

9
mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
View File

@ -998,7 +998,8 @@ body.layout-single-column {
background: var(--color-content-bg-focus); 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. */ @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); background: var(--color-content-bg-focus);
} }
} }
@ -2751,6 +2752,11 @@ body.layout-single-column {
line-height: 28px; line-height: 28px;
padding: 6px 17px; 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; padding: 12px 12px 0;
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg-bold); color: var(--color-content-fg-bold);
transition: all .3s;
} }
.layout-single-column .scrollable > div > article:first-child .notification__message { .layout-single-column .scrollable > div > article:first-child .notification__message {
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);

9
mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
View File

@ -998,7 +998,8 @@ body.layout-single-column {
background: var(--color-content-bg-focus); 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. */ @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); background: var(--color-content-bg-focus);
} }
} }
@ -2751,6 +2752,11 @@ body.layout-single-column {
line-height: 28px; line-height: 28px;
padding: 6px 17px; 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; padding: 12px 12px 0;
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg-bold); color: var(--color-content-fg-bold);
transition: all .3s;
} }
.layout-single-column .scrollable > div > article:first-child .notification__message { .layout-single-column .scrollable > div > article:first-child .notification__message {
border-top: 1px solid var(--color-lines); border-top: 1px solid var(--color-lines);