Changed undershoot style so it works for both gtk3 and gtk4

This commit is contained in:
eudaimon 2022-04-25 22:50:09 +02:00
parent 1671ae4b4f
commit 85816f3421
5 changed files with 40 additions and 49 deletions

View File

@ -1737,19 +1737,15 @@ popover.emoji-completion contents row box { padding: 2px 10px; }
popover.emoji-completion .emoji:hover { background: #b4b4b4; }
undershoot { background-origin: padding-box; }
undershoot { background-repeat: no-repeat; background-clip: border-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.top { background-image: linear-gradient(to bottom, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 100% 1em; background-position: top; }
undershoot.right, undershoot.left { background-image: linear-gradient(to bottom, currentColor 50%, transparent 50%); background-size: 1px 0.5em; background-repeat: repeat-y; }
undershoot.bottom { background-image: linear-gradient(to top, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 100% 1em; background-position: bottom; }
undershoot.top { background-position: top; }
undershoot.left { background-image: linear-gradient(to right, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 1em 100%; background-position: left; }
undershoot.bottom { background-position: bottom; }
undershoot.right { background-position: right; }
undershoot.left { background-position: left; }
undershoot.right { background-image: linear-gradient(to left, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 1em 100%; background-position: right; }
/* GTK NAMED COLORS ---------------- use responsibly! */
/*

View File

@ -1642,19 +1642,15 @@ 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 { background-repeat: no-repeat; background-clip: border-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.top { background-image: linear-gradient(to bottom, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 100% 1em; background-position: top; }
undershoot.right, undershoot.left { background-image: linear-gradient(to bottom, currentColor 50%, transparent 50%); background-size: 1px 0.5em; background-repeat: repeat-y; }
undershoot.bottom { background-image: linear-gradient(to top, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 100% 1em; background-position: bottom; }
undershoot.top { background-position: top; }
undershoot.left { background-image: linear-gradient(to right, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 1em 100%; background-position: left; }
undershoot.bottom { background-position: bottom; }
undershoot.right { background-position: right; }
undershoot.left { background-position: left; }
undershoot.right { background-image: linear-gradient(to left, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 1em 100%; background-position: right; }
/* GTK NAMED COLORS ---------------- use responsibly! */
/*

View File

@ -1,18 +1,25 @@
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;
background-repeat: no-repeat;
background-clip: border-box;
&.top {
background-image: linear-gradient(to bottom, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
background-size: 100% 1em;
background-position: top;
}
&.right, &.left {
background-image: linear-gradient(to bottom, currentColor 50%, transparent 50%);
background-size: 1px 0.5em;
background-repeat: repeat-y;
&.bottom {
background-image: linear-gradient(to top, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
background-size: 100% 1em;
background-position: bottom;
}
&.left {
background-image: linear-gradient(to right, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
background-size: 1em 100%;
background-position: left;
}
&.right {
background-image: linear-gradient(to left, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
background-size: 1em 100%;
background-position: right;
}
&.top {background-position: top;}
&.bottom {background-position: bottom;}
&.right {background-position: right;}
&.left {background-position: left;}
}

View File

@ -1737,19 +1737,15 @@ popover.emoji-completion contents row box { padding: 2px 10px; }
popover.emoji-completion .emoji:hover { background: #b4b4b4; }
undershoot { background-origin: padding-box; }
undershoot { background-repeat: no-repeat; background-clip: border-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.top { background-image: linear-gradient(to bottom, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 100% 1em; background-position: top; }
undershoot.right, undershoot.left { background-image: linear-gradient(to bottom, currentColor 50%, transparent 50%); background-size: 1px 0.5em; background-repeat: repeat-y; }
undershoot.bottom { background-image: linear-gradient(to top, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 100% 1em; background-position: bottom; }
undershoot.top { background-position: top; }
undershoot.left { background-image: linear-gradient(to right, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 1em 100%; background-position: left; }
undershoot.bottom { background-position: bottom; }
undershoot.right { background-position: right; }
undershoot.left { background-position: left; }
undershoot.right { background-image: linear-gradient(to left, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 1em 100%; background-position: right; }
/* GTK NAMED COLORS ---------------- use responsibly! */
/*

View File

@ -1642,19 +1642,15 @@ 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 { background-repeat: no-repeat; background-clip: border-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.top { background-image: linear-gradient(to bottom, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 100% 1em; background-position: top; }
undershoot.right, undershoot.left { background-image: linear-gradient(to bottom, currentColor 50%, transparent 50%); background-size: 1px 0.5em; background-repeat: repeat-y; }
undershoot.bottom { background-image: linear-gradient(to top, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 100% 1em; background-position: bottom; }
undershoot.top { background-position: top; }
undershoot.left { background-image: linear-gradient(to right, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 1em 100%; background-position: left; }
undershoot.bottom { background-position: bottom; }
undershoot.right { background-position: right; }
undershoot.left { background-position: left; }
undershoot.right { background-image: linear-gradient(to left, alpha(currentColor,0.5), alpha(currentColor,0.2), alpha(currentColor,0)); background-size: 1em 100%; background-position: right; }
/* GTK NAMED COLORS ---------------- use responsibly! */
/*