mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-21 16:55:25 +03: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 {
--default-line-start: 40px;
--thread-start: 40px;
--line-start: 40px;
--indent-large-start: 40px;
--indent-small-start: 10px;
--thread-start: var(--indent-small-start);
--line-start: var(--indent-small-start);
--line-width: 3px;
--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-radius: 10px;
--line-diameter: calc(var(--line-radius) * 2);
@ -398,7 +400,13 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
--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;
inset-inline-start: 10px;
bottom: 0;
@ -453,13 +461,6 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
background-size: var(--curves-radius);
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 {
background-image: linear-gradient(
@ -471,23 +472,23 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
transparent var(--line-end),
transparent
);
&.hero:not(:first-child, :last-child, :only-child) {
&.hero:not(:has(+ .thread), :first-child, :only-child, :last-child) {
background-image: linear-gradient(
var(--line-dir),
transparent,
transparent var(--line-start),
var(--comment-line-color) var(--line-start),
var(--comment-line-color) var(--line-end),
transparent var(--line-end),
transparent var(--indent-small-start),
var(--comment-line-color) var(--indent-small-start),
var(--comment-line-color) var(--indent-small-end),
transparent var(--indent-small-end),
transparent
),
linear-gradient(
var(--line-dir),
transparent,
transparent var(--default-line-start),
var(--comment-line-color) var(--default-line-start),
var(--comment-line-color) var(--default-line-end),
transparent var(--default-line-end),
transparent var(--indent-large-start),
var(--comment-line-color) var(--indent-large-start),
var(--comment-line-color) var(--indent-large-end),
transparent var(--indent-large-end),
transparent
);
background-size: 100% 50%;