MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Tag: Reverted
Line 1: Line 1:
/*photo frames */
/*photo frames */
/* Стиль для контейнера ряда фотографий */
.photo-row {
    display: flex; /* Используем flexbox для ряда */
    justify-content: center; /* Центрируем фотографии по горизонтали */
    flex-wrap: wrap; /* Если фотографии не помещаются, они переносятся на следующую строку */
    gap: 10px; /* Отступ между фотографиями (суммарно 10px + 10px = 20px между рамками) */
    margin: 0 auto; /* Центрируем сам контейнер на странице */
}
/* Стиль для контейнера изображения с рамкой и подписью */
/* Стиль для контейнера изображения с рамкой и подписью */
.photo-frame {
.photo-row .photo-frame {
     display: inline-block; /* Для корректного центрирования и отображения */
     display: inline-block; /* Оставляем inline-block внутри flex-контейнера */
     text-align: center; /* Центрирование подписи */
     text-align: center; /* Центрирование подписи */
     margin: 5px 5px; /* Верх/низ: 5px, лево/право: 5px */
     margin: 5px 0; /* Убираем боковые отступы, так как используем gap в photo-row */
     vertical-align: top; /* Выравнивание по верхнему краю, чтобы избежать смещений */
     vertical-align: top; /* Выравнивание по верхнему краю */
     opacity: 0; /* Изначально невидимый */
     opacity: 0; /* Изначально невидимый */
     animation: fadeIn 1s ease forwards; /* Анимация появления */
     animation: fadeIn 1s ease forwards; /* Анимация появления */
Line 23: Line 32:


/* Стиль для самой фотографии */
/* Стиль для самой фотографии */
.photo-frame img {
.photo-row .photo-frame img {
     border-style: solid; /* Тип рамки */
     border-style: solid; /* Тип рамки */
     border-color: #D02019; /* Красная рамка */
     border-color: #D02019; /* Красная рамка */
Line 35: Line 44:


/* Эффект при наведении */
/* Эффект при наведении */
.photo-frame img:hover {
.photo-row .photo-frame img:hover {
     border-width: 23px 47px 23px 47px; /* Увеличиваем рамку при наведении */
     border-width: 25px 50px 25px 50px; /* Увеличиваем рамку при наведении */
     transform: scale(1.05); /* Увеличение изображения на 5% */
     transform: scale(1.05); /* Увеличение изображения на 5% */
}
}


/* Стиль для подписи */
/* Стиль для подписи */
.photo-frame .caption {
.photo-row .photo-frame .caption {
     background: none; /* Без фона */
     background: none; /* Без фона */
     font-size: 14px; /* Размер шрифта подписи */
     font-size: 14px; /* Размер шрифта подписи */
     margin-top: 5px; /* Отступ сверху от изображения */
     margin-top: 5px; /* Отступ сверху от изображения */
     color: #000; /* Цвет текста подписи (черный) */
     color: #000; /* Цвет текста подписи (черный) */
}
/* Подсветка центральной фотографии для ряда из 3 фотографий */
.photo-row.three-photos .photo-frame:nth-child(2) img {
    width: 170px; /* Увеличиваем ширину центральной фотографии */
    height: 255px; /* Увеличиваем высоту центральной фотографии */
    border-color: #FF4040; /* Более яркий оттенок красного для рамки */
    border-width: 25px 50px 25px 50px; /* Рамка чуть толще */
}
/* Подсветка центральных фотографий для ряда из 4 фотографий */
.photo-row.four-photos .photo-frame:nth-child(2) img,
.photo-row.four-photos .photo-frame:nth-child(3) img {
    width: 170px; /* Увеличиваем ширину центральных фотографий */
    height: 255px; /* Увеличиваем высоту центральных фотографий */
    border-color: #FF4040; /* Более яркий оттенок красного для рамки */
    border-width: 25px 50px 25px 50px; /* Рамка чуть толще */
}
}


Navigation menu