starred/Nordic
1
0
Fork 0
mirror of https://github.com/EliverLara/Nordic.git synced 2026-09-28 01:46:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

Gnome: Improve overshoot indicator appearance

Browse Source
This commit is contained in:
EliverLara
2024-06-01 15:52:13 -06:00
parent b07b6450ff
commit 324f81612f
3 changed files with 74 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gtk-4.0/_drawing.scss
+26 -38
View File
@@ -473,51 +473,38 @@
box-shadow: inset 0 1px $hc; // top highlight
}
@mixin overshoot($p, $t:normal, $c:lighten($base_color, 7%)) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
//
@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: 3%;
$_big_gradient_length: 50%;
$_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;
@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: $c;
$_big_gradient_color: transparentize($c, 0.93);
@if $c==$fg_color {
$_small_gradient_color: darken($borders_color, 10%);
$_big_gradient_color: $fg_color;
$_small_gradient_color: lighten($borders_color, 10%);
$_big_gradient_color: transparentize($fg_color, 0.85);
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
}
@@ -526,9 +513,9 @@
$_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));
$_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;
@@ -541,13 +528,14 @@ $_big_gradient: radial-gradient(farthest-side at $p,
}
background-repeat: no-repeat;
background-position: $_position;
background-position: $p;
background-color: transparent; // reset some properties to be sure to not inherit them somehow
border: none; //
box-shadow: none; //
}
@mixin undershoot($p) {
//
// undershoot
gtk-4.0/gtk-dark.css
+24 -24
View File
@@ -1940,66 +1940,66 @@ actionbar > revealer > box {
scrolledwindow viewport.frame {
border-style: none; }
scrolledwindow overshoot.top {
background-image: radial-gradient(farthest-side at top, #4a5367 85%, rgba(74, 83, 103, 0)), radial-gradient(farthest-side at top, #4a5367, rgba(74, 83, 103, 0));
background-size: 100% 5%, 100% 100%;
background-image: radial-gradient(farthest-side at top, #39404f 85%, rgba(57, 64, 79, 0)), radial-gradient(farthest-side at top, rgba(216, 222, 233, 0.15), rgba(216, 222, 233, 0));
background-size: 100% 3%, 100% 50%;
background-repeat: no-repeat;
background-position: center top;
background-position: top;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.top:backdrop {
background-image: radial-gradient(farthest-side at top, #4a5367 85%, rgba(74, 83, 103, 0));
background-size: 100% 5%;
background-image: radial-gradient(farthest-side at top, #262c36 85%, rgba(38, 44, 54, 0));
background-size: 100% 3%;
background-repeat: no-repeat;
background-position: center top;
background-position: top;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom {
background-image: radial-gradient(farthest-side at bottom, #4a5367 85%, rgba(74, 83, 103, 0)), radial-gradient(farthest-side at bottom, #4a5367, rgba(74, 83, 103, 0));
background-size: 100% 5%, 100% 100%;
background-image: radial-gradient(farthest-side at bottom, #39404f 85%, rgba(57, 64, 79, 0)), radial-gradient(farthest-side at bottom, rgba(216, 222, 233, 0.15), rgba(216, 222, 233, 0));
background-size: 100% 3%, 100% 50%;
background-repeat: no-repeat;
background-position: center bottom;
background-position: bottom;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom:backdrop {
background-image: radial-gradient(farthest-side at bottom, #4a5367 85%, rgba(74, 83, 103, 0));
background-size: 100% 5%;
background-image: radial-gradient(farthest-side at bottom, #262c36 85%, rgba(38, 44, 54, 0));
background-size: 100% 3%;
background-repeat: no-repeat;
background-position: center bottom;
background-position: bottom;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.left {
background-image: radial-gradient(farthest-side at left, #4a5367 85%, rgba(74, 83, 103, 0)), radial-gradient(farthest-side at left, #4a5367, rgba(74, 83, 103, 0));
background-size: 5% 100%, 100% 100%;
background-image: radial-gradient(farthest-side at left, #39404f 85%, rgba(57, 64, 79, 0)), radial-gradient(farthest-side at left, rgba(216, 222, 233, 0.15), rgba(216, 222, 233, 0));
background-size: 3% 100%, 50% 100%;
background-repeat: no-repeat;
background-position: left center;
background-position: left;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.left:backdrop {
background-image: radial-gradient(farthest-side at left, #4a5367 85%, rgba(74, 83, 103, 0));
background-size: 5% 100%;
background-image: radial-gradient(farthest-side at left, #262c36 85%, rgba(38, 44, 54, 0));
background-size: 3% 100%;
background-repeat: no-repeat;
background-position: left center;
background-position: left;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.right {
background-image: radial-gradient(farthest-side at right, #4a5367 85%, rgba(74, 83, 103, 0)), radial-gradient(farthest-side at right, #4a5367, rgba(74, 83, 103, 0));
background-size: 5% 100%, 100% 100%;
background-image: radial-gradient(farthest-side at right, #39404f 85%, rgba(57, 64, 79, 0)), radial-gradient(farthest-side at right, rgba(216, 222, 233, 0.15), rgba(216, 222, 233, 0));
background-size: 3% 100%, 50% 100%;
background-repeat: no-repeat;
background-position: right center;
background-position: right;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.right:backdrop {
background-image: radial-gradient(farthest-side at right, #4a5367 85%, rgba(74, 83, 103, 0));
background-size: 5% 100%;
background-image: radial-gradient(farthest-side at right, #262c36 85%, rgba(38, 44, 54, 0));
background-size: 3% 100%;
background-repeat: no-repeat;
background-position: right center;
background-position: right;
background-color: transparent;
border: none;
box-shadow: none; }
gtk-4.0/gtk.css
+24 -24
View File
@@ -1940,66 +1940,66 @@ actionbar > revealer > box {
scrolledwindow viewport.frame {
border-style: none; }
scrolledwindow overshoot.top {
background-image: radial-gradient(farthest-side at top, #4a5367 85%, rgba(74, 83, 103, 0)), radial-gradient(farthest-side at top, #4a5367, rgba(74, 83, 103, 0));
background-size: 100% 5%, 100% 100%;
background-image: radial-gradient(farthest-side at top, #39404f 85%, rgba(57, 64, 79, 0)), radial-gradient(farthest-side at top, rgba(216, 222, 233, 0.15), rgba(216, 222, 233, 0));
background-size: 100% 3%, 100% 50%;
background-repeat: no-repeat;
background-position: center top;
background-position: top;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.top:backdrop {
background-image: radial-gradient(farthest-side at top, #4a5367 85%, rgba(74, 83, 103, 0));
background-size: 100% 5%;
background-image: radial-gradient(farthest-side at top, #262c36 85%, rgba(38, 44, 54, 0));
background-size: 100% 3%;
background-repeat: no-repeat;
background-position: center top;
background-position: top;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom {
background-image: radial-gradient(farthest-side at bottom, #4a5367 85%, rgba(74, 83, 103, 0)), radial-gradient(farthest-side at bottom, #4a5367, rgba(74, 83, 103, 0));
background-size: 100% 5%, 100% 100%;
background-image: radial-gradient(farthest-side at bottom, #39404f 85%, rgba(57, 64, 79, 0)), radial-gradient(farthest-side at bottom, rgba(216, 222, 233, 0.15), rgba(216, 222, 233, 0));
background-size: 100% 3%, 100% 50%;
background-repeat: no-repeat;
background-position: center bottom;
background-position: bottom;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom:backdrop {
background-image: radial-gradient(farthest-side at bottom, #4a5367 85%, rgba(74, 83, 103, 0));
background-size: 100% 5%;
background-image: radial-gradient(farthest-side at bottom, #262c36 85%, rgba(38, 44, 54, 0));
background-size: 100% 3%;
background-repeat: no-repeat;
background-position: center bottom;
background-position: bottom;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.left {
background-image: radial-gradient(farthest-side at left, #4a5367 85%, rgba(74, 83, 103, 0)), radial-gradient(farthest-side at left, #4a5367, rgba(74, 83, 103, 0));
background-size: 5% 100%, 100% 100%;
background-image: radial-gradient(farthest-side at left, #39404f 85%, rgba(57, 64, 79, 0)), radial-gradient(farthest-side at left, rgba(216, 222, 233, 0.15), rgba(216, 222, 233, 0));
background-size: 3% 100%, 50% 100%;
background-repeat: no-repeat;
background-position: left center;
background-position: left;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.left:backdrop {
background-image: radial-gradient(farthest-side at left, #4a5367 85%, rgba(74, 83, 103, 0));
background-size: 5% 100%;
background-image: radial-gradient(farthest-side at left, #262c36 85%, rgba(38, 44, 54, 0));
background-size: 3% 100%;
background-repeat: no-repeat;
background-position: left center;
background-position: left;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.right {
background-image: radial-gradient(farthest-side at right, #4a5367 85%, rgba(74, 83, 103, 0)), radial-gradient(farthest-side at right, #4a5367, rgba(74, 83, 103, 0));
background-size: 5% 100%, 100% 100%;
background-image: radial-gradient(farthest-side at right, #39404f 85%, rgba(57, 64, 79, 0)), radial-gradient(farthest-side at right, rgba(216, 222, 233, 0.15), rgba(216, 222, 233, 0));
background-size: 3% 100%, 50% 100%;
background-repeat: no-repeat;
background-position: right center;
background-position: right;
background-color: transparent;
border: none;
box-shadow: none; }
scrolledwindow overshoot.right:backdrop {
background-image: radial-gradient(farthest-side at right, #4a5367 85%, rgba(74, 83, 103, 0));
background-size: 5% 100%;
background-image: radial-gradient(farthest-side at right, #262c36 85%, rgba(38, 44, 54, 0));
background-size: 3% 100%;
background-repeat: no-repeat;
background-position: right center;
background-position: right;
background-color: transparent;
border: none;
box-shadow: none; }