From 1d4971c8039dab39e3ac1fff0189f2ae232fed14 Mon Sep 17 00:00:00 2001 From: snt Date: Tue, 19 May 2026 15:03:26 +0200 Subject: [PATCH] =?UTF-8?q?[IMP]=20website=5Fsale=5Faplicoop:=20mejora=20c?= =?UTF-8?q?ard=20producto=20(placeholder,=20responsive=20m=C3=B3vil,=20acc?= =?UTF-8?q?esibilidad=20y=20estilo=20profesional)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/css/components/product-card.css | 167 +++++++++++++----- 1 file changed, 118 insertions(+), 49 deletions(-) diff --git a/website_sale_aplicoop/static/src/css/components/product-card.css b/website_sale_aplicoop/static/src/css/components/product-card.css index c6eef5c..fd36a45 100644 --- a/website_sale_aplicoop/static/src/css/components/product-card.css +++ b/website_sale_aplicoop/static/src/css/components/product-card.css @@ -5,38 +5,44 @@ */ .product-card { - background-color: white; + background-color: #fff; border: 1px solid #e0e0e0; - border-radius: 8px; + border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - transition: all 0.3s ease; + transition: box-shadow 0.3s, transform 0.2s; display: flex; flex-direction: column; - padding: 0.5rem 0.5rem 0.5rem 0.5rem; + padding: 0.5rem; height: 100%; overflow: hidden; + outline: none; } -.product-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); -} - +.product-card:hover, .product-card:focus-within { - outline: 3px solid var(--primary-color); + transform: translateY(-4px) scale(1.01); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13); + outline: 2px solid var(--primary-color, #007bff); outline-offset: 2px; } .product-card .product-image { - height: 150px; + height: 120px; + width: 100%; object-fit: cover; + border-radius: 8px 8px 0 0; + background: #f3f3f3; + display: block; } .product-img-cover { - max-height: 160px; + max-height: 120px; + width: 100%; object-fit: cover; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(40, 39, 39, 0.9); + border-radius: 8px 8px 0 0; + box-shadow: 0 2px 8px rgba(40, 39, 39, 0.09); + background: #f3f3f3; + display: block; } .product-card .card-body { @@ -44,105 +50,168 @@ flex-direction: column; height: 100%; flex-grow: 1; - padding: 0.75rem; + padding: 0.6rem 0.7rem 0.7rem 0.7rem; position: relative; - background: linear-gradient(135deg, rgba(0, 123, 255, 0.12) 0%, rgba(0, 123, 255, 0.08) 100%); - transition: all 0.3s ease; + background: linear-gradient(135deg, rgba(0, 123, 255, 0.07) 0%, rgba(0, 123, 255, 0.04) 100%); + transition: background 0.3s; } -.product-card:hover .card-body { +.product-card:hover .card-body, +.product-card:focus-within .card-body { background: linear-gradient( 135deg, - rgba(108, 117, 125, 0.1) 0%, - rgba(108, 117, 125, 0.08) 100% + rgba(108, 117, 125, 0.13) 0%, + rgba(108, 117, 125, 0.09) 100% ); } .product-card .card-title { flex-grow: 1; - margin: 0; - margin-bottom: 0.2rem; + margin: 0 0 0.15rem 0; min-height: auto; display: block; word-wrap: break-word; overflow-wrap: break-word; - font-size: 1.2rem !important; - line-height: 1; + font-size: 1.08rem !important; + line-height: 1.1; text-align: center; font-weight: 600; - color: #2d3748; + color: #1a202c; + letter-spacing: 0.01em; } .product-card .card-text { - margin-bottom: 0.15rem; + margin-bottom: 0.12rem; text-align: center; + font-size: 1rem; } .product-card .card-text strong { display: block; - margin-bottom: 0.15rem; - font-size: 1.2rem; - color: #667eea; + margin-bottom: 0.1rem; + font-size: 1.15rem; + color: #3b82f6; } .product-card .product-supplier { text-align: center; color: #4a5568; font-weight: 400; - margin-bottom: 0.15rem; - font-size: 0.9rem !important; + margin-bottom: 0.12rem; + font-size: 0.92rem !important; } .product-tags { text-align: center; display: flex; flex-wrap: wrap; - gap: 0.2rem; + gap: 0.18rem; justify-content: center; font-weight: 400; - font-size: 1.4rem !important; + font-size: 1.1rem !important; margin: 0; padding: 0; } .badge-km { - background-color: var(--primary-color) !important; - color: white !important; + background-color: var(--primary-color, #007bff) !important; + color: #fff !important; font-weight: 600 !important; - padding: 0.2rem !important; - font-size: 0.6rem !important; - border-radius: 0.2rem; + padding: 0.18rem 0.32rem !important; + font-size: 0.68rem !important; + border-radius: 0.22rem; display: inline-block; - border: 1px solid; + border: 1px solid #007bff; white-space: nowrap; - margin-right: 0.1rem; - margin-bottom: 0.1rem; + margin-right: 0.08rem; + margin-bottom: 0.08rem; } .card-body p.card-text { text-align: center; - margin-bottom: 0.8rem; - min-height: 2rem; + margin-bottom: 0.6rem; + min-height: 1.7rem; display: flex; align-items: center; justify-content: center; - background-color: var(--primary-color); - color: white; + background-color: var(--primary-color, #007bff); + color: #fff; + border-radius: 0.18rem; + font-size: 1.05rem; } .card-body p.card-text strong { display: inline; - font-size: 1.4rem !important; - color: var(--primary-color); + font-size: 1.18rem !important; + color: var(--primary-color, #007bff); margin-bottom: 0; white-space: nowrap; } .product-img-fixed { object-fit: cover; - height: 100px; + height: 120px; + width: 100%; + border-radius: 8px 8px 0 0; + background: #f3f3f3; + display: block; } .product-img-placeholder { - height: 100px; + height: 120px; + width: 100%; + object-fit: cover; + border-radius: 8px 8px 0 0; + background: #f3f3f3 + url('data:image/svg+xml;utf8,Sin imagen') + no-repeat center center; + display: block; +} + +/* Responsive: mejorar altura y espaciado en móvil */ +@media (max-width: 600px) { + .product-card { + padding: 0.25rem; + border-radius: 8px; + } + .product-card .product-image, + .product-img-cover, + .product-img-fixed, + .product-img-placeholder { + height: 70px; + max-height: 70px; + min-height: 70px; + border-radius: 6px 6px 0 0; + } + .product-card .card-body { + padding: 0.4rem 0.4rem 0.5rem 0.4rem; + } + .product-card .card-title { + font-size: 0.98rem !important; + margin-bottom: 0.08rem; + } + .product-card .card-text { + font-size: 0.92rem; + } + .badge-km { + font-size: 0.58rem !important; + padding: 0.13rem 0.22rem !important; + } + .product-tags { + font-size: 0.95rem !important; + } + .card-body p.card-text { + min-height: 1.1rem; + font-size: 0.95rem; + margin-bottom: 0.3rem; + } + .product-card .product-supplier { + font-size: 0.82rem !important; + } +} + +/* Accesibilidad: focus visible */ +.product-card:focus-visible { + outline: 2.5px solid var(--primary-color, #007bff); + outline-offset: 2px; }