diff --git a/django_lostplaces/lostplaces/static/main.css b/django_lostplaces/lostplaces/static/main.css index 1cd7d75..f6a7e64 100644 --- a/django_lostplaces/lostplaces/static/main.css +++ b/django_lostplaces/lostplaces/static/main.css @@ -1588,23 +1588,56 @@ body { border: none; } .LP-ImageGrid__Container { gap: 10px; } - .LP-ImageGrid .LP-ImageGrid__Item, .LP-ImageGrid .LP-ImageGrid__Item * { - overflow: hidden; - word-break: break-all; } - .LP-ImageGrid .LP-ImageGrid__Item img { - width: 100%; - height: 100%; - object-fit: cover; } - .LP-ImageGrid .LP-ImageGrid__Item--left img { - object-position: left; } - .LP-ImageGrid .LP-ImageGrid__Item--center img { - object-position: center; } - .LP-ImageGrid .LP-ImageGrid__Item--top img { - object-position: top; } - .LP-ImageGrid .LP-ImageGrid__Item--bottom img { - object-position: botom; } - .LP-ImageGrid .LP-ImageGrid__Item--center img { - object-position: center; } + .LP-ImageGrid__Item { + position: relative; } + .LP-ImageGrid__Item, .LP-ImageGrid__Item * { + overflow: hidden; + word-break: break-all; } + .LP-ImageGrid__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + .LP-ImageGrid__Item--left img { + object-position: left; } + .LP-ImageGrid__Item--center img { + object-position: center; } + .LP-ImageGrid__Item--top img { + object-position: top; } + .LP-ImageGrid__Item--bottom img { + object-position: botom; } + .LP-ImageGrid__Item--center img { + object-position: center; } + .LP-ImageGrid__Item--add .LP-Link { + width: 100%; + height: 100%; + position: relative; + display: block; + background: #f9f9f9; } + .LP-ImageGrid__Item--add .LP-Link .LP-Icon { + width: 35px; + height: 35px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } + .LP-ImageGrid__DeleteItem { + opacity: 0.7; + visibility: hidden; + position: absolute; + top: 10px; + right: 10px; + background-color: #C09F80; + border-radius: 50%; + height: 35px; + width: 35px; } + .LP-ImageGrid__DeleteItem .LP-Link .LP-Icon { + height: 20px; + width: 20px; + position: relative; + left: 8.33333px; + top: 8.33333px; } + .LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover { + visibility: visible; } .LP-MainContainer { margin: 0 auto;