Members of the KDE Community are recommended to subscribe to the kde-community mailing list at https://mail.kde.org/mailman/listinfo/kde-community to allow them to participate in important discussions and receive other important announcements

Commit 9fc76816 authored by Jacco Geul's avatar Jacco Geul

Fix scale (slider with a button)

parent 11f403a9
This diff is collapsed.
......@@ -2259,13 +2259,13 @@ scale.vertical.scale-has-marks-above.scale-has-marks-below {
&.fine-tune {
outline-offset: -7px;
-gtk-outline-radius: 6px;
&.trough {
trough {
margin: 8px;
border-radius: 4px;
}
}
&.slider {
slider {
//FIXME: better gradient on the slider and hover state
@include button(normal);
border: 1px solid;
......@@ -2292,7 +2292,6 @@ scale.vertical.scale-has-marks-above.scale-has-marks-below {
background-image: linear-gradient(to bottom, $insensitive_bg_color);
box-shadow: none;
}
&:active {
border: 2px solid if($variant=='light',$selected_bg_color,
darken($selected_bg_color,15%));
......@@ -2306,26 +2305,38 @@ scale.vertical.scale-has-marks-above.scale-has-marks-below {
&:backdrop { @include button(osd-backdrop); }
}
}
&.trough {
trough {
margin: 9px;
border: 1px solid transparent;
border-radius: 4px;
background-color: $borders_color;
box-shadow: none;
&.highlight {
highlight {
background-color: $selected_bg_color;
border-color: transparent;
box-shadow: none;
&.vertical { background-color: $selected_bg_color; }
}
&:disabled, &.vertical:disabled {
&:disabled {
border-color: transparent;
background-image: none;
background-color: $insensitive_bg_color;
box-shadow: none;
}
}
&.vertical {
trough {
highlight {
background-color: #3daee9;
}
&:disabled, &.vertical:disabled {
border-color: transparent;
background-image: none;
background-color: $insensitive_bg_color;
box-shadow: none;
}
}
}
trough {
//OSD troughs
.osd & {
border-color: transparent;
......@@ -2335,7 +2346,7 @@ scale.vertical.scale-has-marks-above.scale-has-marks-below {
background-color: $borders_color;
outline-color: transparentize($osd_fg_color, 0.8);
outline-offset: -8px;
&.highlight {
highlight {
background-image: none;
background-color: $selected_bg_color;
}
......@@ -2351,55 +2362,50 @@ scale.vertical.scale-has-marks-above.scale-has-marks-below {
}
}
$asset_suffix: if($variant=='dark', '-dark', '');
@each $d,$dn in ('', 'horz'),
('.vertical', 'vert') {
@each $w,$we in ('scale-has-marks-below','scale_marks_below'),
('scale-has-marks-above','scale_marks_above') {
scale#{$d}.#{$w} {
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 24;
-GtkRange-trough-border: 2;
@extend %#{$we}_#{$dn};
@each $s,$as in ('',''),
(':hover','-hover'),
(':active','-active'),
(':disabled','-insensitive'),
(':backdrop','-backdrop'),
(':backdrop:disabled','-backdrop-insensitive') {
&.slider#{$s} {
$_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
border-style: none;
border-radius: 0;
background-color: transparent;
background-image: -gtk-scaled(url('#{$_url}.png'),
url('#{$_url}@2.png'));
background-repeat: no-repeat;
background-position: center;
box-shadow: none;
$suffix: if($variant == 'light', '', '-dark');
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
('vertical', 'vert') {
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not'),
('scale-has-marks-below', ':first-child:not') {
@each $state, $state_infix in ('', ''),
(':hover', '-hover'),
(':active', '-active'),
(':disabled', '-insensitive') {
&.#{$dir_class} {
%#{$marks_infix}-#{$dir_infix},
contents#{$nth_child} > trough > slider {
&#{$state} {
// an asymmetric slider asset is used here, so the margins are uneven, the smaller
// margin is set on the point side.
margin: -10px;
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
border-style: none;
border-radius: 0;
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
background-size: 16px;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
box-shadow: none;
}
}
}
}
}
}
}
%scale_marks_above_horz {
.trough { margin: 14px 10px 10px; }
&.fine-tune .trough { margin: 12px 8px 8px; }
}
%scale_marks_below_horz {
.trough { margin: 10px 10px 14px; }
&.fine-tune .trough { margin: 8px 8px 12px; }
}
%scale_marks_above_vert {
.trough { margin: 10px 10px 10px 14px; }
&.fine-tune .trough { margin: 8px 8px 8px 12px; }
}
%scale_marks_below_vert {
.trough { margin: 10px 14px 10px 10px; }
&.fine-tune .trough { margin: 8px 12px 8px 8px; }
&.color {
min-height: 0;
min-width: 0;
trough {
background-image: linear-gradient(to top, $borders_color);
background-repeat: no-repeat;
}
}
}
/*****************
......
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment