From 793db918027c0b8e15f1a7740e3f5d9702b981b1 Mon Sep 17 00:00:00 2001
From: hackademix <giorgio@maone.net>
Date: Tue, 15 Mar 2022 23:56:15 +0100
Subject: [PATCH] Donation button.

---
 src/_locales/en/messages.json |  6 ++++++
 src/ui/common.css             | 21 +++++++++++++++++++++
 src/ui/options.html           |  1 +
 3 files changed, 28 insertions(+)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index e559f74..75b3348 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -688,5 +688,11 @@
   },
   "themeAuto": {
     "message": "Auto"
+  },
+  "DonateShort": {
+    "message": "Donate"
+  },
+  "DonateLong": {
+    "message": "NoScript is Free Software and can't exist without your help. Please donate now!"
   }
 }
diff --git a/src/ui/common.css b/src/ui/common.css
index fb61ec5..5ad134f 100644
--- a/src/ui/common.css
+++ b/src/ui/common.css
@@ -144,4 +144,25 @@ input:disabled, button:disabled, select:disabled {
     drop-shadow(-2px 2px 2px var(--focus-color))
     drop-shadow(2px -2px 2px var(--focus-color))
     drop-shadow(-2px -2px 2px var(--focus-color));
+}
+
+
+.donate {
+  color: var(--text-color1) !important;
+  border-color: transparent;
+  background-color: transparent;
+  transform: scale(1.2);
+  transition: all .5s ease-in-out;
+  text-transform: uppercase;
+}
+
+.donate:hover {
+  transform: scale(1.8);
+}
+
+.donate:before {
+  content: "♥";
+  color: var(--accent-color);
+  padding: 0 .2em 0 .5em;
+  text-shadow: 0.04em 0.04em 0.04em #0004;
 }
\ No newline at end of file
diff --git a/src/ui/options.html b/src/ui/options.html
index 36dca87..4cc24fe 100644
--- a/src/ui/options.html
+++ b/src/ui/options.html
@@ -38,6 +38,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
 </div>
 <button id="btn-export" accesskey="__MSG_Export_accesskey__">__MSG_Export__</button>
 <button id="btn-reset" accesskey="__MSG_Reset_accesskey__">__MSG_Reset__</button>
+<a class="donate button" href="https://noscript.net/donate" title="__MSG_DonateLong__">__MSG_DonateShort__</a>
 </div>
 </div>
 <section id="sect-io">