Improved save notification.

3 files changed, 23 insertions, 10 deletions

diff --git a/options.css b/options.css
index 7daef46..2cb09b9 100644
--- a/options.css
+++ b/options.css
@@ -43,14 +43,10 @@ div.section p.option {
 	margin-left: 1em;
 }
 
-div#button {
+div.button {
 	text-align: center;
 }
 
-p#status {
-	color: #390;
-}
-
 button {
 	color: #ddd;
 	background-color: #222;
@@ -67,5 +63,22 @@ button:hover {
 }
 
 button:focus {
-	outline: 0;
+	outline: 0em;
+}
+
+div#status {
+	width: 20em;
+	height: 1em;
+	padding: 1em;
+	margin: auto;
+	position: absolute;
+	top: 18.4em;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	visibility: hidden;
+	color: #fff;
+	background-color: #390;
+	border-radius: 1em;
 }
diff --git a/options.html b/options.html
index 93b1cd6..c26eb0d 100644
--- a/options.html
+++ b/options.html
@@ -16,10 +16,10 @@
 				<p class="option"><input type="radio" name="timeformat" id="t12" /><label for="t12"> 12-hour</label></p>
 				<p class="option"><input type="radio" name="timeformat" id="t24" /><label for="t24"> 24-hour</label></p>
 			</div>
-			<div id="button">
+			<div class="button">
 				<button id="save">Save</button>
 			</div>
-			<p id="status">&nbsp;</p>
 		</div>
+		<div id="status">Options saved.</p>
 	</body>
 </html>
diff --git a/options.js b/options.js
index fd930c7..0c640b4 100644
--- a/options.js
+++ b/options.js
@@ -11,9 +11,9 @@ function saveOptions() {
 	localStorage['timeformat'] = timeformat;
 
 	var status = document.getElementById('status');
-	status.innerHTML = 'Options saved.';
+	status.style['visibility'] = 'visible';
 
-	setTimeout(function() {status.innerHTML = '&nbsp;'}, 1000);
+	setTimeout(function() {status.style['visibility'] = 'hidden'}, 2000);
 }
 
 function restoreOptions() {