Improve the lock feedback

mozilla-services · Jan 18, 2017 · 4d82677 · 4d82677
1 parent ccb48f5
commit 4d82677
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/popup/hoverpad.css b/popup/hoverpad.css
@@ -58,11 +58,11 @@ h1 {
 	position: absolute;
 	top: 5px;
 	left: 20px;
-	z-index: 10;
+	z-index: 30;
 	font-size: 20px;
 	font-weight: normal;
 	font-family: sans-serif;
-	color: #bbb;
+	color: #999;
 }
 
 #lock {
@@ -75,6 +75,21 @@ h1 {
 	font-size: 16px;
 }
 
+#lock.locked {
+	display: block;
+	top: 0;
+	left: 0;
+	text-align: center;
+	padding-top: 220px;
+	color: black;
+	font-weight: bold;
+	font-size: 30px;
+	height: 100%;
+	width: 100%;
+	background: #ebb;
+	z-index: 20;
+}
+
 span {
 	position: absolute;
 	bottom: 20px;

diff --git a/popup/hoverpad.js b/popup/hoverpad.js
@@ -31,6 +31,7 @@ function initialize() {
 
 
 function toggleLock() {
+  lock.classList.toggle('locked');
   if (inputBody.style.display === 'none') {
     inputBody.style.display = '';
     // Put focus at the end of the textarea.