diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-08-10 19:04:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-10 22:34:54 +0530 |
commit | 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch) | |
tree | 9f21b062f0c188f2c3ddfbb6594670982610aadf /src/styles/settings.scss | |
parent | refactor: Move platform-specific logic for shortcut keys into common location. (diff) | |
download | ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.gz ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.zst ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.zip |
feat: follow OS reduced motion setting (#1757)
- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference
Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/styles/settings.scss')
-rw-r--r-- | src/styles/settings.scss | 213 |
1 files changed, 151 insertions, 62 deletions
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 5d4e81a4f..501f97b98 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -1,63 +1,85 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | %headline { | 3 | %headline { |
4 | color: #FFF; | 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: #FFF } | 9 | a { |
10 | color: #fff; | ||
11 | } | ||
10 | } | 12 | } |
11 | 13 | ||
12 | %headline__dark { | 14 | %headline__dark { |
13 | color: #FFF; | 15 | color: #fff; |
14 | font-size: 20px; | 16 | font-size: 20px; |
15 | font-weight: 400; | 17 | font-weight: 400; |
16 | letter-spacing: -1px; | 18 | letter-spacing: -1px; |
17 | 19 | ||
18 | a { color: #FFF } | 20 | a { |
21 | color: #fff; | ||
22 | } | ||
19 | } | 23 | } |
20 | 24 | ||
21 | .theme__dark { | 25 | .theme__dark { |
22 | .settings-wrapper { background: rgba($dark-theme-black, .8); } | 26 | .settings-wrapper { |
27 | background: rgba($dark-theme-black, 0.8); | ||
28 | } | ||
23 | 29 | ||
24 | .settings { | 30 | .settings { |
25 | .settings__header { | 31 | .settings__header { |
26 | .mdi { color: #FFF } | 32 | .mdi { |
33 | color: #fff; | ||
34 | } | ||
27 | } | 35 | } |
28 | 36 | ||
29 | .settings__main { | 37 | .settings__main { |
30 | background: $dark-theme-gray-darkest; | 38 | background: $dark-theme-gray-darkest; |
31 | } | 39 | } |
32 | 40 | ||
33 | .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; } | 41 | .settings__body::-webkit-scrollbar-thumb { |
42 | background: $dark-theme-gray; | ||
43 | } | ||
34 | 44 | ||
35 | .settings__close { | 45 | .settings__close { |
36 | color: #FFF; | 46 | color: #fff; |
37 | } | 47 | } |
38 | 48 | ||
39 | &__settings-group h3 { color: $dark-theme-gray-lightest; } | 49 | &__settings-group h3 { |
50 | color: $dark-theme-gray-lightest; | ||
51 | } | ||
40 | 52 | ||
41 | .settings__message { | 53 | .settings__message { |
42 | border-top: 1px solid $theme-gray-lighter; | 54 | border-top: 1px solid $theme-gray-lighter; |
43 | color: $dark-theme-gray-lightest; | 55 | color: $dark-theme-gray-lightest; |
44 | 56 | ||
45 | .mdi { color: $dark-theme-gray-lightest; } | 57 | .mdi { |
58 | color: $dark-theme-gray-lightest; | ||
59 | } | ||
46 | } | 60 | } |
47 | 61 | ||
48 | .settings__help { color: $dark-theme-gray-lightest; } | 62 | .settings__help { |
63 | color: $dark-theme-gray-lightest; | ||
64 | } | ||
49 | 65 | ||
50 | .settings__controls { | 66 | .settings__controls { |
51 | background: $dark-theme-gray-darker; | 67 | background: $dark-theme-gray-darker; |
52 | 68 | ||
53 | .franz-form__button.franz-form__button--secondary { background: $theme-gray-light; } | 69 | .franz-form__button.franz-form__button--secondary { |
70 | background: $theme-gray-light; | ||
71 | } | ||
54 | } | 72 | } |
55 | 73 | ||
56 | .account { | 74 | .account { |
57 | .account__box { background: $dark-theme-gray-darker; } | 75 | .account__box { |
76 | background: $dark-theme-gray-darker; | ||
77 | } | ||
58 | } | 78 | } |
59 | 79 | ||
60 | .legal { color: $theme-gray-light; } | 80 | .legal { |
81 | color: $theme-gray-light; | ||
82 | } | ||
61 | } | 83 | } |
62 | 84 | ||
63 | .settings-navigation { | 85 | .settings-navigation { |
@@ -69,7 +91,7 @@ | |||
69 | border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); | 91 | border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); |
70 | 92 | ||
71 | &:last-child { | 93 | &:last-child { |
72 | border: 0, | 94 | border: 0; |
73 | } | 95 | } |
74 | 96 | ||
75 | .badge { | 97 | .badge { |
@@ -87,7 +109,7 @@ | |||
87 | } | 109 | } |
88 | 110 | ||
89 | &.is-disabled { | 111 | &.is-disabled { |
90 | filter: grayscale(100%) opacity(.2); | 112 | filter: grayscale(100%) opacity(0.2); |
91 | } | 113 | } |
92 | 114 | ||
93 | &.is-active { | 115 | &.is-active { |
@@ -101,13 +123,15 @@ | |||
101 | } | 123 | } |
102 | } | 124 | } |
103 | 125 | ||
104 | .settings-navigation__action-badge { background: $theme-brand-danger; } | 126 | .settings-navigation__action-badge { |
127 | background: $theme-brand-danger; | ||
128 | } | ||
105 | } | 129 | } |
106 | } | 130 | } |
107 | 131 | ||
108 | .settings-wrapper { | 132 | .settings-wrapper { |
109 | align-items: center; | 133 | align-items: center; |
110 | background: rgba(black, .5); | 134 | background: rgba(black, 0.5); |
111 | display: flex; | 135 | display: flex; |
112 | height: 100%; | 136 | height: 100%; |
113 | left: 0; | 137 | left: 0; |
@@ -129,7 +153,7 @@ | |||
129 | 153 | ||
130 | .settings { | 154 | .settings { |
131 | border-radius: $theme-border-radius; | 155 | border-radius: $theme-border-radius; |
132 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | 156 | box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5); |
133 | display: flex; | 157 | display: flex; |
134 | height: 100%; | 158 | height: 100%; |
135 | max-height: 720px; | 159 | max-height: 720px; |
@@ -147,7 +171,7 @@ | |||
147 | height: auto; | 171 | height: auto; |
148 | border-radius: 0 $theme-border-radius $theme-border-radius 0; | 172 | border-radius: 0 $theme-border-radius $theme-border-radius 0; |
149 | overflow: hidden; | 173 | overflow: hidden; |
150 | background: #FFF; | 174 | background: #fff; |
151 | } | 175 | } |
152 | 176 | ||
153 | .settings__header { | 177 | .settings__header { |
@@ -157,7 +181,7 @@ | |||
157 | height: 50px; | 181 | height: 50px; |
158 | padding: 0 40px; | 182 | padding: 0 40px; |
159 | width: calc(100% - 60px); | 183 | width: calc(100% - 60px); |
160 | color: #FFF; | 184 | color: #fff; |
161 | 185 | ||
162 | h1 { | 186 | h1 { |
163 | @extend %headline; | 187 | @extend %headline; |
@@ -177,11 +201,13 @@ | |||
177 | transform: skew(15deg) rotate(2deg); | 201 | transform: skew(15deg) rotate(2deg); |
178 | } | 202 | } |
179 | 203 | ||
180 | .mdi { color: $theme-gray-light; } | 204 | .mdi { |
205 | color: $theme-gray-light; | ||
206 | } | ||
181 | } | 207 | } |
182 | 208 | ||
183 | .settings_titles { | 209 | .settings_titles { |
184 | display:inline-block; | 210 | display: inline-block; |
185 | } | 211 | } |
186 | 212 | ||
187 | .settings__body { | 213 | .settings__body { |
@@ -190,9 +216,13 @@ | |||
190 | overflow-y: scroll; | 216 | overflow-y: scroll; |
191 | padding: 25px 15px 15px 25px; | 217 | padding: 25px 15px 15px 25px; |
192 | 218 | ||
193 | .badge { margin-right: 10px; } | 219 | .badge { |
220 | margin-right: 10px; | ||
221 | } | ||
194 | 222 | ||
195 | &::-webkit-scrollbar { width: 8px; } | 223 | &::-webkit-scrollbar { |
224 | width: 8px; | ||
225 | } | ||
196 | 226 | ||
197 | /* Track */ | 227 | /* Track */ |
198 | &::-webkit-scrollbar-track { | 228 | &::-webkit-scrollbar-track { |
@@ -208,9 +238,16 @@ | |||
208 | -webkit-border-radius: 10px; | 238 | -webkit-border-radius: 10px; |
209 | } | 239 | } |
210 | 240 | ||
211 | &::-webkit-scrollbar-thumb:window-inactive { background: none; } | 241 | &::-webkit-scrollbar-thumb:window-inactive { |
212 | .service-flex-grid { display: flex; } | 242 | background: none; |
213 | .service-name,.user-agent { flex: 1px; } | 243 | } |
244 | .service-flex-grid { | ||
245 | display: flex; | ||
246 | } | ||
247 | .service-name, | ||
248 | .user-agent { | ||
249 | flex: 1px; | ||
250 | } | ||
214 | 251 | ||
215 | .service-icon { | 252 | .service-icon { |
216 | float: right; | 253 | float: right; |
@@ -232,20 +269,28 @@ | |||
232 | .settings__close { | 269 | .settings__close { |
233 | background: $theme-brand-primary; | 270 | background: $theme-brand-primary; |
234 | // border-left: 1px solid darken($theme-brand-primary, 8%); | 271 | // border-left: 1px solid darken($theme-brand-primary, 8%); |
235 | color: #FFF; | 272 | color: #fff; |
236 | font-size: 20px; | 273 | font-size: 20px; |
237 | height: 50px; | 274 | height: 50px; |
238 | padding: 0 20px; | 275 | padding: 0 20px; |
239 | position: absolute; | 276 | position: absolute; |
240 | right: 0; | 277 | right: 0; |
241 | transition: background $theme-transition-time; | 278 | @media (prefers-reduced-motion: no-preference) { |
279 | transition: background $theme-transition-time; | ||
280 | } | ||
242 | cursor: pointer; | 281 | cursor: pointer; |
243 | 282 | ||
244 | &::before { cursor: pointer; } | 283 | &::before { |
245 | &:hover { background: darken($theme-brand-primary, 5%); } | 284 | cursor: pointer; |
285 | } | ||
286 | &:hover { | ||
287 | background: darken($theme-brand-primary, 5%); | ||
288 | } | ||
246 | } | 289 | } |
247 | 290 | ||
248 | .search-input { margin-bottom: 30px; } | 291 | .search-input { |
292 | margin-bottom: 30px; | ||
293 | } | ||
249 | 294 | ||
250 | &__options { | 295 | &__options { |
251 | flex: 1; | 296 | flex: 1; |
@@ -258,10 +303,12 @@ | |||
258 | h3 { | 303 | h3 { |
259 | color: $theme-gray-light; | 304 | color: $theme-gray-light; |
260 | font-weight: bold; | 305 | font-weight: bold; |
261 | letter-spacing: -.1px; | 306 | letter-spacing: -0.1px; |
262 | margin: 25px 0 15px; | 307 | margin: 25px 0 15px; |
263 | 308 | ||
264 | &:first-of-type { margin-top: 0; } | 309 | &:first-of-type { |
310 | margin-top: 0; | ||
311 | } | ||
265 | 312 | ||
266 | .badge { | 313 | .badge { |
267 | font-weight: normal; | 314 | font-weight: normal; |
@@ -302,14 +349,20 @@ | |||
302 | padding: 10px 20px; | 349 | padding: 10px 20px; |
303 | 350 | ||
304 | .franz-form__button { | 351 | .franz-form__button { |
305 | &[type='submit'] { margin-left: auto; } | 352 | &[type='submit'] { |
306 | &.franz-form__button--secondary { background: $theme-gray-light; } | 353 | margin-left: auto; |
354 | } | ||
355 | &.franz-form__button--secondary { | ||
356 | background: $theme-gray-light; | ||
357 | } | ||
307 | } | 358 | } |
308 | } | 359 | } |
309 | 360 | ||
310 | .settings__delete-button { right: 0; } | 361 | .settings__delete-button { |
362 | right: 0; | ||
363 | } | ||
311 | .settings__open-recipe-file-button { | 364 | .settings__open-recipe-file-button { |
312 | cursor:pointer; | 365 | cursor: pointer; |
313 | margin-right: 10px; | 366 | margin-right: 10px; |
314 | } | 367 | } |
315 | .settings__open-recipe-file-container { | 368 | .settings__open-recipe-file-container { |
@@ -330,7 +383,9 @@ | |||
330 | margin-bottom: 1em; | 383 | margin-bottom: 1em; |
331 | } | 384 | } |
332 | 385 | ||
333 | a.button { margin-top: 40px; } | 386 | a.button { |
387 | margin-top: 40px; | ||
388 | } | ||
334 | } | 389 | } |
335 | 390 | ||
336 | .account { | 391 | .account { |
@@ -343,8 +398,12 @@ | |||
343 | margin-bottom: 40px; | 398 | margin-bottom: 40px; |
344 | padding: 20px; | 399 | padding: 20px; |
345 | 400 | ||
346 | &.account__box--flex { display: flex; } | 401 | &.account__box--flex { |
347 | &.account__box--last { margin-bottom: 0; } | 402 | display: flex; |
403 | } | ||
404 | &.account__box--last { | ||
405 | margin-bottom: 0; | ||
406 | } | ||
348 | 407 | ||
349 | .auth__button { | 408 | .auth__button { |
350 | margin-top: 10px; | 409 | margin-top: 10px; |
@@ -360,16 +419,24 @@ | |||
360 | .account__info { | 419 | .account__info { |
361 | flex: 1; | 420 | flex: 1; |
362 | 421 | ||
363 | h2 { margin-bottom: 5px; } | 422 | h2 { |
364 | .badge { margin-top: 5px; } | 423 | margin-bottom: 5px; |
365 | .username { margin-right: 10 } | 424 | } |
425 | .badge { | ||
426 | margin-top: 5px; | ||
427 | } | ||
428 | .username { | ||
429 | margin-right: 10; | ||
430 | } | ||
366 | } | 431 | } |
367 | 432 | ||
368 | .account__subscription { | 433 | .account__subscription { |
369 | align-items: center; | 434 | align-items: center; |
370 | display: flex; | 435 | display: flex; |
371 | 436 | ||
372 | .badge { margin-left: 10px; } | 437 | .badge { |
438 | margin-left: 10px; | ||
439 | } | ||
373 | } | 440 | } |
374 | 441 | ||
375 | .manage-user-links { | 442 | .manage-user-links { |
@@ -378,10 +445,18 @@ | |||
378 | justify-content: space-between; | 445 | justify-content: space-between; |
379 | } | 446 | } |
380 | 447 | ||
381 | .account__subscription-button { margin-left: auto; } | 448 | .account__subscription-button { |
382 | .franz-form__button { white-space: nowrap; } | 449 | margin-left: auto; |
383 | div { height: auto; } | 450 | } |
384 | [data-type="franz-button"] div { height: 20px } | 451 | .franz-form__button { |
452 | white-space: nowrap; | ||
453 | } | ||
454 | div { | ||
455 | height: auto; | ||
456 | } | ||
457 | [data-type='franz-button'] div { | ||
458 | height: 20px; | ||
459 | } | ||
385 | 460 | ||
386 | .invoices { | 461 | .invoices { |
387 | width: 100%; | 462 | width: 100%; |
@@ -399,7 +474,9 @@ | |||
399 | .invoices__action { | 474 | .invoices__action { |
400 | text-align: right; | 475 | text-align: right; |
401 | 476 | ||
402 | button { color: $theme-brand-primary; } | 477 | button { |
478 | color: $theme-brand-primary; | ||
479 | } | ||
403 | } | 480 | } |
404 | } | 481 | } |
405 | } | 482 | } |
@@ -409,7 +486,9 @@ | |||
409 | font-size: 40px; | 486 | font-size: 40px; |
410 | margin-bottom: 20px; | 487 | margin-bottom: 20px; |
411 | 488 | ||
412 | img { width: 40px; } | 489 | img { |
490 | width: 40px; | ||
491 | } | ||
413 | } | 492 | } |
414 | 493 | ||
415 | .content-tabs { | 494 | .content-tabs { |
@@ -432,8 +511,8 @@ | |||
432 | width: 240px; | 511 | width: 240px; |
433 | height: 100%; | 512 | height: 100%; |
434 | align-self: center; | 513 | align-self: center; |
435 | border-top-left-radius: $theme-border-radius;; | 514 | border-top-left-radius: $theme-border-radius; |
436 | border-bottom-left-radius: $theme-border-radius;; | 515 | border-bottom-left-radius: $theme-border-radius; |
437 | overflow: hidden; | 516 | overflow: hidden; |
438 | 517 | ||
439 | .settings-navigation__link { | 518 | .settings-navigation__link { |
@@ -445,12 +524,15 @@ | |||
445 | height: 51px; | 524 | height: 51px; |
446 | padding: 0 20px; | 525 | padding: 0 20px; |
447 | text-decoration: none; | 526 | text-decoration: none; |
448 | transition: background $theme-transition-time, color $theme-transition-time; | 527 | @media (prefers-reduced-motion: no-preference) { |
528 | transition: background $theme-transition-time, | ||
529 | color $theme-transition-time; | ||
530 | } | ||
449 | border-bottom: 1px solid darken($theme-gray-lightest, 3%); | 531 | border-bottom: 1px solid darken($theme-gray-lightest, 3%); |
450 | 532 | ||
451 | .badge { | 533 | .badge { |
452 | background: $theme-gray-light; | 534 | background: $theme-gray-light; |
453 | color: #FFF; | 535 | color: #fff; |
454 | } | 536 | } |
455 | 537 | ||
456 | &:hover { | 538 | &:hover { |
@@ -458,26 +540,31 @@ | |||
458 | 540 | ||
459 | .badge { | 541 | .badge { |
460 | background: $theme-gray-light; | 542 | background: $theme-gray-light; |
461 | color: #FFF; | 543 | color: #fff; |
462 | } | 544 | } |
463 | } | 545 | } |
464 | 546 | ||
465 | &.is-active { | 547 | &.is-active { |
466 | background: $theme-brand-primary; | 548 | background: $theme-brand-primary; |
467 | color: #FFF; | 549 | color: #fff; |
468 | 550 | ||
469 | .badge { | 551 | .badge { |
470 | background: #FFF; | 552 | background: #fff; |
471 | color: $theme-brand-primary; | 553 | color: $theme-brand-primary; |
472 | } | 554 | } |
473 | } | 555 | } |
474 | } | 556 | } |
475 | 557 | ||
476 | .settings-navigation__expander { flex: 1; } | 558 | .settings-navigation__expander { |
559 | flex: 1; | ||
560 | } | ||
477 | 561 | ||
478 | .badge { | 562 | .badge { |
479 | display: initial; | 563 | display: initial; |
480 | transition: background $theme-transition-time, color $theme-transition-time; | 564 | @media (prefers-reduced-motion: no-preference) { |
565 | transition: background $theme-transition-time, | ||
566 | color $theme-transition-time; | ||
567 | } | ||
481 | } | 568 | } |
482 | 569 | ||
483 | .settings-navigation__action-badge { | 570 | .settings-navigation__action-badge { |
@@ -491,5 +578,7 @@ | |||
491 | } | 578 | } |
492 | 579 | ||
493 | .settings__support-badges { | 580 | .settings__support-badges { |
494 | a { margin-right: 10px } | 581 | a { |
582 | margin-right: 10px; | ||
583 | } | ||
495 | } | 584 | } |