athphane/relaticle-comments
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve: polish mention badge styling with dark mode support

Browse Source 
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.
This commit is contained in:
ilyapashayan
2026-04-01 01:22:37 +04:00
parent d189743a9c
commit 4b783e437f
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
resources/css/comments.css
View File

@@ -1,17 +1,20 @@
.comment-mention { .comment-mention {
display: inline-flex;
align-items: center;
background-color: rgb(var(--primary-50)); background-color: rgb(var(--primary-50));
color: rgb(var(--primary-600)); color: rgb(var(--primary-700));
margin-top: 0; border: 1px solid rgb(var(--primary-200));
margin-bottom: 0; border-radius: 0.375rem;
display: inline-block; padding: 0.0625rem 0.375rem;
border-radius: 0.25rem; font-size: 0.875em;
padding-left: 0.25rem; font-weight: 600;
padding-right: 0.25rem; line-height: 1.5;
font-weight: 500;
white-space: nowrap; white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
} }
.dark .comment-mention { .dark .comment-mention {
background-color: rgb(var(--primary-400) / 0.1); background-color: rgb(var(--primary-400) / 0.15);
color: rgb(var(--primary-400)); color: rgb(var(--primary-300));
border-color: rgb(var(--primary-400) / 0.3);
} }