Tweaks

Mix fixed
Fade-out Improvement
2015-09-10 00:19:18 +05:30 · 2015-08-16 19:09:04 +05:30 · 2015-08-16 18:58:10 +05:30
20 changed files with 136 additions and 150 deletions
--- 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) {
@ -28,10 +20,6 @@ $modules: () !default;
    }
 }

-@function mix($color1, $color2, $amount) {
-    @return unquote("mix(#{$color1},#{$color2},#{$amount})");
-}
-
@function border_normal($color) {
    @return shade($color, $contrast);
 }
--- 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;
    }

--- 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 {
--- 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;
    }
 }
--- 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 {
--- 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, .88 + $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, .88 + $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;
        }
--- 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: currentColor; }

-        GtkImage:last-child { color: alpha(currentColor, .7); }
+        GtkImage:last-child { color: currentColor; }
    }

    GtkFileChooser {
--- 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; }

--- 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 {
--- a/gtk-3.0/scss/widgets/_menu.scss
+++ b/gtk-3.0/scss/widgets/_menu.scss
@ -23,8 +23,8 @@
            color: $menubar_fg_color;

            &:hover {
-                border-color: mix($menubar_bg_color, $menubar_fg_color, .21);
-                background-color: mix($menubar_bg_color, $menubar_fg_color, .21);
+                border-color: mix($menubar_bg_color, $menubar_fg_color, .89);
+                background-color: mix($menubar_bg_color, $menubar_fg_color, .89);
                background-image: none;
                color: shade($menubar_fg_color, 1.08);
            }
@ -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;
        }
@ -238,7 +238,7 @@

    GtkModelButton.button {
        &, &:backdrop {
-            @include button(transparent, currentColor);
+            @include button(transparent, $menu_fg_color);

            &:focus:hover, &:active:hover, &:hover, &:selected {
                background-image: none;
--- a/gtk-3.0/scss/widgets/_misc.scss
+++ b/gtk-3.0/scss/widgets/_misc.scss
@ -81,18 +81,12 @@
    }

    .expander {
-        color: alpha(currentColor, .7);
-        border: alpha(currentColor, .7);
+        color: currentColor;
+        opacity: .7;

-        &:hover {
-            color: alpha(currentColor, .8);
-            border-color: alpha(currentColor, .8);
-        }
+        &:hover { opacity: .8; }

-        &:active {
-            color: alpha(currentColor, .9);
-            border-color: alpha(currentColor, .9);
-        }
+        &:active { opacity: .7; }
    }
 }

@ -103,11 +97,15 @@

@include exports("symbolicimage") {
    .image {
-        color: alpha(currentColor, .5);
+        color: currentColor;
+        opacity: .5;

-        &:hover { color: alpha(currentColor, .9); }
+        &:hover { opacity: .9; }

-        &:selected, &:selected:hover { color: $selected_fg_color; }
+        &:selected, &:selected:hover {
+            color: $selected_fg_color;
+            opacity: 1;
+        }
    }
 }

--- a/gtk-3.0/scss/widgets/_notebook.scss
+++ b/gtk-3.0/scss/widgets/_notebook.scss
@ -90,14 +90,14 @@
                border-bottom-right-radius: 0;
            }

-            GtkLabel { color: mix($text_color, $base_color, .3); }
+            GtkLabel { color: mix($text_color, $base_color, .7); }

            /* close button styling */
            .button { @extend %close_button; }
        }

        .prelight-page {
-            &, GtkLabel { color: mix($text_color, $base_color, .15); }
+            &, GtkLabel { color: mix($text_color, $base_color, .95); }
        }

        .active-page {
@ -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);
            }
        }
--- 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;
        }

@ -73,13 +73,13 @@
            .trough { background-color: $osd_bg; }

            .slider {
-                border: 1px solid mix(shade($osd_bg, .87), $osd_fg, .21);
+                border: 1px solid mix(shade($osd_bg, .87), $osd_fg, .89);
                border-radius: 0;
-                background-color: mix($osd_bg, $osd_fg, .21);
+                background-color: mix($osd_bg, $osd_fg, .89);

                &:hover {
-                    border-color: mix(shade($osd_bg, .87), $osd_fg, .31);
-                    background-color: mix($osd_bg, $osd_fg, .31);
+                    border-color: mix(shade($osd_bg, .87), $osd_fg, .79);
+                    background-color: mix($osd_bg, $osd_fg, .79);
                }

                &:active {
@ -92,7 +92,7 @@
        GtkIconView.cell {
            &:selected, &:selected:focus {
                background-color: transparent;
-                border: 3px solid mix(shade($osd_bg, .87), $osd_fg, .21);
+                border: 3px solid mix(shade($osd_bg, .87), $osd_fg, .89);
                border-radius: $roundness;
                outline-color: transparent;
            }
--- 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;
--- 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)); }
--- 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);
            }
        }

--- a/gtk-3.0/scss/widgets/_sidebar.scss
+++ b/gtk-3.0/scss/widgets/_sidebar.scss
@ -6,7 +6,7 @@
    .sidebar {
        &, &.view, .view, GtkScrolledWindow {
            background-color: $bg_color;
-            color: mix($fg_color, $bg_color, .1);
+            color: mix($fg_color, $bg_color, .9);

            &.separator {
                &, &:hover, &:focus {
@ -51,7 +51,7 @@
            border-right-color: border_normal($bg_color);
            border-radius: 0;
            background-color: $bg_color;
-            color: mix($fg_color, $bg_color, .1);
+            color: mix($fg_color, $bg_color, .9);

            &:dir(ltr) { border-width: 0 1px 0 0; }

@ -60,7 +60,7 @@
            .label {
                padding: $spacing ($spacing * 2);

-                &.highlight { background-color: mix($bg_color, $fg_color, .8); }
+                &.highlight { background-color: mix($bg_color, $fg_color, .2); }
            }

            &.csd .sidebar { border-top-style: none; }
--- 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);
--- a/gtk-3.0/scss/widgets/_toolbar.scss
+++ b/gtk-3.0/scss/widgets/_toolbar.scss
@ -73,12 +73,12 @@
        @include linear-gradient($titlebar_bg_color);

        border-radius: $roundness $roundness 0 0;
-        color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
+        color: mix($titlebar_fg_color, $titlebar_bg_color, .9);

        &:backdrop {
            @include linear-gradient($titlebar_bg_color);

-            color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
+            color: mix($titlebar_fg_color, $titlebar_bg_color, .4);
            text-shadow: none;
        }

@ -96,7 +96,7 @@
            border: 0;
            background-image: none;
            background-color: transparent;
-            color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
+            color: mix($titlebar_fg_color, $titlebar_bg_color, .9);
            box-shadow: none;

            &:hover, &:hover:focus {
@ -115,7 +115,7 @@

            &:backdrop {
                background: none;
-                color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
+                color: mix($titlebar_fg_color, $titlebar_bg_color, .4);
                icon-shadow: none;
            }
        }
--- 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 { opacity: .3; }
    }

    .dnd { border: 1px solid $selected_bg_color; }

    .grip { background-color: transparent; }

-    .arrow { color: alpha(currentColor, .7); }
+    .arrow { opacity: .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);
        }
    }
Author	SHA1	Message	Date
Satyajit Sahoo	62ae6c14a2	Tweaks	2015-09-10 00:19:18 +05:30
Siddharth	b9cb3ea16f	Mix fixed	2015-08-16 19:09:04 +05:30
Siddharth	1a4cb9525e	Fade-out Improvement	2015-08-16 18:58:10 +05:30