diff options
| author | David Vazgenovich Shakaryan <dvshakaryan@gmail.com> | 2014-02-28 09:41:41 -0800 |
|---|---|---|
| committer | David Vazgenovich Shakaryan <dvshakaryan@gmail.com> | 2014-02-28 09:41:41 -0800 |
| commit | feb6a68c654e77f0e424a93c6711874c6442d08d (patch) | |
| tree | 0fca2ff501cfab25f3e121e873adefadf30774fc | |
| parent | 87530f8d03cab2ba535250b404d358315c60e7b0 (diff) | |
| download | tempo-feb6a68c654e77f0e424a93c6711874c6442d08d.tar.gz tempo-feb6a68c654e77f0e424a93c6711874c6442d08d.tar.xz | |
Pretty options page.
| -rw-r--r-- | options.css | 59 | ||||
| -rw-r--r-- | options.html | 25 | ||||
| -rw-r--r-- | options.js | 2 |
3 files changed, 74 insertions, 12 deletions
diff --git a/options.css b/options.css new file mode 100644 index 0000000..1f72b1f --- /dev/null +++ b/options.css @@ -0,0 +1,59 @@ +body { + color: #222; + background-color: #222; + font-family: 'Verdana', sans-serif; + padding: 0em; + margin: 0em; + + -webkit-user-select: none; + user-select: none; +} + +div#container { + width: 20em; + height: 11em; + padding: 1em; + margin: auto; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + background-color: #ddd; + border-radius: 1em; +} + +h1 { + font-size: 1.6em; + font-family: 'Lato', sans-serif; + text-align: center; + padding: 0em; + margin: 0em; +} + +p#status { + color: #390; +} + +p#button { + text-align: center; +} + +button { + color: #ddd; + background-color: #222; + font-size: 1em; + font-weight: bold; + padding: 1em; + border: 0em; + border-radius: 1em; +} + +button:hover { + background-color: #130; +} + +button:focus { + outline: 0; +} diff --git a/options.html b/options.html index 5f7058d..148d247 100644 --- a/options.html +++ b/options.html @@ -3,21 +3,24 @@ <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="fonts/lato.css" /> - <link rel="stylesheet" type="text/css" href="style.css" /> + <link rel="stylesheet" type="text/css" href="options.css" /> <title>Tempo Options</title> <script type="text/javascript" src="options.js"></script> </head> <body> - <p> - <select id="timeformat"> - <option value="12">12-hour</option> - <option value="24">24-hour</option> - </select> - </p> - <p id="status"></p> - <p> - <button id="save">Save</button> - </p> + <div id="container"> + <h1>Options</h1> + <p>Time format: + <select id="timeformat"> + <option value="12">12-hour</option> + <option value="24">24-hour</option> + </select> + </p> + <p id="status"> </p> + <p id="button"> + <button id="save">Save</button> + </p> + </div> </body> </html> @@ -10,7 +10,7 @@ function save_options() { var status = document.getElementById('status'); status.innerHTML = 'Options saved.'; - setTimeout(function() {status.innerHTML = ''}, 1000); + setTimeout(function() {status.innerHTML = ' '}, 1000); } function restore_options() { |