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 * * Scrollbars *
**************/ **************/
scrollbar,
.scrollbar { .scrollbar {
background-clip: padding-box; background-clip: padding-box;
background-image: none; background-image: none;
@ -1491,14 +1492,14 @@ notebook {
-GtkRange-stepper-spacing: 0; -GtkRange-stepper-spacing: 0;
-GtkRange-trough-under-steppers: 1; -GtkRange-trough-under-steppers: 1;
@extend .scrollbars-junction;
$_slider_margin: 3px; $_slider_margin: 3px;
$_slider_fine_tune_margin: 4px; $_slider_fine_tune_margin: 4px;
.button { button {
border: none; border: none;
} }
&.trough { @extend .scrollbars-junction; } & slider {
&.slider {
border-radius: 20px; border-radius: 20px;
border: 5px solid transparent; //margin border: 5px solid transparent; //margin
background-color: mix($bg_color, $fg_color, 50%); background-color: mix($bg_color, $fg_color, 50%);
@ -1521,28 +1522,25 @@ notebook {
&.overlay-indicator { &.overlay-indicator {
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator &:not(.dragging):not(.hovering) { // Overlay scrolling indicator
opacity: 0.4; opacity: 0.4;
border-style: none;
background-color: transparent;
-GtkRange-slider-width: 5px; -GtkRange-slider-width: 5px;
.slider { slider {
margin: 0; margin: 0;
background-color: $fg_color; background-color: $fg_color;
border: 1px solid white; border: 1px solid white;
background-clip: padding-box; background-clip: padding-box;
} }
.trough {
border-style: none;
background-color: transparent;
}
// w/o the following margin tweaks the slider shrinks when hovering/dragging // w/o the following margin tweaks the slider shrinks when hovering/dragging
&.vertical .slider { &.vertical slider {
margin-top: $_slider_margin - 1px; margin-top: $_slider_margin - 1px;
margin-bottom: $_slider_margin - 1px; margin-bottom: $_slider_margin - 1px;
} }
&.horizontal .slider { &.horizontal slider {
margin-left: $_slider_margin - 1px; margin-left: $_slider_margin - 1px;
margin-right: $_slider_margin - 1px; margin-right: $_slider_margin - 1px;
} }
@ -1678,6 +1676,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
/************ /************
* GtkScale * * GtkScale *
************/ ************/
scale,
.scale, .scale,
.scale.scale-has-marks-above.scale-has-marks-below, .scale.scale-has-marks-above.scale-has-marks-below,
.scale.vertical.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; -GtkRange-trough-border: 2;
outline-offset: -9px; outline-offset: -9px;
outline-radius: 4px; 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 { &.fine-tune {
outline-offset: -7px; outline-offset: -7px;
@ -1695,7 +1701,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
margin: 8px; margin: 8px;
} }
} }
&.slider { & slider {
//FIXME: better gradient on the slider and hover state //FIXME: better gradient on the slider and hover state
@include button(normal, $edge: none); @include button(normal, $edge: none);
border-radius: 50%; border-radius: 50%;
@ -1723,56 +1729,47 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
border: 1px solid darken($selected_borders_color,3%); border: 1px solid darken($selected_borders_color,3%);
} }
} }
&.trough { &.highlight {
margin: 10px; border-color: $selected_borders_color;
border-width: 1px; background-color: $selected_bg_color;
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;
}
&:backdrop { &:backdrop {
border-color: $backdrop_borders_color; border-color: $insensitive_fg_color;
background-color: mix($backdrop_bg_color,$borders_color); background-color: $insensitive_fg_color;
box-shadow: none; box-shadow: none;
}
&:backdrop:insensitive, .hilight:backdrop:insensitive {
border-color: $insensitive_fg_color;
background-color: $backdrop_bg_color;
} }
} }
&: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 //FIXME: scale sliders
%scale_marks_above_horz { %scale_marks_above_horz {
.trough { margin: 14px 10px 10px; } margin: 14px 10px 10px;
&.fine-tune .trough { margin: 12px 8px 8px; } &.fine-tune { margin: 12px 8px 8px; }
} }
%scale_marks_below_horz { %scale_marks_below_horz {
.trough { margin: 10px 10px 14px; } margin: 10px 10px 14px;
&.fine-tune .trough { margin: 8px 8px 12px; } &.fine-tune { margin: 8px 8px 12px; }
} }
%scale_marks_above_vert { %scale_marks_above_vert {
.trough { margin: 10px 10px 10px 14px; } margin: 10px 10px 10px 14px;
&.fine-tune .trough { margin: 8px 8px 8px 12px; } &.fine-tune { margin: 8px 8px 8px 12px; }
} }
%scale_marks_below_vert { %scale_marks_below_vert {
.trough { margin: 10px 14px 10px 10px; } margin: 10px 14px 10px 10px;
&.fine-tune .trough { margin: 8px 12px 8px 8px; } &.fine-tune { margin: 8px 12px 8px 8px; }
} }
/***************** /*****************

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

@ -1665,6 +1665,7 @@ notebook {
/************** /**************
* Scrollbars * * Scrollbars *
**************/ **************/
scrollbar,
.scrollbar { .scrollbar {
background-clip: padding-box; background-clip: padding-box;
background-image: none; background-image: none;
@ -1676,46 +1677,61 @@ notebook {
-GtkScrollbar-min-slider-length: 42; -GtkScrollbar-min-slider-length: 42;
-GtkRange-stepper-spacing: 0; -GtkRange-stepper-spacing: 0;
-GtkRange-trough-under-steppers: 1; } -GtkRange-trough-under-steppers: 1; }
.scrollbar .button { scrollbar button,
.scrollbar button {
border: none; } border: none; }
.scrollbar.slider { scrollbar slider,
.scrollbar slider {
border-radius: 20px; border-radius: 20px;
border: 5px solid transparent; border: 5px solid transparent;
background-color: gray; } background-color: gray; }
.scrollbar.slider:backdrop, .scrollbar.slider:insensitive { scrollbar slider:backdrop, scrollbar slider:insensitive,
.scrollbar slider:backdrop,
.scrollbar slider:insensitive {
background-color: #e6e6e6; } background-color: #e6e6e6; }
.scrollbar.slider:hover { scrollbar slider:hover,
.scrollbar slider:hover {
background-color: #4d4d4d; } background-color: #4d4d4d; }
.scrollbar.slider:prelight:active { scrollbar slider:prelight:active,
.scrollbar slider:prelight:active {
background-color: #000; } background-color: #000; }
.scrollbar.slider.fine-tune { scrollbar slider.fine-tune,
.scrollbar slider.fine-tune {
border-width: 8px; } border-width: 8px; }
.scrollbar.slider.fine-tune:prelight:active { scrollbar slider.fine-tune:prelight:active,
.scrollbar slider.fine-tune:prelight:active {
background-color: #000; } background-color: #000; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering),
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) { .scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
opacity: 0.4; opacity: 0.4;
border-style: none;
background-color: transparent;
-GtkRange-slider-width: 5px; } -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; margin: 0;
background-color: #000; background-color: #000;
border: 1px solid white; border: 1px solid white;
background-clip: padding-box; } background-clip: padding-box; }
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .trough { scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider,
border-style: none; .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
background-color: transparent; }
.scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical .slider {
margin-top: 2px; margin-top: 2px;
margin-bottom: 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-left: 2px;
margin-right: 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; } opacity: 0.7; }
.scrollbars-junction, .scrollbar.trough { .scrollbars-junction, scrollbar,
.scrollbar {
border-color: transparent; border-color: transparent;
background-color: #f2f2f2; } background-color: #f2f2f2; }
.scrollbars-junction:backdrop, .scrollbar.trough:backdrop { .scrollbars-junction:backdrop, scrollbar:backdrop,
.scrollbar:backdrop {
background-color: transparent; } background-color: transparent; }
/********** /**********
@ -1868,6 +1884,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
/************ /************
* GtkScale * * GtkScale *
************/ ************/
scale,
.scale, .scale,
.scale.scale-has-marks-above.scale-has-marks-below, .scale.scale-has-marks-above.scale-has-marks-below,
.scale.vertical.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-slider-width: 20;
-GtkRange-trough-border: 2; -GtkRange-trough-border: 2;
outline-offset: -9px; 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.fine-tune,
.scale.scale-has-marks-above.scale-has-marks-below.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 { .scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune {
outline-offset: -7px; outline-offset: -7px;
outline-radius: 6px; } outline-radius: 6px; }
scale.fine-tune.trough,
.scale.fine-tune.trough, .scale.fine-tune.trough,
.scale.scale-has-marks-above.scale-has-marks-below.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 { .scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.trough {
border-radius: 4px; border-radius: 4px;
margin: 8px; } margin: 8px; }
.scale.slider, scale slider,
.scale.scale-has-marks-above.scale-has-marks-below.slider, .scale slider,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.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-width: 2px;
border-style: solid; border-style: solid;
color: #000; color: #000;
@ -1897,9 +1924,10 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
border-color: gray; border-color: gray;
border-radius: 50%; border-radius: 50%;
border-color: #787878; } border-color: #787878; }
.scale.slider:hover, scale slider:hover,
.scale.scale-has-marks-above.scale-has-marks-below.slider:hover, .scale slider:hover,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.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-width: 2px;
border-style: solid; border-style: solid;
color: #000; color: #000;
@ -1908,75 +1936,76 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
background-image: none; background-image: none;
border-color: #787878; border-color: #787878;
border-radius: 50%; } border-radius: 50%; }
.scale.slider:insensitive, scale slider:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below.slider:insensitive, .scale slider:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.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-style: solid;
border-radius: 50%; border-radius: 50%;
background-image: none; background-image: none;
box-shadow: none; } box-shadow: none; }
.scale.slider:backdrop, scale slider:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop, .scale slider:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.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-style: solid;
border-radius: 50%; border-radius: 50%;
border-color: #858585; border-color: #858585;
background-image: none; background-image: none;
box-shadow: none; } box-shadow: none; }
.scale.slider:backdrop:insensitive, scale slider:backdrop:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop:insensitive, .scale slider:backdrop:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.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-width: 2px;
border-style: solid; border-style: solid;
color: gray; color: gray;
background-color: white; background-color: white;
border-color: #8d8d8d; border-color: #8d8d8d;
background-image: none; } background-image: none; }
.scale.slider:active, scale slider:active,
.scale.scale-has-marks-above.scale-has-marks-below.slider:active, .scale slider:active,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.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; } border: 1px solid black; }
.scale.trough, scale.highlight,
.scale.scale-has-marks-above.scale-has-marks-below.trough, .scale.highlight,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough { .scale.scale-has-marks-above.scale-has-marks-below.highlight,
margin: 10px; .scale.vertical.scale-has-marks-above.scale-has-marks-below.highlight {
border-width: 1px; border-color: #000;
border-style: solid; background-color: #000; }
border-radius: 3px; scale.highlight:backdrop,
border-color: gray; .scale.highlight:backdrop,
background-color: #cccccc; .scale.scale-has-marks-above.scale-has-marks-below.highlight:backdrop,
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } .scale.vertical.scale-has-marks-above.scale-has-marks-below.highlight:backdrop {
.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 {
border-color: gray; border-color: gray;
background-color: white; } background-color: gray;
.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;
box-shadow: none; } box-shadow: none; }
.scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive, scale:insensitive, scale.hilight:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, .scale:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive, .scale.hilight:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, .scale.scale-has-marks-above.scale-has-marks-below:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive { .scale.scale-has-marks-above.scale-has-marks-below.hilight:insensitive,
border-color: gray; .scale.vertical.scale-has-marks-above.scale-has-marks-below:insensitive,
background-color: #fff; } .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 * * Progress bars *