Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 06:06:41 +01:00
Code Issues Projects Releases Packages 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; margin-top: 8px;
} }
.timeline-deck .status .content { .timeline-deck .status .content {
display: -webkit-box; max-height: 50vh;
-webkit-line-clamp: 10; max-height: 50dvh;
-webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
position: relative; 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 { .timeline-deck .status .content.truncated:after {
content: attr(data-read-more); content: attr(data-read-more);
line-height: 1; line-height: 1;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
inset-block-end: 0; inset-block-end: 1em;
inset-inline-end: 0; left: 50%;
color: var(--link-color); transform: translateX(-50%);
background-color: var(--link-faded-color); color: var(--text-color);
backdrop-filter: blur(4px) brightness(2); background-color: var(--bg-faded-color);
padding: 0.5em 0.5em 0.5em 2em; border: 2px solid var(--link-light-color);
border-radius: 0 1em 1em 0; padding: 0.5em 1em;
border-radius: 10em;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; 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 { .status .content p {
margin-block: 0.75em; margin-block: 0.75em;