AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

HighContrast: Update range styling

Browse Source 
Adapt to changes in the previous commit.
This commit is contained in:
Matthias Clasen 2015-11-03 23:16:45 -05:00
parent 37ad3628a0
commit 8dfb0e728c
2 changed files with 149 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
gtk/theme/HighContrast/_common.scss
View File

@ -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; }
}
/*****************

177
gtk/theme/HighContrast/gtk.css
View File

@ -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 *