+
A fully user-customizable desktop shell
Based on QtQuick
diff --git a/src/styles/docs/docs.css b/src/styles/docs/docs.css
index 5589aab..959d80c 100644
--- a/src/styles/docs/docs.css
+++ b/src/styles/docs/docs.css
@@ -81,6 +81,7 @@ ul {
}
@media (min-width: 768px) {
+
.docs,
.docslayout-root {
gap: 0.648rem;
@@ -88,7 +89,8 @@ ul {
.docslayout-root {
margin-left: calc(1.618rem + 260px);
- padding-bottom: 3rem;
+ display: flex;
+ flex-direction: row;
}
.docs-content {
@@ -109,6 +111,11 @@ ul {
}
@media (min-width: 1280px) {
+ .docs {
+ display: flex;
+ flex-direction: row;
+ }
+
.docs-content {
& section {
max-width: 45svw;
@@ -116,7 +123,7 @@ ul {
}
.docslayout-root {
- margin-inline: calc(10svw + 260px);
+ margin-inline: 15svw;
}
.docslayout-inner {
diff --git a/src/styles/docs/nav/nav.css b/src/styles/docs/nav/nav.css
index 4bc8c86..8092271 100644
--- a/src/styles/docs/nav/nav.css
+++ b/src/styles/docs/nav/nav.css
@@ -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;
diff --git a/src/styles/docs/nav/search.css b/src/styles/docs/nav/search.css
index 6272a10..f0c5b08 100644
--- a/src/styles/docs/nav/search.css
+++ b/src/styles/docs/nav/search.css
@@ -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;
diff --git a/src/styles/docs/toc/toc.css b/src/styles/docs/toc/toc.css
index 35e1c52..0107f58 100644
--- a/src/styles/docs/toc/toc.css
+++ b/src/styles/docs/toc/toc.css
@@ -100,7 +100,7 @@
.toc-wrapper {
background-color: transparent;
display: block;
- position: fixed;
+ position: sticky;
top: 5rem;
right: 8svw;
width: 18rem;
diff --git a/src/styles/global.css b/src/styles/global.css
index 1601a76..e17072b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -113,8 +113,8 @@ html.dark {
}
footer {
- position: absolute;
- bottom: 0;
+ position: sticky;
+ bottom: -3.5rem;
z-index: 10;
width: 100%;
height: 3.5rem;