@import "functions"; @import "global"; /***************** ! Progress bars * ******************/ @include exports("progressbar") { GtkProgressBar { padding: 0; border-radius: $roundness; font-size: smaller; color: alpha($fg_color, 0.6); -GtkProgressBar-min-horizontal-bar-height: 12; -GtkProgressBar-min-vertical-bar-width: 12; &.osd { -GtkProgressBar-xspacing: 0; -GtkProgressBar-yspacing: 0; -GtkProgressBar-min-horizontal-bar-height: 3; } &.trough { border: 1px solid alpha(border_normal($bg_color), 0.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 alpha(border_normal($bg_color), 0.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)); border-radius: 8px; /* we will draw the border using box shadow for now */ box-shadow: inset 1px 0 border_normal($bg_color), inset 0 1px border_normal($bg_color), inset -1px 0 border_normal($bg_color), inset 0 -1px border_normal($bg_color); &:hover, &:focus { box-shadow: inset 1px 0 border_focus($bg_color), inset 0 1px border_focus($bg_color), inset -1px 0 border_focus($bg_color), inset 0 -1px border_focus($bg_color); } &:active { box-shadow: inset 1px 0 border_active($bg_color), inset 0 1px border_active($bg_color), inset -1px 0 border_active($bg_color), inset 0 -1px border_active($bg_color); } &:insensitive { @include linear-gradient(shade($bg_color, 0.9)); box-shadow: inset 1px 0 border_insensitive($bg_color), inset 0 1px border_insensitive($bg_color), inset -1px 0 border_insensitive($bg_color), inset 0 -1px border_insensitive($bg_color); } } &.fine-tune { &, &.horizontal { &:active, &:active:hover { background-size: 50%; background-repeat: no-repeat; background-position: center; } } } &.mark { border-color: alpha(border_normal($bg_color), 0.5); } &.trough { @include linear-gradient(shade($bg_color, 1.08)); margin: 7px 0; border: 1px solid alpha(border_normal($bg_color), 0.5); border-radius: $roundness; &:insensitive { @include linear-gradient(shade($bg_color, 0.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, 0.8)); border-color: shade($bg_color, 0.7); } } } } }