Оптимизирована галерея фотографий и убраны индикаторы качества с фото
- Создан отдельный CSS файл products/static/products/css/gallery.css для стилей галереи - Перенесены все стили модальной карусели из quality_indicator.css в gallery.css - Добавлены современные стрелки навигации с широкой областью нажатия (80px) - Улучшена видимость элементов управления: контрастные обводки, тени, градиенты - Круглые индикаторы с полупрозрачной подложкой для видимости на любом фоне - Адаптивные размеры для планшетов (60px) и мобильных (50px) - Убраны визуальные индикаторы качества фото из углов изображений - Оставлена только текстовая информация о качестве под фотографиями - Упрощена разметка списка товаров - удалены ненужные обёртки и стили
This commit is contained in:
244
myproject/products/static/products/css/gallery.css
Normal file
244
myproject/products/static/products/css/gallery.css
Normal file
@@ -0,0 +1,244 @@
|
||||
/**
|
||||
* Стили для фото-галереи товаров
|
||||
* Современный дизайн карусели с адаптивной навигацией
|
||||
*/
|
||||
|
||||
/* =========================
|
||||
Модальная галерея товара
|
||||
========================= */
|
||||
|
||||
/* Компактный modal footer */
|
||||
.modal-footer.py-2 {
|
||||
padding-top: 0.5rem !important;
|
||||
padding-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
/* Стандартные индикаторы Bootstrap в стиле круглых точек */
|
||||
#photoCarousel .carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin: 0;
|
||||
z-index: 15;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
|
||||
padding: 8px 15px 5px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-indicators button {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin: 0 4px;
|
||||
padding: 0;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
opacity: 0.8;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-indicators button:hover {
|
||||
opacity: 1;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-indicators button.active {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
opacity: 1;
|
||||
background-color: #fff;
|
||||
border-color: rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Современные кнопки навигации с широкой областью нажатия */
|
||||
#photoCarousel .carousel-control-prev,
|
||||
#photoCarousel .carousel-control-next {
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease, background-color 0.3s ease;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-control-next {
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
|
||||
}
|
||||
|
||||
#photoCarousel:hover .carousel-control-prev,
|
||||
#photoCarousel:hover .carousel-control-next {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-control-prev:hover {
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-control-next:hover {
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
|
||||
}
|
||||
|
||||
/* Современные иконки стрелок */
|
||||
#photoCarousel .carousel-control-prev-icon,
|
||||
#photoCarousel .carousel-control-next-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
/* Скрываем стандартные SVG иконки Bootstrap */
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
/* Переопределяем стандартные стрелки Bootstrap на современные */
|
||||
#photoCarousel .carousel-control-prev-icon::before,
|
||||
#photoCarousel .carousel-control-next-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-top: 3px solid #333;
|
||||
border-right: 3px solid #333;
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-control-prev-icon::before {
|
||||
transform: translate(-40%, -50%) rotate(-135deg);
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-control-next-icon::before {
|
||||
transform: translate(-60%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Эффект при наведении на иконку */
|
||||
#photoCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
|
||||
#photoCarousel .carousel-control-next:hover .carousel-control-next-icon {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-control-prev:hover .carousel-control-prev-icon::before,
|
||||
#photoCarousel .carousel-control-next:hover .carousel-control-next-icon::before {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Адаптивность
|
||||
========================= */
|
||||
|
||||
/* Планшеты и средние экраны */
|
||||
@media (max-width: 768px) {
|
||||
/* Уменьшаем отступы modal body на мобильных */
|
||||
.modal-body.p-2 {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
/* Уменьшаем высоту изображения на маленьких экранах */
|
||||
.carousel-item > div {
|
||||
min-height: 40vh !important;
|
||||
}
|
||||
|
||||
.carousel-item img {
|
||||
max-height: 55vh !important;
|
||||
max-width: 95vw !important;
|
||||
}
|
||||
|
||||
/* Компактный footer */
|
||||
.modal-footer {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
#galleryQualityStatus .badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.25rem 0.4rem;
|
||||
}
|
||||
|
||||
/* Индикаторы чуть меньше на мобильных */
|
||||
#photoCarousel .carousel-indicators button {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-indicators button.active {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
/* Стрелки меньше на планшетах */
|
||||
#photoCarousel .carousel-control-prev,
|
||||
#photoCarousel .carousel-control-next {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-control-prev-icon,
|
||||
#photoCarousel .carousel-control-next-icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-control-prev-icon::before,
|
||||
#photoCarousel .carousel-control-next-icon::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-width: 2.5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Мобильные телефоны */
|
||||
@media (max-width: 576px) {
|
||||
#photoCarousel .carousel-indicators button {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-indicators button.active {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
/* Текст счетчика более компактный */
|
||||
.text-nowrap {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Кнопки навигации меньше на мобильных */
|
||||
#photoCarousel .carousel-control-prev,
|
||||
#photoCarousel .carousel-control-next {
|
||||
width: 50px;
|
||||
/* Стрелки видимы всегда на мобильных */
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#photoCarousel:hover .carousel-control-prev,
|
||||
#photoCarousel:hover .carousel-control-next {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-control-prev-icon,
|
||||
#photoCarousel .carousel-control-next-icon {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#photoCarousel .carousel-control-prev-icon::before,
|
||||
#photoCarousel .carousel-control-next-icon::before {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user