This commit is contained in:
Vince 2021-12-21 23:03:02 +08:00
parent e6dbf7c197
commit ef29ababb3
3 changed files with 100 additions and 43 deletions

View File

@ -3359,14 +3359,14 @@ scrolledwindow {
}
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
undershoot {
&.top { @include undershoot(top); }
&.bottom { @include undershoot(bottom); }
&.left { @include undershoot(left); }
&.right { @include undershoot(right); }
padding: $wm_radius/2;
}
// undershoot {
// &.top { @include undershoot(top); }
// &.bottom { @include undershoot(bottom); }
// &.left { @include undershoot(left); }
// &.right { @include undershoot(right); }
//
// padding: $wm_radius / 2;
// }
@at-root junction { // the small square between two scrollbars
border-style: solid none none solid;

View File

@ -3368,21 +3368,21 @@ scrolledwindow {
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
// This draws a box on top of the content, the size changes programmatically.
> overshoot {
&.top { @include overshoot(top); }
&.bottom { @include overshoot(bottom); }
&.left { @include overshoot(left); }
&.right { @include overshoot(right); }
&.top { @include overshoot_alt(top); }
&.bottom { @include overshoot_alt(bottom); }
&.left { @include overshoot_alt(left); }
&.right { @include overshoot_alt(right); }
}
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
> undershoot {
&.top { @include undershoot(top); }
&.bottom { @include undershoot(bottom); }
&.left { @include undershoot(left); }
&.right { @include undershoot(right); }
padding: $wm_radius/2;
}
// > undershoot {
// &.top { @include undershoot(top); }
// &.bottom { @include undershoot(bottom); }
// &.left { @include undershoot(left); }
// &.right { @include undershoot(right); }
//
// padding: $wm_radius / 2;
// }
> junction { // the small square between two scrollbars
border-style: solid none none solid;

View File

@ -388,6 +388,80 @@
//
// 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==$fg_color {
$_small_gradient_color: $borders_color;
$_big_gradient_color: $text_color;
@if $t==backdrop { $_small_gradient_color: $fill_color; }
}
$_small_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.5,
to($_small_gradient_color),
to(rgba($_small_gradient_color, 0)));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.6,
from(rgba($_big_gradient_color, 0.07)),
to(rgba($_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; //
}
@mixin overshoot_alt($p) {
//
// overshoot
//
// $p: position
//
// possible $p values:
// top, bottom, right, left
//
$_small_gradient_length: 3%;
@ -401,33 +475,16 @@
$_big_gradient_size: $_big_gradient_length 100%;
}
$_small_gradient_color: $c;
$_big_gradient_color: transparentize($c, 0.93);
@if $c==$fg_color {
$_small_gradient_color: darken($borders_color, 10%);
$_big_gradient_color: transparentize($fg_color, 0.93);
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
}
$_small_gradient: radial-gradient(farthest-side at $p,
$_small_gradient_color 85%,
transparentize($_small_gradient_color, 1));
gtkalpha(currentColor, 0.12) 85%,
gtkalpha(currentColor, 0));
$_big_gradient: radial-gradient(farthest-side at $p,
$_big_gradient_color,
transparentize($_big_gradient_color, 1));
gtkalpha(currentColor, 0.05),
gtkalpha(currentColor, 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-image: $_small_gradient, $_big_gradient;
background-size: $_small_gradient_size, $_big_gradient_size;
background-repeat: no-repeat;
background-position: $p;