90 lines
2.5 KiB
CSS
90 lines
2.5 KiB
CSS
.user-page-container {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
padding: clamp(1rem, 3vw, 1.5rem);
|
|
padding-top: calc(60px + clamp(1rem, 3vw, 1.5rem));
|
|
box-sizing: border-box; overflow-x: hidden; margin-top: 0;
|
|
}
|
|
.category-filter {
|
|
display: flex;
|
|
gap: clamp(0.5rem, 2vw, 0.8rem);
|
|
overflow-x: auto;
|
|
padding-bottom: clamp(1rem, 3vw, 1.5rem);
|
|
margin-bottom: clamp(1rem, 3vw, 1.5rem);
|
|
scrollbar-width: none; -ms-overflow-style: none;
|
|
}
|
|
.category-filter::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.category-button {
|
|
background-color: transparent;
|
|
color: white;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 25px;
|
|
padding: clamp(0.6rem, 2vw, 0.8rem) clamp(1.2rem, 3vw, 1.5rem);
|
|
font-size: clamp(0.9rem, 3vw, 1rem);
|
|
font-weight: 600; cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
-webkit-tap-highlight-color: transparent;
|
|
flex-shrink: 0;
|
|
}
|
|
.category-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
.category-button.active {
|
|
background-color: white;
|
|
color: black;
|
|
border-color: white;
|
|
}
|
|
@media (hover: none) {
|
|
.category-button:hover {
|
|
background-color: transparent;
|
|
color: white;
|
|
}
|
|
.category-button.active:hover {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
.products-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: clamp(0.8rem, 3vw, 1.2rem);
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding-top: 0;
|
|
}
|
|
/* Petits téléphones */
|
|
@media (max-width: 360px) {
|
|
.products-grid { gap: 0.6rem; }
|
|
.user-page-container {
|
|
padding: 0.8rem;
|
|
padding-top: calc(60px + 0.8rem);
|
|
}
|
|
}
|
|
/* Tablettes portrait */
|
|
@media (min-width: 600px) {
|
|
.products-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
.user-page-container {
|
|
padding: 2rem;
|
|
padding-top: calc(60px + 2rem);
|
|
}
|
|
}
|
|
/* Tablettes paysage */
|
|
@media (min-width: 900px) {
|
|
.products-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
/* Désactiver hover sur tactile */
|
|
@media (hover: none) {
|
|
.user-header .back-link:hover {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
} |