diff --git a/frontend/src/components/ThreatEvents.svelte b/frontend/src/components/ThreatEvents.svelte index b336e1a..5d94acf 100644 --- a/frontend/src/components/ThreatEvents.svelte +++ b/frontend/src/components/ThreatEvents.svelte @@ -344,12 +344,12 @@ .sidebar-clear-all-btn:hover { background: #fecaca; } /* Active filters */ - .active-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } - .active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #6b7280; } - .filter-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px; border-left: 4px solid; background: white; font-size: var(--font-size-tiny); border: 1px solid; } - .filter-tag-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } - .filter-tag-remove { background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 0.9rem; padding: 0 0 0 2px; line-height: 1; } - .filter-tag-remove:hover { color: #374151; } + .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 8px; padding: 0.5rem 0.75rem; flex-shrink: 0; } + .active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; } + .filter-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; background: white; border: 1px solid #ddd; border-left-width: 3px; border-radius: 4px; font-size: var(--font-size-tiny); font-weight: 500; color: #333; } + .filter-tag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } + .filter-tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; background: #e5e7eb; border-radius: 50%; cursor: pointer; font-size: var(--font-size-tiny); color: #666; line-height: 1; padding: 0; margin-left: 0.15rem; } + .filter-tag-remove:hover { background: #f44336; color: white; } /* Content */ .page-main { flex: 1; overflow-y: auto; padding: 16px 24px 24px; min-width: 0; display: flex; flex-direction: column; } @@ -437,5 +437,8 @@ :global(.dark-mode) .date-cell { color: #9ca3af; } :global(.dark-mode) .table-loading, :global(.dark-mode) .table-empty { color: #9ca3af; } :global(.dark-mode) .ioc-type-badge { background: #1e3a5f; color: #93c5fd; } - :global(.dark-mode) .filter-tag { background: #1e293b; } + :global(.dark-mode) .active-filters { background: #111827; border-color: #374151; } + :global(.dark-mode) .active-filters-label { color: #9ca3af; } + :global(.dark-mode) .filter-tag { background: #1f2937; border-color: #374151; color: #e5e5e5; } + :global(.dark-mode) .filter-tag-remove { background: #374151; color: #e5e7eb; }