Add support for the new Filtered Notifications panel
This commit is contained in:
Niléane
parent
a40f0f008e
commit
a428364323
3 changed files with 330 additions and 54 deletions
|
|
@ -77,6 +77,8 @@
|
|||
|
||||
--color-lines: #343434;
|
||||
--color-lines-translucent: rgba(255, 255, 255, .15);
|
||||
|
||||
--color-confirm-fg: var(--color-confirm);
|
||||
}
|
||||
}
|
||||
:root {
|
||||
|
|
@ -1353,7 +1355,8 @@ body.app-body {
|
|||
a.account__display-name
|
||||
):is(:active, :focus, :hover)
|
||||
.display-name strong,
|
||||
.app-body .status__prepend .status__display-name:is(:active, :focus, :hover) strong {
|
||||
.app-body .status__prepend .status__display-name:is(:active, :focus, :hover) strong,
|
||||
.app-body a.notification-request__link:is(:active, :focus, :hover) .notification-request__name__display-name strong {
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: currentColor;
|
||||
text-decoration-thickness: 2px;
|
||||
|
|
@ -2188,7 +2191,8 @@ body.app-body {
|
|||
display: none;
|
||||
}
|
||||
.app-body .account__display-name strong,
|
||||
.app-body .status__display-name strong {
|
||||
.app-body .status__display-name strong,
|
||||
.app-body .notification-request__name__display-name strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.app-body .status {
|
||||
|
|
@ -2486,6 +2490,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
}
|
||||
.app-body .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
.app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */
|
||||
border-bottom: 1px solid var(--color-lines);
|
||||
|
|
@ -3247,6 +3252,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.app-body .column-back-button {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.app-body .column-header__button,
|
||||
.app-body .column-header__back-button {
|
||||
background-color: transparent;
|
||||
|
|
@ -3266,6 +3274,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
transform: scale(1.1);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.app-body .column-header__buttons .column-header__button:has(> .icon:only-child) {
|
||||
width: 42px;
|
||||
}
|
||||
.app-body .column-header.active .column-header__icon {
|
||||
color: var(--color-accent);
|
||||
text-shadow: none;
|
||||
|
|
@ -3318,29 +3329,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .column-back-button__icon {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span {
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span,
|
||||
.app-body .column-header__back-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span::before {
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span::before,
|
||||
.app-body .column-header__back-button:has(> svg:last-child)::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: -35px;
|
||||
right: -12px;
|
||||
bottom: -11px;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
top: 4px;
|
||||
z-index: -1;
|
||||
top: -10px;
|
||||
border-radius: 8px;
|
||||
background-color: transparent;
|
||||
transition: all .3s;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):hover span::before {
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span::before {
|
||||
left: -35px;
|
||||
right: -12px;
|
||||
bottom: -11px;
|
||||
top: -10px;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):hover span::before,
|
||||
.app-body .column-header__back-button:has(> svg:last-child):hover::before {
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):active span::before {
|
||||
.app-body :is(.column-header__back-button, .column-back-button):active span::before,
|
||||
.app-body .column-header__back-button:has(> svg:last-child):active::before {
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
|
|
@ -3387,7 +3407,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
padding-left: 0;
|
||||
}
|
||||
.app-body .column-header .column-header__back-button {
|
||||
padding-right: 16px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.app-body .column-header > button,
|
||||
.app-body .column-header .column-header__back-button {
|
||||
|
|
@ -4852,7 +4872,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.status__action-bar {
|
||||
display: none;
|
||||
}
|
||||
.app-body .account {
|
||||
.app-body .account,
|
||||
.app-body .notification-request {
|
||||
background-color: var(--color-content-bg);
|
||||
border-bottom: 2px solid var(--color-content-secondary-bg);
|
||||
padding-left: 22px;
|
||||
|
|
@ -4960,6 +4981,65 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
.app-body .filtered-notifications-banner {
|
||||
background-color: var(--color-content-bg);
|
||||
color: var(--color-accent);
|
||||
border: 0;
|
||||
position: relative;
|
||||
padding: 25px;
|
||||
border-left: 1px solid var(--color-lines);
|
||||
border-right: 1px solid var(--color-lines);
|
||||
}
|
||||
.app-body .filtered-notifications-banner::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
content: " ";
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
border-radius: 8px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.app-body .filtered-notifications-banner:is(:active, :hover, :focus)::before {
|
||||
background-color: color-mix(in srgb, var(--color-accent), transparent 88%);
|
||||
}
|
||||
.app-body .filtered-notifications-banner:hover::before {
|
||||
left: 6px;
|
||||
right: 6px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
.app-body .filtered-notifications-banner:active::before {
|
||||
transform: scale(.98);
|
||||
}
|
||||
.app-body .filtered-notifications-banner > * {
|
||||
z-index: 1;
|
||||
}
|
||||
.app-body .filtered-notifications-banner .filtered-notifications-banner__badge,
|
||||
.app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge,
|
||||
.app-body .notification-request__name .filtered-notifications-banner__badge {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-fg);
|
||||
border-radius: 50px;
|
||||
}
|
||||
.app-body .filtered-notifications-banner__text {
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body .filtered-notifications-banner__text strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.app-body .notification-request__name__display-name,
|
||||
.app-body .notification-request__name {
|
||||
color: var(--color-content-fg);
|
||||
letter-spacing: unset;
|
||||
}
|
||||
.app-body .notification-request {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* 📋 Lists tab */
|
||||
.app-body .column-inline-form {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
|
|
@ -5106,11 +5186,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
padding: 0 5px 12px 5px;
|
||||
}
|
||||
.app-body .account--panel__button .icon-button {
|
||||
width: 100%;
|
||||
}
|
||||
.app-body .account--panel__button .icon-button,
|
||||
.app-body .notification-request__actions .icon-button {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
transition: all .3s;
|
||||
border: 0;
|
||||
}
|
||||
.app-body .account--panel button .icon-check {
|
||||
background-image: var(--icon-check);
|
||||
|
|
@ -5118,11 +5202,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .account--panel button:is(:active, :focus, :hover) .icon-check {
|
||||
background-image: var(--icon-check-inv);
|
||||
}
|
||||
.app-body .account--panel__button:first-child .icon-button {
|
||||
.app-body .account--panel__button:first-child .icon-button,
|
||||
.app-body .notification-request__actions .icon-button:last-child {
|
||||
background-color: var(--color-confirm-bg);
|
||||
color: var(--color-confirm-fg);
|
||||
}
|
||||
.app-body .account--panel__button:first-child .icon-button:is(:hover, :active) {
|
||||
.app-body .account--panel__button:first-child .icon-button:is(:hover, :active),
|
||||
.app-body .notification-request__actions .icon-button:last-child:is(:hover, :active) {
|
||||
background-color: var(--color-confirm);
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
.app-body .account--panel button .icon-times {
|
||||
background-image: var(--icon-reject);
|
||||
|
|
@ -5130,11 +5218,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .account--panel button:is(:active, :focus, :hover) .icon-times {
|
||||
background-image: var(--icon-reject-inv);
|
||||
}
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button {
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button,
|
||||
.app-body .notification-request__actions .icon-button:first-child {
|
||||
background-color: var(--color-reject-bg);
|
||||
color: var(--color-reject);
|
||||
}
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) {
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active),
|
||||
.app-body .notification-request__actions .icon-button:first-child:is(:hover, :active) {
|
||||
background-color: var(--color-reject);
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
@media screen and (max-width:1174px) {
|
||||
.app-body #Follow-requests + .column-back-button--slim .column-back-button {
|
||||
|
|
|
|||
|
|
@ -77,6 +77,8 @@
|
|||
|
||||
--color-lines: #343434;
|
||||
--color-lines-translucent: rgba(255, 255, 255, .15);
|
||||
|
||||
--color-confirm-fg: var(--color-confirm);
|
||||
}
|
||||
}
|
||||
:root {
|
||||
|
|
@ -1353,7 +1355,8 @@ body.app-body {
|
|||
a.account__display-name
|
||||
):is(:active, :focus, :hover)
|
||||
.display-name strong,
|
||||
.app-body .status__prepend .status__display-name:is(:active, :focus, :hover) strong {
|
||||
.app-body .status__prepend .status__display-name:is(:active, :focus, :hover) strong,
|
||||
.app-body a.notification-request__link:is(:active, :focus, :hover) .notification-request__name__display-name strong {
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: currentColor;
|
||||
text-decoration-thickness: 2px;
|
||||
|
|
@ -2188,7 +2191,8 @@ body.app-body {
|
|||
display: none;
|
||||
}
|
||||
.app-body .account__display-name strong,
|
||||
.app-body .status__display-name strong {
|
||||
.app-body .status__display-name strong,
|
||||
.app-body .notification-request__name__display-name strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.app-body .status {
|
||||
|
|
@ -2486,6 +2490,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
}
|
||||
.app-body .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
.app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */
|
||||
border-bottom: 1px solid var(--color-lines);
|
||||
|
|
@ -3247,6 +3252,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.app-body .column-back-button {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.app-body .column-header__button,
|
||||
.app-body .column-header__back-button {
|
||||
background-color: transparent;
|
||||
|
|
@ -3266,6 +3274,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
transform: scale(1.1);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.app-body .column-header__buttons .column-header__button:has(> .icon:only-child) {
|
||||
width: 42px;
|
||||
}
|
||||
.app-body .column-header.active .column-header__icon {
|
||||
color: var(--color-accent);
|
||||
text-shadow: none;
|
||||
|
|
@ -3318,29 +3329,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .column-back-button__icon {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span {
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span,
|
||||
.app-body .column-header__back-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span::before {
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span::before,
|
||||
.app-body .column-header__back-button:has(> svg:last-child)::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: -35px;
|
||||
right: -12px;
|
||||
bottom: -11px;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
top: 4px;
|
||||
z-index: -1;
|
||||
top: -10px;
|
||||
border-radius: 8px;
|
||||
background-color: transparent;
|
||||
transition: all .3s;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):hover span::before {
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span::before {
|
||||
left: -35px;
|
||||
right: -12px;
|
||||
bottom: -11px;
|
||||
top: -10px;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):hover span::before,
|
||||
.app-body .column-header__back-button:has(> svg:last-child):hover::before {
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):active span::before {
|
||||
.app-body :is(.column-header__back-button, .column-back-button):active span::before,
|
||||
.app-body .column-header__back-button:has(> svg:last-child):active::before {
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
|
|
@ -3387,7 +3407,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
padding-left: 0;
|
||||
}
|
||||
.app-body .column-header .column-header__back-button {
|
||||
padding-right: 16px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.app-body .column-header > button,
|
||||
.app-body .column-header .column-header__back-button {
|
||||
|
|
@ -4852,7 +4872,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.status__action-bar {
|
||||
display: none;
|
||||
}
|
||||
.app-body .account {
|
||||
.app-body .account,
|
||||
.app-body .notification-request {
|
||||
background-color: var(--color-content-bg);
|
||||
border-bottom: 2px solid var(--color-content-secondary-bg);
|
||||
padding-left: 22px;
|
||||
|
|
@ -4960,6 +4981,65 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
.app-body .filtered-notifications-banner {
|
||||
background-color: var(--color-content-bg);
|
||||
color: var(--color-accent);
|
||||
border: 0;
|
||||
position: relative;
|
||||
padding: 25px;
|
||||
border-left: 1px solid var(--color-lines);
|
||||
border-right: 1px solid var(--color-lines);
|
||||
}
|
||||
.app-body .filtered-notifications-banner::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
content: " ";
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
border-radius: 8px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.app-body .filtered-notifications-banner:is(:active, :hover, :focus)::before {
|
||||
background-color: color-mix(in srgb, var(--color-accent), transparent 88%);
|
||||
}
|
||||
.app-body .filtered-notifications-banner:hover::before {
|
||||
left: 6px;
|
||||
right: 6px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
.app-body .filtered-notifications-banner:active::before {
|
||||
transform: scale(.98);
|
||||
}
|
||||
.app-body .filtered-notifications-banner > * {
|
||||
z-index: 1;
|
||||
}
|
||||
.app-body .filtered-notifications-banner .filtered-notifications-banner__badge,
|
||||
.app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge,
|
||||
.app-body .notification-request__name .filtered-notifications-banner__badge {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-fg);
|
||||
border-radius: 50px;
|
||||
}
|
||||
.app-body .filtered-notifications-banner__text {
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body .filtered-notifications-banner__text strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.app-body .notification-request__name__display-name,
|
||||
.app-body .notification-request__name {
|
||||
color: var(--color-content-fg);
|
||||
letter-spacing: unset;
|
||||
}
|
||||
.app-body .notification-request {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* 📋 Lists tab */
|
||||
.app-body .column-inline-form {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
|
|
@ -5106,11 +5186,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
padding: 0 5px 12px 5px;
|
||||
}
|
||||
.app-body .account--panel__button .icon-button {
|
||||
width: 100%;
|
||||
}
|
||||
.app-body .account--panel__button .icon-button,
|
||||
.app-body .notification-request__actions .icon-button {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
transition: all .3s;
|
||||
border: 0;
|
||||
}
|
||||
.app-body .account--panel button .icon-check {
|
||||
background-image: var(--icon-check);
|
||||
|
|
@ -5118,11 +5202,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .account--panel button:is(:active, :focus, :hover) .icon-check {
|
||||
background-image: var(--icon-check-inv);
|
||||
}
|
||||
.app-body .account--panel__button:first-child .icon-button {
|
||||
.app-body .account--panel__button:first-child .icon-button,
|
||||
.app-body .notification-request__actions .icon-button:last-child {
|
||||
background-color: var(--color-confirm-bg);
|
||||
color: var(--color-confirm-fg);
|
||||
}
|
||||
.app-body .account--panel__button:first-child .icon-button:is(:hover, :active) {
|
||||
.app-body .account--panel__button:first-child .icon-button:is(:hover, :active),
|
||||
.app-body .notification-request__actions .icon-button:last-child:is(:hover, :active) {
|
||||
background-color: var(--color-confirm);
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
.app-body .account--panel button .icon-times {
|
||||
background-image: var(--icon-reject);
|
||||
|
|
@ -5130,11 +5218,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .account--panel button:is(:active, :focus, :hover) .icon-times {
|
||||
background-image: var(--icon-reject-inv);
|
||||
}
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button {
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button,
|
||||
.app-body .notification-request__actions .icon-button:first-child {
|
||||
background-color: var(--color-reject-bg);
|
||||
color: var(--color-reject);
|
||||
}
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) {
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active),
|
||||
.app-body .notification-request__actions .icon-button:first-child:is(:hover, :active) {
|
||||
background-color: var(--color-reject);
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
@media screen and (max-width:1174px) {
|
||||
.app-body #Follow-requests + .column-back-button--slim .column-back-button {
|
||||
|
|
|
|||
128
TangerineUI.css
128
TangerineUI.css
|
|
@ -77,6 +77,8 @@
|
|||
|
||||
--color-lines: #343434;
|
||||
--color-lines-translucent: rgba(255, 255, 255, .15);
|
||||
|
||||
--color-confirm-fg: var(--color-confirm);
|
||||
}
|
||||
}
|
||||
:root {
|
||||
|
|
@ -1353,7 +1355,8 @@ body.app-body {
|
|||
a.account__display-name
|
||||
):is(:active, :focus, :hover)
|
||||
.display-name strong,
|
||||
.app-body .status__prepend .status__display-name:is(:active, :focus, :hover) strong {
|
||||
.app-body .status__prepend .status__display-name:is(:active, :focus, :hover) strong,
|
||||
.app-body a.notification-request__link:is(:active, :focus, :hover) .notification-request__name__display-name strong {
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: currentColor;
|
||||
text-decoration-thickness: 2px;
|
||||
|
|
@ -2188,7 +2191,8 @@ body.app-body {
|
|||
display: none;
|
||||
}
|
||||
.app-body .account__display-name strong,
|
||||
.app-body .status__display-name strong {
|
||||
.app-body .status__display-name strong,
|
||||
.app-body .notification-request__name__display-name strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.app-body .status {
|
||||
|
|
@ -2486,6 +2490,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
}
|
||||
.app-body .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
.app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */
|
||||
border-bottom: 1px solid var(--color-lines);
|
||||
|
|
@ -3247,6 +3252,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.app-body .column-back-button {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.app-body .column-header__button,
|
||||
.app-body .column-header__back-button {
|
||||
background-color: transparent;
|
||||
|
|
@ -3266,6 +3274,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
transform: scale(1.1);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.app-body .column-header__buttons .column-header__button:has(> .icon:only-child) {
|
||||
width: 42px;
|
||||
}
|
||||
.app-body .column-header.active .column-header__icon {
|
||||
color: var(--color-accent);
|
||||
text-shadow: none;
|
||||
|
|
@ -3318,29 +3329,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .column-back-button__icon {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span {
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span,
|
||||
.app-body .column-header__back-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span::before {
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span::before,
|
||||
.app-body .column-header__back-button:has(> svg:last-child)::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: -35px;
|
||||
right: -12px;
|
||||
bottom: -11px;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
top: 4px;
|
||||
z-index: -1;
|
||||
top: -10px;
|
||||
border-radius: 8px;
|
||||
background-color: transparent;
|
||||
transition: all .3s;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):hover span::before {
|
||||
.app-body :is(.column-header__back-button, .column-back-button) span::before {
|
||||
left: -35px;
|
||||
right: -12px;
|
||||
bottom: -11px;
|
||||
top: -10px;
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):hover span::before,
|
||||
.app-body .column-header__back-button:has(> svg:last-child):hover::before {
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
.app-body :is(.column-header__back-button, .column-back-button):active span::before {
|
||||
.app-body :is(.column-header__back-button, .column-back-button):active span::before,
|
||||
.app-body .column-header__back-button:has(> svg:last-child):active::before {
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
|
|
@ -3387,7 +3407,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
padding-left: 0;
|
||||
}
|
||||
.app-body .column-header .column-header__back-button {
|
||||
padding-right: 16px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.app-body .column-header > button,
|
||||
.app-body .column-header .column-header__back-button {
|
||||
|
|
@ -4852,7 +4872,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.status__action-bar {
|
||||
display: none;
|
||||
}
|
||||
.app-body .account {
|
||||
.app-body .account,
|
||||
.app-body .notification-request {
|
||||
background-color: var(--color-content-bg);
|
||||
border-bottom: 2px solid var(--color-content-secondary-bg);
|
||||
padding-left: 22px;
|
||||
|
|
@ -4960,6 +4981,65 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
.app-body .filtered-notifications-banner {
|
||||
background-color: var(--color-content-bg);
|
||||
color: var(--color-accent);
|
||||
border: 0;
|
||||
position: relative;
|
||||
padding: 25px;
|
||||
border-left: 1px solid var(--color-lines);
|
||||
border-right: 1px solid var(--color-lines);
|
||||
}
|
||||
.app-body .filtered-notifications-banner::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
content: " ";
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
border-radius: 8px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.app-body .filtered-notifications-banner:is(:active, :hover, :focus)::before {
|
||||
background-color: color-mix(in srgb, var(--color-accent), transparent 88%);
|
||||
}
|
||||
.app-body .filtered-notifications-banner:hover::before {
|
||||
left: 6px;
|
||||
right: 6px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
.app-body .filtered-notifications-banner:active::before {
|
||||
transform: scale(.98);
|
||||
}
|
||||
.app-body .filtered-notifications-banner > * {
|
||||
z-index: 1;
|
||||
}
|
||||
.app-body .filtered-notifications-banner .filtered-notifications-banner__badge,
|
||||
.app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge,
|
||||
.app-body .notification-request__name .filtered-notifications-banner__badge {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-fg);
|
||||
border-radius: 50px;
|
||||
}
|
||||
.app-body .filtered-notifications-banner__text {
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body .filtered-notifications-banner__text strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.app-body .notification-request__name__display-name,
|
||||
.app-body .notification-request__name {
|
||||
color: var(--color-content-fg);
|
||||
letter-spacing: unset;
|
||||
}
|
||||
.app-body .notification-request {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* 📋 Lists tab */
|
||||
.app-body .column-inline-form {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
|
|
@ -5106,11 +5186,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
padding: 0 5px 12px 5px;
|
||||
}
|
||||
.app-body .account--panel__button .icon-button {
|
||||
width: 100%;
|
||||
}
|
||||
.app-body .account--panel__button .icon-button,
|
||||
.app-body .notification-request__actions .icon-button {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
transition: all .3s;
|
||||
border: 0;
|
||||
}
|
||||
.app-body .account--panel button .icon-check {
|
||||
background-image: var(--icon-check);
|
||||
|
|
@ -5118,11 +5202,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .account--panel button:is(:active, :focus, :hover) .icon-check {
|
||||
background-image: var(--icon-check-inv);
|
||||
}
|
||||
.app-body .account--panel__button:first-child .icon-button {
|
||||
.app-body .account--panel__button:first-child .icon-button,
|
||||
.app-body .notification-request__actions .icon-button:last-child {
|
||||
background-color: var(--color-confirm-bg);
|
||||
color: var(--color-confirm-fg);
|
||||
}
|
||||
.app-body .account--panel__button:first-child .icon-button:is(:hover, :active) {
|
||||
.app-body .account--panel__button:first-child .icon-button:is(:hover, :active),
|
||||
.app-body .notification-request__actions .icon-button:last-child:is(:hover, :active) {
|
||||
background-color: var(--color-confirm);
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
.app-body .account--panel button .icon-times {
|
||||
background-image: var(--icon-reject);
|
||||
|
|
@ -5130,11 +5218,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .account--panel button:is(:active, :focus, :hover) .icon-times {
|
||||
background-image: var(--icon-reject-inv);
|
||||
}
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button {
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button,
|
||||
.app-body .notification-request__actions .icon-button:first-child {
|
||||
background-color: var(--color-reject-bg);
|
||||
color: var(--color-reject);
|
||||
}
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) {
|
||||
.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active),
|
||||
.app-body .notification-request__actions .icon-button:first-child:is(:hover, :active) {
|
||||
background-color: var(--color-reject);
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
@media screen and (max-width:1174px) {
|
||||
.app-body #Follow-requests + .column-back-button--slim .column-back-button {
|
||||
|
|
|
|||
Loading…
Reference in a new issue