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

fixed styling for search bar, fixed positioning for widescreens(needs testing), restricted pagefind indexing, made titles top weight, added root module description

Browse source
This commit is contained in:
Xanazf 2024-10-11 16:05:44 +03:00
parent ab44ad8128
commit b65b93b5eb
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
11 changed files with 67 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -103,13 +103,12 @@
.nav-wrapper {
display: block;
width: 250px;
position: fixed;
top: 5rem;
bottom: 3rem;
position: sticky;
top: 4rem;
left: 1.618rem;
flex-shrink: 0;
overflow: scroll;
max-height: 90svh;
max-height: calc(100svh - 8rem);
scrollbar-width: none;
-ms-overflow-style: none;
z-index: 10;

34
src/styles/docs/nav/search.css
View file

@ -19,6 +19,12 @@
#qs_search .pagefind-ui__form::before {
--pagefind-ui-text: hsl(0 0 65);
opacity: 1;
outline: unset;
}
#qs_search .pagefind-ui--reset *:where( :not(html, iframe, canvas, img, svg, video):not(svg *,
symbol *)) {
outline: unset;
}
#qs_search .pagefind-ui__search-input {
@ -47,7 +53,7 @@
content: "";
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat;
background-color: hsl(var(--accent-600));
background-color: hsl(0 25 45);
display: block;
width: 100%;
height: 100%;
@ -140,7 +146,7 @@
inset-block: 0;
inset-inline-start: var(--search-tree-diagram-inline-start);
width: var(--search-tree-diagram-size);
background: hsl(var(--blue) 5 25);
background: hsl(var(--blue) 10 30);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
}
@ -161,6 +167,26 @@
overflow-wrap: anywhere;
}
#qs_search .pagefind-ui__result-inner>.pagefind-ui__result-excerpt {
display: inline-block;
position: relative;
background: hsl(0 0 10);
padding: var(--search-result-nested-pad-block) var(--search-result-pad-inline-end);
padding-inline-start: var(--search-result-pad-inline-start);
margin-top: unset;
&::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: var(--search-tree-diagram-inline-start);
width: var(--search-tree-diagram-size);
background: hsl(var(--blue) 10 30);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
}
}
#qs_search mark {
color: hsl(var(--blue) 15 60);
background-color: transparent;
@ -325,14 +351,14 @@ button[data-close-modal] {
}
}
html.dark button[data-open-modal] {
html.dark button[data-open-modal] {
background-color: hsla(var(--blue) 15 15 / 0.5);
color: hsl(var(--blue) 40 65);
&:hover {
color: hsl(var(--blue) 60 85);
}
}
}
#qs_search {
--search-cancel-space: 0px;