fix: Replace @apply with plain CSS for Tailwind compatibility

This commit is contained in:
FluxKit
2026-02-25 13:05:13 +00:00
parent 8ae8abd7a7
commit 5e1b49c4de

View File

@@ -533,15 +533,43 @@ onMounted(() => {
<style scoped>
.btn-primary {
@apply px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition-colors;
padding: 0.5rem 1rem;
background-color: rgb(99 102 241);
color: white;
font-weight: 500;
border-radius: 0.5rem;
transition: background-color 0.2s;
}
.btn-primary:hover {
background-color: rgb(79 70 229);
}
.btn-secondary {
@apply px-4 py-2 bg-pulse-border hover:bg-pulse-border-hover text-white font-medium rounded-lg transition-colors;
padding: 0.5rem 1rem;
background-color: rgb(55 65 81);
color: white;
font-weight: 500;
border-radius: 0.5rem;
transition: background-color 0.2s;
}
.btn-secondary:hover {
background-color: rgb(75 85 99);
}
.input-field {
@apply bg-pulse-bg border border-pulse-border rounded-lg px-3 py-2 text-white placeholder-pulse-muted focus:outline-none focus:border-primary-500 transition-colors;
background-color: rgb(17 24 39);
border: 1px solid rgb(55 65 81);
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
color: white;
transition: border-color 0.2s;
}
.input-field::placeholder {
color: rgb(107 114 128);
}
.input-field:focus {
outline: none;
border-color: rgb(99 102 241);
}
.line-clamp-2 {