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

Adwaita: Update range styling

Browse Source 
Adapt to the new CSS nodes for trough rendering. This commit
also brings back visible fill-level rendering for scales, which
was not working for a while. The styling provided for that
(scale trough fill) is just a placeholder to aid in debugging
the implementation.
This commit is contained in:
Matthias Clasen 2015-11-06 19:28:56 -05:00
parent 11d7f6df7c
commit f95a22a3ab
3 changed files with 60 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
gtk/theme/Adwaita/_common.scss
View File

@ -2153,22 +2153,32 @@ scale {
&.fine-tune {
outline-offset: -7px;
outline-radius: 6px;
& trough { border-radius: 4px; }
& trough:not(:first-child):not(:last-child),
& trough:only-child {
margin: 10px;
& highlight,
& fill,
& trough {
border-radius: 4px;
&:not(:first-child):not(:last-child),
&:only-child {
margin: 10px;
}
}
}
& trough,
& fill,
& highlight {
&:not(:first-child):not(:last-child),
&:only-child {
margin: 12px;
}
}
& trough:not(:first-child):not(:last-child),
& trough:only-child {
margin: 12px;
& slider { margin: 2px 0; }
}
&.vertical trough:not(:first-child):not(:last-child),
&.vertical trough:only-child {
margin: 12px;
& slider { margin: 0 2px; }
}
@ -2228,9 +2238,10 @@ scale {
&:backdrop { @include button(osd-backdrop); }
}
}
&.highlight {
& highlight {
@include progressbar_fill;
border-color: $selected_borders_color;
border: 1px solid $borders_color;
border-radius: 3px;
box-shadow: _widget_edge();
&.vertical { @include progressbar_fill(vertical); }
&:backdrop {
@ -2240,9 +2251,12 @@ scale {
box-shadow: none;
}
}
&.progressbar {
& fill {
background: none;
background-color: red;
border: 1px solid $borders_color;
border-radius: 3px;
box-shadow: _widget_edge();
}
&:insensitive, &.vertical:insensitive {
border-color: $insensitive_borders_color;

34
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -2934,18 +2934,16 @@ scale {
scale.fine-tune {
outline-offset: -7px;
outline-radius: 6px; }
scale.fine-tune trough {
scale.fine-tune highlight, scale.fine-tune fill, scale.fine-tune trough {
border-radius: 4px; }
scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child {
margin: 10px; }
scale trough:not(:first-child):not(:last-child), scale trough:only-child {
scale.fine-tune highlight:not(:first-child):not(:last-child), scale.fine-tune highlight:only-child, scale.fine-tune fill:not(:first-child):not(:last-child), scale.fine-tune fill:only-child, scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child {
margin: 10px; }
scale trough:not(:first-child):not(:last-child), scale trough:only-child, scale fill:not(:first-child):not(:last-child), scale fill:only-child, scale highlight:not(:first-child):not(:last-child), scale highlight:only-child {
margin: 12px; }
scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider {
margin: 2px 0; }
scale.vertical trough:not(:first-child):not(:last-child), scale.vertical trough:only-child {
margin: 12px; }
scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider {
margin: 0 2px; }
scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider {
margin: 2px 0; }
scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider {
margin: 0 2px; }
scale trough {
border: 1px solid #1c1f1f;
border-radius: 3px;
@ -3039,19 +3037,23 @@ scale {
box-shadow: none;
text-shadow: none;
icon-shadow: none; }
scale trough.highlight {
scale trough highlight {
background-image: linear-gradient(to bottom, #215d9c 2px, #266cb5);
border-color: #0f2b48;
border: 1px solid #1c1f1f;
border-radius: 3px;
box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
scale trough.highlight.vertical {
scale trough highlight.vertical {
background-image: linear-gradient(to right, #215d9c 2px, #266cb5); }
scale trough.highlight:backdrop {
scale trough highlight:backdrop {
border-color: #0f2b48;
background-color: #215d9c;
box-shadow: none; }
scale trough.progressbar {
scale trough fill {
background: none;
background-color: red; }
background-color: red;
border: 1px solid #1c1f1f;
border-radius: 3px;
box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
scale trough:insensitive, scale trough.vertical:insensitive {
border-color: #1c1f1f;
background-image: none;

34
gtk/theme/Adwaita/gtk-contained.css
View File

@ -3096,18 +3096,16 @@ scale {
scale.fine-tune {
outline-offset: -7px;
outline-radius: 6px; }
scale.fine-tune trough {
scale.fine-tune highlight, scale.fine-tune fill, scale.fine-tune trough {
border-radius: 4px; }
scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child {
margin: 10px; }
scale trough:not(:first-child):not(:last-child), scale trough:only-child {
scale.fine-tune highlight:not(:first-child):not(:last-child), scale.fine-tune highlight:only-child, scale.fine-tune fill:not(:first-child):not(:last-child), scale.fine-tune fill:only-child, scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child {
margin: 10px; }
scale trough:not(:first-child):not(:last-child), scale trough:only-child, scale fill:not(:first-child):not(:last-child), scale fill:only-child, scale highlight:not(:first-child):not(:last-child), scale highlight:only-child {
margin: 12px; }
scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider {
margin: 2px 0; }
scale.vertical trough:not(:first-child):not(:last-child), scale.vertical trough:only-child {
margin: 12px; }
scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider {
margin: 0 2px; }
scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider {
margin: 2px 0; }
scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider {
margin: 0 2px; }
scale trough {
border: 1px solid #a1a1a1;
border-radius: 3px;
@ -3201,19 +3199,23 @@ scale {
box-shadow: none;
text-shadow: none;
icon-shadow: none; }
scale trough.highlight {
scale trough highlight {
background-image: linear-gradient(to bottom, #4a90d9 2px, #63a0de);
border-color: #184472;
border: 1px solid #a1a1a1;
border-radius: 3px;
box-shadow: 0 1px white; }
scale trough.highlight.vertical {
scale trough highlight.vertical {
background-image: linear-gradient(to right, #4a90d9 2px, #63a0de); }
scale trough.highlight:backdrop {
scale trough highlight:backdrop {
border-color: #4a90d9;
background-color: #4a90d9;
box-shadow: none; }
scale trough.progressbar {
scale trough fill {
background: none;
background-color: red; }
background-color: red;
border: 1px solid #a1a1a1;
border-radius: 3px;
box-shadow: 0 1px white; }
scale trough:insensitive, scale trough.vertical:insensitive {
border-color: #a1a1a1;
background-image: none;