✨ Display & Delete in love list

2024-10-11 19:08:52 +02:00
parent b702bc629c
commit 1077400260
23 changed files with 644 additions and 523 deletions
@@ -0,0 +1,88 @@
+.popupOverlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(#ffffff, 0.2);
+	backdrop-filter: blur(2px);
+
+	& > .popup {
+		z-index: 1;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		margin: 10px;
+		border: 1px solid #e1e1e1;
+		border-radius: 10px;
+		background-color: #ffffff;
+		overflow: hidden;
+
+		& > .popupHeader {
+			display: grid;
+			grid-template-columns: 1fr 20px;
+			align-items: center;
+			gap: 20px;
+			padding: 10px;
+			border-bottom: 1px solid #e1e1e1;
+			background-color: #f9e2e5;
+
+			& > .popupTitle {
+				font-size: 1.1rem;
+				color: #d94253;
+			}
+
+			& > .popupCloseButton {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border: none;
+				border-radius: 5px;
+				background-color: transparent;
+				color: #d94253;
+				cursor: pointer;
+			}
+		}
+
+		& > .popupContent {
+			padding: 10px;
+			font-size: 0.95rem;
+			font-weight: 300;
+			color: #d94253;
+		}
+
+		& > .popupButtonsContainer {
+			display: flex;
+			flex-wrap: nowrap;
+			justify-content: space-evenly;
+			align-items: center;
+			padding: 10px;
+
+			& > .popupButton {
+				display: grid;
+				grid-template-columns: 20px 1fr;
+				align-items: center;
+				gap: 5px;
+				padding: 5px 15px;
+				border: 1px solid #a8a5a6;
+				border-radius: 5px;
+				background-color: #ffffff;
+				font-size: 1rem;
+				color: #d94253;
+				cursor: pointer;
+				transition: background-color 0.3s ease;
+
+				&:first-child {
+					border: none;
+				}
+
+				&:hover {
+					background-color: #f9e2e5;
+				}
+			}
+		}
+	}
+}