diff options
author | vantezzen <properly@protonmail.com> | 2019-09-07 15:50:23 +0200 |
---|---|---|
committer | vantezzen <properly@protonmail.com> | 2019-09-07 15:50:23 +0200 |
commit | e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e (patch) | |
tree | b8314e4155503b135dcb07e8b4a0e847e25c19cf /src/styles | |
parent | Update CHANGELOG.md (diff) | |
parent | Update CHANGELOG.md (diff) | |
download | ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.tar.gz ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.tar.zst ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.zip |
Merge branch 'master' of https://github.com/meetfranz/franz into franz-5.3.0
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/auth.scss | 2 | ||||
-rw-r--r-- | src/styles/layout.scss | 16 | ||||
-rw-r--r-- | src/styles/recipes.scss | 3 | ||||
-rw-r--r-- | src/styles/reset.scss | 1 | ||||
-rw-r--r-- | src/styles/settings.scss | 72 |
5 files changed, 58 insertions, 36 deletions
diff --git a/src/styles/auth.scss b/src/styles/auth.scss index cbc720559..44c752677 100644 --- a/src/styles/auth.scss +++ b/src/styles/auth.scss | |||
@@ -9,7 +9,7 @@ | |||
9 | } | 9 | } |
10 | 10 | ||
11 | .auth__logo.auth__logo--sm { | 11 | .auth__logo.auth__logo--sm { |
12 | border: 4px solid $dark-theme-black; | 12 | border: none; |
13 | box-shadow: 0 0 6px rgba($dark-theme-black, .5); | 13 | box-shadow: 0 0 6px rgba($dark-theme-black, .5); |
14 | } | 14 | } |
15 | 15 | ||
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 9f226b61c..b18bd6dcf 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -32,14 +32,22 @@ html { overflow: hidden; } | |||
32 | .app-loader .app-loader__title { color: $dark-theme-gray-lightest; } | 32 | .app-loader .app-loader__title { color: $dark-theme-gray-lightest; } |
33 | } | 33 | } |
34 | 34 | ||
35 | body.win32:not(.isFullScreen) .app .app__content { | ||
36 | height: calc(100% - 28px); | ||
37 | } | ||
38 | |||
35 | .app { | 39 | .app { |
36 | display: flex; | 40 | .app__content { |
37 | flex-direction: column; | 41 | display: flex; |
42 | width: calc(100% + 300px); | ||
43 | } | ||
38 | 44 | ||
39 | .app__content { display: flex; } | 45 | .app__main-content { |
46 | display: flex; | ||
47 | width: 100%; | ||
48 | } | ||
40 | 49 | ||
41 | .app__service { | 50 | .app__service { |
42 | // position: relative; | ||
43 | display: flex; | 51 | display: flex; |
44 | flex: 1; | 52 | flex: 1; |
45 | flex-direction: column; | 53 | flex-direction: column; |
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss index 84222e1fe..5bdc60a57 100644 --- a/src/styles/recipes.scss +++ b/src/styles/recipes.scss | |||
@@ -2,6 +2,7 @@ | |||
2 | 2 | ||
3 | .theme__dark .recipe-teaser { | 3 | .theme__dark .recipe-teaser { |
4 | background-color: $dark-theme-gray-dark; | 4 | background-color: $dark-theme-gray-dark; |
5 | color: $dark-theme-text-color; | ||
5 | 6 | ||
6 | &:hover { background-color: $dark-theme-gray; } | 7 | &:hover { background-color: $dark-theme-gray; } |
7 | } | 8 | } |
@@ -12,7 +13,7 @@ | |||
12 | display: flex; | 13 | display: flex; |
13 | flex-flow: row wrap; | 14 | flex-flow: row wrap; |
14 | height: auto; | 15 | height: auto; |
15 | min-height: 70%; | 16 | // min-height: 70%; |
16 | 17 | ||
17 | &.recipes__list--disabled { | 18 | &.recipes__list--disabled { |
18 | filter: grayscale(100%); | 19 | filter: grayscale(100%); |
diff --git a/src/styles/reset.scss b/src/styles/reset.scss index f46ede4a2..d87ce652a 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss | |||
@@ -51,7 +51,6 @@ button { | |||
51 | padding: 0; | 51 | padding: 0; |
52 | 52 | ||
53 | &:focus { outline: 0; } | 53 | &:focus { outline: 0; } |
54 | .theme__dark & { color: $dark-theme-gray-smoke; } | ||
55 | } | 54 | } |
56 | 55 | ||
57 | html { | 56 | html { |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 1baff8b54..bb95ab5d2 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -1,45 +1,39 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | %headline { | 3 | %headline { |
4 | color: $theme-gray-light; | 4 | color: #FFF; |
5 | font-size: 20px; | 5 | font-size: 20px; |
6 | font-weight: 400; | 6 | font-weight: 400; |
7 | letter-spacing: -1px; | 7 | letter-spacing: -1px; |
8 | 8 | ||
9 | a { color: $theme-gray-light; } | 9 | a { color: #FFF } |
10 | } | 10 | } |
11 | 11 | ||
12 | %headline__dark { | 12 | %headline__dark { |
13 | color: $dark-theme-gray-lightest; | 13 | color: #FFF; |
14 | font-size: 20px; | ||
15 | font-weight: 400; | ||
16 | letter-spacing: -1px; | ||
14 | 17 | ||
15 | a { color: $dark-theme-gray-lightest; } | 18 | a { color: #FFF } |
16 | } | 19 | } |
17 | 20 | ||
18 | .theme__dark { | 21 | .theme__dark { |
19 | .settings-wrapper { background: rgba($dark-theme-black, .8); } | 22 | .settings-wrapper { background: rgba($dark-theme-black, .8); } |
20 | 23 | ||
21 | .settings { | 24 | .settings { |
22 | background: $dark-theme-gray-darkest; | ||
23 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | ||
24 | |||
25 | .settings__header { | 25 | .settings__header { |
26 | background: $dark-theme-gray-darker; | 26 | .mdi { color: #FFF } |
27 | 27 | } | |
28 | h1, | ||
29 | .settings__header-item { @extend %headline__dark; } | ||
30 | 28 | ||
31 | .separator { border-right: 1px solid $dark-theme-gray-dark; } | 29 | .settings__main { |
32 | .mdi { color: $dark-theme-gray-lightest; } | 30 | background: $dark-theme-gray-darkest; |
33 | } | 31 | } |
34 | 32 | ||
35 | .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; } | 33 | .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; } |
36 | 34 | ||
37 | .settings__close { | 35 | .settings__close { |
38 | background: $dark-theme-gray-darker; | 36 | color: #FFF; |
39 | border-left: none; | ||
40 | color: $dark-theme-gray-lightest; | ||
41 | |||
42 | &:hover { background: darken($dark-theme-gray-darker, 5%); } | ||
43 | } | 37 | } |
44 | 38 | ||
45 | &__settings-group h3 { color: $dark-theme-gray-lightest; } | 39 | &__settings-group h3 { color: $dark-theme-gray-lightest; } |
@@ -76,6 +70,11 @@ | |||
76 | 70 | ||
77 | .settings-navigation__link { | 71 | .settings-navigation__link { |
78 | color: $dark-theme-gray-lightest; | 72 | color: $dark-theme-gray-lightest; |
73 | border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); | ||
74 | |||
75 | &:last-child { | ||
76 | border: 0, | ||
77 | } | ||
79 | 78 | ||
80 | .badge { | 79 | .badge { |
81 | background: $dark-theme-gray-lighter; | 80 | background: $dark-theme-gray-lighter; |
@@ -129,15 +128,14 @@ | |||
129 | } | 128 | } |
130 | 129 | ||
131 | .settings { | 130 | .settings { |
132 | background: #FFF; | ||
133 | border-radius: $theme-border-radius; | 131 | border-radius: $theme-border-radius; |
134 | box-shadow: 0 20px 50px rgba(black, .5); | 132 | // box-shadow: 0 20px 50px rgba(black, .5); |
135 | display: flex; | 133 | display: flex; |
136 | height: 100%; | 134 | height: 100%; |
137 | max-height: 720px; | 135 | max-height: 720px; |
138 | max-width: 900px; | 136 | max-width: 900px; |
139 | min-height: 400px; | 137 | min-height: 400px; |
140 | overflow: hidden; | 138 | // overflow: hidden; |
141 | position: relative; | 139 | position: relative; |
142 | width: 100%; | 140 | width: 100%; |
143 | z-index: 9999; | 141 | z-index: 9999; |
@@ -147,25 +145,32 @@ | |||
147 | flex: 1; | 145 | flex: 1; |
148 | flex-direction: column; | 146 | flex-direction: column; |
149 | height: auto; | 147 | height: auto; |
148 | border-radius: $theme-border-radius; | ||
149 | overflow: hidden; | ||
150 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | ||
151 | background: #FFF; | ||
150 | } | 152 | } |
151 | 153 | ||
152 | .settings__header { | 154 | .settings__header { |
153 | align-items: center; | 155 | align-items: center; |
154 | background: $theme-gray-lighter; | 156 | background: $theme-brand-primary; |
155 | display: flex; | 157 | display: flex; |
156 | height: 50px; | 158 | height: 50px; |
157 | padding: 0 40px; | 159 | padding: 0 40px; |
158 | width: calc(100% - 60px); | 160 | width: calc(100% - 60px); |
161 | color: #FFF; | ||
159 | 162 | ||
160 | h1 { | 163 | h1 { |
161 | @extend %headline; | 164 | @extend %headline; |
162 | margin: 0; | 165 | margin: 0; |
163 | } | 166 | } |
164 | 167 | ||
165 | .settings__header-item { @extend %headline; } | 168 | .settings__header-item { |
169 | @extend %headline; | ||
170 | } | ||
166 | 171 | ||
167 | .separator { | 172 | .separator { |
168 | border-right: 1px solid darken($theme-gray-lighter, 10%); | 173 | border-right: 1px solid darken($theme-brand-primary, 8%); |
169 | height: 100%; | 174 | height: 100%; |
170 | margin: 0 15px; | 175 | margin: 0 15px; |
171 | transform: skew(15deg) rotate(2deg); | 176 | transform: skew(15deg) rotate(2deg); |
@@ -218,17 +223,18 @@ | |||
218 | } | 223 | } |
219 | 224 | ||
220 | .settings__close { | 225 | .settings__close { |
221 | background: $theme-gray-lighter; | 226 | background: $theme-brand-primary; |
222 | border-left: 1px solid darken($theme-gray-lighter, 5%); | 227 | border-left: 1px solid darken($theme-brand-primary, 8%); |
223 | color: $theme-gray-light; | 228 | color: #FFF; |
224 | font-size: 20px; | 229 | font-size: 20px; |
225 | height: 50px; | 230 | height: 50px; |
226 | padding: 0 20px; | 231 | padding: 0 20px; |
227 | position: absolute; | 232 | position: absolute; |
228 | right: 0; | 233 | right: 0; |
229 | transition: background $theme-transition-time; | 234 | transition: background $theme-transition-time; |
235 | border-top-right-radius: $theme-border-radius; | ||
230 | 236 | ||
231 | &:hover { background: darken($theme-gray-lighter, 5%); } | 237 | &:hover { background: darken($theme-brand-primary, 5%); } |
232 | } | 238 | } |
233 | 239 | ||
234 | .search-input { margin-bottom: 30px; } | 240 | .search-input { margin-bottom: 30px; } |
@@ -360,6 +366,7 @@ | |||
360 | .account__subscription-button { margin-left: auto; } | 366 | .account__subscription-button { margin-left: auto; } |
361 | .franz-form__button { white-space: nowrap; } | 367 | .franz-form__button { white-space: nowrap; } |
362 | div { height: auto; } | 368 | div { height: auto; } |
369 | [data-type="franz-button"] div { height: 100% } | ||
363 | 370 | ||
364 | .invoices { | 371 | .invoices { |
365 | width: 100%; | 372 | width: 100%; |
@@ -413,7 +420,13 @@ | |||
413 | background: $theme-gray-lightest; | 420 | background: $theme-gray-lightest; |
414 | flex-direction: column; | 421 | flex-direction: column; |
415 | height: auto; | 422 | height: auto; |
416 | width: 200px; | 423 | width: 240px; |
424 | height: calc(100% - 100px); | ||
425 | align-self: center; | ||
426 | border-top-left-radius: $theme-border-radius;; | ||
427 | border-bottom-left-radius: $theme-border-radius;; | ||
428 | overflow: hidden; | ||
429 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | ||
417 | 430 | ||
418 | .settings-navigation__link { | 431 | .settings-navigation__link { |
419 | align-items: center; | 432 | align-items: center; |
@@ -425,6 +438,7 @@ | |||
425 | padding: 0 20px; | 438 | padding: 0 20px; |
426 | text-decoration: none; | 439 | text-decoration: none; |
427 | transition: background $theme-transition-time, color $theme-transition-time; | 440 | transition: background $theme-transition-time, color $theme-transition-time; |
441 | border-bottom: 1px solid darken($theme-gray-lightest, 3%); | ||
428 | 442 | ||
429 | &:hover { | 443 | &:hover { |
430 | background: darken($theme-gray-lightest, 5%); | 444 | background: darken($theme-gray-lightest, 5%); |