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

Clena up CSS

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-16 15:05:23 +01:00
commit 70423851ba
10 changed files with 180 additions and 674 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/style/_panels.scss
View file

@ -1,8 +1,6 @@
@use 'mixins' as *;
@use 'range-input' as *;
html > body > aside.control-dock > .pages {
@include blurred-background(#fff);
width: min(calc(100vw - 1rem), 560px);
max-height: min(58vh, 520px);
max-height: min(58dvh, 520px);
@ -11,9 +9,11 @@ html > body > aside.control-dock > .pages {
overflow-y: auto;
border: 1px solid rgb(255 255 255 / 54%);
border-radius: 8px;
background-color: rgb(255 255 255 / 34%);
box-shadow:
0 18px 48px rgb(0 0 0 / 28%),
0 2px 10px rgb(0 0 0 / 16%);
backdrop-filter: blur(12px);
scrollbar-width: thin;
scrollbar-color: var(--main-color) transparent;
transition:
@ -64,7 +64,7 @@ html > body > aside.control-dock > .pages {
a {
color: rgb(0 84 120);
font-weight: 700;
font-weight: 400;
&:focus-visible {
outline: 2px solid currentColor;
@ -96,75 +96,17 @@ html > body > aside.control-dock > .pages {
}
p {
@include main-font();
margin-bottom: var(--small-margin);
line-height: 1.65;
color: var(--normal-text-color);
font:
400 1.1rem/1.65 'Open Sans',
sans-serif;
hyphens: auto;
}
a {
color: var(--accent-color);
}
.slider {
$track-height: 8px;
$thumb-size: 22px;
margin-bottom: var(--small-margin);
user-select: none;
p {
display: flex;
justify-content: space-between;
gap: var(--small-margin);
margin-bottom: 0.35rem;
font-size: 0.95rem;
}
input[type='range'] {
@include settings-range-input();
&::-webkit-slider-runnable-track {
@include range-track(rgb(49 52 63 / 14%), $track-height, 1000px, null);
}
&::-webkit-slider-thumb {
@include range-thumb-base(
$thumb-size,
$thumb-size,
2px solid var(--accent-color),
1000px
);
margin-top: -7px;
appearance: none;
background: white;
box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
transition: transform var(--transition-time);
&:hover {
transform: scale(1.08);
}
}
&::-moz-range-track {
@include range-track(rgb(49 52 63 / 14%), $track-height, 1000px, null);
}
&::-moz-range-thumb {
@include range-thumb-base(
$thumb-size,
$thumb-size,
2px solid var(--accent-color),
1000px
);
background: white;
box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}
}
}
.large-button {
margin: var(--small-margin) 0 0 auto;
border-radius: 8px;
}
}
@include on-small-screen {