mirrors/Simplewaita
1
0
Fork 0
mirror of https://git.disroot.org/eudaimon/Simplewaita.git synced 2026-03-10 04:21:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

unified overshoot, added undershoot

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
source/gtk4/_common.scss
View file

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

61
source/gtk4/_drawing.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 *

22
source/gtk4/gtk-new.css
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 */