From 85816f34217f88e1af4146bf568d8e9cfba9952e Mon Sep 17 00:00:00 2001 From: eudaimon Date: Mon, 25 Apr 2022 22:50:09 +0200 Subject: [PATCH] Changed undershoot style so it works for both gtk3 and gtk4 --- gtk-3.0/gtk.css | 14 +++++--------- gtk-4.0/gtk.css | 14 +++++--------- source/common/undershoot.scss | 33 ++++++++++++++++++++------------- source/gtk3/gtk-new.css | 14 +++++--------- source/gtk4/gtk-new.css | 14 +++++--------- 5 files changed, 40 insertions(+), 49 deletions(-) diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css index fc1621a..aac7958 100644 --- a/gtk-3.0/gtk.css +++ b/gtk-3.0/gtk.css @@ -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! */ /* diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css index cd4a33b..56c9f52 100644 --- a/gtk-4.0/gtk.css +++ b/gtk-4.0/gtk.css @@ -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! */ /* diff --git a/source/common/undershoot.scss b/source/common/undershoot.scss index 13a8dee..96ceaba 100644 --- a/source/common/undershoot.scss +++ b/source/common/undershoot.scss @@ -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;} } diff --git a/source/gtk3/gtk-new.css b/source/gtk3/gtk-new.css index fc1621a..aac7958 100644 --- a/source/gtk3/gtk-new.css +++ b/source/gtk3/gtk-new.css @@ -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! */ /* diff --git a/source/gtk4/gtk-new.css b/source/gtk4/gtk-new.css index cd4a33b..56c9f52 100644 --- a/source/gtk4/gtk-new.css +++ b/source/gtk4/gtk-new.css @@ -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! */ /*