Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-22 16:46:28 +01:00
Code Issues Projects Releases Packages Wiki Activity

Rewrite line indent style logic

Browse source 
I know, it's still messy
This commit is contained in:
Lim Chee Aun 2024-10-31 18:47:07 +08:00
parent c1f1fb965c
commit cbfd4ef333
1 changed files with 22 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/app.css
View file

@ -381,12 +381,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
} }
.timeline.contextual { .timeline.contextual {
--default-line-start: 40px; --indent-large-start: 40px;
--thread-start: 40px; --indent-small-start: 10px;
--line-start: 40px; --thread-start: var(--indent-small-start);
--line-start: var(--indent-small-start);
--line-width: 3px; --line-width: 3px;
--line-end: calc(var(--line-start) + var(--line-width)); --line-end: calc(var(--line-start) + var(--line-width));
--default-line-end: calc(var(--default-line-start) + var(--line-width)); --indent-large-end: calc(var(--indent-large-start) + var(--line-width));
--indent-small-end: calc(var(--indent-small-start) + var(--line-width));
--line-margin-end: 16px; --line-margin-end: 16px;
--line-radius: 10px; --line-radius: 10px;
--line-diameter: calc(var(--line-radius) * 2); --line-diameter: calc(var(--line-radius) * 2);
@ -398,7 +400,13 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
--line-curve: -45deg; --line-curve: -45deg;
} }
.descendant.thread:has(+ .descendant:not(.thread)):after { > li:is(.hero:has(+ .thread), .thread, .ancestor) {
--thread-start: var(--indent-large-start);
--line-start: var(--indent-large-start);
--line-end: calc(var(--line-start) + var(--line-width));
}
> li.descendant.thread:has(+ .descendant:not(.thread)):after {
position: absolute; position: absolute;
inset-inline-start: 10px; inset-inline-start: 10px;
bottom: 0; bottom: 0;
@ -453,13 +461,6 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
background-size: var(--curves-radius); background-size: var(--curves-radius);
background-position: top var(--backward), bottom var(--forward); background-position: top var(--backward), bottom var(--forward);
} }
> 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(
@ -471,23 +472,23 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
transparent var(--line-end), transparent var(--line-end),
transparent transparent
); );
&.hero:not(:first-child, :last-child, :only-child) { &.hero:not(:has(+ .thread), :first-child, :only-child, :last-child) {
background-image: linear-gradient( background-image: linear-gradient(
var(--line-dir), var(--line-dir),
transparent, transparent,
transparent var(--line-start), transparent var(--indent-small-start),
var(--comment-line-color) var(--line-start), var(--comment-line-color) var(--indent-small-start),
var(--comment-line-color) var(--line-end), var(--comment-line-color) var(--indent-small-end),
transparent var(--line-end), transparent var(--indent-small-end),
transparent transparent
), ),
linear-gradient( linear-gradient(
var(--line-dir), var(--line-dir),
transparent, transparent,
transparent var(--default-line-start), transparent var(--indent-large-start),
var(--comment-line-color) var(--default-line-start), var(--comment-line-color) var(--indent-large-start),
var(--comment-line-color) var(--default-line-end), var(--comment-line-color) var(--indent-large-end),
transparent var(--default-line-end), transparent var(--indent-large-end),
transparent transparent
); );
background-size: 100% 50%; background-size: 100% 50%;