<commit_before>.time-slider {
    margin: 0 .6em .6em .6em;
    padding-top: 4em;
    cursor: pointer;
    position: relative;
}

.time-slider .slider .area {
    position: relative;
    border: 1px solid #707077;
    border-left: none;
    z-index: 2;
    height: .4em;
    top: -.3em;
    cursor: pointer;
    background: #707077;
}

.time-slider .slider .slice {
    background: #6c6;
    background: linear-gradient(to bottom, #6c6 0%, #1c1 100%);
    left: 0px;
    right: 0px;
    height: 0.4em;
    position: absolute;

    /* click events should happen only in the slider to get the correct coordinates */
    pointer-events: none;
}

.time-slider .slider .handle {
    position: absolute;
    width: .5em;
    height: .5em;
    border: 4px solid #707077;
    border-radius: .5em;
    background: #6c6;
    background: linear-gradient(to bottom, #6c6 0%, #1c1 100%);
    z-index: 3;
    top: -.25em;
    margin-right: -.5em;
    margin-bottom: -.6em;
    cursor: ew-resize;
}

.time-slider .slider .handle.active {
    border: 4px solid #909099;
}

.time-slider .slider .handle.from {
    margin-left: .6em;
}

.time-slider .slider .handle.until {

}
<commit_msg>better styling for active handlers<commit_after>.time-slider {
    margin: 0 .6em .6em .6em;
    padding-top: 4em;
    cursor: pointer;
    position: relative;
}

.time-slider .slider .area {
    position: relative;
    border: 1px solid #707077;
    border-left: none;
    z-index: 2;
    height: .4em;
    top: -.3em;
    cursor: pointer;
    background: #707077;
}

.time-slider .slider .slice {
    background: #6c6;
    background: linear-gradient(to bottom, #6c6 0%, #1c1 100%);
    left: 0px;
    right: 0px;
    height: 0.4em;
    position: absolute;

    /* click events should happen only in the slider to get the correct coordinates */
    pointer-events: none;
}

.time-slider .slider .handle {
    position: absolute;
    width: .5em;
    height: .5em;
    border: .3em solid #707077;
    border-radius: .8em;
    background: #6c6;
    background: linear-gradient(to bottom, #6c6 0%, #1c1 100%);
    z-index: 3;
    top: -.39em;
    margin-right: -.5em;
    margin-bottom: -.6em;
    cursor: ew-resize;
}

.time-slider .slider .handle.active {
    border-color: #6c6;
    background: #e0e0e0;
}

.time-slider .slider .handle.from {
    margin-left: .6em;
}

.time-slider .slider .handle.until {

}

{'fraction_non_alphanumeric': 0.14231738035264482, 'fraction_numerical': 0.056255247691015954, 'mean_word_length': 2.4788321167883214, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6902873', 'n_tokens_mistral': 957, 'n_tokens_neox': 876, 'n_words': 238}