webview-ui/src/kilocode.css - main - outbreak/kilocode

webview-ui/src/kilocode.css
96 строк2 KB
Chris Hasson
feat: add ShimmerText component (#3938)
01 дек 2025, 19:23
01 дек 2025, 19:235bbb94e
/* Kilo Code specific styles */

/* Slash command highlighting */
.slash-command-match-textarea-highlight {
	background-color: color-mix(in srgb, var(--vscode-focusBorder) 30%, transparent);
	border-radius: 3px;
	box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--vscode-focusBorder) 30%, transparent);
	color: transparent;
}

/* Custom slow pulse animation for task progress squares */
@keyframes slow-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

.animate-slow-pulse {
	animation: slow-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-slow-pulse-delayed {
	animation: slow-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	animation-delay: 0.5s;
}

/* Fade-in animation for new task progress squares */
@keyframes fade-in {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.animate-fade-in {
	animation: fade-in 0.2s ease-out forwards;
}

/* Message highlight animation for timeline clicks */
@keyframes message-highlight {
	0% {
		background-color: transparent;
	}
	20% {
		background-color: color-mix(in srgb, var(--vscode-focusBorder) 25%, transparent);
	}
	100% {
		background-color: transparent;
	}
}

.animate-message-highlight {
	animation: message-highlight 1s ease-out forwards;
}

/* Shimmer text animation - horizontal shimmer effect */
@keyframes shimmer {
	0% {
		background-position: 200% center;
	}
	100% {
		background-position: -200% center;
	}
}

.shimmer-text {
	/* Allow custom colors via CSS variables, with fallback to VSCode theme colors */
	--shimmer-base: var(--shimmer-foreground, color-mix(in srgb, var(--vscode-descriptionForeground) 80%, black));
	--shimmer-highlight: var(--shimmer-highlight-color, color-mix(in srgb, var(--shimmer-base) 70%, white));

	color: var(--shimmer-base);
	background: linear-gradient(
		90deg,
		var(--shimmer-base) 0%,
		var(--shimmer-base) 35%,
		var(--shimmer-highlight) 45%,
		var(--shimmer-highlight) 50%,
		var(--shimmer-highlight) 55%,
		var(--shimmer-base) 65%,
		var(--shimmer-base) 100%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	animation: shimmer 2.5s linear infinite;
}