diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-11-22 14:14:25 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-11-22 14:14:25 +0100 |
commit | 46b8c8c4b3a5b80e0187b284abc84566a7e784db (patch) | |
tree | 7fd378bcdd18e78c42dfeb61a15f89fd10106046 /src/styles | |
parent | ADD features loading spinner (diff) | |
parent | feat(App): Add option to enable dark mode for supported services (diff) | |
download | ferdium-app-46b8c8c4b3a5b80e0187b284abc84566a7e784db.tar.gz ferdium-app-46b8c8c4b3a5b80e0187b284abc84566a7e784db.tar.zst ferdium-app-46b8c8c4b3a5b80e0187b284abc84566a7e784db.zip |
Merge branch 'develop' into feature/features-api
Diffstat (limited to 'src/styles')
32 files changed, 1058 insertions, 963 deletions
diff --git a/src/styles/animations.scss b/src/styles/animations.scss index 1e49af207..b121af7d2 100644 --- a/src/styles/animations.scss +++ b/src/styles/animations.scss | |||
@@ -1,49 +1,41 @@ | |||
1 | // FadeIn | 1 | // FadeIn |
2 | .fadeIn-appear { | 2 | .fadeIn-appear { opacity: .01; } |
3 | opacity: 0.01; | ||
4 | } | ||
5 | 3 | ||
6 | .fadeIn-appear.fadeIn-appear-active { | 4 | .fadeIn-appear.fadeIn-appear-active { |
7 | opacity: 1; | 5 | opacity: 1; |
8 | transition: opacity 0.5s ease-out; | 6 | transition: opacity .5s ease-out; |
9 | } | 7 | } |
10 | 8 | ||
11 | .fadeIn-enter { | 9 | .fadeIn-enter { |
12 | opacity: 0.01; | 10 | opacity: .01; |
13 | transition: opacity 0.5s ease-out; | 11 | transition: opacity .5s ease-out; |
14 | } | 12 | } |
15 | 13 | ||
16 | .fadeIn-leave { | 14 | .fadeIn-leave { opacity: 1; } |
17 | opacity: 1; | ||
18 | } | ||
19 | 15 | ||
20 | .fadeIn-leave.fadeIn-leave-active { | 16 | .fadeIn-leave.fadeIn-leave-active { |
21 | opacity: 0.01; | 17 | opacity: .01; |
22 | transition: opacity 300ms ease-in; | 18 | transition: opacity 300ms ease-in; |
23 | } | 19 | } |
24 | 20 | ||
25 | // FadeIn Fast | 21 | // FadeIn Fast |
26 | .fadeIn-fast-appear { | 22 | .fadeIn-fast-appear { opacity: .01; } |
27 | opacity: 0.01; | ||
28 | } | ||
29 | 23 | ||
30 | .fadeIn-fast-appear.fadeIn-fast-appear-active { | 24 | .fadeIn-fast-appear.fadeIn-fast-appear-active { |
31 | opacity: 1; | 25 | opacity: 1; |
32 | transition: opacity 0.25s ease-out; | 26 | transition: opacity .25s ease-out; |
33 | } | 27 | } |
34 | 28 | ||
35 | .fadeIn-fast-enter { | 29 | .fadeIn-fast-enter { |
36 | opacity: 0.01; | 30 | opacity: .01; |
37 | transition: opacity 0.25s ease-out; | 31 | transition: opacity .25s ease-out; |
38 | } | 32 | } |
39 | 33 | ||
40 | .fadeIn-fast-leave { | 34 | .fadeIn-fast-leave { opacity: 1; } |
41 | opacity: 1; | ||
42 | } | ||
43 | 35 | ||
44 | .fadeIn-fast-leave.fadeIn-fast-leave-active { | 36 | .fadeIn-fast-leave.fadeIn-fast-leave-active { |
45 | opacity: 0.01; | 37 | opacity: .01; |
46 | transition: opacity 0.25s ease-in; | 38 | transition: opacity .25s ease-in; |
47 | } | 39 | } |
48 | 40 | ||
49 | // Slide down | 41 | // Slide down |
@@ -54,37 +46,35 @@ | |||
54 | 46 | ||
55 | .slideDown-appear.slideDown-appear-active { | 47 | .slideDown-appear.slideDown-appear-active { |
56 | max-height: 500px; | 48 | max-height: 500px; |
57 | transition: max-height 0.5s ease-out; | 49 | transition: max-height .5s ease-out; |
58 | } | 50 | } |
59 | 51 | ||
60 | .slideDown-enter { | 52 | .slideDown-enter { |
61 | max-height: 0; | 53 | max-height: 0; |
62 | transition: max-height 0.5s ease-out; | 54 | transition: max-height .5s ease-out; |
63 | } | 55 | } |
64 | 56 | ||
65 | // Slide up | 57 | // Slide up |
66 | .slideUp-appear { | 58 | .slideUp-appear { |
67 | transform: translateY(20px); | ||
68 | opacity: 0; | 59 | opacity: 0; |
60 | transform: translateY(20px); | ||
69 | } | 61 | } |
70 | 62 | ||
71 | .slideUp-appear.slideUp-appear-active { | 63 | .slideUp-appear.slideUp-appear-active { |
72 | transform: translateY(0px); | ||
73 | opacity: 1; | 64 | opacity: 1; |
74 | transition: all 0.3s ease-out; | 65 | transform: translateY(0px); |
66 | transition: all .3s ease-out; | ||
75 | } | 67 | } |
76 | 68 | ||
77 | .slideUp-enter { | 69 | .slideUp-enter { |
78 | transform: translateY(20px); | ||
79 | opacity: 0; | 70 | opacity: 0; |
80 | transition: all 0.3s ease-out; | 71 | transform: translateY(20px); |
72 | transition: all .3s ease-out; | ||
81 | } | 73 | } |
82 | 74 | ||
83 | .slideUp-leave { | 75 | .slideUp-leave { opacity: 1; } |
84 | opacity: 1; | ||
85 | } | ||
86 | 76 | ||
87 | .slideUp-leave.slideUp-leave-active { | 77 | .slideUp-leave.slideUp-leave-active { |
88 | opacity: 0.01; | 78 | opacity: .01; |
89 | transition: opacity 300ms ease-in; | 79 | transition: opacity 300ms ease-in; |
90 | } | 80 | } |
diff --git a/src/styles/auth.scss b/src/styles/auth.scss index 9ad71867c..54e264dc6 100644 --- a/src/styles/auth.scss +++ b/src/styles/auth.scss | |||
@@ -1,144 +1,135 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .auth { | ||
4 | background: $dark-theme-gray-darkest; | ||
5 | |||
6 | .auth__container { | ||
7 | background: $dark-theme-gray-darker; | ||
8 | box-shadow: 0 0 50px rgba($dark-theme-black, .2); | ||
9 | } | ||
10 | |||
11 | .auth__logo.auth__logo--sm { | ||
12 | border: 4px solid $dark-theme-black; | ||
13 | box-shadow: 0 0 6px rgba($dark-theme-black, .5); | ||
14 | } | ||
15 | |||
16 | .auth__links { | ||
17 | background: $dark-theme-gray-dark; | ||
18 | |||
19 | a { color: $dark-theme-text-color; } | ||
20 | } | ||
21 | |||
22 | .legal { | ||
23 | color: $dark-theme-text-color; | ||
24 | |||
25 | a { color: $dark-theme-gray-lightest; } | ||
26 | } | ||
27 | } | ||
28 | |||
3 | .auth { | 29 | .auth { |
30 | background: $theme-brand-primary; | ||
4 | display: flex; | 31 | display: flex; |
5 | justify-content: center; | 32 | justify-content: center; |
6 | background: $theme-brand-primary; | ||
7 | 33 | ||
8 | .auth__layout { | 34 | .auth__layout { |
9 | width: 100%; | 35 | width: 100%; |
10 | &>div>span { | ||
11 | width: 100%; | ||
12 | } | ||
13 | // display: flex; | ||
14 | // align-items: center; | ||
15 | // justify-content: center; | ||
16 | // flex-direction: column; | ||
17 | |||
18 | // @media only screen and (max-height : 700px) { | ||
19 | // margin: 100px 0; | ||
20 | // } | ||
21 | 36 | ||
22 | &>div { | 37 | & > div { |
38 | align-items: center; | ||
23 | display: flex; | 39 | display: flex; |
24 | justify-content: center; | 40 | justify-content: center; |
25 | align-items: center; | ||
26 | 41 | ||
27 | &>span { | 42 | & > span { |
28 | position: absolute; | 43 | position: absolute; |
44 | width: 100%; | ||
29 | } | 45 | } |
30 | } | 46 | } |
31 | } | 47 | } |
32 | 48 | ||
33 | .auth__container { | 49 | .auth__container { |
34 | position: relative; | ||
35 | width: 350px; | ||
36 | height: auto; | ||
37 | margin: 40px auto 0 auto; | ||
38 | background: #FFF; | 50 | background: #FFF; |
39 | // padding: 20px; | ||
40 | border-radius: $theme-border-radius; | 51 | border-radius: $theme-border-radius; |
41 | box-shadow: 0 0 50px rgba(black, 0.2); | 52 | box-shadow: 0 0 50px rgba(black, .2); |
53 | height: auto; | ||
54 | margin: 40px auto 0; | ||
55 | position: relative; | ||
56 | width: 350px; | ||
42 | 57 | ||
43 | &.auth__container--signup { | 58 | &.auth__container--signup { width: 450px; } |
44 | width: 450px; | ||
45 | // margin-left: auto; | ||
46 | // margin-right: auto; | ||
47 | } | ||
48 | } | 59 | } |
49 | 60 | ||
50 | .auth__logo { | 61 | .auth__logo { |
62 | border-radius: $theme-border-radius; | ||
51 | display: block; | 63 | display: block; |
52 | width: 150px; | ||
53 | height: auto; | 64 | height: auto; |
54 | margin: -105px auto 20px auto; | 65 | margin: -105px auto 20px auto; |
55 | border-radius: $theme-border-radius; | 66 | width: 150px; |
56 | 67 | ||
57 | &.auth__logo--sm { | 68 | &.auth__logo--sm { |
58 | border: 4px solid #FFF; | 69 | border: 4px solid #FFF; |
59 | box-shadow: 0 0 6px rgba(black, 0.5); | ||
60 | border-radius: 100%; | 70 | border-radius: 100%; |
71 | box-shadow: 0 0 6px rgba(black, .5); | ||
61 | } | 72 | } |
62 | } | 73 | } |
63 | 74 | ||
64 | .auth__form { | 75 | .auth__form { |
65 | padding: 20px; | 76 | padding: 20px; |
66 | 77 | ||
67 | h1 { | 78 | h1 { text-align: center; } |
68 | text-align: center; | ||
69 | } | ||
70 | } | 79 | } |
71 | 80 | ||
72 | .auth__button { | 81 | .auth__button { |
73 | width: 100%; | 82 | width: 100%; |
74 | 83 | ||
75 | &.auth__button--skip { | 84 | &.auth__button--skip { margin: 10px auto 0; } |
76 | margin: 10px auto 0; | ||
77 | } | ||
78 | } | 85 | } |
79 | 86 | ||
80 | .auth__links { | 87 | .auth__links { |
81 | padding: 20px; | ||
82 | background: $theme-gray-lighter; | 88 | background: $theme-gray-lighter; |
83 | border-bottom-left-radius: $theme-border-radius; | 89 | border-bottom-left-radius: $theme-border-radius; |
84 | border-bottom-right-radius: $theme-border-radius; | 90 | border-bottom-right-radius: $theme-border-radius; |
91 | padding: 20px; | ||
85 | 92 | ||
86 | a { | 93 | a { |
87 | display: block; | 94 | display: block; |
88 | text-align: center; | ||
89 | color: $theme-gray; | 95 | color: $theme-gray; |
90 | margin-bottom: 8px; | 96 | margin-bottom: 8px; |
97 | text-align: center; | ||
91 | 98 | ||
92 | &:last-of-type { | 99 | &:last-of-type { margin-bottom: 0; } |
93 | margin-bottom: 0; | ||
94 | } | ||
95 | } | 100 | } |
96 | } | 101 | } |
97 | 102 | ||
98 | .auth__adlk { | 103 | .auth__adlk { |
104 | bottom: 15px; | ||
99 | position: absolute; | 105 | position: absolute; |
100 | right: 25px; | 106 | right: 25px; |
101 | bottom: 15px; | ||
102 | 107 | ||
103 | img { | 108 | img { width: 65px; } |
104 | width: 65px; | ||
105 | } | ||
106 | } | 109 | } |
107 | 110 | ||
108 | .auth__letter { | 111 | .auth__letter { margin-bottom: 30px; } |
109 | margin-bottom: 30px; | 112 | .scroll-container { z-index: 10; } |
110 | } | 113 | .info-bar { position: absolute; } |
111 | |||
112 | .scroll-container { | ||
113 | z-index: 10; | ||
114 | } | ||
115 | |||
116 | .info-bar { | ||
117 | position: absolute; | ||
118 | } | ||
119 | 114 | ||
120 | &__scroll-container { | 115 | &__scroll-container { |
121 | overflow: scroll; | ||
122 | width: 100%; | ||
123 | max-height: 100vh; | 116 | max-height: 100vh; |
124 | padding: 80px 0; | 117 | padding: 80px 0; |
118 | overflow: scroll; | ||
119 | width: 100%; | ||
125 | } | 120 | } |
126 | 121 | ||
127 | .available-services { | 122 | .available-services { margin-bottom: 15px; } |
128 | margin-bottom: 15px; | ||
129 | } | ||
130 | 123 | ||
131 | .unavailable-services { | 124 | .unavailable-services { |
132 | margin: 15px 0; | 125 | margin: 15px 0; |
133 | 126 | ||
134 | p { | 127 | p { text-transform: capitalize; } |
135 | text-transform: capitalize; | ||
136 | } | ||
137 | } | 128 | } |
138 | 129 | ||
139 | .legal { | 130 | .legal { |
140 | text-align: center; | ||
141 | margin-top: 20px; | ||
142 | color: $theme-gray-light; | 131 | color: $theme-gray-light; |
132 | margin-top: 20px; | ||
133 | text-align: center; | ||
143 | } | 134 | } |
144 | } | 135 | } |
diff --git a/src/styles/badge.scss b/src/styles/badge.scss index 18a653118..f9fac039a 100644 --- a/src/styles/badge.scss +++ b/src/styles/badge.scss | |||
@@ -1,11 +1,24 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .badge { | ||
4 | background: $dark-theme-gray; | ||
5 | border-radius: $theme-border-radius-small; | ||
6 | color: $dark-theme-gray-lightest; | ||
7 | |||
8 | &.badge--primary, | ||
9 | &.badge--premium { | ||
10 | background: $theme-brand-primary; | ||
11 | color: $dark-theme-gray-smoke; | ||
12 | } | ||
13 | } | ||
14 | |||
15 | |||
3 | .badge { | 16 | .badge { |
4 | font-size: 14px; | 17 | background: $theme-gray-lighter; |
18 | border-radius: $theme-border-radius; | ||
5 | display: inline-block; | 19 | display: inline-block; |
20 | font-size: 14px; | ||
6 | padding: 5px 10px; | 21 | padding: 5px 10px; |
7 | border-radius: $theme-border-radius; | ||
8 | background: $theme-gray-lighter; | ||
9 | 22 | ||
10 | &.badge--primary, | 23 | &.badge--primary, |
11 | &.badge--premium { | 24 | &.badge--premium { |
diff --git a/src/styles/button.scss b/src/styles/button.scss index 8d2adbbcc..a66345114 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -1,71 +1,94 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .franz-form__button { | ||
4 | background: $theme-brand-primary; | ||
5 | color: $dark-theme-text-color; | ||
6 | |||
7 | &:hover { background: darken($theme-brand-primary, 5%); } | ||
8 | &:active { background: lighten($theme-brand-primary, 5%); } | ||
9 | |||
10 | &.franz-form__button--secondary { | ||
11 | background: $dark-theme-gray-lighter; | ||
12 | color: $dark-theme-text-color; | ||
13 | |||
14 | &:hover { background: lighten($dark-theme-gray-lighter, 10%); } | ||
15 | &:active { background: lighten($dark-theme-gray-lighter, 20%); } | ||
16 | } | ||
17 | |||
18 | &.franz-form__button--danger { | ||
19 | background: $theme-brand-danger; | ||
20 | |||
21 | &:hover { background: darken($theme-brand-danger, 5%); } | ||
22 | &:active { background: lighten($theme-brand-danger, 5%); } | ||
23 | } | ||
24 | |||
25 | &.franz-form__button--warning { | ||
26 | background: $theme-brand-warning; | ||
27 | |||
28 | &:hover { background: darken($theme-brand-warning, 5%); } | ||
29 | &:active { background: lighten($theme-brand-warning, 5%); } | ||
30 | } | ||
31 | |||
32 | &.franz-form__button--inverted { | ||
33 | border: 2px solid $theme-brand-primary; | ||
34 | color: $theme-brand-primary; | ||
35 | |||
36 | &:hover { | ||
37 | background: darken($theme-brand-primary, 5%); | ||
38 | color: $dark-theme-text-color; | ||
39 | } | ||
40 | } | ||
41 | |||
42 | &:disabled { opacity: .5; } | ||
43 | } | ||
44 | |||
3 | .franz-form__button { | 45 | .franz-form__button { |
4 | position: relative; | ||
5 | background: $theme-brand-primary; | 46 | background: $theme-brand-primary; |
47 | border-radius: 3px; | ||
6 | display: block; | 48 | display: block; |
7 | padding: 10px 20px; | ||
8 | color: #FFF; | 49 | color: #FFF; |
9 | border-radius: 3px; | 50 | padding: 10px 20px; |
10 | transition: background 0.5s; | 51 | position: relative; |
52 | transition: background .5s; | ||
11 | text-align: center; | 53 | text-align: center; |
12 | 54 | ||
13 | &:hover { | 55 | &:hover { background: darken($theme-brand-primary, 5%) } |
14 | background: darken($theme-brand-primary, 5%); | ||
15 | } | ||
16 | 56 | ||
17 | &:active { | 57 | &:active { |
18 | transition: none; | ||
19 | background: lighten($theme-brand-primary, 5%); | 58 | background: lighten($theme-brand-primary, 5%); |
59 | transition: none; | ||
20 | } | 60 | } |
21 | 61 | ||
22 | &:disabled { | 62 | &:disabled { opacity: .2; } |
23 | opacity: 0.2; | ||
24 | } | ||
25 | 63 | ||
26 | &.franz-form__button--secondary { | 64 | &.franz-form__button--secondary { |
27 | background: $theme-gray-lighter; | 65 | background: $theme-gray-lighter; |
28 | color: $theme-gray; | 66 | color: $theme-gray; |
29 | 67 | ||
30 | &:hover { | 68 | &:hover { background: darken($theme-gray-lighter, 5%); } |
31 | background: darken($theme-gray-lighter, 5%); | 69 | &:active { background: lighten($theme-gray-lighter, 5%); } |
32 | } | ||
33 | |||
34 | &:active { | ||
35 | background: lighten($theme-gray-lighter, 5%); | ||
36 | } | ||
37 | } | 70 | } |
38 | 71 | ||
39 | &.franz-form__button--danger { | 72 | &.franz-form__button--danger { |
40 | background: $theme-brand-danger; | 73 | background: $theme-brand-danger; |
41 | 74 | ||
42 | &:hover { | 75 | &:hover { background: darken($theme-brand-danger, 5%); } |
43 | background: darken($theme-brand-danger, 5%); | 76 | &:active { background: lighten($theme-brand-danger, 5%); } |
44 | } | ||
45 | |||
46 | &:active { | ||
47 | background: lighten($theme-brand-danger, 5%); | ||
48 | } | ||
49 | } | 77 | } |
50 | 78 | ||
51 | &.franz-form__button--warning { | 79 | &.franz-form__button--warning { |
52 | background: $theme-brand-warning; | 80 | background: $theme-brand-warning; |
53 | 81 | ||
54 | &:hover { | 82 | &:hover { background: darken($theme-brand-warning, 5%); } |
55 | background: darken($theme-brand-warning, 5%); | 83 | &:active { background: lighten($theme-brand-warning, 5%); } |
56 | } | ||
57 | |||
58 | &:active { | ||
59 | background: lighten($theme-brand-warning, 5%); | ||
60 | } | ||
61 | } | 84 | } |
62 | 85 | ||
63 | &.franz-form__button--inverted { | 86 | &.franz-form__button--inverted { |
64 | background: none; | 87 | background: none; |
65 | padding: 10px 20px; | ||
66 | border: 2px solid $theme-brand-primary; | 88 | border: 2px solid $theme-brand-primary; |
67 | color: $theme-brand-primary; | 89 | color: $theme-brand-primary; |
68 | transition: background 0.5s, color 0.5s; | 90 | padding: 10px 20px; |
91 | transition: background .5s, color .5s; | ||
69 | 92 | ||
70 | &:hover { | 93 | &:hover { |
71 | background: darken($theme-brand-primary, 5%); | 94 | background: darken($theme-brand-primary, 5%); |
@@ -74,11 +97,11 @@ | |||
74 | } | 97 | } |
75 | 98 | ||
76 | .loader { | 99 | .loader { |
100 | display: inline-block; | ||
101 | height: 12px; | ||
102 | margin-right: 5px; | ||
77 | position: relative; | 103 | position: relative; |
78 | width: 20px; | 104 | width: 20px; |
79 | height: 12px; | ||
80 | z-index: 9999; | 105 | z-index: 9999; |
81 | display: inline-block; | ||
82 | margin-right: 5px; | ||
83 | } | 106 | } |
84 | } | 107 | } |
diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 5d8302c28..4411a0e81 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss | |||
@@ -1,22 +1,38 @@ | |||
1 | $theme-brand-primary: #3498db; | 1 | $theme-brand-primary: #3498db; |
2 | $theme-brand-success: #5cb85c; | 2 | $theme-brand-success: #5cb85c; |
3 | $theme-brand-info: #5bc0de; | 3 | $theme-brand-info: #5bc0de; |
4 | $theme-brand-warning: #FF9F00; | 4 | $theme-brand-warning: #FF9F00; |
5 | $theme-brand-danger: #d9534f; | 5 | $theme-brand-danger: #d9534f; |
6 | 6 | ||
7 | $theme-gray-dark: #373a3c; | 7 | $theme-gray-dark: #373a3c; |
8 | $theme-gray: #55595c; | 8 | $theme-gray: #55595c; |
9 | $theme-gray-light: #818a91; | 9 | $theme-gray-light: #818a91; |
10 | $theme-gray-lighter: #eceeef; | 10 | $theme-gray-lighter: #eceeef; |
11 | $theme-gray-lightest: #f7f7f9; | 11 | $theme-gray-lightest: #f7f7f9; |
12 | 12 | ||
13 | $theme-border-radius: 6px; | 13 | $theme-border-radius: 6px; |
14 | $theme-border-radius-small: 3px; | 14 | $theme-border-radius-small: 3px; |
15 | 15 | ||
16 | $theme-sidebar-width: 68px; | 16 | $theme-sidebar-width: 68px; |
17 | 17 | ||
18 | $theme-text-color: $theme-gray-dark; | 18 | $theme-text-color: $theme-gray-dark; |
19 | 19 | ||
20 | $theme-transition-time: 0.5s; | 20 | $theme-transition-time: .5s; |
21 | 21 | ||
22 | $theme-inset-shadow: inset 0 2px 5px rgba(0,0,0,0.03); | 22 | $theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, .03); |
23 | |||
24 | // Dark Theme | ||
25 | $dark-theme-black: #1A1A1A; | ||
26 | |||
27 | $dark-theme-gray-darkest: #1E1E1E; | ||
28 | $dark-theme-gray-darker: #2D2F31; | ||
29 | $dark-theme-gray-dark: #383A3B; | ||
30 | |||
31 | $dark-theme-gray: #47494B; | ||
32 | |||
33 | $dark-theme-gray-light: #515355; | ||
34 | $dark-theme-gray-lighter: #8a8b8b; | ||
35 | $dark-theme-gray-lightest: #FFF; | ||
36 | |||
37 | $dark-theme-gray-smoke: #CED0D1; | ||
38 | $dark-theme-text-color: #FFF; | ||
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss index 47dfea2c4..ca3820fb4 100644 --- a/src/styles/content-tabs.scss +++ b/src/styles/content-tabs.scss | |||
@@ -2,53 +2,43 @@ | |||
2 | 2 | ||
3 | .content-tabs { | 3 | .content-tabs { |
4 | .content-tabs__tabs { | 4 | .content-tabs__tabs { |
5 | display: flex; | ||
6 | border-top-left-radius: $theme-border-radius-small; | 5 | border-top-left-radius: $theme-border-radius-small; |
7 | border-top-right-radius: $theme-border-radius-small; | 6 | border-top-right-radius: $theme-border-radius-small; |
7 | display: flex; | ||
8 | overflow: hidden; | 8 | overflow: hidden; |
9 | 9 | ||
10 | .content-tabs__item { | 10 | .content-tabs__item { |
11 | padding: 10px; | ||
12 | flex: 1; | ||
13 | // border: 1px solid $theme-gray-lightest; | ||
14 | color: $theme-gray-dark; | ||
15 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); | 11 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); |
16 | border-right: 1px solid $theme-gray-lighter; | 12 | border-right: 1px solid $theme-gray-lighter; |
13 | color: $theme-gray-dark; | ||
14 | flex: 1; | ||
15 | padding: 10px; | ||
17 | transition: background $theme-transition-time; | 16 | transition: background $theme-transition-time; |
18 | 17 | ||
19 | &:last-of-type { | 18 | &:last-of-type { border-right: 0; } |
20 | border-right: 0; | ||
21 | } | ||
22 | 19 | ||
23 | &.is-active { | 20 | &.is-active { |
24 | background: $theme-brand-primary; | 21 | background: $theme-brand-primary; |
25 | color: #FFF; | ||
26 | box-shadow: none; | 22 | box-shadow: none; |
23 | color: #FFF; | ||
27 | } | 24 | } |
28 | } | 25 | } |
29 | } | 26 | } |
30 | 27 | ||
31 | .content-tabs__content { | 28 | .content-tabs__content { |
32 | padding: 20px 20px; | 29 | background: $theme-gray-lightest; |
33 | border-bottom-left-radius: $theme-border-radius-small; | 30 | border-bottom-left-radius: $theme-border-radius-small; |
34 | border-bottom-right-radius: $theme-border-radius-small; | 31 | border-bottom-right-radius: $theme-border-radius-small; |
35 | background: $theme-gray-lightest; | 32 | padding: 20px 20px; |
36 | 33 | ||
37 | .content-tabs__item { | 34 | .content-tabs__item { |
38 | top: 0; | ||
39 | display: none; | 35 | display: none; |
36 | top: 0; | ||
40 | 37 | ||
41 | &.is-active { | 38 | &.is-active { display: block; } |
42 | display: block; | ||
43 | } | ||
44 | } | ||
45 | |||
46 | .franz-form__input-wrapper { | ||
47 | background: #FFF; | ||
48 | } | 39 | } |
49 | 40 | ||
50 | .franz-form__field:last-of-type { | 41 | .franz-form__input-wrapper { background: #FFF; } |
51 | margin-bottom: 0; | 42 | .franz-form__field:last-of-type { margin-bottom: 0; } |
52 | } | ||
53 | } | 43 | } |
54 | } | 44 | } |
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss index 06176a7af..31300c227 100644 --- a/src/styles/image-upload.scss +++ b/src/styles/image-upload.scss | |||
@@ -1,74 +1,89 @@ | |||
1 | .theme__dark { | ||
2 | .image-upload { | ||
3 | background: $dark-theme-gray-darker; | ||
4 | border: 1px solid $dark-theme-gray-light; | ||
5 | color: $dark-theme-gray-lighter; | ||
6 | |||
7 | &__action { | ||
8 | &-background { background: rgba($dark-theme-black, .7); } | ||
9 | |||
10 | button { | ||
11 | color: $dark-theme-gray-lightest; | ||
12 | |||
13 | .mdi { color: $dark-theme-gray-lightest; } | ||
14 | } | ||
15 | } | ||
16 | } | ||
17 | |||
18 | .image-upload-wrapper .mdi { color: $dark-theme-gray-light; } | ||
19 | } | ||
20 | |||
1 | .image-upload { | 21 | .image-upload { |
2 | position: absolute; | 22 | background: $theme-gray-lightest; |
3 | width: 140px; | ||
4 | height: 140px; | ||
5 | border: 1px solid $theme-gray-lighter; | 23 | border: 1px solid $theme-gray-lighter; |
6 | border-radius: $theme-border-radius-small; | 24 | border-radius: $theme-border-radius-small; |
7 | background: $theme-gray-lightest; | 25 | height: 140px; |
8 | overflow: hidden; | ||
9 | margin-top: 5px; | 26 | margin-top: 5px; |
27 | overflow: hidden; | ||
28 | position: relative; | ||
29 | width: 140px; | ||
10 | 30 | ||
11 | &__preview, | 31 | &__preview, |
12 | &__action { | 32 | &__action { |
13 | position: absolute; | ||
14 | top: 0; | ||
15 | left: 0; | 33 | left: 0; |
34 | position: absolute; | ||
16 | right: 0; | 35 | right: 0; |
36 | top: 0; | ||
17 | } | 37 | } |
18 | 38 | ||
19 | &__preview { | 39 | &__preview { |
20 | z-index: 1; | ||
21 | background-size: cover; | ||
22 | background-size: 100%; | ||
23 | background-repeat: no-repeat; | ||
24 | background-position: center center; | 40 | background-position: center center; |
41 | background-repeat: no-repeat; | ||
42 | background-size: cover; | ||
25 | border-radius: 3px; | 43 | border-radius: 3px; |
44 | z-index: 1; | ||
26 | } | 45 | } |
27 | 46 | ||
28 | &__action { | 47 | &__action { |
29 | position: relative; | ||
30 | z-index: 10; | ||
31 | opacity: 0; | ||
32 | transition: opacity 0.5s; | ||
33 | display: flex; | 48 | display: flex; |
34 | justify-content: center; | 49 | justify-content: center; |
50 | opacity: 0; | ||
51 | position: relative; | ||
52 | transition: opacity .5s; | ||
53 | z-index: 10; | ||
35 | 54 | ||
36 | &-background { | 55 | &-background { |
37 | position: absolute; | 56 | background: rgba($theme-gray, .7); |
38 | top: 0; | 57 | bottom: 0; |
39 | left: 0; | 58 | left: 0; |
59 | position: absolute; | ||
40 | right: 0; | 60 | right: 0; |
41 | bottom: 0; | 61 | top: 0; |
42 | background: rgba($theme-gray, 0.7); | ||
43 | z-index: 10; | 62 | z-index: 10; |
44 | } | 63 | } |
45 | 64 | ||
46 | button { | 65 | button { |
66 | color: #FFF; | ||
47 | position: relative; | 67 | position: relative; |
48 | z-index: 100; | 68 | z-index: 100; |
49 | color: #FFF; | ||
50 | 69 | ||
51 | .mdi { | 70 | .mdi { color: #FFF; } |
52 | color: #FFF; | ||
53 | } | ||
54 | } | 71 | } |
55 | } | 72 | } |
56 | 73 | ||
57 | &__dropzone { | 74 | &__dropzone { |
58 | text-align: center; | 75 | align-items: center; |
59 | border-radius: 5px; | 76 | border-radius: 5px; |
60 | padding: 10px; | ||
61 | display: flex; | 77 | display: flex; |
62 | align-items: center; | ||
63 | justify-content: center; | ||
64 | flex-direction: column; | 78 | flex-direction: column; |
79 | justify-content: center; | ||
80 | padding: 10px; | ||
81 | text-align: center; | ||
65 | } | 82 | } |
66 | 83 | ||
67 | &__dropzone, | 84 | &__dropzone, |
68 | button { | 85 | button { |
69 | .mdi { | 86 | .mdi { margin-bottom: 5px; } |
70 | margin-bottom: 5px; | ||
71 | } | ||
72 | 87 | ||
73 | p { | 88 | p { |
74 | font-size: 10px; | 89 | font-size: 10px; |
@@ -76,16 +91,10 @@ | |||
76 | } | 91 | } |
77 | } | 92 | } |
78 | 93 | ||
79 | &:hover { | 94 | &:hover .image-upload__action { opacity: 1; } |
80 | .image-upload__action { | ||
81 | opacity: 1; | ||
82 | } | ||
83 | } | ||
84 | } | 95 | } |
85 | 96 | ||
86 | .image-upload-wrapper { | 97 | .image-upload-wrapper .mdi { |
87 | .mdi { | 98 | color: $theme-gray-light; |
88 | font-size: 40px; | 99 | font-size: 40px; |
89 | color: $theme-gray-light; | 100 | } |
90 | } | ||
91 | } \ No newline at end of file | ||
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss index b6d1e84e2..fb4917358 100644 --- a/src/styles/info-bar.scss +++ b/src/styles/info-bar.scss | |||
@@ -1,83 +1,68 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .info-bar { | 3 | .info-bar { |
4 | width: 100%; | 4 | align-items: center; |
5 | height: 50px; | ||
6 | background: $theme-brand-primary; | 5 | background: $theme-brand-primary; |
6 | box-shadow: 0 0 8px rgba(black, .2); | ||
7 | display: flex; | 7 | display: flex; |
8 | align-items: center; | 8 | height: 50px; |
9 | justify-content: center; | 9 | justify-content: center; |
10 | padding: 0 20px; | 10 | padding: 0 20px; |
11 | position: relative; | 11 | position: relative; |
12 | // bottom: 0; | 12 | width: 100%; |
13 | z-index: 100; | 13 | z-index: 100; |
14 | box-shadow: 0 0 8px rgba(black, 0.2); | ||
15 | 14 | ||
16 | .info-bar__content { | 15 | .info-bar__content { |
17 | height: auto; | 16 | height: auto; |
18 | 17 | ||
19 | .mdi { | 18 | .mdi { margin-right: 5px; } |
20 | margin-right: 5px; | ||
21 | } | ||
22 | } | 19 | } |
23 | 20 | ||
24 | .info-bar__close { | 21 | .info-bar__close { |
22 | color: #FFF; | ||
25 | position: absolute; | 23 | position: absolute; |
26 | right: 10px; | 24 | right: 10px; |
27 | color: #FFF; | ||
28 | } | 25 | } |
29 | 26 | ||
30 | .info-bar__cta { | 27 | .info-bar__cta { |
31 | color: #FFF; | ||
32 | padding: 3px 8px; | ||
33 | border-radius: $theme-border-radius-small; | ||
34 | border-color: #FFF; | 28 | border-color: #FFF; |
35 | border-width: 2px; | 29 | border-radius: $theme-border-radius-small; |
36 | border-style: solid; | 30 | border-style: solid; |
31 | border-width: 2px; | ||
32 | color: #FFF; | ||
37 | margin-left: 15px; | 33 | margin-left: 15px; |
34 | padding: 3px 8px; | ||
38 | 35 | ||
39 | .loader { | 36 | .loader { |
37 | display: inline-block; | ||
38 | height: 12px; | ||
39 | margin-right: 5px; | ||
40 | position: relative; | 40 | position: relative; |
41 | width: 20px; | 41 | width: 20px; |
42 | height: 12px; | ||
43 | z-index: 9999; | 42 | z-index: 9999; |
44 | display: inline-block; | ||
45 | margin-right: 5px; | ||
46 | } | 43 | } |
47 | } | 44 | } |
48 | 45 | ||
49 | a { | 46 | &.info-bar--bottom { order: 10; } |
50 | // text-decoration: underline; | ||
51 | } | ||
52 | |||
53 | &.info-bar--bottom { | ||
54 | order: 10; | ||
55 | } | ||
56 | 47 | ||
57 | &.info-bar--primary { | 48 | &.info-bar--primary { |
58 | background: $theme-brand-primary; | 49 | background: $theme-brand-primary; |
59 | color: #FFF; | 50 | color: #FFF; |
60 | 51 | ||
61 | a { | 52 | a { color: #FFF; } |
62 | color: #FFF; | ||
63 | } | ||
64 | } | 53 | } |
65 | 54 | ||
66 | &.info-bar--warning { | 55 | &.info-bar--warning { |
67 | background: $theme-brand-warning; | 56 | background: $theme-brand-warning; |
68 | color: #FFF; | 57 | color: #FFF; |
69 | 58 | ||
70 | a { | 59 | a { color: #FFF; } |
71 | color: #FFF; | ||
72 | } | ||
73 | } | 60 | } |
74 | 61 | ||
75 | &.info-bar--danger { | 62 | &.info-bar--danger { |
76 | background: $theme-brand-danger; | 63 | background: $theme-brand-danger; |
77 | color: #FFF; | 64 | color: #FFF; |
78 | 65 | ||
79 | a { | 66 | a { color: #FFF; } |
80 | color: #FFF; | ||
81 | } | ||
82 | } | 67 | } |
83 | } | 68 | } |
diff --git a/src/styles/infobox.scss b/src/styles/infobox.scss index 7ab094058..e287e5be7 100644 --- a/src/styles/infobox.scss +++ b/src/styles/infobox.scss | |||
@@ -1,20 +1,16 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .infobox { | 3 | .infobox { |
4 | height: auto; | 4 | align-items: center; |
5 | padding: 15px 20px; | ||
6 | margin-bottom: 30px; | ||
7 | border-radius: $theme-border-radius-small; | 5 | border-radius: $theme-border-radius-small; |
8 | display: flex; | 6 | display: flex; |
9 | align-items: center; | 7 | height: auto; |
8 | margin-bottom: 30px; | ||
9 | padding: 15px 20px; | ||
10 | 10 | ||
11 | a { | 11 | a { color: #FFF; } |
12 | color: #FFF; | ||
13 | } | ||
14 | 12 | ||
15 | .infobox__content { | 13 | .infobox__content { flex: 1; } |
16 | flex: 1; | ||
17 | } | ||
18 | 14 | ||
19 | &.infobox--success { | 15 | &.infobox--success { |
20 | background: $theme-brand-success; | 16 | background: $theme-brand-success; |
@@ -36,26 +32,24 @@ | |||
36 | color: #FFF; | 32 | color: #FFF; |
37 | } | 33 | } |
38 | 34 | ||
39 | .mdi { | 35 | .mdi { margin-right: 10px; } |
40 | margin-right: 10px; | ||
41 | } | ||
42 | 36 | ||
43 | .infobox__cta { | 37 | .infobox__cta { |
44 | color: #FFF; | ||
45 | padding: 3px 8px; | ||
46 | border-radius: $theme-border-radius-small; | ||
47 | border-color: #FFF; | 38 | border-color: #FFF; |
48 | border-width: 2px; | 39 | border-radius: $theme-border-radius-small; |
49 | border-style: solid; | 40 | border-style: solid; |
41 | border-width: 2px; | ||
42 | color: #FFF; | ||
50 | margin-left: 15px; | 43 | margin-left: 15px; |
44 | padding: 3px 8px; | ||
51 | 45 | ||
52 | .loader { | 46 | .loader { |
47 | display: inline-block; | ||
48 | height: 12px; | ||
49 | margin-right: 5px; | ||
53 | position: relative; | 50 | position: relative; |
54 | width: 20px; | 51 | width: 20px; |
55 | height: 12px; | ||
56 | z-index: 9999; | 52 | z-index: 9999; |
57 | display: inline-block; | ||
58 | margin-right: 5px; | ||
59 | } | 53 | } |
60 | } | 54 | } |
61 | 55 | ||
diff --git a/src/styles/input.scss b/src/styles/input.scss index 7042f56e8..687bcac64 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss | |||
@@ -1,6 +1,34 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | @import './mixins.scss'; | 2 | @import './mixins.scss'; |
3 | 3 | ||
4 | .theme__dark .franz-form { | ||
5 | .franz-form__label { color: $dark-theme-text-color; } | ||
6 | |||
7 | .franz-form__input-wrapper { | ||
8 | background: $dark-theme-gray-dark; | ||
9 | border: 1px solid $dark-theme-gray-light; | ||
10 | } | ||
11 | |||
12 | .franz-form__input { | ||
13 | color: $dark-theme-gray-lightest; | ||
14 | |||
15 | &::placeholder { color: $dark-theme-gray-lighter; } | ||
16 | } | ||
17 | |||
18 | .franz-form__input-prefix, | ||
19 | .franz-form__input-suffix { | ||
20 | background: $dark-theme-gray; | ||
21 | color: $dark-theme-gray-lighter; | ||
22 | } | ||
23 | |||
24 | .franz-form__input-modifier { | ||
25 | border-left: 1px solid $dark-theme-gray-light; | ||
26 | color: $dark-theme-gray-lighter; | ||
27 | } | ||
28 | |||
29 | .franz-form__password-score { background: $dark-theme-gray-dark; } | ||
30 | } | ||
31 | |||
4 | .franz-form { | 32 | .franz-form { |
5 | .franz-form__field { | 33 | .franz-form__field { |
6 | display: flex; | 34 | display: flex; |
@@ -9,19 +37,12 @@ | |||
9 | margin-bottom: 20px; | 37 | margin-bottom: 20px; |
10 | 38 | ||
11 | &.has-error { | 39 | &.has-error { |
12 | .franz-form__input-wrapper { | 40 | .franz-form__input-wrapper, |
13 | border-color: $theme-brand-danger; | 41 | .franz-form__input-modifier { border-color: $theme-brand-danger; } |
14 | } | ||
15 | |||
16 | .franz-form__input-modifier { | ||
17 | border-color: $theme-brand-danger; | ||
18 | } | ||
19 | } | 42 | } |
20 | } | 43 | } |
21 | 44 | ||
22 | .franz-form__label { | 45 | .franz-form__label { @include formLabel(); } |
23 | @include formLabel(); | ||
24 | } | ||
25 | 46 | ||
26 | .franz-form__error { | 47 | .franz-form__error { |
27 | color: $theme-brand-danger; | 48 | color: $theme-brand-danger; |
@@ -30,74 +51,60 @@ | |||
30 | } | 51 | } |
31 | 52 | ||
32 | .franz-form__input-wrapper { | 53 | .franz-form__input-wrapper { |
33 | display: flex; | ||
34 | width: 100%; | ||
35 | order: 1; | ||
36 | border-radius: $theme-border-radius-small; | ||
37 | background: $theme-gray-lightest; | 54 | background: $theme-gray-lightest; |
38 | border: 1px solid $theme-gray-lighter; | 55 | border: 1px solid $theme-gray-lighter; |
56 | border-radius: $theme-border-radius-small; | ||
57 | display: flex; | ||
39 | flex-wrap: wrap; | 58 | flex-wrap: wrap; |
59 | order: 1; | ||
60 | width: 100%; | ||
40 | } | 61 | } |
41 | 62 | ||
42 | .franz-form__input { | 63 | .franz-form__input { |
43 | flex: 1; | ||
44 | border: 0; | ||
45 | background: none; | 64 | background: none; |
46 | width: 100%; | 65 | border: 0; |
47 | padding: 8px; | ||
48 | // font-size: 18px; | ||
49 | color: $theme-gray; | 66 | color: $theme-gray; |
67 | flex: 1; | ||
68 | padding: 8px; | ||
69 | width: 100%; | ||
50 | 70 | ||
51 | &::placeholder { | 71 | &::placeholder { color: lighten($theme-gray-light, 10%); } |
52 | color: lighten($theme-gray-light, 10%); | ||
53 | } | ||
54 | } | 72 | } |
55 | 73 | ||
56 | .franz-form__input-prefix, | 74 | .franz-form__input-prefix, |
57 | .franz-form__input-suffix { | 75 | .franz-form__input-suffix { |
58 | padding: 0 10px; | ||
59 | background: $theme-gray-lighter; | 76 | background: $theme-gray-lighter; |
60 | color: $theme-gray-light; | 77 | color: $theme-gray-light; |
61 | line-height: 35px; | 78 | line-height: 35px; |
79 | padding: 0 10px; | ||
62 | } | 80 | } |
63 | 81 | ||
64 | .franz-form__input-modifier { | 82 | .franz-form__input-modifier { |
65 | padding: 0 20px; | ||
66 | border-left: 1px solid $theme-gray-lighter; | 83 | border-left: 1px solid $theme-gray-lighter; |
67 | color: $theme-gray-light; | 84 | color: $theme-gray-light; |
68 | font-size: 20px; | 85 | font-size: 20px; |
86 | padding: 0 20px; | ||
69 | } | 87 | } |
70 | 88 | ||
71 | .franz-form__password-score { | 89 | .franz-form__password-score { |
72 | background: $theme-gray-lighter; | 90 | background: $theme-gray-lighter; |
73 | height: 5px; | ||
74 | flex-basis: 100%; | ||
75 | border-bottom-left-radius: 3px; | 91 | border-bottom-left-radius: 3px; |
76 | border-bottom-right-radius: 3px; | 92 | border-bottom-right-radius: 3px; |
93 | flex-basis: 100%; | ||
94 | height: 5px; | ||
77 | 95 | ||
78 | meter { | 96 | meter { |
79 | width: 100%; | ||
80 | height: 100%; | ||
81 | display: block; | ||
82 | border-bottom-left-radius: 3px; | 97 | border-bottom-left-radius: 3px; |
83 | border-bottom-right-radius: 3px; | 98 | border-bottom-right-radius: 3px; |
99 | display: block; | ||
100 | height: 100%; | ||
84 | overflow: hidden; | 101 | overflow: hidden; |
102 | width: 100%; | ||
85 | 103 | ||
86 | &::-webkit-meter-bar { | 104 | &::-webkit-meter-bar { background: none; } |
87 | background: none; | 105 | &::-webkit-meter-even-less-good-value { background: $theme-brand-danger; } |
88 | } | 106 | &::-webkit-meter-suboptimum-value { background: $theme-brand-warning; } |
89 | 107 | &::-webkit-meter-optimum-value { background: $theme-brand-success; } | |
90 | &::-webkit-meter-even-less-good-value { | ||
91 | background: $theme-brand-danger; | ||
92 | } | ||
93 | |||
94 | &::-webkit-meter-suboptimum-value { | ||
95 | background: $theme-brand-warning; | ||
96 | } | ||
97 | |||
98 | &::-webkit-meter-optimum-value { | ||
99 | background: $theme-brand-success; | ||
100 | } | ||
101 | } | 108 | } |
102 | } | 109 | } |
103 | } | 110 | } |
diff --git a/src/styles/invite.scss b/src/styles/invite.scss index bfb1a4b6b..594224f62 100644 --- a/src/styles/invite.scss +++ b/src/styles/invite.scss | |||
@@ -1,15 +1,8 @@ | |||
1 | .invite__form { | 1 | .invite__form { |
2 | /* play with values to see different layouts */ | ||
3 | // display: flex; | ||
4 | align-items: center; | 2 | align-items: center; |
5 | align-self: center; | 3 | align-self: center; |
6 | justify-content: center; | 4 | justify-content: center; |
7 | } | 5 | } |
8 | 6 | ||
9 | .invite__embed { | 7 | .invite__embed { text-align: center; } |
10 | text-align: center; | 8 | .invite__embed--button { width: 100%; } |
11 | } | ||
12 | |||
13 | .invite__embed--button { | ||
14 | width: 100%; | ||
15 | } \ No newline at end of file | ||
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index afdd7dec7..ebf468cf0 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -1,12 +1,36 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | html { | 3 | html { overflow: hidden; } |
4 | overflow: hidden; | 4 | |
5 | .theme__dark .app { | ||
6 | .sidebar { | ||
7 | background: $dark-theme-gray-darker; | ||
8 | box-shadow: 0 0 5px 0 $dark-theme-black; | ||
9 | color: $theme-text-color; | ||
10 | |||
11 | .sidebar__add-service { | ||
12 | color: $dark-theme-gray-lighter; | ||
13 | background: $dark-theme-gray; | ||
14 | } | ||
15 | |||
16 | .sidebar__button { | ||
17 | color: $dark-theme-gray-lighter; | ||
18 | font-size: 22px; | ||
19 | |||
20 | &:hover, | ||
21 | &:active { color: $dark-theme-gray-smoke; } | ||
22 | &.is-muted { color: $dark-theme-gray; } | ||
23 | } | ||
24 | } | ||
25 | |||
26 | .app-loader .app-loader__title { color: $dark-theme-gray-lightest; } | ||
5 | } | 27 | } |
6 | 28 | ||
7 | .app { | 29 | .app { |
8 | display: flex; | 30 | display: flex; |
9 | flex-direction: row; | 31 | flex-direction: column; |
32 | |||
33 | .app__content { display: flex; } | ||
10 | 34 | ||
11 | .app__service { | 35 | .app__service { |
12 | display: flex; | 36 | display: flex; |
@@ -15,130 +39,100 @@ html { | |||
15 | } | 39 | } |
16 | } | 40 | } |
17 | 41 | ||
42 | .electron-app-title-bar { z-index: 99999999; } | ||
43 | |||
18 | .window-draggable { | 44 | .window-draggable { |
19 | position: absolute; | ||
20 | width: 100%; | ||
21 | top: 0px; | ||
22 | left: 0px; | ||
23 | height: 35px; | 45 | height: 35px; |
46 | left: 0; | ||
24 | pointer-events: none; | 47 | pointer-events: none; |
25 | -webkit-app-region: drag; | 48 | position: absolute; |
49 | top: 0; | ||
50 | width: 100%; | ||
26 | z-index: 9999; | 51 | z-index: 9999; |
52 | -webkit-app-region: drag; | ||
27 | } | 53 | } |
28 | 54 | ||
29 | .darwin { | 55 | .darwin .sidebar { padding-top: 23px; } |
30 | .sidebar { | ||
31 | padding-top: 23px; | ||
32 | } | ||
33 | } | ||
34 | 56 | ||
35 | .sidebar { | 57 | .sidebar { |
36 | display: flex; | ||
37 | flex-direction: column; | ||
38 | align-items: center; | 58 | align-items: center; |
39 | width: $theme-sidebar-width; | ||
40 | background: $theme-gray-lightest; | 59 | background: $theme-gray-lightest; |
41 | box-shadow: 1px 0 10px rgba(0,0,0,0.08); | 60 | box-shadow: 1px 0 10px rgba(0, 0, 0, .08); |
42 | z-index: 200; | ||
43 | text-align: center; | ||
44 | color: $theme-text-color; | 61 | color: $theme-text-color; |
62 | display: flex; | ||
63 | flex-direction: column; | ||
45 | padding-bottom: 10px; | 64 | padding-bottom: 10px; |
65 | text-align: center; | ||
66 | width: $theme-sidebar-width; | ||
67 | z-index: 200; | ||
46 | 68 | ||
47 | .sidebar__add-service { | 69 | .sidebar__add-service { |
48 | width: 32px; | 70 | color: $theme-gray-light; |
49 | height: 32px; | ||
50 | background: $theme-gray-lighter; | 71 | background: $theme-gray-lighter; |
51 | border-radius: $theme-border-radius-small; | 72 | border-radius: $theme-border-radius-small; |
73 | height: 32px; | ||
52 | margin: 10px auto; | 74 | margin: 10px auto; |
53 | color: $theme-gray-light; | 75 | width: 32px; |
54 | } | 76 | } |
55 | 77 | ||
56 | .sidebar__button { | 78 | .sidebar__button { |
57 | width: $theme-sidebar-width; | 79 | color: $theme-gray-light; |
58 | padding: 7px 0; | ||
59 | font-size: 24px; | 80 | font-size: 24px; |
81 | padding: 7px 0; | ||
60 | position: relative; | 82 | position: relative; |
61 | color: $theme-gray-light; | 83 | width: $theme-sidebar-width; |
62 | |||
63 | &:hover { | ||
64 | color: darken($theme-gray-light, 10%); | ||
65 | } | ||
66 | |||
67 | &:active { | ||
68 | color: lighten($theme-gray-light, 10%); | ||
69 | } | ||
70 | |||
71 | &.is-muted { | ||
72 | color: $theme-brand-primary; | ||
73 | } | ||
74 | 84 | ||
75 | &--new-service { | 85 | &:hover, |
76 | padding-bottom: 6px; | 86 | &:active { color: lighten($theme-gray-light, 10%); } |
77 | } | 87 | &.is-muted { color: $theme-brand-primary; } |
88 | &--new-service { padding-bottom: 6px; } | ||
78 | } | 89 | } |
79 | 90 | ||
80 | & > div { | 91 | & > div { |
81 | display: flex; | 92 | display: flex; |
82 | overflow-y: scroll; | 93 | overflow-y: scroll; |
83 | 94 | ||
84 | &::-webkit-scrollbar { | 95 | &::-webkit-scrollbar { display: none; } |
85 | display: none; | ||
86 | } | ||
87 | } | 96 | } |
88 | } | 97 | } |
89 | 98 | ||
90 | .grid { | 99 | .grid .grid__row { |
91 | .grid__row { | 100 | display: flex; |
92 | display: flex; | 101 | flex-direction: row; |
93 | flex-direction: row; | ||
94 | |||
95 | &>* { | ||
96 | margin-right: 20px; | ||
97 | } | ||
98 | 102 | ||
99 | & :last-child { | 103 | & > * { margin-right: 20px; } |
100 | margin-right: 0; | 104 | & :last-child { margin-right: 0; } |
101 | } | ||
102 | } | ||
103 | } | 105 | } |
104 | 106 | ||
105 | .app-loader { | 107 | .app-loader { |
108 | align-items: center; | ||
106 | display: flex; | 109 | display: flex; |
107 | justify-content: center; | 110 | justify-content: center; |
108 | align-items: center; | ||
109 | 111 | ||
110 | .app-loader__title { | 112 | .app-loader__title { |
111 | color: #FFF; | 113 | color: #FFF; |
112 | font-size: 40px; | 114 | font-size: 40px; |
113 | } | 115 | } |
114 | 116 | ||
115 | &>span { | 117 | & > span { height: auto; } |
116 | height: auto; | ||
117 | } | ||
118 | } | ||
119 | |||
120 | .dev-warning { | ||
121 | display: none; | ||
122 | } | 118 | } |
123 | 119 | ||
124 | .isDevMode { | 120 | .dev-warning { display: none; } |
125 | .dev-warning { | 121 | |
126 | display: block; | 122 | .isDevMode .dev-warning { |
127 | position: fixed; | 123 | border-radius: 3px; |
128 | background: $theme-brand-warning; | 124 | background: $theme-brand-warning; |
129 | width: auto; | 125 | color: #FFF; |
130 | height: auto; | 126 | display: block; |
131 | top: 5px; | 127 | font-size: 10px; |
132 | right: 5px; | 128 | height: auto; |
133 | padding: 4px; | 129 | padding: 4px; |
134 | font-size: 10px; | 130 | position: fixed; |
135 | color: #FFF; | 131 | right: 5px; |
136 | z-index: 999999999; | 132 | top: 5px; |
137 | border-radius: 3px; | 133 | transition: opacity .5s ease; |
138 | transition: opacity 0.5s ease; | 134 | width: auto; |
139 | 135 | z-index: 999999999; | |
140 | &:hover { | 136 | |
141 | opacity: 0; | 137 | &:hover { opacity: 0; } |
142 | } | ||
143 | } | ||
144 | } | 138 | } |
diff --git a/src/styles/main.scss b/src/styles/main.scss index 446bdca14..784a04d3d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss | |||
@@ -4,6 +4,7 @@ $mdi-font-path: '../node_modules/mdi/fonts'; | |||
4 | } | 4 | } |
5 | 5 | ||
6 | @import './node_modules/mdi/scss/materialdesignicons.scss'; | 6 | @import './node_modules/mdi/scss/materialdesignicons.scss'; |
7 | @import './node_modules/electron-react-titlebar/assets/style'; | ||
7 | 8 | ||
8 | // modules | 9 | // modules |
9 | @import './reset.scss'; | 10 | @import './reset.scss'; |
@@ -28,6 +29,7 @@ $mdi-font-path: '../node_modules/mdi/fonts'; | |||
28 | @import './subscription-popup.scss'; | 29 | @import './subscription-popup.scss'; |
29 | @import './content-tabs.scss'; | 30 | @import './content-tabs.scss'; |
30 | @import './invite.scss'; | 31 | @import './invite.scss'; |
32 | @import './title-bar.scss'; | ||
31 | 33 | ||
32 | // form | 34 | // form |
33 | @import './input.scss'; | 35 | @import './input.scss'; |
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index c9b1bc988..06efb475a 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss | |||
@@ -1,9 +1,9 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | @mixin formLabel { | 3 | @mixin formLabel { |
4 | width: 100%; | ||
5 | color: $theme-gray-light; | 4 | color: $theme-gray-light; |
6 | display: block; | 5 | display: block; |
7 | margin-bottom: 5px; | 6 | margin-bottom: 5px; |
8 | order: 0; | 7 | order: 0; |
8 | width: 100%; | ||
9 | } | 9 | } |
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 644478cd6..87d401215 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss | |||
@@ -1,34 +1,39 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .franz-form { | 3 | .theme__dark .franz-form .franz-form__radio { |
4 | .franz-form__radio-wrapper { | 4 | border: 1px solid $dark-theme-gray-lighter; |
5 | display: flex; | 5 | color: $dark-theme-gray-lightest; |
6 | |||
7 | &.is-selected { | ||
8 | background: $dark-theme-gray-lighter; | ||
9 | border: 1px solid $dark-theme-gray-lighter; | ||
10 | color: $dark-theme-gray-smoke; | ||
6 | } | 11 | } |
12 | } | ||
13 | |||
14 | |||
15 | .franz-form { | ||
16 | .franz-form__radio-wrapper { display: flex; } | ||
7 | 17 | ||
8 | .franz-form__radio { | 18 | .franz-form__radio { |
9 | // background: $theme-gray-lightest; | ||
10 | border: 2px solid $theme-gray-lighter; | 19 | border: 2px solid $theme-gray-lighter; |
20 | border-radius: $theme-border-radius-small; | ||
21 | box-shadow: $theme-inset-shadow; | ||
11 | color: $theme-gray; | 22 | color: $theme-gray; |
12 | padding: 11px; | 23 | flex: 1; |
13 | margin-right: 20px; | 24 | margin-right: 20px; |
25 | padding: 11px; | ||
14 | text-align: center; | 26 | text-align: center; |
15 | border-radius: $theme-border-radius-small; | ||
16 | flex: 1; | ||
17 | box-shadow: $theme-inset-shadow; | ||
18 | transition: background $theme-transition-time; | 27 | transition: background $theme-transition-time; |
19 | 28 | ||
20 | &:last-of-type { | 29 | &:last-of-type { margin-right: 0; } |
21 | margin-right: 0; | ||
22 | } | ||
23 | 30 | ||
24 | &.is-selected { | 31 | &.is-selected { |
25 | border: 2px solid $theme-brand-primary; | ||
26 | background: #FFF; | 32 | background: #FFF; |
33 | border: 2px solid $theme-brand-primary; | ||
27 | color: $theme-brand-primary; | 34 | color: $theme-brand-primary; |
28 | } | 35 | } |
29 | 36 | ||
30 | input { | 37 | input { display: none; } |
31 | display: none; | ||
32 | } | ||
33 | } | 38 | } |
34 | } | 39 | } |
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss index 1b519a5e5..84222e1fe 100644 --- a/src/styles/recipes.scss +++ b/src/styles/recipes.scss | |||
@@ -1,16 +1,22 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .recipe-teaser { | ||
4 | background-color: $dark-theme-gray-dark; | ||
5 | |||
6 | &:hover { background-color: $dark-theme-gray; } | ||
7 | } | ||
8 | |||
3 | .recipes { | 9 | .recipes { |
4 | .recipes__list { | 10 | .recipes__list { |
11 | align-content: flex-start; | ||
5 | display: flex; | 12 | display: flex; |
6 | flex-flow: row wrap; | 13 | flex-flow: row wrap; |
7 | align-content: flex-start; | ||
8 | min-height: 70%; | ||
9 | height: auto; | 14 | height: auto; |
15 | min-height: 70%; | ||
10 | 16 | ||
11 | &.recipes__list--disabled { | 17 | &.recipes__list--disabled { |
12 | opacity: 0.3; | ||
13 | filter: grayscale(100%); | 18 | filter: grayscale(100%); |
19 | opacity: .3; | ||
14 | pointer-events: none; | 20 | pointer-events: none; |
15 | } | 21 | } |
16 | } | 22 | } |
@@ -19,58 +25,48 @@ | |||
19 | height: auto; | 25 | height: auto; |
20 | margin-bottom: 35px; | 26 | margin-bottom: 35px; |
21 | 27 | ||
22 | .badge { | 28 | .badge { margin-right: 10px; } |
23 | margin-right: 10px; | ||
24 | } | ||
25 | 29 | ||
26 | &.recipes__navigation--disabled { | 30 | &.recipes__navigation--disabled { |
27 | opacity: 0.3; | ||
28 | filter: grayscale(100%); | 31 | filter: grayscale(100%); |
32 | opacity: .3; | ||
29 | pointer-events: none; | 33 | pointer-events: none; |
30 | } | 34 | } |
31 | } | 35 | } |
32 | 36 | ||
33 | &__service-request { | 37 | &__service-request { float: right; } |
34 | float: right; | ||
35 | } | ||
36 | } | 38 | } |
37 | 39 | ||
38 | .recipe-teaser { | 40 | .recipe-teaser { |
39 | position: relative; | 41 | background-color: $theme-gray-lightest; |
40 | width: calc(25% - 20px); | 42 | border-radius: $theme-border-radius; |
41 | height: 120px; | 43 | height: 120px; |
42 | margin: 0 20px 20px 0; | 44 | margin: 0 20px 20px 0; |
43 | border-radius: $theme-border-radius; | ||
44 | background-color: $theme-gray-lightest; | ||
45 | transition: background $theme-transition-time; | ||
46 | overflow: hidden; | 45 | overflow: hidden; |
46 | position: relative; | ||
47 | transition: background $theme-transition-time; | ||
48 | width: calc(25% - 20px); | ||
47 | 49 | ||
48 | &:hover { | 50 | &:hover { background-color: $theme-gray-lighter; } |
49 | background-color: $theme-gray-lighter; | ||
50 | } | ||
51 | 51 | ||
52 | .recipe-teaser__icon { | 52 | .recipe-teaser__icon { |
53 | width: 50px; | ||
54 | margin-bottom: 10px; | 53 | margin-bottom: 10px; |
54 | width: 50px; | ||
55 | } | 55 | } |
56 | 56 | ||
57 | .recipe-teaser__label { | 57 | .recipe-teaser__label { display: block; } |
58 | display: block; | ||
59 | } | ||
60 | 58 | ||
61 | h2 { | 59 | h2 { z-index: 10; } |
62 | z-index: 10; | ||
63 | } | ||
64 | 60 | ||
65 | &__dev-badge { | 61 | &__dev-badge { |
66 | position: absolute; | ||
67 | top: 5px; | ||
68 | right: -13px; | ||
69 | width: 50px; | ||
70 | background: $theme-brand-warning; | 62 | background: $theme-brand-warning; |
63 | box-shadow: 0 0 4px rgba(black, .2); | ||
71 | color: #FFF; | 64 | color: #FFF; |
72 | font-size: 10px; | 65 | font-size: 10px; |
66 | position: absolute; | ||
67 | right: -13px; | ||
68 | top: 5px; | ||
73 | transform: rotateZ(45deg); | 69 | transform: rotateZ(45deg); |
74 | box-shadow: 0 0 4px rgba(black, 0.2); | 70 | width: 50px; |
75 | } | 71 | } |
76 | } | 72 | } |
diff --git a/src/styles/reset.scss b/src/styles/reset.scss index 21763f44f..80328dcef 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss | |||
@@ -16,63 +16,62 @@ article, aside, canvas, details, embed, | |||
16 | figure, figcaption, footer, header, hgroup, | 16 | figure, figcaption, footer, header, hgroup, |
17 | menu, nav, output, ruby, section, summary, | 17 | menu, nav, output, ruby, section, summary, |
18 | time, mark, audio, video { | 18 | time, mark, audio, video { |
19 | margin: 0; | ||
20 | padding: 0; | ||
21 | border: 0; | 19 | border: 0; |
22 | font-size: 100%; | ||
23 | font: inherit; | 20 | font: inherit; |
21 | font-size: 100%; | ||
22 | margin: 0; | ||
23 | padding: 0; | ||
24 | } | 24 | } |
25 | /* HTML5 display-role reset for older browsers */ | 25 | |
26 | article, aside, details, figcaption, figure, | 26 | article, aside, details, figcaption, figure, |
27 | footer, header, hgroup, menu, nav, section { | 27 | footer, header, hgroup, menu, nav, section { display: block; } |
28 | display: block; | 28 | |
29 | } | 29 | ol, |
30 | body { | 30 | ul { list-style: none; } |
31 | line-height: 1; | 31 | |
32 | } | 32 | blockquote, |
33 | ol, ul { | 33 | q { |
34 | list-style: none; | ||
35 | } | ||
36 | blockquote, q { | ||
37 | quotes: none; | 34 | quotes: none; |
35 | |||
36 | &::before, | ||
37 | &::after { | ||
38 | content: ''; | ||
39 | content: none; | ||
40 | } | ||
38 | } | 41 | } |
39 | blockquote:before, blockquote:after, q:before, q:after { | 42 | |
40 | content: ''; | ||
41 | content: none; | ||
42 | } | ||
43 | table { | 43 | table { |
44 | border-collapse: collapse; | 44 | border-collapse: collapse; |
45 | border-spacing: 0; | 45 | border-spacing: 0; |
46 | } | 46 | } |
47 | 47 | ||
48 | /* Buttons should not have any special style applied by default */ | ||
49 | button { | 48 | button { |
50 | background: none; | 49 | background: none; |
51 | border: none; | 50 | border: none; |
52 | padding: 0; | 51 | padding: 0; |
53 | } | ||
54 | 52 | ||
55 | button:focus { | 53 | &:focus { outline: 0; } |
56 | outline: 0; | 54 | .theme__dark & { color: $dark-theme-gray-smoke; } |
57 | } | 55 | } |
58 | 56 | ||
59 | html { | 57 | html { |
60 | /* base for rem / 1rem = 10px */ | ||
61 | font-size: 62.5%; | 58 | font-size: 62.5%; |
62 | font-family: 'Open Sans'; | 59 | font-family: 'Open Sans'; |
63 | } | 60 | } |
64 | 61 | ||
65 | body { | 62 | body { |
66 | /* default font size = 14px */ | ||
67 | font-size: 1.4rem; | ||
68 | color: $theme-gray-dark; | 63 | color: $theme-gray-dark; |
64 | font-size: 1.4rem; | ||
65 | line-height: 1; | ||
66 | |||
67 | .theme__dark { color: $dark-theme-gray-smoke; } | ||
69 | } | 68 | } |
70 | 69 | ||
71 | * { | 70 | * { |
72 | -webkit-font-smoothing: antialiased; | ||
73 | box-sizing: border-box; | 71 | box-sizing: border-box; |
74 | font-size: 1.4rem; | ||
75 | font-family: 'Open Sans'; | 72 | font-family: 'Open Sans'; |
73 | font-size: 1.4rem; | ||
74 | -webkit-font-smoothing: antialiased; | ||
76 | -webkit-user-select: none; | 75 | -webkit-user-select: none; |
77 | } | 76 | } |
78 | 77 | ||
@@ -82,14 +81,6 @@ html, body, div { | |||
82 | box-sizing: border-box; | 81 | box-sizing: border-box; |
83 | } | 82 | } |
84 | 83 | ||
85 | *:focus { | 84 | *:focus { outline: none; } |
86 | outline: none; | 85 | img { pointer-events: none; } |
87 | } | 86 | a { cursor: default; } |
88 | |||
89 | img { | ||
90 | pointer-events: none; | ||
91 | } | ||
92 | |||
93 | a { | ||
94 | cursor: default; | ||
95 | } | ||
diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss index 633a31e09..32b9da065 100644 --- a/src/styles/searchInput.scss +++ b/src/styles/searchInput.scss | |||
@@ -1,20 +1,32 @@ | |||
1 | @import './config.scss'; | ||
2 | @import './mixins.scss'; | ||
3 | |||
4 | .theme__dark .search-input { | ||
5 | @extend %headline__dark; | ||
6 | background: $dark-theme-gray-dark; | ||
7 | border: 1px solid $dark-theme-gray-light; | ||
8 | border-radius: $theme-border-radius; | ||
9 | color: $dark-theme-gray-lightest; | ||
10 | |||
11 | input { color: $dark-theme-gray-lightest; } | ||
12 | } | ||
13 | |||
1 | .search-input { | 14 | .search-input { |
2 | width: 100%; | 15 | @extend %headline; |
3 | height: auto; | ||
4 | display: flex; | ||
5 | align-items: center; | 16 | align-items: center; |
6 | padding: 0 10px; | ||
7 | border-radius: 30px; | ||
8 | background: $theme-gray-lightest; | 17 | background: $theme-gray-lightest; |
9 | padding: 5px 10px; | 18 | border-radius: 30px; |
10 | @extend %headline; | ||
11 | color: $theme-gray-light; | 19 | color: $theme-gray-light; |
20 | display: flex; | ||
21 | height: auto; | ||
22 | padding: 5px 10px; | ||
23 | width: 100%; | ||
12 | 24 | ||
13 | input { | 25 | input { |
14 | padding-left: 10px; | ||
15 | background: none; | 26 | background: none; |
16 | border: 0; | 27 | border: 0; |
17 | flex: 1; | ||
18 | color: $theme-gray-light; | 28 | color: $theme-gray-light; |
29 | flex: 1; | ||
30 | padding-left: 10px; | ||
19 | } | 31 | } |
20 | } | 32 | } |
diff --git a/src/styles/select.scss b/src/styles/select.scss index 965b4321a..ed0fc0fc2 100644 --- a/src/styles/select.scss +++ b/src/styles/select.scss | |||
@@ -3,17 +3,21 @@ | |||
3 | 3 | ||
4 | $toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo="; | 4 | $toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo="; |
5 | 5 | ||
6 | .franz-form { | 6 | .theme__dark .franz-form .franz-form__select { |
7 | .franz-form__select { | 7 | background-color: $dark-theme-gray-dark; |
8 | -webkit-appearance: none; | 8 | border: 1px solid $dark-theme-gray-light; |
9 | min-width: 200px; | 9 | color: $dark-theme-gray-lightest; |
10 | padding: 10px; | 10 | } |
11 | background-color: $theme-gray-lightest; | 11 | |
12 | background-position: right center; | 12 | .franz-form .franz-form__select { |
13 | background-repeat: no-repeat; | 13 | background-color: $theme-gray-lightest; |
14 | background-size: 1ex; | 14 | background-image: url(data:image/svg+xml;base64,#{$toggle}); |
15 | background-origin: content-box; | 15 | background-origin: content-box; |
16 | background-image: url(data:image/svg+xml;base64,#{$toggle}); | 16 | background-position: right center; |
17 | border: 1px solid $theme-gray-lighter; | 17 | background-repeat: no-repeat; |
18 | } | 18 | background-size: 1ex; |
19 | border: 1px solid $theme-gray-lighter; | ||
20 | min-width: 200px; | ||
21 | padding: 10px; | ||
22 | -webkit-appearance: none; | ||
19 | } | 23 | } |
diff --git a/src/styles/service-table.scss b/src/styles/service-table.scss index 66d5ac941..f2090685b 100644 --- a/src/styles/service-table.scss +++ b/src/styles/service-table.scss | |||
@@ -1,62 +1,63 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .service-table { | ||
4 | .service-table__icon.has-custom-icon { border: 1px solid $dark-theme-gray-dark; } | ||
5 | .service-table__column-info .mdi { color: $dark-theme-gray-lightest; } | ||
6 | |||
7 | .service-table__row { | ||
8 | border-bottom: 1px solid $dark-theme-gray-darker; | ||
9 | |||
10 | &:hover { background: $dark-theme-gray-darker; } | ||
11 | &.service-table__row--disabled { color: $dark-theme-gray; } | ||
12 | } | ||
13 | } | ||
14 | |||
3 | .service-table { | 15 | .service-table { |
4 | width: 100%; | 16 | width: 100%; |
5 | 17 | ||
6 | .service-table__toggle { | 18 | .service-table__toggle { |
7 | width: 60px; | 19 | width: 60px; |
8 | 20 | ||
9 | .franz-form__field { | 21 | .franz-form__field { margin-bottom: 0; } |
10 | margin-bottom: 0; | ||
11 | } | ||
12 | } | 22 | } |
13 | 23 | ||
14 | .service-table__icon { | 24 | .service-table__icon { |
15 | width: 35px; | 25 | width: 35px; |
16 | 26 | ||
17 | &.has-custom-icon { | 27 | &.has-custom-icon { |
18 | border-radius: $theme-border-radius; | ||
19 | border: 1px solid $theme-gray-lighter; | 28 | border: 1px solid $theme-gray-lighter; |
29 | border-radius: $theme-border-radius; | ||
20 | width: 37px; | 30 | width: 37px; |
21 | } | 31 | } |
22 | } | 32 | } |
23 | 33 | ||
24 | .service-table__column-icon { | 34 | .service-table__column-icon, |
25 | width: 40px; | 35 | .service-table__column-action { width: 40px } |
26 | } | ||
27 | |||
28 | .service-table__column-action { | ||
29 | width: 40px | ||
30 | } | ||
31 | 36 | ||
32 | .service-table__column-info { | 37 | .service-table__column-info { |
33 | width: 40px; | 38 | width: 40px; |
34 | 39 | ||
35 | .mdi { | 40 | .mdi { |
41 | color: $theme-gray-light; | ||
36 | display: block; | 42 | display: block; |
37 | font-size: 18px; | 43 | font-size: 18px; |
38 | color: $theme-gray-light; | ||
39 | } | 44 | } |
40 | } | 45 | } |
41 | 46 | ||
42 | .service-table__row { | 47 | .service-table__row { |
43 | border-bottom: 1px solid $theme-gray-lightest; | 48 | border-bottom: 1px solid $theme-gray-lightest; |
44 | 49 | ||
45 | &:hover { | 50 | &:hover { background: $theme-gray-lightest; } |
46 | background: $theme-gray-lightest; | ||
47 | } | ||
48 | 51 | ||
49 | &.service-table__row--disabled { | 52 | &.service-table__row--disabled { |
50 | color: $theme-gray-light; | 53 | color: $theme-gray-light; |
51 | 54 | ||
52 | .service-table__column-icon { | 55 | .service-table__column-icon { |
53 | filter: grayscale(100%); | 56 | filter: grayscale(100%); |
54 | opacity: 0.5; | 57 | opacity: .5; |
55 | } | 58 | } |
56 | } | 59 | } |
57 | } | 60 | } |
58 | 61 | ||
59 | td { | 62 | td { padding: 10px; } |
60 | padding: 10px; | ||
61 | } | ||
62 | } | 63 | } |
diff --git a/src/styles/services.scss b/src/styles/services.scss index 9f6cfc772..0e559501c 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss | |||
@@ -1,30 +1,46 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .services { | ||
4 | background: $dark-theme-gray-darkest; | ||
5 | |||
6 | .services__webview-wrapper { background: $dark-theme-gray-darkest; } | ||
7 | |||
8 | .services__webview, | ||
9 | .services__info-layer { | ||
10 | webview { background: $dark-theme-gray-darkest; } | ||
11 | } | ||
12 | |||
13 | .services__no-service, | ||
14 | .services__info-layer { | ||
15 | background: $dark-theme-gray-darkest; | ||
16 | |||
17 | h1 { color: $dark-theme-gray-lightest; } | ||
18 | } | ||
19 | } | ||
20 | |||
3 | .services { | 21 | .services { |
22 | background: #FFF; | ||
4 | flex: 1; | 23 | flex: 1; |
5 | height: 100%; | 24 | height: 100%; |
6 | position: relative; | ||
7 | overflow: hidden; | ||
8 | background: #FFF; | ||
9 | order: 5; | 25 | order: 5; |
26 | overflow: hidden; | ||
27 | position: relative; | ||
10 | 28 | ||
11 | .services__webview-wrapper { | 29 | .services__webview-wrapper { background: $theme-gray-lighter; } |
12 | background: $theme-gray-lighter; | ||
13 | } | ||
14 | 30 | ||
15 | .services__webview, | 31 | .services__webview, |
16 | .services__info-layer { | 32 | .services__info-layer { |
33 | left: 0; | ||
17 | position: absolute; | 34 | position: absolute; |
18 | width: 100%; | ||
19 | top: 0; | 35 | top: 0; |
20 | left: 0; | 36 | width: 100%; |
21 | z-index: 0; | 37 | z-index: 0; |
22 | 38 | ||
23 | webview { | 39 | webview { |
24 | display: inline-flex; | ||
25 | width: 0px; | ||
26 | height: 0px; | ||
27 | background: $theme-gray-lighter; | 40 | background: $theme-gray-lighter; |
41 | display: inline-flex; | ||
42 | height: 0; | ||
43 | width: 0; | ||
28 | } | 44 | } |
29 | 45 | ||
30 | &.is-active { | 46 | &.is-active { |
@@ -32,36 +48,30 @@ | |||
32 | 48 | ||
33 | webview { | 49 | webview { |
34 | flex: 0 1; | 50 | flex: 0 1; |
35 | width: 100%; | ||
36 | height: 100%; | 51 | height: 100%; |
52 | width: 100%; | ||
37 | } | 53 | } |
38 | } | 54 | } |
39 | 55 | ||
40 | &--force-repaint { | 56 | &--force-repaint webview { z-index: 5; } |
41 | webview { | ||
42 | z-index: 5; | ||
43 | } | ||
44 | } | ||
45 | } | 57 | } |
46 | 58 | ||
47 | .services__no-service, | 59 | .services__no-service, |
48 | .services__info-layer { | 60 | .services__info-layer { |
61 | align-items: center; | ||
62 | background: $theme-gray-lighter; | ||
49 | display: flex; | 63 | display: flex; |
50 | flex-direction: column; | 64 | flex-direction: column; |
51 | justify-content: center; | 65 | justify-content: center; |
52 | align-items: center; | ||
53 | text-align: center; | 66 | text-align: center; |
54 | background: $theme-gray-lighter; | ||
55 | 67 | ||
56 | h1 { | 68 | h1 { |
57 | margin: 25px 0 40px; | ||
58 | color: $theme-gray-dark; | 69 | color: $theme-gray-dark; |
70 | margin: 25px 0 40px; | ||
59 | } | 71 | } |
60 | 72 | ||
61 | a.button, | 73 | a.button, |
62 | button { | 74 | button { margin: 40px 0 20px; } |
63 | margin: 40px 0 20px; | ||
64 | } | ||
65 | } | 75 | } |
66 | 76 | ||
67 | .services__info-layer { | 77 | .services__info-layer { |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 2182c9b5f..5e7e35fd8 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -1,130 +1,215 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | %headline { | 3 | %headline { |
4 | color: $theme-gray-light; | ||
4 | font-size: 20px; | 5 | font-size: 20px; |
5 | font-weight: 400; | 6 | font-weight: 400; |
6 | letter-spacing: -1px; | 7 | letter-spacing: -1px; |
7 | color: $theme-gray-light; | ||
8 | 8 | ||
9 | a { | 9 | a { color: $theme-gray-light; } |
10 | color: $theme-gray-light; | 10 | } |
11 | |||
12 | %headline__dark { | ||
13 | color: $dark-theme-gray-lightest; | ||
14 | |||
15 | a { color: $dark-theme-gray-lightest; } | ||
16 | } | ||
17 | |||
18 | .theme__dark { | ||
19 | .settings-wrapper { background: rgba($dark-theme-black, .8); } | ||
20 | |||
21 | .settings { | ||
22 | background: $dark-theme-gray-darkest; | ||
23 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | ||
24 | |||
25 | .settings__header { | ||
26 | background: $dark-theme-gray-darker; | ||
27 | |||
28 | h1, | ||
29 | .settings__header-item { @extend %headline__dark; } | ||
30 | |||
31 | .separator { border-right: 1px solid $dark-theme-gray-dark; } | ||
32 | .mdi { color: $dark-theme-gray-lightest; } | ||
33 | } | ||
34 | |||
35 | .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; } | ||
36 | |||
37 | .settings__close { | ||
38 | background: $dark-theme-gray-darker; | ||
39 | border-left: none; | ||
40 | color: $dark-theme-gray-lightest; | ||
41 | |||
42 | &:hover { background: darken($dark-theme-gray-darker, 5%); } | ||
43 | } | ||
44 | |||
45 | &__settings-group h3 { color: $dark-theme-gray-lightest; } | ||
46 | |||
47 | .settings__message { | ||
48 | border-top: 1px solid $theme-gray-lighter; | ||
49 | color: $dark-theme-gray-lightest; | ||
50 | |||
51 | .mdi { color: $dark-theme-gray-lightest; } | ||
52 | } | ||
53 | |||
54 | .settings__help { color: $dark-theme-gray-lightest; } | ||
55 | |||
56 | .settings__controls { | ||
57 | background: $dark-theme-gray-darker; | ||
58 | |||
59 | .franz-form__button.franz-form__button--secondary { background: $theme-gray-light; } | ||
60 | } | ||
61 | |||
62 | .account { | ||
63 | .account__box { background: $dark-theme-gray-darker; } | ||
64 | |||
65 | .invoices { | ||
66 | td { border-bottom: 1px solid $dark-theme-gray-darker; } | ||
67 | .invoices__action button { color: $theme-brand-primary; } | ||
68 | } | ||
69 | } | ||
70 | |||
71 | .premium-info { | ||
72 | background: $dark-theme-gray-darker; | ||
73 | border: 2px solid $theme-brand-primary; | ||
74 | } | ||
75 | .legal { color: $theme-gray-light; } | ||
76 | } | ||
77 | |||
78 | .settings-navigation { | ||
79 | background: $dark-theme-gray-darker; | ||
80 | border-right: 1px solid $dark-theme-gray-dark; | ||
81 | |||
82 | .settings-navigation__link { | ||
83 | color: $dark-theme-gray-lightest; | ||
84 | |||
85 | .badge { | ||
86 | background: $dark-theme-gray-lighter; | ||
87 | color: $dark-theme-gray-smoke; | ||
88 | } | ||
89 | |||
90 | &:hover { | ||
91 | background: darken($dark-theme-gray-darker, 5%); | ||
92 | |||
93 | .badge { | ||
94 | background: $dark-theme-gray-lighter; | ||
95 | color: $dark-theme-gray-smoke; | ||
96 | } | ||
97 | } | ||
98 | |||
99 | &.is-active { | ||
100 | background: $dark-theme-gray; | ||
101 | color: $dark-theme-gray-smoke; | ||
102 | |||
103 | .badge { | ||
104 | background: $dark-theme-gray-lighter; | ||
105 | color: $dark-theme-gray-smoke; | ||
106 | } | ||
107 | } | ||
108 | } | ||
109 | |||
110 | .settings-navigation__action-badge { background: $theme-brand-danger; } | ||
11 | } | 111 | } |
12 | } | 112 | } |
13 | 113 | ||
14 | .settings-wrapper { | 114 | .settings-wrapper { |
15 | background: rgba(black, 0.5); | 115 | align-items: center; |
16 | position: absolute; | 116 | background: rgba(black, .5); |
17 | width: 100%; | 117 | display: flex; |
18 | height: 100%; | 118 | height: 100%; |
19 | top: 0; | ||
20 | left: 0; | 119 | left: 0; |
21 | z-index: 9998; | ||
22 | display: flex; | ||
23 | justify-content: center; | 120 | justify-content: center; |
24 | align-items: center; | ||
25 | padding: 25px; | 121 | padding: 25px; |
122 | position: absolute; | ||
123 | top: 0; | ||
124 | width: 100%; | ||
125 | z-index: 9998; | ||
26 | 126 | ||
27 | .settings-wrapper__action { | 127 | .settings-wrapper__action { |
28 | position: absolute; | ||
29 | width: 100%; | ||
30 | height: 100%; | 128 | height: 100%; |
31 | top: 0; | ||
32 | left: 0; | 129 | left: 0; |
130 | position: absolute; | ||
131 | top: 0; | ||
132 | width: 100%; | ||
33 | } | 133 | } |
34 | } | 134 | } |
35 | 135 | ||
36 | .settings { | 136 | .settings { |
37 | position: relative; | 137 | background: #FFF; |
138 | border-radius: $theme-border-radius; | ||
139 | box-shadow: 0 20px 50px rgba(black, .5); | ||
38 | display: flex; | 140 | display: flex; |
39 | height: 100%; | 141 | height: 100%; |
40 | width: 100%; | 142 | max-height: 720px; |
41 | max-width: 900px; | 143 | max-width: 900px; |
42 | min-height: 400px; | 144 | min-height: 400px; |
43 | max-height: 720px; | ||
44 | z-index: 9999; | ||
45 | background: #FFF; | ||
46 | border-radius: $theme-border-radius; | ||
47 | box-shadow: 0 20px 50px rgba(black, 0.5); | ||
48 | overflow: hidden; | 145 | overflow: hidden; |
49 | // margin-top: -10%; | 146 | position: relative; |
147 | width: 100%; | ||
148 | z-index: 9999; | ||
50 | 149 | ||
51 | .settings__main { | 150 | .settings__main { |
52 | flex: 1; | ||
53 | display: flex; | 151 | display: flex; |
152 | flex: 1; | ||
54 | flex-direction: column; | 153 | flex-direction: column; |
55 | height: auto; | 154 | height: auto; |
56 | } | 155 | } |
57 | 156 | ||
58 | .settings__header { | 157 | .settings__header { |
59 | display: flex; | ||
60 | align-items: center; | 158 | align-items: center; |
61 | width: calc(100% - 60px); | 159 | background: $theme-gray-lighter; |
160 | display: flex; | ||
62 | height: 50px; | 161 | height: 50px; |
63 | padding: 0 40px; | 162 | padding: 0 40px; |
64 | background: $theme-gray-lighter; | 163 | width: calc(100% - 60px); |
65 | 164 | ||
66 | h1 { | 165 | h1 { |
67 | @extend %headline; | 166 | @extend %headline; |
68 | margin: 0; | 167 | margin: 0; |
69 | } | 168 | } |
70 | 169 | ||
71 | .settings__header-item { | 170 | .settings__header-item { @extend %headline; } |
72 | @extend %headline; | ||
73 | } | ||
74 | 171 | ||
75 | .separator { | 172 | .separator { |
173 | border-right: 1px solid darken($theme-gray-lighter, 10%); | ||
76 | height: 100%; | 174 | height: 100%; |
77 | margin: 0 15px; | 175 | margin: 0 15px; |
78 | border-right: 1px solid darken($theme-gray-lighter, 10%); | ||
79 | transform: skew(15deg) rotate(2deg); | 176 | transform: skew(15deg) rotate(2deg); |
80 | } | 177 | } |
81 | 178 | ||
82 | .mdi { | 179 | .mdi { color: $theme-gray-light; } |
83 | color: $theme-gray-light; | ||
84 | } | ||
85 | } | 180 | } |
86 | 181 | ||
87 | .settings__body { | 182 | .settings__body { |
88 | flex: 1; | 183 | flex: 1; |
89 | padding: 25px 15px 15px 25px; | ||
90 | margin: 15px; | 184 | margin: 15px; |
91 | overflow-y: scroll; | 185 | overflow-y: scroll; |
186 | padding: 25px 15px 15px 25px; | ||
92 | 187 | ||
93 | &::-webkit-scrollbar { | 188 | &::-webkit-scrollbar { width: 8px; } |
94 | width: 8px; | ||
95 | } | ||
96 | 189 | ||
97 | /* Track */ | 190 | /* Track */ |
98 | &::-webkit-scrollbar-track { | 191 | &::-webkit-scrollbar-track { |
99 | -webkit-border-radius: 10px; | ||
100 | border-radius: 10px; | ||
101 | background: none; | 192 | background: none; |
193 | border-radius: 10px; | ||
194 | -webkit-border-radius: 10px; | ||
102 | } | 195 | } |
103 | 196 | ||
104 | /* Handle */ | 197 | /* Handle */ |
105 | &::-webkit-scrollbar-thumb { | 198 | &::-webkit-scrollbar-thumb { |
106 | -webkit-border-radius: 10px; | ||
107 | border-radius: 10px; | ||
108 | background: $theme-gray-lighter; | 199 | background: $theme-gray-lighter; |
200 | border-radius: 10px; | ||
201 | -webkit-border-radius: 10px; | ||
109 | } | 202 | } |
110 | 203 | ||
111 | &::-webkit-scrollbar-thumb:window-inactive { | 204 | &::-webkit-scrollbar-thumb:window-inactive { background: none; } |
112 | background: none; | 205 | .service-flex-grid { display: flex; } |
113 | } | 206 | .service-name { flex: 1px; } |
114 | |||
115 | .service-flex-grid { | ||
116 | display: flex; | ||
117 | } | ||
118 | |||
119 | .service-name { | ||
120 | flex: 1px; | ||
121 | } | ||
122 | 207 | ||
123 | .service-icon { | 208 | .service-icon { |
124 | width: 140px; | ||
125 | float: right; | 209 | float: right; |
126 | margin-top: 30px; | ||
127 | margin-left: 40px; | 210 | margin-left: 40px; |
211 | margin-top: 30px; | ||
212 | width: 140px; | ||
128 | 213 | ||
129 | label { | 214 | label { |
130 | font-weight: bold; | 215 | font-weight: bold; |
@@ -134,51 +219,45 @@ | |||
134 | } | 219 | } |
135 | 220 | ||
136 | .settings__close { | 221 | .settings__close { |
137 | position: absolute; | ||
138 | right: 0; | ||
139 | background: $theme-gray-lighter; | 222 | background: $theme-gray-lighter; |
140 | height: 50px; | ||
141 | padding: 0 20px; | ||
142 | font-size: 20px; | ||
143 | border-left: 1px solid darken($theme-gray-lighter, 5%); | 223 | border-left: 1px solid darken($theme-gray-lighter, 5%); |
144 | color: $theme-gray-light; | 224 | color: $theme-gray-light; |
225 | font-size: 20px; | ||
226 | height: 50px; | ||
227 | padding: 0 20px; | ||
228 | position: absolute; | ||
229 | right: 0; | ||
145 | transition: background $theme-transition-time; | 230 | transition: background $theme-transition-time; |
146 | 231 | ||
147 | &:hover { | 232 | &:hover { background: darken($theme-gray-lighter, 5%); } |
148 | background: darken($theme-gray-lighter, 5%); | ||
149 | } | ||
150 | } | 233 | } |
151 | 234 | ||
152 | .search-input { | 235 | .search-input { margin-bottom: 30px; } |
153 | margin-bottom: 30px; | ||
154 | } | ||
155 | 236 | ||
156 | &__options { | 237 | &__options { |
157 | margin-top: 20px; | ||
158 | flex: 1; | 238 | flex: 1; |
239 | margin-top: 20px; | ||
159 | } | 240 | } |
160 | 241 | ||
161 | &__settings-group { | 242 | &__settings-group { |
162 | margin-top: 10px; | 243 | margin-top: 10px; |
163 | 244 | ||
164 | h3 { | 245 | h3 { |
246 | color: $theme-gray-light; | ||
165 | font-weight: bold; | 247 | font-weight: bold; |
248 | letter-spacing: -.1px; | ||
166 | margin: 25px 0 15px; | 249 | margin: 25px 0 15px; |
167 | color: $theme-gray-light; | ||
168 | letter-spacing: -0.1px; | ||
169 | 250 | ||
170 | &:first-of-type { | 251 | &:first-of-type { margin-top: 0; } |
171 | margin-top: 0; | ||
172 | } | ||
173 | } | 252 | } |
174 | } | 253 | } |
175 | 254 | ||
176 | .settings__message { | 255 | .settings__message { |
256 | border-top: 1px solid $theme-gray-lighter; | ||
257 | color: $theme-gray-light; | ||
177 | display: flex; | 258 | display: flex; |
178 | margin-top: 40px; | 259 | margin-top: 40px; |
179 | padding-top: 15px; | 260 | padding-top: 15px; |
180 | border-top: 1px solid $theme-gray-lighter; | ||
181 | color: $theme-gray-light; | ||
182 | 261 | ||
183 | .mdi { | 262 | .mdi { |
184 | color: $theme-gray-light; | 263 | color: $theme-gray-light; |
@@ -188,69 +267,53 @@ | |||
188 | } | 267 | } |
189 | 268 | ||
190 | .settings__help { | 269 | .settings__help { |
191 | margin: -10px 0 20px 55px;; | ||
192 | font-size: 12px; | ||
193 | color: $theme-gray-light; | 270 | color: $theme-gray-light; |
271 | font-size: 12px; | ||
272 | margin: -10px 0 20px 55px;; | ||
194 | } | 273 | } |
195 | 274 | ||
196 | .settings__controls { | 275 | .settings__controls { |
276 | background: $theme-gray-lighter; | ||
197 | display: flex; | 277 | display: flex; |
278 | height: auto; | ||
198 | justify-content: space-between; | 279 | justify-content: space-between; |
199 | padding: 10px 20px; | 280 | padding: 10px 20px; |
200 | height: auto; | ||
201 | background: $theme-gray-lighter; | ||
202 | 281 | ||
203 | .franz-form__button { | 282 | .franz-form__button { |
204 | &[type='submit'] { | 283 | &[type='submit'] { margin-left: auto; } |
205 | margin-left: auto; | 284 | &.franz-form__button--secondary { background: $theme-gray-light; } |
206 | } | ||
207 | |||
208 | &.franz-form__button--secondary { | ||
209 | background: $theme-gray-light; | ||
210 | } | ||
211 | } | 285 | } |
212 | } | 286 | } |
213 | 287 | ||
214 | .settings__delete-button { | 288 | .settings__delete-button { right: 0; } |
215 | right: 0; | ||
216 | } | ||
217 | 289 | ||
218 | .settings__empty-state { | 290 | .settings__empty-state { |
219 | width: 100%; | 291 | align-items: center; |
292 | align-self: center; | ||
220 | height: auto; | 293 | height: auto; |
221 | min-height: 70%; | 294 | min-height: 70%; |
222 | text-align: center; | 295 | text-align: center; |
223 | align-self: center; | 296 | width: 100%; |
224 | // margin-top: -20px; | ||
225 | align-items: center; | ||
226 | 297 | ||
227 | a.button { | 298 | a.button { margin-top: 40px; } |
228 | margin-top: 40px; | ||
229 | } | ||
230 | } | 299 | } |
231 | 300 | ||
232 | .account { | 301 | .account { |
233 | height: auto; | 302 | height: auto; |
234 | // padding: 20px; | ||
235 | 303 | ||
236 | .account__box { | 304 | .account__box { |
305 | align-items: center; | ||
237 | background: $theme-gray-lightest; | 306 | background: $theme-gray-lightest; |
238 | border-radius: $theme-border-radius; | 307 | border-radius: $theme-border-radius; |
239 | padding: 20px; | ||
240 | margin-bottom: 40px; | 308 | margin-bottom: 40px; |
241 | align-items: center; | 309 | padding: 20px; |
242 | |||
243 | &.account__box--flex { | ||
244 | display: flex; | ||
245 | } | ||
246 | 310 | ||
247 | &.account__box--last { | 311 | &.account__box--flex { display: flex; } |
248 | margin-bottom: 0; | 312 | &.account__box--last { margin-bottom: 0; } |
249 | } | ||
250 | 313 | ||
251 | .auth__button { | 314 | .auth__button { |
252 | width: 100%; | ||
253 | margin-top: 10px; | 315 | margin-top: 10px; |
316 | width: 100%; | ||
254 | } | 317 | } |
255 | } | 318 | } |
256 | 319 | ||
@@ -258,57 +321,40 @@ | |||
258 | margin-right: 20px; | 321 | margin-right: 20px; |
259 | position: relative; | 322 | position: relative; |
260 | 323 | ||
261 | .emoji img { | 324 | .emoji img { width: 30px; } |
262 | width: 30px; | ||
263 | } | ||
264 | } | 325 | } |
265 | 326 | ||
266 | .account__avatar-premium { | 327 | .account__avatar-premium { |
328 | font-size: 26px; | ||
267 | position: absolute; | 329 | position: absolute; |
268 | top: 2px; | ||
269 | right: 2px; | 330 | right: 2px; |
270 | font-size: 26px; | 331 | top: 2px; |
271 | } | 332 | } |
272 | 333 | ||
273 | .account__info { | 334 | .account__info { |
274 | flex: 1; | 335 | flex: 1; |
275 | 336 | ||
276 | h2 { | 337 | h2 { margin-bottom: 5px; } |
277 | margin-bottom: 5px; | 338 | .badge { margin-top: 5px; } |
278 | } | ||
279 | |||
280 | .badge { | ||
281 | margin-top: 5px; | ||
282 | } | ||
283 | } | 339 | } |
284 | 340 | ||
285 | .account__subscription { | 341 | .account__subscription { |
286 | display: flex; | ||
287 | align-items: center; | 342 | align-items: center; |
343 | display: flex; | ||
288 | 344 | ||
289 | .badge { | 345 | .badge { margin-left: 10px; } |
290 | margin-left: 10px; | ||
291 | } | ||
292 | } | ||
293 | |||
294 | .account__subscription-button { | ||
295 | margin-left: auto; | ||
296 | } | ||
297 | |||
298 | .franz-form__button { | ||
299 | white-space: nowrap; | ||
300 | } | 346 | } |
301 | 347 | ||
302 | div { | 348 | .account__subscription-button { margin-left: auto; } |
303 | height: auto; | 349 | .franz-form__button { white-space: nowrap; } |
304 | } | 350 | div { height: auto; } |
305 | 351 | ||
306 | .invoices { | 352 | .invoices { |
307 | width: 100%; | 353 | width: 100%; |
308 | 354 | ||
309 | td { | 355 | td { |
310 | padding: 15px 0; | ||
311 | border-bottom: 1px solid $theme-gray-lighter; | 356 | border-bottom: 1px solid $theme-gray-lighter; |
357 | padding: 15px 0; | ||
312 | } | 358 | } |
313 | 359 | ||
314 | tr:last-of-type td { | 360 | tr:last-of-type td { |
@@ -319,9 +365,7 @@ | |||
319 | .invoices__action { | 365 | .invoices__action { |
320 | text-align: right; | 366 | text-align: right; |
321 | 367 | ||
322 | button { | 368 | button { color: $theme-brand-primary; } |
323 | color: $theme-brand-primary; | ||
324 | } | ||
325 | } | 369 | } |
326 | } | 370 | } |
327 | } | 371 | } |
@@ -331,15 +375,13 @@ | |||
331 | font-size: 40px; | 375 | font-size: 40px; |
332 | margin-bottom: 20px; | 376 | margin-bottom: 20px; |
333 | 377 | ||
334 | img { | 378 | img { width: 40px; } |
335 | width: 40px; | ||
336 | } | ||
337 | } | 379 | } |
338 | 380 | ||
339 | .premium-info { | 381 | .premium-info { |
340 | background: lighten($theme-brand-primary, 40%); | 382 | background: lighten($theme-brand-primary, 40%); |
341 | padding: 20px; | ||
342 | border-radius: $theme-border-radius; | 383 | border-radius: $theme-border-radius; |
384 | padding: 20px; | ||
343 | } | 385 | } |
344 | 386 | ||
345 | .content-tabs .premium-info { | 387 | .content-tabs .premium-info { |
@@ -348,35 +390,33 @@ | |||
348 | } | 390 | } |
349 | 391 | ||
350 | .legal { | 392 | .legal { |
351 | text-align: center; | ||
352 | margin-top: 20px; | ||
353 | color: $theme-gray-light; | 393 | color: $theme-gray-light; |
394 | margin-top: 20px; | ||
395 | text-align: center; | ||
354 | } | 396 | } |
355 | } | 397 | } |
356 | 398 | ||
357 | .settings-navigation { | 399 | .settings-navigation { |
358 | width: 200px; | ||
359 | height: auto; | ||
360 | background: $theme-gray-lightest; | ||
361 | display: flex; | 400 | display: flex; |
401 | background: $theme-gray-lightest; | ||
362 | flex-direction: column; | 402 | flex-direction: column; |
403 | height: auto; | ||
404 | width: 200px; | ||
363 | 405 | ||
364 | .settings-navigation__link { | 406 | .settings-navigation__link { |
365 | display: flex; | ||
366 | align-items: center; | 407 | align-items: center; |
367 | height: 50px; | ||
368 | flex-shrink: 0; | ||
369 | text-decoration: none; | ||
370 | color: $theme-text-color; | 408 | color: $theme-text-color; |
409 | display: flex; | ||
410 | flex-shrink: 0; | ||
411 | height: 50px; | ||
371 | padding: 0 20px; | 412 | padding: 0 20px; |
413 | text-decoration: none; | ||
372 | transition: background $theme-transition-time, color $theme-transition-time; | 414 | transition: background $theme-transition-time, color $theme-transition-time; |
373 | 415 | ||
374 | &:hover { | 416 | &:hover { |
375 | background: darken($theme-gray-lightest, 5%); | 417 | background: darken($theme-gray-lightest, 5%); |
376 | 418 | ||
377 | .badge { | 419 | .badge { background: #FFF; } |
378 | background: #FFF; | ||
379 | } | ||
380 | } | 420 | } |
381 | 421 | ||
382 | &.is-active { | 422 | &.is-active { |
@@ -390,22 +430,20 @@ | |||
390 | } | 430 | } |
391 | } | 431 | } |
392 | 432 | ||
393 | .settings-navigation__expander { | 433 | .settings-navigation__expander { flex: 1; } |
394 | flex: 1; | ||
395 | } | ||
396 | 434 | ||
397 | .badge { | 435 | .badge { |
398 | transition: background $theme-transition-time, color $theme-transition-time; | ||
399 | display: initial; | 436 | display: initial; |
400 | margin-left: 5px; | 437 | margin-left: 5px; |
438 | transition: background $theme-transition-time, color $theme-transition-time; | ||
401 | } | 439 | } |
402 | 440 | ||
403 | .settings-navigation__action-badge { | 441 | .settings-navigation__action-badge { |
404 | display: inline-block; | ||
405 | width: 7px; | ||
406 | height: 7px; | ||
407 | background: $theme-brand-danger; | 442 | background: $theme-brand-danger; |
408 | border-radius: 100%; | 443 | border-radius: 100%; |
444 | display: inline-block; | ||
445 | height: 7px; | ||
409 | margin-left: 5px; | 446 | margin-left: 5px; |
447 | width: 7px; | ||
410 | } | 448 | } |
411 | } | 449 | } |
diff --git a/src/styles/status-bar-target-url.scss b/src/styles/status-bar-target-url.scss index bc7438be9..36f69df28 100644 --- a/src/styles/status-bar-target-url.scss +++ b/src/styles/status-bar-target-url.scss | |||
@@ -1,14 +1,14 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .status-bar-target-url { | 3 | .status-bar-target-url { |
4 | height: auto; | ||
5 | background: $theme-gray-lighter; | 4 | background: $theme-gray-lighter; |
6 | padding: 4px; | 5 | border-top-left-radius: 5px; |
7 | position: absolute; | ||
8 | box-shadow: 0 0 8px rgba(black, 0.2); | ||
9 | font-size: 12px; | ||
10 | color: $theme-gray-dark; | ||
11 | bottom: 0; | 6 | bottom: 0; |
7 | box-shadow: 0 0 8px rgba(black, .2); | ||
8 | color: $theme-gray-dark; | ||
9 | font-size: 12px; | ||
10 | height: auto; | ||
12 | right: 0; | 11 | right: 0; |
13 | border-top-left-radius: 5px; | 12 | padding: 4px; |
13 | position: absolute; | ||
14 | } | 14 | } |
diff --git a/src/styles/subscription-popup.scss b/src/styles/subscription-popup.scss index b6f232fcb..fb4795d6c 100644 --- a/src/styles/subscription-popup.scss +++ b/src/styles/subscription-popup.scss | |||
@@ -1,20 +1,15 @@ | |||
1 | .subscription-popup { | 1 | .subscription-popup { |
2 | height: 100%; | 2 | height: 100%; |
3 | 3 | ||
4 | &__content { | 4 | &__content { height: calc(100% - 60px); } |
5 | height: calc(100% - 60px); | 5 | &__webview { height: 100%; } |
6 | } | ||
7 | |||
8 | &__webview { | ||
9 | height: 100%; | ||
10 | } | ||
11 | 6 | ||
12 | &__toolbar { | 7 | &__toolbar { |
13 | height: 60px; | ||
14 | background: $theme-gray-lightest; | 8 | background: $theme-gray-lightest; |
9 | border-top: 1px solid $theme-gray-lighter; | ||
15 | display: flex; | 10 | display: flex; |
11 | height: 60px; | ||
16 | justify-content: space-between; | 12 | justify-content: space-between; |
17 | padding: 10px; | 13 | padding: 10px; |
18 | border-top: 1px solid $theme-gray-lighter; | ||
19 | } | 14 | } |
20 | } | 15 | } |
diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss index 8bfb68d23..70fb41cde 100644 --- a/src/styles/subscription.scss +++ b/src/styles/subscription.scss | |||
@@ -3,63 +3,47 @@ | |||
3 | margin: 10px 0; | 3 | margin: 10px 0; |
4 | 4 | ||
5 | li { | 5 | li { |
6 | height: 30px; | ||
7 | align-items: center; | 6 | align-items: center; |
8 | display: flex; | 7 | display: flex; |
8 | height: 30px; | ||
9 | 9 | ||
10 | &:before { | 10 | &:before { |
11 | content: "👍"; | 11 | content: "👍"; |
12 | margin-right: 10px; | 12 | margin-right: 10px; |
13 | } | 13 | } |
14 | 14 | ||
15 | .badge { | 15 | .badge { margin-left: 10px; } |
16 | margin-left: 10px; | ||
17 | } | ||
18 | } | 16 | } |
19 | } | 17 | } |
20 | 18 | ||
21 | .subscription__premium-info { | 19 | .subscription__premium-info { margin: 15px 0 25px; } |
22 | margin: 15px 0 25px; | ||
23 | } | ||
24 | } | 20 | } |
25 | 21 | ||
26 | .paymentTiers { | 22 | .paymentTiers .franz-form__radio-wrapper { |
27 | .franz-form__radio-wrapper { | 23 | flex-flow: wrap; |
28 | flex-flow: wrap; | ||
29 | 24 | ||
30 | .franz-form__radio { | 25 | .franz-form__radio { |
31 | width: 32%; | 26 | flex: initial; |
32 | flex: initial; | 27 | margin-right: 2%; |
33 | margin-right: 2%; | 28 | width: 32%; |
34 | 29 | ||
35 | &:nth-child(3) { | 30 | &:nth-child(3) { margin-right: 0; } |
36 | margin-right: 0; | ||
37 | } | ||
38 | 31 | ||
39 | &:nth-child(4) { | 32 | &:nth-child(4) { |
40 | margin-right: 0; | 33 | margin-right: 0; |
41 | margin-top: 2%; | 34 | margin-top: 2%; |
42 | width: 100%; | 35 | width: 100%; |
43 | } | ||
44 | } | 36 | } |
45 | } | 37 | } |
46 | } | 38 | } |
47 | 39 | ||
48 | .settings { | 40 | .settings .paymentTiers .franz-form__radio-wrapper .franz-form__radio { |
49 | .paymentTiers { | 41 | width: 49%; |
50 | .franz-form__radio-wrapper { | ||
51 | .franz-form__radio { | ||
52 | width: 49%; | ||
53 | 42 | ||
54 | &:nth-child(2) { | 43 | &:nth-child(2) { margin-right: 0; } |
55 | margin-right: 0; | ||
56 | } | ||
57 | 44 | ||
58 | &:nth-child(3) { | 45 | &:nth-child(3) { |
59 | margin-top: 2%; | 46 | margin-top: 2%; |
60 | width: 100%; | 47 | width: 100%; |
61 | } | ||
62 | } | ||
63 | } | ||
64 | } | 48 | } |
65 | } | 49 | } |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index ac48aabd6..cbd833f04 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -1,104 +1,88 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .tab-item { | ||
4 | &.is-active { | ||
5 | background: $dark-theme-gray; | ||
6 | |||
7 | .tab-item__icon { margin-left: -4px; } | ||
8 | } | ||
9 | |||
10 | &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); } | ||
11 | .tab-item__icon { width: 34px; } | ||
12 | } | ||
13 | |||
3 | .tabs { | 14 | .tabs { |
4 | display: flex; | 15 | display: flex; |
5 | // flex: 1; | ||
6 | flex-direction: column; | 16 | flex-direction: column; |
7 | flex-shrink: 1; | 17 | flex-shrink: 1; |
8 | // align-items: center; | ||
9 | // height: auto; | ||
10 | 18 | ||
11 | .placeholder { | 19 | .placeholder { |
12 | width: 100%; | ||
13 | height: 40px; | 20 | height: 40px; |
21 | width: 100%; | ||
14 | } | 22 | } |
15 | } | 23 | } |
16 | 24 | ||
17 | .tab-item { | 25 | .tab-item { |
18 | display: flex; | ||
19 | justify-content: center; | ||
20 | align-items: center; | 26 | align-items: center; |
21 | position: relative; | 27 | display: flex; |
22 | width: $theme-sidebar-width; | ||
23 | height: 65px; | 28 | height: 65px; |
29 | justify-content: center; | ||
24 | min-height: 50px; | 30 | min-height: 50px; |
31 | position: relative; | ||
25 | transition: background $theme-transition-time; | 32 | transition: background $theme-transition-time; |
33 | width: $theme-sidebar-width; | ||
26 | 34 | ||
27 | &.is-active { | 35 | &.is-active { |
28 | border-left: 4px solid $theme-brand-primary; | ||
29 | background: lighten($theme-brand-primary, 35%); | 36 | background: lighten($theme-brand-primary, 35%); |
37 | border-left: 4px solid $theme-brand-primary; | ||
30 | 38 | ||
31 | .tab-item__icon { | 39 | .tab-item__icon { margin-left: -4px; } |
32 | margin-left: -4px; | ||
33 | } | ||
34 | } | ||
35 | |||
36 | &.is-disabled { | ||
37 | .tab-item__icon { | ||
38 | filter: grayscale(100%) opacity(0.2); | ||
39 | } | ||
40 | } | ||
41 | |||
42 | &.has-custom-icon { | ||
43 | .tab-item__icon { | ||
44 | border-radius: $theme-border-radius; | ||
45 | // border: 1px solid $theme-gray-lighter; | ||
46 | // width: 32px; | ||
47 | } | ||
48 | } | 40 | } |
49 | 41 | ||
50 | &:active { | 42 | &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); } |
51 | .tab-item__icon { | 43 | &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; } |
52 | opacity: 0.7; | 44 | &:active .tab-item__icon { opacity: .7; } |
53 | } | ||
54 | } | ||
55 | 45 | ||
56 | .tab-item__icon { | 46 | .tab-item__icon { |
57 | width: 30px; | ||
58 | height: auto; | 47 | height: auto; |
48 | width: 30px; | ||
59 | } | 49 | } |
60 | 50 | ||
61 | .tab-item__message-count { | 51 | .tab-item__message-count { |
62 | min-width: 17px; | 52 | align-items: center; |
63 | min-height: 17px; | ||
64 | background: $theme-brand-danger; | 53 | background: $theme-brand-danger; |
65 | color: #FFF; | ||
66 | border-radius: 20px; | 54 | border-radius: 20px; |
67 | padding: 0px 5px; | ||
68 | font-size: 11px; | ||
69 | position: absolute; | ||
70 | right: 8px; | ||
71 | bottom: 8px; | 55 | bottom: 8px; |
56 | color: #FFF; | ||
72 | display: flex; | 57 | display: flex; |
58 | font-size: 11px; | ||
73 | justify-content: center; | 59 | justify-content: center; |
74 | align-items: center; | 60 | min-height: 17px; |
61 | min-width: 17px; | ||
62 | padding: 0px 5px; | ||
63 | position: absolute; | ||
64 | right: 8px; | ||
75 | 65 | ||
76 | &.is-indirect { | 66 | &.is-indirect { padding-top: 0; } |
77 | padding-top: 0px; | ||
78 | } | ||
79 | } | 67 | } |
80 | 68 | ||
81 | .tab-item__info-badge { | 69 | .tab-item__info-badge { |
82 | width: 17px; | 70 | align-items: center; |
83 | height: 17px; | ||
84 | background: $theme-gray-light; | 71 | background: $theme-gray-light; |
85 | color: $theme-gray-lighter; | 72 | bottom: 8px; |
86 | border-radius: 20px; | 73 | border-radius: 20px; |
87 | padding: 0px 5px; | 74 | color: $theme-gray-lighter; |
75 | display: flex; | ||
88 | font-size: 11px; | 76 | font-size: 11px; |
77 | height: 17px; | ||
78 | justify-content: center; | ||
79 | padding: 0px 5px; | ||
89 | position: absolute; | 80 | position: absolute; |
90 | right: 8px; | 81 | right: 8px; |
91 | bottom: 8px; | 82 | width: 17px; |
92 | display: flex; | ||
93 | justify-content: center; | ||
94 | align-items: center; | ||
95 | 83 | ||
96 | &.is-indirect { | 84 | &.is-indirect { padding-top: 0; } |
97 | padding-top: 0px; | ||
98 | } | ||
99 | } | 85 | } |
100 | 86 | ||
101 | &.is-reordering { | 87 | &.is-reordering { z-index: 99999; } |
102 | z-index: 99999; | ||
103 | } | ||
104 | } | 88 | } |
diff --git a/src/styles/title-bar.scss b/src/styles/title-bar.scss new file mode 100644 index 000000000..885eb94c4 --- /dev/null +++ b/src/styles/title-bar.scss | |||
@@ -0,0 +1,80 @@ | |||
1 | @import './config.scss'; | ||
2 | |||
3 | .theme__dark #electron-app-title-bar { | ||
4 | background: $dark-theme-gray-darker; | ||
5 | |||
6 | .toolbar-dropdown { | ||
7 | &.open > .toolbar-button > button { | ||
8 | background: $dark-theme-gray-light; | ||
9 | color: $dark-theme-gray-lightest; | ||
10 | } | ||
11 | |||
12 | &:not(.open) { | ||
13 | .menu-item .menu-label { opacity: 1; } | ||
14 | > .toolbar-button > button:hover { | ||
15 | background: $dark-theme-gray-darkest; | ||
16 | } | ||
17 | } | ||
18 | } | ||
19 | |||
20 | #app-menu-bar #foldout-container .foldout { | ||
21 | color: $dark-theme-gray-lightest; | ||
22 | |||
23 | .menu-pane { | ||
24 | background: $dark-theme-gray-light; | ||
25 | |||
26 | .menu-item { | ||
27 | .accelerator { | ||
28 | color: lighten($dark-theme-gray-light, 20%); | ||
29 | } | ||
30 | } | ||
31 | |||
32 | hr { | ||
33 | border-color: $dark-theme-gray-lighter; | ||
34 | } | ||
35 | } | ||
36 | } | ||
37 | |||
38 | .list .ReactVirtualized__Grid { | ||
39 | background: $dark-theme-gray-light; | ||
40 | } | ||
41 | } | ||
42 | |||
43 | #electron-app-title-bar { | ||
44 | background: $theme-gray-lightest; | ||
45 | border-bottom: 0; | ||
46 | box-shadow: 0 0 8px rgba(black, .1); | ||
47 | |||
48 | span { line-height: normal; } | ||
49 | |||
50 | div { height: auto; } | ||
51 | |||
52 | .toolbar-dropdown { | ||
53 | &.open { box-shadow: 0 0 8px rgba(black, 0.1); } | ||
54 | |||
55 | &:not(.open) { | ||
56 | .menu-item .menu-label { opacity: 1; } | ||
57 | > .toolbar-button > button:hover { background: $theme-brand-primary; } | ||
58 | } | ||
59 | } | ||
60 | |||
61 | .list-item { | ||
62 | .menu-item { | ||
63 | border-radius: $theme-border-radius-small; | ||
64 | margin: 4px; | ||
65 | } | ||
66 | |||
67 | &.selected, | ||
68 | &.selected:focus { | ||
69 | background: none; | ||
70 | |||
71 | .menu-item { background: $theme-brand-primary; } | ||
72 | } | ||
73 | } | ||
74 | |||
75 | .menu-pane { | ||
76 | border-bottom-left-radius: $theme-border-radius-small; | ||
77 | border-bottom-right-radius: $theme-border-radius-small; | ||
78 | box-shadow: 0 0 10px rgba(black, .5); | ||
79 | } | ||
80 | } | ||
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss index 5b47e6495..0ce0c3379 100644 --- a/src/styles/toggle.scss +++ b/src/styles/toggle.scss | |||
@@ -4,44 +4,46 @@ $toggle-size: 14px; | |||
4 | $toggle-width: 40px; | 4 | $toggle-width: 40px; |
5 | $toggle-button-size: 22px; | 5 | $toggle-button-size: 22px; |
6 | 6 | ||
7 | .franz-form { | 7 | .theme__dark .franz-form .franz-form__toggle-wrapper .franz-form__toggle { |
8 | .franz-form__toggle-wrapper { | 8 | background: $dark-theme-gray; |
9 | display: flex; | 9 | border-radius: $toggle-size / 2; |
10 | flex-direction: row; | ||
11 | 10 | ||
12 | .franz-form__label { | 11 | .franz-form__toggle-button { |
13 | margin-left: 20px; | 12 | background: $dark-theme-gray-lighter; |
13 | box-shadow: 0 1px 4px rgba($dark-theme-black, .3); | ||
14 | } | ||
15 | } | ||
16 | |||
17 | .franz-form .franz-form__toggle-wrapper { | ||
18 | display: flex; | ||
19 | flex-direction: row; | ||
20 | |||
21 | .franz-form__label { margin-left: 20px; } | ||
22 | |||
23 | .franz-form__toggle { | ||
24 | background: $theme-gray-lighter; | ||
25 | border-radius: $theme-border-radius; | ||
26 | height: $toggle-size; | ||
27 | position: relative; | ||
28 | width: $toggle-width; | ||
29 | |||
30 | .franz-form__toggle-button { | ||
31 | background: $theme-gray-light; | ||
32 | border-radius: 100%; | ||
33 | box-shadow: 0 1px 4px rgba(0, 0, 0, .3); | ||
34 | height: $toggle-size - 2; | ||
35 | left: 1px; | ||
36 | top: 1px; | ||
37 | position: absolute; | ||
38 | transition: all .5s; | ||
39 | width: $toggle-size - 2; | ||
14 | } | 40 | } |
15 | 41 | ||
16 | .franz-form__toggle { | 42 | &.is-active .franz-form__toggle-button { |
17 | width: $toggle-width; | 43 | background: $theme-brand-primary; |
18 | height: $toggle-size; | 44 | left: $toggle-width - $toggle-size - 3;; |
19 | position: relative; | ||
20 | background: $theme-gray-lighter; | ||
21 | border-radius: $theme-border-radius; | ||
22 | |||
23 | .franz-form__toggle-button { | ||
24 | position: absolute; | ||
25 | left: 0; | ||
26 | top: -($toggle-button-size - $toggle-size) / 2; | ||
27 | width: $toggle-button-size; | ||
28 | height: $toggle-button-size; | ||
29 | background: $theme-gray-light; | ||
30 | border-radius: 100%; | ||
31 | transition: all 0.5s; | ||
32 | box-shadow: 0 1px 4px rgba(0,0,0,0.3); | ||
33 | } | ||
34 | |||
35 | &.is-active { | ||
36 | .franz-form__toggle-button { | ||
37 | left: $toggle-width - $toggle-button-size; | ||
38 | background: $theme-brand-primary; | ||
39 | } | ||
40 | } | ||
41 | |||
42 | input { | ||
43 | display: none; | ||
44 | } | ||
45 | } | 45 | } |
46 | |||
47 | input { display: none; } | ||
46 | } | 48 | } |
47 | } | 49 | } |
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss index 1194e7fbb..5700e994c 100644 --- a/src/styles/tooltip.scss +++ b/src/styles/tooltip.scss | |||
@@ -1,4 +1,4 @@ | |||
1 | .__react_component_tooltip { | 1 | .__react_component_tooltip { |
2 | padding: 10px !important; | ||
3 | height: auto; | 2 | height: auto; |
3 | padding: 10px !important; | ||
4 | } | 4 | } |
diff --git a/src/styles/type.scss b/src/styles/type.scss index cacbec482..135d32da0 100644 --- a/src/styles/type.scss +++ b/src/styles/type.scss | |||
@@ -1,6 +1,12 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | @import './mixins.scss'; | 2 | @import './mixins.scss'; |
3 | 3 | ||
4 | .theme__dark { | ||
5 | a { color: $dark-theme-gray-smoke; } | ||
6 | .label { color: $dark-theme-gray-lightest; } | ||
7 | .footnote { color: $dark-theme-gray-lightest; } | ||
8 | } | ||
9 | |||
4 | h1 { | 10 | h1 { |
5 | font-size: 30px; | 11 | font-size: 30px; |
6 | font-weight: 300; | 12 | font-weight: 300; |
@@ -15,38 +21,32 @@ h2 { | |||
15 | margin-bottom: 25px; | 21 | margin-bottom: 25px; |
16 | margin-top: 55px; | 22 | margin-top: 55px; |
17 | 23 | ||
18 | &:first-of-type { | 24 | &:first-of-type { margin-top: 0; } |
19 | margin-top: 0; | ||
20 | } | ||
21 | } | 25 | } |
22 | 26 | ||
23 | p { | 27 | p { |
24 | margin-bottom: 10px; | 28 | margin-bottom: 10px; |
25 | line-height: 1.7rem; | 29 | line-height: 1.7rem; |
26 | 30 | ||
27 | &:last-of-type { | 31 | &:last-of-type { margin-bottom: 0; } |
28 | margin-bottom: 0; | ||
29 | } | ||
30 | } | 32 | } |
31 | 33 | ||
32 | strong { | 34 | strong { font-weight: bold; } |
33 | font-weight: bold; | ||
34 | } | ||
35 | 35 | ||
36 | a { | 36 | a { |
37 | text-decoration: none; | ||
38 | color: $theme-text-color; | 37 | color: $theme-text-color; |
38 | text-decoration: none; | ||
39 | 39 | ||
40 | &.button { | 40 | &.button { |
41 | position: relative; | ||
42 | background: none; | 41 | background: none; |
43 | display: inline-block; | ||
44 | padding: 10px 20px; | ||
45 | border: 2px solid $theme-brand-primary; | 42 | border: 2px solid $theme-brand-primary; |
46 | color: $theme-brand-primary; | ||
47 | border-radius: 3px; | 43 | border-radius: 3px; |
48 | transition: background 0.5s, color 0.5s; | 44 | color: $theme-brand-primary; |
45 | display: inline-block; | ||
46 | padding: 10px 20px; | ||
47 | position: relative; | ||
49 | text-align: center; | 48 | text-align: center; |
49 | transition: background .5s, color .5s; | ||
50 | 50 | ||
51 | &:hover { | 51 | &:hover { |
52 | background: darken($theme-brand-primary, 5%); | 52 | background: darken($theme-brand-primary, 5%); |
@@ -54,25 +54,19 @@ a { | |||
54 | } | 54 | } |
55 | } | 55 | } |
56 | 56 | ||
57 | &.link { | 57 | &.link { color: $theme-brand-primary; } |
58 | color: $theme-brand-primary; | ||
59 | } | ||
60 | } | 58 | } |
61 | 59 | ||
62 | .error-message, .error-message:last-of-type { | 60 | .error-message, .error-message:last-of-type { |
63 | margin: 10px 0; | ||
64 | color: $theme-brand-danger; | 61 | color: $theme-brand-danger; |
62 | margin: 10px 0; | ||
65 | } | 63 | } |
66 | 64 | ||
67 | .center { | 65 | .center { text-align: center; } |
68 | text-align: center; | ||
69 | } | ||
70 | 66 | ||
71 | .label { | 67 | .label { @include formLabel(); } |
72 | @include formLabel(); | ||
73 | } | ||
74 | 68 | ||
75 | .footnote { | 69 | .footnote { |
76 | font-size: 12px; | ||
77 | color: $theme-gray-light; | 70 | color: $theme-gray-light; |
78 | } \ No newline at end of file | 71 | font-size: 12px; |
72 | } | ||
diff --git a/src/styles/util.scss b/src/styles/util.scss index 3faad8db3..cc93f79ab 100644 --- a/src/styles/util.scss +++ b/src/styles/util.scss | |||
@@ -1,16 +1,16 @@ | |||
1 | .scroll-container { | 1 | .scroll-container { |
2 | height: 100%; | ||
3 | flex: 1; | 2 | flex: 1; |
4 | overflow-y: scroll; | 3 | height: 100%; |
5 | overflow-x: hidden; | 4 | overflow-x: hidden; |
5 | overflow-y: scroll; | ||
6 | } | 6 | } |
7 | 7 | ||
8 | .loader { | 8 | .loader { |
9 | position: relative; | ||
10 | z-index: 9999; | ||
11 | display: block; | 9 | display: block; |
12 | width: 100%; | ||
13 | height: 40px; | 10 | height: 40px; |
11 | position: relative; | ||
12 | width: 100%; | ||
13 | z-index: 9999; | ||
14 | } | 14 | } |
15 | 15 | ||
16 | .align-middle { | 16 | .align-middle { |
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index a12069ba4..b3d6515b1 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss | |||
@@ -1,92 +1,84 @@ | |||
1 | .auth { | 1 | .auth .welcome { |
2 | .welcome { | 2 | &__content { |
3 | 3 | align-items: center; | |
4 | &__content { | 4 | color: #FFF; |
5 | display: flex; | 5 | display: flex; |
6 | align-items: center; | 6 | justify-content: center; |
7 | justify-content: center; | 7 | } |
8 | color: #FFF; | ||
9 | } | ||
10 | |||
11 | &__logo { | ||
12 | width: 100px; | ||
13 | } | ||
14 | 8 | ||
15 | &__text { | 9 | &__logo { width: 100px; } |
16 | margin-left: 40px; | ||
17 | padding-left: 40px; | ||
18 | border-left: 1px solid #FFF; | ||
19 | 10 | ||
20 | h1 { | 11 | &__text { |
21 | font-size: 60px; | 12 | border-left: 1px solid #FFF; |
22 | letter-spacing: -0.4rem; | 13 | margin-left: 40px; |
23 | margin-bottom: 5px; | 14 | padding-left: 40px; |
24 | } | ||
25 | 15 | ||
26 | h2 { | 16 | h1 { |
27 | margin-left: 2px; | 17 | font-size: 60px; |
28 | margin-bottom: 0; | 18 | letter-spacing: -.4rem; |
29 | } | 19 | margin-bottom: 5px; |
30 | } | 20 | } |
31 | 21 | ||
32 | &__services { | 22 | h2 { |
33 | width: 100%; | 23 | margin-bottom: 0; |
34 | max-width: 800px; | 24 | margin-left: 2px; |
35 | height: 100%; | ||
36 | max-height: 600px; | ||
37 | margin-left: -450px; | ||
38 | } | 25 | } |
26 | } | ||
39 | 27 | ||
40 | &__buttons { | 28 | &__services { |
41 | display: block; | 29 | height: 100%; |
42 | margin-top: 100px; | 30 | margin-left: -450px; |
43 | text-align: center; | 31 | max-height: 600px; |
32 | max-width: 800px; | ||
33 | width: 100%; | ||
34 | } | ||
44 | 35 | ||
45 | .button:first-of-type { | 36 | &__buttons { |
46 | margin-right: 25px; | 37 | display: block; |
47 | } | 38 | margin-top: 100px; |
48 | } | 39 | text-align: center; |
49 | 40 | ||
50 | .button { | 41 | .button:first-of-type { margin-right: 25px; } |
51 | border-color: #FFF; | 42 | } |
52 | color: #FFF; | ||
53 | 43 | ||
54 | &:hover { | 44 | .button { |
55 | background: #FFF; | 45 | border-color: #FFF; |
56 | color: $theme-brand-primary; | 46 | color: #FFF; |
57 | } | ||
58 | 47 | ||
59 | &__inverted { | 48 | &:hover { |
60 | background: #FFF; | 49 | background: #FFF; |
61 | color: $theme-brand-primary; | 50 | color: $theme-brand-primary; |
62 | } | ||
63 | &__inverted:hover { | ||
64 | background: none; | ||
65 | color: #FFF; | ||
66 | } | ||
67 | } | 51 | } |
68 | 52 | ||
69 | &__featured-services { | 53 | &__inverted { |
70 | text-align: center; | ||
71 | width: 480px; | ||
72 | margin: 80px auto 0 auto; | ||
73 | display: flex; | ||
74 | align-items: center; | ||
75 | flex-wrap: wrap; | ||
76 | background: #FFF; | 54 | background: #FFF; |
77 | border-radius: 6px; | 55 | color: $theme-brand-primary; |
78 | padding: 20px 20px 5px; | ||
79 | } | 56 | } |
80 | 57 | ||
81 | &__featured-service { | 58 | &__inverted:hover { |
82 | width: 35px; | 59 | background: none; |
83 | height: 35px; | 60 | color: #FFF; |
84 | margin: 0 10px 15px; | ||
85 | transition: 0.5s filter, 0.5s opacity; | ||
86 | |||
87 | img { | ||
88 | width: 35px; | ||
89 | } | ||
90 | } | 61 | } |
91 | } | 62 | } |
63 | |||
64 | &__featured-services { | ||
65 | align-items: center; | ||
66 | background: #FFF; | ||
67 | border-radius: 6px; | ||
68 | display: flex; | ||
69 | flex-wrap: wrap; | ||
70 | margin: 80px auto 0 auto; | ||
71 | padding: 20px 20px 5px; | ||
72 | text-align: center; | ||
73 | width: 480px; | ||
74 | } | ||
75 | |||
76 | &__featured-service { | ||
77 | margin: 0 10px 15px; | ||
78 | height: 35px; | ||
79 | transition: .5s filter, .5s opacity; | ||
80 | width: 35px; | ||
81 | |||
82 | img { width: 35px; } | ||
83 | } | ||
92 | } | 84 | } |