From 76ea3a15cb5094fae67dc2fd43ca392eb4a39da5 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Wed, 2 Mar 2016 23:07:37 +0100 Subject: [PATCH] Adwaita: more scale style fixes --- gtk/theme/Adwaita/_common.scss | 75 ++++++++---- gtk/theme/Adwaita/gtk-contained-dark.css | 150 +++++++++++++++++------ gtk/theme/Adwaita/gtk-contained.css | 150 +++++++++++++++++------ 3 files changed, 284 insertions(+), 91 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 501412d0e0..3f54aa39d6 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2501,9 +2501,13 @@ scale { } &.fine-tune { - slider { - // something weird happening here - margin: -6px; + slider { margin: -6px; } + + fill, + highlight, + trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } } @@ -2512,7 +2516,7 @@ scale { @extend %scale_trough; outline-offset: 2px; - -gtk-outline-radius: 4px; + -gtk-outline-radius: 5px; } // the colored part of the backing bit @@ -2589,24 +2593,42 @@ scale { marks { color: gtkalpha(currentColor, 0.4); - @each $marks_pos, $marks_margin in (top, bottom), - (bottom, top), - (left, right), - (right, left) { - &.#{$marks_pos} { + @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); + margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght); } } } - &.horizontal indicator { - min-height: $_marks_lenght; - min-width: 1px; + &.fine-tune marks { + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_pos} { + margin-#{$marks_margin}: $_marks_distance; + margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 2px); + } + } } - &.vertical indicator { - min-height: 1px; - min-width: $_marks_lenght; + + &.horizontal { + indicator { + min-height: $_marks_lenght; + min-width: 1px; + } + &.fine-tune indicator { min-height: ($_marks_lenght - 2px); } + } + &.vertical { + indicator { + min-height: 1px; + min-width: $_marks_lenght; + } + &.fine-tune indicator { min-width: ($_marks_lenght - 2px); } } // *WARNING* scale with marks madness following @@ -2625,14 +2647,11 @@ scale { (':backdrop', '-backdrop'), (':backdrop:disabled', '-backdrop-insensitive') { @at-root %#{$marks_infix}-#{$dir_infix}, - &.#{$dir_class} contents#{$nth_child} { - > trough > slider { + &.#{$dir_class} { + contents#{$nth_child} > trough > slider { &#{$state} { margin: -9px; $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}'; - //@warn $dir_class; - //@warn $marks_pos; - //@warn $_scale_asset; // uncomment for debuggin purpose... border-style: none; border-radius: 0; @@ -2673,6 +2692,20 @@ scale { box-shadow: none; } } + + &.fine-tune contents#{$nth_child} > trough > slider { + margin: -7px; + + @if $dir_class == 'horizontal' { + @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; } + @else { margin-bottom: -11px; } + } + + @else { + @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; } + @else { margin-right: -11px; } + } + } } } } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 05ff39c8d7..677d134c2b 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -2648,20 +2648,7 @@ scale highlight, progressbar progress { scale { min-height: 10px; min-width: 10px; - padding: 12px; - /* - &.top { - margin-bottom: $_marks_distance; - margin-top: -($_marks_distance+$_marks_lenght); - } - - &.bottom { - margin-top: $_marks_distance; - } - &.left { margin-right: $_marks_distance; } - &.right { margin-left: $_marks_distance; } - } - */ } + padding: 12px; } scale fill, scale highlight { margin: -1px; } @@ -2671,9 +2658,14 @@ scale { margin: -8px; } scale.fine-tune slider { margin: -6px; } + scale.fine-tune fill, + scale.fine-tune highlight, + scale.fine-tune trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } scale trough { outline-offset: 2px; - -gtk-outline-radius: 4px; } + -gtk-outline-radius: 5px; } scale fill, scale fill:backdrop { background-color: #1c1f1f; box-shadow: none; } @@ -2779,19 +2771,35 @@ scale { scale marks.bottom { margin-top: 6px; margin-bottom: -12px; } - scale marks.left { + scale marks.top { margin-right: 6px; margin-left: -12px; } - scale marks.right { + scale marks.bottom { margin-left: 6px; margin-right: -12px; } + scale.fine-tune marks.top { + margin-bottom: 6px; + margin-top: -10px; } + scale.fine-tune marks.bottom { + margin-top: 6px; + margin-bottom: -10px; } + scale.fine-tune marks.left { + margin-right: 6px; + margin-left: -10px; } + scale.fine-tune marks.right { + margin-left: 6px; + margin-right: -10px; } scale.horizontal indicator { min-height: 6px; min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 4px; } scale.vertical indicator { min-height: 1px; min-width: 6px; } - scale.color.horizontal trough > trough > slider, scale.horizontal contents:last-child:not(:only-child) > trough > slider { + scale.vertical.fine-tune indicator { + min-width: 4px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider, scale.horizontal contents:last-child:not(:only-child) > trough > slider { margin: -9px; border-style: none; border-radius: 0; @@ -2802,7 +2810,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.horizontal trough > trough > slider:hover, scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:hover, scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { margin: -9px; border-style: none; border-radius: 0; @@ -2813,7 +2824,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.horizontal trough > trough > slider:active, scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:active, scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { margin: -9px; border-style: none; border-radius: 0; @@ -2824,7 +2838,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.horizontal trough > trough > slider:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled { + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -2835,7 +2852,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.horizontal trough > trough > slider:backdrop, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop { + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop { margin: -9px; border-style: none; border-radius: 0; @@ -2846,7 +2866,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.horizontal trough > trough > slider:backdrop:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -2857,6 +2880,9 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider { margin: -9px; border-style: none; @@ -2868,6 +2894,9 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover { margin: -9px; border-style: none; @@ -2879,6 +2908,9 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider:active { margin: -9px; border-style: none; @@ -2890,6 +2922,9 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled { margin: -9px; border-style: none; @@ -2901,6 +2936,9 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop { margin: -9px; border-style: none; @@ -2912,6 +2950,9 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop:disabled { margin: -9px; border-style: none; @@ -2923,7 +2964,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider, scale.vertical contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider, scale.vertical contents:last-child:not(:only-child) > trough > slider { margin: -9px; border-style: none; border-radius: 0; @@ -2934,7 +2978,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider:hover, scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:hover, scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { margin: -9px; border-style: none; border-radius: 0; @@ -2945,7 +2992,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider:active, scale.vertical contents:last-child:not(:only-child) > trough > slider:active { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:active, scale.vertical contents:last-child:not(:only-child) > trough > slider:active { margin: -9px; border-style: none; border-radius: 0; @@ -2956,7 +3006,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -2967,7 +3020,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider:backdrop, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:backdrop, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop { margin: -9px; border-style: none; border-radius: 0; @@ -2978,7 +3034,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider:backdrop:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:backdrop:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -2989,7 +3048,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider, scale.vertical contents:first-child:not(:only-child) > trough > slider { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider, scale.vertical contents:first-child:not(:only-child) > trough > slider { margin: -9px; border-style: none; border-radius: 0; @@ -3000,7 +3062,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider:hover, scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:hover, scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { margin: -9px; border-style: none; border-radius: 0; @@ -3011,7 +3076,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider:active, scale.vertical contents:first-child:not(:only-child) > trough > slider:active { + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:active, scale.vertical contents:first-child:not(:only-child) > trough > slider:active { margin: -9px; border-style: none; border-radius: 0; @@ -3022,7 +3090,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled { + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -3033,7 +3104,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider:backdrop, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop { + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:backdrop, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop { margin: -9px; border-style: none; border-radius: 0; @@ -3044,7 +3118,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider:backdrop:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:backdrop:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -3055,6 +3132,9 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } /***************** * Progress bars * diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index d4a1106f12..75a3c43d0c 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -2679,20 +2679,7 @@ scale highlight, progressbar progress { scale { min-height: 10px; min-width: 10px; - padding: 12px; - /* - &.top { - margin-bottom: $_marks_distance; - margin-top: -($_marks_distance+$_marks_lenght); - } - - &.bottom { - margin-top: $_marks_distance; - } - &.left { margin-right: $_marks_distance; } - &.right { margin-left: $_marks_distance; } - } - */ } + padding: 12px; } scale fill, scale highlight { margin: -1px; } @@ -2702,9 +2689,14 @@ scale { margin: -8px; } scale.fine-tune slider { margin: -6px; } + scale.fine-tune fill, + scale.fine-tune highlight, + scale.fine-tune trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } scale trough { outline-offset: 2px; - -gtk-outline-radius: 4px; } + -gtk-outline-radius: 5px; } scale fill, scale fill:backdrop { background-color: #9d9d99; box-shadow: none; } @@ -2810,19 +2802,35 @@ scale { scale marks.bottom { margin-top: 6px; margin-bottom: -12px; } - scale marks.left { + scale marks.top { margin-right: 6px; margin-left: -12px; } - scale marks.right { + scale marks.bottom { margin-left: 6px; margin-right: -12px; } + scale.fine-tune marks.top { + margin-bottom: 6px; + margin-top: -10px; } + scale.fine-tune marks.bottom { + margin-top: 6px; + margin-bottom: -10px; } + scale.fine-tune marks.left { + margin-right: 6px; + margin-left: -10px; } + scale.fine-tune marks.right { + margin-left: 6px; + margin-right: -10px; } scale.horizontal indicator { min-height: 6px; min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 4px; } scale.vertical indicator { min-height: 1px; min-width: 6px; } - scale.color.horizontal trough > trough > slider, scale.horizontal contents:last-child:not(:only-child) > trough > slider { + scale.vertical.fine-tune indicator { + min-width: 4px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider, scale.horizontal contents:last-child:not(:only-child) > trough > slider { margin: -9px; border-style: none; border-radius: 0; @@ -2833,7 +2841,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.horizontal trough > trough > slider:hover, scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:hover, scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { margin: -9px; border-style: none; border-radius: 0; @@ -2844,7 +2855,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.horizontal trough > trough > slider:active, scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:active, scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { margin: -9px; border-style: none; border-radius: 0; @@ -2855,7 +2869,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.horizontal trough > trough > slider:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled { + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -2866,7 +2883,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.horizontal trough > trough > slider:backdrop, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop { + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop { margin: -9px; border-style: none; border-radius: 0; @@ -2877,7 +2897,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.horizontal trough > trough > slider:backdrop:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } + scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -2888,6 +2911,9 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } + scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-top: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider { margin: -9px; border-style: none; @@ -2899,6 +2925,9 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover { margin: -9px; border-style: none; @@ -2910,6 +2939,9 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider:active { margin: -9px; border-style: none; @@ -2921,6 +2953,9 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled { margin: -9px; border-style: none; @@ -2932,6 +2967,9 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop { margin: -9px; border-style: none; @@ -2943,6 +2981,9 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop:disabled { margin: -9px; border-style: none; @@ -2954,7 +2995,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider, scale.vertical contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-bottom: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider, scale.vertical contents:last-child:not(:only-child) > trough > slider { margin: -9px; border-style: none; border-radius: 0; @@ -2965,7 +3009,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider:hover, scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:hover, scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { margin: -9px; border-style: none; border-radius: 0; @@ -2976,7 +3023,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider:active, scale.vertical contents:last-child:not(:only-child) > trough > slider:active { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:active, scale.vertical contents:last-child:not(:only-child) > trough > slider:active { margin: -9px; border-style: none; border-radius: 0; @@ -2987,7 +3037,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -2998,7 +3051,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider:backdrop, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:backdrop, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop { margin: -9px; border-style: none; border-radius: 0; @@ -3009,7 +3065,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(rtl) trough > trough > slider:backdrop:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:backdrop:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -3020,7 +3079,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider, scale.vertical contents:first-child:not(:only-child) > trough > slider { + scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + margin: -7px; + margin-left: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider, scale.vertical contents:first-child:not(:only-child) > trough > slider { margin: -9px; border-style: none; border-radius: 0; @@ -3031,7 +3093,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider:hover, scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:hover, scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { margin: -9px; border-style: none; border-radius: 0; @@ -3042,7 +3107,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider:active, scale.vertical contents:first-child:not(:only-child) > trough > slider:active { + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:active, scale.vertical contents:first-child:not(:only-child) > trough > slider:active { margin: -9px; border-style: none; border-radius: 0; @@ -3053,7 +3121,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled { + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -3064,7 +3135,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider:backdrop, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop { + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:backdrop, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop { margin: -9px; border-style: none; border-radius: 0; @@ -3075,7 +3149,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.vertical:dir(ltr) trough > trough > slider:backdrop:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } + scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:backdrop:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled { margin: -9px; border-style: none; border-radius: 0; @@ -3086,6 +3163,9 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } + scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + margin: -7px; + margin-right: -11px; } /***************** * Progress bars *