From 1a4cb9525eab9d742d39e6e873444136cc086d43 Mon Sep 17 00:00:00 2001 From: Siddharth Date: Sun, 16 Aug 2015 18:58:10 +0530 Subject: [PATCH] Fade-out Improvement --- gtk-3.0/scss/_functions.scss | 8 ----- gtk-3.0/scss/apps/_gedit.scss | 16 ++++----- gtk-3.0/scss/apps/_lightdm.scss | 28 ++++++++-------- gtk-3.0/scss/apps/_unity-greeter.scss | 30 ++++++++--------- gtk-3.0/scss/widgets/_base.scss | 4 +-- gtk-3.0/scss/widgets/_button.scss | 48 +++++++++++++-------------- gtk-3.0/scss/widgets/_choosers.scss | 22 ++++++------ gtk-3.0/scss/widgets/_entry.scss | 4 +-- gtk-3.0/scss/widgets/_grid.scss | 2 +- gtk-3.0/scss/widgets/_menu.scss | 12 +++---- gtk-3.0/scss/widgets/_misc.scss | 16 ++++----- gtk-3.0/scss/widgets/_notebook.scss | 4 +-- gtk-3.0/scss/widgets/_osd.scss | 2 +- gtk-3.0/scss/widgets/_overshoot.scss | 12 +++---- gtk-3.0/scss/widgets/_progress.scss | 12 +++---- gtk-3.0/scss/widgets/_scrollbar.scss | 2 +- gtk-3.0/scss/widgets/_toggle.scss | 10 +++--- gtk-3.0/scss/widgets/_view.scss | 8 ++--- 18 files changed, 116 insertions(+), 124 deletions(-) diff --git a/gtk-3.0/scss/_functions.scss b/gtk-3.0/scss/_functions.scss index 0de71b6..d693099 100755 --- a/gtk-3.0/scss/_functions.scss +++ b/gtk-3.0/scss/_functions.scss @@ -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) { diff --git a/gtk-3.0/scss/apps/_gedit.scss b/gtk-3.0/scss/apps/_gedit.scss index f1614a6..1fde818 100644 --- a/gtk-3.0/scss/apps/_gedit.scss +++ b/gtk-3.0/scss/apps/_gedit.scss @@ -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; } diff --git a/gtk-3.0/scss/apps/_lightdm.scss b/gtk-3.0/scss/apps/_lightdm.scss index 52eda61..26912e2 100644 --- a/gtk-3.0/scss/apps/_lightdm.scss +++ b/gtk-3.0/scss/apps/_lightdm.scss @@ -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 { diff --git a/gtk-3.0/scss/apps/_unity-greeter.scss b/gtk-3.0/scss/apps/_unity-greeter.scss index eb60d2a..9e4f583 100644 --- a/gtk-3.0/scss/apps/_unity-greeter.scss +++ b/gtk-3.0/scss/apps/_unity-greeter.scss @@ -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; } } diff --git a/gtk-3.0/scss/widgets/_base.scss b/gtk-3.0/scss/widgets/_base.scss index eddb5be..edaee1f 100755 --- a/gtk-3.0/scss/widgets/_base.scss +++ b/gtk-3.0/scss/widgets/_base.scss @@ -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 { diff --git a/gtk-3.0/scss/widgets/_button.scss b/gtk-3.0/scss/widgets/_button.scss index c1b92aa..5a86b68 100755 --- a/gtk-3.0/scss/widgets/_button.scss +++ b/gtk-3.0/scss/widgets/_button.scss @@ -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; } diff --git a/gtk-3.0/scss/widgets/_choosers.scss b/gtk-3.0/scss/widgets/_choosers.scss index b650c47..07f27a2 100644 --- a/gtk-3.0/scss/widgets/_choosers.scss +++ b/gtk-3.0/scss/widgets/_choosers.scss @@ -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 { diff --git a/gtk-3.0/scss/widgets/_entry.scss b/gtk-3.0/scss/widgets/_entry.scss index e8d7562..f752aa8 100755 --- a/gtk-3.0/scss/widgets/_entry.scss +++ b/gtk-3.0/scss/widgets/_entry.scss @@ -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; } diff --git a/gtk-3.0/scss/widgets/_grid.scss b/gtk-3.0/scss/widgets/_grid.scss index e4b9e8f..0ed0d87 100644 --- a/gtk-3.0/scss/widgets/_grid.scss +++ b/gtk-3.0/scss/widgets/_grid.scss @@ -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 { diff --git a/gtk-3.0/scss/widgets/_menu.scss b/gtk-3.0/scss/widgets/_menu.scss index 1973351..0bca5f5 100755 --- a/gtk-3.0/scss/widgets/_menu.scss +++ b/gtk-3.0/scss/widgets/_menu.scss @@ -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; } diff --git a/gtk-3.0/scss/widgets/_misc.scss b/gtk-3.0/scss/widgets/_misc.scss index b5a6cc9..cdf3ca7 100644 --- a/gtk-3.0/scss/widgets/_misc.scss +++ b/gtk-3.0/scss/widgets/_misc.scss @@ -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; } } diff --git a/gtk-3.0/scss/widgets/_notebook.scss b/gtk-3.0/scss/widgets/_notebook.scss index 9447d30..125d790 100644 --- a/gtk-3.0/scss/widgets/_notebook.scss +++ b/gtk-3.0/scss/widgets/_notebook.scss @@ -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); } } diff --git a/gtk-3.0/scss/widgets/_osd.scss b/gtk-3.0/scss/widgets/_osd.scss index dbf1d16..b8c06fa 100644 --- a/gtk-3.0/scss/widgets/_osd.scss +++ b/gtk-3.0/scss/widgets/_osd.scss @@ -10,7 +10,7 @@ .osd { &.background { - background-color: alpha($osd_bg, .8); + background-color: fade-out($osd_bg, .2); color: $osd_fg; } diff --git a/gtk-3.0/scss/widgets/_overshoot.scss b/gtk-3.0/scss/widgets/_overshoot.scss index bc3d1fd..ea99d65 100644 --- a/gtk-3.0/scss/widgets/_overshoot.scss +++ b/gtk-3.0/scss/widgets/_overshoot.scss @@ -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; diff --git a/gtk-3.0/scss/widgets/_progress.scss b/gtk-3.0/scss/widgets/_progress.scss index 28df150..3789029 100644 --- a/gtk-3.0/scss/widgets/_progress.scss +++ b/gtk-3.0/scss/widgets/_progress.scss @@ -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)); } diff --git a/gtk-3.0/scss/widgets/_scrollbar.scss b/gtk-3.0/scss/widgets/_scrollbar.scss index 56156d4..3774366 100644 --- a/gtk-3.0/scss/widgets/_scrollbar.scss +++ b/gtk-3.0/scss/widgets/_scrollbar.scss @@ -25,7 +25,7 @@ border-radius: 0; background-color: transparent; background-image: none; - color: alpha($fg_color, .5); + color: fade-out($fg_color, .5); } } diff --git a/gtk-3.0/scss/widgets/_toggle.scss b/gtk-3.0/scss/widgets/_toggle.scss index 52bdee3..4bdb2ff 100755 --- a/gtk-3.0/scss/widgets/_toggle.scss +++ b/gtk-3.0/scss/widgets/_toggle.scss @@ -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); diff --git a/gtk-3.0/scss/widgets/_view.scss b/gtk-3.0/scss/widgets/_view.scss index d868914..f873114 100644 --- a/gtk-3.0/scss/widgets/_view.scss +++ b/gtk-3.0/scss/widgets/_view.scss @@ -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); } }