Skip to content
GitLab
Commit 3a328da0 authored by Artem Grinev's avatar Artem Grinev Committed by Nate Graham
Browse files

gtk3, gtk4: Disable overshoot effect 

This makes scrolling be more consistent with Breeze QStyle.

CCBUG: 443919
parent 7e7caf2a
Hide whitespace changes
Inline Side-by-side
src/gtk3/widgets/_overshoot.scss
View file @ 3a328da0
@charset "UTF-8";
@mixin overshoot(
$p,
$t: normal,
$c: gtk("@theme_fg_color")
) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
//
$_small_gradient_length: 5%;
$_big_gradient_length: 100%;
$_position: center top;
$_small_gradient_size: 100% $_small_gradient_length;
$_big_gradient_size: 100% $_big_gradient_length;
@if $p==bottom {
$_position: center bottom;
$_linear_gradient_direction: to top;
} @else if $p==right {
$_position: right center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
} @else if $p==left {
$_position: left center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
$_small_gradient_color: $c;
$_big_gradient_color: $c;
@if $c==gtk("@theme_fg_color") {
$_small_gradient_color: gtkshade("@borders", 0.9);
$_big_gradient_color: gtk("@theme_fg_color");
@if $t==backdrop {
$_small_gradient_color: gtk("@unfocused_borders");
}
}
$_small_gradient: -gtk-gradient(
radial,
$_position,
0,
$_position,
0.5,
to($_small_gradient_color),
to(gtkalpha($_small_gradient_color, 0))
);
$_big_gradient: -gtk-gradient(
radial,
$_position,
0,
$_position,
0.6,
from(gtkalpha($_big_gradient_color, 0.07)),
to(gtkalpha($_big_gradient_color, 0))
);
@if $t==normal {
background-image: $_small_gradient, $_big_gradient;
background-size: $_small_gradient_size,
$_big_gradient_size;
} @else if $t==backdrop {
background-image: $_small_gradient;
background-size: $_small_gradient_size;
}
background-repeat: no-repeat;
background-position: $_position;
background-color: transparent; // reset some properties to be sure to not inherit them somehow
border: none; //
box-shadow: none; //
}
scrolledwindow {
// This is used when content is touch-dragged past boundaries.
// draws a box on top of the content, the size changes programmatically.
overshoot {
&.top {
@include overshoot(top);
&:backdrop {
@include overshoot(top, backdrop);
}
}
&.bottom {
@include overshoot(bottom);
&:backdrop {
@include overshoot(bottom, backdrop);
}
}
&.left {
@include overshoot(left);
&:backdrop {
@include overshoot(left, backdrop);
}
}
&.right {
@include overshoot(right);
&:backdrop {
@include overshoot(right, backdrop);
}
}
}
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
overshoot,
undershoot {
background-image: none;
border: none;
background: none;
}
}
src/gtk4/widgets/_overshoot.scss
View file @ 3a328da0
@charset "UTF-8";
@mixin overshoot(
$p,
$t: normal,
$c: gtk("@theme_fg_color")
) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
//
$_small_gradient_length: 5%;
$_big_gradient_length: 100%;
$_position: center top;
$_small_gradient_size: 100% $_small_gradient_length;
$_big_gradient_size: 100% $_big_gradient_length;
@if $p==bottom {
$_position: center bottom;
$_linear_gradient_direction: to top;
} @else if $p==right {
$_position: right center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
} @else if $p==left {
$_position: left center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
$_small_gradient_color: $c;
$_big_gradient_color: $c;
@if $c==gtk("@theme_fg_color") {
$_small_gradient_color: gtkshade("@borders", 0.9);
$_big_gradient_color: gtk("@theme_fg_color");
@if $t==backdrop {
$_small_gradient_color: gtk("@unfocused_borders");
}
}
$_small_gradient: radial-gradient(
circle,
$_small_gradient_color 0%,
gtkalpha($_small_gradient_color, 0) 5px
);
$_big_gradient: radial-gradient(
circle,
gtkalpha($_big_gradient_color, 0.07) 0%,
gtkalpha($_big_gradient_color, 0) 6px
);
@if $t==normal {
background-image: $_small_gradient, $_big_gradient;
background-size: $_small_gradient_size,
$_big_gradient_size;
} @else if $t==backdrop {
background-image: $_small_gradient;
background-size: $_small_gradient_size;
}
background-repeat: no-repeat;
background-position: $_position;
background-color: transparent; // reset some properties to be sure to not inherit them somehow
border: none; //
box-shadow: none; //
}
scrolledwindow {
// This is used when content is touch-dragged past boundaries.
// draws a box on top of the content, the size changes programmatically.
overshoot {
&.top {
@include overshoot(top);
&:backdrop {
@include overshoot(top, backdrop);
}
}
&.bottom {
@include overshoot(bottom);
&:backdrop {
@include overshoot(bottom, backdrop);
}
}
&.left {
@include overshoot(left);
&:backdrop {
@include overshoot(left, backdrop);
}
}
&.right {
@include overshoot(right);
&:backdrop {
@include overshoot(right, backdrop);
}
}
}
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
overshoot,
undershoot {
background-image: none;
border: none;
background: none;
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment