center box overlay added

css/centered-box-overlay.css

@@ -0,0 +1,23 @@
+#centeredBoxOverlay {
+	background: transparent;
+	opacity: 0;
+	backdrop-filter: blur(var(--blur-strength));
+	
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	
+	margin: 0;
+	padding: 0;
+	z-index: -1;
+	filter: brightness(70%);
+	transition: opacity var(--transition-speed), z-index var(--transition-speed);
+}
+
+#centeredBoxOverlay.showOverlay {
+	transition: opacity var(--transition-speed);
+	opacity: 1;
+	z-index: 0;
+}

css/style.css

@@ -6,6 +6,7 @@
 @import url('dock.css');
 @import url('dock-buttons.css');
 @import url('centered-box.css');
+@import url('centered-box-overlay.css');
 @import url('profile-image.css');
 @import url('search-box.css');
 

index.html

@@ -46,6 +46,7 @@
 		</div>
 	</div>
 
+	<div id="centeredBoxOverlay"></div>
 	<div class='centeredBar' id='centeredBox'>
 		<div id='profileImageContainer'>
 			<div id='profileImage'></div>

js/show-search-box.js

@@ -1,4 +1,5 @@
 var searchBox = document.getElementById('searchBox');
+var centeredBoxOverlay = document.getElementById('centeredBoxOverlay');
 
 let searchBoxVisility = false;
 
@@ -35,5 +36,8 @@ const toggleSearchBox = () => {
     	showSearchBox();  	
     }
 
+    // Show overlay
+    centeredBoxOverlay.classList.toggle('showOverlay');
+
 	console.log('toggle searchbox');
 }