unified overshoot, added undershoot

This commit is contained in:
Eudaimon 2022-04-25 11:34:32 +02:00
parent 51ae8fc420
commit e7d412e451
9 changed files with 202 additions and 148 deletions

View file

@ -359,7 +359,84 @@
}
@mixin overshoot($p, $t:normal, $c:$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==$fg_color {
$_small_gradient_color: darken($borders_color, 10%);
$_big_gradient_color: $fg_color;
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
}
$_small_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.5,
to($_small_gradient_color),
to(transparentize($_small_gradient_color, 1)));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.6,
from(transparentize($_big_gradient_color, 0.93)),
to(transparentize($_big_gradient_color, 1)));
@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; //
}

View file

@ -0,0 +1,61 @@
@mixin overshoot($p, $t:normal, $c:$selected_bg_color) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
//
$_small_gradient_length: 3%;
$_big_gradient_length: 50%;
$_small_gradient_size: 100% $_small_gradient_length;
$_big_gradient_size: 100% $_big_gradient_length;
@if $p==right or $p==left {
$_small_gradient_size: $_small_gradient_length 100%;
$_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));
$_big_gradient: radial-gradient(farthest-side at $p,
$_big_gradient_color,
transparentize($_big_gradient_color, 1));
@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: $p;
background-color: transparent; // reset some properties to be sure to not inherit them somehow
border: none; //
box-shadow: none; //
}

View file

@ -0,0 +1,18 @@
undershoot {
background-origin: padding-box;
&.top, &.bottom {
background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
background-size: 0.5em 1px;
background-repeat: repeat-x;
}
&.right, &.left {
background-image: linear-gradient(to bottom, currentColor 50%, transparent 50%);
background-size: 1px 0.5em;
background-repeat: repeat-y;
}
&.top {background-position: top;}
&.bottom {background-position: bottom;}
&.right {background-position: right;}
&.left {background-position: left;}
}

View file

@ -4537,3 +4537,5 @@ popover.emoji-completion contents row box {
popover.emoji-completion .emoji:hover {
background: $popover_hover_color;
}
@import '../common/undershoot.scss';

View file

@ -142,84 +142,9 @@ $gtk: 4;
box-shadow: inset 0 1px $hc; // top highlight
}
@mixin overshoot($p, $t:normal, $c:$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%;
@import '../common/overshoot.scss';
$_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: darken($borders_color, 10%);
$_big_gradient_color: $fg_color;
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
}
$_small_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.5,
to($_small_gradient_color),
to(transparentize($_small_gradient_color, 1)));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.6,
from(transparentize($_big_gradient_color, 0.93)),
to(transparentize($_big_gradient_color, 1)));
@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; //
}
/***************************
* Check and Radio buttons *

View file

@ -1300,21 +1300,21 @@ actionbar > revealer > box:backdrop { border-color: #828282; }
scrolledwindow viewport.frame { border-style: none; }
scrolledwindow overshoot.top { background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#606060), to(rgba(96, 96, 96, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(36, 31, 49, 0.07)), to(rgba(36, 31, 49, 0))); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.top { background-image: radial-gradient(farthest-side at top, #b0dd7e 85%, rgba(176, 221, 126, 0)), radial-gradient(farthest-side at top, rgba(176, 221, 126, 0.07), rgba(176, 221, 126, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.top:backdrop { background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#828282), to(rgba(130, 130, 130, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.top:backdrop { background-image: radial-gradient(farthest-side at top, #b0dd7e 85%, rgba(176, 221, 126, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.bottom { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#606060), to(rgba(96, 96, 96, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(36, 31, 49, 0.07)), to(rgba(36, 31, 49, 0))); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #b0dd7e 85%, rgba(176, 221, 126, 0)), radial-gradient(farthest-side at bottom, rgba(176, 221, 126, 0.07), rgba(176, 221, 126, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.bottom:backdrop { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#828282), to(rgba(130, 130, 130, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.bottom:backdrop { background-image: radial-gradient(farthest-side at bottom, #b0dd7e 85%, rgba(176, 221, 126, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.left { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#606060), to(rgba(96, 96, 96, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(36, 31, 49, 0.07)), to(rgba(36, 31, 49, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.left { background-image: radial-gradient(farthest-side at left, #b0dd7e 85%, rgba(176, 221, 126, 0)), radial-gradient(farthest-side at left, rgba(176, 221, 126, 0.07), rgba(176, 221, 126, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.left:backdrop { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#828282), to(rgba(130, 130, 130, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.left:backdrop { background-image: radial-gradient(farthest-side at left, #b0dd7e 85%, rgba(176, 221, 126, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.right { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#606060), to(rgba(96, 96, 96, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(36, 31, 49, 0.07)), to(rgba(36, 31, 49, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.right { background-image: radial-gradient(farthest-side at right, #b0dd7e 85%, rgba(176, 221, 126, 0)), radial-gradient(farthest-side at right, rgba(176, 221, 126, 0.07), rgba(176, 221, 126, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.right:backdrop { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#828282), to(rgba(130, 130, 130, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.right:backdrop { background-image: radial-gradient(farthest-side at right, #b0dd7e 85%, rgba(176, 221, 126, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #797979 1px, transparent 1px) 0 0 0 1/0 1px stretch; background-color: #8d8c8f; }
@ -1737,6 +1737,20 @@ popover.emoji-completion contents row box { padding: 2px 10px; }
popover.emoji-completion .emoji:hover { background: #b4b4b4; }
undershoot { background-origin: padding-box; }
undershoot.top, undershoot.bottom { background-image: linear-gradient(to right, currentColor 50%, transparent 50%); background-size: 0.5em 1px; background-repeat: repeat-x; }
undershoot.right, undershoot.left { background-image: linear-gradient(to bottom, currentColor 50%, transparent 50%); background-size: 1px 0.5em; background-repeat: repeat-y; }
undershoot.top { background-position: top; }
undershoot.bottom { background-position: bottom; }
undershoot.right { background-position: right; }
undershoot.left { background-position: left; }
/* GTK NAMED COLORS ---------------- use responsibly! */
/*
widget text/foreground color */

