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

fix nav styles for configuration section and light theme

Browse source
This commit is contained in:
outfoxxed 2024-10-12 03:10:35 -07:00
parent 24d3b1bfd2
commit 2b1f9f3bb2
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
2 changed files with 20 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/styles/css-config/base.css
View file

@ -19,7 +19,7 @@ html {
--accent-400: var(--green) 90 57;
--accent-500: var(--green) 90 47;
--accent-600: var(--green) 88 40;
--accent-700: var(--green) 70 40;
--accent-700: var(--green) 70 40;
/* secondary */
--blue: 224;
@ -49,6 +49,10 @@ html {
--var-color: 190 78 70;
--var-link-color: 190 85 60;
--inner-param-color: 215 60 70;
--nav-hovered-bkg: var(--blue) 100 93;
--nav-selected-bkg: var(--blue) 100 90;
--nav-selected-text: var(--blue) 60 60;
--nav-indicator-bkg: var(--blue) 45 80;
}
html.dark {
@ -86,6 +90,10 @@ html.dark {
--var-color: 190 78 70;
--var-link-color: 190 85 60;
--inner-param-color: 215 60 70;
--nav-hovered-bkg: var(--blue) 40 10;
--nav-selected-bkg: var(--blue) 40 13;
--nav-selected-text: var(--blue) 100 70;
--nav-indicator-bkg: var(--blue) 30 30;
}
* {

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

@ -27,7 +27,7 @@
transition: background-color 0.2s ease;
&:hover {
background-color: hsl(var(--blue) 40 10);
background-color: hsl(var(--nav-hovered-bkg));
}
}
@ -43,14 +43,10 @@
margin-left: 3px;
&:hover {
background-color: hsl(var(--blue) 20 80);
background-color: hsl(var(--nav-indicator-bkg));
}
}
html.dark [data-scope="accordion"][data-part="item-indicator"]:hover {
background-color: hsl(var(--blue) 30 30);
}
.nav-shevron {
color: black;
}
@ -70,16 +66,7 @@ html.dark .nav-shevron {
[data-scope="accordion"][data-part="item-content"] {
--height: 709;
margin-block: 0.175rem;
&>.arktree-item,
[data-part="item"] {
margin-left: 1.2rem;
}
&>.arktree-item,
& [data-part="item-content"] {
margin-left: 1.8rem;
}
margin-left: 1.4rem;
& .arktree-item,
[data-part="item-content"]>div {
@ -93,7 +80,7 @@ html.dark .nav-shevron {
transition: background-color 0.2s ease;
&:hover {
background-color: hsl(var(--blue) 40 10)
background-color: hsl(var(--nav-hovered-bkg))
}
&>a {
@ -106,12 +93,12 @@ html.dark .nav-shevron {
}
}
& .arktree-item,
[data-part="item-content"]>div.__current-type-doc {
background-color: hsl(var(--blue) 40 13);
& .arktree-item.__current-type-doc,
[data-part="item-content"]>div.__current-type-doc {
background-color: hsl(var(--nav-selected-bkg));
&>a {
color: hsl(var(--blue) 100 70);
color: hsl(var(--nav-selected-text));
}
}
}
@ -125,13 +112,13 @@ html.dark .nav-shevron {
}
.__current-type-doc {
color: hsl(var(--blue) 100 70);
color: hsl(var(--nav-selected-text));
& [data-part="item-trigger"] a {
color: hsl(var(--blue) 100 70);
color: hsl(var(--nav-selected-text));
}
& [data-scope="accordion"][data-part="item-trigger"] {
background-color: hsl(var(--blue) 40 13);
background-color: hsl(var(--nav-selected-bkg));
}
}