<commit_before>
$calculator_border_radius: 2px;
$box_shadow_color: #000;




// TODO rename all of these e.g. $math_button_blue_lighter
// these are all variations on a blueish-teal
$number_specifier_lighter: #3e6372;
$number_specifier_darker:  #1e2f36;
$number_specifier_border:  #869da7;

// orange!
$operation_lighter: #cb8164;
$operation_darker:  #ae5430;
$operation_border:  #deb09e;

// gray
$other_lighter: #7c7c7c;
$other_darker: #454545;
$other_border: #adadad;

@mixin math-button-gray()
{
    border-color: $other_border;
    @include simple-gradient($other_lighter, $other_darker);
    button.math-button.other:hover {
        box-shadow:inset 0 0 10px $other_border;
    }
    button.math-button.other:active {
        @include simple-gradient($other_darker, $other_lighter);
    }

    &:hover {
        box-shadow:inset 0 0 10px $other_border;
    }
    &:active {
        @include simple-gradient($other_darker, $other_lighter);
    }

    .ie & {
        border: 1px solid;
        border-color: $other_border;
        background: $other_lighter;
        filter: none !important;
    }
}


@mixin math-button-blue
{
    color: white;
    border-color: $number_specifier_border;
    @include simple-gradient($number_specifier_lighter, $number_specifier_darker);
    &:hover {
        box-shadow:inset 0 0 10px $number_specifier_border;
    }
    &:active {
        @include simple-gradient($number_specifier_darker, $number_specifier_lighter);
    }
    .ie & {
        color: white;
        border: 1px solid;
        border-color: $number_specifier_border;
        background-color: $number_specifier_lighter !important;
        filter: none !important;
    }
}

@mixin math-button-orange
{
    color: white;
    border-color: $operation_border;
    @include simple-gradient($operation_lighter, $operation_darker);

    &:hover {
        box-shadow:inset 0 0 10px $operation_border;
    }

    &:active {
        @include simple-gradient($operation_darker, $operation_lighter);
    }
    .ie & {
        color: white;
        border: 1px solid $operation_border;
        background: $operation_lighter;
        filter: none !important;
    }
}

