syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Update bottom controls for improved styling and functionality

Browse Source 
- Adjusted button styles across various components for consistency and better UX.
- Enhanced layout of action controls to utilize whitespace more effectively.
- Updated slider styles for a more modern appearance and improved usability.
- Refined input fields and labels for better accessibility and readability.
- Introduced new app surface styles for a cohesive design across the application.
- Added tests for canvas cursor behavior to ensure correct cursor display during operations.
This commit is contained in:
syntaxbullet
2026-07-11 14:55:32 +02:00
parent 37aa719047
commit 5915c62a9a
31 changed files with 345 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
view/index.css
View File

@@ -33,54 +33,62 @@
}
@layer components {
.app-surface {
background: rgb(13 17 23 / 0.88);
border: 1px solid rgb(255 255 255 / 0.075);
box-shadow: 0 12px 32px rgb(0 0 0 / 0.28), inset 0 1px rgb(255 255 255 / 0.025);
backdrop-filter: blur(18px) saturate(120%);
}
.bottom-control-slider {
@apply h-8 cursor-pointer appearance-none bg-transparent outline-none;
@apply h-6 cursor-pointer appearance-none bg-transparent outline-none;
}
.bottom-control-slider::-webkit-slider-runnable-track {
height: 0.25rem;
border-radius: 0;
background: linear-gradient(to right, rgb(255 255 255 / 0.9) var(--slider-progress), rgb(255 255 255 / 0.22) var(--slider-progress));
height: 0.1875rem;
border-radius: 9999px;
background: linear-gradient(to right, rgb(125 211 252 / 0.9) var(--slider-progress), rgb(255 255 255 / 0.12) var(--slider-progress));
}
.bottom-control-slider::-webkit-slider-thumb {
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
width: 0.75rem;
height: 0.75rem;
margin-top: -0.28125rem;
appearance: none;
border: 1px solid rgb(255 255 255 / 0.9);
border: 2px solid rgb(125 211 252);
border-radius: 9999px;
background: rgb(255 255 255);
background: rgb(15 23 42);
box-shadow: 0 0 0 2px rgb(15 23 42 / 0.8);
}
.bottom-control-slider::-moz-range-track {
height: 0.25rem;
border-radius: 0;
background: rgb(255 255 255 / 0.22);
height: 0.1875rem;
border-radius: 9999px;
background: rgb(255 255 255 / 0.12);
}
.bottom-control-slider::-moz-range-progress {
height: 0.25rem;
border-radius: 0;
background: rgb(255 255 255 / 0.9);
height: 0.1875rem;
border-radius: 9999px;
background: rgb(125 211 252 / 0.9);
}
.bottom-control-slider::-moz-range-thumb {
width: 1.25rem;
height: 1.25rem;
border: 1px solid rgb(255 255 255 / 0.9);
width: 0.75rem;
height: 0.75rem;
border: 2px solid rgb(125 211 252);
border-radius: 9999px;
background: rgb(255 255 255);
background: rgb(15 23 42);
}
.bottom-control-slider:focus-visible::-webkit-slider-thumb {
outline: 1px solid rgb(255 255 255);
outline-offset: 2px;
outline: 2px solid rgb(125 211 252 / 0.35);
outline-offset: 3px;
}
.bottom-control-slider:focus-visible::-moz-range-thumb {
outline: 1px solid rgb(255 255 255);
outline-offset: 2px;
outline: 2px solid rgb(125 211 252 / 0.35);
outline-offset: 3px;
}
.subtle-scrollbar {