3 files changed, 83 insertions, 0 deletions
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 521ed263b..beabbc6d9 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1089,6 +1089,9 @@ function init_stream(stream) {
 		el = ev.target.closest('.item.share > button[data-type="clipboard"]');
 		if (el && navigator.clipboard) {	// Clipboard
 			navigator.clipboard.writeText(el.dataset.url);
+			el.classList.remove('ok');
+			el.dataset.foo = el.offsetWidth; // it does nothing, but it is needed. See https://github.com/FreshRSS/FreshRSS/pull/5295
+			el.classList.add('ok');
 			return false;
 		}
 
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index b3a631760..7ec6207c6 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1891,6 +1891,46 @@ input:checked + .slide-container .properties {
 	color: var(--frss-font-color-error);
 }
 
+.item.share button {
+	position: relative;
+}
+
+.item.share button::after {
+	content: "";
+	background: var(--frss-background-color-transparent);
+	display: inline-block;
+	position: absolute;
+	padding-top: 1rem;
+	opacity: 0;
+	transition: all 0.6s;
+	left: 0px;
+	width: 100%;
+	height: 1rem;
+}
+
+.item.share button:active::after {
+	opacity: 1;
+	width: 0;
+	transition: 0s
+}
+
+.item.share button.ok::before {
+	content: "✓";
+	position: absolute;
+	left: 0.5rem;
+	animation-duration: 10s;
+	animation-fill-mode: both;
+	animation-name: easeOut;
+}
+
+@keyframes easeOut {
+	0% {opacity: 1;}
+
+	80% {opacity: 1;}
+
+	100% {opacity: 0;}
+}
+
 .deprecated {
 	font-weight: bold;
 }
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 759a5a834..08f56ba20 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1891,6 +1891,46 @@ input:checked + .slide-container .properties {
 	color: var(--frss-font-color-error);
 }
 
+.item.share button {
+	position: relative;
+}
+
+.item.share button::after {
+	content: "";
+	background: var(--frss-background-color-transparent);
+	display: inline-block;
+	position: absolute;
+	padding-top: 1rem;
+	opacity: 0;
+	transition: all 0.6s;
+	right: 0px;
+	width: 100%;
+	height: 1rem;
+}
+
+.item.share button:active::after {
+	opacity: 1;
+	width: 0;
+	transition: 0s
+}
+
+.item.share button.ok::before {
+	content: "✓";
+	position: absolute;
+	right: 0.5rem;
+	animation-duration: 10s;
+	animation-fill-mode: both;
+	animation-name: easeOut;
+}
+
+@keyframes easeOut {
+	0% {opacity: 1;}
+
+	80% {opacity: 1;}
+
+	100% {opacity: 0;}
+}
+
 .deprecated {
 	font-weight: bold;
 }