Made sliders aspect (scale and switch) more coherent with buttons

This commit is contained in:
Eudaimon 2022-07-13 08:25:24 +02:00
parent 3762693412
commit 38663c3e1d
1 changed files with 17 additions and 17 deletions

View File

@ -3301,20 +3301,18 @@ switch {
border: 0px;
border-radius: 4px;
transition: all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-image: linear-gradient(shade(@button_bg, 1.1), @button_bg);
box-shadow: 0 0 0 2px alpha(white, 0),
0 1px 2px alpha(black, 0.6),
inset 0 0 0 1px alpha(white, 0.4),
0px 4px 2px -1px alpha(black, 0.6);
background-color: shade(@button_bg, 1.15);
box-shadow: inset 0 1px 1px 0 alpha(white, 0.5), inset 0 -1px 1px 0 alpha(black, 0.5);
background-image: linear-gradient(to bottom, alpha(@highlight_color,0.2), alpha(black,0.2));
}
switch:hover slider, switch:focus slider {
box-shadow: 0 0 0 6px alpha(white, 0.4), 0 1px 2px alpha(black, 0.6), inset 0 0 0 1px alpha(white, 0.4); }
/*box-shadow: 0 0 0 6px alpha(white, 0.4), 0 1px 2px alpha(black, 0.6), inset 0 0 0 1px alpha(white, 0.4);*/
background-color: shade(@button_bg, 1.25);
}
switch:disabled slider {
background-image: linear-gradient(shade(@disabled_bg, 1.1), @disabled_bg);
box-shadow: 0 0 0 2px alpha(white, 0),
0 1px 2px alpha(black, 0.6),
inset 0 0px 0px 1px @disabled_fg,
0px 4px 2px -1px alpha(black, 0.6);
background-color: @disabled_bg;
background-image: none;
box-shadow: inset 0 1px 1px 0 alpha(white, 0.2), inset 0 -1px 1px 0 alpha(black, 0.2);
}
switch:focus slider {
outline-color: @selected_bg;
@ -3710,24 +3708,26 @@ progressbar.horizontal trough, scale.horizontal trough, levelbar.horizontal trou
scale slider {
border-radius: 100%;
background-color: shade(@button_bg, 1.15);
box-shadow: 0 0 0 4px alpha(white, 0), 0 2px 3px 0 alpha(black, 0.6), inset 0 1px 2px 0 alpha(white, 0.5), inset 0 -1px 2px 0 alpha(black, 0.3);
box-shadow: inset 0 1px 1px 0 alpha(white, 0.5), inset 0 -1px 1px 0 alpha(black, 0.5);
background-image: linear-gradient(to bottom, alpha(@highlight_color,0.2), alpha(black,0.2));
transition: all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-property: background, border, box-shadow;
/*border: 4px dashed yellow;*/
}
scale:not(.marks-after):not(.marks-before):not(:disabled) slider {
background-image: radial-gradient(@slider_inner_color, @slider_middle_color 25%, @slider_outer_color 35%);
}
/*background-image: radial-gradient(@slider_inner_color, @slider_middle_color 25%, @slider_outer_color 35%);*/
}
scale slider:hover {
box-shadow: 0 0 0 8px alpha(white, 0.4), 0 1px 2px 0 alpha(black, 0.5), inset 0 0 0 1px white; }
/*box-shadow: 0 0 0 8px alpha(white, 0.4), 0 1px 2px 0 alpha(black, 0.5), inset 0 0 0 1px white; }*/
background-color: shade(@window_bg, 1.20);
}
scale slider:active {
background-color: shade(@window_bg, 1.25);
}
scale slider:disabled {
background-color: mix(@button_bg, @disabled_bg, 0.8);
background-image: none;
box-shadow: 0 0 0 4px alpha(white, 0), 0 2px 3px 0 alpha(black, 0.6), inset 0 1px 2px 0 alpha(white, 0.1), inset 0 -1px 2px 0 alpha(black, 0.1);
box-shadow: inset 0 1px 1px 0 alpha(white, 0.2), inset 0 -1px 1px 0 alpha(black, 0.2);
}
/*scale slider:backdrop {
box-shadow: 0 1px 2px 0 alpha(black, 0.2); }