diff options
Diffstat (limited to 'src/styles/settings.scss')
-rw-r--r-- | src/styles/settings.scss | 235 |
1 files changed, 151 insertions, 84 deletions
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index a25759f48..501f97b98 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -1,69 +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 | .premium-info { | 80 | .legal { |
61 | background: $dark-theme-gray-darker; | 81 | color: $theme-gray-light; |
62 | border-width: 2px; | ||
63 | border-style: solid; | ||
64 | border-color: $theme-brand-primary; | ||
65 | } | 82 | } |
66 | .legal { color: $theme-gray-light; } | ||
67 | } | 83 | } |
68 | 84 | ||
69 | .settings-navigation { | 85 | .settings-navigation { |
@@ -75,7 +91,7 @@ | |||
75 | border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); | 91 | border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); |
76 | 92 | ||
77 | &:last-child { | 93 | &:last-child { |
78 | border: 0, | 94 | border: 0; |
79 | } | 95 | } |
80 | 96 | ||
81 | .badge { | 97 | .badge { |
@@ -93,7 +109,7 @@ | |||
93 | } | 109 | } |
94 | 110 | ||
95 | &.is-disabled { | 111 | &.is-disabled { |
96 | filter: grayscale(100%) opacity(.2); | 112 | filter: grayscale(100%) opacity(0.2); |
97 | } | 113 | } |
98 | 114 | ||
99 | &.is-active { | 115 | &.is-active { |
@@ -107,13 +123,15 @@ | |||
107 | } | 123 | } |
108 | } | 124 | } |
109 | 125 | ||
110 | .settings-navigation__action-badge { background: $theme-brand-danger; } | 126 | .settings-navigation__action-badge { |
127 | background: $theme-brand-danger; | ||
128 | } | ||
111 | } | 129 | } |
112 | } | 130 | } |
113 | 131 | ||
114 | .settings-wrapper { | 132 | .settings-wrapper { |
115 | align-items: center; | 133 | align-items: center; |
116 | background: rgba(black, .5); | 134 | background: rgba(black, 0.5); |
117 | display: flex; | 135 | display: flex; |
118 | height: 100%; | 136 | height: 100%; |
119 | left: 0; | 137 | left: 0; |
@@ -135,7 +153,7 @@ | |||
135 | 153 | ||
136 | .settings { | 154 | .settings { |
137 | border-radius: $theme-border-radius; | 155 | border-radius: $theme-border-radius; |
138 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | 156 | box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5); |
139 | display: flex; | 157 | display: flex; |
140 | height: 100%; | 158 | height: 100%; |
141 | max-height: 720px; | 159 | max-height: 720px; |
@@ -153,7 +171,7 @@ | |||
153 | height: auto; | 171 | height: auto; |
154 | border-radius: 0 $theme-border-radius $theme-border-radius 0; | 172 | border-radius: 0 $theme-border-radius $theme-border-radius 0; |
155 | overflow: hidden; | 173 | overflow: hidden; |
156 | background: #FFF; | 174 | background: #fff; |
157 | } | 175 | } |
158 | 176 | ||
159 | .settings__header { | 177 | .settings__header { |
@@ -163,7 +181,7 @@ | |||
163 | height: 50px; | 181 | height: 50px; |
164 | padding: 0 40px; | 182 | padding: 0 40px; |
165 | width: calc(100% - 60px); | 183 | width: calc(100% - 60px); |
166 | color: #FFF; | 184 | color: #fff; |
167 | 185 | ||
168 | h1 { | 186 | h1 { |
169 | @extend %headline; | 187 | @extend %headline; |
@@ -183,11 +201,13 @@ | |||
183 | transform: skew(15deg) rotate(2deg); | 201 | transform: skew(15deg) rotate(2deg); |
184 | } | 202 | } |
185 | 203 | ||
186 | .mdi { color: $theme-gray-light; } | 204 | .mdi { |
205 | color: $theme-gray-light; | ||
206 | } | ||
187 | } | 207 | } |
188 | 208 | ||
189 | .settings_titles { | 209 | .settings_titles { |
190 | display:inline-block; | 210 | display: inline-block; |
191 | } | 211 | } |
192 | 212 | ||
193 | .settings__body { | 213 | .settings__body { |
@@ -196,9 +216,13 @@ | |||
196 | overflow-y: scroll; | 216 | overflow-y: scroll; |
197 | padding: 25px 15px 15px 25px; | 217 | padding: 25px 15px 15px 25px; |
198 | 218 | ||
199 | .badge { margin-right: 10px; } | 219 | .badge { |
220 | margin-right: 10px; | ||
221 | } | ||
200 | 222 | ||
201 | &::-webkit-scrollbar { width: 8px; } | 223 | &::-webkit-scrollbar { |
224 | width: 8px; | ||
225 | } | ||
202 | 226 | ||
203 | /* Track */ | 227 | /* Track */ |
204 | &::-webkit-scrollbar-track { | 228 | &::-webkit-scrollbar-track { |
@@ -214,9 +238,16 @@ | |||
214 | -webkit-border-radius: 10px; | 238 | -webkit-border-radius: 10px; |
215 | } | 239 | } |
216 | 240 | ||
217 | &::-webkit-scrollbar-thumb:window-inactive { background: none; } | 241 | &::-webkit-scrollbar-thumb:window-inactive { |
218 | .service-flex-grid { display: flex; } | 242 | background: none; |
219 | .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 | } | ||
220 | 251 | ||
221 | .service-icon { | 252 | .service-icon { |
222 | float: right; | 253 | float: right; |
@@ -238,20 +269,28 @@ | |||
238 | .settings__close { | 269 | .settings__close { |
239 | background: $theme-brand-primary; | 270 | background: $theme-brand-primary; |
240 | // border-left: 1px solid darken($theme-brand-primary, 8%); | 271 | // border-left: 1px solid darken($theme-brand-primary, 8%); |
241 | color: #FFF; | 272 | color: #fff; |
242 | font-size: 20px; | 273 | font-size: 20px; |
243 | height: 50px; | 274 | height: 50px; |
244 | padding: 0 20px; | 275 | padding: 0 20px; |
245 | position: absolute; | 276 | position: absolute; |
246 | right: 0; | 277 | right: 0; |
247 | transition: background $theme-transition-time; | 278 | @media (prefers-reduced-motion: no-preference) { |
279 | transition: background $theme-transition-time; | ||
280 | } | ||
248 | cursor: pointer; | 281 | cursor: pointer; |
249 | 282 | ||
250 | &::before { cursor: pointer; } | 283 | &::before { |
251 | &:hover { background: darken($theme-brand-primary, 5%); } | 284 | cursor: pointer; |
285 | } | ||
286 | &:hover { | ||
287 | background: darken($theme-brand-primary, 5%); | ||
288 | } | ||
252 | } | 289 | } |
253 | 290 | ||
254 | .search-input { margin-bottom: 30px; } | 291 | .search-input { |
292 | margin-bottom: 30px; | ||
293 | } | ||
255 | 294 | ||
256 | &__options { | 295 | &__options { |
257 | flex: 1; | 296 | flex: 1; |
@@ -264,10 +303,12 @@ | |||
264 | h3 { | 303 | h3 { |
265 | color: $theme-gray-light; | 304 | color: $theme-gray-light; |
266 | font-weight: bold; | 305 | font-weight: bold; |
267 | letter-spacing: -.1px; | 306 | letter-spacing: -0.1px; |
268 | margin: 25px 0 15px; | 307 | margin: 25px 0 15px; |
269 | 308 | ||
270 | &:first-of-type { margin-top: 0; } | 309 | &:first-of-type { |
310 | margin-top: 0; | ||
311 | } | ||
271 | 312 | ||
272 | .badge { | 313 | .badge { |
273 | font-weight: normal; | 314 | font-weight: normal; |
@@ -308,14 +349,20 @@ | |||
308 | padding: 10px 20px; | 349 | padding: 10px 20px; |
309 | 350 | ||
310 | .franz-form__button { | 351 | .franz-form__button { |
311 | &[type='submit'] { margin-left: auto; } | 352 | &[type='submit'] { |
312 | &.franz-form__button--secondary { background: $theme-gray-light; } | 353 | margin-left: auto; |
354 | } | ||
355 | &.franz-form__button--secondary { | ||
356 | background: $theme-gray-light; | ||
357 | } | ||
313 | } | 358 | } |
314 | } | 359 | } |
315 | 360 | ||
316 | .settings__delete-button { right: 0; } | 361 | .settings__delete-button { |
362 | right: 0; | ||
363 | } | ||
317 | .settings__open-recipe-file-button { | 364 | .settings__open-recipe-file-button { |
318 | cursor:pointer; | 365 | cursor: pointer; |
319 | margin-right: 10px; | 366 | margin-right: 10px; |
320 | } | 367 | } |
321 | .settings__open-recipe-file-container { | 368 | .settings__open-recipe-file-container { |
@@ -336,7 +383,9 @@ | |||
336 | margin-bottom: 1em; | 383 | margin-bottom: 1em; |
337 | } | 384 | } |
338 | 385 | ||
339 | a.button { margin-top: 40px; } | 386 | a.button { |
387 | margin-top: 40px; | ||
388 | } | ||
340 | } | 389 | } |
341 | 390 | ||
342 | .account { | 391 | .account { |
@@ -349,8 +398,12 @@ | |||
349 | margin-bottom: 40px; | 398 | margin-bottom: 40px; |
350 | padding: 20px; | 399 | padding: 20px; |
351 | 400 | ||
352 | &.account__box--flex { display: flex; } | 401 | &.account__box--flex { |
353 | &.account__box--last { margin-bottom: 0; } | 402 | display: flex; |
403 | } | ||
404 | &.account__box--last { | ||
405 | margin-bottom: 0; | ||
406 | } | ||
354 | 407 | ||
355 | .auth__button { | 408 | .auth__button { |
356 | margin-top: 10px; | 409 | margin-top: 10px; |
@@ -366,38 +419,44 @@ | |||
366 | .account__info { | 419 | .account__info { |
367 | flex: 1; | 420 | flex: 1; |
368 | 421 | ||
369 | h2 { margin-bottom: 5px; } | 422 | h2 { |
370 | .badge { margin-top: 5px; } | 423 | margin-bottom: 5px; |
371 | .username { margin-right: 10 } | 424 | } |
425 | .badge { | ||
426 | margin-top: 5px; | ||
427 | } | ||
428 | .username { | ||
429 | margin-right: 10; | ||
430 | } | ||
372 | } | 431 | } |
373 | 432 | ||
374 | .account__subscription { | 433 | .account__subscription { |
375 | align-items: center; | 434 | align-items: center; |
376 | display: flex; | 435 | display: flex; |
377 | 436 | ||
378 | .badge { margin-left: 10px; } | 437 | .badge { |
379 | } | 438 | margin-left: 10px; |
380 | 439 | } | |
381 | .badge--premium { | ||
382 | margin-left: 1px; | ||
383 | position: relative; | ||
384 | top: -3px; | ||
385 | padding-top: 4px; | ||
386 | color: #FFF; | ||
387 | border-radius: 3px; | ||
388 | } | 440 | } |
389 | 441 | ||
390 | |||
391 | .manage-user-links { | 442 | .manage-user-links { |
392 | margin-top: 20px; | 443 | margin-top: 20px; |
393 | display: flex; | 444 | display: flex; |
394 | justify-content: space-between; | 445 | justify-content: space-between; |
395 | } | 446 | } |
396 | 447 | ||
397 | .account__subscription-button { margin-left: auto; } | 448 | .account__subscription-button { |
398 | .franz-form__button { white-space: nowrap; } | 449 | margin-left: auto; |
399 | div { height: auto; } | 450 | } |
400 | [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 | } | ||
401 | 460 | ||
402 | .invoices { | 461 | .invoices { |
403 | width: 100%; | 462 | width: 100%; |
@@ -415,7 +474,9 @@ | |||
415 | .invoices__action { | 474 | .invoices__action { |
416 | text-align: right; | 475 | text-align: right; |
417 | 476 | ||
418 | button { color: $theme-brand-primary; } | 477 | button { |
478 | color: $theme-brand-primary; | ||
479 | } | ||
419 | } | 480 | } |
420 | } | 481 | } |
421 | } | 482 | } |
@@ -425,16 +486,12 @@ | |||
425 | font-size: 40px; | 486 | font-size: 40px; |
426 | margin-bottom: 20px; | 487 | margin-bottom: 20px; |
427 | 488 | ||
428 | img { width: 40px; } | 489 | img { |
429 | } | 490 | width: 40px; |
430 | 491 | } | |
431 | .premium-info { | ||
432 | background: lighten($theme-brand-primary, 40%); | ||
433 | border-radius: $theme-border-radius; | ||
434 | padding: 20px; | ||
435 | } | 492 | } |
436 | 493 | ||
437 | .content-tabs .premium-info { | 494 | .content-tabs { |
438 | background: none; | 495 | background: none; |
439 | padding: 0; | 496 | padding: 0; |
440 | } | 497 | } |
@@ -454,8 +511,8 @@ | |||
454 | width: 240px; | 511 | width: 240px; |
455 | height: 100%; | 512 | height: 100%; |
456 | align-self: center; | 513 | align-self: center; |
457 | border-top-left-radius: $theme-border-radius;; | 514 | border-top-left-radius: $theme-border-radius; |
458 | border-bottom-left-radius: $theme-border-radius;; | 515 | border-bottom-left-radius: $theme-border-radius; |
459 | overflow: hidden; | 516 | overflow: hidden; |
460 | 517 | ||
461 | .settings-navigation__link { | 518 | .settings-navigation__link { |
@@ -467,12 +524,15 @@ | |||
467 | height: 51px; | 524 | height: 51px; |
468 | padding: 0 20px; | 525 | padding: 0 20px; |
469 | text-decoration: none; | 526 | text-decoration: none; |
470 | 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 | } | ||
471 | border-bottom: 1px solid darken($theme-gray-lightest, 3%); | 531 | border-bottom: 1px solid darken($theme-gray-lightest, 3%); |
472 | 532 | ||
473 | .badge { | 533 | .badge { |
474 | background: $theme-gray-light; | 534 | background: $theme-gray-light; |
475 | color: #FFF; | 535 | color: #fff; |
476 | } | 536 | } |
477 | 537 | ||
478 | &:hover { | 538 | &:hover { |
@@ -480,26 +540,31 @@ | |||
480 | 540 | ||
481 | .badge { | 541 | .badge { |
482 | background: $theme-gray-light; | 542 | background: $theme-gray-light; |
483 | color: #FFF; | 543 | color: #fff; |
484 | } | 544 | } |
485 | } | 545 | } |
486 | 546 | ||
487 | &.is-active { | 547 | &.is-active { |
488 | background: $theme-brand-primary; | 548 | background: $theme-brand-primary; |
489 | color: #FFF; | 549 | color: #fff; |
490 | 550 | ||
491 | .badge { | 551 | .badge { |
492 | background: #FFF; | 552 | background: #fff; |
493 | color: $theme-brand-primary; | 553 | color: $theme-brand-primary; |
494 | } | 554 | } |
495 | } | 555 | } |
496 | } | 556 | } |
497 | 557 | ||
498 | .settings-navigation__expander { flex: 1; } | 558 | .settings-navigation__expander { |
559 | flex: 1; | ||
560 | } | ||
499 | 561 | ||
500 | .badge { | 562 | .badge { |
501 | display: initial; | 563 | display: initial; |
502 | 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 | } | ||
503 | } | 568 | } |
504 | 569 | ||
505 | .settings-navigation__action-badge { | 570 | .settings-navigation__action-badge { |
@@ -513,5 +578,7 @@ | |||
513 | } | 578 | } |
514 | 579 | ||
515 | .settings__support-badges { | 580 | .settings__support-badges { |
516 | a { margin-right: 10px } | 581 | a { |
582 | margin-right: 10px; | ||
583 | } | ||
517 | } | 584 | } |