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

HC theme: implement scroll overshoot

Browse Source 
https://bugzilla.gnome.org/show_bug.cgi?id=740876
This commit is contained in:
Jakub Steiner 2014-12-01 12:33:23 +01:00
parent e629aba1a2
commit fb4073a60a
3 changed files with 164 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
gtk/theme/HighContrast/_common.scss
View File

@ -123,6 +123,26 @@
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); }
}
}
GtkLabel {
&:selected,
&:selected:focus,

79
gtk/theme/HighContrast/_drawing.scss
View File

@ -280,3 +280,82 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
}
}
@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: 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;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
$_small_gradient_color: $c;
$_big_gradient_color: $c;
@if $c==$fg_color {
$_small_gradient_color: darken($borders_color, 50%);
$_big_gradient_color: $fg_color;
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
}
$_small_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.5,
to($_small_gradient_color),
to(transparentize($_small_gradient_color, 1)));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.6,
from(transparentize($_big_gradient_color, 0.5)),
to(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: $_position;
background-color: transparent; // reset some properties to be sure to not inherit them somehow
border: none; //
box-shadow: none; //
}

65
gtk/theme/HighContrast/gtk.css
View File

@ -109,6 +109,71 @@
border: 1px solid #000;
background-color: rgba(0, 0, 0, 0.2); }
.overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(black), to(transparent)), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
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(#8b8b8b), to(rgba(139, 139, 139, 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(black), to(transparent)), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
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(#8b8b8b), to(rgba(139, 139, 139, 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(black), to(transparent)), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
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(#8b8b8b), to(rgba(139, 139, 139, 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(black), to(transparent)), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
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(#8b8b8b), to(rgba(139, 139, 139, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
/*********************
* Spinner Animation *
*********************/