diff options
Diffstat (limited to 'src/styles/settings.scss')
-rw-r--r-- | src/styles/settings.scss | 351 |
1 files changed, 193 insertions, 158 deletions
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 2182c9b5f..c9703ad01 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -1,130 +1,212 @@ | |||
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 { background: lighten($theme-brand-primary, 40%); } | ||
72 | .legal { color: $theme-gray-light; } | ||
73 | } | ||
74 | |||
75 | .settings-navigation { | ||
76 | background: $dark-theme-gray-darker; | ||
77 | border-right: 1px solid $dark-theme-gray-dark; | ||
78 | |||
79 | .settings-navigation__link { | ||
80 | color: $dark-theme-gray-lightest; | ||
81 | |||
82 | .badge { | ||
83 | background: $dark-theme-gray-lighter; | ||
84 | color: $dark-theme-gray-smoke; | ||
85 | } | ||
86 | |||
87 | &:hover { | ||
88 | background: darken($dark-theme-gray-darker, 5%); | ||
89 | |||
90 | .badge { | ||
91 | background: $dark-theme-gray-lighter; | ||
92 | color: $dark-theme-gray-smoke; | ||
93 | } | ||
94 | } | ||
95 | |||
96 | &.is-active { | ||
97 | background: $dark-theme-gray; | ||
98 | color: $dark-theme-gray-smoke; | ||
99 | |||
100 | .badge { | ||
101 | background: $dark-theme-gray-lighter; | ||
102 | color: $dark-theme-gray-smoke; | ||
103 | } | ||
104 | } | ||
105 | } | ||
106 | |||
107 | .settings-navigation__action-badge { background: $theme-brand-danger; } | ||
11 | } | 108 | } |
12 | } | 109 | } |
13 | 110 | ||
14 | .settings-wrapper { | 111 | .settings-wrapper { |
15 | background: rgba(black, 0.5); | 112 | align-items: center; |
16 | position: absolute; | 113 | background: rgba(black, .5); |
17 | width: 100%; | 114 | display: flex; |
18 | height: 100%; | 115 | height: 100%; |
19 | top: 0; | ||
20 | left: 0; | 116 | left: 0; |
21 | z-index: 9998; | ||
22 | display: flex; | ||
23 | justify-content: center; | 117 | justify-content: center; |
24 | align-items: center; | ||
25 | padding: 25px; | 118 | padding: 25px; |
119 | position: absolute; | ||
120 | top: 0; | ||
121 | width: 100%; | ||
122 | z-index: 9998; | ||
26 | 123 | ||
27 | .settings-wrapper__action { | 124 | .settings-wrapper__action { |
28 | position: absolute; | ||
29 | width: 100%; | ||
30 | height: 100%; | 125 | height: 100%; |
31 | top: 0; | ||
32 | left: 0; | 126 | left: 0; |
127 | position: absolute; | ||
128 | top: 0; | ||
129 | width: 100%; | ||
33 | } | 130 | } |
34 | } | 131 | } |
35 | 132 | ||
36 | .settings { | 133 | .settings { |
37 | position: relative; | 134 | background: #FFF; |
135 | border-radius: $theme-border-radius; | ||
136 | box-shadow: 0 20px 50px rgba(black, .5); | ||
38 | display: flex; | 137 | display: flex; |
39 | height: 100%; | 138 | height: 100%; |
40 | width: 100%; | 139 | max-height: 720px; |
41 | max-width: 900px; | 140 | max-width: 900px; |
42 | min-height: 400px; | 141 | 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; | 142 | overflow: hidden; |
49 | // margin-top: -10%; | 143 | position: relative; |
144 | width: 100%; | ||
145 | z-index: 9999; | ||
50 | 146 | ||
51 | .settings__main { | 147 | .settings__main { |
52 | flex: 1; | ||
53 | display: flex; | 148 | display: flex; |
149 | flex: 1; | ||
54 | flex-direction: column; | 150 | flex-direction: column; |
55 | height: auto; | 151 | height: auto; |
56 | } | 152 | } |
57 | 153 | ||
58 | .settings__header { | 154 | .settings__header { |
59 | display: flex; | ||
60 | align-items: center; | 155 | align-items: center; |
61 | width: calc(100% - 60px); | 156 | background: $theme-gray-lighter; |
157 | display: flex; | ||
62 | height: 50px; | 158 | height: 50px; |
63 | padding: 0 40px; | 159 | padding: 0 40px; |
64 | background: $theme-gray-lighter; | 160 | width: calc(100% - 60px); |
65 | 161 | ||
66 | h1 { | 162 | h1 { |
67 | @extend %headline; | 163 | @extend %headline; |
68 | margin: 0; | 164 | margin: 0; |
69 | } | 165 | } |
70 | 166 | ||
71 | .settings__header-item { | 167 | .settings__header-item { @extend %headline; } |
72 | @extend %headline; | ||
73 | } | ||
74 | 168 | ||
75 | .separator { | 169 | .separator { |
170 | border-right: 1px solid darken($theme-gray-lighter, 10%); | ||
76 | height: 100%; | 171 | height: 100%; |
77 | margin: 0 15px; | 172 | margin: 0 15px; |
78 | border-right: 1px solid darken($theme-gray-lighter, 10%); | ||
79 | transform: skew(15deg) rotate(2deg); | 173 | transform: skew(15deg) rotate(2deg); |
80 | } | 174 | } |
81 | 175 | ||
82 | .mdi { | 176 | .mdi { color: $theme-gray-light; } |
83 | color: $theme-gray-light; | ||
84 | } | ||
85 | } | 177 | } |
86 | 178 | ||
87 | .settings__body { | 179 | .settings__body { |
88 | flex: 1; | 180 | flex: 1; |
89 | padding: 25px 15px 15px 25px; | ||
90 | margin: 15px; | 181 | margin: 15px; |
91 | overflow-y: scroll; | 182 | overflow-y: scroll; |
183 | padding: 25px 15px 15px 25px; | ||
92 | 184 | ||
93 | &::-webkit-scrollbar { | 185 | &::-webkit-scrollbar { width: 8px; } |
94 | width: 8px; | ||
95 | } | ||
96 | 186 | ||
97 | /* Track */ | 187 | /* Track */ |
98 | &::-webkit-scrollbar-track { | 188 | &::-webkit-scrollbar-track { |
99 | -webkit-border-radius: 10px; | ||
100 | border-radius: 10px; | ||
101 | background: none; | 189 | background: none; |
190 | border-radius: 10px; | ||
191 | -webkit-border-radius: 10px; | ||
102 | } | 192 | } |
103 | 193 | ||
104 | /* Handle */ | 194 | /* Handle */ |
105 | &::-webkit-scrollbar-thumb { | 195 | &::-webkit-scrollbar-thumb { |
106 | -webkit-border-radius: 10px; | ||
107 | border-radius: 10px; | ||
108 | background: $theme-gray-lighter; | 196 | background: $theme-gray-lighter; |
197 | border-radius: 10px; | ||
198 | -webkit-border-radius: 10px; | ||
109 | } | 199 | } |
110 | 200 | ||
111 | &::-webkit-scrollbar-thumb:window-inactive { | 201 | &::-webkit-scrollbar-thumb:window-inactive { background: none; } |
112 | background: none; | 202 | .service-flex-grid { display: flex; } |
113 | } | 203 | .service-name { flex: 1px; } |
114 | |||
115 | .service-flex-grid { | ||
116 | display: flex; | ||
117 | } | ||
118 | |||
119 | .service-name { | ||
120 | flex: 1px; | ||
121 | } | ||
122 | 204 | ||
123 | .service-icon { | 205 | .service-icon { |
124 | width: 140px; | ||
125 | float: right; | 206 | float: right; |
126 | margin-top: 30px; | ||
127 | margin-left: 40px; | 207 | margin-left: 40px; |
208 | margin-top: 30px; | ||
209 | width: 140px; | ||
128 | 210 | ||
129 | label { | 211 | label { |
130 | font-weight: bold; | 212 | font-weight: bold; |
@@ -134,51 +216,45 @@ | |||
134 | } | 216 | } |
135 | 217 | ||
136 | .settings__close { | 218 | .settings__close { |
137 | position: absolute; | ||
138 | right: 0; | ||
139 | background: $theme-gray-lighter; | 219 | 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%); | 220 | border-left: 1px solid darken($theme-gray-lighter, 5%); |
144 | color: $theme-gray-light; | 221 | color: $theme-gray-light; |
222 | font-size: 20px; | ||
223 | height: 50px; | ||
224 | padding: 0 20px; | ||
225 | position: absolute; | ||
226 | right: 0; | ||
145 | transition: background $theme-transition-time; | 227 | transition: background $theme-transition-time; |
146 | 228 | ||
147 | &:hover { | 229 | &:hover { background: darken($theme-gray-lighter, 5%); } |
148 | background: darken($theme-gray-lighter, 5%); | ||
149 | } | ||
150 | } | 230 | } |
151 | 231 | ||
152 | .search-input { | 232 | .search-input { margin-bottom: 30px; } |
153 | margin-bottom: 30px; | ||
154 | } | ||
155 | 233 | ||
156 | &__options { | 234 | &__options { |
157 | margin-top: 20px; | ||
158 | flex: 1; | 235 | flex: 1; |
236 | margin-top: 20px; | ||
159 | } | 237 | } |
160 | 238 | ||
161 | &__settings-group { | 239 | &__settings-group { |
162 | margin-top: 10px; | 240 | margin-top: 10px; |
163 | 241 | ||
164 | h3 { | 242 | h3 { |
243 | color: $theme-gray-light; | ||
165 | font-weight: bold; | 244 | font-weight: bold; |
245 | letter-spacing: -.1px; | ||
166 | margin: 25px 0 15px; | 246 | margin: 25px 0 15px; |
167 | color: $theme-gray-light; | ||
168 | letter-spacing: -0.1px; | ||
169 | 247 | ||
170 | &:first-of-type { | 248 | &:first-of-type { margin-top: 0; } |
171 | margin-top: 0; | ||
172 | } | ||
173 | } | 249 | } |
174 | } | 250 | } |
175 | 251 | ||
176 | .settings__message { | 252 | .settings__message { |
253 | border-top: 1px solid $theme-gray-lighter; | ||
254 | color: $theme-gray-light; | ||
177 | display: flex; | 255 | display: flex; |
178 | margin-top: 40px; | 256 | margin-top: 40px; |
179 | padding-top: 15px; | 257 | padding-top: 15px; |
180 | border-top: 1px solid $theme-gray-lighter; | ||
181 | color: $theme-gray-light; | ||
182 | 258 | ||
183 | .mdi { | 259 | .mdi { |
184 | color: $theme-gray-light; | 260 | color: $theme-gray-light; |
@@ -188,69 +264,53 @@ | |||
188 | } | 264 | } |
189 | 265 | ||
190 | .settings__help { | 266 | .settings__help { |
191 | margin: -10px 0 20px 55px;; | ||
192 | font-size: 12px; | ||
193 | color: $theme-gray-light; | 267 | color: $theme-gray-light; |
268 | font-size: 12px; | ||
269 | margin: -10px 0 20px 55px;; | ||
194 | } | 270 | } |
195 | 271 | ||
196 | .settings__controls { | 272 | .settings__controls { |
273 | background: $theme-gray-lighter; | ||
197 | display: flex; | 274 | display: flex; |
275 | height: auto; | ||
198 | justify-content: space-between; | 276 | justify-content: space-between; |
199 | padding: 10px 20px; | 277 | padding: 10px 20px; |
200 | height: auto; | ||
201 | background: $theme-gray-lighter; | ||
202 | 278 | ||
203 | .franz-form__button { | 279 | .franz-form__button { |
204 | &[type='submit'] { | 280 | &[type='submit'] { margin-left: auto; } |
205 | margin-left: auto; | 281 | &.franz-form__button--secondary { background: $theme-gray-light; } |
206 | } | ||
207 | |||
208 | &.franz-form__button--secondary { | ||
209 | background: $theme-gray-light; | ||
210 | } | ||
211 | } | 282 | } |
212 | } | 283 | } |
213 | 284 | ||
214 | .settings__delete-button { | 285 | .settings__delete-button { right: 0; } |
215 | right: 0; | ||
216 | } | ||
217 | 286 | ||
218 | .settings__empty-state { | 287 | .settings__empty-state { |
219 | width: 100%; | 288 | align-items: center; |
289 | align-self: center; | ||
220 | height: auto; | 290 | height: auto; |
221 | min-height: 70%; | 291 | min-height: 70%; |
222 | text-align: center; | 292 | text-align: center; |
223 | align-self: center; | 293 | width: 100%; |
224 | // margin-top: -20px; | ||
225 | align-items: center; | ||
226 | 294 | ||
227 | a.button { | 295 | a.button { margin-top: 40px; } |
228 | margin-top: 40px; | ||
229 | } | ||
230 | } | 296 | } |
231 | 297 | ||
232 | .account { | 298 | .account { |
233 | height: auto; | 299 | height: auto; |
234 | // padding: 20px; | ||
235 | 300 | ||
236 | .account__box { | 301 | .account__box { |
302 | align-items: center; | ||
237 | background: $theme-gray-lightest; | 303 | background: $theme-gray-lightest; |
238 | border-radius: $theme-border-radius; | 304 | border-radius: $theme-border-radius; |
239 | padding: 20px; | ||
240 | margin-bottom: 40px; | 305 | margin-bottom: 40px; |
241 | align-items: center; | 306 | padding: 20px; |
242 | |||
243 | &.account__box--flex { | ||
244 | display: flex; | ||
245 | } | ||
246 | 307 | ||
247 | &.account__box--last { | 308 | &.account__box--flex { display: flex; } |
248 | margin-bottom: 0; | 309 | &.account__box--last { margin-bottom: 0; } |
249 | } | ||
250 | 310 | ||
251 | .auth__button { | 311 | .auth__button { |
252 | width: 100%; | ||
253 | margin-top: 10px; | 312 | margin-top: 10px; |
313 | width: 100%; | ||
254 | } | 314 | } |
255 | } | 315 | } |
256 | 316 | ||
@@ -258,57 +318,40 @@ | |||
258 | margin-right: 20px; | 318 | margin-right: 20px; |
259 | position: relative; | 319 | position: relative; |
260 | 320 | ||
261 | .emoji img { | 321 | .emoji img { width: 30px; } |
262 | width: 30px; | ||
263 | } | ||
264 | } | 322 | } |
265 | 323 | ||
266 | .account__avatar-premium { | 324 | .account__avatar-premium { |
325 | font-size: 26px; | ||
267 | position: absolute; | 326 | position: absolute; |
268 | top: 2px; | ||
269 | right: 2px; | 327 | right: 2px; |
270 | font-size: 26px; | 328 | top: 2px; |
271 | } | 329 | } |
272 | 330 | ||
273 | .account__info { | 331 | .account__info { |
274 | flex: 1; | 332 | flex: 1; |
275 | 333 | ||
276 | h2 { | 334 | h2 { margin-bottom: 5px; } |
277 | margin-bottom: 5px; | 335 | .badge { margin-top: 5px; } |
278 | } | ||
279 | |||
280 | .badge { | ||
281 | margin-top: 5px; | ||
282 | } | ||
283 | } | 336 | } |
284 | 337 | ||
285 | .account__subscription { | 338 | .account__subscription { |
286 | display: flex; | ||
287 | align-items: center; | 339 | align-items: center; |
340 | display: flex; | ||
288 | 341 | ||
289 | .badge { | 342 | .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 | } | 343 | } |
301 | 344 | ||
302 | div { | 345 | .account__subscription-button { margin-left: auto; } |
303 | height: auto; | 346 | .franz-form__button { white-space: nowrap; } |
304 | } | 347 | div { height: auto; } |
305 | 348 | ||
306 | .invoices { | 349 | .invoices { |
307 | width: 100%; | 350 | width: 100%; |
308 | 351 | ||
309 | td { | 352 | td { |
310 | padding: 15px 0; | ||
311 | border-bottom: 1px solid $theme-gray-lighter; | 353 | border-bottom: 1px solid $theme-gray-lighter; |
354 | padding: 15px 0; | ||
312 | } | 355 | } |
313 | 356 | ||
314 | tr:last-of-type td { | 357 | tr:last-of-type td { |
@@ -319,9 +362,7 @@ | |||
319 | .invoices__action { | 362 | .invoices__action { |
320 | text-align: right; | 363 | text-align: right; |
321 | 364 | ||
322 | button { | 365 | button { color: $theme-brand-primary; } |
323 | color: $theme-brand-primary; | ||
324 | } | ||
325 | } | 366 | } |
326 | } | 367 | } |
327 | } | 368 | } |
@@ -331,15 +372,13 @@ | |||
331 | font-size: 40px; | 372 | font-size: 40px; |
332 | margin-bottom: 20px; | 373 | margin-bottom: 20px; |
333 | 374 | ||
334 | img { | 375 | img { width: 40px; } |
335 | width: 40px; | ||
336 | } | ||
337 | } | 376 | } |
338 | 377 | ||
339 | .premium-info { | 378 | .premium-info { |
340 | background: lighten($theme-brand-primary, 40%); | 379 | background: lighten($theme-brand-primary, 40%); |
341 | padding: 20px; | ||
342 | border-radius: $theme-border-radius; | 380 | border-radius: $theme-border-radius; |
381 | padding: 20px; | ||
343 | } | 382 | } |
344 | 383 | ||
345 | .content-tabs .premium-info { | 384 | .content-tabs .premium-info { |
@@ -348,35 +387,33 @@ | |||
348 | } | 387 | } |
349 | 388 | ||
350 | .legal { | 389 | .legal { |
351 | text-align: center; | ||
352 | margin-top: 20px; | ||
353 | color: $theme-gray-light; | 390 | color: $theme-gray-light; |
391 | margin-top: 20px; | ||
392 | text-align: center; | ||
354 | } | 393 | } |
355 | } | 394 | } |
356 | 395 | ||
357 | .settings-navigation { | 396 | .settings-navigation { |
358 | width: 200px; | ||
359 | height: auto; | ||
360 | background: $theme-gray-lightest; | ||
361 | display: flex; | 397 | display: flex; |
398 | background: $theme-gray-lightest; | ||
362 | flex-direction: column; | 399 | flex-direction: column; |
400 | height: auto; | ||
401 | width: 200px; | ||
363 | 402 | ||
364 | .settings-navigation__link { | 403 | .settings-navigation__link { |
365 | display: flex; | ||
366 | align-items: center; | 404 | align-items: center; |
367 | height: 50px; | ||
368 | flex-shrink: 0; | ||
369 | text-decoration: none; | ||
370 | color: $theme-text-color; | 405 | color: $theme-text-color; |
406 | display: flex; | ||
407 | flex-shrink: 0; | ||
408 | height: 50px; | ||
371 | padding: 0 20px; | 409 | padding: 0 20px; |
410 | text-decoration: none; | ||
372 | transition: background $theme-transition-time, color $theme-transition-time; | 411 | transition: background $theme-transition-time, color $theme-transition-time; |
373 | 412 | ||
374 | &:hover { | 413 | &:hover { |
375 | background: darken($theme-gray-lightest, 5%); | 414 | background: darken($theme-gray-lightest, 5%); |
376 | 415 | ||
377 | .badge { | 416 | .badge { background: #FFF; } |
378 | background: #FFF; | ||
379 | } | ||
380 | } | 417 | } |
381 | 418 | ||
382 | &.is-active { | 419 | &.is-active { |
@@ -390,22 +427,20 @@ | |||
390 | } | 427 | } |
391 | } | 428 | } |
392 | 429 | ||
393 | .settings-navigation__expander { | 430 | .settings-navigation__expander { flex: 1; } |
394 | flex: 1; | ||
395 | } | ||
396 | 431 | ||
397 | .badge { | 432 | .badge { |
398 | transition: background $theme-transition-time, color $theme-transition-time; | ||
399 | display: initial; | 433 | display: initial; |
400 | margin-left: 5px; | 434 | margin-left: 5px; |
435 | transition: background $theme-transition-time, color $theme-transition-time; | ||
401 | } | 436 | } |
402 | 437 | ||
403 | .settings-navigation__action-badge { | 438 | .settings-navigation__action-badge { |
404 | display: inline-block; | ||
405 | width: 7px; | ||
406 | height: 7px; | ||
407 | background: $theme-brand-danger; | 439 | background: $theme-brand-danger; |
408 | border-radius: 100%; | 440 | border-radius: 100%; |
441 | display: inline-block; | ||
442 | height: 7px; | ||
409 | margin-left: 5px; | 443 | margin-left: 5px; |
444 | width: 7px; | ||
410 | } | 445 | } |
411 | } | 446 | } |