News Design (vibe-kanban 220425f3)

Nutze das aktuelle pencil Design und setze die News Seite 100% genauso um. Validiere deine Ergebnisse mit playwright. Überschreibe tailwindcss und Flux UI Styles wenn nötig.
This commit is contained in:
vk
2026-02-13 16:02:03 +01:00
parent ff7b9a3493
commit 6aa05e47f3
4 changed files with 205 additions and 122 deletions

View File

@@ -81,4 +81,66 @@
.brand-icon {
@apply w-8 h-8 rounded-lg bg-orange-primary flex items-center justify-center;
}
/**
* News Category Badges
*
* Farbige Kategorie-Badges für News-Karten.
* Jede Farbe hat einen transparenten Hintergrund mit passender Textfarbe.
*/
.news-category-badge {
@apply bg-bg-elevated text-text-secondary border border-border-default;
}
.news-category-badge--amber {
background-color: #FF5C0033;
color: #FF5C00;
border: none;
}
.news-category-badge--zinc {
@apply bg-bg-elevated text-text-secondary border border-border-default;
}
.news-category-badge--cyan {
background-color: #06b6d433;
color: #06b6d4;
border: none;
}
.news-category-badge--orange {
background-color: #FF5C0033;
color: #FF5C00;
border: none;
}
.news-category-badge--green {
background-color: #22c55e33;
color: #22c55e;
border: none;
}
.news-category-badge--blue {
background-color: #3b82f633;
color: #3b82f6;
border: none;
}
.news-category-badge--purple {
background-color: #7c3aed33;
color: #7c3aed;
border: none;
}
.news-category-badge--emerald {
background-color: #10b98133;
color: #10b981;
border: none;
}
.news-category-badge--rose {
background-color: #f4365833;
color: #f43658;
border: none;
}
}