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

Optimize CSS for mobile and desktop: implement smooth scrolling for desktop only, enhance card and glass component styles for better performance on mobile, and ensure backdrop-blur effects are applied conditionally based on screen size.

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 01:39:20 +03:00
parent 13f6380763
commit d77d3ffd24
1 changed files with 39 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/styles/globals.css
View File

@@ -102,19 +102,34 @@
html { html {
overflow-x: hidden; overflow-x: hidden;
scroll-behavior: smooth; }
/* Smooth scroll only on desktop - mobile uses native */
@media (min-width: 1024px) {
html {
scroll-behavior: smooth;
}
} }
/* Dark theme (default) */ /* Dark theme (default) */
body, .dark body { body, .dark body {
@apply bg-dark-950 text-dark-100 font-sans antialiased; @apply bg-dark-950 text-dark-100 font-sans antialiased;
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
/* iOS smooth scrolling */
-webkit-overflow-scrolling: touch;
}
/* Optimize main scrollable content */
main {
/* Prevent layout shifts during scroll */
contain: layout style;
} }
/* Light theme - Champagne */ /* Light theme - Champagne */
.light body { .light body {
@apply bg-champagne-200 text-champagne-900 font-sans antialiased; @apply bg-champagne-200 text-champagne-900 font-sans antialiased;
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
} }
/* Light theme text color overrides - convert dark-* text colors to readable colors */ /* Light theme text color overrides - convert dark-* text colors to readable colors */
@@ -310,10 +325,19 @@
@layer components { @layer components {
/* ========== DARK THEME COMPONENTS (default) ========== */ /* ========== DARK THEME COMPONENTS (default) ========== */
/* Cards - Dark */ /* Cards - Dark (optimized for mobile) */
.card { .card {
@apply bg-dark-900/50 backdrop-blur-sm rounded-2xl border border-dark-800/50 p-5 sm:p-6 @apply bg-dark-900/70 rounded-2xl border border-dark-800/50 p-5 sm:p-6
transition-all duration-300 ease-smooth; transition-all duration-300 ease-smooth;
/* GPU acceleration for smooth scroll */
transform: translateZ(0);
}
/* Enable backdrop-blur only on desktop */
@media (min-width: 1024px) {
.card {
@apply bg-dark-900/50 backdrop-blur-sm;
}
} }
.card-hover { .card-hover {
@@ -329,9 +353,19 @@
@apply card animate-slide-up; @apply card animate-slide-up;
} }
/* Glass effect - Dark */ /* Glass effect - Dark (optimized for mobile) */
.glass { .glass {
@apply bg-dark-900/30 backdrop-blur-xl border border-dark-700/30; @apply bg-dark-900/80 border border-dark-700/30;
/* GPU acceleration */
transform: translateZ(0);
will-change: transform;
}
/* Enable backdrop-blur only on desktop where it's performant */
@media (min-width: 1024px) {
.glass {
@apply bg-dark-900/30 backdrop-blur-xl;
}
} }
/* Buttons - Dark */ /* Buttons - Dark */