From f30b5ec971d67c631f8b33fc5dd38f2ad6c8d7b1 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sun, 31 May 2015 22:26:05 +0530
Subject: [PATCH] Fix scrollbars
---
gtk-3.0/scss/widgets/_button.scss | 27 +++----
gtk-3.0/scss/widgets/_scrollbar.scss | 115 ++++++++++++++++-----------
2 files changed, 81 insertions(+), 61 deletions(-)
diff --git a/gtk-3.0/scss/widgets/_button.scss b/gtk-3.0/scss/widgets/_button.scss
index f54d96b..60c81cd 100755
--- a/gtk-3.0/scss/widgets/_button.scss
+++ b/gtk-3.0/scss/widgets/_button.scss
@@ -2,6 +2,8 @@
! Buttons
**********/
+$shadow_strength: .3;
+
@include exports("button_extends") {
%button {
padding: $spacing ($spacing + 2px);
@@ -73,16 +75,13 @@
}
@mixin linked_button($bg) {
- $border_strength: if(lightness($bg) > 50, 0, .1);
- $shadow_strength: if(lightness($bg) > 50, 0, .1);
-
@extend %linked_button;
- box-shadow: inset -1px 0 border_normal(rgba(0,0,0,.12 + $border_strength)),
+ box-shadow: inset -1px 0 border_normal(rgba(0,0,0,.12)),
0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
&:focus, &:hover {
- box-shadow: inset -1px 0 border_focus(rgba(0,0,0,.12 + $border_strength)),
+ box-shadow: inset -1px 0 border_focus(rgba(0,0,0,.12)),
0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
}
@@ -90,7 +89,7 @@
&:active:focus, &:active:hover:focus,
&:checked, &:checked:hover,
&:checked:focus, &:checked:hover:focus {
- box-shadow: inset -1px 0 border_active(rgba(0,0,0,.12 + $border_strength)),
+ box-shadow: inset -1px 0 border_active(rgba(0,0,0,.12)),
inset 0 1px alpha($dark_shadow, .07),
inset 0 -1px alpha($dark_shadow, .05);
}
@@ -120,28 +119,26 @@
}
@mixin button($bg, $fg) {
- $border_strength: if(lightness($bg) > 50, 0, .1);
- $shadow_strength: if(lightness($bg) > 50, 0, .1);
-
@extend %button;
- @include linear-gradient(shade($bg, 1.2));
- @include border(rgba(0,0,0,.12 + $border_strength));
+ @include linear-gradient(shade($bg, 1.3));
+ @include border(rgba(0,0,0,.12));
color: $fg;
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
+ border-color: alpha($bg, 0);
&.flat {
- border-color: transparent;
- background-color: transparent;
+ border-color: alpha($bg, 0);
+ background-color: alpha($bg, 0);
background-image: none;
box-shadow: none;
}
&, &.flat {
&:focus, &:hover {
- @include linear-gradient(shade($bg, 1.2));
- @include border(rgba(0,0,0,.2 + $border_strength));
+ @include linear-gradient(shade($bg, 1.4));
+ border-color: alpha($bg, 0);
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
}
diff --git a/gtk-3.0/scss/widgets/_scrollbar.scss b/gtk-3.0/scss/widgets/_scrollbar.scss
index 969ece6..bfc210e 100644
--- a/gtk-3.0/scss/widgets/_scrollbar.scss
+++ b/gtk-3.0/scss/widgets/_scrollbar.scss
@@ -3,61 +3,84 @@
************/
@include exports("scrollbar") {
- * {
- -GtkRange-slider-width: 8;
- -GtkRange-stepper-spacing: 0;
- -GtkRange-trough-border: $spacing;
- -GtkRange-trough-under-steppers: 1;
- -GtkScrollbar-has-backward-stepper: false;
- -GtkScrollbar-has-forward-stepper: false;
- -GtkScrollbar-min-slider-length: 80;
- -GtkScrolledWindow-scrollbar-spacing: 0;
- -GtkScrolledWindow-scrollbars-within-bevel: 1;
- }
+ * {
+ -GtkRange-slider-width: 8;
+ -GtkRange-stepper-spacing: 0;
+ -GtkRange-trough-border: 2;
+ -GtkRange-trough-under-steppers: 1;
+ -GtkScrollbar-has-backward-stepper: false;
+ -GtkScrollbar-has-forward-stepper: false;
+ -GtkScrollbar-min-slider-length: 80;
+ -GtkScrolledWindow-scrollbar-spacing: 0;
+ -GtkScrolledWindow-scrollbars-within-bevel: 1;
+ }
- .scrollbar {
- border: none;
- padding: 0;
+ .scrollbar {
+ border: 0;
+ padding: 0;
- &.button {
- &, &:active, &:active:hover {
- border-width: 0;
- border-radius: 0;
- background-color: transparent;
- background-image: none;
- color: shade($bg_color, 0.6);
- }
- }
+ &.button {
+ &, &:active, &:active:hover {
+ border-width: 0;
+ border-radius: 0;
+ background-color: transparent;
+ background-image: none;
+ color: alpha($fg_color, 0.5);
+ }
+ }
- &.slider, &.slider.vertical {
- border: none;
- border-radius: $roundness;
- background-color: mix($bg_color, $fg_color, 0.21);
+ &.slider, &.slider.vertical {
+ border: 0;
+ border-radius: $roundness;
+ background-color: shade($bg_color, 0.5);
- &:hover { background-color: $selected_bg_color; }
+ &:hover { background-color: shade($bg_color, 0.3); }
- &:active { background-color: shade($selected_bg_color, .9); }
+ &:active { background-color: $selected_bg_color; }
- &.fine-tune:prelight:active { border: 2px solid transparent; }
- }
- }
+ &.fine-tune:prelight:active { border: 2px solid transparent; }
+ }
- .scrollbars-junction,
- .scrollbar.trough {
- border: none;
- border-radius: 0;
- background-color: $bg_color;
- background-image: none;
- }
+ // overlay scrolling indicator
+ &.overlay-indicator {
+ &:not(.dragging):not(.hovering) {
+ opacity: 0.5;
- /* overlay scrollbar */
- OsThumb, OsScrollbar {
- color: shade($bg_color, 0.7);
+ -GtkRange-slider-width: 4px;
- &:selected { background-color: $selected_bg_color; }
+ .slider {
+ margin: 0;
+ background-color: $fg_color;
+ background-clip: padding-box;
+ }
- &:active { background-color: $selected_bg_color; }
+ .trough {
+ border-style: none;
+ background-color: transparent;
+ }
+ }
- &:insensitive { background-color: shade($bg_color, 0.9); }
- }
+ &.dragging, &.hovering { opacity: 0.7; }
+ }
+ }
+
+ .scrollbars-junction,
+ .scrollbars-junction.frame,
+ .scrollbar.trough {
+ border: 0;
+ border-radius: 0;
+ background-color: $bg_color;
+ background-image: none;
+ }
+
+ // ubuntu overlay scrollbars
+ OsThumb, OsScrollbar {
+ color: shade($bg_color, 0.7);
+
+ &:selected { background-color: $selected_bg_color; }
+
+ &:active { background-color: $selected_bg_color; }
+
+ &:insensitive { background-color: shade($bg_color, 0.9); }
+ }
}