409 lines
11 KiB
SCSS
409 lines
11 KiB
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; }
|
|
}
|
|
|
|
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 {
|
|
&.horizontal block {
|
|
min-width: 34px;
|
|
min-height: 4px;
|
|
}
|
|
|
|
&.vertical block {
|
|
min-width: 4px;
|
|
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;
|
|
padding: 2px; //make discrete block appear inside levelbar
|
|
}
|
|
|
|
&.horizontal.discrete block {
|
|
margin: 0 1px;
|
|
|
|
&:first-child { margin: 0; }
|
|
}
|
|
|
|
&.vertical.discrete block {
|
|
margin: 1px 0;
|
|
|
|
&:first-child { margin: 0; }
|
|
}
|
|
|
|
block {
|
|
@include linear-gradient($selected_bg_color);
|
|
|
|
border-color: transparent;
|
|
border-radius: $roundness;
|
|
|
|
&.low {
|
|
background-color: $warning_color;
|
|
border-color: transparent;
|
|
}
|
|
|
|
&.high,
|
|
&:not(.empty) {
|
|
background-color: $success_color;
|
|
border-color: transparent;
|
|
}
|
|
|
|
&.full {
|
|
background-color: shade($selected_bg_color, 0.8);
|
|
border-color: transparent;
|
|
}
|
|
|
|
&.empty {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
scale {
|
|
$_marks_length: 3px;
|
|
$_marks_distance: 1px;
|
|
$button_bg: $button_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;
|
|
|
|
&.horizontal {
|
|
trough { padding: 0 3px; }
|
|
|
|
highlight, fill { margin: 0 -4px; }
|
|
}
|
|
|
|
&.vertical {
|
|
trough { padding: 3px 0; }
|
|
|
|
highlight, fill { margin: -4px 0; }
|
|
}
|
|
|
|
// 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 {
|
|
// Make the trough grow in fine-tune mode
|
|
slider { margin: -7px; }
|
|
|
|
highlight { background-color: shade($selected_bg_color, 1.1); }
|
|
|
|
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: $button_border;
|
|
|
|
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($button_bg, $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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|