aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLibravatar Kristóf Marussy <kristof@marussy.com>2021-05-29 21:50:31 +0200
committerLibravatar Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>2021-05-30 04:56:58 +0530
commite73fe319cffb8409fcf05c0032327006841fa362 (patch)
treedd973c877560c74ab48bcdf520031d43993f1885
parentUniform shadow on Settings dialog (diff)
downloadferdi-e73fe319cffb8409fcf05c0032327006841fa362.tar.gz
ferdi-e73fe319cffb8409fcf05c0032327006841fa362.tar.zst
ferdi-e73fe319cffb8409fcf05c0032327006841fa362.zip
More contrast for settings dialog badges
Makes the service and workspace count badges more readable in the settings dialog.
-rw-r--r--src/styles/badge.scss1
-rw-r--r--src/styles/settings.scss23
2 files changed, 14 insertions, 10 deletions
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index 728200d0..69879de3 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -4,7 +4,6 @@
4 background: $dark-theme-gray; 4 background: $dark-theme-gray;
5 border-radius: $theme-border-radius-small; 5 border-radius: $theme-border-radius-small;
6 color: $dark-theme-gray-lightest; 6 color: $dark-theme-gray-lightest;
7 margin-right: 10px;
8 7
9 &.badge--primary, 8 &.badge--primary,
10 &.badge--premium { 9 &.badge--premium {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index e4f6f393..1bd0ae63 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -79,16 +79,16 @@
79 } 79 }
80 80
81 .badge { 81 .badge {
82 background: $dark-theme-gray-lighter; 82 background: $dark-theme-gray;
83 color: $dark-theme-gray-smoke; 83 color: $dark-theme-gray-lightest;
84 } 84 }
85 85
86 &:hover { 86 &:hover {
87 background: darken($dark-theme-gray-darker, 5%); 87 background: darken($dark-theme-gray-darker, 5%);
88 88
89 .badge { 89 .badge {
90 background: $dark-theme-gray-lighter; 90 background: $dark-theme-gray;
91 color: $dark-theme-gray-smoke; 91 color: $dark-theme-gray-lightest;
92 } 92 }
93 } 93 }
94 94
@@ -98,11 +98,11 @@
98 98
99 &.is-active { 99 &.is-active {
100 background: $dark-theme-gray; 100 background: $dark-theme-gray;
101 color: $dark-theme-gray-smoke; 101 color: $dark-theme-gray-lightest;
102 102
103 .badge { 103 .badge {
104 background: $dark-theme-gray-lighter; 104 background: $dark-theme-gray-lighter;
105 color: $dark-theme-gray-smoke; 105 color: #000;
106 } 106 }
107 } 107 }
108 } 108 }
@@ -466,11 +466,17 @@
466 transition: background $theme-transition-time, color $theme-transition-time; 466 transition: background $theme-transition-time, color $theme-transition-time;
467 border-bottom: 1px solid darken($theme-gray-lightest, 3%); 467 border-bottom: 1px solid darken($theme-gray-lightest, 3%);
468 468
469 .badge {
470 background: $theme-gray-light;
471 color: #FFF;
472 }
473
469 &:hover { 474 &:hover {
470 background: darken($theme-gray-lightest, 5%); 475 background: darken($theme-gray-lightest, 8%);
471 476
472 .badge { 477 .badge {
473 background: #FFF; 478 background: $theme-gray-light;
479 color: #FFF;
474 } 480 }
475 } 481 }
476 482
@@ -488,7 +494,6 @@
488 .settings-navigation__expander { flex: 1; } 494 .settings-navigation__expander { flex: 1; }
489 495
490 .badge { 496 .badge {
491
492 display: initial; 497 display: initial;
493 transition: background $theme-transition-time, color $theme-transition-time; 498 transition: background $theme-transition-time, color $theme-transition-time;
494 } 499 }