150 lines
4.8 KiB
SCSS
150 lines
4.8 KiB
SCSS
@mixin overshoot($position, $type: normal, $color: $selected_bg_color) {
|
|
$_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 $position == bottom {
|
|
$_position: center bottom;
|
|
$_linear_gradient_direction: to top;
|
|
} @else if $position == right {
|
|
$_position: right center;
|
|
$_small_gradient_size: $_small_gradient_length 100%;
|
|
$_big_gradient_size: $_big_gradient_length 100%;
|
|
} @else if $position == left {
|
|
$_position: left center;
|
|
$_small_gradient_size: $_small_gradient_length 100%;
|
|
$_big_gradient_size: $_big_gradient_length 100%;
|
|
}
|
|
|
|
$_small_gradient_color: $color;
|
|
$_big_gradient_color: $color;
|
|
|
|
@if $color == $fg_color {
|
|
$_small_gradient_color: shade($borders_color, .9);
|
|
$_big_gradient_color: $fg_color;
|
|
|
|
@if $type == backdrop { $_small_gradient_color: $backdrop_borders_color; }
|
|
}
|
|
|
|
$_small_gradient: -gtk-gradient(radial,
|
|
$_position, 0,
|
|
$_position, .5,
|
|
to(alpha($_small_gradient_color, .35)),
|
|
to(alpha($_small_gradient_color, .25)));
|
|
|
|
$_big_gradient: -gtk-gradient(radial,
|
|
$_position, 0,
|
|
$_position, .6,
|
|
from(alpha($_big_gradient_color, .2)),
|
|
to(alpha($_big_gradient_color, 0)));
|
|
|
|
@if $type == normal {
|
|
background-image: $_small_gradient, $_big_gradient;
|
|
background-size: $_small_gradient_size, $_big_gradient_size;
|
|
} @else if $type == 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: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
@mixin undershoot($position) {
|
|
$_undershoot_color_dark: alpha($black, .2);
|
|
$_undershoot_color_light: alpha($white, .2);
|
|
|
|
$_gradient_dir: left;
|
|
$_dash_bg_size: 10px 1px;
|
|
$_gradient_repeat: repeat-x;
|
|
$_bg_pos: center $position;
|
|
|
|
background-color: transparent; // shouldn't be needed, but better to be sure;
|
|
|
|
@if ($position == left) or ($position == right) {
|
|
$_gradient_dir: top;
|
|
$_dash_bg_size: 1px 10px;
|
|
$_gradient_repeat: repeat-y;
|
|
$_bg_pos: $position center;
|
|
}
|
|
|
|
/*background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
|
|
$_undershoot_color_light 50%,
|
|
$_undershoot_color_dark 50%);*/
|
|
|
|
padding-#{$position}: 1px;
|
|
background-size: $_dash_bg_size;
|
|
background-repeat: $_gradient_repeat;
|
|
background-origin: content-box;
|
|
background-position: $_bg_pos;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
scrolledwindow {
|
|
viewport.frame { // avoid double borders when viewport inside scrolled window
|
|
border-style: none;
|
|
}
|
|
|
|
// 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);
|
|
|
|
&: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.
|
|
undershoot {
|
|
&.top { @include undershoot(top); }
|
|
|
|
&.bottom { @include undershoot(bottom); }
|
|
|
|
&.left { @include undershoot(left); }
|
|
|
|
&.right { @include undershoot(right); }
|
|
}
|
|
|
|
junction { // the small square between two scrollbars
|
|
border-color: transparent;
|
|
// the border image is used to add the missing dot between the borders, details, details, details...
|
|
border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
|
|
background-color: $scrollbar_bg_color;
|
|
|
|
&:dir(rtl) { border-image-slice: 0 1 0 0; }
|
|
|
|
&:backdrop {
|
|
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
|
|
background-color: $backdrop_scrollbar_bg_color;
|
|
transition: 200ms ease-out;
|
|
}
|
|
}
|
|
}
|