add rotation animation on stream play

[panikweb-esperanzah.git] / panikweb_esperanzah / static / css / style.scss

diff --git a/panikweb_esperanzah/static/css/style.scss b/panikweb_esperanzah/static/css/style.scss
index 64fc7a395922f1d77a4bb2dddd26b31483b23de9..47ac565ae29d8fbbadaa0d8761d40351ac9c01de 100644 (file)
--- a/panikweb_esperanzah/static/css/style.scss
+++ b/panikweb_esperanzah/static/css/style.scss
@@ -1657,6 +1657,28 @@ div.player-stop {
        background-position: 0 0;
 }
 
+#streamSymbol {
+       &::after {
+               content: "";
+               border: 2px solid transparent;
+               border-radius: 100%;
+               position: absolute;
+               top: -2px;
+               left: -2px;
+               right: -2px;
+               bottom: -2px;
+       }
+       &.player-stop::after {
+               animation: rotating-border 2s 1;
+       }
+}
+
+@keyframes rotating-border {
+       0%  {border-left-color: darken($red, 10%); transform: rotate(0deg);}
+       99% {border-left-color: darken($red, 10%); transform: rotate(360deg);}
+       100% {border-left-color: transparent;}
+}
+
 div.playListControls {
        button.action-stop {
                background-repeat: no-repeat;