kirbylife
/
numix-gtk-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fade-out Improvement

sass
Siddharth 2015-08-16 18:58:10 +05:30
parent 3467848945
commit 1a4cb9525e
18 changed files with 116 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
gtk-3.0/scss/_functions.scss
View File

@ -8,14 +8,6 @@ $modules: () !default;
}
}
@function alpha($color, $amount) {
@if type-of($color) == "color" {
@return fade-out($color, (1 - $amount));
} @else {
@return unquote("alpha(#{$color},#{$amount})");
}
}
@function shade($color, $amount) {
@if type-of($color) == "color" {
@if ($amount > 1) {

16
gtk-3.0/scss/apps/_gedit.scss
View File

@ -34,19 +34,19 @@
}
.prelight-row .button {
border-color: alpha($black, .1);
color: alpha($white, .8);
border-color: fade-out($black, .9);
color: fade-out($white, .2);
&:active {
border-color: alpha($black, .2);
background-color: alpha($black, .08);
border-color: fade-out($black, .8);
background-color: fade-out($black, .02);
color: $white;
}
}
list-row, .prelight-row {
.button:hover {
border-color: alpha($black, .1);
border-color: fade-out($black, .9);
color: $white;
}
}
@ -68,14 +68,14 @@
}
.gedit-document-panel-dragged-row {
border: 1px solid alpha($black, .1);
background-color: alpha($black, .5);
border: 1px solid fade-out($black, .9);
background-color: fade-out($black, .5);
color: $white;
}
.gedit-document-panel-placeholder-row {
border: 0;
background-color: alpha($black, .08);
background-color: fade-out($black, .02);
transition: all 200ms ease-in;
}

28
gtk-3.0/scss/apps/_lightdm.scss
View File

@ -8,8 +8,8 @@
background-image: none;
color: $white;
font: bold;
text-shadow: 0 1px alpha($black, .5);
icon-shadow: 0 1px alpha($black, .5);
text-shadow: 0 1px fade-out($black, .5);
icon-shadow: 0 1px fade-out($black, .5);
.menubar {
&, > .menuitem {
@ -17,19 +17,19 @@
background-image: none;
color: $white;
font: bold;
text-shadow: 0 1px alpha($black, .5);
icon-shadow: 0 1px alpha($black, .5);
text-shadow: 0 1px fade-out($black, .5);
icon-shadow: 0 1px fade-out($black, .5);
*:hover { color: $white; }
&:hover {
border-style: none;
background-color: alpha($white, .2);
background-color: fade-out($white, .8);
background-image: none;
color: $white;
}
&:insensitive { color: alpha($white, .7); }
&:insensitive { color: fade-out($white, .3); }
.menu {
border-radius: 1px;
@ -111,10 +111,10 @@
&:focus, &:hover {
border-color: shade($lightdm_bg_color, .7);
box-shadow: inset 1px 0 alpha($dark_shadow, .1),
inset 0 1px alpha($dark_shadow, .12),
inset -1px 0 alpha($dark_shadow, .1),
inset 0 -1px alpha($dark_shadow, .05);
box-shadow: inset 1px 0 fade-out($dark_shadow, .9),
inset 0 1px fade-out($dark_shadow, .98),
inset -1px 0 fade-out($dark_shadow, .9),
inset 0 -1px fade-out($dark_shadow, .05);
}
}
}
@ -143,10 +143,10 @@
border-radius: $roundness;
background-color: shade($lightdm_bg_color, .9);
background-image: none;
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
inset 0 1px alpha($dark_shadow, .08),
inset -1px 0 alpha($dark_shadow, .07),
inset 0 -1px alpha($dark_shadow, .05);
box-shadow: inset 1px 0 fade-out($dark_shadow, .03),
inset 0 1px fade-out($dark_shadow, .02),
inset -1px 0 fade-out($dark_shadow, .03),
inset 0 -1px fade-out($dark_shadow, .05);
}
#buttonbox_frame {

30
gtk-3.0/scss/apps/_unity-greeter.scss
View File

@ -7,8 +7,8 @@
.lightdm.menu {
background-image: none;
background-color: alpha($black, 0.6);
border-color: alpha($white, 0.2);
background-color: fade-out($black, 0.4);
border-color: fade-out($white, 0.8);
border-radius: 4px;
padding: 1px;
@ -31,7 +31,7 @@
.lightdm.menubar {
background-image: none;
background-color: alpha(#00ff00, 0.5);
background-color: fade-out(#00ff00, 0.5);
}
@ -42,16 +42,16 @@
.lightdm.button{
background-image: none;
background-color: alpha($black, 0.3);
border-color: alpha($white, 0.9);
background-color: fade-out($black, 0.7);
border-color: fade-out($white, 0.1);
border-radius: 5px;
padding: 5px;
color: $white;
}
.lightdm.button:hover {
background-image: none;
background-color: alpha($white, 0.3);
border-color: alpha($white, 0.6);
background-color: fade-out($white, 0.7);
border-color: fade-out($white, 0.4);
border-radius: 5px;
padding: 5px;
color: $white;
@ -63,8 +63,8 @@
.lightdm.entry {
background-image: none;
background-color: alpha($black, 0.3);
border-color: alpha($white, 0.6);
background-color: fade-out($black, 0.7);
border-color: fade-out($white, 0.4);
border-radius: 5px;
padding: 7px;
color: $white;
@ -77,13 +77,13 @@
border-image: none;
}
.lightdm.entry:focused {
border-color: alpha($white, 0.6);
border-color: fade-out($white, 0.4);
border-width: 1px;
border-style: solid;
color: $white;
}
.lightdm.entry:selected {
background-color: alpha($white, 0.2);
background-color: fade-out($white, 0.8);
}
@keyframes dashentry_spinner {
@ -106,13 +106,13 @@
border-width: 0;
}
.lightdm.toggle-button.selected:hover {
background-color: alpha($white, 0.3);
border-color: alpha($white, 0.3);
background-color: fade-out($white, 0.7);
border-color: fade-out($white, 0.7);
border-width: 1px;
}
.lightdm.toggle-button.selected {
background-color: alpha($black, 0.3);
border-color: alpha($white, 0.3);
background-color: fade-out($black, 0.7);
border-color: fade-out($white, 0.7);
border-width: 1px;
}
}

4
gtk-3.0/scss/widgets/_base.scss
View File

@ -11,7 +11,7 @@
-GtkWindow-resize-grip-width: 0;
-WnckTasklist-fade-overlay-rect: 0;
outline-color: alpha($selected_bg_color, .5);
outline-color: fade-out($selected_bg_color, .5);
outline-style: dashed;
outline-width: 1px;
outline-offset: -1px;
@ -62,7 +62,7 @@
}
.gtkstyle-fallback {
background-color: alpha($bg_color, .5);
background-color: fade-out($bg_color, .5);
color: $fg_color;
&:prelight {

48
gtk-3.0/scss/widgets/_button.scss
View File

@ -79,11 +79,11 @@
@extend %linked_button;
box-shadow: inset -1px 0 border_normal(rgba(0, 0, 0, .12 + $border_strength)),
0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
0 1px 2px -1px fade-out($dark_shadow, .98 + $shadow_strength);
&:focus, &:hover {
box-shadow: inset -1px 0 border_focus(rgba(0, 0, 0, .12 + $border_strength)),
0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
0 1px 2px -1px fade-out($dark_shadow, .78 + $shadow_strength);
}
&:active, &:active:hover,
@ -91,15 +91,15 @@
&:checked, &:checked:hover,
&:checked:focus, &:checked:hover:focus {
box-shadow: inset -1px 0 border_active(rgba(0, 0, 0, .12 + $border_strength)),
inset 0 1px alpha($dark_shadow, .07),
inset 0 -1px alpha($dark_shadow, .05);
inset 0 1px fade-out($dark_shadow, .13),
inset 0 -1px fade-out($dark_shadow, .15);
}
&:insensitive { box-shadow: inset -1px 0 shade($bg, .8); }
&:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); }
&:last-child, &:only-child { box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .98 + $shadow_strength); }
&:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); }
&:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .78 + $shadow_strength); }
&:insensitive:last-child, &:insensitive:only-child,
&:active:insensitive:last-child, &:active:insensitive:only-child,
@ -107,15 +107,15 @@
&:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus,
&:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus, {
box-shadow: inset 0 1px alpha($dark_shadow, .07),
inset -1px 0 alpha($dark_shadow, .06);
box-shadow: inset 0 1px fade-out($dark_shadow, .13),
inset -1px 0 fade-out($dark_shadow, .14);
}
&:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus,
&:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus {
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
inset 0 1px alpha($dark_shadow, .07),
inset -1px 0 alpha($dark_shadow, .06);
box-shadow: inset 1px 0 fade-out($dark_shadow, .14),
inset 0 1px fade-out($dark_shadow, .13),
inset -1px 0 fade-out($dark_shadow, .14);
}
}
@ -130,11 +130,11 @@
@include border(rgba(0, 0, 0, .12 + $border_strength));
color: $fg;
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .12 + $shadow_strength);
&.flat {
border-color: alpha($button_bg, 0);
background-color: alpha($button_bg, 0);
border-color: fade-out($button_bg, 1);
background-color: fade-out($button_bg, 1);
background-image: none;
box-shadow: none;
}
@ -144,17 +144,17 @@
@include linear-gradient(shade($button_bg, 1.2));
@include border(rgba(0, 0, 0, .2 + $border_strength));
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .78 + $shadow_strength);
}
&:active, &:checked {
@include linear-gradient(shade($button_bg, .7), to top);
color: $white;
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
inset 0 1px alpha($dark_shadow, .07),
inset -1px 0 alpha($dark_shadow, .06),
inset 0 -1px alpha($dark_shadow, .05);
box-shadow: inset 1px 0 fade-out($dark_shadow, .14),
inset 0 1px fade-out($dark_shadow, .13),
inset -1px 0 fade-out($dark_shadow, .14),
inset 0 -1px fade-out($dark_shadow, .15);
&:focus, &:hover {
@include linear-gradient(shade($button_bg, .65), to top);
@ -176,7 +176,7 @@
@if (lightness($button_bg) > 50) {
@include linear-gradient(shade($button_bg, .95));
} @else {
@include linear-gradient(alpha($button_bg, .3));
@include linear-gradient(fade-out($button_bg, .7));
}
color: mix($bg, $fg, .5);
@ -212,15 +212,15 @@
box-shadow: none;
&:focus, &:hover {
border: 1px solid alpha($black, .3);
background-color: alpha($white, .2);
border: 1px solid fade-out($black, .7);
background-color: fade-out($white, .8);
background-image: none;
box-shadow: none;
}
&:active, &:checked, &:active:hover, &:checked:hover {
border: 1px solid alpha($black, .3);
background-color: alpha($black, .1);
border: 1px solid fade-out($black, .4);
background-color: fade-out($black, .9);
background-image: none;
box-shadow: none;
}

22
gtk-3.0/scss/widgets/_choosers.scss
View File

@ -5,12 +5,12 @@
@include exports("colorchooser") {
GtkColorSwatch {
&, &:selected {
border: 1px solid alpha($black, .1);
border: 1px solid fade-out($black, .9);
border-radius: $roundness - 1px;
background-color: transparent;
background-clip: border-box;
&:hover { border-color: alpha($black, .3); }
&:hover { border-color: fade-out($black, .7); }
}
&.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
@ -42,19 +42,19 @@
&.color-dark:hover, &.color-light:hover {
background-image: none;
border-color: alpha($black, .3);
border-color: fade-out($black, .7);
}
}
}
GtkColorChooserWidget #add-color-button {
background-clip: padding-box;
border-color: alpha($black, .1);
border-color: fade-out($black, .9);
background-color: shade($bg_color, .95);
color: $fg_color;
&:hover {
border-color: alpha($black, .3);
border-color: fade-out($black, .7);
background-color: shade($bg_color, .9);
color: $fg_color;
}
@ -69,15 +69,15 @@
&.color-light {
&, &:hover {
border-color: alpha($black, .3);
color: alpha($black, .3);
border-color: fade-out($black, .7);
color: fade-out($black, .7);
}
}
&.color-dark {
&, &:hover {
border-color: alpha($white, .3);
color: alpha($white, .3);
border-color: fade-out($white, .7);
color: fade-out($white, .7);
}
}
}
@ -99,9 +99,9 @@
-GtkWidget-vertical-separator: 0;
}
GtkLabel:last-child { color: alpha(currentColor, .7); }
GtkLabel:last-child { color: fade-out(currentColor, .3); }
GtkImage:last-child { color: alpha(currentColor, .7); }
GtkImage:last-child { color: fade-out(currentColor, .3); }
}
GtkFileChooser {

4
gtk-3.0/scss/widgets/_entry.scss
View File

@ -36,8 +36,8 @@
border-style: solid;
border-radius: $roundness;
transition: border 150ms ease;
box-shadow: inset 1px 1px alpha($dark_shadow, .06),
inset -1px 0 alpha($dark_shadow, .06);
box-shadow: inset 1px 1px fade-out($dark_shadow, .14),
inset -1px 0 fade-out($dark_shadow, .14);
&:focus, &:hover, &:active { transition: none; }

2
gtk-3.0/scss/widgets/_grid.scss
View File

@ -13,7 +13,7 @@
border-radius: 0;
padding: $spacing;
background-image: none;
background-color: alpha($bg_color, 0);
background-color: fade-out($bg_color, 1);
box-shadow: none;
&:hover {

12
gtk-3.0/scss/widgets/_menu.scss
View File

@ -144,11 +144,11 @@
}
.accelerator {
color: alpha($menu_fg_color, .6);
color: fade-out($menu_fg_color, .4);
&:hover { color: alpha($selected_fg_color, .8); }
&:hover { color: fade-out($selected_fg_color, .2); }
&:insensitive { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
&:insensitive { color: fade-out(mix($menu_fg_color, $menu_bg_color, .5), .6); }
}
.entry { @include entry($menu_bg_color, $menu_fg_color); }
@ -175,7 +175,7 @@
background-color: $menu_bg_color;
background-image: none;
color: $menu_fg_color;
box-shadow: 0 3px 6px alpha($black, .16);
box-shadow: 0 3px 6px fade-out($black, .04);
&.background {
background-image: none;
@ -186,7 +186,7 @@
&:backdrop { box-shadow: none; }
&.osd {
box-shadow: 0 2px 7px 3px alpha($black, .5);
box-shadow: 0 2px 7px 3px fade-out($black, .5);
> .toolbar .button {
border-radius: 0;
@ -230,7 +230,7 @@
.separator {
border: 0;
background-color: transparent;
color: alpha($menu_bg_color, .5);
color: fade-out($menu_bg_color, .5);
font-size: 80%;
font-weight: bold;
}

16
gtk-3.0/scss/widgets/_misc.scss
View File

@ -81,17 +81,17 @@
}
.expander {
color: alpha(currentColor, .7);
border: alpha(currentColor, .7);
color: fade-out(currentColor, .3);
border: fade-out(currentColor, .3);
&:hover {
color: alpha(currentColor, .8);
border-color: alpha(currentColor, .8);
color: fade-out(currentColor, .2);
border-color: fade-out(currentColor, .2);
}
&:active {
color: alpha(currentColor, .9);
border-color: alpha(currentColor, .9);
color: fade-out(currentColor, .1);
border-color: fade-out(currentColor, .1);
}
}
}
@ -103,9 +103,9 @@
@include exports("symbolicimage") {
.image {
color: alpha(currentColor, .5);
color: fade-out(currentColor, .5);
&:hover { color: alpha(currentColor, .9); }
&:hover { color: fade-out(currentColor, .1); }
&:selected, &:selected:hover { color: $selected_fg_color; }
}

4
gtk-3.0/scss/widgets/_notebook.scss
View File

@ -110,7 +110,7 @@
border-left: 0;
border-right: 0;
/* using box shadows instead of borders due to slanted edges */
box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
box-shadow: inset 0 3px fade-out($black, .17), inset 0 2px fade-out($black, .17), inset 0 1px fade-out($black, .17),
inset 1px 0 shade($base_color, .7), inset -1px 0 shade($base_color, .7);
}
@ -118,7 +118,7 @@
background-color: shade($base_color, .9);
border-left: 0;
border-right: 0;
box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
box-shadow: inset 0 3px fade-out($black, .17), inset 0 2px fade-out($black, .17), inset 0 1px fade-out($black, .17),
inset 1px 0 shade($base_color, .75), inset -1px 0 shade($base_color, .75);
}
}

2
gtk-3.0/scss/widgets/_osd.scss
View File

@ -10,7 +10,7 @@
.osd {
&.background {
background-color: alpha($osd_bg, .8);
background-color: fade-out($osd_bg, .2);
color: $osd_fg;
}

12
gtk-3.0/scss/widgets/_overshoot.scss
View File

@ -25,14 +25,14 @@
$_small_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, .5,
to(alpha($_small_gradient_color, .35)),
to(alpha($_small_gradient_color, .25)));
to(fade-out($_small_gradient_color, .75)),
to(fade-out($_small_gradient_color, .85)));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, .6,
from(alpha($_big_gradient_color, .2)),
to(alpha($_big_gradient_color, 0)));
from(fade-out($_big_gradient_color, .8)),
to(fade-out($_big_gradient_color, 1)));
@if $type == normal {
background-image: $_small_gradient, $_big_gradient;
@ -51,8 +51,8 @@
}
@mixin undershoot($position) {
$_undershoot_color_dark: alpha($black, .2);
$_undershoot_color_light: alpha($white, .2);
$_undershoot_color_dark: fade-out($black, .8);
$_undershoot_color_light: fade-out($white, .8);
$_gradient_dir: left;
$_dash_bg_size: 10px 1px;

12
gtk-3.0/scss/widgets/_progress.scss
View File

@ -7,7 +7,7 @@
padding: 0;
border-radius: $roundness;
font-size: smaller;
color: alpha($fg_color, .6);
color: fade-out($fg_color, .4);
-GtkProgressBar-min-horizontal-bar-height: 6;
-GtkProgressBar-min-vertical-bar-width: 6;
@ -19,7 +19,7 @@
}
&.trough {
border: 1px solid alpha(border_normal($bg_color), .5);
border: 1px solid fade-out(border_normal($bg_color), .5);
background-color: shade($bg_color, 1.08);
background-image: none;
}
@ -72,7 +72,7 @@
&.trough {
@include linear-gradient(shade($bg_color, 1.08), to top);
border: 1px solid alpha(border_normal($bg_color), .5);
border: 1px solid fade-out(border_normal($bg_color), .5);
border-radius: $roundness;
}
@ -126,7 +126,7 @@
border-radius: 8px;
border-width: 1px;
border-style: solid;
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .3);
box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .7);
&:insensitive { @include linear-gradient(shade($bg_color, .9)); }
}
@ -141,14 +141,14 @@
}
}
&.mark { border-color: alpha(border_normal($bg_color), .5); }
&.mark { border-color: fade-out(border_normal($bg_color), .5); }
&.trough {
@include linear-gradient(shade($bg_color, 1.08));
margin: 7px 0;
border: 1px solid alpha(border_normal($bg_color), .5);
border: 1px solid fade-out(border_normal($bg_color), .5);
border-radius: $roundness;
&:insensitive { @include linear-gradient(shade($bg_color, .9)); }

2
gtk-3.0/scss/widgets/_scrollbar.scss
View File

@ -25,7 +25,7 @@
border-radius: 0;
background-color: transparent;
background-image: none;
color: alpha($fg_color, .5);
color: fade-out($fg_color, .5);
}
}

