url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed font casing, revamped opacity slider and improved accessibility with aria labels and keyboard navigation

Browse Source
This commit is contained in:
findthelorax
2026-04-23 15:30:51 -04:00
parent 30ed78c240
commit 93b98f760c
3 changed files with 74 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/modals/GroupRectModal.module.css
+43
View File
@@ -0,0 +1,43 @@
/* Custom colored slider track for accent color */
.slider-accent::-webkit-slider-runnable-track {
height: 4px;
background: #00d4ff;
border-radius: 2px;
}
.slider-accent::-moz-range-track {
height: 4px;
background: #00d4ff;
border-radius: 2px;
}
.slider-accent::-ms-fill-lower,
.slider-accent::-ms-fill-upper {
background: #00d4ff;
border-radius: 2px;
}
/* Ensure the slider bar is visible on dark backgrounds */
.slider-thumb-sm {
background: transparent;
}
/* Custom slider thumb for smaller circle */
.slider-thumb-sm::-webkit-slider-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background: #00d4ff;
border: 2px solid #21262d;
}
.slider-thumb-sm::-moz-range-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background: #00d4ff;
border: 2px solid #21262d;
}
.slider-thumb-sm::-ms-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background: #00d4ff;
border: 2px solid #21262d;
}