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

Accented background on DMs

Browse source
This commit is contained in:
Niléane 2024-03-13 00:59:06 +01:00
commit f4119f51ae
No known key found for this signature in database
3 changed files with 30 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

10
TangerineUI-cherry.css
View file

@ -2246,6 +2246,7 @@ body.app-body {
width: 20px; width: 20px;
inset-inline-start: -20px; inset-inline-start: -20px;
background: linear-gradient(90deg, transparent, var(--color-post-bg)); background: linear-gradient(90deg, transparent, var(--color-post-bg));
transition: all .2s;
} }
.app-body .status__relative-time::after { .app-body .status__relative-time::after {
inset-inline-start: 0; inset-inline-start: 0;
@ -3109,12 +3110,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
display: none; display: none;
} }
.app-body .status__wrapper.status__wrapper-direct {
--color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%);
}
.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover),
.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar {
--color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 88%);
}
.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend {
background-color: var(--color-accent); background-color: var(--color-accent);
margin-inline-start: 10px; margin-inline-start: 10px;
z-index: 3; z-index: 3;
position: relative; position: relative;
outline: 5px solid var(--color-post-bg); outline: 5px solid var(--color-post-bg);
transition: all .2s;
} }
.app-body :is(.detailed-status__wrapper-direct) .status__prepend { .app-body :is(.detailed-status__wrapper-direct) .status__prepend {
margin-inline-start: 0; margin-inline-start: 0;

10
TangerineUI-purple.css
View file

@ -2246,6 +2246,7 @@ body.app-body {
width: 20px; width: 20px;
inset-inline-start: -20px; inset-inline-start: -20px;
background: linear-gradient(90deg, transparent, var(--color-post-bg)); background: linear-gradient(90deg, transparent, var(--color-post-bg));
transition: all .2s;
} }
.app-body .status__relative-time::after { .app-body .status__relative-time::after {
inset-inline-start: 0; inset-inline-start: 0;
@ -3109,12 +3110,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
display: none; display: none;
} }
.app-body .status__wrapper.status__wrapper-direct {
--color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%);
}
.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover),
.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar {
--color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 88%);
}
.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend {
background-color: var(--color-accent); background-color: var(--color-accent);
margin-inline-start: 10px; margin-inline-start: 10px;
z-index: 3; z-index: 3;
position: relative; position: relative;
outline: 5px solid var(--color-post-bg); outline: 5px solid var(--color-post-bg);
transition: all .2s;
} }
.app-body :is(.detailed-status__wrapper-direct) .status__prepend { .app-body :is(.detailed-status__wrapper-direct) .status__prepend {
margin-inline-start: 0; margin-inline-start: 0;

10
TangerineUI.css
View file

@ -2246,6 +2246,7 @@ body.app-body {
width: 20px; width: 20px;
inset-inline-start: -20px; inset-inline-start: -20px;
background: linear-gradient(90deg, transparent, var(--color-post-bg)); background: linear-gradient(90deg, transparent, var(--color-post-bg));
transition: all .2s;
} }
.app-body .status__relative-time::after { .app-body .status__relative-time::after {
inset-inline-start: 0; inset-inline-start: 0;
@ -3109,12 +3110,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
display: none; display: none;
} }
.app-body .status__wrapper.status__wrapper-direct {
--color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%);
}
.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover),
.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar {
--color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 88%);
}
.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend {
background-color: var(--color-accent); background-color: var(--color-accent);
margin-inline-start: 10px; margin-inline-start: 10px;
z-index: 3; z-index: 3;
position: relative; position: relative;
outline: 5px solid var(--color-post-bg); outline: 5px solid var(--color-post-bg);
transition: all .2s;
} }
.app-body :is(.detailed-status__wrapper-direct) .status__prepend { .app-body :is(.detailed-status__wrapper-direct) .status__prepend {
margin-inline-start: 0; margin-inline-start: 0;