From 4b783e437fabcdb1c4dd32027543accf9c1b2407 Mon Sep 17 00:00:00 2001 From: ilyapashayan Date: Wed, 1 Apr 2026 01:22:37 +0400 Subject: [PATCH] improve: polish mention badge styling with dark mode support Add border, adjust sizing, font-weight and transition for both light (primary-50 bg / primary-700 text / primary-200 border) and dark (15% primary bg / primary-300 text / 30% primary border) themes using Filament CSS variables. --- resources/css/comments.css | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/resources/css/comments.css b/resources/css/comments.css index 3846440..08ec231 100644 --- a/resources/css/comments.css +++ b/resources/css/comments.css @@ -1,17 +1,20 @@ .comment-mention { + display: inline-flex; + align-items: center; background-color: rgb(var(--primary-50)); - color: rgb(var(--primary-600)); - margin-top: 0; - margin-bottom: 0; - display: inline-block; - border-radius: 0.25rem; - padding-left: 0.25rem; - padding-right: 0.25rem; - font-weight: 500; + color: rgb(var(--primary-700)); + border: 1px solid rgb(var(--primary-200)); + border-radius: 0.375rem; + padding: 0.0625rem 0.375rem; + font-size: 0.875em; + font-weight: 600; + line-height: 1.5; white-space: nowrap; + transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .dark .comment-mention { - background-color: rgb(var(--primary-400) / 0.1); - color: rgb(var(--primary-400)); + background-color: rgb(var(--primary-400) / 0.15); + color: rgb(var(--primary-300)); + border-color: rgb(var(--primary-400) / 0.3); }