mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2025-01-15 14:50:06 +00:00
High Contrast: reimplement gtk scale
- sync with Adwaita to the new box model https://bugzilla.gnome.org/show_bug.cgi?id=763613
This commit is contained in:
Jakub Steiner
parent
7018a41ce9
commit
e44617b351
@ -19,6 +19,7 @@ $warning_color: #f57900;
|
||||
$error_color: #cc0000;
|
||||
$success_color: #73d216;
|
||||
$destructive_color: #ef2929;
|
||||
$dark_fill: mix($fg_color, $bg_color, 50%);
|
||||
|
||||
$osd_fg_color: #fff;
|
||||
$osd_bg_color: transparentize(#000,0.2);
|
||||
@ -34,6 +35,7 @@ $backdrop_base_color: $base_color;
|
||||
$backdrop_bg_color: $bg_color;
|
||||
$backdrop_fg_color: $fg_color;
|
||||
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
|
||||
$backdrop_dark_fill: mix($fg_color, $bg_color, 30%);
|
||||
|
||||
//apps rely on some named colors to be exported
|
||||
/* GTK NAMED COLORS */
|
||||
|
||||
@ -1656,85 +1656,237 @@ checkbutton check {
|
||||
/************
|
||||
* GtkScale *
|
||||
************/
|
||||
scale,
|
||||
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;
|
||||
outline-offset: -9px;
|
||||
-gtk-outline-radius: 4px;
|
||||
%scale_trough {
|
||||
border: 2px solid $borders_color;
|
||||
border-radius: 4px;
|
||||
background-color: $dark_fill;
|
||||
box-shadow: none;
|
||||
|
||||
&.fine-tune {
|
||||
outline-offset: -7px;
|
||||
-gtk-outline-radius: 6px;
|
||||
& trough {
|
||||
border-radius: 4px;
|
||||
margin: 8px;
|
||||
}
|
||||
&:disabled {
|
||||
background-color: $insensitive_bg_color;
|
||||
}
|
||||
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%);
|
||||
&:hover {
|
||||
@include button(hover, $edge: none);
|
||||
border-color: darken($borders_color,3%);
|
||||
border-radius: 50%; // needed for double marks scales
|
||||
}
|
||||
&:disabled {
|
||||
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:disabled { @include button(backdrop-insensitive);}
|
||||
&:active {
|
||||
border: 1px solid darken($selected_borders_color,3%);
|
||||
}
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_dark_fill;
|
||||
border-color: $backdrop_borders_color;
|
||||
|
||||
&:disabled { background-color: $insensitive_bg_color; }
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
&:disabled, &.hilight:disabled {
|
||||
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:disabled, .hilight:backdrop:disabled {
|
||||
border-color: $insensitive_fg_color;
|
||||
background-color: $backdrop_bg_color;
|
||||
}
|
||||
|
||||
// ...on selected list rows
|
||||
row:selected & {
|
||||
&, &:disabled { border-color: $selected_borders_color; }
|
||||
}
|
||||
|
||||
// OSD
|
||||
.osd & {
|
||||
border-color: $osd_borders_color;
|
||||
background-color: transparentize($osd_borders_color, 0.2);
|
||||
box-shadow: none;
|
||||
outline-color: transparentize($osd_fg_color, 0.8);
|
||||
|
||||
&:disabled { background-color: $insensitive_bg_color; }
|
||||
}
|
||||
}
|
||||
|
||||
%scale_highlight {
|
||||
border: 2px solid $selected_borders_color;
|
||||
border-radius: 4px;
|
||||
background-color: $selected_bg_color;
|
||||
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
border-color: $backdrop_dark_fill;
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// ...on selected list rows
|
||||
row:selected & { &, &:disabled { border-color: $selected_borders_color; } }
|
||||
|
||||
// OSD
|
||||
.osd & {
|
||||
border-color: $osd_borders_color;
|
||||
|
||||
&:disabled { border-color: transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
scale {
|
||||
// sizing
|
||||
|
||||
$_marks_lenght: 6px;
|
||||
$_marks_distance: 6px;
|
||||
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
padding: 12px;
|
||||
|
||||
fill,
|
||||
highlight { margin: -1px; }
|
||||
|
||||
slider {
|
||||
min-height: 18px;
|
||||
min-width: 18px;
|
||||
margin: -9px;
|
||||
}
|
||||
|
||||
&.fine-tune {
|
||||
&.horizontal {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
slider { margin: -6px; }
|
||||
|
||||
fill,
|
||||
highlight,
|
||||
trough {
|
||||
border-radius: 5px;
|
||||
-gtk-outline-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// the backing bit
|
||||
trough {
|
||||
@extend %scale_trough;
|
||||
|
||||
outline-offset: 2px;
|
||||
-gtk-outline-radius: 5px;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
&, &:backdrop {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// OSD
|
||||
.osd & {
|
||||
background-color: mix($osd_fg_color, $osd_borders_color, 25%);
|
||||
|
||||
&:disabled {
|
||||
&, &:backdrop {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
@include button(normal);
|
||||
|
||||
border: 2px solid $borders_color;
|
||||
border-radius: 100%;
|
||||
|
||||
&:hover { @include button(hover); }
|
||||
|
||||
&:active { border-color: $selected_borders_color; }
|
||||
|
||||
&:disabled { @include button (insensitive); }
|
||||
|
||||
&:backdrop {
|
||||
@include button(backdrop);
|
||||
&:disabled { @include button(backdrop-insensitive); }
|
||||
}
|
||||
|
||||
// ...on selected list rows
|
||||
row:selected & { &, &:disabled { border-color: $selected_borders_color; } }
|
||||
|
||||
// OSD
|
||||
.osd & {
|
||||
@include button(osd);
|
||||
border-color: $osd_borders_color;
|
||||
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
||||
|
||||
&:hover { @include button(osd-hover); }
|
||||
|
||||
&:active { @include button(osd-active); }
|
||||
|
||||
&:disabled { @include button(osd-insensitive); }
|
||||
|
||||
&:backdrop {
|
||||
@include button(osd-backdrop);
|
||||
|
||||
&:disabled { @include button(osd-backdrop-insensitive); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
value { color: gtkalpha(currentColor, 0.4); }
|
||||
|
||||
marks {
|
||||
color: gtkalpha(currentColor, 0.4);
|
||||
|
||||
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
|
||||
(bottom, bottom, top),
|
||||
(top, left, right),
|
||||
(bottom, right, left) {
|
||||
&.#{$marks_class} {
|
||||
margin-#{$marks_margin}: $_marks_distance;
|
||||
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fine-tune marks {
|
||||
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
|
||||
(bottom, bottom, top),
|
||||
(top, left, right),
|
||||
(bottom, right, left) {
|
||||
&.#{$marks_class} {
|
||||
margin-#{$marks_margin}: $_marks_distance;
|
||||
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.horizontal {
|
||||
indicator {
|
||||
min-height: $_marks_lenght;
|
||||
min-width: 1px;
|
||||
}
|
||||
|
||||
&.fine-tune indicator { min-height: ($_marks_lenght - 3px); }
|
||||
}
|
||||
&.vertical {
|
||||
indicator {
|
||||
min-height: 1px;
|
||||
min-width: $_marks_lenght;
|
||||
}
|
||||
|
||||
&.fine-tune indicator { min-width: ($_marks_lenght - 3px); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*****************
|
||||
* Progress bars *
|
||||
*****************/
|
||||
|
||||
@ -1813,114 +1813,205 @@ checkbutton check {
|
||||
/************
|
||||
* GtkScale *
|
||||
************/
|
||||
scale,
|
||||
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;
|
||||
outline-offset: -9px;
|
||||
-gtk-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 {
|
||||
outline-offset: -7px;
|
||||
-gtk-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 {
|
||||
border-radius: 4px;
|
||||
margin: 8px; }
|
||||
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 {
|
||||
scale trough, scale fill {
|
||||
border: 2px solid gray;
|
||||
border-radius: 4px;
|
||||
background-color: gray;
|
||||
box-shadow: none; }
|
||||
scale trough:disabled, scale fill:disabled {
|
||||
background-color: #070707; }
|
||||
scale trough:backdrop, scale fill:backdrop {
|
||||
background-color: #4d4d4d;
|
||||
border-color: #737373; }
|
||||
scale trough:backdrop:disabled, scale fill:backdrop:disabled {
|
||||
background-color: #070707; }
|
||||
row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, row:selected scale trough:disabled, scale row:selected trough:disabled, row:selected scale fill:disabled, scale row:selected fill:disabled {
|
||||
border-color: #aaa; }
|
||||
.osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
box-shadow: none;
|
||||
outline-color: rgba(255, 255, 255, 0.2); }
|
||||
.osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled {
|
||||
background-color: #070707; }
|
||||
|
||||
scale highlight {
|
||||
border: 2px solid #aaa;
|
||||
border-radius: 4px;
|
||||
background-color: #aaa; }
|
||||
scale highlight:disabled {
|
||||
background-color: transparent;
|
||||
border-color: transparent; }
|
||||
scale highlight:backdrop {
|
||||
border-color: #4d4d4d; }
|
||||
scale highlight:backdrop:disabled {
|
||||
background-color: transparent;
|
||||
border-color: transparent; }
|
||||
row:selected scale highlight, scale row:selected highlight, row:selected scale highlight:disabled, scale row:selected highlight:disabled {
|
||||
border-color: #aaa; }
|
||||
.osd scale highlight, scale .osd highlight {
|
||||
border-color: rgba(255, 255, 255, 0.2); }
|
||||
.osd scale highlight:disabled, scale .osd highlight:disabled {
|
||||
border-color: transparent; }
|
||||
|
||||
scale {
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
padding: 12px; }
|
||||
scale fill,
|
||||
scale highlight {
|
||||
margin: -1px; }
|
||||
scale slider {
|
||||
min-height: 18px;
|
||||
min-width: 18px;
|
||||
margin: -9px; }
|
||||
scale.fine-tune.horizontal {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
min-height: 16px; }
|
||||
scale.fine-tune.vertical {
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
min-width: 16px; }
|
||||
scale.fine-tune slider {
|
||||
margin: -6px; }
|
||||
scale.fine-tune fill,
|
||||
scale.fine-tune highlight,
|
||||
scale.fine-tune trough {
|
||||
border-radius: 5px;
|
||||
-gtk-outline-radius: 7px; }
|
||||
scale trough {
|
||||
outline-offset: 2px;
|
||||
-gtk-outline-radius: 5px; }
|
||||
scale fill, scale fill:backdrop {
|
||||
background-color: gray;
|
||||
box-shadow: none; }
|
||||
scale fill:disabled, scale fill:disabled:backdrop {
|
||||
border-color: transparent;
|
||||
background-color: transparent; }
|
||||
.osd scale fill {
|
||||
background-color: rgba(255, 255, 255, 0.4); }
|
||||
.osd scale fill:disabled, .osd scale fill:disabled:backdrop {
|
||||
border-color: transparent;
|
||||
background-color: transparent; }
|
||||
scale slider {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #fff;
|
||||
background-image: none;
|
||||
background-color: #000;
|
||||
border-color: gray;
|
||||
border-radius: 50%;
|
||||
border-color: #787878; }
|
||||
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: 2px solid gray;
|
||||
border-radius: 100%; }
|
||||
scale slider:hover {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
border-color: gray;
|
||||
background-image: none;
|
||||
border-color: #787878;
|
||||
border-radius: 50%; }
|
||||
scale trough slider:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough slider:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:disabled {
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
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: #6b6b6b;
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
scale trough slider:backdrop:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled {
|
||||
background-image: none; }
|
||||
scale slider:active {
|
||||
border-color: #aaa; }
|
||||
scale slider:disabled {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: gray;
|
||||
background-color: #070707;
|
||||
border-color: #494949;
|
||||
background-image: none; }
|
||||
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 #a2a2a2; }
|
||||
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: #333333;
|
||||
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: #aaa;
|
||||
background-color: #aaa; }
|
||||
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:disabled, scale trough.hilight:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled {
|
||||
border-color: #494949;
|
||||
background-color: #070707; }
|
||||
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 {
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
scale slider:backdrop {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
border-color: #737373;
|
||||
background-color: #404040;
|
||||
box-shadow: none; }
|
||||
scale trough:backdrop:disabled, scale trough .hilight:backdrop:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled {
|
||||
border-color: gray;
|
||||
background-color: #000; }
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
scale slider:backdrop:disabled {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: gray;
|
||||
background-color: #070707;
|
||||
border-color: #494949;
|
||||
background-image: none; }
|
||||
row:selected scale slider, row:selected scale slider:disabled {
|
||||
border-color: #aaa; }
|
||||
.osd scale slider {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #fff;
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background-color: black; }
|
||||
.osd scale slider:hover {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #fff;
|
||||
background-color: rgba(77, 77, 77, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none; }
|
||||
.osd scale slider:active {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
background-color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none; }
|
||||
.osd scale slider:disabled {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: gray; }
|
||||
.osd scale slider:backdrop {
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
.osd scale slider:backdrop:disabled {
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
scale value {
|
||||
color: alpha(currentColor,0.4); }
|
||||
scale marks {
|
||||
color: alpha(currentColor,0.4); }
|
||||
scale marks.top {
|
||||
margin-bottom: 6px;
|
||||
margin-top: -12px; }
|
||||
scale marks.bottom {
|
||||
margin-top: 6px;
|
||||
margin-bottom: -12px; }
|
||||
scale marks.top {
|
||||
margin-right: 6px;
|
||||
margin-left: -12px; }
|
||||
scale marks.bottom {
|
||||
margin-left: 6px;
|
||||
margin-right: -12px; }
|
||||
scale.fine-tune marks.top {
|
||||
margin-bottom: 6px;
|
||||
margin-top: -9px; }
|
||||
scale.fine-tune marks.bottom {
|
||||
margin-top: 6px;
|
||||
margin-bottom: -9px; }
|
||||
scale.fine-tune marks.top {
|
||||
margin-right: 6px;
|
||||
margin-left: -9px; }
|
||||
scale.fine-tune marks.bottom {
|
||||
margin-left: 6px;
|
||||
margin-right: -9px; }
|
||||
scale.horizontal indicator {
|
||||
min-height: 6px;
|
||||
min-width: 1px; }
|
||||
scale.horizontal.fine-tune indicator {
|
||||
min-height: 3px; }
|
||||
scale.vertical indicator {
|
||||
min-height: 1px;
|
||||
min-width: 6px; }
|
||||
scale.vertical.fine-tune indicator {
|
||||
min-width: 3px; }
|
||||
|
||||
/*****************
|
||||
* Progress bars *
|
||||
|
||||
@ -1813,114 +1813,205 @@ checkbutton check {
|
||||
/************
|
||||
* GtkScale *
|
||||
************/
|
||||
scale,
|
||||
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;
|
||||
outline-offset: -9px;
|
||||
-gtk-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 {
|
||||
outline-offset: -7px;
|
||||
-gtk-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 {
|
||||
border-radius: 4px;
|
||||
margin: 8px; }
|
||||
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 {
|
||||
scale trough, scale fill {
|
||||
border: 2px solid gray;
|
||||
border-radius: 4px;
|
||||
background-color: gray;
|
||||
box-shadow: none; }
|
||||
scale trough:disabled, scale fill:disabled {
|
||||
background-color: white; }
|
||||
scale trough:backdrop, scale fill:backdrop {
|
||||
background-color: #b3b3b3;
|
||||
border-color: #8d8d8d; }
|
||||
scale trough:backdrop:disabled, scale fill:backdrop:disabled {
|
||||
background-color: white; }
|
||||
row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, row:selected scale trough:disabled, scale row:selected trough:disabled, row:selected scale fill:disabled, scale row:selected fill:disabled {
|
||||
border-color: #000; }
|
||||
.osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
box-shadow: none;
|
||||
outline-color: rgba(255, 255, 255, 0.2); }
|
||||
.osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled {
|
||||
background-color: white; }
|
||||
|
||||
scale highlight {
|
||||
border: 2px solid #000;
|
||||
border-radius: 4px;
|
||||
background-color: #000; }
|
||||
scale highlight:disabled {
|
||||
background-color: transparent;
|
||||
border-color: transparent; }
|
||||
scale highlight:backdrop {
|
||||
border-color: #b3b3b3; }
|
||||
scale highlight:backdrop:disabled {
|
||||
background-color: transparent;
|
||||
border-color: transparent; }
|
||||
row:selected scale highlight, scale row:selected highlight, row:selected scale highlight:disabled, scale row:selected highlight:disabled {
|
||||
border-color: #000; }
|
||||
.osd scale highlight, scale .osd highlight {
|
||||
border-color: rgba(255, 255, 255, 0.2); }
|
||||
.osd scale highlight:disabled, scale .osd highlight:disabled {
|
||||
border-color: transparent; }
|
||||
|
||||
scale {
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
padding: 12px; }
|
||||
scale fill,
|
||||
scale highlight {
|
||||
margin: -1px; }
|
||||
scale slider {
|
||||
min-height: 18px;
|
||||
min-width: 18px;
|
||||
margin: -9px; }
|
||||
scale.fine-tune.horizontal {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
min-height: 16px; }
|
||||
scale.fine-tune.vertical {
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
min-width: 16px; }
|
||||
scale.fine-tune slider {
|
||||
margin: -6px; }
|
||||
scale.fine-tune fill,
|
||||
scale.fine-tune highlight,
|
||||
scale.fine-tune trough {
|
||||
border-radius: 5px;
|
||||
-gtk-outline-radius: 7px; }
|
||||
scale trough {
|
||||
outline-offset: 2px;
|
||||
-gtk-outline-radius: 5px; }
|
||||
scale fill, scale fill:backdrop {
|
||||
background-color: gray;
|
||||
box-shadow: none; }
|
||||
scale fill:disabled, scale fill:disabled:backdrop {
|
||||
border-color: transparent;
|
||||
background-color: transparent; }
|
||||
.osd scale fill {
|
||||
background-color: rgba(255, 255, 255, 0.4); }
|
||||
.osd scale fill:disabled, .osd scale fill:disabled:backdrop {
|
||||
border-color: transparent;
|
||||
background-color: transparent; }
|
||||
scale slider {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
border-color: gray;
|
||||
border-radius: 50%;
|
||||
border-color: #787878; }
|
||||
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: 2px solid gray;
|
||||
border-radius: 100%; }
|
||||
scale slider:hover {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-color: gray;
|
||||
background-image: none;
|
||||
border-color: #787878;
|
||||
border-radius: 50%; }
|
||||
scale trough slider:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough slider:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:disabled {
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
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 trough slider:backdrop:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled {
|
||||
background-image: none; }
|
||||
scale slider:active {
|
||||
border-color: #000; }
|
||||
scale slider:disabled {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: gray;
|
||||
background-color: white;
|
||||
border-color: silver;
|
||||
background-image: none; }
|
||||
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 {
|
||||
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:disabled, scale trough.hilight:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled {
|
||||
border-color: silver;
|
||||
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 {
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
scale slider:backdrop {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-color: #8d8d8d;
|
||||
background-color: silver;
|
||||
box-shadow: none; }
|
||||
scale trough:backdrop:disabled, scale trough .hilight:backdrop:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled,
|
||||
scale.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled,
|
||||
scale.vertical.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled {
|
||||
border-color: gray;
|
||||
background-color: #fff; }
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
scale slider:backdrop:disabled {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: gray;
|
||||
background-color: white;
|
||||
border-color: silver;
|
||||
background-image: none; }
|
||||
row:selected scale slider, row:selected scale slider:disabled {
|
||||
border-color: #000; }
|
||||
.osd scale slider {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #fff;
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background-color: black; }
|
||||
.osd scale slider:hover {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: #fff;
|
||||
background-color: rgba(77, 77, 77, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none; }
|
||||
.osd scale slider:active {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
background-color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none; }
|
||||
.osd scale slider:disabled {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: gray; }
|
||||
.osd scale slider:backdrop {
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
.osd scale slider:backdrop:disabled {
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
scale value {
|
||||
color: alpha(currentColor,0.4); }
|
||||
scale marks {
|
||||
color: alpha(currentColor,0.4); }
|
||||
scale marks.top {
|
||||
margin-bottom: 6px;
|
||||
margin-top: -12px; }
|
||||
scale marks.bottom {
|
||||
margin-top: 6px;
|
||||
margin-bottom: -12px; }
|
||||
scale marks.top {
|
||||
margin-right: 6px;
|
||||
margin-left: -12px; }
|
||||
scale marks.bottom {
|
||||
margin-left: 6px;
|
||||
margin-right: -12px; }
|
||||
scale.fine-tune marks.top {
|
||||
margin-bottom: 6px;
|
||||
margin-top: -9px; }
|
||||
scale.fine-tune marks.bottom {
|
||||
margin-top: 6px;
|
||||
margin-bottom: -9px; }
|
||||
scale.fine-tune marks.top {
|
||||
margin-right: 6px;
|
||||
margin-left: -9px; }
|
||||
scale.fine-tune marks.bottom {
|
||||
margin-left: 6px;
|
||||
margin-right: -9px; }
|
||||
scale.horizontal indicator {
|
||||
min-height: 6px;
|
||||
min-width: 1px; }
|
||||
scale.horizontal.fine-tune indicator {
|
||||
min-height: 3px; }
|
||||
scale.vertical indicator {
|
||||
min-height: 1px;
|
||||
min-width: 6px; }
|
||||
scale.vertical.fine-tune indicator {
|
||||
min-width: 3px; }
|
||||
|
||||
/*****************
|
||||
* Progress bars *
|
||||
|
||||
Loading…
Reference in New Issue
Block a user