Improve spinner colors on top of medium-brightness backgrounds

pull/272/head
Scott Nonnenberg 6 years ago
parent 552db647e5
commit f5af063191

@ -133,29 +133,29 @@
} }
.module-spinner__circle--incoming { .module-spinner__circle--incoming {
background-color: $color-gray-15; background-color: $color-white-04;
} }
.module-spinner__arc--incoming { .module-spinner__arc--incoming {
background-color: $color-gray-60; background-color: $color-gray-60;
} }
.module-spinner__circle--small-incoming { .module-spinner__circle--small-incoming {
background-color: $color-gray-15; background-color: $color-white-04;
} }
.module-spinner__arc--small-incoming { .module-spinner__arc--small-incoming {
background-color: $color-gray-60; background-color: $color-gray-60;
} }
.module-spinner__circle--outgoing { .module-spinner__circle--outgoing {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--outgoing { .module-spinner__arc--outgoing {
background-color: $color-gray-05; background-color: $color-white;
} }
.module-spinner__circle--small-outgoing { .module-spinner__circle--small-outgoing {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--small-outgoing { .module-spinner__arc--small-outgoing {
background-color: $color-gray-05; background-color: $color-white;
} }
&.dark-theme { &.dark-theme {
@ -323,26 +323,26 @@
} }
.module-spinner__circle--incoming { .module-spinner__circle--incoming {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--incoming { .module-spinner__arc--incoming {
background-color: $color-gray-25; background-color: $color-gray-25;
} }
.module-spinner__circle--small-incoming { .module-spinner__circle--small-incoming {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--small-incoming { .module-spinner__arc--small-incoming {
background-color: $color-gray-25; background-color: $color-gray-25;
} }
.module-spinner__circle--outgoing { .module-spinner__circle--outgoing {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--outgoing { .module-spinner__arc--outgoing {
background-color: $color-gray-05; background-color: $color-gray-05;
} }
.module-spinner__circle--small-outgoing { .module-spinner__circle--small-outgoing {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--small-outgoing { .module-spinner__arc--small-outgoing {
background-color: $color-gray-05; background-color: $color-gray-05;

@ -2712,7 +2712,7 @@
top: 0; top: 0;
left: 0; left: 0;
@include color-svg('../images/spinner-track-56.svg', $color-gray-15); @include color-svg('../images/spinner-track-56.svg', $color-white-04);
z-index: 2; z-index: 2;
height: 56px; height: 56px;
width: 56px; width: 56px;
@ -2748,7 +2748,7 @@
} }
.module-spinner__circle--small { .module-spinner__circle--small {
@include color-svg('../images/spinner-track-24.svg', $color-gray-15); @include color-svg('../images/spinner-track-24.svg', $color-white-04);
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
@ -2759,16 +2759,16 @@
} }
.module-spinner__circle--incoming { .module-spinner__circle--incoming {
background-color: $color-gray-75; background-color: $color-white-04;
} }
.module-spinner__arc--incoming { .module-spinner__arc--incoming {
background-color: $color-gray-15; background-color: $color-white;
} }
.module-spinner__circle--small-incoming { .module-spinner__circle--small-incoming {
background-color: $color-gray-75; background-color: $color-white-04;
} }
.module-spinner__arc--small-incoming { .module-spinner__arc--small-incoming {
background-color: $color-gray-15; background-color: $color-white;
} }
// Third-party module: react-contextmenu // Third-party module: react-contextmenu

@ -1412,39 +1412,39 @@ body.dark-theme {
// Module: Spinner // Module: Spinner
.module-spinner__circle { .module-spinner__circle {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc { .module-spinner__arc {
background-color: $color-gray-05; background-color: $color-gray-05;
} }
.module-spinner__circle--small { .module-spinner__circle--small {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--small { .module-spinner__arc--small {
background-color: $color-gray-05; background-color: $color-gray-05;
} }
.module-spinner__circle--incoming { .module-spinner__circle--incoming {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--incoming { .module-spinner__arc--incoming {
background-color: $color-gray-05; background-color: $color-gray-05;
} }
.module-spinner__circle--small-incoming { .module-spinner__circle--small-incoming {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--small-incoming { .module-spinner__arc--small-incoming {
background-color: $color-gray-05; background-color: $color-gray-05;
} }
.module-spinner__circle--outgoing { .module-spinner__circle--outgoing {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--outgoing { .module-spinner__arc--outgoing {
background-color: $color-gray-05; background-color: $color-gray-05;
} }
.module-spinner__circle--small-outgoing { .module-spinner__circle--small-outgoing {
background-color: $color-gray-45; background-color: $color-white-04;
} }
.module-spinner__arc--small-outgoing { .module-spinner__arc--small-outgoing {
background-color: $color-gray-05; background-color: $color-gray-05;

Loading…
Cancel
Save