@import "../../../variables.less";

#blacklist-container {
    display: flex;
    flex-wrap: wrap;

    &>div {
        flex-grow: 1;
        padding: 24px;
    }

    .blacklist-items {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
}

#affilliate-clicks {
    padding: 24px;

    &>input {
        margin-bottom: 16px;
        padding: 8px;
        font-size: 1.1rem;
        border-radius: .3rem;
    }
}

.skeleton:empty {
    box-sizing: content-box;
    height: 170px;
    background-color: @color-almost-white;
    border-radius: 0px 0px 0px 0px;
    background-image:
        linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%),
        linear-gradient(#cccccc 20px, transparent 0),
        radial-gradient(circle 14px at 14px 14px, #cccccc 13px, transparent 14px),
        linear-gradient(#cccccc 20px, transparent 0),
        radial-gradient(circle 14px at 14px 14px, #cccccc 13px, transparent 14px),
        linear-gradient(#cccccc 20px, transparent 0),
        radial-gradient(circle 14px at 14px 14px, #cccccc 13px, transparent 14px);
    background-repeat: repeat-y;
    background-size: 50px 170px, 300px 170px, 28px 170px, 300px 170px, 28px 170px, 300px 170px, 28px 170px;
    background-position: 0 0, 70px 125px, 20px 120px, 70px 75px, 20px 70px, 70px 25px, 20px 20px;
    animation: shineForSkeleton 2s infinite;
}

@keyframes shineForSkeleton {
    to {
        background-position: 100% 0, 70px 125px, 20px 120px, 70px 75px, 20px 70px, 70px 25px, 20px 20px;
    }
}