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

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

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

        -GtkProgressBar-min-horizontal-bar-height: 6;
        -GtkProgressBar-min-vertical-bar-width: 6;

        &.osd {
            -GtkProgressBar-xspacing: 0;
            -GtkProgressBar-yspacing: 0;
            -GtkProgressBar-min-horizontal-bar-height: 3;
        }

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

    .progressbar {
        @include linear-gradient($selected_bg_color);

        border-radius: 0;
        box-shadow: none;

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

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

        &.left.right { box-shadow: none; }

        &.vertical {
            @include linear-gradient($selected_bg_color, to right);

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

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

    GtkLevelBar {
        -GtkLevelBar-min-block-width: 34;
        -GtkLevelBar-min-block-height: 3;

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

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

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

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

            // FIXME: it would be nice to set make fill blocks bigger, but we'd need
            // :nth-child working on discrete indicators
            border-color: transparent;
            border-radius: 0;

            &.indicator-discrete {
                &.horizontal { margin-right: 1px; }

                &.vertical { margin-bottom: 1px; }
            }

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

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

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

    .scale {
        -GtkRange-slider-width: 16;
        -GtkRange-trough-border: 1;
        -GtkScale-slider-length: 16;

        padding: 0;
        border-width: 1px;
        border-radius: $roundness;
        outline-offset: -1px;


        &.slider {
            @include linear-gradient(shade($bg_color, 1.08));
            @include border($bg_color);

            border-radius: 8px;
            border-width: 1px;
            border-style: solid;
            box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .7);

            &:insensitive { @include linear-gradient(shade($bg_color, .9)); }
        }

        &.fine-tune {
            &, &.horizontal {
                &:active, &:active:hover {
                    background-size: 50%;
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }
        }

        &.mark { border-color: fade-out(border_normal($bg_color), .5); }


        &.trough {
            @include linear-gradient(shade($bg_color, 1.08));

            margin: 7px 0;
            border: 1px solid fade-out(border_normal($bg_color), .5);
            border-radius: $roundness;

            &:insensitive { @include linear-gradient(shade($bg_color, .9)); }

            &.vertical { margin: 0 7px; }
        }

        &.highlight {
            &, &.left, &.bottom {
                @include linear-gradient($selected_bg_color);

                border-color: $selected_bg_color;

                &:insensitive {
                    @include linear-gradient(shade($bg_color, .8));

                    border-color: shade($bg_color, .7);
                }
            }
        }
    }
}