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

Restyle the app interface

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-24 10:58:36 +01:00
commit a73914d0ef
1 changed files with 1662 additions and 472 deletions
Download patch file Download diff file Expand all files Collapse all files

281
src/index.scss
View file

@ -1,275 +1,8 @@
@use 'style/mixins' as *;
@use 'style/common';
html > body {
width: 100%;
height: 100%;
display: flex;
position: relative;
> .canvas-container {
height: 100%;
width: 100%;
display: flex;
> canvas {
height: 100%;
width: 100%;
touch-action: none;
cursor:
url('../assets/icons/brush.svg') 0 24,
auto;
}
> .errors-container {
position: absolute;
top: 0;
left: 0;
margin: var(--normal-margin);
pre {
font-size: 20px;
color: red;
}
}
.counters {
@include blurred-background(white);
position: absolute;
border-radius: var(--border-radius);
padding: var(--small-margin);
@include on-large-screen {
top: var(--normal-margin);
right: var(--normal-margin);
}
@include on-small-screen {
bottom: var(--normal-margin);
right: var(--normal-margin);
}
}
}
> aside {
@include blurred-background(#fff);
box-shadow: var(--shadow);
display: flex;
position: absolute;
overflow: hidden;
@include on-large-screen {
top: 50%;
left: 0;
transform: translateY(-50%);
max-height: 350px;
}
@include on-small-screen {
top: 0;
left: 50%;
transform: translateX(-50%);
flex-direction: column;
}
transition: opacity var(--transition-time-long);
border-radius: var(--border-radius);
margin: var(--small-margin);
> nav.buttons {
@include center-children;
justify-content: space-evenly;
@include on-large-screen {
flex-direction: column;
}
> button {
position: relative;
border: none;
background-color: transparent;
cursor: pointer;
@include square(var(--icon-size));
margin: var(--small-margin);
&::before,
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
&::before {
background-color: var(--accent-color);
@include on-large-screen {
width: 0;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
transition:
background-color var(--transition-time),
width var(--transition-time);
left: calc(-1 * var(--small-margin));
height: 140%;
top: 50%;
transform: translateY(-50%);
}
@include on-small-screen {
height: 0;
border-radius: 0 0 var(--border-radius) var(--border-radius);
transition:
background-color var(--transition-time),
height var(--transition-time);
top: calc(-1 * var(--small-margin));
width: 140%;
left: 50%;
transform: translateX(-50%);
}
}
&::after {
background-color: var(--accent-color);
transition:
transform var(--transition-time),
background-color var(--transition-time);
mask-repeat: no-repeat;
@include square(var(--icon-size));
}
&.active {
&::before {
@include on-large-screen {
width: calc(100% + 2 * var(--small-margin));
}
@include on-small-screen {
height: calc(100% + 2 * var(--small-margin));
}
}
&::after {
background-color: white;
}
}
&:hover::after {
transform: scale(1.15);
}
&.info::after {
mask-image: url('../assets/icons/info.svg');
}
&.maximize-full-screen::after {
mask-image: url('../assets/icons/maximize.svg');
}
&.minimize-full-screen::after {
mask-image: url('../assets/icons/minimize.svg');
}
&.settings::after {
mask-image: url('../assets/icons/settings.svg');
}
&.restart::after {
mask-image: url('../assets/icons/restart.svg');
}
}
}
> main.pages {
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--main-color) transparent;
&::-webkit-scrollbar-track,
&::-webkit-scrollbar {
background-color: transparent;
width: 6px;
}
&::-webkit-scrollbar-thumb {
background-color: var(--main-color);
border-radius: var(--border-radius);
}
&,
> * {
transition:
width var(--transition-time-long),
height var(--transition-time-long);
@include on-large-screen {
width: max(500px, 10vw);
}
@include on-small-screen {
height: max(500px, 70vh);
}
}
&.hidden {
@include on-large-screen {
width: 0;
}
@include on-small-screen {
height: 0;
}
}
> section {
padding: var(--normal-margin);
display: flex;
flex-direction: column;
.slider {
$track-height: 12px;
margin-bottom: var(--small-margin);
user-select: none;
p {
display: flex;
justify-content: space-between;
}
input[type='range'] {
width: 100%;
height: $track-height;
appearance: none;
background: transparent;
outline: none;
border-radius: 1000px;
&::-webkit-slider-runnable-track {
appearance: none;
cursor: pointer;
border-radius: 1000px;
@include square(15px);
background: var(--accent-color);
}
&::-webkit-slider-thumb {
appearance: none;
cursor: pointer;
border-radius: 1000px;
$size: 24px;
@include square($size);
background: white;
box-shadow: 0 0 5px 1px var(--accent-color);
transform: translateY(-5px);
transition: transform var(--transition-time);
&:hover {
transform: translateY(-5px) scale(1.1);
}
}
}
}
}
}
}
}
@use 'style/app-shell';
@use 'style/garden-prompt';
@use 'style/control-dock';
@use 'style/toolbar';
@use 'style/config-pane';
@use 'style/panels';
@use 'style/loading';