AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Adwaita: undershoot teeth removal

Browse Source
This commit is contained in:
Lapo Calamandrei 2015-01-28 20:05:03 +01:00
parent 201134b9df
commit 5f1fb0e4fc
3 changed files with 70 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
gtk/theme/Adwaita/_drawing.scss
View File

@ -592,57 +592,35 @@
$_undershoot_color: transparentize($fg_color, 0.6);
$_undershoot_base: transparentize($base_color, 0.5);
$_1st_gradient_dir: bottom left;
$_2nd_gradient_dir: bottom right;
$_gradient_size: 13px 7px;
$_line_size: 100% 1px;
$_gradient_dir: left;
$_dash_bg_size: 10px 1px;
$_base_bg_size: 10px 3px;
$_gradient_repeat: repeat-x;
$_background_position: left top;
$_bg_pos: center $p;
background-color: transparent; // shouldn't be needed, but better to be sure;
@if $p==top { box-shadow: 0 -1px $borders_color; } // vars are already set for top undershoot, there's just a box shadow to
// to cover the treeview lighter border, in the other cases it shouldn't be
// a problem
@else if $p==bottom {
$_1st_gradient_dir: top left;
$_2nd_gradient_dir: top right;
$_background_position: bottom left;
}
@else { // left
$_1st_gradient_dir: bottom right;
$_2nd_gradient_dir: top right;
$_gradient_size: 7px 13px;
$_line_size: 1px 100%;
@if ($p == left) or ($p == right) {
$_gradient_dir: top;
$_dash_bg_size: 1px 10px;
$_base_bg_size: 3px 10px;
$_gradient_repeat: repeat-y;
$_background_position: left top;
@if $p==right {
$_1st_gradient_dir: bottom left;
$_2nd_gradient_dir: top left;
$_background_position: right top;
}
$_bg_pos: $p center;
}
background-image: linear-gradient(to $_1st_gradient_dir, // first half triangle - colored
$_undershoot_color 18%,
transparentize($_undershoot_color, 1) 25%),
linear-gradient(to $_2nd_gradient_dir, // second half triangle - colored
$_undershoot_color 18%,
transparentize($_undershoot_color, 1) 25%),
linear-gradient(to $_1st_gradient_dir, // first half triangle - as a base
$_undershoot_base 18%,
transparentize($_undershoot_base, 1) 25%),
linear-gradient(to $_2nd_gradient_dir, // second half triangle - as a base
$_undershoot_base 18%,
transparentize($_undershoot_base, 1) 25%),
linear-gradient(to top, $_undershoot_base); // this is just a line
background-image: linear-gradient(to $_gradient_dir, // this is the dash
transparentize($_undershoot_color, 1) 10%,
$_undershoot_color 10%,
$_undershoot_color 60%,
transparentize($_undershoot_color, 1) 60%),
linear-gradient(to $_gradient_dir, // this is the dash base
$_undershoot_base 70%,
transparentize($_undershoot_base, 1) 70%);
border-#{$p}: 1px solid transparent;
background-size: $_gradient_size, $_gradient_size, $_gradient_size, $_gradient_size, $_line_size;
background-repeat: $_gradient_repeat, $_gradient_repeat, $_gradient_repeat, $_gradient_repeat, no-repeat;
background-position: $_background_position;
background-origin: border-box, border-box, padding-box, padding-box, border-box;
padding-#{$p}: 1px;
background-size: $_dash_bg_size, $_base_bg_size;
background-repeat: $_gradient_repeat;
background-origin: content-box, padding-box;
background-position: $_bg_pos;
}

