CreatorCenter_OOIN/src/styles/DatabaseList.scss

// @import './custom-theme.scss';

// 导入变量
@import './variables';

.database-page {
    height: 100%;
    position: relative;
}
.private-creator-page {
    height: 100%;
    position: relative;
}
.creator-database-table {
    position: relative;

    .creator-cell {
        .creator-avatar {
            position: relative;
            margin-right: 12px;
            flex-shrink: 0;

            img {
                display: block;
                width: 36px;
                height: 36px;
                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: 700;
            color: #090909;
            white-space: nowrap;
        }
    }

    .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;
        }
    }

    .table-container {
        position: relative;
        
        .sticky-header {
            position: sticky;
            top: 0;
            z-index: 1;
            background: white;
            
            th {
                background: white;
                border-bottom: 2px solid #dee2e6;
            }
        }
    }
}