<commit_before>@import "fonts";
@import "measure";

// Transition mixins
.transition (@duration: 0.3s, @prop: all, @easing: linear, @delay: 0s) {
    transition: @prop @duration @easing @delay;
}

// Flexbox
.flexbox (@dir: row, @justify: center, @align: stretch, @align-content: stretch, @wrap: nowrap) {
    display: flex;
    align-items: @align;
    align-content: @align-content;
    justify-content: @justify;
    flex-direction: @dir;
    flex-wrap: @wrap;
    overflow:hidden;
}
.flexed (@flex: 1, @order: 0) {
    flex: @flex @flex auto;
    /*display:block;*/
    position: relative;
    /*order:@order;*/
}
.flexed (complex, @grow: 0, @shrink: 0, @base: auto, @order: 0) {
    flex: @grow @shrink @base;
    display:block;
    position: relative;
    /*order:@order;*/
}

// General
.no_appearance () {
    appearance:none;
    outline:none;
    list-style:none;
}
.no_selection () {
    user-select:none;
}
.text-outline (@color; @size: 1px) {
    text-shadow:@size 0px @color,
                -@size 0px @color,
                0px @size @color,
                0px -@size @color;
}
.inset-text (@color: #000; @light: #fff) {
    color:transparent;
    text-shadow:1px 1px 2px fadeout(@light, 50%), 0px 0px 0px @color;
}
.no-scrollbar {
    &::-webkit-scrollbar, scrollbar {
        display:none;
    }
}

// Font-Awesome
.icon(@content) {
    content:"@{content}";
    font-family:FontAwesome;
}

// UI
.ui-hseparator(@color: @white) {
    &:after {
        content:"";
        position:absolute;
        bottom:0;
        left:0; right:0;
        width:100%;
        height:@thin-border;
        background:linear-gradient(to right, transparent, @color, transparent);

        @media @media-mobile {
            height:(2 * @thin-border);
        }
    }
}

.ui-topbar-button (@size: @row) {
    width:@size;
    height:@size;
    background:transparent;
    text-align:center;
    padding:@row-pad @column-pad;
    /*border-radius:50%;*/
    border:none;
    /*border:solid @medium-border @white;*/
    cursor:pointer;

    &:active {
        background:@base1;
    }
}

.ui-list-item(@odd-bg:lighten(@base02, 25%);@even-bg:lighten(@base02, 15%)) {
    /*color:@white;*/
    /*.ui-hseparator;*/
}

.ui-slider(@color:@base02) {
    @thumb-dia:@normal-text;
    background:@base00;
    cursor:pointer;
    display:flex;
    align-items:center;
    margin-right:(@column-pad + @thumb-dia/2);

    .thumb {
        .ui-knob(@color;@thumb-dia);
    }

    &:active .thumb:after {
        transform:scale(2);
    }
}

.ui-progressbar(@color:@base00) {
    .no_appearance;
    @thumb-dia:@normal-text;
    cursor:pointer;
    display:flex;
    align-items:center;
    margin-right:(@column-pad + @thumb-dia/2);

    &::-webkit-progress-inner-element,
    &::-webkit-progress-bar {
        background:@base00;
        height:2px;
    }

    &::-webkit-progress-value {
        .ui-knob(@color;@thumb-dia);
    }
}

.ui-knob(@color;@thumb-dia;) {
    background:@color;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    height:2px;

    &:after {
        content:"";
        left:@thumb-dia;
        width:@thumb-dia*2;
        height:@thumb-dia*2;
        background:radial-gradient(@color @thumb-dia/2, transparent @thumb-dia/2, transparent);
        transition:transform .1s ease-out;
    }
}<commit_msg>Fix ui-knob sizing when slider is on ~0<commit_after>@import "fonts";
@import "measure";

// Transition mixins
.transition (@duration: 0.3s, @prop: all, @easing: linear, @delay: 0s) {
    transition: @prop @duration @easing @delay;
}

// Flexbox
.flexbox (@dir: row, @justify: center, @align: stretch, @align-content: stretch, @wrap: nowrap) {
    display: flex;
    align-items: @align;
    align-content: @align-content;
    justify-content: @justify;
    flex-direction: @dir;
    flex-wrap: @wrap;
    overflow:hidden;
}
.flexed (@flex: 1, @order: 0) {
    flex: @flex @flex auto;
    /*display:block;*/
    position: relative;
    /*order:@order;*/
}
.flexed (complex, @grow: 0, @shrink: 0, @base: auto, @order: 0) {
    flex: @grow @shrink @base;
    display:block;
    position: relative;
    /*order:@order;*/
}

// General
.no_appearance () {
    appearance:none;
    outline:none;
    list-style:none;
}
.no_selection () {
    user-select:none;
}
.text-outline (@color; @size: 1px) {
    text-shadow:@size 0px @color,
                -@size 0px @color,
                0px @size @color,
                0px -@size @color;
}
.inset-text (@color: #000; @light: #fff) {
    color:transparent;
    text-shadow:1px 1px 2px fadeout(@light, 50%), 0px 0px 0px @color;
}
.no-scrollbar {
    &::-webkit-scrollbar, scrollbar {
        display:none;
    }
}

// Font-Awesome
.icon(@content) {
    content:"@{content}";
    font-family:FontAwesome;
}

// UI
.ui-hseparator(@color: @white) {
    &:after {
        content:"";
        position:absolute;
        bottom:0;
        left:0; right:0;
        width:100%;
        height:@thin-border;
        background:linear-gradient(to right, transparent, @color, transparent);

        @media @media-mobile {
            height:(2 * @thin-border);
        }
    }
}

.ui-topbar-button (@size: @row) {
    width:@size;
    height:@size;
    background:transparent;
    text-align:center;
    padding:@row-pad @column-pad;
    /*border-radius:50%;*/
    border:none;
    /*border:solid @medium-border @white;*/
    cursor:pointer;

    &:active {
        background:@base1;
    }
}

.ui-list-item(@odd-bg:lighten(@base02, 25%);@even-bg:lighten(@base02, 15%)) {
    /*color:@white;*/
    /*.ui-hseparator;*/
}

.ui-slider(@color:@base02) {
    @thumb-dia:@normal-text;
    background:@base00;
    cursor:pointer;
    display:flex;
    align-items:center;
    margin-right:(@column-pad + @thumb-dia/2);

    .thumb {
        .ui-knob(@color;@thumb-dia);
    }

    &:active .thumb:after {
        transform:scale(2);
    }
}

.ui-progressbar(@color:@base00) {
    .no_appearance;
    @thumb-dia:@normal-text;
    cursor:pointer;
    display:flex;
    align-items:center;
    margin-right:(@column-pad + @thumb-dia/2);

    &::-webkit-progress-inner-element,
    &::-webkit-progress-bar {
        background:@base00;
        height:2px;
    }

    &::-webkit-progress-value {
        .ui-knob(@color;@thumb-dia);
    }
}

.ui-knob(@color;@thumb-dia;) {
    background:@color;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    height:2px;

    &:after {
        content:"";
        left:@thumb-dia;
        width:@thumb-dia*2;
        height:@thumb-dia*2;
        background:radial-gradient(@color @thumb-dia/2, transparent @thumb-dia/2, transparent);
        transition:transform .1s ease-out;
        flex:0 0 auto;
    }
}
{'fraction_non_alphanumeric': 0.17744092732946945, 'fraction_numerical': 0.018279090503789567, 'mean_word_length': 2.575982996811902, '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': '7284971', 'n_tokens_mistral': 2571, 'n_tokens_neox': 2431, 'n_words': 430}