From 277cac323e71f01eaff1a343c89271af56d80495 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Sat, 26 Sep 2020 09:47:34 +0200
Subject: [PATCH] CSS for adding and deleting images

---
 django_lostplaces/lostplaces/static/main.css | 67 +++++++++++++++-----
 1 file changed, 50 insertions(+), 17 deletions(-)

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;