Fade-out Improvement
parent
3467848945
commit
1a4cb9525e
|
@ -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) {
|
@function shade($color, $amount) {
|
||||||
@if type-of($color) == "color" {
|
@if type-of($color) == "color" {
|
||||||
@if ($amount > 1) {
|
@if ($amount > 1) {
|
||||||
|
|
|
@ -34,19 +34,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.prelight-row .button {
|
.prelight-row .button {
|
||||||
border-color: alpha($black, .1);
|
border-color: fade-out($black, .9);
|
||||||
color: alpha($white, .8);
|
color: fade-out($white, .2);
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
border-color: alpha($black, .2);
|
border-color: fade-out($black, .8);
|
||||||
background-color: alpha($black, .08);
|
background-color: fade-out($black, .02);
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
list-row, .prelight-row {
|
list-row, .prelight-row {
|
||||||
.button:hover {
|
.button:hover {
|
||||||
border-color: alpha($black, .1);
|
border-color: fade-out($black, .9);
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -68,14 +68,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gedit-document-panel-dragged-row {
|
.gedit-document-panel-dragged-row {
|
||||||
border: 1px solid alpha($black, .1);
|
border: 1px solid fade-out($black, .9);
|
||||||
background-color: alpha($black, .5);
|
background-color: fade-out($black, .5);
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gedit-document-panel-placeholder-row {
|
.gedit-document-panel-placeholder-row {
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: alpha($black, .08);
|
background-color: fade-out($black, .02);
|
||||||
transition: all 200ms ease-in;
|
transition: all 200ms ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,8 +8,8 @@
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: $white;
|
color: $white;
|
||||||
font: bold;
|
font: bold;
|
||||||
text-shadow: 0 1px alpha($black, .5);
|
text-shadow: 0 1px fade-out($black, .5);
|
||||||
icon-shadow: 0 1px alpha($black, .5);
|
icon-shadow: 0 1px fade-out($black, .5);
|
||||||
|
|
||||||
.menubar {
|
.menubar {
|
||||||
&, > .menuitem {
|
&, > .menuitem {
|
||||||
|
@ -17,19 +17,19 @@
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: $white;
|
color: $white;
|
||||||
font: bold;
|
font: bold;
|
||||||
text-shadow: 0 1px alpha($black, .5);
|
text-shadow: 0 1px fade-out($black, .5);
|
||||||
icon-shadow: 0 1px alpha($black, .5);
|
icon-shadow: 0 1px fade-out($black, .5);
|
||||||
|
|
||||||
*:hover { color: $white; }
|
*:hover { color: $white; }
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
background-color: alpha($white, .2);
|
background-color: fade-out($white, .8);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:insensitive { color: alpha($white, .7); }
|
&:insensitive { color: fade-out($white, .3); }
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
|
@ -111,10 +111,10 @@
|
||||||
&:focus, &:hover {
|
&:focus, &:hover {
|
||||||
border-color: shade($lightdm_bg_color, .7);
|
border-color: shade($lightdm_bg_color, .7);
|
||||||
|
|
||||||
box-shadow: inset 1px 0 alpha($dark_shadow, .1),
|
box-shadow: inset 1px 0 fade-out($dark_shadow, .9),
|
||||||
inset 0 1px alpha($dark_shadow, .12),
|
inset 0 1px fade-out($dark_shadow, .98),
|
||||||
inset -1px 0 alpha($dark_shadow, .1),
|
inset -1px 0 fade-out($dark_shadow, .9),
|
||||||
inset 0 -1px alpha($dark_shadow, .05);
|
inset 0 -1px fade-out($dark_shadow, .05);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -143,10 +143,10 @@
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
background-color: shade($lightdm_bg_color, .9);
|
background-color: shade($lightdm_bg_color, .9);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
|
box-shadow: inset 1px 0 fade-out($dark_shadow, .03),
|
||||||
inset 0 1px alpha($dark_shadow, .08),
|
inset 0 1px fade-out($dark_shadow, .02),
|
||||||
inset -1px 0 alpha($dark_shadow, .07),
|
inset -1px 0 fade-out($dark_shadow, .03),
|
||||||
inset 0 -1px alpha($dark_shadow, .05);
|
inset 0 -1px fade-out($dark_shadow, .05);
|
||||||
}
|
}
|
||||||
|
|
||||||
#buttonbox_frame {
|
#buttonbox_frame {
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
|
|
||||||
.lightdm.menu {
|
.lightdm.menu {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: alpha($black, 0.6);
|
background-color: fade-out($black, 0.4);
|
||||||
border-color: alpha($white, 0.2);
|
border-color: fade-out($white, 0.8);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
|
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
|
|
||||||
.lightdm.menubar {
|
.lightdm.menubar {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: alpha(#00ff00, 0.5);
|
background-color: fade-out(#00ff00, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -42,16 +42,16 @@
|
||||||
|
|
||||||
.lightdm.button{
|
.lightdm.button{
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: alpha($black, 0.3);
|
background-color: fade-out($black, 0.7);
|
||||||
border-color: alpha($white, 0.9);
|
border-color: fade-out($white, 0.1);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
.lightdm.button:hover {
|
.lightdm.button:hover {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: alpha($white, 0.3);
|
background-color: fade-out($white, 0.7);
|
||||||
border-color: alpha($white, 0.6);
|
border-color: fade-out($white, 0.4);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
color: $white;
|
color: $white;
|
||||||
|
@ -63,8 +63,8 @@
|
||||||
|
|
||||||
.lightdm.entry {
|
.lightdm.entry {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: alpha($black, 0.3);
|
background-color: fade-out($black, 0.7);
|
||||||
border-color: alpha($white, 0.6);
|
border-color: fade-out($white, 0.4);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
color: $white;
|
color: $white;
|
||||||
|
@ -77,13 +77,13 @@
|
||||||
border-image: none;
|
border-image: none;
|
||||||
}
|
}
|
||||||
.lightdm.entry:focused {
|
.lightdm.entry:focused {
|
||||||
border-color: alpha($white, 0.6);
|
border-color: fade-out($white, 0.4);
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
.lightdm.entry:selected {
|
.lightdm.entry:selected {
|
||||||
background-color: alpha($white, 0.2);
|
background-color: fade-out($white, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes dashentry_spinner {
|
@keyframes dashentry_spinner {
|
||||||
|
@ -106,13 +106,13 @@
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
}
|
}
|
||||||
.lightdm.toggle-button.selected:hover {
|
.lightdm.toggle-button.selected:hover {
|
||||||
background-color: alpha($white, 0.3);
|
background-color: fade-out($white, 0.7);
|
||||||
border-color: alpha($white, 0.3);
|
border-color: fade-out($white, 0.7);
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
.lightdm.toggle-button.selected {
|
.lightdm.toggle-button.selected {
|
||||||
background-color: alpha($black, 0.3);
|
background-color: fade-out($black, 0.7);
|
||||||
border-color: alpha($white, 0.3);
|
border-color: fade-out($white, 0.7);
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
-GtkWindow-resize-grip-width: 0;
|
-GtkWindow-resize-grip-width: 0;
|
||||||
-WnckTasklist-fade-overlay-rect: 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-style: dashed;
|
||||||
outline-width: 1px;
|
outline-width: 1px;
|
||||||
outline-offset: -1px;
|
outline-offset: -1px;
|
||||||
|
@ -62,7 +62,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gtkstyle-fallback {
|
.gtkstyle-fallback {
|
||||||
background-color: alpha($bg_color, .5);
|
background-color: fade-out($bg_color, .5);
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
|
|
||||||
&:prelight {
|
&:prelight {
|
||||||
|
|
|
@ -79,11 +79,11 @@
|
||||||
@extend %linked_button;
|
@extend %linked_button;
|
||||||
|
|
||||||
box-shadow: inset -1px 0 border_normal(rgba(0, 0, 0, .12 + $border_strength)),
|
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 {
|
&:focus, &:hover {
|
||||||
box-shadow: inset -1px 0 border_focus(rgba(0, 0, 0, .12 + $border_strength)),
|
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,
|
&:active, &:active:hover,
|
||||||
|
@ -91,15 +91,15 @@
|
||||||
&:checked, &:checked:hover,
|
&:checked, &:checked:hover,
|
||||||
&:checked:focus, &:checked:hover:focus {
|
&:checked:focus, &:checked:hover:focus {
|
||||||
box-shadow: inset -1px 0 border_active(rgba(0, 0, 0, .12 + $border_strength)),
|
box-shadow: inset -1px 0 border_active(rgba(0, 0, 0, .12 + $border_strength)),
|
||||||
inset 0 1px alpha($dark_shadow, .07),
|
inset 0 1px fade-out($dark_shadow, .13),
|
||||||
inset 0 -1px alpha($dark_shadow, .05);
|
inset 0 -1px fade-out($dark_shadow, .15);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:insensitive { box-shadow: inset -1px 0 shade($bg, .8); }
|
&: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,
|
&:insensitive:last-child, &:insensitive:only-child,
|
||||||
&:active:insensitive:last-child, &:active: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,
|
&: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, {
|
&: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),
|
box-shadow: inset 0 1px fade-out($dark_shadow, .13),
|
||||||
inset -1px 0 alpha($dark_shadow, .06);
|
inset -1px 0 fade-out($dark_shadow, .14);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus,
|
&: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 {
|
&: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),
|
box-shadow: inset 1px 0 fade-out($dark_shadow, .14),
|
||||||
inset 0 1px alpha($dark_shadow, .07),
|
inset 0 1px fade-out($dark_shadow, .13),
|
||||||
inset -1px 0 alpha($dark_shadow, .06);
|
inset -1px 0 fade-out($dark_shadow, .14);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -130,11 +130,11 @@
|
||||||
@include border(rgba(0, 0, 0, .12 + $border_strength));
|
@include border(rgba(0, 0, 0, .12 + $border_strength));
|
||||||
|
|
||||||
color: $fg;
|
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 {
|
&.flat {
|
||||||
border-color: alpha($button_bg, 0);
|
border-color: fade-out($button_bg, 1);
|
||||||
background-color: alpha($button_bg, 0);
|
background-color: fade-out($button_bg, 1);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
@ -144,17 +144,17 @@
|
||||||
@include linear-gradient(shade($button_bg, 1.2));
|
@include linear-gradient(shade($button_bg, 1.2));
|
||||||
@include border(rgba(0, 0, 0, .2 + $border_strength));
|
@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 {
|
&:active, &:checked {
|
||||||
@include linear-gradient(shade($button_bg, .7), to top);
|
@include linear-gradient(shade($button_bg, .7), to top);
|
||||||
|
|
||||||
color: $white;
|
color: $white;
|
||||||
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
|
box-shadow: inset 1px 0 fade-out($dark_shadow, .14),
|
||||||
inset 0 1px alpha($dark_shadow, .07),
|
inset 0 1px fade-out($dark_shadow, .13),
|
||||||
inset -1px 0 alpha($dark_shadow, .06),
|
inset -1px 0 fade-out($dark_shadow, .14),
|
||||||
inset 0 -1px alpha($dark_shadow, .05);
|
inset 0 -1px fade-out($dark_shadow, .15);
|
||||||
|
|
||||||
&:focus, &:hover {
|
&:focus, &:hover {
|
||||||
@include linear-gradient(shade($button_bg, .65), to top);
|
@include linear-gradient(shade($button_bg, .65), to top);
|
||||||
|
@ -176,7 +176,7 @@
|
||||||
@if (lightness($button_bg) > 50) {
|
@if (lightness($button_bg) > 50) {
|
||||||
@include linear-gradient(shade($button_bg, .95));
|
@include linear-gradient(shade($button_bg, .95));
|
||||||
} @else {
|
} @else {
|
||||||
@include linear-gradient(alpha($button_bg, .3));
|
@include linear-gradient(fade-out($button_bg, .7));
|
||||||
}
|
}
|
||||||
|
|
||||||
color: mix($bg, $fg, .5);
|
color: mix($bg, $fg, .5);
|
||||||
|
@ -212,15 +212,15 @@
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&:focus, &:hover {
|
&:focus, &:hover {
|
||||||
border: 1px solid alpha($black, .3);
|
border: 1px solid fade-out($black, .7);
|
||||||
background-color: alpha($white, .2);
|
background-color: fade-out($white, .8);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active, &:checked, &:active:hover, &:checked:hover {
|
&:active, &:checked, &:active:hover, &:checked:hover {
|
||||||
border: 1px solid alpha($black, .3);
|
border: 1px solid fade-out($black, .4);
|
||||||
background-color: alpha($black, .1);
|
background-color: fade-out($black, .9);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,12 +5,12 @@
|
||||||
@include exports("colorchooser") {
|
@include exports("colorchooser") {
|
||||||
GtkColorSwatch {
|
GtkColorSwatch {
|
||||||
&, &:selected {
|
&, &:selected {
|
||||||
border: 1px solid alpha($black, .1);
|
border: 1px solid fade-out($black, .9);
|
||||||
border-radius: $roundness - 1px;
|
border-radius: $roundness - 1px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-clip: border-box;
|
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; }
|
&.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
|
||||||
|
@ -42,19 +42,19 @@
|
||||||
|
|
||||||
&.color-dark:hover, &.color-light:hover {
|
&.color-dark:hover, &.color-light:hover {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
border-color: alpha($black, .3);
|
border-color: fade-out($black, .7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
GtkColorChooserWidget #add-color-button {
|
GtkColorChooserWidget #add-color-button {
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border-color: alpha($black, .1);
|
border-color: fade-out($black, .9);
|
||||||
background-color: shade($bg_color, .95);
|
background-color: shade($bg_color, .95);
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: alpha($black, .3);
|
border-color: fade-out($black, .7);
|
||||||
background-color: shade($bg_color, .9);
|
background-color: shade($bg_color, .9);
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
}
|
}
|
||||||
|
@ -69,15 +69,15 @@
|
||||||
|
|
||||||
&.color-light {
|
&.color-light {
|
||||||
&, &:hover {
|
&, &:hover {
|
||||||
border-color: alpha($black, .3);
|
border-color: fade-out($black, .7);
|
||||||
color: alpha($black, .3);
|
color: fade-out($black, .7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.color-dark {
|
&.color-dark {
|
||||||
&, &:hover {
|
&, &:hover {
|
||||||
border-color: alpha($white, .3);
|
border-color: fade-out($white, .7);
|
||||||
color: alpha($white, .3);
|
color: fade-out($white, .7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -99,9 +99,9 @@
|
||||||
-GtkWidget-vertical-separator: 0;
|
-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 {
|
GtkFileChooser {
|
||||||
|
|
|
@ -36,8 +36,8 @@
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
transition: border 150ms ease;
|
transition: border 150ms ease;
|
||||||
box-shadow: inset 1px 1px alpha($dark_shadow, .06),
|
box-shadow: inset 1px 1px fade-out($dark_shadow, .14),
|
||||||
inset -1px 0 alpha($dark_shadow, .06);
|
inset -1px 0 fade-out($dark_shadow, .14);
|
||||||
|
|
||||||
&:focus, &:hover, &:active { transition: none; }
|
&:focus, &:hover, &:active { transition: none; }
|
||||||
|
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
padding: $spacing;
|
padding: $spacing;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: alpha($bg_color, 0);
|
background-color: fade-out($bg_color, 1);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -144,11 +144,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.accelerator {
|
.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); }
|
.entry { @include entry($menu_bg_color, $menu_fg_color); }
|
||||||
|
@ -175,7 +175,7 @@
|
||||||
background-color: $menu_bg_color;
|
background-color: $menu_bg_color;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: $menu_fg_color;
|
color: $menu_fg_color;
|
||||||
box-shadow: 0 3px 6px alpha($black, .16);
|
box-shadow: 0 3px 6px fade-out($black, .04);
|
||||||
|
|
||||||
&.background {
|
&.background {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
@ -186,7 +186,7 @@
|
||||||
&:backdrop { box-shadow: none; }
|
&:backdrop { box-shadow: none; }
|
||||||
|
|
||||||
&.osd {
|
&.osd {
|
||||||
box-shadow: 0 2px 7px 3px alpha($black, .5);
|
box-shadow: 0 2px 7px 3px fade-out($black, .5);
|
||||||
|
|
||||||
> .toolbar .button {
|
> .toolbar .button {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
@ -230,7 +230,7 @@
|
||||||
.separator {
|
.separator {
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: alpha($menu_bg_color, .5);
|
color: fade-out($menu_bg_color, .5);
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
|
@ -81,17 +81,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.expander {
|
.expander {
|
||||||
color: alpha(currentColor, .7);
|
color: fade-out(currentColor, .3);
|
||||||
border: alpha(currentColor, .7);
|
border: fade-out(currentColor, .3);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: alpha(currentColor, .8);
|
color: fade-out(currentColor, .2);
|
||||||
border-color: alpha(currentColor, .8);
|
border-color: fade-out(currentColor, .2);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: alpha(currentColor, .9);
|
color: fade-out(currentColor, .1);
|
||||||
border-color: alpha(currentColor, .9);
|
border-color: fade-out(currentColor, .1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -103,9 +103,9 @@
|
||||||
|
|
||||||
@include exports("symbolicimage") {
|
@include exports("symbolicimage") {
|
||||||
.image {
|
.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; }
|
&:selected, &:selected:hover { color: $selected_fg_color; }
|
||||||
}
|
}
|
||||||
|
|
|
@ -110,7 +110,7 @@
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
/* using box shadows instead of borders due to slanted edges */
|
/* 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);
|
inset 1px 0 shade($base_color, .7), inset -1px 0 shade($base_color, .7);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -118,7 +118,7 @@
|
||||||
background-color: shade($base_color, .9);
|
background-color: shade($base_color, .9);
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-right: 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);
|
inset 1px 0 shade($base_color, .75), inset -1px 0 shade($base_color, .75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
.osd {
|
.osd {
|
||||||
&.background {
|
&.background {
|
||||||
background-color: alpha($osd_bg, .8);
|
background-color: fade-out($osd_bg, .2);
|
||||||
color: $osd_fg;
|
color: $osd_fg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -25,14 +25,14 @@
|
||||||
$_small_gradient: -gtk-gradient(radial,
|
$_small_gradient: -gtk-gradient(radial,
|
||||||
$_position, 0,
|
$_position, 0,
|
||||||
$_position, .5,
|
$_position, .5,
|
||||||
to(alpha($_small_gradient_color, .35)),
|
to(fade-out($_small_gradient_color, .75)),
|
||||||
to(alpha($_small_gradient_color, .25)));
|
to(fade-out($_small_gradient_color, .85)));
|
||||||
|
|
||||||
$_big_gradient: -gtk-gradient(radial,
|
$_big_gradient: -gtk-gradient(radial,
|
||||||
$_position, 0,
|
$_position, 0,
|
||||||
$_position, .6,
|
$_position, .6,
|
||||||
from(alpha($_big_gradient_color, .2)),
|
from(fade-out($_big_gradient_color, .8)),
|
||||||
to(alpha($_big_gradient_color, 0)));
|
to(fade-out($_big_gradient_color, 1)));
|
||||||
|
|
||||||
@if $type == normal {
|
@if $type == normal {
|
||||||
background-image: $_small_gradient, $_big_gradient;
|
background-image: $_small_gradient, $_big_gradient;
|
||||||
|
@ -51,8 +51,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin undershoot($position) {
|
@mixin undershoot($position) {
|
||||||
$_undershoot_color_dark: alpha($black, .2);
|
$_undershoot_color_dark: fade-out($black, .8);
|
||||||
$_undershoot_color_light: alpha($white, .2);
|
$_undershoot_color_light: fade-out($white, .8);
|
||||||
|
|
||||||
$_gradient_dir: left;
|
$_gradient_dir: left;
|
||||||
$_dash_bg_size: 10px 1px;
|
$_dash_bg_size: 10px 1px;
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
color: alpha($fg_color, .6);
|
color: fade-out($fg_color, .4);
|
||||||
|
|
||||||
-GtkProgressBar-min-horizontal-bar-height: 6;
|
-GtkProgressBar-min-horizontal-bar-height: 6;
|
||||||
-GtkProgressBar-min-vertical-bar-width: 6;
|
-GtkProgressBar-min-vertical-bar-width: 6;
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.trough {
|
&.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-color: shade($bg_color, 1.08);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
@ -72,7 +72,7 @@
|
||||||
&.trough {
|
&.trough {
|
||||||
@include linear-gradient(shade($bg_color, 1.08), to top);
|
@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;
|
border-radius: $roundness;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -126,7 +126,7 @@
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
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)); }
|
&: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 {
|
&.trough {
|
||||||
@include linear-gradient(shade($bg_color, 1.08));
|
@include linear-gradient(shade($bg_color, 1.08));
|
||||||
|
|
||||||
margin: 7px 0;
|
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;
|
border-radius: $roundness;
|
||||||
|
|
||||||
&:insensitive { @include linear-gradient(shade($bg_color, .9)); }
|
&:insensitive { @include linear-gradient(shade($bg_color, .9)); }
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: alpha($fg_color, .5);
|
color: fade-out($fg_color, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -79,7 +79,7 @@ $suffix: if($variant == "dark", "-dark", "");
|
||||||
@include linear-gradient(shade($bg_color, 1.2));
|
@include linear-gradient(shade($bg_color, 1.2));
|
||||||
|
|
||||||
border: 1px solid rgba(0, 0, 0, .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 {
|
&:insensitive {
|
||||||
border-color: rgba(0, 0, 0, .1);
|
border-color: rgba(0, 0, 0, .1);
|
||||||
|
@ -93,10 +93,10 @@ $suffix: if($variant == "dark", "-dark", "");
|
||||||
|
|
||||||
border: 1px solid border_normal($bg_color);
|
border: 1px solid border_normal($bg_color);
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
|
box-shadow: inset 1px 0 fade-out($dark_shadow, .13),
|
||||||
inset 0 1px alpha($dark_shadow, .08),
|
inset 0 1px fade-out($dark_shadow, .12),
|
||||||
inset -1px 0 alpha($dark_shadow, .07),
|
inset -1px 0 fade-out($dark_shadow, .13),
|
||||||
inset 0 -1px alpha($dark_shadow, .05);
|
inset 0 -1px fade-out($dark_shadow, .15);
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@include linear-gradient($selected_bg_color, to top);
|
@include linear-gradient($selected_bg_color, to top);
|
||||||
|
|
|
@ -45,7 +45,7 @@
|
||||||
&.view {
|
&.view {
|
||||||
background-color: $base_color;
|
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; }
|
&:selected, &:active { background-color: $selected_bg_color; }
|
||||||
|
|
||||||
|
@ -77,20 +77,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dim-label {
|
.dim-label {
|
||||||
&, &.view { color: alpha(currentColor, .5); }
|
&, &.view { color: fade-out(currentColor, .5); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.dnd { border: 1px solid $selected_bg_color; }
|
.dnd { border: 1px solid $selected_bg_color; }
|
||||||
|
|
||||||
.grip { background-color: transparent; }
|
.grip { background-color: transparent; }
|
||||||
|
|
||||||
.arrow { color: alpha(currentColor, .7); }
|
.arrow { color: fade-out(currentColor, .3); }
|
||||||
|
|
||||||
.rubberband {
|
.rubberband {
|
||||||
&, &.view, &.content-view.view {
|
&, &.view, &.content-view.view {
|
||||||
border: 1px solid $selected_bg_color;
|
border: 1px solid $selected_bg_color;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: alpha($selected_bg_color, .3);
|
background-color: fade-out($selected_bg_color, .7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue