From 07076136321a5a8962444c45bf07922c306bdb0a Mon Sep 17 00:00:00 2001
From: dweinber <dweinber@users.noreply.github.com>
Date: Wed, 22 Nov 2023 12:40:12 +0100
Subject: [PATCH 1/2] Prefix CSS animations to avoid conflicts if websites use
 the same names already

---
 .../skin-modern/components/_bufferingoverlay.scss    |  4 ++--
 src/scss/skin-modern/components/_closebutton.scss    |  4 ++--
 .../components/_hugeplaybacktogglebutton.scss        | 12 ++++++------
 .../skin-modern/components/_hugereplaybutton.scss    |  4 ++--
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/scss/skin-modern/components/_bufferingoverlay.scss b/src/scss/skin-modern/components/_bufferingoverlay.scss
index 81b37bee7..9c54fa799 100644
--- a/src/scss/skin-modern/components/_bufferingoverlay.scss
+++ b/src/scss/skin-modern/components/_bufferingoverlay.scss
@@ -38,7 +38,7 @@
     $buffering-animation-duration: 2s;
     $buffering-animation-delay: $buffering-animation-duration * .1;
 
-    @keyframes fancy {
+    @keyframes #{$prefix}-fancy {
       0% {
         opacity: 0;
         transform: scale(1);
@@ -63,7 +63,7 @@
       }
     }
 
-    animation: fancy $buffering-animation-duration ease-in infinite;
+    animation: #{$prefix}-fancy $buffering-animation-duration ease-in infinite;
     background: url('../../assets/skin-modern/images/loader.svg') no-repeat center;
     display: inline-block;
     height: 2em;
diff --git a/src/scss/skin-modern/components/_closebutton.scss b/src/scss/skin-modern/components/_closebutton.scss
index 4490e86a6..c61236632 100644
--- a/src/scss/skin-modern/components/_closebutton.scss
+++ b/src/scss/skin-modern/components/_closebutton.scss
@@ -4,7 +4,7 @@
 .#{$prefix}-ui-closebutton {
   @extend %ui-button;
 
-  @keyframes pulsate {
+  @keyframes #{$prefix}-pulsate {
     20% {
       transform: scale(1.1);
     }
@@ -27,6 +27,6 @@
   &:hover {
     @include svg-icon-shadow;
 
-    animation: pulsate 1s;
+    animation: #{$prefix}-pulsate 1s;
   }
 }
diff --git a/src/scss/skin-modern/components/_hugeplaybacktogglebutton.scss b/src/scss/skin-modern/components/_hugeplaybacktogglebutton.scss
index 7da0269e3..d793a0a8b 100644
--- a/src/scss/skin-modern/components/_hugeplaybacktogglebutton.scss
+++ b/src/scss/skin-modern/components/_hugeplaybacktogglebutton.scss
@@ -3,7 +3,7 @@
 .#{$prefix}-ui-hugeplaybacktogglebutton {
   @extend %ui-button;
 
-  @keyframes fade-out {
+  @keyframes #{$prefix}-fade-out {
     from {
       opacity: 1;
       visibility: visible;
@@ -16,7 +16,7 @@
     }
   }
 
-  @keyframes fade-in {
+  @keyframes #{$prefix}-fade-in {
     from {
       opacity: 0;
       transform: scale(2);
@@ -28,7 +28,7 @@
     }
   }
 
-  @keyframes breathe {
+  @keyframes #{$prefix}-breathe {
     30% {
       transform: scale(1.1);
     }
@@ -53,13 +53,13 @@
     width: 100%;
 
     &:hover {
-      animation: breathe 3s ease-in-out infinite;
+      animation:  #{$prefix}-breathe 3s ease-in-out infinite;
     }
   }
 
   &.#{$prefix}-on {
     .#{$prefix}-image {
-      animation: fade-out $animation-duration cubic-bezier(.55, .055, .675, .19); // http://easings.net/de#easeInCubic
+      animation: #{$prefix}-fade-out $animation-duration cubic-bezier(.55, .055, .675, .19); // http://easings.net/de#easeInCubic
       transition: visibility 0s $animation-duration;
       visibility: hidden;
     }
@@ -67,7 +67,7 @@
 
   &.#{$prefix}-off {
     .#{$prefix}-image {
-      animation: fade-in $animation-duration cubic-bezier(.55, .055, .675, .19); // http://easings.net/de#easeInCubic
+      animation:  #{$prefix}-fade-in $animation-duration cubic-bezier(.55, .055, .675, .19); // http://easings.net/de#easeInCubic
       visibility: visible;
     }
   }
diff --git a/src/scss/skin-modern/components/_hugereplaybutton.scss b/src/scss/skin-modern/components/_hugereplaybutton.scss
index a6a6a86d3..a60c82056 100644
--- a/src/scss/skin-modern/components/_hugereplaybutton.scss
+++ b/src/scss/skin-modern/components/_hugereplaybutton.scss
@@ -16,7 +16,7 @@
     height: 100%;
     width: 100%;
 
-    @keyframes spin {
+    @keyframes #{$prefix}-spin {
       50% {
         transform: rotate(180deg) scale(1.1);
       }
@@ -27,7 +27,7 @@
     }
 
     &:hover {
-      animation: spin .5s ease-in;
+      animation: #{$prefix}-spin .5s ease-in;
     }
   }
 }

From d0559cdc0ffe9391a0466e069da5e11e7256b845 Mon Sep 17 00:00:00 2001
From: dweinber <dweinber@users.noreply.github.com>
Date: Wed, 22 Nov 2023 12:42:03 +0100
Subject: [PATCH 2/2] Add changelog entry

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 29e2a2002..da9d98156 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+
+### Fixed
+- Potential name clashing in CSS animations due to missing `bmpui` prefix
+
 ## [3.52.1] - 2023-11-13
 
 ### Fixed