diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 779f84ebab..ee73853a8f 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2789,7 +2789,6 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work scale { // sizing - $_marks_lenght: 6px; $_marks_distance: 6px; @@ -2802,6 +2801,7 @@ scale { highlight { margin: -1px; } // the slider is inside the trough, so to have make it bigger there's a negative margin + slider { min-height: 18px; min-width: 18px; @@ -2982,17 +2982,17 @@ scale { @each $dir_class, $dir_infix in ('horizontal', 'horz'), ('vertical', 'vert') { - @each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'), - ('scale-has-marks-below', ':first-child:not(:only-child)') { + @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_infix}-#{$dir_infix}, - contents#{$nth_child} > trough > slider { + (':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. @@ -3005,6 +3005,7 @@ scale { background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')); $_scale_slider_bg_pos: bottom; + @if $dir_class == 'horizontal' { min-height: 26px; min-width: 22px; @@ -3041,8 +3042,7 @@ scale { } } - @at-root %#{$marks_infix}-#{$dir_infix}-fine-tune, - &.fine-tune contents#{$nth_child} > trough > slider { + &.fine-tune slider { // bigger negative margins to make the trough grow here as well margin: -7px; @@ -3083,11 +3083,11 @@ scale { } slider { - &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { - @extend %scale-has-marks-above-horz; - - margin-bottom: -15px; - margin-top: 6px; + &:dir(ltr), &:dir(rtl) { // specificity bumb + &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { + margin-bottom: -15px; + margin-top: 6px; + } } } } @@ -3105,8 +3105,6 @@ scale { slider { &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { - @extend %scale-has-marks-below-vert; - margin-left: -15px; margin-right: 6px; } @@ -3125,8 +3123,6 @@ scale { slider { &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { - @extend %scale-has-marks-above-vert; - margin-right: -15px; margin-left: 6px; } @@ -3136,18 +3132,18 @@ scale { &.fine-tune { &.horizontal { - padding: 0 0 12px 0; + &:dir(ltr), &:dir(rtl) { // specificity bump + padding: 0 0 12px 0; - trough { - padding-bottom: 7px; - background-position: 0 -6px; - } + trough { + padding-bottom: 7px; + background-position: 0 -6px; + } - slider { - @extend %scale-has-marks-above-horz-fine-tune; - - margin-bottom: -15px; - margin-top: 6px; + slider { + margin-bottom: -15px; + margin-top: 6px; + } } } @@ -3161,8 +3157,6 @@ scale { } slider { - @extend %scale-has-marks-below-vert-fine-tune; - margin-left: -15px; margin-right: 6px; } @@ -3177,8 +3171,6 @@ scale { } slider { - @extend %scale-has-marks-above-vert-fine-tune; - margin-right: -15px; margin-left: 6px; } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index c5bda2075d..11a444daf8 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -3285,8 +3285,7 @@ scale { min-width: 6px; } scale.vertical.fine-tune indicator { min-width: 3px; } - scale.color.horizontal slider:hover, scale.color.horizontal slider:backdrop, scale.color.horizontal slider:disabled, scale.color.horizontal slider:backdrop:disabled, scale.color.horizontal slider, - scale.horizontal contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after) slider { margin: -10px; border-style: none; border-radius: 0; @@ -3298,11 +3297,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.color.horizontal slider:hover, scale.color.horizontal slider:hover:backdrop:disabled, - scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { + scale.horizontal.marks-before:not(.marks-after) slider:hover { margin: -10px; border-style: none; border-radius: 0; @@ -3314,11 +3312,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.color.horizontal slider:active:backdrop:disabled, scale.color.horizontal slider:active, - scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { + scale.horizontal.marks-before:not(.marks-after) slider:active { margin: -10px; border-style: none; border-radius: 0; @@ -3330,11 +3327,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.color.horizontal slider:disabled, - scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled { + scale.horizontal.marks-before:not(.marks-after) slider:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3346,11 +3342,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.color.horizontal slider:backdrop, - scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop { + scale.horizontal.marks-before:not(.marks-after) slider:backdrop { margin: -10px; border-style: none; border-radius: 0; @@ -3362,11 +3357,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.color.horizontal slider:backdrop:disabled, - scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3378,10 +3372,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before) slider { margin: -10px; border-style: none; border-radius: 0; @@ -3393,10 +3387,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover { + scale.horizontal.marks-after:not(.marks-before) slider:hover { margin: -10px; border-style: none; border-radius: 0; @@ -3408,10 +3402,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider:active { + scale.horizontal.marks-after:not(.marks-before) slider:active { margin: -10px; border-style: none; border-radius: 0; @@ -3423,10 +3417,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled { + scale.horizontal.marks-after:not(.marks-before) slider:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3438,10 +3432,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop { + scale.horizontal.marks-after:not(.marks-before) slider:backdrop { margin: -10px; border-style: none; border-radius: 0; @@ -3453,10 +3447,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3468,11 +3462,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider, - scale.vertical contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after) slider { margin: -10px; border-style: none; border-radius: 0; @@ -3484,11 +3477,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:hover:backdrop:disabled, - scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { + scale.vertical.marks-before:not(.marks-after) slider:hover { margin: -10px; border-style: none; border-radius: 0; @@ -3500,11 +3492,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(rtl) slider:active:backdrop:disabled, scale.color.vertical:dir(rtl) slider:active, - scale.vertical contents:last-child:not(:only-child) > trough > slider:active { + scale.vertical.marks-before:not(.marks-after) slider:active { margin: -10px; border-style: none; border-radius: 0; @@ -3516,11 +3507,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(rtl) slider:disabled, - scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled { + scale.vertical.marks-before:not(.marks-after) slider:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3532,11 +3522,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(rtl) slider:backdrop, - scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop { + scale.vertical.marks-before:not(.marks-after) slider:backdrop { margin: -10px; border-style: none; border-radius: 0; @@ -3548,11 +3537,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(rtl) slider:backdrop:disabled, - scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3564,11 +3552,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, scale.color.vertical:dir(ltr) slider:disabled, scale.color.vertical:dir(ltr) slider:backdrop:disabled, scale.color.vertical:dir(ltr) slider, - scale.vertical contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before) slider { margin: -10px; border-style: none; border-radius: 0; @@ -3580,11 +3567,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } - scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:hover:backdrop:disabled, - scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { + scale.vertical.marks-after:not(.marks-before) slider:hover { margin: -10px; border-style: none; border-radius: 0; @@ -3596,11 +3582,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } - scale.color.vertical:dir(ltr) slider:active:backdrop:disabled, scale.color.vertical:dir(ltr) slider:active, - scale.vertical contents:first-child:not(:only-child) > trough > slider:active { + scale.vertical.marks-after:not(.marks-before) slider:active { margin: -10px; border-style: none; border-radius: 0; @@ -3612,11 +3597,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } - scale.color.vertical:dir(ltr) slider:disabled, - scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled { + scale.vertical.marks-after:not(.marks-before) slider:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3628,11 +3612,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } - scale.color.vertical:dir(ltr) slider:backdrop, - scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop { + scale.vertical.marks-after:not(.marks-before) slider:backdrop { margin: -10px; border-style: none; border-radius: 0; @@ -3644,11 +3627,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } - scale.color.vertical:dir(ltr) slider:backdrop:disabled, - scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3660,7 +3642,7 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } scale.color { @@ -3676,7 +3658,7 @@ scale { background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } - scale.color.horizontal slider:hover, scale.color.horizontal slider:backdrop, scale.color.horizontal slider:disabled, scale.color.horizontal slider:backdrop:disabled, scale.color.horizontal slider { + scale.color.horizontal slider:dir(ltr):hover, scale.color.horizontal slider:dir(ltr):backdrop, scale.color.horizontal slider:dir(ltr):disabled, scale.color.horizontal slider:dir(ltr):backdrop:disabled, scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl):hover, scale.color.horizontal slider:dir(rtl):backdrop, scale.color.horizontal slider:dir(rtl):disabled, scale.color.horizontal slider:dir(rtl):backdrop:disabled, scale.color.horizontal slider:dir(rtl) { margin-bottom: -15px; margin-top: 6px; } scale.color.vertical:dir(ltr) { @@ -3699,12 +3681,12 @@ scale { scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; } - scale.color.fine-tune.horizontal { + scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { padding: 0 0 12px 0; } - scale.color.fine-tune.horizontal trough { + scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough { padding-bottom: 7px; background-position: 0 -6px; } - scale.color.fine-tune.horizontal slider { + scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider { margin-bottom: -15px; margin-top: 6px; } scale.color.fine-tune.vertical:dir(ltr) { diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 112369748d..1c0bcb114e 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -3314,8 +3314,7 @@ scale { min-width: 6px; } scale.vertical.fine-tune indicator { min-width: 3px; } - scale.color.horizontal slider:hover, scale.color.horizontal slider:backdrop, scale.color.horizontal slider:disabled, scale.color.horizontal slider:backdrop:disabled, scale.color.horizontal slider, - scale.horizontal contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after) slider { margin: -10px; border-style: none; border-radius: 0; @@ -3327,11 +3326,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.color.horizontal slider:hover, scale.color.horizontal slider:hover:backdrop:disabled, - scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover { + scale.horizontal.marks-before:not(.marks-after) slider:hover { margin: -10px; border-style: none; border-radius: 0; @@ -3343,11 +3341,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.color.horizontal slider:active:backdrop:disabled, scale.color.horizontal slider:active, - scale.horizontal contents:last-child:not(:only-child) > trough > slider:active { + scale.horizontal.marks-before:not(.marks-after) slider:active { margin: -10px; border-style: none; border-radius: 0; @@ -3359,11 +3356,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.color.horizontal slider:disabled, - scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled { + scale.horizontal.marks-before:not(.marks-after) slider:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3375,11 +3371,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.color.horizontal slider:backdrop, - scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop { + scale.horizontal.marks-before:not(.marks-after) slider:backdrop { margin: -10px; border-style: none; border-radius: 0; @@ -3391,11 +3386,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.color.horizontal slider:backdrop:disabled, - scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3407,10 +3401,10 @@ scale { background-position: top; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.horizontal slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.horizontal.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-top: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before) slider { margin: -10px; border-style: none; border-radius: 0; @@ -3422,10 +3416,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover { + scale.horizontal.marks-after:not(.marks-before) slider:hover { margin: -10px; border-style: none; border-radius: 0; @@ -3437,10 +3431,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider:active { + scale.horizontal.marks-after:not(.marks-before) slider:active { margin: -10px; border-style: none; border-radius: 0; @@ -3452,10 +3446,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled { + scale.horizontal.marks-after:not(.marks-before) slider:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3467,10 +3461,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop { + scale.horizontal.marks-after:not(.marks-before) slider:backdrop { margin: -10px; border-style: none; border-radius: 0; @@ -3482,10 +3476,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3497,11 +3491,10 @@ scale { background-position: bottom; background-repeat: no-repeat; box-shadow: none; } - scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.horizontal.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-bottom: -11px; } - scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider, - scale.vertical contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after) slider { margin: -10px; border-style: none; border-radius: 0; @@ -3513,11 +3506,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:hover:backdrop:disabled, - scale.vertical contents:last-child:not(:only-child) > trough > slider:hover { + scale.vertical.marks-before:not(.marks-after) slider:hover { margin: -10px; border-style: none; border-radius: 0; @@ -3529,11 +3521,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(rtl) slider:active:backdrop:disabled, scale.color.vertical:dir(rtl) slider:active, - scale.vertical contents:last-child:not(:only-child) > trough > slider:active { + scale.vertical.marks-before:not(.marks-after) slider:active { margin: -10px; border-style: none; border-radius: 0; @@ -3545,11 +3536,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(rtl) slider:disabled, - scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled { + scale.vertical.marks-before:not(.marks-after) slider:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3561,11 +3551,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(rtl) slider:backdrop, - scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop { + scale.vertical.marks-before:not(.marks-after) slider:backdrop { margin: -10px; border-style: none; border-radius: 0; @@ -3577,11 +3566,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(rtl) slider:backdrop:disabled, - scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3593,11 +3581,10 @@ scale { background-position: left bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(rtl) slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider { + scale.vertical.marks-before:not(.marks-after).fine-tune slider { margin: -7px; margin-left: -11px; } - scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:backdrop, scale.color.vertical:dir(ltr) slider:disabled, scale.color.vertical:dir(ltr) slider:backdrop:disabled, scale.color.vertical:dir(ltr) slider, - scale.vertical contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before) slider { margin: -10px; border-style: none; border-radius: 0; @@ -3609,11 +3596,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } - scale.color.vertical:dir(ltr) slider:hover, scale.color.vertical:dir(ltr) slider:hover:backdrop:disabled, - scale.vertical contents:first-child:not(:only-child) > trough > slider:hover { + scale.vertical.marks-after:not(.marks-before) slider:hover { margin: -10px; border-style: none; border-radius: 0; @@ -3625,11 +3611,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } - scale.color.vertical:dir(ltr) slider:active:backdrop:disabled, scale.color.vertical:dir(ltr) slider:active, - scale.vertical contents:first-child:not(:only-child) > trough > slider:active { + scale.vertical.marks-after:not(.marks-before) slider:active { margin: -10px; border-style: none; border-radius: 0; @@ -3641,11 +3626,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } - scale.color.vertical:dir(ltr) slider:disabled, - scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled { + scale.vertical.marks-after:not(.marks-before) slider:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3657,11 +3641,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } - scale.color.vertical:dir(ltr) slider:backdrop, - scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop { + scale.vertical.marks-after:not(.marks-before) slider:backdrop { margin: -10px; border-style: none; border-radius: 0; @@ -3673,11 +3656,10 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } - scale.color.vertical:dir(ltr) slider:backdrop:disabled, - scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled { + scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled { margin: -10px; border-style: none; border-radius: 0; @@ -3689,7 +3671,7 @@ scale { background-position: right bottom; background-repeat: no-repeat; box-shadow: none; } - scale.color.fine-tune.vertical:dir(ltr) slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider { + scale.vertical.marks-after:not(.marks-before).fine-tune slider { margin: -7px; margin-right: -11px; } scale.color { @@ -3705,7 +3687,7 @@ scale { background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } - scale.color.horizontal slider:hover, scale.color.horizontal slider:backdrop, scale.color.horizontal slider:disabled, scale.color.horizontal slider:backdrop:disabled, scale.color.horizontal slider { + scale.color.horizontal slider:dir(ltr):hover, scale.color.horizontal slider:dir(ltr):backdrop, scale.color.horizontal slider:dir(ltr):disabled, scale.color.horizontal slider:dir(ltr):backdrop:disabled, scale.color.horizontal slider:dir(ltr), scale.color.horizontal slider:dir(rtl):hover, scale.color.horizontal slider:dir(rtl):backdrop, scale.color.horizontal slider:dir(rtl):disabled, scale.color.horizontal slider:dir(rtl):backdrop:disabled, scale.color.horizontal slider:dir(rtl) { margin-bottom: -15px; margin-top: 6px; } scale.color.vertical:dir(ltr) { @@ -3728,12 +3710,12 @@ scale { scale.color.vertical:dir(rtl) slider:hover, scale.color.vertical:dir(rtl) slider:backdrop, scale.color.vertical:dir(rtl) slider:disabled, scale.color.vertical:dir(rtl) slider:backdrop:disabled, scale.color.vertical:dir(rtl) slider { margin-right: -15px; margin-left: 6px; } - scale.color.fine-tune.horizontal { + scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { padding: 0 0 12px 0; } - scale.color.fine-tune.horizontal trough { + scale.color.fine-tune.horizontal:dir(ltr) trough, scale.color.fine-tune.horizontal:dir(rtl) trough { padding-bottom: 7px; background-position: 0 -6px; } - scale.color.fine-tune.horizontal slider { + scale.color.fine-tune.horizontal:dir(ltr) slider, scale.color.fine-tune.horizontal:dir(rtl) slider { margin-bottom: -15px; margin-top: 6px; } scale.color.fine-tune.vertical:dir(ltr) {