diff --git a/README.md b/README.md index 57e71ae..898712d 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,8 @@ To be updated 2. Load extension for debugging in Chrome: - Make a symlink `manifest.json` -> `manifest-v3.json` ```shell - ln -s manifest.json manifest-v3.json + rm manifest.json + ln -s manifest-v3.json manifest.json ``` - Go to [chrome://extensions/](chrome://extensions/) - Click on `Load unpacked` button on the top left @@ -70,7 +71,8 @@ To be updated 3. Load extension for debugging in Firefox: - Make a symlink `manifest.json` -> `manifest-v2.json` ```shell - ln -s manifest.json manifest-v2.json + rm manifest.json + ln -s manifest-v2.json manifest.json ``` - Go to [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox) - Click on `Load Temporary Add-on` diff --git a/images/dont-open-it.gif b/images/dont-open-it.gif new file mode 100644 index 0000000..3cd15f9 Binary files /dev/null and b/images/dont-open-it.gif differ diff --git a/popup/popup.css b/popup/popup.css index 6d97185..9994022 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -1,8 +1,6 @@ body { - width: 350px; - min-height: 400px; - padding: 1rem; - /*border: 1px solid gray;*/ + width: 400px; + margin: 0; background-color: #ff9295; @@ -12,6 +10,18 @@ body { color: white; } +body > * { + padding: 8px 16px; +} + +body > *:first-child { + padding-top: 16px; +} + +body > *:last-child { + padding-bottom: 16px; +} + header { text-align: center; font-weight: bold; @@ -23,7 +33,7 @@ header { .logo { width: 6rem; - margin: 1rem 0; + margin-top: 16px; transform: rotate(180deg); transition: all 200ms ease-in; } @@ -32,44 +42,78 @@ main { text-align: center; } -main > * { - margin: 1rem 0; +section > * { + margin: 12px 0; } -label[for='action'] { +label { display: block; - margin-bottom: 1rem; + margin-bottom: 16px; + font-size: large; } .hidden { display: none; } -input[type='text'], select { +input[type='text'], input[type='number'], textarea, select { width: 100%; - height: 38px; + height: 40px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; - border-radius: 4px; + border-radius: 6px; box-shadow: none; box-sizing: border-box; } -input[type='text']:focus, select:focus { +input[type='text']:focus, input[type='number']:focus, textarea:focus, select:focus { border: 2px solid #fac400; outline: 0; } -label[for="action"] { +textarea { + min-height: 90px; +} + +.button-container { + display: flex; + justify-content: center; +} + +.button-container button { + height: 40px; + padding: 6px 20px; + cursor: pointer; + + color: white; + background-color: rgba(255, 255, 255, 0.2); + transition: background-color 0.2s linear; + + border: none; + outline: none; + border-radius: 20px; + + display: flex; + align-items: center; + justify-content: center; +} + +.button-container button:hover { + background-color: rgba(255, 255, 255, 0.4); +} + +.button-container button span { font-size: large; + margin-right: 4px; } footer { display: flex; justify-content: space-between; + align-items: center; flex-direction: row; - padding-top: 1.5rem; + background: rgba(122, 122, 122, 0.2); } footer > * { @@ -92,10 +136,6 @@ footer a { border-radius: 4px; } -.self-destruct span { - visibility: hidden; -} - .self-destruct:hover { font-weight: bold; background: repeating-linear-gradient( @@ -107,8 +147,12 @@ footer a { ); } +.self-destruct span { + display: none; +} + .self-destruct:hover span { - visibility: visible; + display: inline; } .self-destruct-text { diff --git a/popup/popup.html b/popup/popup.html index 5511b4a..99be40e 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -11,39 +11,62 @@ - - - - + + + + + + - - - What to do - - Replace with image - Replace with text - Remove completely - - - - - Behold! The spamminator! - Destroyed by the spamminator - Just spamming - Spam! - Spam everywhere - Spam man - Spam? Spam? Spam? - What kind of spam is this? - You shall not pass - Random - - - - - - - + + What to do + + Replace with image + Replace with text + Remove completely + + + + + Behold! The spamminator! + Destroyed by the spamminator + Don't open it + Just spamming + Spam! + Spam everywhere + Spam man + Spam? Spam? Spam? + What kind of spam is this? + You shall not pass + Random + + + + + + + + + ⚙ Advance + + + + + + Clear spam interval (in millisecond) + + + + + + Ban domains + + + + + « Basic + +