css: add liked hint (animated)

111116 · Feb 12, 2020 · abc0a8d · abc0a8d
1 parent 3ba9b54
commit abc0a8d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/scripts/addbeatmaplist.js b/scripts/addbeatmaplist.js
@@ -137,6 +137,9 @@ var NSaddBeatmapList = {
                 if (err) {
                     console.error("Error saving liked beatmap list");
                 }
+                else {
+                    icon.classList.add("hint-liked");
+                }
             });
             icon.onclick = box.undolike;
             icon.classList.remove("icon-heart-empty");
@@ -153,6 +156,7 @@ var NSaddBeatmapList = {
             icon.onclick = box.like;
             icon.classList.remove("icon-heart");
             icon.classList.add("icon-heart-empty");
+            icon.classList.remove("hint-liked");
         }
         if (window.liked_sid_set) {
             box.initlike();

diff --git a/style/main.css b/style/main.css
@@ -1,3 +1,5 @@
+@charset "UTF-8"; 
+
 body{
 	background: #191919;
   color: #eee;
@@ -784,7 +786,28 @@ progress.finished::-webkit-progress-value{background:#6cf;}
 .beatmaplike.icon-heart {
   color: #ed4956;
 }
-
+.beatmaplike.hint-liked::after {
+  content: "已收藏";
+  white-space: nowrap;
+  position: absolute;
+  bottom: 32px;
+  right: -8px;
+  color: white;
+  background: rgba(0,0,0,0.8);
+  font-size: 0.6em;
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+  border-radius: 0.3em;
+  opacity: 0;
+  animation-name: fadeoutmy;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-in;
+}
+@keyframes fadeoutmy {
+  0%   { opacity: 1; }
+  70%   { opacity: 1; }
+  100% { opacity: 0; }
+}
 
 
 .panel table {