numix-gtk-theme/gtk-3.20/scss/widgets/_progress.scss

/*****************
 ! Progress bars *
******************/

@include exports("progressbar") {
    progressbar {
        padding: 0;
        border-radius: $roundness;
        font-size: smaller;
        color: alpha($fg_color, .6);

        // sizing
        &.horizontal {
            trough,
            progress { min-height: 6px; }
        }

        &.vertical {
            trough,
            progress { min-width: 6px; }
        }

        &.osd { min-height: 4px; }

        trough {
            border: 1px solid alpha(border_normal($bg_color), .5);
            background-color: shade($bg_color, 1.08);
            background-image: none;
            border-radius: $roundness;
        }

        progress {
            @include linear-gradient($selected_bg_color);

            border-radius: 0;

            &.left {
                border-top-left-radius: $roundness;
                border-bottom-left-radius: $roundness;
            }

            &.right {
                border-top-right-radius: $roundness;
                border-bottom-right-radius: $roundness;
            }

            &.bottom {
                border-bottom-left-radius: $roundness;
                border-bottom-right-radius: $roundness;
            }

            &.top {
                border-top-left-radius: $roundness;
                border-top-right-radius: $roundness;
            }
        }

        &.osd { // progressbar.osd used for epiphany page loading progress
            margin: 2px;
            min-height: 2px;
            min-width: 2px;

            trough {
                border-style: none;
                border-radius: 0;
                background-image: none;
                background-color: transparent;
            }

            progress {
                border-style: none;
                border-radius: 0;
                background-color: $selected_bg_color;
                background-image: none;
            }
        }
    }

    levelbar {
        block {
            min-width: 34px;
            min-height: 3px;
        }

        &.vertical block {
            min-width: 3px;
            min-height: 34px;
        }

        &:backdrop { transition: 200ms ease-out; }

        trough {
            @include linear-gradient(shade($bg_color, 1.08), to top);

            border: 1px solid alpha(border_normal($bg_color), .5);
            border-radius: $roundness;
        }

        &.horizontal.discrete block {
            margin: 0 2px;

            &:first-child { margin: 0; }
        }

        &.vertical.discrete block {
            margin: 2px 0;

            &:first-child { margin: 0; }
        }

        block {
            @include linear-gradient($selected_bg_color);

            border-color: transparent;
            border-radius: 0;

            &.low {
                background-color: $warning_color;
                border-color: transparent;
            }

            &.high,
            &:not(.empty) {
                background-color: $selected_bg_color;
                border-color: transparent;
            }

            &.full {
                background-color: $success_color;
                border-color: transparent;
            }

            &.empty {
                background-color: transparent;
                border-color: transparent;
                box-shadow: none;
            }
        }
    }

    scale {
        $_marks_length: 3px;
        $_marks_distance: 1px;
        $button_bg: if(hue($bg_color) == 0deg, shade($bg_color, 1.2), $bg_color);
        $ease-out-quad: cubic-bezier(.25, .46, .45, .94);
        $button_transition: all 200ms $ease-out-quad;

        min-height: 10px;
        min-width: 10px;
        padding: $spacing ($spacing * 2);

        // The slider is inside the trough, negative margin to make it bigger
        slider {
            min-height: 15px;
            min-width: 15px;
            margin: -7px;
        }

        // Click-and-hold the slider to activate
        &.fine-tune {
            &.horizontal {
                padding-top: 4px;
                padding-bottom: 4px;
                min-height: 15px;
            }

            &.vertical {
                padding-left: 4px;
                padding-right: 4px;
                min-width: 15px;
            }

            // Make the trough grow in fine-tune mode
            slider { margin: -4px; }

            fill,
            highlight,
            trough {
                border-radius: 5px;
                -gtk-outline-radius: 7px;
            }
        }

        // Trough
        trough {
            $_scale_trough_bg: if($variant == 'light', shade($bg_color, .8), darken($bg_color, 5%));

            outline-offset: 2px;
            -gtk-outline-radius: 4.5px;

            border-radius: 2.5px;
            background-color: $_scale_trough_bg;

            &:disabled { background-color: transparentize($_scale_trough_bg, .45); }

            //OSD troughs
            .osd & {
                background-color: lighten($osd_bg, 7%);

                highlight { background-color: $selected_bg_color; }
            }

            // Troughs in selected list-rows and infobars
            menuitem:hover &,
            row:selected &,
            infobar & {
                background-color: transparentize($black, .8);

                highlight {
                    background-color: $selected_fg_color;

                    &:disabled { background-color: mix($selected_fg_color, $selected_bg_color, .55); }
                }

                &:disabled { background-color: transparentize($black, .9); }
            }
        }

        // The colored part of trough
        highlight {
            border-radius: 2.5px;
            background-color: $selected_bg_color;

            &:disabled { background-color: transparentize($selected_bg_color, .45); }
        }

        // this is another differently styled part of the trough, the most relevant use case is for example
        // in media player to indicate how much video stream as been cached
        fill {
            border-radius: 2.5px;
            background-color: transparentize($selected_bg_color, .5);

            &:disabled { background-color: transparent; }
        }

        slider {
            $_slider_border: if($variant == 'light', transparentize(shade($button_border, .25), .5), darken($button_border, 2%));

            background-color: $button_bg;
            border: 1px solid $_slider_border;
            border-radius: 100%;

            transition: $button_transition;
            transition-property: background, border;

            &:hover { background-color: lighten($button_bg, 5%); }

            &:active {
                background-clip: border-box;
                background-color: $selected_bg_color;
                border-color: $selected_bg_color;
            }

            &:disabled {
                background-color: mix($fg_color, $bg_color, .55);
                border-color: transparentize($_slider_border, .2);
            }

            // Selected list-row and infobar sliders
            menuitem:hover &,
            row:selected &,
            infobar & {
                background-clip: border-box;
                background-color: $selected_fg_color;
                border-color: $selected_fg_color;

                &:hover {
                    background-color: mix($selected_fg_color, $selected_bg_color, .85);
                    border-color: mix($selected_fg_color, $selected_bg_color, .85);
                }

                &:active {
                    background-color: mix($selected_fg_color, $selected_bg_color, .5);
                    border-color: mix($selected_fg_color, $selected_bg_color, .5);
                }

                &:disabled {
                    background-color: mix($selected_fg_color, $selected_bg_color, .55);
                    border-color: mix($selected_fg_color, $selected_bg_color, .55);
                }
            }

            // OSD sliders
            .osd & {
                background-clip: border-box;
                background-color: $selected_bg_color;
                border-color: $selected_bg_color;

                &:hover {
                    background-color: lighten($selected_bg_color, 10%);
                    border-color: lighten($selected_bg_color, 10%)
                }

                &:active {
                    background-color: darken($selected_bg_color, 10%);
                    border-color: darken($selected_bg_color, 10%);
                }
            }
        }

        value { color: alpha(currentColor, .4); }

        marks {
            color: alpha(currentColor, .4);

            @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
                (bottom, bottom, top),
                (top, left, right),
                (bottom, right, left) {
                &.#{$marks_class} {
                    margin-#{$marks_margin}: $_marks_distance;
                    margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
                }
            }
        }

        &.fine-tune marks {
            @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
                (bottom, bottom, top),
                (top, left, right),
                (bottom, right, left) {
                &.#{$marks_class} {
                    margin-#{$marks_margin}: ($_marks_distance - 1px);
                    margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px);
                }
            }
        }

        &.horizontal {
            indicator {
                min-height: $_marks_length;
                min-width: 1px;
            }

            &.fine-tune indicator { min-height: ($_marks_length - 1px); }
        }

        &.vertical {
            indicator {
                min-height: 1px;
                min-width: $_marks_length;
            }

            &.fine-tune indicator { min-width: ($_marks_length - 1px); }
        }

        &.color {
            trough {
                padding: 0;
                border: 0;
                background-image: none;
            }

            highlight, fill { margin: 0; }

            &.horizontal {
                padding: 0 0 6px 0;

                trough {
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                }

                slider {
                    &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
                        margin-bottom: 0;
                        margin-top: 0;
                    }
                }
            }

            &.vertical {
                &:dir(ltr) {
                    padding: 0 0 0 6px;

                    trough {
                        border-bottom-right-radius: 0;
                        border-top-right-radius: 0;
                    }

                    slider {
                        &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
                            margin-left: 0;
                            margin-right: 0;
                        }
                    }
                }

                &:dir(rtl) {
                    padding: 0 6px 0 0;

                    trough {
                        border-bottom-left-radius: 0;
                        border-top-left-radius: 0;
                    }

                    slider {
                        &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
                            margin-right: 0;
                            margin-left: 0;
                        }
                    }
                }
            }
        }
    }
}