@mixin simple-gradient($start, $end)
{
    background: $start; /* Old browsers */
    background: -moz-linear-gradient(top,  $start 0%, $end 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(100%,$end)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $start 0%,$end 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $start 0%,$end 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $start 0%,$end 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $start 0%,$end 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$end',GradientType=0 ); /* IE6-9 */

}

@mixin math-button-sizing($scalar)
{
    button.math-button {
        font-size: 25px * $scalar;
        min-width: 50px * $scalar;
        height: 40px * $scalar;
        margin: 3px * $scalar;
    }

    button.math-button.clear {
        font-size: 8px * $scalar;
    }

    button.math-button.exponent {
        font-size: 30px * $scalar;
        sup {
            font-size: 15px * $scalar;
            margin-left: 1px * $scalar;
        }
    }
    button.math-button.pi {
        font-size: 35px * $scalar;
    }

    button.math-button.root
    {
        line-height: 30px * $scalar;
        font-style: normal;
        position: relative;
        & > * {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        div.degree {
            font-size: 15px * $scalar;
            left: -11px * $scalar;
            top: -3px * $scalar;
        }

        div.radix
        {
            text-shadow: none;
            z-index: 5;
            left: -9px * $scalar;
            top: 10px * $scalar;
        }

        div.vinculum
        {
            text-shadow: none;
            z-index: 4;
            left: 10px * $scalar;
            top: -5px * $scalar;
        }

        div.radicand
        {
            left: 6px * $scalar;
            top: 6px * $scalar;
        }
    }

    button.math-button.negative-slash-positive {
        width: 50px * $scalar;
    }

    button.math-button.fraction {
        position: relative;
        $size: 15px * $scalar;
        padding: 0px;
        .numerator, .denominator, .vinculum {
            margin: 0px;
            position: absolute;
            font-size: $size;
            width: 100%;
        }
        .numerator, .denominator {
        }
        .numerator {
            top: 0px;
        }
        .vinculum {
            font-size: 28px * $scalar;
            top: 4px * $scalar;
        }
        .denominator {
            top: 21px * $scalar;
        }
    }

}

.math-button {
    border: 1px solid;
    color: white;
    text-shadow: 1px 1px 1px #222;
    text-align: middle;
    border-radius: $calculator_border_radius;
    -webkit-box-shadow: 0 0 5px $box_shadow_color;
    -moz-box-shadow: 0 0 5px $box_shadow_color;
    box-shadow: 0 0 5px $box_shadow_color;
    vertical-align: top;
}

button.math-button.clear {<commit_msg>Equation builder looks ok in IE [fixes #4677313]<commit_after>
$calculator_border_radius: 2px;
$box_shadow_color: #000;


// TODO rename all of these e.g. $math_button_blue_lighter
// these are all variations on a blueish-teal
$number_specifier_lighter: #3e6372;
$number_specifier_darker:  #1e2f36;
$number_specifier_border:  #869da7;

// orange!
$operation_lighter: #cb8164;
$operation_darker:  #ae5430;
$operation_border:  #deb09e;

// gray
$other_lighter: #7c7c7c;
$other_darker: #454545;
$other_border: #adadad;

@mixin math-button-gray()
{
    border-color: $other_border;
    @include simple-gradient($other_lighter, $other_darker);
    button.math-button.other:hover {
        box-shadow:inset 0 0 10px $other_border;
    }
    button.math-button.other:active {
        @include simple-gradient($other_darker, $other_lighter);
    }

    &:hover {
        box-shadow:inset 0 0 10px $other_border;
    }
    &:active {
        @include simple-gradient($other_darker, $other_lighter);
    }

    .ie & {
        border: 1px solid;
        border-color: $other_border;
        background: $other_lighter;
        filter: none !important;
    }
}


@mixin math-button-blue
{
    color: white;
    border-color: $number_specifier_border;
    @include simple-gradient($number_specifier_lighter, $number_specifier_darker);
    &:hover {
        box-shadow:inset 0 0 10px $number_specifier_border;
    }
    &:active {
        @include simple-gradient($number_specifier_darker, $number_specifier_lighter);
    }
    .ie & {
        color: white;
        border: 1px solid;
        border-color: $number_specifier_border;
        background-color: $number_specifier_lighter !important;
        filter: none !important;
    }
}

@mixin math-button-orange
{
    color: white;
    border-color: $operation_border;
    @include simple-gradient($operation_lighter, $operation_darker);

    &:hover {
        box-shadow:inset 0 0 10px $operation_border;
    }

    &:active {
        @include simple-gradient($operation_darker, $operation_lighter);
    }
    .ie & {
        color: white;
        border: 1px solid $operation_border;
        background: $operation_lighter;
        filter: none !important;
    }
}

@mixin simple-gradient($start, $end)
{
    background: $start; /* Old browsers */
    background: -moz-linear-gradient(top,  $start 0%, $end 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(100%,$end)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $start 0%,$end 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $start 0%,$end 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $start 0%,$end 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $start 0%,$end 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$end',GradientType=0 ); /* IE6-9 */

}

@mixin math-button-sizing($scalar)
{
    button.math-button {
        font-size: 25px * $scalar;
        width: 50px * $scalar;
        height: 40px * $scalar;
        margin: 3px * $scalar;
    }

    button.math-button.clear {
        font-size: 8px * $scalar;
    }

    button.math-button.exponent {
        font-size: 30px * $scalar;
        sup {
            font-size: 15px * $scalar;
            margin-left: 1px * $scalar;
        }
    }
    button.math-button.pi {
        font-size: 35px * $scalar;
    }

    button.math-button.root
    {
        line-height: 30px * $scalar;
        font-style: normal;
        position: relative;
        & > * {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        div.degree {
            font-size: 15px * $scalar;
            left: -11px * $scalar;
            top: -3px * $scalar;
            .ie8 & {
                top: -20px * $scalar;
            }
        }

        div.radix
        {
            text-shadow: none;
            z-index: 5;
            left: -9px * $scalar;
            top: 10px * $scalar;
            .ie8 & {
                top: -7px * $scalar;
            }
        }

        div.vinculum
        {
            text-shadow: none;
            z-index: 4;
            left: 10px * $scalar;
            top: -5px * $scalar;
            .ie8 & {
                top: -22px * $scalar;
            }


        }

        div.radicand
        {
            left: 6px * $scalar;
            top: 6px * $scalar;
            .ie8 & {
                top: -11px * $scalar;
            }
        }
    }



    button.math-button.negative-slash-positive {
        width: 50px * $scalar;
        .ie & {
            font-size: 15px * $scalar;
        }
    }


    button.math-button.fraction {
        position: relative;
        $size: 15px * $scalar;
        padding: 0px;

        .numerator, .denominator, .vinculum {
            margin: 0px;
            position: absolute;
            font-size: $size;
            width: 100%;
        }
        .numerator, .denominator {
        }
        .numerator {
            top: 0px;
            .ie8 & {
                top: -17px;
            }
        }
        .vinculum {
            font-size: 28px * $scalar;
            top: 4px * $scalar;

            .ie8 & {
                top: -18px * $scalar;
            }
        }
        .denominator {
            top: 21px * $scalar;

            .ie8 & {
                top: 0 * $scalar;
            }
        }
    }
}

.math-button {
    border: 1px solid;
    color: white;
    text-shadow: 1px 1px 1px #222;
    text-align: middle;
    border-radius: $calculator_border_radius;
    -webkit-box-shadow: 0 0 5px $box_shadow_color;
    -moz-box-shadow: 0 0 5px $box_shadow_color;
    box-shadow: 0 0 5px $box_shadow_color;
    vertical-align: top;
}

button.math-button.clear {
{'fraction_non_alphanumeric': 0.1301535974130962, 'fraction_numerical': 0.032156651396748406, 'mean_word_length': 1.9215429021254264, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '1869663', 'n_tokens_mistral': 4059, 'n_tokens_neox': 3670, 'n_words': 746}