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

Post timestamp overflows with a neat gradient

Browse source
This commit is contained in:
Niléane 2024-01-25 23:39:02 +01:00
commit 4ff40d6da5
No known key found for this signature in database
3 changed files with 75 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

28
TangerineUI-cherry.css
View file

@ -1981,9 +1981,8 @@ body.app-body {
align-items: start; align-items: start;
} }
.app-body .status__info .status__display-name { .app-body .status__info .status__display-name {
overflow: hidden; overflow: visible;
align-items: start; align-items: start;
height: 46px;
} }
.app-body .status__info .status__display-name .display-name bdi, .app-body .status__info .status__display-name .display-name bdi,
.app-body .status__info .status__display-name .display-name__account { .app-body .status__info .status__display-name .display-name__account {
@ -1996,8 +1995,31 @@ body.app-body {
.app-body .status__relative-time { .app-body .status__relative-time {
height: 22px; height: 22px;
color: var(--color-content-fg); color: var(--color-content-fg);
opacity: .6;
display: flex; display: flex;
position: absolute;
inset-inline-end: 20px;
z-index: 1;
}
.app-body .status__relative-time > * {
opacity: .6;
}
.app-body .status__relative-time::before,
.app-body .status__relative-time::after {
position: absolute;
content: " ";
display: block;
height: 100%;
z-index: -1;
}
.app-body .status__relative-time::before {
width: 20px;
inset-inline-start: -20px;
background: linear-gradient(90deg, transparent, var(--color-post-bg));
}
.app-body .status__relative-time::after {
inset-inline-start: 0;
inset-inline-end: 0;
background-color: var(--color-post-bg);
} }
.app-body .status__relative-time time + abbr { .app-body .status__relative-time time + abbr {
display: inline-block; display: inline-block;

28
TangerineUI-purple.css
View file

@ -1981,9 +1981,8 @@ body.app-body {
align-items: start; align-items: start;
} }
.app-body .status__info .status__display-name { .app-body .status__info .status__display-name {
overflow: hidden; overflow: visible;
align-items: start; align-items: start;
height: 46px;
} }
.app-body .status__info .status__display-name .display-name bdi, .app-body .status__info .status__display-name .display-name bdi,
.app-body .status__info .status__display-name .display-name__account { .app-body .status__info .status__display-name .display-name__account {
@ -1996,8 +1995,31 @@ body.app-body {
.app-body .status__relative-time { .app-body .status__relative-time {
height: 22px; height: 22px;
color: var(--color-content-fg); color: var(--color-content-fg);
opacity: .6;
display: flex; display: flex;
position: absolute;
inset-inline-end: 20px;
z-index: 1;
}
.app-body .status__relative-time > * {
opacity: .6;
}
.app-body .status__relative-time::before,
.app-body .status__relative-time::after {
position: absolute;
content: " ";
display: block;
height: 100%;
z-index: -1;
}
.app-body .status__relative-time::before {
width: 20px;
inset-inline-start: -20px;
background: linear-gradient(90deg, transparent, var(--color-post-bg));
}
.app-body .status__relative-time::after {
inset-inline-start: 0;
inset-inline-end: 0;
background-color: var(--color-post-bg);
} }
.app-body .status__relative-time time + abbr { .app-body .status__relative-time time + abbr {
display: inline-block; display: inline-block;

28
TangerineUI.css
View file

@ -1981,9 +1981,8 @@ body.app-body {
align-items: start; align-items: start;
} }
.app-body .status__info .status__display-name { .app-body .status__info .status__display-name {
overflow: hidden; overflow: visible;
align-items: start; align-items: start;
height: 46px;
} }
.app-body .status__info .status__display-name .display-name bdi, .app-body .status__info .status__display-name .display-name bdi,
.app-body .status__info .status__display-name .display-name__account { .app-body .status__info .status__display-name .display-name__account {
@ -1996,8 +1995,31 @@ body.app-body {
.app-body .status__relative-time { .app-body .status__relative-time {
height: 22px; height: 22px;
color: var(--color-content-fg); color: var(--color-content-fg);
opacity: .6;
display: flex; display: flex;
position: absolute;
inset-inline-end: 20px;
z-index: 1;
}
.app-body .status__relative-time > * {
opacity: .6;
}
.app-body .status__relative-time::before,
.app-body .status__relative-time::after {
position: absolute;
content: " ";
display: block;
height: 100%;
z-index: -1;
}
.app-body .status__relative-time::before {
width: 20px;
inset-inline-start: -20px;
background: linear-gradient(90deg, transparent, var(--color-post-bg));
}
.app-body .status__relative-time::after {
inset-inline-start: 0;
inset-inline-end: 0;
background-color: var(--color-post-bg);
} }
.app-body .status__relative-time time + abbr { .app-body .status__relative-time time + abbr {
display: inline-block; display: inline-block;