<commit_before>$color-bg: #00898b;
$color-bg-sub: #00a7aa;
$color-text: white;

html, body {
    margin: 0;
    padding: 0;
}

body {
	background-color: $color-bg;
	font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
	color: $color-text;
    height: 100%;
}

h1, h2, h3 {
	font-size: 1.1em;
	margin: 0;
}

ol, header, .media {
    background-color: $color-bg-sub;
}

a {
	color: #fff;
}

ol.view-feed {
    overflow-y: scroll;
    margin: 0;
    padding: 0.5em 0;
}

.tglbutton {
    position: absolute;
    top: 20px;
    right: 10px;
}

.now-playing {
    position: fixed;
    bottom: 0;
    padding: 1em;
    width: 100%;
    background: $color-bg-sub;
}

.search-form {
    background: $color-bg-sub;
    padding: 1em;
	justify-content: center;
	display: flex;
    position: relative;

    input, button, select {
        border: none;
        height: 40px;
        padding: 0 10px;
        font-size: 1.1em;
    }

    input { min-width: 500px; }

    .up-down-arrows {
        font-size: 2em;
    }

    .search-type-select {
        width: 50px;
        background: none;
        color: transparent;
        outline: none;
        -webkit-appearance: none;

        option {
            color: black;
        }
    }

    .results-container {
        width: 100%;
        top: 72px;
        left: 0;
        z-index: 20;
        position: absolute;

        .results-list {
            margin: 0 auto;
            width: 550px;
            max-height: 60vh;
            padding: 0.5em;
            overflow-y: scroll;
            background: $color-bg-sub;
            list-style-type: none;

            li {
                padding: 0.5em;

                .video-thumbnail {
                    height: 50px;
                    vertical-align: top;
                    margin-right: 1em;
                }

                .details {
                    display: inline-block;
                    width: 450px;

                    .name {
                        font-weight: bold;
                    }

                    .name, .author {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        max-width: 400px;
                    }
                }

                &.selected {
                    background: $color-bg;
                }
            }

            li:not(:first-child)  {
                margin-top: 0.5em;
            }
        }
    }


    .match-spotify, .match-youtube, .match-soundcloud {
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 25px;
        padding-left: 40px;
    }

    .match-spotify { background-image: url('../img/spotify.png'); }
    .match-youtube { background-image: url('../img/youtube.png'); }
    .match-soundcloud { background-image: url('../img/soundcloud.png'); }<commit_msg>use flexbox for search results<commit_after>$color-bg: #00898b;
$color-bg-sub: #00a7aa;
$color-text: white;

html, body {
    margin: 0;
    padding: 0;
}

body {
	background-color: $color-bg;
	font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
	color: $color-text;
    height: 100%;
}

h1, h2, h3 {
	font-size: 1.1em;
	margin: 0;
}

ol, header, .media {
    background-color: $color-bg-sub;
}

a {
	color: #fff;
}

ol.view-feed {
    overflow-y: scroll;
    margin: 0;
    padding: 0.5em 0;
}

.tglbutton {
    position: absolute;
    top: 20px;
    right: 10px;
}

.now-playing {
    position: fixed;
    bottom: 0;
    padding: 1em;
    width: 100%;
    background: $color-bg-sub;
}

.search-form {
    background: $color-bg-sub;
    padding: 1em;
	justify-content: center;
	display: flex;
    position: relative;

    input, button, select {
        border: none;
        height: 40px;
        padding: 0 10px;
        font-size: 1.1em;
    }

    input { min-width: 500px; }

    .up-down-arrows {
        font-size: 2em;
    }

    .search-type-select {
        width: 50px;
        background: none;
        color: transparent;
        outline: none;
        -webkit-appearance: none;

        option {
            color: black;
        }
    }

    .results-container {
        width: 100%;
        top: 72px;
        left: 0;
        z-index: 20;
        position: absolute;

        .results-list {
            margin: 0 auto;
            width: 550px;
            max-height: 60vh;
            padding: 0.5em;
            overflow-y: scroll;
            background: $color-bg-sub;
            list-style-type: none;

            li {
                display: flex;
                padding: 0.5em;

                .video-thumbnail {
                    flex: 1;
                    height: 50px;
                    vertical-align: top;
                }

                .details {
                    display: inline-block;
                    width: 450px;

                    .name {
                        font-weight: bold;
                    }

                    .name, .author {
                        margin-left: 1em;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        max-width: 400px;
                    }
                }

                &.selected {
                    background: $color-bg;
                }
            }

            li:not(:first-child)  {
                margin-top: 0.5em;
            }
        }
    }


    .match-spotify, .match-youtube, .match-soundcloud {
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 25px;
        padding-left: 40px;
    }

    .match-spotify { background-image: url('../img/spotify.png'); }
    .match-youtube { background-image: url('../img/youtube.png'); }
    .match-soundcloud { background-image: url('../img/soundcloud.png'); }
{'fraction_non_alphanumeric': 0.12141652613827993, 'fraction_numerical': 0.028499156829679594, 'mean_word_length': 1.2474422129594542, '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': '2861127', 'n_tokens_mistral': 2041, 'n_tokens_neox': 1805, 'n_words': 392}