infowindow style okish

srcs/plugins/map_prof/styles/mp__style.css

@@ -8,12 +8,15 @@
 }
 
 #ljdp_map {
-	height: 500px;
+	height: 600px;
 	width: 100%;
 }   
 
-#temoin {
-	color: blue;
+
+@media only screen and (max-width: 700px) {
+	#ljdp_map {
+		height: 500px;
+	}   
 }
 
 

srcs/plugins/map_prof/styles/mp_info_windows.css

@@ -4,40 +4,118 @@
  */
 
 
-/*
-	window itself
-	*/
+
+
+/* **************************************
+	WINDOW ITSELF
+*/
+
 .gm-style-iw.gm-style-iw-c {
 	padding: 0px !important;
+	background-color: transparent;
+	pointer-events: none;
+	box-shadow: 0 2px 7px 1px rgba(0,0,0,.3);
+	box-shadow: none;
+	border-radius: 0 !important;
 }
 
-/*
-	triangle
-	*/
+
+
+
+/* **************************************
+	TRIANGLE
+*/
+
 .gm-style-iw-tc {
 	display: none !important;
 }
 
-/*
-	croice
-.gm-ui-hover-effect {
+
+
+
+/* **************************************
+	CROICE
+*/
+
+button.gm-ui-hover-effect {
 	display: none !important;
 }
-	*/
 
-/*
-	content
-	*/
-#info_window {
-	/* size must be double js 'height' value (mp_info_windows.js -> '{ ... height: XXX }' */
-	--size: 300px;
-	--margin: 10px;
-	--real-size: calc(var(--size) - 2 * var(--margin));
-	box-sizing: border-box;
-	margin: var(--margin);
-	padding: 5px;
-	height: var(--real-size);
-	width:  var(--real-size);
-	overflow: scroll;
+
+
+
+/* **************************************
+	CONTENT
+*/
+
+#infowindow_limits,
+#infowindow_limits * {
+	display: flex;
+	flex-direction: row;
+	position: relative;
+	margin: auto;
+	width: 100%;
+}
+
+#infowindow_limits {
+	/* height must be twice js 'height' value (mp_info_windows.js -> '{ ... height: XXX }' */
+	height: 400px;
+	width: 400px;
+	flex-direction: column;
+	pointer-events: none;
+	background-color: transparent;
+}
+
+#infowindow_limits .infowindow {
+	pointer-events: auto;
+	height: auto;
+	max-height: 400px;
+	padding: 0px;
+	overflow: scroll;
+	flex-direction: column;
+	border-radius: 5px;
+	background-color: #fff;
+}
+
+#infowindow_limits #infowindow_close {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	width: 50px;
+	height: 50px;
+	cursor: pointer;
+}
+
+#infowindow_limits .infowindow_head {
+	padding: 20px;
+	background-color: #ba197a;
+}
+
+#infowindow_limits .infowindow_head p {
+	font-size: 120%;
+	font-weight: 500;
+	color: #fff;
+	margin-right: 30px;
+}
+
+#infowindow_limits .infowindow_body {
+	padding: 20px;
+	margin-bottom: 10px;
+}
+
+#infowindow_limits .infowindow_body::after {
+	content: "";
+	position: absolute;
+	top: -5px;
+	left: 15%;
+	margin: auto;
+	width: 70%;
+	height: 1px;
+	background-color: #ba197a;
+}
+
+#infowindow_limits .infowindow_body p {
+	font-size: 120%;
+	font-weight: 500;
 }