GTK3: use button styling for switch and scale sliders
This commit is contained in:
Daniel Ruiz de Alegría
parent
5c06f61200
commit
4359106bd9
@ -5089,12 +5089,6 @@ headerbar spinbutton:not(.vertical),
|
||||
headerbar entry {
|
||||
background: #272a34; }
|
||||
|
||||
/**********
|
||||
* Slider *
|
||||
**********/
|
||||
scale slider:active, switch:hover slider {
|
||||
background-image: image(#0f1014); }
|
||||
|
||||
/**********
|
||||
* Switch *
|
||||
**********/
|
||||
@ -5108,23 +5102,12 @@ switch {
|
||||
switch:backdrop, switch:disabled {
|
||||
box-shadow: none;
|
||||
border-color: #16171d; }
|
||||
switch slider {
|
||||
color: #eeeeec;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
border-color: black;
|
||||
background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
|
||||
border: 1px solid black;
|
||||
border-radius: 50%;
|
||||
transition-property: background, border, box-shadow; }
|
||||
switch slider:checked {
|
||||
border-color: black; }
|
||||
switch slider:checked:backdrop:not(:disabled) {
|
||||
border-color: #16171d; }
|
||||
switch slider:disabled {
|
||||
switch slider:checked {
|
||||
border-color: #0d0e11; }
|
||||
switch slider:checked:backdrop:not(:disabled) {
|
||||
border-color: #16171d; }
|
||||
switch:hover slider {
|
||||
border-color: #2777ff; }
|
||||
switch slider:disabled {
|
||||
border-color: #16171d; }
|
||||
|
||||
/*************************
|
||||
* Check and Radio items *
|
||||
@ -5161,11 +5144,22 @@ radio:indeterminate, menu menuitem radio:checked, menu menuitem radio:indetermin
|
||||
radio:indeterminate:backdrop, menu menuitem radio:checked:backdrop, menu menuitem radio:indeterminate:backdrop {
|
||||
background-image: image(#2777ff); }
|
||||
|
||||
/************
|
||||
* GtkScale *
|
||||
************/
|
||||
scale slider:active {
|
||||
border-color: #2777ff; }
|
||||
switch slider,
|
||||
scale slider {
|
||||
color: #eeeeec;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
border-color: #0d0e11;
|
||||
border-bottom-color: black;
|
||||
background-image: linear-gradient(to top, #292c37 2px, #2e313d);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
|
||||
border-color: black; }
|
||||
switch:hover slider, switch slider:active,
|
||||
scale slider:active {
|
||||
background-image: image(#0f1014);
|
||||
border-color: #2777ff; }
|
||||
switch slider:disabled,
|
||||
scale slider:disabled {
|
||||
border-color: #16171d; }
|
||||
|
||||
/***************
|
||||
* Header bars *
|
||||
|
||||
@ -5089,12 +5089,6 @@ headerbar spinbutton:not(.vertical),
|
||||
headerbar entry {
|
||||
background: #272a34; }
|
||||
|
||||
/**********
|
||||
* Slider *
|
||||
**********/
|
||||
scale slider:active, switch:hover slider {
|
||||
background-image: image(#0f1014); }
|
||||
|
||||
/**********
|
||||
* Switch *
|
||||
**********/
|
||||
@ -5108,23 +5102,12 @@ switch {
|
||||
switch:backdrop, switch:disabled {
|
||||
box-shadow: none;
|
||||
border-color: #16171d; }
|
||||
switch slider {
|
||||
color: #eeeeec;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
border-color: black;
|
||||
background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
|
||||
border: 1px solid black;
|
||||
border-radius: 50%;
|
||||
transition-property: background, border, box-shadow; }
|
||||
switch slider:checked {
|
||||
border-color: black; }
|
||||
switch slider:checked:backdrop:not(:disabled) {
|
||||
border-color: #16171d; }
|
||||
switch slider:disabled {
|
||||
switch slider:checked {
|
||||
border-color: #0d0e11; }
|
||||
switch slider:checked:backdrop:not(:disabled) {
|
||||
border-color: #16171d; }
|
||||
switch:hover slider {
|
||||
border-color: #2777ff; }
|
||||
switch slider:disabled {
|
||||
border-color: #16171d; }
|
||||
|
||||
/*************************
|
||||
* Check and Radio items *
|
||||
@ -5161,11 +5144,22 @@ radio:indeterminate, menu menuitem radio:checked, menu menuitem radio:indetermin
|
||||
radio:indeterminate:backdrop, menu menuitem radio:checked:backdrop, menu menuitem radio:indeterminate:backdrop {
|
||||
background-image: image(#2777ff); }
|
||||
|
||||
/************
|
||||
* GtkScale *
|
||||
************/
|
||||
scale slider:active {
|
||||
border-color: #2777ff; }
|
||||
switch slider,
|
||||
scale slider {
|
||||
color: #eeeeec;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
border-color: #0d0e11;
|
||||
border-bottom-color: black;
|
||||
background-image: linear-gradient(to top, #292c37 2px, #2e313d);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
|
||||
border-color: black; }
|
||||
switch:hover slider, switch slider:active,
|
||||
scale slider:active {
|
||||
background-image: image(#0f1014);
|
||||
border-color: #2777ff; }
|
||||
switch slider:disabled,
|
||||
scale slider:disabled {
|
||||
border-color: #16171d; }
|
||||
|
||||
/***************
|
||||
* Header bars *
|
||||
|
||||
@ -5110,12 +5110,6 @@ headerbar spinbutton:not(.vertical),
|
||||
headerbar entry {
|
||||
background: #fafafa; }
|
||||
|
||||
/**********
|
||||
* Slider *
|
||||
**********/
|
||||
scale slider:active, switch:hover slider {
|
||||
background-image: image(white); }
|
||||
|
||||
/**********
|
||||
* Switch *
|
||||
**********/
|
||||
@ -5129,23 +5123,12 @@ switch {
|
||||
switch:backdrop, switch:disabled {
|
||||
box-shadow: none;
|
||||
border-color: #e0e0e0; }
|
||||
switch slider {
|
||||
color: #5c616c;
|
||||
outline-color: rgba(92, 97, 108, 0.3);
|
||||
border-color: #c2c2c2;
|
||||
background-image: linear-gradient(to bottom, white 20%, #ffffff 90%);
|
||||
box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07);
|
||||
border: 1px solid #bababa;
|
||||
border-radius: 50%;
|
||||
transition-property: background, border, box-shadow; }
|
||||
switch slider:checked {
|
||||
border-color: #0051da; }
|
||||
switch slider:checked:backdrop:not(:disabled) {
|
||||
border-color: #2777ff; }
|
||||
switch slider:disabled {
|
||||
border-color: #e0e0e0; }
|
||||
switch:hover slider {
|
||||
border-color: #2777ff; }
|
||||
switch slider:checked {
|
||||
border-color: #0051da; }
|
||||
switch slider:checked:backdrop:not(:disabled) {
|
||||
border-color: #2777ff; }
|
||||
switch slider:disabled {
|
||||
border-color: #e0e0e0; }
|
||||
|
||||
/*************************
|
||||
* Check and Radio items *
|
||||
@ -5182,11 +5165,22 @@ radio:indeterminate, menu menuitem radio:checked, menu menuitem radio:indetermin
|
||||
radio:indeterminate:backdrop, menu menuitem radio:checked:backdrop, menu menuitem radio:indeterminate:backdrop {
|
||||
background-image: image(#2777ff); }
|
||||
|
||||
/************
|
||||
* GtkScale *
|
||||
************/
|
||||
scale slider:active {
|
||||
border-color: #2777ff; }
|
||||
switch slider,
|
||||
scale slider {
|
||||
color: #5c616c;
|
||||
outline-color: rgba(92, 97, 108, 0.3);
|
||||
border-color: #d9d9d9;
|
||||
border-bottom-color: #c2c2c2;
|
||||
background-image: linear-gradient(to top, white 2px, white);
|
||||
box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07);
|
||||
border-color: #bababa; }
|
||||
switch:hover slider, switch slider:active,
|
||||
scale slider:active {
|
||||
background-image: image(white);
|
||||
border-color: #2777ff; }
|
||||
switch slider:disabled,
|
||||
scale slider:disabled {
|
||||
border-color: #e0e0e0; }
|
||||
|
||||
/***************
|
||||
* Header bars *
|
||||
|
||||
@ -59,19 +59,10 @@ headerbar entry {
|
||||
background: $base_color;
|
||||
}
|
||||
|
||||
/**********
|
||||
* Slider *
|
||||
**********/
|
||||
%slider_active {
|
||||
background-image: if($variant == 'light', image(lighten($bg_color, 14%)), image(darken($bg_color, 9%)));
|
||||
}
|
||||
|
||||
/**********
|
||||
* Switch *
|
||||
**********/
|
||||
switch {
|
||||
$_slider_border_color: darken($alt_borders_color, 3%);
|
||||
|
||||
box-shadow: $_widget_inset_shadow;
|
||||
|
||||
&:checked {
|
||||
@ -87,14 +78,10 @@ switch {
|
||||
}
|
||||
|
||||
slider {
|
||||
@include button(normal-alt, $edge: $shadow_color);
|
||||
|
||||
border: 1px solid $_slider_border_color;
|
||||
border-radius: 50%;
|
||||
transition-property: background, border, box-shadow;
|
||||
@extend %slider;
|
||||
|
||||
&:checked {
|
||||
border-color: if($variant=='light', $suggested_border_color, $_slider_border_color);
|
||||
border-color: if($variant=='light', $suggested_border_color, $borders_color);
|
||||
&:backdrop:not(:disabled) {
|
||||
border-color: if($variant=='light', $suggested_bg_color, $backdrop_borders_color);
|
||||
}
|
||||
@ -105,10 +92,7 @@ switch {
|
||||
}
|
||||
}
|
||||
|
||||
&:hover slider {
|
||||
@extend %slider_active;
|
||||
border-color: $suggested_bg_color;
|
||||
}
|
||||
&:hover slider { @extend %slider_active; }
|
||||
}
|
||||
|
||||
/*************************
|
||||
@ -146,13 +130,18 @@ radio {
|
||||
}
|
||||
}
|
||||
|
||||
/************
|
||||
* GtkScale *
|
||||
************/
|
||||
scale slider:active {
|
||||
@extend %slider_active;
|
||||
%slider,
|
||||
scale slider {
|
||||
@include button(normal, $edge: $shadow_color);
|
||||
|
||||
border-color: $suggested_bg_color;
|
||||
border-color: darken($alt_borders_color, 3%);
|
||||
@at-root %slider_active,
|
||||
&:active {
|
||||
background-image: if($variant == 'light', image(lighten($bg_color, 14%)), image(darken($bg_color, 9%)));
|
||||
border-color: $suggested_bg_color;
|
||||
}
|
||||
|
||||
&:disabled { border-color: $backdrop_borders_color; }
|
||||
}
|
||||
|
||||
/***************
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user