View file

@ -4098,3 +4098,5 @@ menubutton {
}
}
}
@import '../common/undershoot.scss';

View file

@ -138,67 +138,8 @@ $gtk: 4;
}
@mixin overshoot($p, $t:normal, $c:$fg_color) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
//
@import '../common/overshoot.scss';
$_small_gradient_length: 3%;
$_big_gradient_length: 50%;
$_small_gradient_size: 100% $_small_gradient_length;
$_big_gradient_size: 100% $_big_gradient_length;
@if $p==right or $p==left {
$_small_gradient_size: $_small_gradient_length 100%;
$_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));
$_big_gradient: radial-gradient(farthest-side at $p,
$_big_gradient_color,
transparentize($_big_gradient_color, 1));
@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: $p;
background-color: transparent; // reset some properties to be sure to not inherit them somehow
border: none; //
box-shadow: none; //
}
/***************************
* Check and Radio buttons *

View file

@ -1193,13 +1193,13 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #797979; }
actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, #606060 85%, rgba(96, 96, 96, 0)), radial-gradient(farthest-side at top, rgba(36, 31, 49, 0.07), rgba(36, 31, 49, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, #b0dd7e 85%, rgba(176, 221, 126, 0)), radial-gradient(farthest-side at top, rgba(176, 221, 126, 0.07), rgba(176, 221, 126, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #606060 85%, rgba(96, 96, 96, 0)), radial-gradient(farthest-side at bottom, rgba(36, 31, 49, 0.07), rgba(36, 31, 49, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #b0dd7e 85%, rgba(176, 221, 126, 0)), radial-gradient(farthest-side at bottom, rgba(176, 221, 126, 0.07), rgba(176, 221, 126, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.left { background-image: radial-gradient(farthest-side at left, #606060 85%, rgba(96, 96, 96, 0)), radial-gradient(farthest-side at left, rgba(36, 31, 49, 0.07), rgba(36, 31, 49, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.left { background-image: radial-gradient(farthest-side at left, #b0dd7e 85%, rgba(176, 221, 126, 0)), radial-gradient(farthest-side at left, rgba(176, 221, 126, 0.07), rgba(176, 221, 126, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.right { background-image: radial-gradient(farthest-side at right, #606060 85%, rgba(96, 96, 96, 0)), radial-gradient(farthest-side at right, rgba(36, 31, 49, 0.07), rgba(36, 31, 49, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.right { background-image: radial-gradient(farthest-side at right, #b0dd7e 85%, rgba(176, 221, 126, 0)), radial-gradient(farthest-side at right, rgba(176, 221, 126, 0.07), rgba(176, 221, 126, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > junction { background: #797979, linear-gradient(to bottom, transparent 1px, #8d8c8f 1px), linear-gradient(to right, transparent 1px, #8d8c8f 1px); }
@ -1642,6 +1642,20 @@ menubutton arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
menubutton arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
undershoot { background-origin: padding-box; }
undershoot.top, undershoot.bottom { background-image: linear-gradient(to right, currentColor 50%, transparent 50%); background-size: 0.5em 1px; background-repeat: repeat-x; }
undershoot.right, undershoot.left { background-image: linear-gradient(to bottom, currentColor 50%, transparent 50%); background-size: 1px 0.5em; background-repeat: repeat-y; }
undershoot.top { background-position: top; }
undershoot.bottom { background-position: bottom; }
undershoot.right { background-position: right; }
undershoot.left { background-position: left; }
/* GTK NAMED COLORS ---------------- use responsibly! */
/*
widget text/foreground color */