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

style tweaks for bg / padding of toc / listing / nav

Browse source
This commit is contained in:
outfoxxed 2024-10-17 20:22:14 -07:00
parent 15a61fd4bd
commit 36adc42e60
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
4 changed files with 27 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -51,11 +51,13 @@ html {
--signal-link-color: 270 85 60;
--var-color: 190 78 70;
--var-link-color: 190 85 60;
--inner-param-color: 215 60 70;
--inner-param-color: 215 80 27;
--inner-param-border-color: 215 50 50;
--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;
--toc-hovered-bkg: 0 0 0 / 0.1;
--overlay-bkg: var(--blue) 25 93;
--overlay-bkg-border: var(--blue) 10 75;
--footer-bkg: var(--blue) 32 92;
@ -101,10 +103,13 @@ html.dark {
--var-color: 190 78 70;
--var-link-color: 190 85 60;
--inner-param-color: 215 60 70;
--inner-param-border-color: 215 26 46;
--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;
--toc-hovered-bkg: 0 0 100 / 0.07;
--overlay-bkg: var(--blue) 75 5;
--overlay-bkg-border: var(--blue) 45 15;
--footer-bkg: var(--blue) 66 5;

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

@ -101,7 +101,7 @@
transition: border 0.3s;
& .typedata-title {
margin-bottom: 1.618rem;
margin-bottom: 0.8rem;
& .typedata-name {
font-size: 1.272rem;
@ -130,8 +130,8 @@
align-items: center;
gap: 0.117rem;
color: hsl(var(--inner-param-color));
border: 1px solid hsl(var(--inner-param-color));
border-radius: 5px;
border: 1px solid hsl(var(--inner-param-border-color));
border-radius: 6px;
}
}
}
@ -391,6 +391,13 @@ html.dark .typevariants {
}
}
@media (min-width: 40rem) {
.typedocs-content .typedata-title {
display: flex;
justify-content: space-between;
}
}
@media (min-width: 65rem) {
.root-nav {
& .root-nav-entry {
@ -426,11 +433,6 @@ html.dark .typevariants {
.typedocs-content {
margin-inline: 1.272rem;
& .typedata-title {
display: flex;
justify-content: space-between;
}
& section {
min-width: 30svw;
}

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

@ -69,7 +69,6 @@ html.dark .nav-shevron {
display: flex;
flex-direction: column;
gap: 0.15em;
padding: 0.4rem;
margin: 0.4rem 0;
border-radius: 6px;
@ -80,8 +79,10 @@ html.dark .nav-shevron {
}
&>a {
padding: 0.4rem;
padding-left: 0.6rem;
width: 100%;
margin-left: 0.2rem;
text-decoration: none;
}
}

15
src/styles/docs/toc/types-toc.css
View file

@ -50,30 +50,31 @@
z-index: 21;
& .types-item {
margin-block: 10px;
margin-block: 0.1rem;
width: 100%;
transition: background-color 0.3s;
padding: 0.117rem;
padding-left: 0.338rem;
padding-left: 0.3rem;
border-radius: 5px;
& svg {
opacity: 0.6;
width: 1.3rem;
height: 1.3rem;
width: 1.25rem;
height: 1.25rem;
transition: opacity 0.5s;
}
& a {
display: flex;
align-items: center;
gap: 0.287rem;
gap: 0.3rem;
width: 100%;
padding: 0.3rem;
text-decoration: none;
}
&:hover {
cursor: pointer;
background-color: hsla(0 0 100 / 0.07);
background-color: hsl(var(--toc-hovered-bkg));
& svg {
opacity: 1;