GarpBot/cs2-WeaponPaints
1
0
Fork 0
mirror of https://github.com/Nereziel/cs2-WeaponPaints.git synced 2026-03-10 08:31:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement intersection observer for lazy loading of skin images in index.php; adjust CSS for skin grid and image dimensions to enhance layout and user experience.

Browse Source
This commit is contained in:
Bram Suurd
2025-06-29 22:56:49 +02:00
parent e540e1e8e3
commit 048ce5cf5e
2 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
website/style.css
View File

@@ -403,9 +403,10 @@ body {
}
.overlay-content {
width: 1000px;
height: 700px;
max-height: 85vh;
width: 1400px;
height: 800px;
max-height: 95vh;
max-width: 98vw;
}
.modal-content {
@@ -448,8 +449,8 @@ body {
/* Skin Grid */
.skin-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
padding: 1.5rem;
overflow-y: auto;
flex: 1;
@@ -472,14 +473,20 @@ body {
.skin-item .skin-image {
width: 100%;
height: 180px;
height: 300px;
object-fit: contain;
background: linear-gradient(145deg, #333, #222);
padding: 0.75rem;
padding: 0.5rem;
display: block;
box-sizing: border-box;
transform: scale(1.2);
transform: scale(1.6);
transform-origin: center;
transition: opacity 0.3s ease;
}
.skin-item .skin-image[data-loading="true"] {
opacity: 0.6;
background: linear-gradient(145deg, #444, #333);
}
.skin-name {