nitro-react/src/components/campaign/CampaignView.scss

.nitro-campaign-calendar {
    width: $nitro-calendar-width;
    height: $nitro-calendar-height;

    .calendar-item {
        filter: brightness(80%);

        &.active {
            filter: brightness(100%);
        }
    }
}

.campaign-spritesheet {
    display: block;
    background: transparent url("../../assets/images/campaign/campaign_spritesheet.png") no-repeat;

    &.available {
        width: 69px;
        height: 78px;
        background-position: -5px -5px;
    }
    
    &.campaign-day-generic-bg {
        max-width: 202px;
        height: 447px;
        background-position: -84px -5px;
    }
    
    &.campaign-opened {
        width: 96px;
        height: 66px;
        background-position: -296px -5px;
    }
    
    &.locked {
        width: 42px;
        height: 42px;
        background-position: -296px -81px;
    }
    
    &.locked-bg {
        width: 132px;
        height: 132px;
        background-position: -402px -5px;
    }
    
    &.next {
        width: 33px;
        height: 34px;
        background-position: -5px -147px;
    }
    
    &.prev {
        width: 33px;
        height: 34px;
        background-position: -296px -147px;
    }
    
    &.unavailable {
        width: 68px;
        height: 78px;
        background-position: -339px -147px;
    }
    
    &.unlocked-bg {
        width: 190px;
        height: 189px;
        background-position: -296px -235px;
    }
}