diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-11-16 20:43:08 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-11-16 20:43:08 +0100 |
commit | 7a48c07b74a42c03241b1db471fb59c94d6c91c8 (patch) | |
tree | 793ac3f363299669fa18429a996b7fcd7dcf391d /src | |
parent | Add isSystemDarkModeEnabled to AppStore (diff) | |
download | ferdium-app-7a48c07b74a42c03241b1db471fb59c94d6c91c8.tar.gz ferdium-app-7a48c07b74a42c03241b1db471fb59c94d6c91c8.tar.zst ferdium-app-7a48c07b74a42c03241b1db471fb59c94d6c91c8.zip |
Polishing & increasing contrast
Diffstat (limited to 'src')
-rw-r--r-- | src/styles/auth.scss | 4 | ||||
-rw-r--r-- | src/styles/button.scss | 8 | ||||
-rw-r--r-- | src/styles/colors.scss | 5 | ||||
-rw-r--r-- | src/styles/input.scss | 6 | ||||
-rw-r--r-- | src/styles/layout.scss | 4 | ||||
-rw-r--r-- | src/styles/select.scss | 2 |
6 files changed, 16 insertions, 13 deletions
diff --git a/src/styles/auth.scss b/src/styles/auth.scss index 34bfa1805..4cdf6ccd5 100644 --- a/src/styles/auth.scss +++ b/src/styles/auth.scss | |||
@@ -16,11 +16,11 @@ | |||
16 | .auth__links { | 16 | .auth__links { |
17 | background: $dark-theme-gray-dark; | 17 | background: $dark-theme-gray-dark; |
18 | 18 | ||
19 | a { color: $dark-theme-gray-lighter; } | 19 | a { color: $dark-theme-text-color; } |
20 | } | 20 | } |
21 | 21 | ||
22 | .legal { | 22 | .legal { |
23 | color: $dark-theme-gray-lighter; | 23 | color: $dark-theme-text-color; |
24 | 24 | ||
25 | a { color: $dark-theme-gray-lightest; } | 25 | a { color: $dark-theme-gray-lightest; } |
26 | } | 26 | } |
diff --git a/src/styles/button.scss b/src/styles/button.scss index 83ddf3e3e..0053db4d0 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -3,14 +3,14 @@ | |||
3 | 3 | ||
4 | .theme__dark .franz-form__button { | 4 | .theme__dark .franz-form__button { |
5 | background: $theme-brand-primary; | 5 | background: $theme-brand-primary; |
6 | color: $dark-theme-gray-smoke; | 6 | color: $dark-theme-text-color; |
7 | 7 | ||
8 | &:hover { background: darken($theme-brand-primary, 5%); } | 8 | &:hover { background: darken($theme-brand-primary, 5%); } |
9 | &:active { background: lighten($theme-brand-primary, 5%); } | 9 | &:active { background: lighten($theme-brand-primary, 5%); } |
10 | 10 | ||
11 | &.franz-form__button--secondary { | 11 | &.franz-form__button--secondary { |
12 | background: $dark-theme-gray-lighter; | 12 | background: $dark-theme-gray-lighter; |
13 | color: $dark-theme-gray-smoke; | 13 | color: $dark-theme-text-color; |
14 | 14 | ||
15 | &:hover { background: darken($dark-theme-gray-lightest, 5%); } | 15 | &:hover { background: darken($dark-theme-gray-lightest, 5%); } |
16 | &:active { background: lighten($dark-theme-gray-lightest, 5%); } | 16 | &:active { background: lighten($dark-theme-gray-lightest, 5%); } |
@@ -36,9 +36,11 @@ | |||
36 | 36 | ||
37 | &:hover { | 37 | &:hover { |
38 | background: darken($theme-brand-primary, 5%); | 38 | background: darken($theme-brand-primary, 5%); |
39 | color: $dark-theme-gray-smoke; | 39 | color: $dark-theme-text-color; |
40 | } | 40 | } |
41 | } | 41 | } |
42 | |||
43 | &:disabled { opacity: .5; } | ||
42 | } | 44 | } |
43 | 45 | ||
44 | .franz-form__button { | 46 | .franz-form__button { |
diff --git a/src/styles/colors.scss b/src/styles/colors.scss index b669c6a88..4411a0e81 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss | |||
@@ -31,7 +31,8 @@ $dark-theme-gray-dark: #383A3B; | |||
31 | $dark-theme-gray: #47494B; | 31 | $dark-theme-gray: #47494B; |
32 | 32 | ||
33 | $dark-theme-gray-light: #515355; | 33 | $dark-theme-gray-light: #515355; |
34 | $dark-theme-gray-lighter: #686A6C; | 34 | $dark-theme-gray-lighter: #8a8b8b; |
35 | $dark-theme-gray-lightest: #A0A2A3; | 35 | $dark-theme-gray-lightest: #FFF; |
36 | 36 | ||
37 | $dark-theme-gray-smoke: #CED0D1; | 37 | $dark-theme-gray-smoke: #CED0D1; |
38 | $dark-theme-text-color: #FFF; | ||
diff --git a/src/styles/input.scss b/src/styles/input.scss index f3c713f13..687bcac64 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss | |||
@@ -2,7 +2,7 @@ | |||
2 | @import './mixins.scss'; | 2 | @import './mixins.scss'; |
3 | 3 | ||
4 | .theme__dark .franz-form { | 4 | .theme__dark .franz-form { |
5 | .franz-form__label { color: $dark-theme-gray-lightest; } | 5 | .franz-form__label { color: $dark-theme-text-color; } |
6 | 6 | ||
7 | .franz-form__input-wrapper { | 7 | .franz-form__input-wrapper { |
8 | background: $dark-theme-gray-dark; | 8 | background: $dark-theme-gray-dark; |
@@ -10,9 +10,9 @@ | |||
10 | } | 10 | } |
11 | 11 | ||
12 | .franz-form__input { | 12 | .franz-form__input { |
13 | color: $dark-theme-gray-lighter; | 13 | color: $dark-theme-gray-lightest; |
14 | 14 | ||
15 | &::placeholder { color: $dark-theme-gray-light; } | 15 | &::placeholder { color: $dark-theme-gray-lighter; } |
16 | } | 16 | } |
17 | 17 | ||
18 | .franz-form__input-prefix, | 18 | .franz-form__input-prefix, |
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 373b29e7d..ebf468cf0 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -9,12 +9,12 @@ html { overflow: hidden; } | |||
9 | color: $theme-text-color; | 9 | color: $theme-text-color; |
10 | 10 | ||
11 | .sidebar__add-service { | 11 | .sidebar__add-service { |
12 | color: $dark-theme-gray-lightest; | 12 | color: $dark-theme-gray-lighter; |
13 | background: $dark-theme-gray; | 13 | background: $dark-theme-gray; |
14 | } | 14 | } |
15 | 15 | ||
16 | .sidebar__button { | 16 | .sidebar__button { |
17 | color: $dark-theme-gray-lightest; | 17 | color: $dark-theme-gray-lighter; |
18 | font-size: 22px; | 18 | font-size: 22px; |
19 | 19 | ||
20 | &:hover, | 20 | &:hover, |
diff --git a/src/styles/select.scss b/src/styles/select.scss index 36ac963bb..ed0fc0fc2 100644 --- a/src/styles/select.scss +++ b/src/styles/select.scss | |||
@@ -6,7 +6,7 @@ $toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj | |||
6 | .theme__dark .franz-form .franz-form__select { | 6 | .theme__dark .franz-form .franz-form__select { |
7 | background-color: $dark-theme-gray-dark; | 7 | background-color: $dark-theme-gray-dark; |
8 | border: 1px solid $dark-theme-gray-light; | 8 | border: 1px solid $dark-theme-gray-light; |
9 | color: $dark-theme-gray-light; | 9 | color: $dark-theme-gray-lightest; |
10 | } | 10 | } |
11 | 11 | ||
12 | .franz-form .franz-form__select { | 12 | .franz-form .franz-form__select { |