10
gtk-3.0/scss/widgets/_toggle.scss
View File

@ -79,7 +79,7 @@ $suffix: if($variant == "dark", "-dark", "");
@include linear-gradient(shade($bg_color, 1.2));
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12);
box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .08);
&:insensitive {
border-color: rgba(0, 0, 0, .1);
@ -93,10 +93,10 @@ $suffix: if($variant == "dark", "-dark", "");
border: 1px solid border_normal($bg_color);
color: $fg_color;
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
inset 0 1px alpha($dark_shadow, .08),
inset -1px 0 alpha($dark_shadow, .07),
inset 0 -1px alpha($dark_shadow, .05);
box-shadow: inset 1px 0 fade-out($dark_shadow, .13),
inset 0 1px fade-out($dark_shadow, .12),
inset -1px 0 fade-out($dark_shadow, .13),
inset 0 -1px fade-out($dark_shadow, .15);
&:active {
@include linear-gradient($selected_bg_color, to top);

8
gtk-3.0/scss/widgets/_view.scss
View File

@ -45,7 +45,7 @@
&.view {
background-color: $base_color;
&:prelight { background-color: alpha($selected_bg_color, .6); }
&:prelight { background-color: fade-out($selected_bg_color, .4); }
&:selected, &:active { background-color: $selected_bg_color; }
@ -77,20 +77,20 @@
}
.dim-label {
&, &.view { color: alpha(currentColor, .5); }
&, &.view { color: fade-out(currentColor, .5); }
}
.dnd { border: 1px solid $selected_bg_color; }
.grip { background-color: transparent; }
.arrow { color: alpha(currentColor, .7); }
.arrow { color: fade-out(currentColor, .3); }
.rubberband {
&, &.view, &.content-view.view {
border: 1px solid $selected_bg_color;
border-radius: 0;
background-color: alpha($selected_bg_color, .3);
background-color: fade-out($selected_bg_color, .7);
}
}