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

significantly improve light theme

Browse source
This commit is contained in:
outfoxxed 2024-10-08 16:55:50 -07:00
parent 0e749e5bfa
commit 0d5909ff58
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
6 changed files with 108 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,7 +13,7 @@
}
[data-scope="accordion"][data-part="item-trigger"] {
background-color: hsl(var(--bg-900));
background-color: transparent;
position: relative;
border: unset;
border-radius: 6px;
@ -46,14 +46,15 @@
position: absolute;
border-radius: 6px;
z-index: -1;
inset: -1px;
background-color: hsla(var(--green) 80 70 / 0.3);
transition: background-color 0.3s;
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 {
&::before {
background-color: hsla(var(--green) 80 70 / 0.6);
border-color: hsla(var(--accent-500));
}
}
}
@ -70,10 +71,22 @@
margin-left: 3px;
&:hover {
background-color: hsl(var(--blue) 30 30);
background-color: hsl(var(--blue) 20 80);
}
}
html.dark [data-scope="accordion"][data-part="item-indicator"]:hover {
background-color: hsl(var(--blue) 30 30);
}
.nav-shevron {
color: black;
}
html.dark .nav-shevron {
color: white;
}
[data-scope="accordion"][data-part="item-indicator"][data-state="open"] {
animation: rotateIn 250ms ease-in-out forwards;
}

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

@ -229,6 +229,10 @@ button>kbd {
font-size: 0.75rem;
gap: 0.25em;
padding-inline: 0.375rem;
background-color: hsla(var(--blue) 15 80);
}
html.dark button>kbd {
background-color: hsla(var(--blue) 5 20 / 0.5);
}
@ -305,16 +309,15 @@ button[data-close-modal] {
border-radius: 6px;
padding-inline-start: 0.75rem;
padding-inline-end: 0.5rem;
background-color: hsla(var(--blue) 15 15 / 0.5);
color: hsl(var(--blue) 40 65);
background-color: hsla(var(--blue) 15 90);
color: hsl(var(--blue) 40 45);
font-size: 0.875rem;
width: 100%;
max-width: 15rem;
transition: color 0.23s, border-color 0.23s;
&:hover {
border-color: hsl(0 0 50);
color: hsl(var(--blue) 60 85);
color: hsl(var(--blue) 50 30);
}
&> :last-child {
@ -322,6 +325,15 @@ button[data-close-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;
}