quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

restyle left sidebar

Browse source 
Probably not final and missing mobile styling, but far more usable at
desktop sizes.
This commit is contained in:
outfoxxed 2024-10-12 00:23:23 -07:00
parent 492200a42b
commit 2ce79597b5
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
2 changed files with 34 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

106
src/styles/docs/nav/nav-tree.css
View file

@ -1,14 +1,12 @@
[data-scope="accordion"][data-part="root"] { [data-scope="accordion"][data-part="root"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.15em; gap: 0.15rem;
& [data-part="item"] { & [data-part="item"] {
padding: 6px; padding-top: 0.2rem;
padding-bottom: 0.2rem;
& [data-part="item"] { padding-left: 0.15rem;
padding-right: 0;
}
} }
} }
@ -19,43 +17,17 @@
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
font-weight: 600;
width: 100%; width: 100%;
height: 36px; height: 2.2rem;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 0.15em; gap: 0.25rem;
& p:has(a) { transition: background-color 0.2s ease;
text-overflow: ellipsis;
overflow: hidden;
padding-inline: 4px;
border-radius: 20px;
&:hover {
position: relative;
width: max-content;
padding: 4px;
overflow: scroll;
}
}
&::before {
content: "";
position: absolute;
border-radius: 6px;
z-index: -1;
inset: -0px;
/*border: 1px solid hsla(var(--green) 80 70 / 0.3);*/
border: 1px solid hsl(var(--accent-700));
transition: border-color 0.3s;
}
&:hover { &:hover {
&::before { background-color: hsl(var(--blue) 40 10);
border-color: hsla(var(--accent-500));
}
} }
} }
@ -101,8 +73,12 @@ html.dark .nav-shevron {
&>.arktree-item, &>.arktree-item,
[data-part="item"] { [data-part="item"] {
margin-left: 21px; margin-left: 1.2rem;
margin-block: 0.117rem; }
&>.arktree-item,
& [data-part="item-content"] {
margin-left: 1.8rem;
} }
& .arktree-item, & .arktree-item,
@ -110,36 +86,34 @@ html.dark .nav-shevron {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.15em; gap: 0.15em;
margin-left: 24px; padding: 0.4rem;
margin-top: 0.224em; margin: 0.4rem 0;
border-radius: 6px;
&::before { transition: background-color 0.2s ease;
content: "";
position: absolute;
bottom: 0;
height: 1px;
background: linear-gradient(to right,
hsla(var(--accent-400) / 0.5) var(--percent),
hsla(var(--accent-400) / 0) 75%);
animation: percentToZero 250ms ease-in-out forwards;
width: 0;
transition: width 0.25s;
}
&:hover::before { &:hover {
width: 100%; background-color: hsl(var(--blue) 40 10)
animation: percentToFifty 250ms ease-in-out forwards;
} }
&>a { &>a {
padding-top: 1em;
width: 100%; width: 100%;
margin-left: 0.2rem;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
} }
} }
& .arktree-item,
[data-part="item-content"]>div.__current-type-doc {
background-color: hsl(var(--blue) 40 13);
&>a {
color: hsl(var(--blue) 100 70);
}
}
} }
[data-scope="accordion"][data-part="item-content"][data-state="open"] { [data-scope="accordion"][data-part="item-content"][data-state="open"] {
@ -154,24 +128,10 @@ html.dark .nav-shevron {
color: hsl(var(--blue) 100 70); color: hsl(var(--blue) 100 70);
& [data-part="item-trigger"] a { & [data-part="item-trigger"] a {
color: hsl(var(--blue) 100 70) !important; color: hsl(var(--blue) 100 70);
} }
&>a { & [data-scope="accordion"][data-part="item-trigger"] {
&::before { background-color: hsl(var(--blue) 40 13);
content: "";
position: absolute;
bottom: 0;
height: 1px;
background: linear-gradient(to right,
hsla(var(--accent-400) / 0.5) var(--percent),
hsla(var(--accent-400) / 0) 100%);
animation: percentToZero 250ms ease-in-out forwards;
width: 100%;
}
&:hover::before {
animation: percentToFifty 250ms ease-in-out forwards;
}
} }
} }

3
src/styles/docs/nav/nav.css
View file

@ -102,10 +102,9 @@
.nav-wrapper { .nav-wrapper {
display: block; display: block;
width: 250px; width: 21rem;
position: sticky; position: sticky;
top: 4rem; top: 4rem;
left: 1.618rem;
flex-shrink: 0; flex-shrink: 0;
overflow: scroll; overflow: scroll;
max-height: calc(100svh - 8rem); max-height: calc(100svh - 8rem);