mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-22 09:15:33 +03:00
Code Issues Projects Releases Packages Wiki Activity

No more sticky and blur for multi-column styles

Browse source
This commit is contained in:
Lim Chee Aun 2023-04-20 16:15:26 +08:00
parent 5dc3603795
commit 0d0e091f35
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/app.css
View file

@ -1760,7 +1760,12 @@ ul.link-list li a .icon {
box-shadow: -1px 0 var(--bg-color), -2px 0 var(--drop-shadow-color), box-shadow: -1px 0 var(--bg-color), -2px 0 var(--drop-shadow-color),
-3px 0 var(--bg-color); -3px 0 var(--bg-color);
} }
#columns:has(> :nth-child(3)) > *:nth-child(even) { #columns:has(> :nth-child(3)) > *:nth-child(even),
#columns:has(> :nth-child(3))
> *:nth-child(even)
.timeline-deck
> header
.header-grid {
background-color: var(--bg-blur-color); background-color: var(--bg-blur-color);
} }
#columns .header-grid input { #columns .header-grid input {
@ -1778,7 +1783,7 @@ ul.link-list li a .icon {
#columns { #columns {
/* gap: 16px; */ /* gap: 16px; */
/* padding: 0 16px; */ /* padding: 0 16px; */
background-color: var(--bg-blur-color); /* background-color: var(--bg-faded-color); */
height: 100vh; height: 100vh;
height: 100dvh; height: 100dvh;
justify-content: stretch; justify-content: stretch;
@ -1790,17 +1795,17 @@ ul.link-list li a .icon {
/* border-radius: 16px; */ /* border-radius: 16px; */
/* box-shadow: -4px 0 16px -8px var(--drop-shadow-color); */ /* box-shadow: -4px 0 16px -8px var(--drop-shadow-color); */
height: unset; height: unset;
background-color: var(--bg-faded-blur-color); /* background-color: var(--bg-faded-blur-color); */
backdrop-filter: blur(16px) saturate(3); /* backdrop-filter: blur(16px) saturate(3); */
/* background-image: linear-gradient( /* background-image: linear-gradient(
160deg, 160deg,
transparent 20%, transparent 20%,
var(--bg-color), var(--bg-color),
transparent 75% transparent 75%
); */ ); */
position: sticky; /* position: sticky;
left: 0; left: 0; */
transition: all 0.3s ease-out; /* transition: all 0.3s ease-out; */
} }
/* #columns > *:nth-child(2) { /* #columns > *:nth-child(2) {
left: 5%; left: 5%;