andras/fleeting-garden
andras/fleeting-garden
Watch
1
0
Fork
You've already forked fleeting-garden
 0
Code Issues Pull requests 10 Projects Releases Packages Wiki Activity Actions

more cleaning up

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-16 20:45:42 +01:00
commit 560398fefb
110 changed files with 931 additions and 2645 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/style/_toolbar.scss
View file

@ -36,6 +36,9 @@ $toolbar-icons: (
);
html > body > aside.control-dock > .toolbar-row {
--toolbar-background-opacity: 0%;
--toolbar-background-strength: 0;
display: flex;
align-items: stretch;
justify-content: center;
@ -46,9 +49,17 @@ html > body > aside.control-dock > .toolbar-row {
gap: clamp(6px, 1.8vw, 14px);
border-radius: 12px;
color: rgb(245 250 244 / 92%);
font:
400 13px/1 'Open Sans',
sans-serif;
background-color: rgb(5 8 13 / var(--toolbar-background-opacity));
box-shadow:
inset 0 0 0 1px rgb(255 255 255 / calc(var(--toolbar-background-strength) * 16%)),
inset 0 1px 0 rgb(255 255 255 / calc(var(--toolbar-background-strength) * 7%)),
0 14px 34px rgb(0 0 0 / calc(var(--toolbar-background-strength) * 28%));
backdrop-filter: blur(calc(var(--toolbar-background-strength) * 18px))
brightness(calc(1 - var(--toolbar-background-strength) * 0.38))
saturate(calc(1 - var(--toolbar-background-strength) * 0.18));
font-size: 13px;
font-weight: 400;
line-height: 1;
transition:
backdrop-filter var(--transition-time-long),
background-color var(--transition-time-long),
@ -139,15 +150,6 @@ html > body > aside.control-dock > .toolbar-row {
}
}
&.needs-contrast-background {
background: linear-gradient(180deg, rgb(22 28 36 / 72%), rgb(5 8 13 / 82%));
box-shadow:
inset 0 0 0 1px rgb(255 255 255 / 16%),
inset 0 1px 0 rgb(255 255 255 / 7%),
0 14px 34px rgb(0 0 0 / 28%);
backdrop-filter: blur(18px) brightness(0.62) saturate(0.82);
}
> .toolbar-shell > nav.buttons {
grid-area: nav;
display: flex;