etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 10:27:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance ColorPicker component with RGB support and improved styling

Browse Source 
- Added RGB value updates on color input changes and preset selections.
- Refactored RGB sliders to always be visible, enhancing user experience across devices.
- Improved range input styles for better accessibility and visual feedback.
- Updated number input fields for RGB values to hide spinners and ensure a cleaner look.
This commit is contained in:
PEDZEO
2026-01-20 18:27:05 +03:00
parent de0a9d9efb
commit 9e7d6b317e
2 changed files with 142 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/styles/globals.css
View File

@@ -962,31 +962,83 @@
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 8px;
border-radius: 4px;
height: 12px;
border-radius: 6px;
outline: none;
touch-action: pan-x;
}
/* Desktop: smaller track */
@media (min-width: 640px) {
input[type="range"] {
height: 8px;
border-radius: 4px;
}
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
cursor: pointer;
border: 2px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.2);
}
input[type="range"]::-webkit-slider-thumb:active {
transform: scale(0.95);
}
/* Desktop: smaller thumb */
@media (min-width: 640px) {
input[type="range"]::-webkit-slider-thumb {
width: 18px;
height: 18px;
}
}
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
cursor: pointer;
border: 2px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.1);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.2);
}
/* Desktop: smaller thumb */
@media (min-width: 640px) {
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
}
}
/* Hide number input spinners for cleaner look */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
/* Selection color */