diff options
author | 2022-01-02 18:53:57 +0100 | |
---|---|---|
committer | 2022-01-02 18:53:57 +0100 | |
commit | 198ed91304df91fa7918fa29c5baffc77770905d (patch) | |
tree | 849ba17724ca730fab1a032519ed0bd03c75274d | |
parent | #512 Show updates tab for Mac, Windows and AppImage only (diff) | |
download | ferdium-app-198ed91304df91fa7918fa29c5baffc77770905d.tar.gz ferdium-app-198ed91304df91fa7918fa29c5baffc77770905d.tar.zst ferdium-app-198ed91304df91fa7918fa29c5baffc77770905d.zip |
Iterate on settings appearance
-rw-r--r-- | src/features/appearance/index.ts | 4 | ||||
-rw-r--r-- | src/styles/settings.scss | 12 |
2 files changed, 10 insertions, 6 deletions
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 122fa2411..ea19b9759 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -99,6 +99,10 @@ function generateAccentStyle(accentColorStr) { | |||
99 | background: ${darkerColorStr}; | 99 | background: ${darkerColorStr}; |
100 | } | 100 | } |
101 | 101 | ||
102 | .settings__close { | ||
103 | border-color: ${darkerColorStr}!important; | ||
104 | } | ||
105 | |||
102 | .theme__dark .franz-form__button.franz-form__button--inverted, | 106 | .theme__dark .franz-form__button.franz-form__button--inverted, |
103 | .franz-form__button.franz-form__button--inverted { | 107 | .franz-form__button.franz-form__button--inverted { |
104 | background: none; | 108 | background: none; |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 00744df88..e4a3581e4 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -153,13 +153,11 @@ | |||
153 | 153 | ||
154 | .settings { | 154 | .settings { |
155 | border-radius: $theme-border-radius; | 155 | border-radius: $theme-border-radius; |
156 | box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5); | ||
157 | display: flex; | 156 | display: flex; |
158 | height: 100%; | 157 | height: 100%; |
159 | max-height: 720px; | 158 | max-height: 720px; |
160 | max-width: 900px; | 159 | max-width: 900px; |
161 | min-height: 400px; | 160 | min-height: 400px; |
162 | overflow: hidden; | ||
163 | position: relative; | 161 | position: relative; |
164 | width: 100%; | 162 | width: 100%; |
165 | z-index: 9999; | 163 | z-index: 9999; |
@@ -169,7 +167,8 @@ | |||
169 | flex: 1; | 167 | flex: 1; |
170 | flex-direction: column; | 168 | flex-direction: column; |
171 | height: auto; | 169 | height: auto; |
172 | border-radius: 0 $theme-border-radius $theme-border-radius 0; | 170 | border-radius: $theme-border-radius; |
171 | box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5); | ||
173 | overflow: hidden; | 172 | overflow: hidden; |
174 | background: #fff; | 173 | background: #fff; |
175 | } | 174 | } |
@@ -273,7 +272,7 @@ | |||
273 | 272 | ||
274 | .settings__close { | 273 | .settings__close { |
275 | background: $theme-brand-primary; | 274 | background: $theme-brand-primary; |
276 | // border-left: 1px solid darken($theme-brand-primary, 8%); | 275 | border-left: 1px solid darken($theme-brand-primary, 8%); |
277 | color: #fff; | 276 | color: #fff; |
278 | font-size: 20px; | 277 | font-size: 20px; |
279 | height: 50px; | 278 | height: 50px; |
@@ -283,6 +282,7 @@ | |||
283 | @media (prefers-reduced-motion: no-preference) { | 282 | @media (prefers-reduced-motion: no-preference) { |
284 | transition: background $theme-transition-time; | 283 | transition: background $theme-transition-time; |
285 | } | 284 | } |
285 | border-top-right-radius: $theme-border-radius; | ||
286 | cursor: pointer; | 286 | cursor: pointer; |
287 | 287 | ||
288 | &::before { | 288 | &::before { |
@@ -513,14 +513,14 @@ | |||
513 | flex-direction: column; | 513 | flex-direction: column; |
514 | height: auto; | 514 | height: auto; |
515 | width: 240px; | 515 | width: 240px; |
516 | height: 100%; | 516 | height: calc(100% - 100px); |
517 | align-self: center; | 517 | align-self: center; |
518 | border-top-left-radius: $theme-border-radius; | 518 | border-top-left-radius: $theme-border-radius; |
519 | border-bottom-left-radius: $theme-border-radius; | 519 | border-bottom-left-radius: $theme-border-radius; |
520 | overflow: hidden; | 520 | overflow: hidden; |
521 | box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5); | ||
521 | 522 | ||
522 | .settings-navigation__link { | 523 | .settings-navigation__link { |
523 | position: relative; | ||
524 | align-items: center; | 524 | align-items: center; |
525 | justify-content: space-between; | 525 | justify-content: space-between; |
526 | color: $theme-text-color; | 526 | color: $theme-text-color; |