diff --git a/css/options.css b/css/options.css
index e80e2a9..cbf9fd8 100644
--- a/css/options.css
+++ b/css/options.css
@@ -5,25 +5,27 @@ body {
padding: 16px;
background-color: #fafafa;
+ width: 320px;
}
a {
text-decoration: none;
}
-.toggle-input {
+.toggle > input {
display: none;
}
-.toggle-label {
+.toggle > label {
position: relative;
min-width: 16px;
cursor: pointer;
margin: 8px;
padding: 8px 0 8px 32px;
+ float: right;
}
-.toggle-label:before, .toggle-label:after {
+.toggle > label:before, .toggle > label:after {
content: "";
position: absolute;
margin: 0;
@@ -36,7 +38,7 @@ a {
transition: all 0.3s ease;
}
-.toggle-label:before {
+.toggle > label:before {
left: 1px;
width: 34px;
height: 14px;
@@ -44,7 +46,7 @@ a {
border-radius: 8px;
}
-.toggle-label:after {
+.toggle > label:after {
left: 0;
width: 20px;
height: 20px;
@@ -53,33 +55,19 @@ a {
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
}
-.toggle-label .toggle--on {
- display: none;
-}
-
-.toggle-label .toggle--off {
- display: inline-block;
-}
-.toggle-input:checked + .toggle-label:before {
+.toggle > input:checked + label:before {
background-color: #4285f4;
opacity: 0.4;
}
-.toggle-input:checked + .toggle-label:after {
+.toggle > input:checked + label:after {
background-color: #3367d6;
-ms-transform: translate(80%, -50%);
-webkit-transform: translate(80%, -50%);
transform: translate(80%, -50%);
}
-.toggle-input:checked + .toggle-label .toggle--on {
- display: inline-block;
-}
-
-.toggle-input:checked + .toggle-label .toggle--off {
- display: none;
-}
button {
background-color: #3367d6;
diff --git a/html/options.html b/html/options.html
index 819c8b0..896775d 100644
--- a/html/options.html
+++ b/html/options.html
@@ -7,10 +7,13 @@
+
- Open images in a new tab:
-
-
+
+ Open images in a new tab:
+
+
+
+