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

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

@ -16,9 +16,10 @@ html {
color-scheme: light dark;
/* accent */
--green: 141;
--accent-400: var(--green) 100 67;
--accent-500: var(--green) 100 57;
--accent-600: var(--green) 98 50;
--accent-400: var(--green) 90 57;
--accent-500: var(--green) 90 47;
--accent-600: var(--green) 88 40;
--accent-700: var(--green) 70 40;
/* secondary */
--blue: 224;
@ -37,6 +38,17 @@ html {
--bg-700: var(--white) 12 56;
--bg-800: var(--white) 12 36;
--bg-900: var(--white) 12 16;
/* docs */
--prop-color: 350 78 70;
--prop-link-color: 350 78 60;
--func-color: 50 68 50;
--func-link-color: 50 58 55;
--signal-color: 270 78 70;
--signal-link-color: 270 85 60;
--var-color: 190 78 70;
--var-link-color: 190 85 60;
--inner-param-color: 215 60 70;
}
html.dark {
@ -45,6 +57,7 @@ html.dark {
--accent-400: var(--green) 100 67;
--accent-500: var(--green) 95 55;
--accent-600: var(--green) 90 40;
--accent-700: var(--green) 80 30;
/* secondary */
--white: 194;

62
src/styles/docs/docs-types.css
View file

@ -216,10 +216,10 @@
.typeprops {
& .typeprop-root {
border: 1px solid hsla(var(--prop-color) / 0.3);
border: 1px solid hsla(var(--prop-color) / 0.6);
&:hover {
border: 1px solid hsla(var(--prop-color) / 0.6);
border: 1px solid hsla(var(--prop-color));
& .type-datatype {
opacity: 1;
@ -232,13 +232,23 @@
}
}
.typefuncs {
& .typefunc-root {
border: 1px solid hsla(var(--func-color) / 0.3);
html.dark .typeprops {
& .typeprop-root {
border: 1px solid hsla(var(--prop-color) / 0.3);
&:hover {
border: 1px solid hsla(var(--prop-color) / 0.6);
}
}
}
.typefuncs {
& .typefunc-root {
border: 1px solid hsla(var(--func-color) / 0.6);
&:hover {
border: 1px solid hsla(var(--func-color));
& .type-datatype {
opacity: 1;
}
@ -264,13 +274,23 @@
}
}
.typesignals {
& .typesignal-root {
border: 1px solid hsla(var(--signal-color) / 0.3);
html.dark .typefuncs {
& .typefunc-root {
border: 1px solid hsla(var(--func-color) / 0.3);
&:hover {
border: 1px solid hsla(var(--func-color) / 0.6);
}
}
}
.typesignals {
& .typesignal-root {
border: 1px solid hsla(var(--signal-color) / 0.6);
&:hover {
border: 1px solid hsla(var(--signal-color));
& .typesignal-doclink {
opacity: 1;
}
@ -306,13 +326,23 @@
}
}
.typevariants {
& .typevariant-root {
border: 1px solid hsla(var(--var-color) / 0.3);
html.dark .typesignals {
& .typesignal-root {
border: 1px solid hsla(var(--signal-color) / 0.3);
&:hover {
border: 1px solid hsla(var(--signal-color) / 0.6);
}
}
}
.typevariants {
& .typevariant-root {
border: 1px solid hsla(var(--var-color) / 0.6);
&:hover {
border: 1px solid hsla(var(--var-color));
& .typevariant-doclink {
opacity: 1;
}
@ -334,6 +364,16 @@
}
}
html.dark .typevariants {
& .typevariant-root {
border: 1px solid hsla(var(--var-color) / 0.3);
&:hover {
border: 1px solid hsla(var(--var-color) / 0.6);
}
}
}
@media (min-width: 768px) {
.root-nav {
& .root-nav-entry {

2
src/styles/docs/docs.css
View file

@ -17,6 +17,7 @@
}
.c-breadcrumbs {
--color-link-breadcrumbs: hsl(var(--accent-600));
margin-top: 1.056rem;
margin-bottom: 0.318rem;
max-width: 100svw;
@ -80,7 +81,6 @@ ul {
}
@media (min-width: 768px) {
.docs,
.docslayout-root {
gap: 0.648rem;

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;
}

4
src/styles/global.css
View file

@ -13,8 +13,8 @@
/* color styling */
.header {
background-color: hsl(var(--blue) 100 88);
box-shadow: 0 3px 3px 3px hsla(var(--white) 100 0 / 0.3);
background-color: hsl(var(--bg-400));
box-shadow: 0 3px 3px 3px hsla(var(--white) 100 0 / 0.1);
}
.baselayout,