diff options
Diffstat (limited to 'src/styles/settings.scss')
-rw-r--r-- | src/styles/settings.scss | 354 |
1 files changed, 196 insertions, 158 deletions
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 | } |