Merge branch 'feat-vip' into test

src/App.vue

@@ -258,6 +258,69 @@
 		text-overflow: ellipsis;
 	}
 
+	.member-nickname {
+		position: relative;
+		display: inline-flex;
+		max-width: 100%;
+		overflow: hidden;
+	}
+
+	.member-nickname__text,
+	.member-nickname__shine {
+		display: block;
+		max-width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.member-nickname--vip .member-nickname__text {
+		color: #E7BA80;
+	}
+
+	.member-nickname--svip .member-nickname__text {
+		background: linear-gradient(90deg, #ffb86c, #ff4fd8, #7c5cff, #35d6ff);
+		-webkit-background-clip: text;
+		background-clip: text;
+		color: transparent;
+	}
+
+	.member-nickname__shine {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(
+			110deg,
+			transparent 0%,
+			transparent 38%,
+			rgba(255, 255, 255, 0.15) 45%,
+			rgba(255, 255, 255, 1) 50%,
+			rgba(255, 255, 255, 0.15) 55%,
+			transparent 62%,
+			transparent 100%
+		);
+		background-size: 220% 100%;
+		background-position: 120% 0;
+		-webkit-background-clip: text;
+		background-clip: text;
+		color: transparent;
+		pointer-events: none;
+		animation: memberNicknameShine 3.5s infinite ease-in-out;
+	}
+
+	@keyframes memberNicknameShine {
+		0%,
+		50% {
+			background-position: 120% 0;
+		}
+
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
 	.modal {
 		height: 100%;
 		display: flex;