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