From f30b5ec971d67c631f8b33fc5dd38f2ad6c8d7b1 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo 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); } + } }