420 lines
10 KiB
SCSS
420 lines
10 KiB
SCSS
|
/************
|
||
|
|
* GtkScale *
|
||
|
|
************/
|
||
|
|
$scale_slider_bg: if($variant == 'light', $base_color, lighten($base_color, 10%));
|
||
|
|
$scale_trough_bg: if($variant == 'light', transparentize(black,0.86), lighten(transparentize($bg_color,0.86), 47%));
|
||
|
|
%scale_trough {
|
||
|
|
background-color: $scale_trough_bg;
|
||
|
|
border: none;
|
||
|
|
border-radius: 3px;
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
&:disabled { background-color: transparentize(black,0.86); }
|
||
|
|
|
||
|
|
&:backdrop {
|
||
|
|
background-color: transparentize(black,0.86);
|
||
|
|
transition: $backdrop_transition;
|
||
|
|
|
||
|
|
&:disabled { background-color: transparentize(black,0.86); }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
%scale_highlight {
|
||
|
|
border: none;
|
||
|
|
background-color: $selected_bg_color;
|
||
|
|
border-radius: 3px;
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
border: none;
|
||
|
|
background-color: transparentize(black, 0.86);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:backdrop,
|
||
|
|
&:active:backdrop {
|
||
|
|
border-color: lighten($selected_bg_color, 5%);
|
||
|
|
background-color: lighten($selected_bg_color, 5%);
|
||
|
|
&:disabled {
|
||
|
|
background-color: transparentize(black, 0.9);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
scale {
|
||
|
|
// sizing
|
||
|
|
$_marks_lenght: 6px;
|
||
|
|
$_marks_distance: 6px;
|
||
|
|
|
||
|
|
min-height: 16px;
|
||
|
|
min-width: 16px;
|
||
|
|
padding: 8px;
|
||
|
|
|
||
|
|
&.horizontal {
|
||
|
|
trough,
|
||
|
|
progress { min-height: 6px; }
|
||
|
|
}
|
||
|
|
|
||
|
|
&.vertical {
|
||
|
|
trough,
|
||
|
|
progress { min-width: 6px; }
|
||
|
|
}
|
||
|
|
|
||
|
|
// the slider is inside the trough, so to have make it bigger there's a negative margin
|
||
|
|
|
||
|
|
slider {
|
||
|
|
min-height: 16px;
|
||
|
|
min-width: 16px;
|
||
|
|
margin: -7px;
|
||
|
|
|
||
|
|
background-color: $scale_slider_bg;
|
||
|
|
box-shadow: inset 0 1px $top_highlight,
|
||
|
|
0px 0px 1px 1px rgba(0,0,0,0.1);
|
||
|
|
border-radius: 12px;
|
||
|
|
|
||
|
|
transition: $button_transition;
|
||
|
|
transition-property: background, border, box-shadow;
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
background-color: $purple;
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
background-color: $insensitive_bg_color;
|
||
|
|
box-shadow: inset 0 1px $top_highlight,
|
||
|
|
0px 0px 1px 1px rgba(0,0,0,0.05);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// click-and-hold the slider to activate
|
||
|
|
&.fine-tune {
|
||
|
|
&.horizontal {
|
||
|
|
padding-top: 9px;
|
||
|
|
padding-bottom: 9px;
|
||
|
|
min-height: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.vertical {
|
||
|
|
padding-left: 9px;
|
||
|
|
padding-right: 9px;
|
||
|
|
min-width: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
// to make the trough grow in fine-tune mode
|
||
|
|
slider { margin: -6px; }
|
||
|
|
|
||
|
|
fill,
|
||
|
|
highlight,
|
||
|
|
trough {
|
||
|
|
border-radius: 5px;
|
||
|
|
-gtk-outline-radius: 7px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// the backing bit
|
||
|
|
trough {
|
||
|
|
@extend %scale_trough;
|
||
|
|
|
||
|
|
outline-offset: 2px;
|
||
|
|
-gtk-outline-radius: 5px;
|
||
|
|
outline-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
// the colored part of the backing bit
|
||
|
|
highlight { @extend %scale_highlight; }
|
||
|
|
|
||
|
|
// this is another differently styled part of the backing bit, the most relevant use case is for example
|
||
|
|
// in media player to indicate how much video stream as been cached
|
||
|
|
fill {
|
||
|
|
@extend %scale_trough;
|
||
|
|
|
||
|
|
&:backdrop, & { background-color: $borders_color; }
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
&:backdrop, & {
|
||
|
|
border-color: transparent;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// OSD
|
||
|
|
.osd & {
|
||
|
|
background-color: mix($osd_fg_color, $osd_borders_color, 25%);
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
&:backdrop, & {
|
||
|
|
border-color: transparent;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
slider {
|
||
|
|
border-color: $base_color;
|
||
|
|
border: none;
|
||
|
|
border-radius: 12px;
|
||
|
|
|
||
|
|
background-color: $scale_slider_bg;
|
||
|
|
box-shadow: inset 0 1px $top_highlight,
|
||
|
|
0px 0px 1px 1px rgba(0,0,0,0.1);
|
||
|
|
|
||
|
|
&:hover { @include button(hover-alt, $edge: $shadow_color); }
|
||
|
|
|
||
|
|
&:active { border-color: $selected_borders_color; }
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
background-color: $insensitive_bg_color;
|
||
|
|
box-shadow: inset 0 1px $top_highlight,
|
||
|
|
0px 0px 1px 1px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:backdrop,
|
||
|
|
&:backdrop:disabled {
|
||
|
|
transition: $backdrop_transition;
|
||
|
|
|
||
|
|
background-color: $insensitive_bg_color;
|
||
|
|
box-shadow: inset 0 1px $top_highlight,
|
||
|
|
0px 0px 1px 1px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ...on selected list rows
|
||
|
|
row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
|
||
|
|
|
||
|
|
// OSD
|
||
|
|
.osd & {
|
||
|
|
@include button(osd);
|
||
|
|
border-color: darken($osd_borders_color, 3%);
|
||
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
@include button(osd-hover);
|
||
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
@include button(osd-active);
|
||
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
||
|
|
}
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
@include button(osd-insensitive);
|
||
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
||
|
|
}
|
||
|
|
|
||
|
|
&:backdrop {
|
||
|
|
@include button(osd-backdrop);
|
||
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
@include button(osd-backdrop-insensitive);
|
||
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
value { color: gtkalpha(currentColor, 0.4); }
|
||
|
|
|
||
|
|
marks {
|
||
|
|
color: gtkalpha(currentColor, 0.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_lenght);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.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;
|
||
|
|
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.horizontal {
|
||
|
|
indicator {
|
||
|
|
min-height: $_marks_lenght;
|
||
|
|
min-width: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.fine-tune indicator { min-height: ($_marks_lenght - 3px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
&.vertical {
|
||
|
|
indicator {
|
||
|
|
min-height: 1px;
|
||
|
|
min-width: $_marks_lenght;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.fine-tune indicator { min-width: ($_marks_lenght - 3px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
// *WARNING* scale with marks madness following
|
||
|
|
|
||
|
|
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
|
||
|
|
$suffix: if($variant == 'light', '', '-dark');
|
||
|
|
|
||
|
|
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
|
||
|
|
('vertical', 'vert') {
|
||
|
|
@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
|
||
|
|
('scale-has-marks-below', 'marks-after:not(.marks-before)') {
|
||
|
|
@each $state, $state_infix in ('', ''),
|
||
|
|
(':hover', '-hover'),
|
||
|
|
(':active', '-active'),
|
||
|
|
(':disabled', '-insensitive'),
|
||
|
|
(':backdrop', '-backdrop'),
|
||
|
|
(':backdrop:disabled', '-backdrop-insensitive') {
|
||
|
|
&.#{$dir_class}.#{$marks_class} {
|
||
|
|
|
||
|
|
slider {
|
||
|
|
&#{$state} {
|
||
|
|
// an asymmetric slider asset is used here, so the margins are uneven, the smaller
|
||
|
|
// margin is set on the point side.
|
||
|
|
min-height: 16px;
|
||
|
|
min-width: 16px;
|
||
|
|
margin: -7px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 50%;
|
||
|
|
|
||
|
|
background-color: $scale_slider_bg;
|
||
|
|
box-shadow: inset 0 1px $top_highlight,
|
||
|
|
0px 0px 1px 1px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.fine-tune slider {
|
||
|
|
// bigger negative margins to make the trough grow here as well
|
||
|
|
margin: -7px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.color {
|
||
|
|
min-height: 0;
|
||
|
|
min-width: 0;
|
||
|
|
|
||
|
|
trough {
|
||
|
|
background-image: image($borders_color);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.horizontal {
|
||
|
|
padding: 0 0 15px 0;
|
||
|
|
|
||
|
|
trough {
|
||
|
|
padding-bottom: 4px;
|
||
|
|
background-position: 0 -3px;
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
slider {
|
||
|
|
&:dir(ltr), &:dir(rtl) { // specificity bumb
|
||
|
|
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
||
|
|
margin-bottom: -15px;
|
||
|
|
margin-top: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.vertical {
|
||
|
|
&:dir(ltr) {
|
||
|
|
padding: 0 0 0 15px;
|
||
|
|
|
||
|
|
trough {
|
||
|
|
padding-left: 4px;
|
||
|
|
background-position: 3px 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
slider {
|
||
|
|
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
||
|
|
margin-left: -15px;
|
||
|
|
margin-right: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:dir(rtl) {
|
||
|
|
padding: 0 15px 0 0;
|
||
|
|
|
||
|
|
trough {
|
||
|
|
padding-right: 4px;
|
||
|
|
background-position: -3px 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
slider {
|
||
|
|
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
||
|
|
margin-right: -15px;
|
||
|
|
margin-left: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.fine-tune {
|
||
|
|
&.horizontal {
|
||
|
|
&:dir(ltr), &:dir(rtl) { // specificity bump
|
||
|
|
padding: 0 0 12px 0;
|
||
|
|
|
||
|
|
trough {
|
||
|
|
padding-bottom: 7px;
|
||
|
|
background-position: 0 -6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
slider {
|
||
|
|
margin-bottom: -15px;
|
||
|
|
margin-top: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.vertical {
|
||
|
|
&:dir(ltr) {
|
||
|
|
padding: 0 0 0 12px;
|
||
|
|
|
||
|
|
trough {
|
||
|
|
padding-left: 7px;
|
||
|
|
background-position: 6px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
slider {
|
||
|
|
margin-left: -15px;
|
||
|
|
margin-right: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:dir(rtl) {
|
||
|
|
padding: 0 12px 0 0;
|
||
|
|
|
||
|
|
trough {
|
||
|
|
padding-right: 7px;
|
||
|
|
background-position: -6px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
slider {
|
||
|
|
margin-right: -15px;
|
||
|
|
margin-left: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|