<commit_before>.player.video {
    position: relative;

    &.fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        video {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: none;
            width: 100%;
        }
    }

    a {
        outline-style: none;
    }

    .start {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: block;

        span {
            font-size: 128px;
            font-weight: normal;
            display: block;
            width: 128px;
            height: 128px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -64px;
            margin-top: -64px;
            color: #fff;
            text-shadow: 2px 2px 5px #000;
        }
    }

    .controls {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 22px;
        //opacity: 0;
        transition: opacity linear 0.2s;
        background: rgba(0, 0, 0, 0.6);
        padding: 2px;

        & > * {
            display: inline-block;
        }

        a {
            color: #fff;
        }

        &.muted .seek {
            right: 55px;
        }

        .seek {
            position: absolute;
            left: 27px;
            right: 55px + 22;
            top: 0;
            bottom: 0;

            div {
                position: absolute;
                top: 11px;
                left: 0;
                height: 4px;

                &.progress {
                    width: 100%;
                }

                &.loaded {
                    background: rgb(0, 136, 204);
                    height: 2px;
                    top: 13px;
                    width: 0;
                    max-width: 100%;
                }

                &.played {
                    background: #fff;
                    width: 0;
                    position: relative;

                    &::after {
                        position: absolute;
                        right: -3px;
                        top: -6px;
                        display: block;
                        width: 3px;
                        height: 15px;
                        background: #fff;
                        content: '';
                    }
                }

                &.background {
                    background: rgba(0, 0, 0, 0.5);
                    width: 100%;
                }

                &.clickable {
                    top: 5px;
                    left: 0;
                    right: 0;
                    bottom: 5px;
                    height: auto;
                    cursor: pointer;
                }
            }
        }

        .icon {
            color: #fff;
            font-size: 21px;
            width: 21px;
            height: 21px;
            font-weight: normal;
            line-height: 21px;
            cursor: pointer;

            &.play::before {
                content: '\F16B'
            }
            &.pause::before {
                content: '\F16C'
            }

            &.fullscreen {
                font-size: 18px;
                position: relative;
                top: -1px;

                &::before {
                    content: '\F0A4';
                }

                &.disabled::before {
                    color: #fff;
                    content: '\F0A6';
                }
            }

            &.disabled {
                color: #aaa;
            }
        }

        .right {
            float: right;
        }

        .toggleable {
            position: relative;

            &.settings > div {
                width: 120px;
                right: auto;
                left: -97px;
            }
            
            &.volume > div {
                position: absolute;
                width: 25px;
                height: 100px;

                & > span {
                    position: absolute;
                    left: 10px;
                    bottom: 7px;
                    top: 3px;
                    width: 5px;

                    & > span {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 100%;

                        &.background {
                            background: rgba(0, 0, 0, 0.5);
                            height: 100%;
                        }

                        &.amount {
                            background: rgb(0, 136, 204);
                            height: 80%;

                            &:after {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: -3px;
                                width: 11px;
                                height: 2px;
                                background: #fff;
                                display: block;
                            }
                        }

                        &.clickable {
                            top: 0;
                            left: -5px;
                            width: 20px;
                            bottom: 0;
                            cursor: pointer;
                        }
                    }
                }
            }

            & > div {
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s linear;
                background: rgba(0, 0, 0, 0.6);
                position: absolute;
                right: 2px;
                bottom: 26px;
                font-size: 10pt;
                text-align: right;

                div {
                    color: #fff;
                    &.playback-speed {
                        text-align: left;
                        .header {
                            padding-left: 2px;
                            margin-bottom: 2px;
                        }

                        .speeds {
                            a {
                                display: inline-block;
                                width: 30%;
                                padding: 2px;
                                text-align: center;

                                &.selected, &.selected:hover {
                                    background: #fff;
                                    color: #000;
                                }

                                &:hover {
                                    background: rgba(50, 50, 50, 0.5);
                                }
                            }
                        }
                    }
                    
                    &.highlight:hover {
                        background: rgba(50, 50, 50, 0.5);
                    }

                    a {
                        .icon {
                            position: relative;
                            font-size: 16px;
                            top: 1px;
                            padding: 3px;
                        }
                    }
                }
            }

            &:hover {
                div {
                    opacity: 1;
                    pointer-events: auto;
                }
            }
        }
    }

    &:hover {
        .controls {
            opacity: 1;
        }
    }
}
<commit_msg>Lighten background of seek UI<commit_after>.player.video {
    position: relative;

    &.fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        video {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: none;
            width: 100%;
        }
    }

    a {
        outline-style: none;
    }

    .start {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: block;

        span {
            font-size: 128px;
            font-weight: normal;
            display: block;
            width: 128px;
            height: 128px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -64px;
            margin-top: -64px;
            color: #fff;
            text-shadow: 2px 2px 5px #000;
        }
    }

    .controls {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 22px;
        //opacity: 0;
        transition: opacity linear 0.2s;
        background: rgba(0, 0, 0, 0.6);
        padding: 2px;

        & > * {
            display: inline-block;
        }

        a {
            color: #fff;
        }

        &.muted .seek {
            right: 55px;
        }

        .seek {
            position: absolute;
            left: 27px;
            right: 55px + 22;
            top: 0;
            bottom: 0;

            div {
                position: absolute;
                top: 11px;
                left: 0;
                height: 4px;

                &.progress {
                    width: 100%;
                }

                &.loaded {
                    background: rgb(0, 136, 204);
                    height: 2px;
                    top: 13px;
                    width: 0;
                    max-width: 100%;
                }

                &.played {
                    background: #fff;
                    width: 0;
                    position: relative;

                    &::after {
                        position: absolute;
                        right: -3px;
                        top: -6px;
                        display: block;
                        width: 3px;
                        height: 15px;
                        background: #fff;
                        content: '';
                    }
                }

                &.background {
                    background: rgba(50, 50, 50, 0.5);
                    width: 100%;
                }

                &.clickable {
                    top: 5px;
                    left: 0;
                    right: 0;
                    bottom: 5px;
                    height: auto;
                    cursor: pointer;
                }
            }
        }

        .icon {
            color: #fff;
            font-size: 21px;
            width: 21px;
            height: 21px;
            font-weight: normal;
            line-height: 21px;
            cursor: pointer;

            &.play::before {
                content: '\F16B'
            }
            &.pause::before {
                content: '\F16C'
            }

            &.fullscreen {
                font-size: 18px;
                position: relative;
                top: -1px;

                &::before {
                    content: '\F0A4';
                }

                &.disabled::before {
                    color: #fff;
                    content: '\F0A6';
                }
            }

            &.disabled {
                color: #aaa;
            }
        }

        .right {
            float: right;
        }

        .toggleable {
            position: relative;

            &.settings > div {
                width: 120px;
                right: auto;
                left: -97px;
            }
            
            &.volume > div {
                position: absolute;
                width: 25px;
                height: 100px;

                & > span {
                    position: absolute;
                    left: 10px;
                    bottom: 7px;
                    top: 3px;
                    width: 5px;

                    & > span {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 100%;

                        &.background {
                            background: rgba(0, 0, 0, 0.5);
                            height: 100%;
                        }

                        &.amount {
                            background: rgb(0, 136, 204);
                            height: 80%;

                            &:after {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: -3px;
                                width: 11px;
                                height: 2px;
                                background: #fff;
                                display: block;
                            }
                        }

                        &.clickable {
                            top: 0;
                            left: -5px;
                            width: 20px;
                            bottom: 0;
                            cursor: pointer;
                        }
                    }
                }
            }

            & > div {
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s linear;
                background: rgba(0, 0, 0, 0.6);
                position: absolute;
                right: 2px;
                bottom: 26px;
                font-size: 10pt;
                text-align: right;

                div {
                    color: #fff;
                    &.playback-speed {
                        text-align: left;
                        .header {
                            padding-left: 2px;
                            margin-bottom: 2px;
                        }

                        .speeds {
                            a {
                                display: inline-block;
                                width: 30%;
                                padding: 2px;
                                text-align: center;

                                &.selected, &.selected:hover {
                                    background: #fff;
                                    color: #000;
                                }

                                &:hover {
                                    background: rgba(50, 50, 50, 0.5);
                                }
                            }
                        }
                    }
                    
                    &.highlight:hover {
                        background: rgba(50, 50, 50, 0.5);
                    }

                    a {
                        .icon {
                            position: relative;
                            font-size: 16px;
                            top: 1px;
                            padding: 3px;
                        }
                    }
                }
            }

            &:hover {
                div {
                    opacity: 1;
                    pointer-events: auto;
                }
            }
        }
    }

    &:hover {
        .controls {
            opacity: 1;
        }
    }
}

{'fraction_non_alphanumeric': 0.08222442899702086, 'fraction_numerical': 0.028003972194637537, 'mean_word_length': 0.5257044742955257, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7455376', 'n_tokens_mistral': 4041, 'n_tokens_neox': 3313, 'n_words': 790}