Lerking/gtk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adwaita: another stab at the undershoot

Browse Source
This commit is contained in:
Lapo Calamandrei
2014-12-17 19:42:11 +01:00
parent bf383acd5d
commit fdc8c6103a
4 changed files with 250 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
gtk/theme/Adwaita/_common.scss
View File

@@ -120,54 +120,6 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-color: transparentize($selected_bg_color,0.8);
}
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
.overshoot {
&.top {
@include overshoot(top);
&:backdrop { @include overshoot(top, backdrop); }
}
&.bottom {
@include overshoot(bottom);
&:backdrop { @include overshoot(bottom, backdrop); }
}
&.left {
@include overshoot(left);
&:backdrop { @include overshoot(left, backdrop); }
}
&.right {
@include overshoot(right);
&:backdrop { @include overshoot(right, backdrop); }
}
}
.undershoot { //FIXME: make a mixin for the overshoot, special case the dark variant
&.top {
background: none;
background-image: linear-gradient(to bottom, transparentize(black, 0.7),
transparentize(black, 0.9) 2px,
transparent 10px);
}
&.bottom {
background: none;
background-image: linear-gradient(to top, transparentize(black, 0.8),
transparentize(black, 0.95) 2px,
transparent 7px);
}
&.left {
background: none;
background-image: linear-gradient(to right, transparentize(black, 0.8),
transparentize(black, 0.95) 2px,
transparent 7px);
}
&.right {
background: none;
background-image: linear-gradient(to left, transparentize(black, 0.8),
transparentize(black, 0.95) 2px,
transparent 7px);
}
&:backdrop { background-image: none; }
}
.label {
&.separator {
color: $fg_color;
@@ -3276,3 +3228,47 @@ GtkVolumeButton.button { padding: 8px; }
.monospace {
font: Monospace;
}
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
.overshoot {
&.top {
@include overshoot(top);
&:backdrop { @include overshoot(top, backdrop); }
}
&.bottom {
@include overshoot(bottom);
&:backdrop { @include overshoot(bottom, backdrop); }
}
&.left {
@include overshoot(left);
&:backdrop { @include overshoot(left, backdrop); }
}
&.right {
@include overshoot(right);
&:backdrop { @include overshoot(right, backdrop); }
}
}
.undershoot { //FIXME: the dark variant needs love
&.top {
@include undershoot(top);
}
&.bottom {
@include undershoot(bottom);
}
&.left {
@include undershoot(left);
}
&.right {
@include undershoot(right);
}
&.sidebar {
background-color: transparent; // otherwise it get inherited
}
&:backdrop { background-image: none; }
}

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

@@ -523,7 +523,7 @@
@if $p==bottom {
$_position: center bottom;
$_linear_gradient_direction: to top;
$_linear_gradient_direction: to top;
}
@else if $p==right {
@@ -537,7 +537,7 @@
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
$_small_gradient_color: $c;
$_big_gradient_color: $c;
@@ -577,3 +577,43 @@
border: none; //
box-shadow: none; //
}
@mixin undershoot($p) {
//
// undershoot
//
// $p: position
//
// possible $p values:
// top, bottom, right, left
//
$_shadow_color: if($variant == 'light', transparentize(black, 0.7), transparentize(black, 0.5));
background-color: transparent; // shouldn't be needed, but better to be sure;
@if $p==top {
background-image: linear-gradient(to bottom, $_shadow_color,
transparentize($_shadow_color, 0.5) 3px,
transparent);
}
@else if $p==bottom {
background-image: linear-gradient(to top, transparentize(black, 0.5),
transparentize(black, 0.8) 3%,
transparent,
transparentize(black, 0.98) 25%,
transparent);
}
@else {
$_dir: left;
@if $p==left { $_dir: right; }
background-image: linear-gradient(to $_dir, $_shadow_color,
transparentize($_shadow_color, 0.7) 2px,
transparent);
}
}

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

@@ -75,86 +75,6 @@
border: 1px solid #215d9c;
background-color: rgba(33, 93, 156, 0.2); }
.overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.undershoot.top {
background: none;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1) 2px, transparent 10px); }
.undershoot.bottom {
background: none;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05) 2px, transparent 7px); }
.undershoot.left {
background: none;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05) 2px, transparent 7px); }
.undershoot.right {
background: none;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05) 2px, transparent 7px); }
.undershoot:backdrop {
background-image: none; }
.label.separator, GtkPlacesSidebar.sidebar .view .label.separator {
color: #eeeeec; }
.label.separator:backdrop, GtkPlacesSidebar.sidebar .view .label.separator:backdrop {
@@ -4424,6 +4344,88 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
.monospace {
font: Monospace; }
.overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.undershoot.top {
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 3px, transparent); }
.undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 3%, transparent, rgba(0, 0, 0, 0.02) 25%, transparent); }
.undershoot.left {
background-color: transparent;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent 2px, transparent); }
.undershoot.right {
background-color: transparent;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent 2px, transparent); }
.undershoot.sidebar {
background-color: transparent; }
.undershoot:backdrop {
background-image: none; }
/* GTK NAMED COLORS
----------------
use responsibly! */

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

@@ -75,86 +75,6 @@
border: 1px solid #4a90d9;
background-color: rgba(74, 144, 217, 0.2); }
.overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.undershoot.top {
background: none;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1) 2px, transparent 10px); }
.undershoot.bottom {
background: none;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05) 2px, transparent 7px); }
.undershoot.left {
background: none;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05) 2px, transparent 7px); }
.undershoot.right {
background: none;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05) 2px, transparent 7px); }
.undershoot:backdrop {
background-image: none; }
.label.separator, GtkPlacesSidebar.sidebar .view .label.separator {
color: #2e3436; }
.label.separator:backdrop, GtkPlacesSidebar.sidebar .view .label.separator:backdrop {
@@ -4595,6 +4515,88 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
.monospace {
font: Monospace; }
.overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.undershoot.top {
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent 3px, transparent); }
.undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 3%, transparent, rgba(0, 0, 0, 0.02) 25%, transparent); }
.undershoot.left {
background-color: transparent;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent 2px, transparent); }
.undershoot.right {
background-color: transparent;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent 2px, transparent); }
.undershoot.sidebar {
background-color: transparent; }
.undershoot:backdrop {
background-image: none; }
/* GTK NAMED COLORS
----------------
use responsibly! */