diff options
author | 2021-12-15 16:26:12 +0100 | |
---|---|---|
committer | 2021-12-15 16:26:12 +0100 | |
commit | d9bbf686ae2458fdcb3b033a806f3c2eb72492da (patch) | |
tree | 0f38836e69ff763341c936f1716be7ba55f6e2d7 | |
parent | Iterate on ecac9de1704ab75990eac16bc4aebb17bac774f5 (diff) | |
download | ferdium-app-d9bbf686ae2458fdcb3b033a806f3c2eb72492da.tar.gz ferdium-app-d9bbf686ae2458fdcb3b033a806f3c2eb72492da.tar.zst ferdium-app-d9bbf686ae2458fdcb3b033a806f3c2eb72492da.zip |
Various appearance fixes
-rw-r--r-- | src/features/appearance/index.ts | 5 | ||||
-rw-r--r-- | src/styles/layout.scss | 43 | ||||
-rw-r--r-- | src/styles/tabs.scss | 5 | ||||
-rw-r--r-- | src/themes/dark/index.ts | 6 | ||||
-rw-r--r-- | src/themes/default/index.ts | 2 |
5 files changed, 28 insertions, 33 deletions
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 7bda62cba..4323fa7cc 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -38,7 +38,6 @@ function generateAccentStyle(accentColorStr) { | |||
38 | .theme__dark .app .sidebar .sidebar__button.is-active, | 38 | .theme__dark .app .sidebar .sidebar__button.is-active, |
39 | .sidebar .sidebar__button.is-muted, | 39 | .sidebar .sidebar__button.is-muted, |
40 | .sidebar .sidebar__button.is-active, | 40 | .sidebar .sidebar__button.is-active, |
41 | .tab-item.is-active, | ||
42 | .settings .account .invoices .invoices__action button, | 41 | .settings .account .invoices .invoices__action button, |
43 | .settings-navigation .settings-navigation__link.is-active .badge, | 42 | .settings-navigation .settings-navigation__link.is-active .badge, |
44 | a.link, | 43 | a.link, |
@@ -78,7 +77,7 @@ function generateAccentStyle(accentColorStr) { | |||
78 | border-right-color: ${accentColorStr}; | 77 | border-right-color: ${accentColorStr}; |
79 | } | 78 | } |
80 | 79 | ||
81 | .franz-form .franz-form__radio.is-selected { | 80 | .franz-form .franz-form__radio.is-selected, .tab-item.is-active { |
82 | border-color: ${accentColorStr}; | 81 | border-color: ${accentColorStr}; |
83 | } | 82 | } |
84 | 83 | ||
@@ -107,7 +106,7 @@ function generateAccentStyle(accentColorStr) { | |||
107 | } | 106 | } |
108 | 107 | ||
109 | .tab-item.is-active { | 108 | .tab-item.is-active { |
110 | background: ${accentColor.lighten(0.35).hex()}; | 109 | background: ${accentColor.lightness(90).hex()}; |
111 | } | 110 | } |
112 | `; | 111 | `; |
113 | } | 112 | } |
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 73201be48..abd38b506 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -35,7 +35,6 @@ html { | |||
35 | 35 | ||
36 | .sidebar__button { | 36 | .sidebar__button { |
37 | color: $dark-theme-gray-lighter; | 37 | color: $dark-theme-gray-lighter; |
38 | font-size: 22px; | ||
39 | 38 | ||
40 | &:hover, | 39 | &:hover, |
41 | &:active { | 40 | &:active { |
@@ -51,27 +50,6 @@ html { | |||
51 | opacity: 0.25; | 50 | opacity: 0.25; |
52 | filter: grayscale(1); | 51 | filter: grayscale(1); |
53 | } | 52 | } |
54 | |||
55 | .update-available { | ||
56 | align-items: center; | ||
57 | background: $theme-brand-danger; | ||
58 | border-radius: 20px; | ||
59 | bottom: 5px; | ||
60 | color: #fff; | ||
61 | display: flex; | ||
62 | justify-content: center; | ||
63 | padding: 0px 5px; | ||
64 | position: absolute; | ||
65 | right: 16px; | ||
66 | padding-top: 0; | ||
67 | font-size: 0px; | ||
68 | min-height: 15px; | ||
69 | min-width: 15px; | ||
70 | |||
71 | animation-name: pulse-danger; | ||
72 | animation-duration: 0.75s; | ||
73 | animation-iteration-count: 6; | ||
74 | } | ||
75 | } | 53 | } |
76 | } | 54 | } |
77 | 55 | ||
@@ -80,6 +58,27 @@ html { | |||
80 | } | 58 | } |
81 | } | 59 | } |
82 | 60 | ||
61 | .app .sidebar .sidebar__button .update-available { | ||
62 | align-items: center; | ||
63 | background: $theme-brand-danger; | ||
64 | border-radius: 20px; | ||
65 | bottom: 5px; | ||
66 | color: #fff; | ||
67 | display: flex; | ||
68 | justify-content: center; | ||
69 | padding: 0px 5px; | ||
70 | position: absolute; | ||
71 | right: 16px; | ||
72 | padding-top: 0; | ||
73 | font-size: 0px; | ||
74 | min-height: 15px; | ||
75 | min-width: 15px; | ||
76 | |||
77 | animation-name: pulse-danger; | ||
78 | animation-duration: 0.75s; | ||
79 | animation-iteration-count: 6; | ||
80 | } | ||
81 | |||
83 | body.win32:not(.isFullScreen) .app .app__content { | 82 | body.win32:not(.isFullScreen) .app .app__content { |
84 | height: calc(100% - 28px); | 83 | height: calc(100% - 28px); |
85 | } | 84 | } |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index c5111fa91..fbff544ed 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -14,9 +14,6 @@ | |||
14 | &.is-disabled .tab-item__icon { | 14 | &.is-disabled .tab-item__icon { |
15 | filter: grayscale(100%) opacity(0.2); | 15 | filter: grayscale(100%) opacity(0.2); |
16 | } | 16 | } |
17 | .tab-item__icon { | ||
18 | width: 34px; | ||
19 | } | ||
20 | } | 17 | } |
21 | 18 | ||
22 | .tabs { | 19 | .tabs { |
@@ -47,9 +44,9 @@ | |||
47 | $theme-brand-primary, | 44 | $theme-brand-primary, |
48 | $lightness: min(lightness($theme-brand-primary) * 1.35, 100) | 45 | $lightness: min(lightness($theme-brand-primary) * 1.35, 100) |
49 | ); | 46 | ); |
47 | border-color: $theme-brand-primary; | ||
50 | border-left-width: 4px; | 48 | border-left-width: 4px; |
51 | border-left-style: solid; | 49 | border-left-style: solid; |
52 | color: $theme-brand-primary; | ||
53 | 50 | ||
54 | .tab-item__icon { | 51 | .tab-item__icon { |
55 | margin-left: -4px; | 52 | margin-left: -4px; |
diff --git a/src/themes/dark/index.ts b/src/themes/dark/index.ts index aa132c743..dcdeef683 100644 --- a/src/themes/dark/index.ts +++ b/src/themes/dark/index.ts | |||
@@ -139,15 +139,15 @@ export default (brandPrimary: string) => { | |||
139 | }, | 139 | }, |
140 | listItem: { | 140 | listItem: { |
141 | border: color(drawerBg).lighten(0.2).hex(), | 141 | border: color(drawerBg).lighten(0.2).hex(), |
142 | hoverBackground: color(drawerBg).lighten(0.2).hex(), | 142 | hoverBackground: legacyStyles.darkThemeGrayDark, |
143 | activeBackground: defaultStyles.brandPrimary, | 143 | activeBackground: legacyStyles.darkThemeGrayDarker, |
144 | name: { | 144 | name: { |
145 | color: colorText, | 145 | color: colorText, |
146 | activeColor: 'white', | 146 | activeColor: 'white', |
147 | }, | 147 | }, |
148 | services: { | 148 | services: { |
149 | color: color(colorText).darken(0.5).hex(), | 149 | color: color(colorText).darken(0.5).hex(), |
150 | active: brandPrimaryColor.lighten(0.5).hex(), | 150 | active: color(colorText).darken(0.5).hex(), |
151 | }, | 151 | }, |
152 | }, | 152 | }, |
153 | }, | 153 | }, |
diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts index 80bcba766..e23b8b328 100644 --- a/src/themes/default/index.ts +++ b/src/themes/default/index.ts | |||
@@ -210,7 +210,7 @@ export default (brandPrimary: string) => { | |||
210 | hoverColor: legacyStyles.themeGrayLight, | 210 | hoverColor: legacyStyles.themeGrayLight, |
211 | }, | 211 | }, |
212 | listItem: { | 212 | listItem: { |
213 | hoverBackground: color(drawerBg).darken(0.01).hex(), | 213 | hoverBackground: color(drawerBg).darken(0.05).hex(), |
214 | activeBackground: legacyStyles.themeGrayLightest, | 214 | activeBackground: legacyStyles.themeGrayLightest, |
215 | border: color(drawerBg).darken(0.05).hex(), | 215 | border: color(drawerBg).darken(0.05).hex(), |
216 | name: { | 216 | name: { |