From 1e816faf00b9175d351a4fb3d98d697bb300ccdb Mon Sep 17 00:00:00 2001
From: Zhuobin Zhang <zhuobinzhang@microsoft.com>
Date: Fri, 10 Sep 2021 18:26:44 +0800
Subject: [PATCH] more conspicuous button selection state

---
 view/dark.css  | 45 +++++++++++++++++++++++++++++++++++++--------
 view/light.css | 45 +++++++++++++++++++++++++++++++++++++--------
 2 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/view/dark.css b/view/dark.css
index aea185a..986a860 100644
--- a/view/dark.css
+++ b/view/dark.css
@@ -395,28 +395,57 @@ ul#total li .achievementtitle,
   }
 }
 
-.grade0b.selected {
-  background-color: #c0c0c0 !important;
+.grade0b.selected,
+.grade1b.selected,
+.grade2b.selected,
+.grade3b.selected {
   box-shadow: #ccc 0px 0px 10px;
   color: #3b3b3b;
+  overflow: hidden;
+}
+.grade0b.selected.selected::after,
+.grade1b.selected.selected::after,
+.grade2b.selected.selected::after,
+.grade3b.selected.selected::after {
+  content: '';
+  position: absolute;
+  background-image: linear-gradient(to left, transparent, #fff 50%, transparent 100%);
+  opacity: 1;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  opacity: 0;
+  animation: blink 2s linear infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+    transform: translateX(-100vw);
+  }
+  50% {
+    opacity: .5;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(80px);
+  }
+}
+
+.grade0b.selected {
+  background-color: #c0c0c0 !important;
 }
 
 .grade1b.selected {
   background-color: #87cefa !important;
-  box-shadow: #ccc 0px 0px 10px;
-  color: #3b3b3b;
 }
 
 .grade2b.selected {
   background-color: #e7beff !important;
-  box-shadow: #ccc 0px 0px 10px;
-  color: #3b3b3b;
 }
 
 .grade3b.selected {
   background-color: #f1bfac !important;
-  box-shadow: #ccc 0px 0px 10px;
-  color: #3b3b3b;
 }
 
 .propinitial {
diff --git a/view/light.css b/view/light.css
index c0308b6..ba27ba2 100644
--- a/view/light.css
+++ b/view/light.css
@@ -622,28 +622,57 @@ i {
   }
 }
 
-.grade0b.selected {
-  background-color: #444 !important;
+.grade0b.selected,
+.grade1b.selected,
+.grade2b.selected,
+.grade3b.selected {
   box-shadow: #bbb 0px 0px 10px;
   color: #fff;
+  overflow: hidden;
+}
+.grade0b.selected.selected::after,
+.grade1b.selected.selected::after,
+.grade2b.selected.selected::after,
+.grade3b.selected.selected::after {
+  content: '';
+  position: absolute;
+  background-image: linear-gradient(to left, transparent, #fff 50%, transparent 100%);
+  opacity: 1;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  opacity: 0;
+  animation: blink 2s linear infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+    transform: translateX(-100vw);
+  }
+  50% {
+    opacity: .5;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(80px);
+  }
+}
+
+.grade0b.selected {
+  background-color: #444 !important;
 }
 
 .grade1b.selected {
   background-color: #407dec !important;
-  box-shadow: #bbb 0px 0px 10px;
-  color: #fff;
 }
 
 .grade2b.selected {
   background-color: #b362e7 !important;
-  box-shadow: #bbb 0px 0px 10px;
-  color: #fff;
 }
 
 .grade3b.selected {
   background-color: #ff7f4d !important;
-  box-shadow: #bbb 0px 0px 10px;
-  color: #fff;
 }
 
 @keyframes banner-in {