From a2c236b42171c510fe548cf7bb59e9965986a67d Mon Sep 17 00:00:00 2001
From: ikipatang <5412352+ikipatang@users.noreply.github.com>
Date: Tue, 28 Nov 2017 00:15:40 +0100
Subject: [PATCH] Settings: better looking form
---
src/options/options.css | 78 +++++++++++++++++++++++++++++++++-------
src/options/options.html | 22 +++++++++---
2 files changed, 83 insertions(+), 17 deletions(-)
diff --git a/src/options/options.css b/src/options/options.css
index 19f36be..a2a80d2 100644
--- a/src/options/options.css
+++ b/src/options/options.css
@@ -1,18 +1,70 @@
-
-body {
- width: 25em;
- font-family: "Open Sans Light", sans-serif;
- font-size: 0.9em;
- font-weight: 300;
+.main{
+ font: 14px sans-serif;
}
-input#url {
- margin: 0.5em;
- width: 50em;
- height: 2.5em;
+.main .row{
+ text-align: left;
}
-input {
- width: 20em;
- height: 2.5em;
+/* The form title */
+
+.main .row > label span{
+ color: #1a1a1a;
+ width: 100em;
+ vertical-align: center;
+ padding-left: 5px;
+ padding-right: 30px;
}
+
+.main input{
+ color: #1a1a12;
+ width: 31em;
+ box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
+ padding: 5px;
+ border: 1px solid #dbdbdb;
+}
+
+.main input[type=checkbox]{
+ box-shadow: none;
+ width: auto;
+ margin-top: 13px;
+}
+
+.main button{
+ display: block;
+ border-radius: 2px;
+ font-weight: bold;
+ padding: 8px 22px;
+ margin-left: 10em;
+}
+
+/* Making the form responsive. Remove this media query
+ if you don't need the form to work on mobile devices. */
+
+/*@media (max-width: 600px) {
+
+ .main{
+ padding: 30px;
+ max-width: 480px;
+ }
+
+ .main .row{
+ max-width: 300px;
+ margin: 25px auto;
+ text-align: left;
+ }
+
+ .main .row > label span{
+ display: block;
+ text-align: left;
+ padding: 0 0 15px;
+ }
+
+ .main input[type=checkbox]{
+ margin-top:0;
+ }
+
+ .main button{
+ margin: 0;
+ }
+}*/
diff --git a/src/options/options.html b/src/options/options.html
index 20aeb68..1c6b7ef 100644
--- a/src/options/options.html
+++ b/src/options/options.html
@@ -7,10 +7,24 @@
-
- URL:
- Address Bar:
-
+
+
+
+
+
+
+
+
+
+
+
+