mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-24 02:05:39 +03:00
Code Issues Projects Releases Packages Wiki Activity

Experimental comment threads making use of more space

Browse source
This commit is contained in:
Lim Chee Aun 2024-10-28 18:49:24 +08:00
parent b8f8271645
commit 058cf05805
1 changed files with 46 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/app.css
View file

@ -395,6 +395,51 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
:dir(rtl) & { :dir(rtl) & {
--line-curve: -45deg; --line-curve: -45deg;
} }
.descendant.thread:has(+ .descendant:not(.thread)):after {
position: absolute;
inset-inline-start: 10px;
bottom: 0;
content: '';
display: block;
width: calc(var(--line-start) + var(--line-width) - 10px);
/* background-color: var(--bg-color);
border-bottom: var(--line-width) dotted var(--comment-line-color); */
height: calc(var(--line-diameter) - var(--line-width));
background-color: var(--bg-color);
background-repeat: no-repeat;
background-image: linear-gradient(
transparent calc(var(--line-radius) - var(--line-width)),
var(--comment-line-color) calc(var(--line-radius) - var(--line-width))
var(--line-radius),
transparent var(--line-radius)
),
radial-gradient(
circle at bottom var(--forward),
transparent calc(var(--line-radius) - var(--line-width)),
var(--comment-line-color) calc(var(--line-radius) - var(--line-width))
var(--line-radius),
transparent var(--line-radius)
),
radial-gradient(
circle at top var(--backward),
transparent calc(var(--line-radius) - var(--line-width)),
var(--comment-line-color) calc(var(--line-radius) - var(--line-width))
var(--line-radius),
transparent var(--line-radius)
);
background-position: var(--line-radius) 0, bottom var(--backward),
top var(--forward);
background-size: calc(100% - var(--line-radius) * 2) auto,
var(--line-radius), var(--line-radius);
}
> li.hero:has(+ .descendant:not(.thread)),
> li.descendant:not(.thread) {
--thread-start: 10px;
--line-start: 10px;
--line-end: calc(var(--line-start) + var(--line-width));
}
} }
.timeline.contextual > li { .timeline.contextual > li {
background-image: linear-gradient( background-image: linear-gradient(
@ -427,7 +472,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
.timeline.contextual .timeline.contextual
> li.descendant:not(.thread) > li.descendant:not(.thread)
> :is(.status-link, .status-focus) { > :is(.status-link, .status-focus) {
padding-inline-start: 40px; padding-inline-start: var(--line-start);
} }
.timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) { .timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) {
background-color: var(--bg-color); background-color: var(--bg-color);