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
Show stats 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-400: var(--green) 90 57;
--accent-500: var(--green) 90 47; --accent-500: var(--green) 90 47;
--accent-600: var(--green) 88 40; --accent-600: var(--green) 88 40;
--accent-700: var(--green) 70 40; --accent-700: var(--green) 70 40;
/* secondary */ /* secondary */
--blue: 224; --blue: 224;
@ -49,6 +49,10 @@ html {
--var-color: 190 78 70; --var-color: 190 78 70;
--var-link-color: 190 85 60; --var-link-color: 190 85 60;
--inner-param-color: 215 60 70; --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 { html.dark {
@ -86,6 +90,10 @@ html.dark {
--var-color: 190 78 70; --var-color: 190 78 70;
--var-link-color: 190 85 60; --var-link-color: 190 85 60;
--inner-param-color: 215 60 70; --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; transition: background-color 0.2s ease;
&:hover { &:hover {
background-color: hsl(var(--blue) 40 10); background-color: hsl(var(--nav-hovered-bkg));
} }
} }
@ -43,14 +43,10 @@
margin-left: 3px; margin-left: 3px;
&:hover { &: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 { .nav-shevron {
color: black; color: black;
} }
@ -70,16 +66,7 @@ html.dark .nav-shevron {
[data-scope="accordion"][data-part="item-content"] { [data-scope="accordion"][data-part="item-content"] {
--height: 709; --height: 709;
margin-block: 0.175rem; margin-block: 0.175rem;
margin-left: 1.4rem;
&>.arktree-item,
[data-part="item"] {
margin-left: 1.2rem;
}
&>.arktree-item,
& [data-part="item-content"] {
margin-left: 1.8rem;
}
& .arktree-item, & .arktree-item,
[data-part="item-content"]>div { [data-part="item-content"]>div {
@ -93,7 +80,7 @@ html.dark .nav-shevron {
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
&:hover { &:hover {
background-color: hsl(var(--blue) 40 10) background-color: hsl(var(--nav-hovered-bkg))
} }
&>a { &>a {
@ -106,12 +93,12 @@ html.dark .nav-shevron {
} }
} }
& .arktree-item, & .arktree-item.__current-type-doc,
[data-part="item-content"]>div.__current-type-doc { [data-part="item-content"]>div.__current-type-doc {
background-color: hsl(var(--blue) 40 13); background-color: hsl(var(--nav-selected-bkg));
&>a { &>a {
color: hsl(var(--blue) 100 70); color: hsl(var(--nav-selected-text));
} }
} }
} }
@ -125,13 +112,13 @@ html.dark .nav-shevron {
} }
.__current-type-doc { .__current-type-doc {
color: hsl(var(--blue) 100 70); color: hsl(var(--nav-selected-text));
& [data-part="item-trigger"] a { & [data-part="item-trigger"] a {
color: hsl(var(--blue) 100 70); color: hsl(var(--nav-selected-text));
} }
& [data-scope="accordion"][data-part="item-trigger"] { & [data-scope="accordion"][data-part="item-trigger"] {
background-color: hsl(var(--blue) 40 13); background-color: hsl(var(--nav-selected-bkg));
} }
} }