From 31e25a0fdab685edea413fd3e449479d622da6ae Mon Sep 17 00:00:00 2001
From: Klaus Quibeldey-Cirkel <klaus.quibeldey-cirkel@mni.thm.de>
Date: Sun, 28 Mar 2021 13:23:59 +0200
Subject: [PATCH] blink animation for time-span filter

---
 .../moderator-comment-list.component.scss     | 21 +++++++++++++++++--
 .../comment-list/comment-list.component.scss  | 19 ++++++++++++++++-
 src/theme/blue-theme/blueTheme.const.ts       |  2 +-
 src/theme/dark-theme/darkTheme.const.ts       |  2 +-
 .../highContrastTheme.const.ts                |  2 +-
 src/theme/light-theme/light-theme.ts          |  2 +-
 src/theme/purple-theme/purpleTheme.const.ts   |  2 +-
 7 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss
index 8c2a3959d..7765513b0 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss
@@ -93,7 +93,7 @@ app-comment {
 }
 
 h3 {
-  font-size: 18pt!important;
+  font-size: 18pt !important;
   margin: 10px;
 }
 
@@ -127,8 +127,25 @@ h3 {
 
 .selected {
   color: var(--red) !important;
+  font-weight: bold;
+  animation-name: animation_blink_5s;
+  animation-timing-function: ease-in;
+  animation-duration: 2s;
+  animation-iteration-count: 2;
+  opacity: 1.0 !important;
+}
+
+@keyframes animation_blink_5s {
+  50% {
+    opacity: 0;
+  }
 }
 
 .active-filter .mat-icon {
-  color: var(--red);
+  color: var(--red) !important;
+  animation-name: animation_blink_5s;
+  animation-timing-function: ease-in;
+  animation-duration: 2s;
+  animation-iteration-count: 3;
+  opacity: 1.0 !important;
 }
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index dc47b596a..c64e33d06 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -209,8 +209,25 @@ h3 {
 
 .selected {
   color: var(--red) !important;
+  font-weight: bold;
+  animation-name: animation_blink_5s;
+  animation-timing-function: ease-in;
+  animation-duration: 2s;
+  animation-iteration-count: 2;
+  opacity: 1.0 !important;
+}
+
+@keyframes animation_blink_5s {
+  50% {
+    opacity: 0;
+  }
 }
 
 .active-filter .mat-icon {
-  color: var(--red);
+  color: var(--red) !important;
+  animation-name: animation_blink_5s;
+  animation-timing-function: ease-in;
+  animation-duration: 2s;
+  animation-iteration-count: 3;
+  opacity: 1.0 !important;
 }
diff --git a/src/theme/blue-theme/blueTheme.const.ts b/src/theme/blue-theme/blueTheme.const.ts
index 85f26bada..fc6581f68 100644
--- a/src/theme/blue-theme/blueTheme.const.ts
+++ b/src/theme/blue-theme/blueTheme.const.ts
@@ -19,7 +19,7 @@ export const blue = {
   '--on-cancel': '#000000',
 
   '--green': '#4caf50',
-  '--red': '#f44336',
+  '--red': '#ff0000',
   '--yellow': '#FFD54F',
   '--blue': '#3f51b5',
   '--purple': '#9c27b0',
diff --git a/src/theme/dark-theme/darkTheme.const.ts b/src/theme/dark-theme/darkTheme.const.ts
index d3216a756..7cd195e52 100644
--- a/src/theme/dark-theme/darkTheme.const.ts
+++ b/src/theme/dark-theme/darkTheme.const.ts
@@ -21,7 +21,7 @@ export const dark = {
   '--on-cancel': '#ffffff',
 
   '--green': 'lightgreen',
-  '--red': 'Firebrick',
+  '--red': 'red',
   '--white': '#ffffff',
   '--yellow': 'yellow',
   '--blue': '#3f51b5',
diff --git a/src/theme/high-contrast-theme/highContrastTheme.const.ts b/src/theme/high-contrast-theme/highContrastTheme.const.ts
index 0909b93ea..bb11ab8c3 100644
--- a/src/theme/high-contrast-theme/highContrastTheme.const.ts
+++ b/src/theme/high-contrast-theme/highContrastTheme.const.ts
@@ -21,7 +21,7 @@ export const highcontrast = {
   '--on-cancel': '#ffffff',
 
   '--green': '#3ce933',
-  '--red': 'Firebrick',
+  '--red': 'red',
   '--white': '#ffffff',
   '--yellow': '#e9d533',
   '--blue': '#3833e9',
diff --git a/src/theme/light-theme/light-theme.ts b/src/theme/light-theme/light-theme.ts
index f4ab96792..c26611a07 100644
--- a/src/theme/light-theme/light-theme.ts
+++ b/src/theme/light-theme/light-theme.ts
@@ -21,7 +21,7 @@ export const arsnova = {
   '--on-cancel': '#ffffff',
 
   '--green': '#00FF00',
-  '--red': 'Firebrick',
+  '--red': 'red',
   '--white': '#ffffff',
   '--yellow': 'red',
   '--blue': '#002878',
diff --git a/src/theme/purple-theme/purpleTheme.const.ts b/src/theme/purple-theme/purpleTheme.const.ts
index 165a12279..494418293 100644
--- a/src/theme/purple-theme/purpleTheme.const.ts
+++ b/src/theme/purple-theme/purpleTheme.const.ts
@@ -21,7 +21,7 @@ export const purple = {
   '--on-cancel': '#ffffff',
 
   '--green': 'green',
-  '--red': 'Firebrick',
+  '--red': 'red',
   '--white': '#ffffff',
   '--yellow': 'red',
   '--blue': 'blue',
-- 
GitLab