chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added hover and focused states for grouped notifications

Browse source
This commit is contained in:
Niléane 2024-07-23 13:42:36 +02:00
parent e3e3139e9b
commit 09274009b4
No known key found for this signature in database
3 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
TangerineUI-cherry.css
View file

@ -2485,6 +2485,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body
:is(.focusable, .status__wrapper.focusable):focus
:is(.detailed-status, .detailed-status__action-bar),
.app-body .focusable:focus .notification-ungrouped__header,
.app-body .focusable:focus .status__wrapper,
.app-body .focusable:focus {
outline: 0;
--color-post-bg: var(--color-content-bg-focus);
@ -2493,7 +2495,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
@media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */
.app-body .status__wrapper:has(.status__content:hover),
.app-body .notification__message:has(+ div > .status__wrapper .status__content:hover),
.app-body .status__wrapper:has(.status__content:hover) .status__avatar {
.app-body .status__wrapper:has(.status__content:hover) .status__avatar,
.app-body .notification-ungrouped:has(.status__wrapper .status__content:hover) .notification-ungrouped__header {
--color-post-bg: var(--color-content-bg-focus);
}
}
@ -5032,7 +5035,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
color: var(--color-content-fg-muted);
}
.app-body .notification.unread::before,
.app-body .status__wrapper.unread::before {
.app-body .status__wrapper.unread::before,
.app-body .notification-group--unread:before,
.app-body .notification-ungrouped--unread:before {
background-color: var(--color-accent);
width: 8px;
border: 0;
@ -5310,6 +5315,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
position: relative;
font-weight: 500;
color: var(--color-content-fg);
background-color: var(--color-post-bg);
transition: background .3s;
}
.app-body .notification-ungrouped__header bdi {
font-weight: bold;

11
TangerineUI-purple.css
View file

@ -2485,6 +2485,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body
:is(.focusable, .status__wrapper.focusable):focus
:is(.detailed-status, .detailed-status__action-bar),
.app-body .focusable:focus .notification-ungrouped__header,
.app-body .focusable:focus .status__wrapper,
.app-body .focusable:focus {
outline: 0;
--color-post-bg: var(--color-content-bg-focus);
@ -2493,7 +2495,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
@media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */
.app-body .status__wrapper:has(.status__content:hover),
.app-body .notification__message:has(+ div > .status__wrapper .status__content:hover),
.app-body .status__wrapper:has(.status__content:hover) .status__avatar {
.app-body .status__wrapper:has(.status__content:hover) .status__avatar,
.app-body .notification-ungrouped:has(.status__wrapper .status__content:hover) .notification-ungrouped__header {
--color-post-bg: var(--color-content-bg-focus);
}
}
@ -5032,7 +5035,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
color: var(--color-content-fg-muted);
}
.app-body .notification.unread::before,
.app-body .status__wrapper.unread::before {
.app-body .status__wrapper.unread::before,
.app-body .notification-group--unread:before,
.app-body .notification-ungrouped--unread:before {
background-color: var(--color-accent);
width: 8px;
border: 0;
@ -5310,6 +5315,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
position: relative;
font-weight: 500;
color: var(--color-content-fg);
background-color: var(--color-post-bg);
transition: background .3s;
}
.app-body .notification-ungrouped__header bdi {
font-weight: bold;

11
TangerineUI.css
View file

@ -2485,6 +2485,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body
:is(.focusable, .status__wrapper.focusable):focus
:is(.detailed-status, .detailed-status__action-bar),
.app-body .focusable:focus .notification-ungrouped__header,
.app-body .focusable:focus .status__wrapper,
.app-body .focusable:focus {
outline: 0;
--color-post-bg: var(--color-content-bg-focus);
@ -2493,7 +2495,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
@media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */
.app-body .status__wrapper:has(.status__content:hover),
.app-body .notification__message:has(+ div > .status__wrapper .status__content:hover),
.app-body .status__wrapper:has(.status__content:hover) .status__avatar {
.app-body .status__wrapper:has(.status__content:hover) .status__avatar,
.app-body .notification-ungrouped:has(.status__wrapper .status__content:hover) .notification-ungrouped__header {
--color-post-bg: var(--color-content-bg-focus);
}
}
@ -5032,7 +5035,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
color: var(--color-content-fg-muted);
}
.app-body .notification.unread::before,
.app-body .status__wrapper.unread::before {
.app-body .status__wrapper.unread::before,
.app-body .notification-group--unread:before,
.app-body .notification-ungrouped--unread:before {
background-color: var(--color-accent);
width: 8px;
border: 0;
@ -5310,6 +5315,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
position: relative;
font-weight: 500;
color: var(--color-content-fg);
background-color: var(--color-post-bg);
transition: background .3s;
}
.app-body .notification-ungrouped__header bdi {
font-weight: bold;