nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Change from line-clamp to max-height

Browse source 
-webkit-line-clamp doesn't work on multiple <p>s on Mobile Safari
This commit is contained in:
Lim Chee Aun 2022-12-17 23:01:34 +08:00
parent 4bc4742e8c
commit 58fe7a46f4
1 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/status.css
View file

@ -175,28 +175,35 @@
margin-top: 8px;
}
.timeline-deck .status .content {
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
max-height: 50vh;
max-height: 50dvh;
overflow: hidden;
position: relative;
}
.timeline-deck .status .content.truncated {
mask-image: linear-gradient(to top, transparent 0.5em, black 1.5em);
}
.timeline-deck .status .content.truncated:after {
content: attr(data-read-more);
line-height: 1;
display: inline-block;
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
color: var(--link-color);
background-color: var(--link-faded-color);
backdrop-filter: blur(4px) brightness(2);
padding: 0.5em 0.5em 0.5em 2em;
border-radius: 0 1em 1em 0;
inset-block-end: 1em;
left: 50%;
transform: translateX(-50%);
color: var(--text-color);
background-color: var(--bg-faded-color);
border: 2px solid var(--link-light-color);
padding: 0.5em 1em;
border-radius: 10em;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
mask-image: linear-gradient(to right, transparent, black 2em);
box-shadow: 0 0 0 2px var(--bg-color), 0 0 10px var(--bg-color),
0 0 10px var(--bg-color), 0 0 10px var(--bg-color);
}
.timeline-deck .status .content.truncated:hover:after {
border-color: var(--link-color);
}
.status .content p {
margin-block: 0.75em;