HighContrast: Update scale styling

This commit is contained in:
Matthias Clasen 2015-11-05 07:01:57 -05:00
parent 53ae100e64
commit 8afb4a69e8
2 changed files with 69 additions and 86 deletions

View File

@ -1655,8 +1655,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
* GtkScale *
************/
scale,
.scale.scale-has-marks-above.scale-has-marks-below,
.scale.vertical.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 {
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 20;
-GtkRange-trough-border: 2;
@ -1671,32 +1671,34 @@ scale,
margin: 8px;
}
}
& slider {
//FIXME: better gradient on the slider and hover state
@include button(normal, $edge: none);
border-radius: 50%;
border-color: darken($borders_color,3%);
&:hover {
@include button(hover, $edge: none);
trough {
slider {
//FIXME: better gradient on the slider and hover state
@include button(normal, $edge: none);
border-radius: 50%;
border-color: darken($borders_color,3%);
border-radius: 50%; // needed for double marks scales
}
&:insensitive {
border-style: solid; // needed for double marks scales or they'll get
border-radius: 50%; // overridden
background-image: none;
box-shadow: none;
}
&:backdrop {
border-style: solid; // needed for double marks scales or they'll get
border-radius: 50%; // overridden
border-color: darken($backdrop_borders_color,3%);
background-image: none;
box-shadow: none;
}
&:backdrop:insensitive { @include button(backdrop-insensitive);}
&:active {
border: 1px solid darken($selected_borders_color,3%);
&:hover {
@include button(hover, $edge: none);
border-color: darken($borders_color,3%);
border-radius: 50%; // needed for double marks scales
}
&:insensitive {
border-style: solid; // needed for double marks scales or they'll get
border-radius: 50%; // overridden
background-image: none;
box-shadow: none;
}
&:backdrop {
border-style: solid; // needed for double marks scales or they'll get
border-radius: 50%; // overridden
border-color: darken($backdrop_borders_color,3%);
background-image: none;
box-shadow: none;
}
&:backdrop:insensitive { @include button(backdrop-insensitive);}
&:active {
border: 1px solid darken($selected_borders_color,3%);
}
}
}
trough {
@ -1732,25 +1734,6 @@ scale,
}
}
//FIXME: scale sliders
%scale_marks_above_horz {
trough { margin: 14px 10px 10px; }
&.fine-tune trough { margin: 12px 8px 8px; }
}
%scale_marks_below_horz {
trough { margin: 10px 10px 14px; }
&.fine-tune trough { margin: 8px 8px 12px; }
}
%scale_marks_above_vert {
trough { margin: 10px 10px 10px 14px; }
&.fine-tune trough { margin: 8px 8px 8px 12px; }
}
%scale_marks_below_vert {
trough { margin: 10px 14px 10px 10px; }
&.fine-tune trough { margin: 8px 12px 8px 8px; }
}
/*****************
* Progress bars *
*****************/

View File

@ -1798,26 +1798,26 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
* GtkScale *
************/
scale,
.scale.scale-has-marks-above.scale-has-marks-below,
.scale.vertical.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 {
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 20;
-GtkRange-trough-border: 2;
outline-offset: -9px;
outline-radius: 4px; }
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 {
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.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.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 trough slider,
scale.scale-has-marks-above.scale-has-marks-below trough slider,
scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider {
border-width: 2px;
border-style: solid;
color: #000;
@ -1826,9 +1826,9 @@ scale,
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 trough slider:hover,
scale.scale-has-marks-above.scale-has-marks-below trough slider:hover,
scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:hover {
border-width: 2px;
border-style: solid;
color: #000;
@ -1837,37 +1837,37 @@ scale,
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 trough slider:insensitive,
scale.scale-has-marks-above.scale-has-marks-below trough slider:insensitive,
scale.vertical.scale-has-marks-above.scale-has-marks-below trough 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 trough slider:backdrop,
scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop,
scale.vertical.scale-has-marks-above.scale-has-marks-below trough 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 trough slider:backdrop:insensitive,
scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:insensitive,
scale.vertical.scale-has-marks-above.scale-has-marks-below trough 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 trough slider:active,
scale.scale-has-marks-above.scale-has-marks-below trough slider:active,
scale.vertical.scale-has-marks-above.scale-has-marks-below trough 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 {
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;
@ -1876,34 +1876,34 @@ scale,
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 {
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 {
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.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;
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 {
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; }
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 {
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; }