etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance ColorPicker component: add RGB slider functionality, implement Telegram WebApp compatibility, and optimize color conversion methods. Update styles for preset colors and improve performance with memoization.

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 01:57:06 +03:00
parent d77d3ffd24
commit 9343522c1d
3 changed files with 218 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/styles/globals.css
View File

@@ -489,11 +489,18 @@
@apply nav-item text-accent-400 bg-accent-500/10;
}
/* Bottom nav - Dark */
/* Bottom nav - Dark (optimized for mobile) */
.bottom-nav {
@apply fixed bottom-0 left-0 right-0 z-50
bg-dark-900/80 backdrop-blur-xl border-t border-dark-800/50
bg-dark-900/95 border-t border-dark-800/50
safe-area-pb;
transform: translateZ(0);
}
@media (min-width: 1024px) {
.bottom-nav {
@apply bg-dark-900/80 backdrop-blur-xl;
}
}
.bottom-nav-item {
@@ -510,12 +517,34 @@
@apply border-t border-dark-800/50;
}
/* ========== MOBILE PERFORMANCE: Disable backdrop-blur ========== */
@media (max-width: 1023px) {
/* Disable all backdrop-blur on mobile for better scroll performance */
.backdrop-blur,
.backdrop-blur-sm,
.backdrop-blur-md,
.backdrop-blur-lg,
.backdrop-blur-xl,
.backdrop-blur-2xl,
.backdrop-blur-3xl {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
/* ========== LIGHT THEME COMPONENTS (Champagne) ========== */
/* Cards - Light */
.light .card {
@apply bg-white/80 backdrop-blur-sm rounded-2xl border border-champagne-300/50 p-5 sm:p-6
@apply bg-white/90 rounded-2xl border border-champagne-300/50 p-5 sm:p-6
shadow-sm;
transform: translateZ(0);
}
@media (min-width: 1024px) {
.light .card {
@apply bg-white/80 backdrop-blur-sm;
}
}
.light .card-hover {
@@ -526,9 +555,16 @@
@apply hover:shadow-lg hover:border-accent-400/40;
}
/* Glass effect - Light */
/* Glass effect - Light (optimized for mobile) */
.light .glass {
@apply bg-white/60 backdrop-blur-xl border border-champagne-300/40;
@apply bg-white/90 border border-champagne-300/40;
transform: translateZ(0);
}
@media (min-width: 1024px) {
.light .glass {
@apply bg-white/60 backdrop-blur-xl;
}
}
/* Buttons - Light */
@@ -918,6 +954,37 @@
}
}
/* Color picker range input styling */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 8px;
border-radius: 4px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
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);
}
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
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);
}
/* Selection color */
::selection {
@apply bg-accent-500/30 text-dark-50;