diff options
Diffstat (limited to 'src/styles/settings.scss')
-rw-r--r-- | src/styles/settings.scss | 357 |
1 files changed, 200 insertions, 157 deletions
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 2182c9b5f..f94ca114d 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,50 @@ | |||
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; | 252 | |
253 | .badge { | ||
254 | font-weight: normal; | ||
255 | margin-left: 10px; | ||
172 | } | 256 | } |
173 | } | 257 | } |
174 | } | 258 | } |
175 | 259 | ||
176 | .settings__message { | 260 | .settings__message { |
261 | border-top: 1px solid $theme-gray-lighter; | ||
262 | color: $theme-gray-light; | ||
177 | display: flex; | 263 | display: flex; |
178 | margin-top: 40px; | 264 | margin-top: 40px; |
179 | padding-top: 15px; | 265 | padding-top: 15px; |
180 | border-top: 1px solid $theme-gray-lighter; | ||
181 | color: $theme-gray-light; | ||
182 | 266 | ||
183 | .mdi { | 267 | .mdi { |
184 | color: $theme-gray-light; | 268 | color: $theme-gray-light; |
@@ -188,69 +272,53 @@ | |||
188 | } | 272 | } |
189 | 273 | ||
190 | .settings__help { | 274 | .settings__help { |
191 | margin: -10px 0 20px 55px;; | ||
192 | font-size: 12px; | ||
193 | color: $theme-gray-light; | 275 | color: $theme-gray-light; |
276 | font-size: 12px; | ||
277 | margin: -10px 0 20px 55px;; | ||
194 | } | 278 | } |
195 | 279 | ||
196 | .settings__controls { | 280 | .settings__controls { |
281 | background: $theme-gray-lighter; | ||
197 | display: flex; | 282 | display: flex; |
283 | height: auto; | ||
198 | justify-content: space-between; | 284 | justify-content: space-between; |
199 | padding: 10px 20px; | 285 | padding: 10px 20px; |
200 | height: auto; | ||
201 | background: $theme-gray-lighter; | ||
202 | 286 | ||
203 | .franz-form__button { | 287 | .franz-form__button { |
204 | &[type='submit'] { | 288 | &[type='submit'] { margin-left: auto; } |
205 | margin-left: auto; | 289 | &.franz-form__button--secondary { background: $theme-gray-light; } |
206 | } | ||
207 | |||
208 | &.franz-form__button--secondary { | ||
209 | background: $theme-gray-light; | ||
210 | } | ||
211 | } | 290 | } |
212 | } | 291 | } |
213 | 292 | ||
214 | .settings__delete-button { | 293 | .settings__delete-button { right: 0; } |
215 | right: 0; | ||
216 | } | ||
217 | 294 | ||
218 | .settings__empty-state { | 295 | .settings__empty-state { |
219 | width: 100%; | 296 | align-items: center; |
297 | align-self: center; | ||
220 | height: auto; | 298 | height: auto; |
221 | min-height: 70%; | 299 | min-height: 70%; |
222 | text-align: center; | 300 | text-align: center; |
223 | align-self: center; | 301 | width: 100%; |
224 | // margin-top: -20px; | ||
225 | align-items: center; | ||
226 | 302 | ||
227 | a.button { | 303 | a.button { margin-top: 40px; } |
228 | margin-top: 40px; | ||
229 | } | ||
230 | } | 304 | } |
231 | 305 | ||
232 | .account { | 306 | .account { |
233 | height: auto; | 307 | height: auto; |
234 | // padding: 20px; | ||
235 | 308 | ||
236 | .account__box { | 309 | .account__box { |
310 | align-items: center; | ||
237 | background: $theme-gray-lightest; | 311 | background: $theme-gray-lightest; |
238 | border-radius: $theme-border-radius; | 312 | border-radius: $theme-border-radius; |
239 | padding: 20px; | ||
240 | margin-bottom: 40px; | 313 | margin-bottom: 40px; |
241 | align-items: center; | 314 | padding: 20px; |
242 | |||
243 | &.account__box--flex { | ||
244 | display: flex; | ||
245 | } | ||
246 | 315 | ||
247 | &.account__box--last { | 316 | &.account__box--flex { display: flex; } |
248 | margin-bottom: 0; | 317 | &.account__box--last { margin-bottom: 0; } |
249 | } | ||
250 | 318 | ||
251 | .auth__button { | 319 | .auth__button { |
252 | width: 100%; | ||
253 | margin-top: 10px; | 320 | margin-top: 10px; |
321 | width: 100%; | ||
254 | } | 322 | } |
255 | } | 323 | } |
256 | 324 | ||
@@ -258,57 +326,40 @@ | |||
258 | margin-right: 20px; | 326 | margin-right: 20px; |
259 | position: relative; | 327 | position: relative; |
260 | 328 | ||
261 | .emoji img { | 329 | .emoji img { width: 30px; } |
262 | width: 30px; | ||
263 | } | ||
264 | } | 330 | } |
265 | 331 | ||
266 | .account__avatar-premium { | 332 | .account__avatar-premium { |
333 | font-size: 26px; | ||
267 | position: absolute; | 334 | position: absolute; |
268 | top: 2px; | ||
269 | right: 2px; | 335 | right: 2px; |
270 | font-size: 26px; | 336 | top: 2px; |
271 | } | 337 | } |
272 | 338 | ||
273 | .account__info { | 339 | .account__info { |
274 | flex: 1; | 340 | flex: 1; |
275 | 341 | ||
276 | h2 { | 342 | h2 { margin-bottom: 5px; } |
277 | margin-bottom: 5px; | 343 | .badge { margin-top: 5px; } |
278 | } | ||
279 | |||
280 | .badge { | ||
281 | margin-top: 5px; | ||
282 | } | ||
283 | } | 344 | } |
284 | 345 | ||
285 | .account__subscription { | 346 | .account__subscription { |
286 | display: flex; | ||
287 | align-items: center; | 347 | align-items: center; |
348 | display: flex; | ||
288 | 349 | ||
289 | .badge { | 350 | .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 | } | 351 | } |
301 | 352 | ||
302 | div { | 353 | .account__subscription-button { margin-left: auto; } |
303 | height: auto; | 354 | .franz-form__button { white-space: nowrap; } |
304 | } | 355 | div { height: auto; } |
305 | 356 | ||
306 | .invoices { | 357 | .invoices { |
307 | width: 100%; | 358 | width: 100%; |
308 | 359 | ||
309 | td { | 360 | td { |
310 | padding: 15px 0; | ||
311 | border-bottom: 1px solid $theme-gray-lighter; | 361 | border-bottom: 1px solid $theme-gray-lighter; |
362 | padding: 15px 0; | ||
312 | } | 363 | } |
313 | 364 | ||
314 | tr:last-of-type td { | 365 | tr:last-of-type td { |
@@ -319,9 +370,7 @@ | |||
319 | .invoices__action { | 370 | .invoices__action { |
320 | text-align: right; | 371 | text-align: right; |
321 | 372 | ||
322 | button { | 373 | button { color: $theme-brand-primary; } |
323 | color: $theme-brand-primary; | ||
324 | } | ||
325 | } | 374 | } |
326 | } | 375 | } |
327 | } | 376 | } |
@@ -331,15 +380,13 @@ | |||
331 | font-size: 40px; | 380 | font-size: 40px; |
332 | margin-bottom: 20px; | 381 | margin-bottom: 20px; |
333 | 382 | ||
334 | img { | 383 | img { width: 40px; } |
335 | width: 40px; | ||
336 | } | ||
337 | } | 384 | } |
338 | 385 | ||
339 | .premium-info { | 386 | .premium-info { |
340 | background: lighten($theme-brand-primary, 40%); | 387 | background: lighten($theme-brand-primary, 40%); |
341 | padding: 20px; | ||
342 | border-radius: $theme-border-radius; | 388 | border-radius: $theme-border-radius; |
389 | padding: 20px; | ||
343 | } | 390 | } |
344 | 391 | ||
345 | .content-tabs .premium-info { | 392 | .content-tabs .premium-info { |
@@ -348,35 +395,33 @@ | |||
348 | } | 395 | } |
349 | 396 | ||
350 | .legal { | 397 | .legal { |
351 | text-align: center; | ||
352 | margin-top: 20px; | ||
353 | color: $theme-gray-light; | 398 | color: $theme-gray-light; |
399 | margin-top: 20px; | ||
400 | text-align: center; | ||
354 | } | 401 | } |
355 | } | 402 | } |
356 | 403 | ||
357 | .settings-navigation { | 404 | .settings-navigation { |
358 | width: 200px; | ||
359 | height: auto; | ||
360 | background: $theme-gray-lightest; | ||
361 | display: flex; | 405 | display: flex; |
406 | background: $theme-gray-lightest; | ||
362 | flex-direction: column; | 407 | flex-direction: column; |
408 | height: auto; | ||
409 | width: 200px; | ||
363 | 410 | ||
364 | .settings-navigation__link { | 411 | .settings-navigation__link { |
365 | display: flex; | ||
366 | align-items: center; | 412 | align-items: center; |
367 | height: 50px; | ||
368 | flex-shrink: 0; | ||
369 | text-decoration: none; | ||
370 | color: $theme-text-color; | 413 | color: $theme-text-color; |
414 | display: flex; | ||
415 | flex-shrink: 0; | ||
416 | height: 50px; | ||
371 | padding: 0 20px; | 417 | padding: 0 20px; |
418 | text-decoration: none; | ||
372 | transition: background $theme-transition-time, color $theme-transition-time; | 419 | transition: background $theme-transition-time, color $theme-transition-time; |
373 | 420 | ||
374 | &:hover { | 421 | &:hover { |
375 | background: darken($theme-gray-lightest, 5%); | 422 | background: darken($theme-gray-lightest, 5%); |
376 | 423 | ||
377 | .badge { | 424 | .badge { background: #FFF; } |
378 | background: #FFF; | ||
379 | } | ||
380 | } | 425 | } |
381 | 426 | ||
382 | &.is-active { | 427 | &.is-active { |
@@ -390,22 +435,20 @@ | |||
390 | } | 435 | } |
391 | } | 436 | } |
392 | 437 | ||
393 | .settings-navigation__expander { | 438 | .settings-navigation__expander { flex: 1; } |
394 | flex: 1; | ||
395 | } | ||
396 | 439 | ||
397 | .badge { | 440 | .badge { |
398 | transition: background $theme-transition-time, color $theme-transition-time; | ||
399 | display: initial; | 441 | display: initial; |
400 | margin-left: 5px; | 442 | margin-left: 5px; |
443 | transition: background $theme-transition-time, color $theme-transition-time; | ||
401 | } | 444 | } |
402 | 445 | ||
403 | .settings-navigation__action-badge { | 446 | .settings-navigation__action-badge { |
404 | display: inline-block; | ||
405 | width: 7px; | ||
406 | height: 7px; | ||
407 | background: $theme-brand-danger; | 447 | background: $theme-brand-danger; |
408 | border-radius: 100%; | 448 | border-radius: 100%; |
449 | display: inline-block; | ||
450 | height: 7px; | ||
409 | margin-left: 5px; | 451 | margin-left: 5px; |
452 | width: 7px; | ||
410 | } | 453 | } |
411 | } | 454 | } |