mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-17 14:30:15 +00:00
HighContrast: Update range styling
Adapt to changes in the previous commit.
This commit is contained in:
Matthias Clasen
parent
37ad3628a0
commit
8dfb0e728c
@ -1477,6 +1477,7 @@ notebook {
|
||||
* Scrollbars *
|
||||
**************/
|
||||
|
||||
scrollbar,
|
||||
.scrollbar {
|
||||
background-clip: padding-box;
|
||||
background-image: none;
|
||||
@ -1491,14 +1492,14 @@ notebook {
|
||||
|
||||
-GtkRange-stepper-spacing: 0;
|
||||
-GtkRange-trough-under-steppers: 1;
|
||||
@extend .scrollbars-junction;
|
||||
$_slider_margin: 3px;
|
||||
$_slider_fine_tune_margin: 4px;
|
||||
|
||||
.button {
|
||||
|
||||
button {
|
||||
border: none;
|
||||
}
|
||||
&.trough { @extend .scrollbars-junction; }
|
||||
&.slider {
|
||||
& slider {
|
||||
border-radius: 20px;
|
||||
border: 5px solid transparent; //margin
|
||||
background-color: mix($bg_color, $fg_color, 50%);
|
||||
@ -1521,28 +1522,25 @@ notebook {
|
||||
&.overlay-indicator {
|
||||
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
|
||||
opacity: 0.4;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
|
||||
-GtkRange-slider-width: 5px;
|
||||
|
||||
.slider {
|
||||
slider {
|
||||
margin: 0;
|
||||
background-color: $fg_color;
|
||||
border: 1px solid white;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.trough {
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// w/o the following margin tweaks the slider shrinks when hovering/dragging
|
||||
&.vertical .slider {
|
||||
&.vertical slider {
|
||||
margin-top: $_slider_margin - 1px;
|
||||
margin-bottom: $_slider_margin - 1px;
|
||||
}
|
||||
|
||||
&.horizontal .slider {
|
||||
&.horizontal slider {
|
||||
margin-left: $_slider_margin - 1px;
|
||||
margin-right: $_slider_margin - 1px;
|
||||
}
|
||||
@ -1678,6 +1676,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
|
||||
/************
|
||||
* GtkScale *
|
||||
************/
|
||||
scale,
|
||||
.scale,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
|
||||
@ -1686,6 +1685,13 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
|
||||
-GtkRange-trough-border: 2;
|
||||
outline-offset: -9px;
|
||||
outline-radius: 4px;
|
||||
margin: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
border-color: $borders_color;
|
||||
background-color: mix($bg_color,$borders_color,60%);
|
||||
box-shadow: inset 1px 1px transparentize(black, 0.9);
|
||||
|
||||
&.fine-tune {
|
||||
outline-offset: -7px;
|
||||
@ -1695,7 +1701,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
&.slider {
|
||||
& slider {
|
||||
//FIXME: better gradient on the slider and hover state
|
||||
@include button(normal, $edge: none);
|
||||
border-radius: 50%;
|
||||
@ -1723,56 +1729,47 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
|
||||
border: 1px solid darken($selected_borders_color,3%);
|
||||
}
|
||||
}
|
||||
&.trough {
|
||||
margin: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
border-color: $borders_color;
|
||||
background-color: mix($bg_color,$borders_color,60%);
|
||||
box-shadow: inset 1px 1px transparentize(black, 0.9);
|
||||
&.highlight {
|
||||
border-color: $selected_borders_color;
|
||||
background-color: $selected_bg_color;
|
||||
&:backdrop {
|
||||
border-color: $insensitive_fg_color;
|
||||
background-color: $insensitive_fg_color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:insensitive, &.hilight:insensitive {
|
||||
border-color: $insensitive_borders_color;
|
||||
background-color: $insensitive_bg_color;
|
||||
}
|
||||
&.highlight {
|
||||
border-color: $selected_borders_color;
|
||||
background-color: $selected_bg_color;
|
||||
&:backdrop {
|
||||
border-color: $backdrop_borders_color;
|
||||
background-color: mix($backdrop_bg_color,$borders_color);
|
||||
box-shadow: none;
|
||||
}
|
||||
&:backdrop:insensitive, .hilight:backdrop:insensitive {
|
||||
border-color: $insensitive_fg_color;
|
||||
background-color: $backdrop_bg_color;
|
||||
border-color: $insensitive_fg_color;
|
||||
background-color: $insensitive_fg_color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:insensitive, &.hilight:insensitive {
|
||||
border-color: $insensitive_borders_color;
|
||||
background-color: $insensitive_bg_color;
|
||||
}
|
||||
&:backdrop {
|
||||
border-color: $backdrop_borders_color;
|
||||
background-color: mix($backdrop_bg_color,$borders_color);
|
||||
box-shadow: none;
|
||||
}
|
||||
&:backdrop:insensitive, .hilight:backdrop:insensitive {
|
||||
border-color: $insensitive_fg_color;
|
||||
background-color: $backdrop_bg_color;
|
||||
}
|
||||
}
|
||||
|
||||
//FIXME: scale sliders
|
||||
|
||||
%scale_marks_above_horz {
|
||||
.trough { margin: 14px 10px 10px; }
|
||||
&.fine-tune .trough { margin: 12px 8px 8px; }
|
||||
margin: 14px 10px 10px;
|
||||
&.fine-tune { margin: 12px 8px 8px; }
|
||||
}
|
||||
%scale_marks_below_horz {
|
||||
.trough { margin: 10px 10px 14px; }
|
||||
&.fine-tune .trough { margin: 8px 8px 12px; }
|
||||
margin: 10px 10px 14px;
|
||||
&.fine-tune { margin: 8px 8px 12px; }
|
||||
}
|
||||
%scale_marks_above_vert {
|
||||
.trough { margin: 10px 10px 10px 14px; }
|
||||
&.fine-tune .trough { margin: 8px 8px 8px 12px; }
|
||||
margin: 10px 10px 10px 14px;
|
||||
&.fine-tune { margin: 8px 8px 8px 12px; }
|
||||
}
|
||||
%scale_marks_below_vert {
|
||||
.trough { margin: 10px 14px 10px 10px; }
|
||||
&.fine-tune .trough { margin: 8px 12px 8px 8px; }
|
||||
margin: 10px 14px 10px 10px;
|
||||
&.fine-tune { margin: 8px 12px 8px 8px; }
|
||||
}
|
||||
|
||||
/*****************
|
||||
|
||||
@ -1665,6 +1665,7 @@ notebook {
|
||||
/**************
|
||||
* Scrollbars *
|
||||
**************/
|
||||
scrollbar,
|
||||
.scrollbar {
|
||||
background-clip: padding-box;
|
||||
background-image: none;
|
||||
@ -1676,46 +1677,61 @@ notebook {
|
||||
-GtkScrollbar-min-slider-length: 42;
|
||||
-GtkRange-stepper-spacing: 0;
|
||||
-GtkRange-trough-under-steppers: 1; }
|
||||
.scrollbar .button {
|
||||
scrollbar button,
|
||||
.scrollbar button {
|
||||
border: none; }
|
||||
.scrollbar.slider {
|
||||
scrollbar slider,
|
||||
.scrollbar slider {
|
||||
border-radius: 20px;
|
||||
border: 5px solid transparent;
|
||||
background-color: gray; }
|
||||
.scrollbar.slider:backdrop, .scrollbar.slider:insensitive {
|
||||
scrollbar slider:backdrop, scrollbar slider:insensitive,
|
||||
.scrollbar slider:backdrop,
|
||||
.scrollbar slider:insensitive {
|
||||
background-color: #e6e6e6; }
|
||||
.scrollbar.slider:hover {
|
||||
scrollbar slider:hover,
|
||||
.scrollbar slider:hover {
|
||||
background-color: #4d4d4d; }
|
||||
.scrollbar.slider:prelight:active {
|
||||
scrollbar slider:prelight:active,
|
||||
.scrollbar slider:prelight:active {
|
||||
background-color: #000; }
|
||||
.scrollbar.slider.fine-tune {
|
||||
scrollbar slider.fine-tune,
|
||||
.scrollbar slider.fine-tune {
|
||||
border-width: 8px; }
|
||||
.scrollbar.slider.fine-tune:prelight:active {
|
||||
scrollbar slider.fine-tune:prelight:active,
|
||||
.scrollbar slider.fine-tune:prelight:active {
|
||||
background-color: #000; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering),
|
||||
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
|
||||
opacity: 0.4;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
-GtkRange-slider-width: 5px; }
|
||||
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .slider {
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider,
|
||||
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
|
||||
margin: 0;
|
||||
background-color: #000;
|
||||
border: 1px solid white;
|
||||
background-clip: padding-box; }
|
||||
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .trough {
|
||||
border-style: none;
|
||||
background-color: transparent; }
|
||||
.scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical .slider {
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider,
|
||||
.scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px; }
|
||||
.scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal .slider {
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider,
|
||||
.scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px; }
|
||||
.scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering {
|
||||
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering,
|
||||
.scrollbar.overlay-indicator.dragging,
|
||||
.scrollbar.overlay-indicator.hovering {
|
||||
opacity: 0.7; }
|
||||
|
||||
.scrollbars-junction, .scrollbar.trough {
|
||||
.scrollbars-junction, scrollbar,
|
||||
.scrollbar {
|
||||
border-color: transparent;
|
||||
background-color: #f2f2f2; }
|
||||
.scrollbars-junction:backdrop, .scrollbar.trough:backdrop {
|
||||
.scrollbars-junction:backdrop, scrollbar:backdrop,
|
||||
.scrollbar:backdrop {
|
||||
background-color: transparent; }
|
||||
|
||||
/**********
|
||||
@ -1868,6 +1884,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
|
||||
/************
|
||||
* GtkScale *
|
||||
************/
|
||||
scale,
|
||||
.scale,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
|
||||
@ -1875,20 +1892,30 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
|
||||
-GtkRange-slider-width: 20;
|
||||
-GtkRange-trough-border: 2;
|
||||
outline-offset: -9px;
|
||||
outline-radius: 4px; }
|
||||
outline-radius: 4px;
|
||||
margin: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
border-color: gray;
|
||||
background-color: #cccccc;
|
||||
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
scale.fine-tune,
|
||||
.scale.fine-tune,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune {
|
||||
outline-offset: -7px;
|
||||
outline-radius: 6px; }
|
||||
scale.fine-tune.trough,
|
||||
.scale.fine-tune.trough,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune.trough,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.trough {
|
||||
border-radius: 4px;
|
||||
margin: 8px; }
|
||||
.scale.slider,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.slider,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider {
|
||||
scale slider,
|
||||
.scale slider,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below slider,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
@ -1897,9 +1924,10 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
|
||||
border-color: gray;
|
||||
border-radius: 50%;
|
||||
border-color: #787878; }
|
||||
.scale.slider:hover,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.slider:hover,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover {
|
||||
scale slider:hover,
|
||||
.scale slider:hover,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below slider:hover,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider:hover {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
@ -1908,75 +1936,76 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
|
||||
background-image: none;
|
||||
border-color: #787878;
|
||||
border-radius: 50%; }
|
||||
.scale.slider:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.slider:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:insensitive {
|
||||
scale slider:insensitive,
|
||||
.scale slider:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below slider:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider:insensitive {
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
.scale.slider:backdrop,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop {
|
||||
scale slider:backdrop,
|
||||
.scale slider:backdrop,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below slider:backdrop,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider:backdrop {
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
border-color: #858585;
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
.scale.slider:backdrop:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop:insensitive {
|
||||
scale slider:backdrop:insensitive,
|
||||
.scale slider:backdrop:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below slider:backdrop:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider:backdrop:insensitive {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: gray;
|
||||
background-color: white;
|
||||
border-color: #8d8d8d;
|
||||
background-image: none; }
|
||||
.scale.slider:active,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.slider:active,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
|
||||
scale slider:active,
|
||||
.scale slider:active,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below slider:active,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider:active {
|
||||
border: 1px solid black; }
|
||||
.scale.trough,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.trough,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough {
|
||||
margin: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
border-color: gray;
|
||||
background-color: #cccccc;
|
||||
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
.scale.trough.highlight,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
|
||||
border-color: #000;
|
||||
background-color: #000; }
|
||||
.scale.trough.highlight:backdrop,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop {
|
||||
border-color: gray;
|
||||
background-color: gray;
|
||||
box-shadow: none; }
|
||||
.scale.trough:insensitive, .scale.trough.hilight:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive {
|
||||
scale.highlight,
|
||||
.scale.highlight,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.highlight,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.highlight {
|
||||
border-color: #000;
|
||||
background-color: #000; }
|
||||
scale.highlight:backdrop,
|
||||
.scale.highlight:backdrop,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.highlight:backdrop,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.highlight:backdrop {
|
||||
border-color: gray;
|
||||
background-color: white; }
|
||||
.scale.trough:backdrop,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop {
|
||||
border-color: #8d8d8d;
|
||||
background-color: silver;
|
||||
background-color: gray;
|
||||
box-shadow: none; }
|
||||
.scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive {
|
||||
border-color: gray;
|
||||
background-color: #fff; }
|
||||
scale:insensitive, scale.hilight:insensitive,
|
||||
.scale:insensitive,
|
||||
.scale.hilight:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below.hilight:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below.hilight:insensitive {
|
||||
border-color: gray;
|
||||
background-color: white; }
|
||||
scale:backdrop,
|
||||
.scale:backdrop,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below:backdrop,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below:backdrop {
|
||||
border-color: #8d8d8d;
|
||||
background-color: silver;
|
||||
box-shadow: none; }
|
||||
scale:backdrop:insensitive, scale .hilight:backdrop:insensitive,
|
||||
.scale:backdrop:insensitive,
|
||||
.scale .hilight:backdrop:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below:backdrop:insensitive,
|
||||
.scale.scale-has-marks-above.scale-has-marks-below .hilight:backdrop:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below:backdrop:insensitive,
|
||||
.scale.vertical.scale-has-marks-above.scale-has-marks-below .hilight:backdrop:insensitive {
|
||||
border-color: gray;
|
||||
background-color: #fff; }
|
||||
|
||||
/*****************
|
||||
* Progress bars *
|
||||
|
||||
Loading…
Reference in New Issue
Block a user