diff --git a/src/components/type/Properties.astro b/src/components/type/Properties.astro index a2e705a..21765e2 100644 --- a/src/components/type/Properties.astro +++ b/src/components/type/Properties.astro @@ -6,7 +6,7 @@ import type { } from "@config/io/types"; import { Tag, Flag } from "@icons"; -import TypeDetails from "./TypeDetails.astro" +import TypeDetails from "./TypeDetails.astro"; export interface Props { propsKeys: string[]; @@ -21,14 +21,20 @@ const { propsKeys, propsData } = Astro.props; const propData = propsData[item] let typeLink:string; let linkText:string; + let genericType:string|undefined; + let genericTypeLink:string|undefined; const gadget = propData.type.gadget; if (gadget) { typeLink = "#" linkText = `[${Object.keys(gadget).toString()}]` } else { - typeLink = getQMLTypeLink(propData.type as unknown as QMLTypeLinkObject) + typeLink = getQMLTypeLink(propData.type) linkText = propData.type.name || propData.type.type } + if (propData.type.of) { + genericType = propData.type.of.name; + genericTypeLink = getQMLTypeLink(propData.type.of) + } return (

  • @@ -36,7 +42,7 @@ const { propsKeys, propsData } = Astro.props; { item }: { linkText } + >{ linkText }{genericType && (<{genericType}>)}

    { propData.flags && propData.flags.length > 0 ? ( diff --git a/src/styles/css-config/base.css b/src/styles/css-config/base.css index fb85dc9..244b9b0 100644 --- a/src/styles/css-config/base.css +++ b/src/styles/css-config/base.css @@ -103,7 +103,12 @@ html.dark { --nav-selected-bkg: var(--blue) 40 13; --nav-selected-text: var(--blue) 100 70; --nav-indicator-bkg: var(--blue) 30 30; - --overlay-bkg: var(--blue) 41 4; + --overlay-bkg: var(--blue) 66 7; + --overlay-bkg-1: var(--blue) 66 9; + --overlay-bkg-2: var(--blue) 60 12; + --overlay-bkg-green: var(--green) 66 7; + --overlay-bkg-green-1: var(--green) 66 9; + --overlay-bkg-green-2: var(--green) 45 21; --overlay-bkg-border: var(--blue) 17 13; } diff --git a/src/styles/docs/docs.css b/src/styles/docs/docs.css index ba42f48..ea79a02 100644 --- a/src/styles/docs/docs.css +++ b/src/styles/docs/docs.css @@ -21,6 +21,7 @@ .docs-content { flex-grow: 1; + margin-bottom: 2.3rem; & section { max-width: 100svw; diff --git a/src/styles/docs/nav/nav.css b/src/styles/docs/nav/nav.css index 4a3fa5a..8957c80 100644 --- a/src/styles/docs/nav/nav.css +++ b/src/styles/docs/nav/nav.css @@ -32,16 +32,26 @@ scrollbar-width: none; font-size: 1.2rem; -ms-overflow-style: none; - background-color: hsl(var(--overlay-bkg)); - border-right: solid hsl(var(--overlay-bkg-border)) 1px; + background: hsl(var(--bg-900)); + + &::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient( + 135deg, + hsla(var(--secondary-900) / 1) 36%, + hsla(var(--overlay-bkg-1) / 1) 100% + ); + filter: blur(21px); + /* border-top: solid hsl(var(--overlay-bkg-border)) 1px; */ + } &::-webkit-scrollbar { display: none; } - transition: - left 0.3s ease, - padding 0.3s ease; + transition: left 0.3s ease, padding 0.3s ease; &.shown { display: flex; @@ -85,8 +95,11 @@ & [data-part="item"] { & [data-part="item-content"] > div { - min-height: 3em; - & > p { margin: auto 0; } + min-height: 3em; + + & > p { + margin: auto 0; + } } } } diff --git a/src/styles/docs/toc/toc.css b/src/styles/docs/toc/toc.css index 42c2f61..d0de965 100644 --- a/src/styles/docs/toc/toc.css +++ b/src/styles/docs/toc/toc.css @@ -35,7 +35,7 @@ font-size: 1.614rem; max-height: 500px; - &>svg { + & > svg { height: 100%; width: 24px; } @@ -65,9 +65,7 @@ display: none; } - transition: - width 0.3s ease, - padding 0.3s ease; + transition: width 0.3s ease, padding 0.3s ease; &.shown { overflow-y: scroll; @@ -105,7 +103,7 @@ display: block; position: sticky; top: 3.5rem; - width: 19rem; + max-width: 19rem; max-height: calc(100svh - 3.5rem); overflow-y: scroll; z-index: 9; @@ -124,7 +122,7 @@ list-style: none; &.active { - &>.toc_a { + & > .toc_a { color: hsl(var(--green) 72 60); } } diff --git a/src/styles/global.css b/src/styles/global.css index 3fb5e27..232d5bf 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -111,20 +111,56 @@ html.dark { } footer { + position: relative; width: 100%; font-size: 0.9rem; display: flex; justify-content: space-between; padding: 1rem; - background-color: hsl(var(--overlay-bkg)); - border-top: solid hsl(var(--overlay-bkg-border)) 1px; + overflow: hidden; + flex-shrink: 0; + + &::before { + content: ""; + position: absolute; + inset: 0; + background: hsl(var(--overlay-bkg)); + background: linear-gradient( + 180deg, + hsla(var(--overlay-bkg-2) / 1) 30%, + hsla(var(--overlay-bkg-1) / 1) 66%, + hsla(var(--overlay-bkg-2) / 1) 100% + ); + filter: blur(4rem); + /* border-top: solid hsl(var(--overlay-bkg-border)) 1px; */ + } & a { color: hsl(var(--text-dark)); transition: color 0.3s ease; + & .hint { + transition: color 0.3s ease; + } + + &:nth-child(2) .hint { + color: hsl(var(--green) 30 45); + } + + &:nth-child(3) .hint { + color: hsl(var(--blue) 30 45); + } + &:hover { color: hsl(var(--text)); + + &:nth-child(2) .hint { + color: hsl(var(--green) 60 60); + } + + &:nth-child(3) .hint { + color: hsl(var(--blue) 60 66); + } } } @@ -135,16 +171,18 @@ footer { gap: 0.127rem; color: hsl(var(--text-dark)); - & > p { margin-bottom: 0.2rem } + & > p { + margin-bottom: 0.2rem; + } - & > a { text-decoration: none } - - & .hint { - color: hsl(var(--text-darker)); + & > a { + text-decoration: none; } } - & .links { justify-self: flex-end } + & .links { + justify-self: flex-end; + } & .socials { display: flex; @@ -152,7 +190,9 @@ footer { align-items: flex-start; font-size: 2.5rem; - & a { display: flex } + & a { + display: flex; + } } } @@ -163,9 +203,13 @@ footer { } @media (min-width: 65rem) { - .toc-collapsed-spacer { display: none } + .toc-collapsed-spacer { + display: none; + } } @media (min-width: 85rem) { - .nav-collapsed-spacer { display: none } + .nav-collapsed-spacer { + display: none; + } }