Made sliders aspect (scale and switch) more coherent with buttons
This commit is contained in:
parent
3762693412
commit
38663c3e1d
|
@ -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); }
|
||||
|
|
Loading…
Reference in New Issue