aboutsummaryrefslogtreecommitdiff
path: root/common/gtk-3.0/3.20/sass
diff options
context:
space:
mode:
Diffstat (limited to 'common/gtk-3.0/3.20/sass')
-rw-r--r--common/gtk-3.0/3.20/sass/_common.scss293
1 files changed, 170 insertions, 123 deletions
diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss
index b093fa6..b045b74 100644
--- a/common/gtk-3.0/3.20/sass/_common.scss
+++ b/common/gtk-3.0/3.20/sass/_common.scss
@@ -323,12 +323,11 @@ $_dot_color: $selected_bg_color;
}
}
+ $button_transition: all 200ms $ease-out-quad;
button {
- $_button_transition: all 200ms $ease-out-quad;
-
min-height: 22px;
min-width: 20px;
- transition: $_button_transition;
+ transition: $button_transition;
border: 1px solid;
border-radius: 3px;
padding: 2px 6px;
@@ -346,10 +345,10 @@ button {
transition: none;
&:hover {
- transition: $_button_transition;
+ transition: $button_transition;
transition-duration: 350ms;
- &:active { transition: $_button_transition; }
+ &:active { transition: $button_transition; }
}
}
@@ -1341,26 +1340,26 @@ headerbar {
$_slider_border: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.2), opacify($header_button_border, 0.3));
$_slider_bg: if($variant=='light' and $darker=='false', opacify($header_button_bg,1), lighten(opacify($header_bg,1), 10%));
- background-image: linear-gradient(to bottom, $_slider_bg);
+ background-color: $_slider_bg;
border-color: $_slider_border;
&:hover {
- background-image: linear-gradient(to bottom, lighten($_slider_bg, 5%));
+ background-color: lighten($_slider_bg, 5%);
border-color: $_slider_border;
}
&:active {
- background-image: linear-gradient(to bottom, $selected_bg_color);
+ background-color: $selected_bg_color;
border-color: $selected_bg_color;
}
&:disabled {
- background-image: linear-gradient(to bottom, mix($_slider_bg, $header_bg, 70%));
+ background-color: mix($_slider_bg, $header_bg, 70%);
border-color: $_slider_border;
}
}
trough {
- background-image: linear-gradient(to bottom, $_trough_bg);
+ background-color: $_trough_bg;
- &:disabled { background-image: linear-gradient(to bottom, if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1))); }
+ &:disabled { background-color: if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1)); }
}
}
}
@@ -2052,175 +2051,223 @@ radio {
//
scale {
$_marks_length: 3px;
- $_marks_margin: -2px;
+ $_marks_distance: 1px;
- min-height: 9px;
- min-width: 9px;
- padding: 5px;
+ min-height: 10px;
+ min-width: 10px;
- value { color: gtkalpha(currentColor, 0.4); }
+ &.horizontal {
+ padding: 6px 0;
- marks {
- color: gtkalpha(currentColor, 0.4);
+ trough { padding: 0 7px; }
+ highlight, fill { margin: 0 -7px; }
+ }
+ &.vertical {
+ padding: 0 6px;
- @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_margin;
- margin-#{$marks_pos}: -$_marks_margin;
- }
+ trough { padding: 7px 0; }
+ highlight, fill { margin: -7px 0; }
+ }
+
+ // The slider is inside the trough, negative margin to make it bigger
+ slider {
+ min-height: 15px;
+ min-width: 15px;
+ margin: -6px;
+ }
+
+ // Click-and-hold the slider to activate
+ &.fine-tune {
+ &.horizontal {
+ padding-top: 4px;
+ padding-bottom: 4px;
+ min-height: 15px;
+ }
+
+ &.vertical {
+ padding-left: 4px;
+ padding-right: 4px;
+ min-width: 15px;
+ }
+
+ // Make the trough grow in fine-tune mode
+ slider { margin: -4px; }
+
+ fill,
+ highlight,
+ trough {
+ border-radius: 5px;
+ -gtk-outline-radius: 7px;
}
}
- &.fine-tune marks {
- color: gtkalpha(currentColor, 0.4);
+ // Trough
+ trough {
+ $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%));
- @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_margin - 2px;
- margin-#{$marks_pos}: -$_marks_margin + 2px;
+ outline-offset: 2px;
+ -gtk-outline-radius: 4.5px;
+
+ border-radius: 2.5px;
+ background-color: $_scale_trough_bg;
+
+ &:disabled { background-color: transparentize($_scale_trough_bg, 0.45); }
+
+ //OSD troughs
+ .osd & {
+ background-color: lighten($osd_bg_color, 7%);
+
+ highlight {
+ background-color: $selected_bg_color;
+
+ &:disabled { }
}
+
+ &:disabled { }
}
- }
- &.horizontal indicator {
- min-height: $_marks_length;
- min-width: 1px;
- }
- &.vertical indicator {
- min-height: 1px;
- min-width: $_marks_length;
- }
+ // Troughs in selected list-rows and infobars
+ row:selected &,
+ infobar & {
+ background-color: transparentize(black, 0.8);
- &.fine-tune {
- padding: 3px;
+ highlight {
+ background-color: $selected_fg_color;
- trough, fill, highlight { border-radius: 5px; }
+ &:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); }
+ }
- slider { margin: -4px; }
+ &:disabled { background-color: transparentize(black, 0.9); }
+ }
}
- trough, fill, highlight {
+ // The colored part of trough
+ highlight {
border-radius: 2.5px;
+ background-color: $selected_bg_color;
+
+ &:disabled { background-color: transparentize($selected_bg_color, 0.45); }
+ }
+
+ // this is another differently styled part of the trough, the most relevant use case is for example
+ // in media player to indicate how much video stream as been cached
+ fill {
+ border-radius: 2.5px;
+ background-color: transparentize($selected_bg_color, 0.5);
+
+ &:disabled { background-color: transparent; }
}
slider {
$_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%));
- min-width: 15px;
- min-height: 15px;
- margin: -6px;
- background-clip: border-box;
- background-image: linear-gradient(to bottom, $button_bg);
+ background-color: $button_bg;
border: 1px solid $_slider_border;
- border-radius: 50%;
- box-shadow: none;
+ border-radius: 100%;
+
+ transition: $button_transition;
+ transition-property: background, border;
+
+ &:hover { background-color: lighten($button_bg, 5%); }
- &:hover {
- background-image: linear-gradient(to bottom, lighten($button_bg, 5%));
- border-color: $_slider_border;
- }
- &:disabled {
- background-image: linear-gradient(to bottom, mix($entry_bg, $bg_color, 55%));
- border-color: transparentize($_slider_border, 0.2);
- }
&:active {
- background-image: linear-gradient(to bottom, $selected_bg_color);
+ background-clip: border-box;
+ background-color: $selected_bg_color;
border-color: $selected_bg_color;
}
- //OSD sliders
- .osd & {
- min-width: 11px;
- min-height: 11px;
- margin: -4px;
-
- background-image: linear-gradient(to bottom, $selected_bg_color);
- border-color: $selected_bg_color;
- &:hover {
- background-image: linear-gradient(to bottom, lighten($selected_bg_color, 10%));
- border-color: lighten($selected_bg_color, 10%)
-;
- }
- &:active {
- background-image: linear-gradient(to bottom, darken($selected_bg_color, 10%));
- border-color: darken($selected_bg_color, 10%);
- }
+ &:disabled {
+ background-color: mix($entry_bg, $bg_color, 55%);
+ border-color: transparentize($_slider_border, 0.2);
}
- //selected list-row and infobar sliders
+
+ // Selected list-row and infobar sliders
row:selected &,
infobar & {
- background-image: linear-gradient(to bottom, $selected_fg_color);
+ background-clip: border-box;
+ background-color: $selected_fg_color;
border-color: $selected_fg_color;
&:hover {
- background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 85%));
+ background-color: mix($selected_fg_color, $selected_bg_color, 85%);
border-color: mix($selected_fg_color, $selected_bg_color, 85%);
}
&:active {
- background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 50%));
+ background-color: mix($selected_fg_color, $selected_bg_color, 50%);
border-color: mix($selected_fg_color, $selected_bg_color, 50%);
}
&:disabled{
- background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%));
+ background-color: mix($selected_fg_color, $selected_bg_color, 55%);
border-color: mix($selected_fg_color, $selected_bg_color, 55%);
}
}
- }
- trough {
- $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%));
- outline-offset: 2px;
- -gtk-outline-radius: 2px;
- margin: 5px;
- border: none;
- background-image: linear-gradient(to bottom, $_scale_trough_bg);
- highlight {
- background-image: linear-gradient(to bottom, $selected_bg_color);
+ // OSD sliders
+ .osd & {
+ background-clip: border-box;
+ background-color: $selected_bg_color;
+ border-color: $selected_bg_color;
- &:disabled {
- background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 0.45));
+ &:hover {
+ background-color: lighten($selected_bg_color, 10%);
+ border-color: lighten($selected_bg_color, 10%)
}
- }
- fill {
- background: none;
- background-color: transparentize($selected_bg_color, 0.5);
- }
- &:disabled {
- background-image: linear-gradient(to bottom, transparentize($_scale_trough_bg, 0.45));
- }
-
- //OSD troughs
- .osd & {
- background-image: linear-gradient(to bottom, lighten($osd_bg_color, 7%));
- outline-color: transparentize($osd_fg_color, 0.8);
- highlight {
- background-image: none;
- background-image: linear-gradient(to bottom, $selected_bg_color);
+ &:active {
+ background-color: darken($selected_bg_color, 10%);
+ border-color: darken($selected_bg_color, 10%);
}
+
&:disabled { }
}
- // troughs in selected list-rows and infobars
- row:selected &,
- infobar & {
- background-image: linear-gradient(to bottom, transparentize(black, 0.8));
+ }
- highlight {
- background-image: linear-gradient(to bottom, $selected_fg_color);
+ value { color: gtkalpha(currentColor, 0.4); }
+
+ marks {
+ color: gtkalpha(currentColor, 0.4);
- &:disabled { background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%)); }
+ @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_length);
}
- &:disabled { background-image: linear-gradient(to bottom, transparentize(black, 0.9)); }
}
}
+
+ &.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 - 1px);
+ margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px);
+ }
+ }
+ }
+ &.horizontal {
+ indicator {
+ min-height: $_marks_length;
+ min-width: 1px;
+ }
+
+ &.fine-tune indicator { min-height: ($_marks_length - 1px); }
+ }
+ &.vertical {
+ indicator {
+ min-height: 1px;
+ min-width: $_marks_length;
+ }
+
+ &.fine-tune indicator { min-width: ($_marks_length - 1px); }
+ }
}
+
//
// Progress bars
//