45
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -4415,37 +4415,40 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
.undershoot.top {
background-color: transparent;
box-shadow: 0 -1px #1c1f1f;
background-image: linear-gradient(to bottom left, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to bottom right, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to bottom left, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to bottom right, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top, rgba(41, 41, 41, 0.5));
background-image: linear-gradient(to left, rgba(238, 238, 236, 0) 10%, rgba(238, 238, 236, 0.4) 10%, rgba(238, 238, 236, 0.4) 60%, rgba(238, 238, 236, 0) 60%), linear-gradient(to left, rgba(41, 41, 41, 0.5) 70%, rgba(41, 41, 41, 0) 70%);
border-top: 1px solid transparent;
background-size: 13px 7px, 13px 7px, 13px 7px, 13px 7px, 100% 1px;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
background-position: left top;
background-origin: border-box, border-box, padding-box, padding-box, border-box; }
padding-top: 1px;
background-size: 10px 1px, 10px 3px;
background-repeat: repeat-x;
background-origin: content-box, padding-box;
background-position: center top; }
.undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to top left, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to top right, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to top left, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top right, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top, rgba(41, 41, 41, 0.5));
background-image: linear-gradient(to left, rgba(238, 238, 236, 0) 10%, rgba(238, 238, 236, 0.4) 10%, rgba(238, 238, 236, 0.4) 60%, rgba(238, 238, 236, 0) 60%), linear-gradient(to left, rgba(41, 41, 41, 0.5) 70%, rgba(41, 41, 41, 0) 70%);
border-bottom: 1px solid transparent;
background-size: 13px 7px, 13px 7px, 13px 7px, 13px 7px, 100% 1px;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
background-position: bottom left;
background-origin: border-box, border-box, padding-box, padding-box, border-box; }
padding-bottom: 1px;
background-size: 10px 1px, 10px 3px;
background-repeat: repeat-x;
background-origin: content-box, padding-box;
background-position: center bottom; }
.undershoot.left {
background-color: transparent;
background-image: linear-gradient(to bottom right, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to top right, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to bottom right, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top right, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top, rgba(41, 41, 41, 0.5));
background-image: linear-gradient(to top, rgba(238, 238, 236, 0) 10%, rgba(238, 238, 236, 0.4) 10%, rgba(238, 238, 236, 0.4) 60%, rgba(238, 238, 236, 0) 60%), linear-gradient(to top, rgba(41, 41, 41, 0.5) 70%, rgba(41, 41, 41, 0) 70%);
border-left: 1px solid transparent;
background-size: 7px 13px, 7px 13px, 7px 13px, 7px 13px, 1px 100%;
background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
background-position: left top;
background-origin: border-box, border-box, padding-box, padding-box, border-box; }
padding-left: 1px;
background-size: 1px 10px, 3px 10px;
background-repeat: repeat-y;
background-origin: content-box, padding-box;
background-position: left center; }
.undershoot.right {
background-color: transparent;
background-image: linear-gradient(to bottom left, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to top left, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to bottom left, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top left, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top, rgba(41, 41, 41, 0.5));
background-image: linear-gradient(to top, rgba(238, 238, 236, 0) 10%, rgba(238, 238, 236, 0.4) 10%, rgba(238, 238, 236, 0.4) 60%, rgba(238, 238, 236, 0) 60%), linear-gradient(to top, rgba(41, 41, 41, 0.5) 70%, rgba(41, 41, 41, 0) 70%);
border-right: 1px solid transparent;
background-size: 7px 13px, 7px 13px, 7px 13px, 7px 13px, 1px 100%;
background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
background-position: right top;
background-origin: border-box, border-box, padding-box, padding-box, border-box; }
padding-right: 1px;
background-size: 1px 10px, 3px 10px;
background-repeat: repeat-y;
background-origin: content-box, padding-box;
background-position: right center; }
.undershoot.sidebar {
background-color: transparent; }

45
gtk/theme/Adwaita/gtk-contained.css
View File

@ -4588,37 +4588,40 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
.undershoot.top {
background-color: transparent;
box-shadow: 0 -1px #a1a1a1;
background-image: linear-gradient(to bottom left, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to bottom right, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to bottom left, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top, rgba(255, 255, 255, 0.5));
background-image: linear-gradient(to left, rgba(46, 52, 54, 0) 10%, rgba(46, 52, 54, 0.4) 10%, rgba(46, 52, 54, 0.4) 60%, rgba(46, 52, 54, 0) 60%), linear-gradient(to left, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 70%);
border-top: 1px solid transparent;
background-size: 13px 7px, 13px 7px, 13px 7px, 13px 7px, 100% 1px;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
background-position: left top;
background-origin: border-box, border-box, padding-box, padding-box, border-box; }
padding-top: 1px;
background-size: 10px 1px, 10px 3px;
background-repeat: repeat-x;
background-origin: content-box, padding-box;
background-position: center top; }
.undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to top left, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to top right, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to top left, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top right, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top, rgba(255, 255, 255, 0.5));
background-image: linear-gradient(to left, rgba(46, 52, 54, 0) 10%, rgba(46, 52, 54, 0.4) 10%, rgba(46, 52, 54, 0.4) 60%, rgba(46, 52, 54, 0) 60%), linear-gradient(to left, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 70%);
border-bottom: 1px solid transparent;
background-size: 13px 7px, 13px 7px, 13px 7px, 13px 7px, 100% 1px;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
background-position: bottom left;
background-origin: border-box, border-box, padding-box, padding-box, border-box; }
padding-bottom: 1px;
background-size: 10px 1px, 10px 3px;
background-repeat: repeat-x;
background-origin: content-box, padding-box;
background-position: center bottom; }
.undershoot.left {
background-color: transparent;
background-image: linear-gradient(to bottom right, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to top right, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top right, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top, rgba(255, 255, 255, 0.5));
background-image: linear-gradient(to top, rgba(46, 52, 54, 0) 10%, rgba(46, 52, 54, 0.4) 10%, rgba(46, 52, 54, 0.4) 60%, rgba(46, 52, 54, 0) 60%), linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 70%);
border-left: 1px solid transparent;
background-size: 7px 13px, 7px 13px, 7px 13px, 7px 13px, 1px 100%;
background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
background-position: left top;
background-origin: border-box, border-box, padding-box, padding-box, border-box; }
padding-left: 1px;
background-size: 1px 10px, 3px 10px;
background-repeat: repeat-y;
background-origin: content-box, padding-box;
background-position: left center; }
.undershoot.right {
background-color: transparent;
background-image: linear-gradient(to bottom left, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to top left, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to bottom left, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top left, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top, rgba(255, 255, 255, 0.5));
background-image: linear-gradient(to top, rgba(46, 52, 54, 0) 10%, rgba(46, 52, 54, 0.4) 10%, rgba(46, 52, 54, 0.4) 60%, rgba(46, 52, 54, 0) 60%), linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 70%);
border-right: 1px solid transparent;
background-size: 7px 13px, 7px 13px, 7px 13px, 7px 13px, 1px 100%;
background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
background-position: right top;
background-origin: border-box, border-box, padding-box, padding-box, border-box; }
padding-right: 1px;
background-size: 1px 10px, 3px 10px;
background-repeat: repeat-y;
background-origin: content-box, padding-box;
background-position: right center; }
.undershoot.sidebar {
background-color: transparent; }