photo_server_json_con_aves22/public/css/gallery.css
2026-04-18 20:14:42 +02:00

80 lines
1.4 KiB
CSS

.gallery {
display: block;
padding: 6px; /* più stretto */
}
.gallery-section-title {
font-size: 18px;
font-weight: 600;
margin: 18px 6px 6px; /* più compatto */
color: #444;
}
.gallery-section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* leggermente più piccole */
gap: 4px; /* SPACING RIDOTTO */
padding: 0 4px;
}
.thumb {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 6px; /* più compatto */
overflow: hidden;
background: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.12); /* più leggero */
position: relative;
cursor: pointer;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.play-icon {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba(0,0,0,0.55);
color: white;
padding: 2px 4px;
border-radius: 4px;
font-size: 11px;
}
/* ===============================
SOFT DELETE — X DIAGONALE
=============================== */
.soft-deleted {
position: relative;
opacity: 0.55;
}
.soft-deleted::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 3px;
background: rgba(255, 0, 0, 0.85);
transform: translate(-50%, -50%) rotate(45deg);
pointer-events: none;
}
.soft-deleted::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 3px;
background: rgba(255, 0, 0, 0.85);
transform: translate(-50%, -50%) rotate(-45deg);
pointer-events: none;
}