Adwaita: scale fill style

This commit is contained in:
Lapo Calamandrei 2015-12-03 12:18:17 +01:00
parent 635da34908
commit 234c497474
3 changed files with 218 additions and 165 deletions

View File

@ -2124,81 +2124,6 @@ checkbutton.text-button, radiobutton.text-button {
* GtkScale *
************/
scale {
// FIXME: rationalize
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 24;
-GtkRange-trough-border: 2;
outline-offset: -9px;
outline-radius: 6px;
&.fine-tune {
outline-offset: -7px;
outline-radius: 8px;
trough,
fill,
highlight {
margin: 10px;
border-radius: 4px;
}
}
trough,
fill,
highlight { margin: 12px; }
&:not(.vertical) slider { margin: 2px 0; }
&.vertical slider { margin: 0 2px; }
trough { @extend %scale_trough; }
highlight { @extend %scale_highlight; }
slider {
// FIXME: scale-has-marks-* missing
$_slider_edge_color: transparentize(black, 0.9);
@include button(normal, $edge: $_slider_edge_color);
border: 1px solid darken($borders_color, 3%);
border-radius: 100%;
&:hover { @include button(hover, $edge: $_slider_edge_color); }
&:active { border-color: $selected_borders_color; }
&:insensitive { @include button (insensitive); }
&:backdrop {
@include button(backdrop);
&:insensitive { @include button(backdrop-insensitive); }
}
// ...on selected list rows
row:selected & { &, &:insensitive { border-color: $selected_borders_color; } }
// OSD
.osd & {
@include button(osd);
border-color: darken($osd_borders_color, 3%);
background-color: opacify($osd_bg_color, 1); // solid background needed here
&:hover { @include button(osd-hover); }
&:active { @include button(osd-active); }
&:insensitive { @include button(osd-insensitive); }
&:backdrop {
@include button(osd-backdrop);
&:insensitive { @include button(osd-backdrop-insensitive); }
}
}
}
}
%scale_trough {
border: 1px solid $borders_color;
border-radius: 3px;
@ -2265,6 +2190,112 @@ scale {
}
}
scale {
// FIXME: rationalize
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 24;
-GtkRange-trough-border: 2;
outline-offset: -9px;
outline-radius: 6px;
&.fine-tune {
outline-offset: -7px;
outline-radius: 8px;
trough,
fill,
highlight {
margin: 10px;
border-radius: 4px;
}
}
trough,
fill,
highlight { margin: 12px; }
&:not(.vertical) slider { margin: 2px 0; }
&.vertical slider { margin: 0 2px; }
// the backing bit
trough { @extend %scale_trough; }
// the colored part of the backing bit
highlight { @extend %scale_highlight; }
// this is another differently styled part of the backing bit, the most relevant use case is for example
// in media player to indicate how much video stream as been cached
fill {
@extend %scale_trough;
&, &:backdrop {
background-color: $borders_color;
box-shadow: none;
}
&:insensitive {
&, &:backdrop {
border-color: transparent;
background-color: transparent;
}
}
// OSD
.osd & {
background-color: mix($osd_fg_color, $osd_borders_color, 25%);
&:insensitive {
&, &:backdrop {
border-color: transparent;
background-color: transparent;
}
}
}
}
slider {
// FIXME: scale-has-marks-* missing
$_slider_edge_color: transparentize(black, 0.9);
@include button(normal, $edge: $_slider_edge_color);
border: 1px solid darken($borders_color, 3%);
border-radius: 100%;
&:hover { @include button(hover, $edge: $_slider_edge_color); }
&:active { border-color: $selected_borders_color; }
&:insensitive { @include button (insensitive); }
&:backdrop {
@include button(backdrop);
&:insensitive { @include button(backdrop-insensitive); }
}
// ...on selected list rows
row:selected & { &, &:insensitive { border-color: $selected_borders_color; } }
// OSD
.osd & {
@include button(osd);
border-color: darken($osd_borders_color, 3%);
background-color: opacify($osd_bg_color, 1); // solid background needed here
&:hover { @include button(osd-hover); }
&:active { @include button(osd-active); }
&:insensitive { @include button(osd-insensitive); }
&:backdrop {
@include button(osd-backdrop);
&:insensitive { @include button(osd-backdrop-insensitive); }
}
}
}
}
/*****************
* Progress bars *
*****************/

View File

@ -2908,6 +2908,51 @@ checkbutton.text-button, radiobutton.text-button {
/************
* GtkScale *
************/
scale trough, scale fill, progressbar trough {
border: 1px solid #1c1f1f;
border-radius: 3px;
background-color: #2f3434;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
scale trough:insensitive, scale fill:insensitive, progressbar trough:insensitive {
background-color: #333636;
box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
scale trough:backdrop, scale fill:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
background-color: #303535;
border-color: #1f2222;
box-shadow: none; }
scale trough:backdrop:insensitive, scale fill:backdrop:insensitive, progressbar trough:backdrop:insensitive, progressbar:backdrop trough:insensitive {
background-color: #333636; }
row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, row:selected progressbar trough, progressbar row:selected trough {
box-shadow: none; }
row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, row:selected progressbar trough, progressbar row:selected trough, row:selected scale trough:insensitive, scale row:selected trough:insensitive, row:selected scale fill:insensitive, scale row:selected fill:insensitive, row:selected progressbar trough:insensitive, progressbar row:selected trough:insensitive {
border-color: #0f2b48; }
.osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill, .osd progressbar trough, progressbar .osd trough {
border-color: rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 0, 0.5);
box-shadow: none;
outline-color: rgba(238, 238, 236, 0.2); }
.osd scale trough:insensitive, scale .osd trough:insensitive, .osd scale fill:insensitive, scale .osd fill:insensitive, .osd progressbar trough:insensitive, progressbar .osd trough:insensitive {
background-color: rgba(53, 57, 58, 0.5); }
scale highlight, progressbar progress {
border: 1px solid #0f2b48;
border-radius: 3px;
background-color: #215d9c; }
scale highlight:insensitive, progressbar progress:insensitive {
background-color: transparent;
border-color: transparent; }
scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
border-color: #0f2b48; }
scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop progress:insensitive {
background-color: transparent;
border-color: transparent; }
row:selected scale highlight, scale row:selected highlight, row:selected progressbar progress, progressbar row:selected progress, row:selected scale highlight:insensitive, scale row:selected highlight:insensitive, row:selected progressbar progress:insensitive, progressbar row:selected progress:insensitive {
border-color: #0f2b48; }
.osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress {
border-color: rgba(0, 0, 0, 0.7); }
.osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar progress:insensitive, progressbar .osd progress:insensitive {
border-color: transparent; }
scale {
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 24;
@ -2930,6 +2975,17 @@ scale {
margin: 2px 0; }
scale.vertical slider {
margin: 0 2px; }
scale fill, scale fill:backdrop {
background-color: #1c1f1f;
box-shadow: none; }
scale fill:insensitive, scale fill:insensitive:backdrop {
border-color: transparent;
background-color: transparent; }
.osd scale fill {
background-color: rgba(91, 91, 90, 0.775); }
.osd scale fill:insensitive, .osd scale fill:insensitive:backdrop {
border-color: transparent;
background-color: transparent; }
scale slider {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
@ -3023,51 +3079,6 @@ scale {
text-shadow: none;
-gtk-icon-shadow: none; }
scale trough, progressbar trough {
border: 1px solid #1c1f1f;
border-radius: 3px;
background-color: #2f3434;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
scale trough:insensitive, progressbar trough:insensitive {
background-color: #333636;
box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
scale trough:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
background-color: #303535;
border-color: #1f2222;
box-shadow: none; }
scale trough:backdrop:insensitive, progressbar trough:backdrop:insensitive, progressbar:backdrop trough:insensitive {
background-color: #333636; }
row:selected scale trough, scale row:selected trough, row:selected progressbar trough, progressbar row:selected trough {
box-shadow: none; }
row:selected scale trough, scale row:selected trough, row:selected progressbar trough, progressbar row:selected trough, row:selected scale trough:insensitive, scale row:selected trough:insensitive, row:selected progressbar trough:insensitive, progressbar row:selected trough:insensitive {
border-color: #0f2b48; }
.osd scale trough, scale .osd trough, .osd progressbar trough, progressbar .osd trough {
border-color: rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 0, 0.5);
box-shadow: none;
outline-color: rgba(238, 238, 236, 0.2); }
.osd scale trough:insensitive, scale .osd trough:insensitive, .osd progressbar trough:insensitive, progressbar .osd trough:insensitive {
background-color: rgba(53, 57, 58, 0.5); }
scale highlight, progressbar progress {
border: 1px solid #0f2b48;
border-radius: 3px;
background-color: #215d9c; }
scale highlight:insensitive, progressbar progress:insensitive {
background-color: transparent;
border-color: transparent; }
scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
border-color: #0f2b48; }
scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop progress:insensitive {
background-color: transparent;
border-color: transparent; }
row:selected scale highlight, scale row:selected highlight, row:selected progressbar progress, progressbar row:selected progress, row:selected scale highlight:insensitive, scale row:selected highlight:insensitive, row:selected progressbar progress:insensitive, progressbar row:selected progress:insensitive {
border-color: #0f2b48; }
.osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress {
border-color: rgba(0, 0, 0, 0.7); }
.osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar progress:insensitive, progressbar .osd progress:insensitive {
border-color: transparent; }
/*****************
* Progress bars *
*****************/

View File

@ -3070,6 +3070,51 @@ checkbutton.text-button, radiobutton.text-button {
/************
* GtkScale *
************/
scale trough, scale fill, progressbar trough {
border: 1px solid #a1a1a1;
border-radius: 3px;
background-color: #d2d2d2;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; }
scale trough:insensitive, scale fill:insensitive, progressbar trough:insensitive {
background-color: #f4f4f4;
box-shadow: 0 1px white; }
scale trough:backdrop, scale fill:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
background-color: #d5d5d5;
border-color: darkgray;
box-shadow: none; }
scale trough:backdrop:insensitive, scale fill:backdrop:insensitive, progressbar trough:backdrop:insensitive, progressbar:backdrop trough:insensitive {
background-color: #f4f4f4; }
row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, row:selected progressbar trough, progressbar row:selected trough {
box-shadow: none; }
row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, row:selected progressbar trough, progressbar row:selected trough, row:selected scale trough:insensitive, scale row:selected trough:insensitive, row:selected scale fill:insensitive, scale row:selected fill:insensitive, row:selected progressbar trough:insensitive, progressbar row:selected trough:insensitive {
border-color: #184472; }
.osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill, .osd progressbar trough, progressbar .osd trough {
border-color: rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 0, 0.5);
box-shadow: none;
outline-color: rgba(238, 238, 236, 0.2); }
.osd scale trough:insensitive, scale .osd trough:insensitive, .osd scale fill:insensitive, scale .osd fill:insensitive, .osd progressbar trough:insensitive, progressbar .osd trough:insensitive {
background-color: rgba(53, 57, 58, 0.5); }
scale highlight, progressbar progress {
border: 1px solid #184472;
border-radius: 3px;
background-color: #4a90d9; }
scale highlight:insensitive, progressbar progress:insensitive {
background-color: transparent;
border-color: transparent; }
scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
border-color: #4a90d9; }
scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop progress:insensitive {
background-color: transparent;
border-color: transparent; }
row:selected scale highlight, scale row:selected highlight, row:selected progressbar progress, progressbar row:selected progress, row:selected scale highlight:insensitive, scale row:selected highlight:insensitive, row:selected progressbar progress:insensitive, progressbar row:selected progress:insensitive {
border-color: #184472; }
.osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress {
border-color: rgba(0, 0, 0, 0.7); }
.osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar progress:insensitive, progressbar .osd progress:insensitive {
border-color: transparent; }
scale {
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 24;
@ -3092,6 +3137,17 @@ scale {
margin: 2px 0; }
scale.vertical slider {
margin: 0 2px; }
scale fill, scale fill:backdrop {
background-color: #a1a1a1;
box-shadow: none; }
scale fill:insensitive, scale fill:insensitive:backdrop {
border-color: transparent;
background-color: transparent; }
.osd scale fill {
background-color: rgba(91, 91, 90, 0.775); }
.osd scale fill:insensitive, .osd scale fill:insensitive:backdrop {
border-color: transparent;
background-color: transparent; }
scale slider {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
@ -3185,51 +3241,6 @@ scale {
text-shadow: none;
-gtk-icon-shadow: none; }
scale trough, progressbar trough {
border: 1px solid #a1a1a1;
border-radius: 3px;
background-color: #d2d2d2;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; }
scale trough:insensitive, progressbar trough:insensitive {
background-color: #f4f4f4;
box-shadow: 0 1px white; }
scale trough:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
background-color: #d5d5d5;
border-color: darkgray;
box-shadow: none; }
scale trough:backdrop:insensitive, progressbar trough:backdrop:insensitive, progressbar:backdrop trough:insensitive {
background-color: #f4f4f4; }
row:selected scale trough, scale row:selected trough, row:selected progressbar trough, progressbar row:selected trough {
box-shadow: none; }
row:selected scale trough, scale row:selected trough, row:selected progressbar trough, progressbar row:selected trough, row:selected scale trough:insensitive, scale row:selected trough:insensitive, row:selected progressbar trough:insensitive, progressbar row:selected trough:insensitive {
border-color: #184472; }
.osd scale trough, scale .osd trough, .osd progressbar trough, progressbar .osd trough {
border-color: rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 0, 0.5);
box-shadow: none;
outline-color: rgba(238, 238, 236, 0.2); }
.osd scale trough:insensitive, scale .osd trough:insensitive, .osd progressbar trough:insensitive, progressbar .osd trough:insensitive {
background-color: rgba(53, 57, 58, 0.5); }
scale highlight, progressbar progress {
border: 1px solid #184472;
border-radius: 3px;
background-color: #4a90d9; }
scale highlight:insensitive, progressbar progress:insensitive {
background-color: transparent;
border-color: transparent; }
scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
border-color: #4a90d9; }
scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop progress:insensitive {
background-color: transparent;
border-color: transparent; }
row:selected scale highlight, scale row:selected highlight, row:selected progressbar progress, progressbar row:selected progress, row:selected scale highlight:insensitive, scale row:selected highlight:insensitive, row:selected progressbar progress:insensitive, progressbar row:selected progress:insensitive {
border-color: #184472; }
.osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress {
border-color: rgba(0, 0, 0, 0.7); }
.osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar progress:insensitive, progressbar .osd progress:insensitive {
border-color: transparent; }
/*****************
* Progress bars *
*****************/