MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Line 82: Line 82:
}
}


/*photo frames */
/* Photo frames */
/* Контейнер рамки */
.photo-frame {
.photo-frame {
     display: inline-block;
     display: inline-block;
     text-align: center;
     text-align: center;
     margin: 5px;
     margin: 5px 5px;
     vertical-align: top;
     vertical-align: top;
     opacity: 0;
     opacity: 0;
     animation: fadeIn 1s ease forwards;
     animation: fadeIn 1s ease forwards;
}
}
 
@keyframes fadeIn {
.photo-border {
    from { opacity: 0; transform: translateY(10px);}
     display: inline-block;
    to { opacity: 1; transform: translateY(0);}
}
/* Новая обертка для рамки */
.photo-frame-img {
     display: block;
    width: 150px;
    height: 225px;
    object-fit: contain; /* <--- Это важно! */
    background: #fff; /* На всякий случай, чтобы фото не сливалось с рамкой */
    margin: 0 auto;
    box-sizing: border-box;
     border-style: solid;
     border-style: solid;
     border-color: #D02019;
     border-color: #D02019;
     border-width: 20px 40px 20px 40px;
     border-width: 20px 40px 20px 40px;
     transition: all 0.3s ease;
     transition: all 0.3s ease;
    background: white; /* Фон рамки */
}
}
 
/* Эффект при наведении */
.photo-border:hover {
.photo-frame-img:hover {
     border-width: 23px 47px 23px 47px;
     border-width: 23px 47px 23px 47px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.18);
     transform: scale(1.05);
}
}
 
/* Подпись */
.photo-frame img {
.photo-frame .caption {
     display: block;
     margin-top: 0.6em;
    width: 150px;
     font-size: 1em;
    height: 225px;
     color: #333;
     object-fit: contain;   /* <--- Ключевой момент! */
     background: white;     /* Заполнит пустое место */
}
}


/* Стиль для подписи */
.photo-frame .caption {
    background: none; /* Без фона */
    font-size: 14px; /* Размер шрифта подписи */
    margin-top: 5px; /* Отступ сверху от изображения */
    color: #000; /* Цвет текста подписи (черный) */
}


/* Media */
/* Media */

Navigation menu