Deltacms/module/album/view/index/index.css

52 lines
900 B
CSS
Raw Normal View History

2023-10-20 11:24:09 +02:00
section > * {
box-sizing: border-box;
padding: 0;
}
section > .row > .col3 {
2023-10-06 08:34:35 +02:00
padding: 5px;
}
.galleryPicture {
2023-10-20 11:24:09 +02:00
box-sizing: content-box;
2023-10-30 11:11:02 +01:00
padding: 6px 0 2px;
2023-10-06 08:34:35 +02:00
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
2023-10-30 11:11:02 +01:00
background-color: rgba(0, 0, 0, 0);
2023-10-06 08:34:35 +02:00
transition: background-color 1.3s ease;
}
.galleryPicture:hover {
2023-10-30 11:11:02 +01:00
background-color: rgba(255, 255, 255, 0.3);
2023-10-06 08:34:35 +02:00
}
.galleryName {
2023-10-30 11:11:02 +01:00
line-height: 1.20;
2023-10-06 08:34:35 +02:00
font-size: 0.85em;
}
2023-10-20 11:24:09 +02:00
.galleryPicture > figure > img {
2023-10-30 11:11:02 +01:00
max-height: 100%;
max-width: 96%;
2023-10-20 11:24:09 +02:00
object-fit: contain;
2023-10-06 08:34:35 +02:00
}
2023-10-20 11:24:09 +02:00
figure, figcaption {
border: none;
margin: 0;
padding: 0;
2023-10-06 08:34:35 +02:00
}
2023-10-20 11:24:09 +02:00
/* styles adaptatifs */
2023-10-21 18:18:09 +02:00
@media (min-width: 1920px) {
.galleryPicture > figure > img {
max-height: 200px;
}
}
2023-10-06 08:34:35 +02:00
@media (max-width: 799px) {
section > .row {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
section > .row > .col3 {
2023-10-20 11:24:09 +02:00
flex: 0 0 50%;
2023-10-06 08:34:35 +02:00
}
}