diff --git a/icon128.psd b/icon128.psd new file mode 100644 index 0000000..c92b9bd Binary files /dev/null and b/icon128.psd differ diff --git a/icon128_g.png b/icon128_g.png new file mode 100644 index 0000000..067f32e Binary files /dev/null and b/icon128_g.png differ diff --git a/icon128_o.png b/icon128_o.png new file mode 100644 index 0000000..6be2819 Binary files /dev/null and b/icon128_o.png differ diff --git a/popup.html b/popup.html index ca099c0..783b0b7 100644 --- a/popup.html +++ b/popup.html @@ -13,25 +13,25 @@
Enable globally:
- +
Enable individually:
- ---placeholder--- +
---placeholder---

- My rules:
+ My rules (advanced):
---placeholder---
- Add new rule (advanced):
+ Add new rule:
-
+
diff --git a/popup_style.css b/popup_style.css index 1e22924..6c100c7 100644 --- a/popup_style.css +++ b/popup_style.css @@ -1,9 +1,8 @@ body { margin: 0; - margin-bottom: 5px; background: #fff; - min-width: 400px; - max-width: 500px; + min-width: 500px; + max-width: 600px; font-family: "Arial"; } @@ -12,19 +11,23 @@ img { margin: auto; } -input[type="text"] { - width: auto; -} + + + #main { max-width: 500px; max-height: 400px; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; + white-space: nowrap; } #content { + display: inline-block; + padding: 10px 10px 20px 10px; + width: calc(100% - 20px); font-size: 14pt; - padding: 10px; } .header { @@ -37,8 +40,12 @@ input[type="text"] { margin: 5px 0px 5px 0px; } -#default::after, #addRuleOuter::after, #addRuleInner::after { - content: ""; + + + + +#default::after, #presets::after, .element::after, #rules::after, #addRuleOuter::after, #addRuleInner::after { + content: " "; clear: both; display: table; } @@ -48,28 +55,27 @@ input[type="text"] { float: left; } -.enable { - border: none; - background: none; -} -.enable:hover { - filter: brightness(90%); -} - -.disable { - color: #fcf9fa; - background: #b2aeaf; -} -.disable:hover { - background: #4c4b4c; -} - -#statusBtn { +.status { display: block; + width: 145px; + height: 145px; margin-top: 10px; margin-left: 10px; padding: 0; + background: none; + border: none; } +.status:hover { + filter: brightness(90%); +} +.statusEnabled { + background-image: url("icon128_o.png"); +} +.statusDisabled { + background-image: url("icon128_g.png"); +} + + #individual { width: 50%; @@ -80,6 +86,10 @@ input[type="text"] { margin: 10px 0px 0px 10px; } + + + + #custom { margin-top: 20px; width: 100%; @@ -111,7 +121,30 @@ input[type="text"] { border: none; border-radius: 5px; } - #addRuleBtn:hover { background-color: #96d160; } + + + + + +.switch { + margin-right: 10px; + width: 50px; + height: 26px; + float: left; + background: none; + border: none; +} +.switchEnabled { + background-image: url("switchEnabled.png"); +} +.switchDisabled { + background-image: url("switchDisabled.png"); +} + +.textElement { + clear: right; + text-overflow: ellipsis; +} \ No newline at end of file diff --git a/switchDisabled.png b/switchDisabled.png new file mode 100644 index 0000000..ca59c04 Binary files /dev/null and b/switchDisabled.png differ diff --git a/switchEnabled.png b/switchEnabled.png new file mode 100644 index 0000000..cbeb529 Binary files /dev/null and b/switchEnabled.png differ diff --git a/toggle.psd b/toggle.psd new file mode 100644 index 0000000..4da7fa5 Binary files /dev/null and b/toggle.psd differ