Add some styling on the option page

See #19
aledeg · Feb 24, 2019 · 654a231 · 654a231
1 parent ca23ceb
commit 654a231
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 16 deletions.
diff --git a/options/options.css b/options/options.css
@@ -0,0 +1,20 @@
+body {
+  font: 16px sans-serif;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0.5rem 0;
+}
+label, input {
+  cursor: pointer;
+}
+legend {
+  padding: 0 0.5rem;
+}
+fieldset {
+  margin-bottom: 1.5rem;
+}
+input {
+  margin-right: 1rem;
+}
diff --git a/options/options.html b/options/options.html
@@ -3,26 +3,33 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="options.css"/>
   </head>
 
 <body>
   <form>
-    <div>
-      <label for="defaultFormat">Default format</label>
-      <label><input type="radio" name="defaultFormat" value="text">Text</label>
-      <label><input type="radio" name="defaultFormat" value="markdown">Markdown</label>
-      <label><input type="radio" name="defaultFormat" value="html">HTML</label>
-      <label><input type="radio" name="defaultFormat" value="dokuwiki">Dokuwiki</label>
-      <label><input type="radio" name="defaultFormat" value="phpbb">phpBB</label>
-    </div>
-    <div>
-      <label for="clearAfterDownload">Clear after download</label>
-      <input type="checkbox" name="clearAfterDownload">
-    </div>
-    <div>
-      <label for="clearAfterCopy">Clear after copy</label>
-      <input type="checkbox" name="clearAfterCopy">
-    </div>
+    <fieldset>
+      <legend for="defaultFormat">Default format</legend>
+      <ul>
+        <li><label><input type="radio" name="defaultFormat" value="text">Text</label></li>
+        <li><label><input type="radio" name="defaultFormat" value="markdown">Markdown</label></li>
+        <li><label><input type="radio" name="defaultFormat" value="html">HTML</label></li>
+        <li><label><input type="radio" name="defaultFormat" value="dokuwiki">Dokuwiki</label></li>
+        <li><label><input type="radio" name="defaultFormat" value="phpbb">phpBB</label></li>
+      </ul>
+    </fieldset>
+    <table>
+      <tbody>
+        <tr>
+          <td><label for="clearAfterDownload">Clear after download</label></td>
+          <td><input type="checkbox" name="clearAfterDownload" id="clearAfterDownload"></td>
+        </tr>
+        <tr>
+          <td><label for="clearAfterCopy">Clear after copy</label></td>
+          <td><input type="checkbox" name="clearAfterCopy" id="clearAfterCopy"></td>
+        </tr>
+      </tbody>
+    </table>
   </form>
   <script src="options.js"></script>
 </body>