diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-05-29 21:50:31 +0200 |
---|---|---|
committer | Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com> | 2021-05-30 04:56:58 +0530 |
commit | e73fe319cffb8409fcf05c0032327006841fa362 (patch) | |
tree | dd973c877560c74ab48bcdf520031d43993f1885 | |
parent | Uniform shadow on Settings dialog (diff) | |
download | ferdium-app-e73fe319cffb8409fcf05c0032327006841fa362.tar.gz ferdium-app-e73fe319cffb8409fcf05c0032327006841fa362.tar.zst ferdium-app-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.scss | 1 | ||||
-rw-r--r-- | src/styles/settings.scss | 23 |
2 files changed, 14 insertions, 10 deletions
diff --git a/src/styles/badge.scss b/src/styles/badge.scss index 728200d03..69879de31 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 e4f6f3937..1bd0ae63d 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 | } |