@import './custom-theme.scss'; .creator-database-table { .table { border-collapse: separate; border-spacing: 0; th { background-color: #f8f9fa; border-top: none; border-bottom: 1px solid #dee2e6; padding: 1rem 0.75rem; font-weight: 600; font-size: 0.875rem; color: #495057; cursor: pointer; position: relative; vertical-align: middle; &:first-child { border-top-left-radius: 0.5rem; } &:last-child { border-top-right-radius: 0.5rem; } &:hover { background-color: #f1f3f5; } } td { padding: 0.75rem; vertical-align: middle; border-bottom: 1px solid #f1f3f4; font-size: 0.875rem; } tbody tr { &:hover { background-color: rgba(0, 0, 0, 0.02); } &.selected { background-color: rgba(99, 102, 241, 0.05); &:hover { background-color: rgba(99, 102, 241, 0.1); } } &:last-child td { border-bottom: none; } } } .creator-cell { .creator-avatar { position: relative; width: 36px; height: 36px; margin-right: 12px; img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #e2e8f0; } .verified-badge { position: absolute; bottom: 0; right: 0; background-color: #10b981; color: white; border-radius: 50%; width: 10px; height: 10px; font-size: 8px; display: flex; align-items: center; justify-content: center; } } .creator-name { font-weight: 500; } } .category-pill { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 1rem; background-color: #f8f9fa; font-size: 0.75rem; color: #495057; white-space: nowrap; &.phones { background-color: rgba(99, 102, 241, 0.1); color: #6366f1; } &.women { background-color: rgba(244, 114, 182, 0.1); color: #f472b6; } &.sports { background-color: rgba(52, 211, 153, 0.1); color: #34d399; } &.food { background-color: rgba(251, 146, 60, 0.1); color: #fb923c; } &.health { background-color: rgba(56, 189, 248, 0.1); color: #38bdf8; } &.kitchen { background-color: rgba(168, 85, 247, 0.1); color: #a855f7; } } .level-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.75rem; white-space: nowrap; &.ecommerce-level { background-color: rgba(99, 102, 241, 0.1); color: #6366f1; } &.exposure-level { background-color: rgba(14, 165, 233, 0.1); color: #0ea5e9; &[data-level^="KOC"] { background-color: rgba(52, 211, 153, 0.1); color: #34d399; } &[data-level^="KOL"] { background-color: rgba(251, 113, 133, 0.1); color: #fb7185; } } } .colored-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; &.blue { background-color: #6366f1; } } .social-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; &.tiktok-icon { font-size: 14px; color: #000000; } } }