diff options
| -rw-r--r-- | options.css | 25 | ||||
| -rw-r--r-- | options.html | 4 | ||||
| -rw-r--r-- | options.js | 4 |
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"> </p> </div> + <div id="status">Options saved.</p> </body> </html> @@ -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 = ' '}, 1000); + setTimeout(function() {status.style['visibility'] = 'hidden'}, 2000); } function restoreOptions() { |