UNPKG

17.8 kBCSSView Raw
1/*
2 * Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
5 * the License. A copy of the License is located at
6 *
7 * http://aws.amazon.com/apache2.0/
8 *
9 * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
10 * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
11 * and limitations under the License.
12 */
13:root {
14
15 /* Colors */
16 --amazonOrange: #FF9900;
17 --lightAmazonOrange: #FFAC31;
18 --darkAmazonOrange: #E88B01;
19 --squidInk: #232F3E;
20 --lightSquidInk: #31465F;
21 --deepSquidInk: #152939;
22 --grey: #828282;
23 --lightGrey: #C4C4C4;
24 --silver: #E1E4EA;
25 --darkBlue: #31465F;
26 --red: #DD3F5B;
27 --white: #FFFFFF;
28 --light-blue: #00a1c9;
29
30
31 /* Theme */
32 --button-color: var(--white);
33 --button-background-color: var(--amazonOrange);
34 --button-click: var(--darkAmazonOrange);
35 --link-color: var(--amazonOrange);
36 --form-color: var(--white);
37 --input-color: var(--deepSquidInk);
38 --input-background-color: var(--white);
39
40 --font-family: "Amazon Ember","Helvetica Neue Light","Helvetica Neue","Helvetica" ,"Arial","sans-serif";
41 --body-background: #F8F4F4;
42
43 /** Angular Theme **/
44 --component-width-desktop: 460px;
45 --component-width-mobile: 100%;
46
47 --color-primary: #FF9900;
48 --color-primary-accent: #232F3E;
49 --color-primary-highlight: #FFC46D;
50
51 --color-background:#232F3E;
52
53 --color-secondary: #152939;
54 --color-secondary-accent: #31465F;
55
56 --color-danger: #DD3F5B;
57 --color-error: #D0021B;
58
59 --color-accent-brown: #828282;
60 --color-accent-blue: #E1E4EA;
61
62 --gradient-blaze: linear-gradient(270deg, #FFC300 0%, #FF9000 100%);
63
64 --color-blue: #007EB9;
65 --color-purple: #527FFF;
66 --color-gray: #828282;
67 --color-white: #FFFFFF;
68
69 --input-border: 1px solid #C4C4C4;
70 --input-padding: 0.5em 0.5em 0.3em 1em;
71
72 --box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.15);
73 --button-height: 42px;
74
75 --interactions-conversation-height: 250px;
76
77 /* Ionic Theme */
78
79 /** primary **/
80 --ion-color-primary: #FF9900;
81 --ion-color-primary-rgb: 255,153,0;
82 --ion-color-primary-contrast: #fff;
83 --ion-color-primary-contrast-rgb: 255,255,255;
84 --ion-color-primary-shade: #232F3E;
85 --ion-color-primary-tint: #FFC46D;
86
87 /** secondary **/
88 --ion-color-secondary: #32db64;
89 --ion-color-secondary-rgb: 50,219,100;
90 --ion-color-secondary-contrast: #fff;
91 --ion-color-secondary-contrast-rgb: 255,255,255;
92 --ion-color-secondary-shade: #2cc158;
93 --ion-color-secondary-tint: #47df74;
94
95 /** tertiary **/
96 --ion-color-tertiary: #f4a942;
97 --ion-color-tertiary-rgb: 244,169,66;
98 --ion-color-tertiary-contrast: #fff;
99 --ion-color-tertiary-contrast-rgb: 255,255,255;
100 --ion-color-tertiary-shade: #d7953a;
101 --ion-color-tertiary-tint: #f5b255;
102
103 /** success **/
104 --ion-color-success: #10dc60;
105 --ion-color-success-rgb: 16,220,96;
106 --ion-color-success-contrast: #fff;
107 --ion-color-success-contrast-rgb: 255,255,255;
108 --ion-color-success-shade: #0ec254;
109 --ion-color-success-tint: #28e070;
110
111 /** warning **/
112 --ion-color-warning: #ffce00;
113 --ion-color-warning-rgb: 255,206,0;
114 --ion-color-warning-contrast: #000;
115 --ion-color-warning-contrast-rgb: 0,0,0;
116 --ion-color-warning-shade: #e0b500;
117 --ion-color-warning-tint: #ffd31a;
118
119 /** danger **/
120 --ion-color-danger: #f53d3d;
121 --ion-color-danger-rgb: 245,61,61;
122 --ion-color-danger-contrast: #fff;
123 --ion-color-danger-contrast-rgb: 255,255,255;
124 --ion-color-danger-shade: #d83636;
125 --ion-color-danger-tint: #f65050;
126
127 /** light **/
128 --ion-color-light: #f4f4f4;
129 --ion-color-light-rgb: 244,244,244;
130 --ion-color-light-contrast: #000;
131 --ion-color-light-contrast-rgb: 0,0,0;
132 --ion-color-light-shade: #d7d7d7;
133 --ion-color-light-tint: #f5f5f5;
134
135 /** medium **/
136 --ion-color-medium: #989aa2;
137 --ion-color-medium-rgb: 152,154,162;
138 --ion-color-medium-contrast: #000;
139 --ion-color-medium-contrast-rgb: 0,0,0;
140 --ion-color-medium-shade: #86888f;
141 --ion-color-medium-tint: #a2a4ab;
142
143 /** dark **/
144 --ion-color-dark: #222;
145 --ion-color-dark-rgb: 34,34,34;
146 --ion-color-dark-contrast: #fff;
147 --ion-color-dark-contrast-rgb: 255,255,255;
148 --ion-color-dark-shade: #1e1e1e;
149 --ion-color-dark-tint: #383838;
150}
151
152.Anchor__a___1_Iz8 {
153 color: var(--link-color);
154 cursor: pointer;
155}
156
157.Anchor__a___1_Iz8:hover {
158 text-decoration: underline;
159}
160.Button__button___vS7Mv {
161 min-width: 153px;
162 display: inline-block;
163 margin-bottom: 0;
164 font-size: 12px;
165 font-weight: 400;
166 line-height: 1.42857143;
167 text-align: center;
168 white-space: nowrap;
169 vertical-align: middle;
170 touch-action: manipulation;
171 cursor: pointer;
172 -webkit-user-select: none;
173 -moz-user-select: none;
174 -ms-user-select: none;
175 user-select: none;
176 background-image: none;
177 color: var(--button-color);
178 background-color: var(--button-background-color);
179 border-color: #ccc;
180 text-transform: uppercase;
181 padding: 14px 0;
182 letter-spacing: 1.1px;
183 border: none;
184}
185
186.Button__button___vS7Mv:active {
187 opacity: 1;
188 background-color: var(--button-click);
189}
190
191.Button__button___vS7Mv:hover,
192.Button__signInButton___3bUH-:hover {
193 opacity: 0.8;
194}
195
196.Button__button___vS7Mv:disabled {
197 opacity: 1;
198 cursor: auto;
199 background-color: var(--ion-color-primary-tint);
200}
201
202.Button__signInButton___3bUH- {
203 position: relative;
204 width: 100%;
205 border-radius: 4px;
206 margin-bottom: 10px;
207 cursor: pointer;
208 padding: 0;
209 color: var(--deepSquidInk);
210 font-size: 14px;
211 box-sizing: content-box;
212}
213
214#Button__googleSignInButton___1YiCu {
215 background-color: #4285F4;
216 font-family: Roboto;
217 border: 1px solid #4285F4;
218 color: var(--white);
219}
220
221#Button__googleSignInButton___1YiCu > .Button__signInButtonIcon___ihN75 {
222 background-color: var(--white);
223 border-radius: 4px 0 0 4px;
224 height: 28px;
225 width: 28px;
226 padding: 12px;
227}
228
229#Button__auth0SignInButton___znnCj {
230 background-color: #eb5424;
231 font-family: Roboto;
232 border: 1px solid #e14615;
233 color: #fff;
234}
235
236#Button__auth0SignInButton___znnCj > .Button__signInButtonIcon___ihN75 {
237 border-radius: 4px 0 0 4px;
238 height: 28px;
239 width: 28px;
240 padding: 12px;
241 fill: #fff;
242}
243
244#Button__facebookSignInButton___34Txh {
245 background-color: #4267B2;
246 border-color: #4267B2;
247 font-family: "Helvetica Neue";
248 color: var(--white);
249}
250
251#Button__facebookSignInButton___34Txh > .Button__signInButtonIcon___ihN75 {
252 height: 33px;
253 width: 18px;
254 padding: 10px 14px;
255}
256
257#Button__amazonSignInButton___2EMtl {
258 background-color: var(--amazonOrange);
259 border: none;
260 color: var(--white);
261 font-family: "Amazon Ember";
262}
263
264#Button__amazonSignInButton___2EMtl > .Button__signInButtonIcon___ihN75 {
265 padding: 10px;
266 height: 32px;
267 width: 32px;
268}
269
270#Button__oAuthSignInButton___3UGOl {
271 background-color: var(--white);
272 color: var(--deepSquidInk);
273}
274
275.Button__signInButtonIcon___ihN75 {
276 position: absolute;
277 left: 0;
278}
279
280.Button__signInButtonContent___xqTXJ {
281 text-align: center;
282 display: block;
283 padding: 18px 0;
284 text-align: left;
285 white-space: nowrap;
286 overflow: hidden;
287 text-overflow: ellipsis;
288 text-align: center;
289}
290.Form__formContainer___1GA3x {
291 text-align: center;
292 margin-top: 20px;
293 margin: 5% auto 50px;
294}
295
296.Form__formSection___1PPvW {
297 position: relative;
298 margin-bottom: 20px;
299 background-color: var(--form-color);
300 padding: 35px 40px;
301 text-align: left;
302 display: inline-block;
303 min-width: 460px;
304 border-radius: 6px;
305 box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.15);
306 box-sizing: border-box;
307}
308
309.Form__formField___38Ikl {
310 margin-bottom: 22px;
311}
312
313.Form__formRow___2mwRs {
314 margin-bottom: 12px;
315}
316
317@media only screen and (max-width: 599px) {
318 .Form__formContainer___1GA3x {
319 margin: 0;
320 }
321
322 .Form__formSection___1PPvW {
323 width: 100%;
324 box-sizing: border-box;
325 padding: 35px 25px;
326 box-shadow: none;
327 border-radius: 0;
328 min-width: auto;
329 }
330}
331.Hint__hint___2XngB {
332 color: var(--grey);
333 font-size: 12px;
334}
335.Input__input___3e_bf {
336 display: block;
337 width: 100%;
338 padding: 16px;
339 font-size: 14px;
340 color: var(--input-color);
341 background-color: var(--input-background-color);
342 background-image: none;
343 border: 1px solid var(--lightGrey);
344 border-radius: 3px;
345 box-sizing: border-box;
346 margin-bottom: 10px;
347}
348
349.Input__input___3e_bf:disabled {
350 color: #545454;
351 background-color: var(--silver);
352}
353
354.Input__inputLabel___3VF0S {
355 color: var(--input-color);
356 font-size: 14px;
357 margin-bottom: 8px;
358}
359
360.Input__label___23sO8 {
361 color: var(--input-color);
362}
363
364.Input__radio___2hllK {
365 margin-right: 18px;
366 vertical-align: bottom;
367}
368
369@media only screen and (max-width: 599px) {
370 .Input__input___3e_bf {
371 font-size: 16px;
372 }
373}
374.Nav__navBar___xtCFA {
375 position: relative;
376 border: 1px solid transparent;
377 border-color: #e7e7e7;
378 background-color: #fff;
379}
380
381.Nav__navRight___1QG2J {
382 text-align: right
383}
384
385.Nav__nav___2Dx2Y {
386 padding: 10px;
387}
388
389.Nav__navItem___1LtFQ {
390 display: inline-block;
391 padding: 10px 5px;
392 line-height: 20px;
393 margin-right: 12px;
394}
395.PhotoPicker__photoPickerButton___2XdVn {
396 width: 100%;
397}
398
399.PhotoPicker__photoPlaceholder___2JXO4 {
400 border: 2px dotted var(--grey);
401 padding: 64px 0 64px;
402}
403
404.PhotoPicker__photoPlaceholderIcon___3Et71 {
405 text-align: center;
406 opacity: 0.2;
407}
408.Section__container___3YYTG {
409 font-weight: 400;
410}
411
412.Section__actionRow___2LWSU {
413 margin-bottom: 15px;
414}
415
416.Section__sectionHeader___2djyg {
417 color: var(--deepSquidInk);
418 margin-bottom: 24px;
419 font-size: 18px;
420 font-weight: 500;
421}
422
423.Section__sectionHeaderHint___3Wxdc {
424 color: var(--grey);
425 font-size: 16px;
426 font-weight: 400;
427 margin-top: 4px;
428}
429
430.Section__sectionBody___ihqqd {
431 margin-bottom: 30px;
432}
433
434.Section__sectionHeaderContent___1UCqa {
435}
436
437.Section__sectionFooter___1T54C {
438 font-size: 14px;
439 color: var(--grey);
440 display: -webkit-box;
441 display: flex;
442 -webkit-box-orient: horizontal;
443 -webkit-box-direction: reverse;
444 flex-direction: row-reverse;
445 -webkit-box-align: start;
446 align-items: flex-start;
447}
448
449.Section__sectionFooterPrimaryContent___2r9ZX {
450 margin-left: auto;
451}
452
453.Section__sectionFooterSecondaryContent___Nj41Q {
454 margin-right: auto;
455 align-self: center;
456}
457
458@media only screen and (max-width: 599px) {
459 .Section__sectionFooter___1T54C {
460 flex-wrap: wrap;
461 }
462
463 .Section__sectionFooterPrimaryContent___2r9ZX {
464 width: 100%;
465 margin-bottom: 32px;
466 }
467
468 .Section__sectionFooterPrimaryContent___2r9ZX > button {
469 width: 100%;
470 }
471
472 .Section__sectionFooterSecondaryContent___Nj41Q {
473 text-align: center;
474 -webkit-box-flex: 0;
475 flex: 0 0 100%;
476 }
477}
478
479.SelectInput__selectInput___3efO4 {
480 display: -webkit-box;
481 display: flex;
482}
483
484.SelectInput__selectInput___3efO4 > input {
485 -webkit-box-flex: 1;
486 flex: 1;
487 border-radius: 0 3px 3px 0 !important;
488}
489
490.SelectInput__selectInput___3efO4 > select {
491 padding: 16px;
492 font-size: 14px;
493 color: var(--deepSquidInk);
494 background-color: #fff;
495 background-image: none;
496 border: 1px solid var(--lightGrey);
497 border-right: none;
498 border-radius: 3px 0 0 3px;
499 box-sizing: border-box;
500 margin-bottom: 10px;
501 -webkit-appearance: none;
502 -moz-appearance: none;
503 appearance: none;
504 flex-basis: 22%;
505 width: 1%;
506
507 background-image:
508 linear-gradient(45deg, transparent 50%, gray 50%),
509 linear-gradient(135deg, gray 50%, transparent 50%),
510 linear-gradient(to right, #ccc, #ccc);
511 background-position:
512 calc(100% - 20px) calc(1em + 8px),
513 calc(100% - 15px) calc(1em + 8px),
514 calc(100% - 2.5em) 0.5em;
515 background-size:
516 6px 5px,
517 6px 5px,
518 0px 1.5em;
519 background-repeat: no-repeat;
520}
521.Strike__strike___1XV1b {
522 width: 100%;
523 text-align: center;
524 border-bottom: 1px solid var(--lightGrey);
525 line-height: 0.1em;
526 margin: 32px 0;
527 color: var(--grey);
528}
529
530.Strike__strikeContent___10gLb {
531 background: var(--form-color);
532 padding: 0 25px;
533 font-size: 14px;
534 font-weight: 500;
535}
536.Toast__toast___XXr3v {
537 display: -webkit-box;
538 display: flex;
539 -webkit-box-pack: justify;
540 justify-content: space-between;
541 position: absolute;
542 top: 0;
543 left: 0;
544 width: 100%;
545 z-index: 99;
546 box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
547 padding: 16px;
548 background-color: var(--lightSquidInk);
549 font-size: 14px;
550 color: #fff;
551 box-sizing: border-box;
552}
553
554.Toast__toast___XXr3v > span {
555 margin-right: 10px;
556}
557
558.Toast__toastClose___18lU4 {
559 margin-left: auto;
560 align-self: center;
561 position: relative;
562 width: 18px;
563 height: 18px;
564 overflow: hidden;
565 cursor: pointer;
566}
567
568.Toast__toastClose___18lU4::before,
569.Toast__toastClose___18lU4::after {
570 content: '';
571 position: absolute;
572 height: 2px;
573 width: 100%;
574 top: 50%;
575 left: 0;
576 margin-top: -1px;
577 background: var(--lightGrey);
578}
579
580.Toast__toastClose___18lU4:hover::before,
581.Toast__toastClose___18lU4:hover::after {
582 background: var(--red);
583}
584
585.Toast__toastClose___18lU4::before {
586 -webkit-transform: rotate(45deg);
587 transform: rotate(45deg);
588}
589.Toast__toastClose___18lU4::after {
590 -webkit-transform: rotate(-45deg);
591 transform: rotate(-45deg);
592}
593.Totp__totpQrcode___1crLx {
594 text-align: center;
595 margin-bottom: 30px;
596}
597/*
598 * Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
599 *
600 * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
601 * the License. A copy of the License is located at
602 *
603 * http://aws.amazon.com/apache2.0/
604 *
605 * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
606 * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
607 * and limitations under the License.
608 */
609
610.XR__sumerianSceneContainer___3nVMt {
611 width: 100%;
612 height: 100%;
613 position: relative;
614}
615
616.XR__sumerianScene___2Tt7- {
617 width: 100%;
618 height: 100%;
619}
620
621.XR__loadingOverlay___IbqcI {
622 display: -webkit-box;
623 display: flex;
624 -webkit-box-align: center;
625 align-items: center;
626 -webkit-box-pack: center;
627 justify-content: center;
628 width: 100%;
629 height: 100%;
630 background-color: var(--lightSquidInk);
631}
632
633.XR__loadingContainer___2Itxb {
634 display: -webkit-box;
635 display: flex;
636 -webkit-box-orient: vertical;
637 -webkit-box-direction: normal;
638 flex-direction: column;
639 -webkit-box-align: center;
640 align-items: center;
641 -webkit-box-pack: center;
642 justify-content: center;
643}
644
645.XR__loadingLogo___Ub7xQ {
646 margin-bottom: 20px;
647 width: 80px;
648 fill: var(--white);
649}
650
651.XR__loadingSceneName___3__ne {
652 color: var(--white);
653 margin: 0 2px 20px 2px;
654 font-size: 18px;
655 font-family: 'Amazon Ember';
656}
657
658.XR__loadingBar___2vcke {
659 height: 2px;
660 width: 100%;
661 border-radius: 2px;
662 background-color: var(--deepSquidInk);
663}
664
665.XR__loadingBarFill___3M-D9 {
666 background-color: var(--light-blue);
667 height: 100%;
668 border-radius: 2px;
669}
670
671.XR__sceneErrorText___2y0tp {
672 color: var(--red);
673 font-size: 14px;
674 font-family: 'Amazon Ember';
675}
676
677.XR__sceneBar___2ShrP {
678 display: -webkit-box;
679 display: flex;
680 -webkit-box-align: center;
681 align-items: center;
682 font-size: 100%;
683 position: absolute;
684 bottom: 0;
685 width: 100%;
686}
687
688.XR__sceneName___1ApHr {
689 color: var(--white);
690 margin: 0 1.5em;
691 font-size: 1em;
692}
693
694.XR__sceneActions___7plGs {
695 margin-left: auto;
696 margin-right: 16px;
697 margin-bottom: 16px;
698}
699
700.XR__actionButton___2poIM {
701 position: relative;
702 padding: 0;
703 background: none;
704 height: 54px;
705 width: 54px;
706 cursor:pointer;
707 outline: none;
708 text-decoration: none;
709 border: none;
710 border-radius: 30px;
711 -webkit-transition: all .3s ease-in-out;
712 transition: all .3s ease-in-out;
713 color: var(--white);
714 fill: currentColor;
715}
716
717.XR__actionButton___2poIM:hover {
718 background-color: var(--deepSquidInk);
719 box-shadow: 0.3px 0.3px 0.3px rgba(0, 0, 0, 0.3);
720}
721
722.XR__actionButton___2poIM:hover > .XR__tooltip___UYyhn {
723 display: block;
724}
725
726.XR__actionButton___2poIM:hover > svg {
727 -webkit-filter: none;
728 filter: none;
729}
730
731.XR__actionButton___2poIM:focus {
732 outline: none;
733}
734
735.XR__actionButton___2poIM > svg {
736 width: 1.8em;
737 height: 1.8em;
738 -webkit-filter: drop-shadow(1px 1px 1px var(--grey));
739 filter: drop-shadow(1px 1px 1px var(--grey));
740}
741
742.XR__actionIcon___2qnd2 {
743 fill: var(--white);
744}
745
746.XR__tooltip___UYyhn {
747 display: inline;
748 position: relative;
749 font-size: 12px;
750 font-family: 'Amazon Ember';
751 margin: 0 0 0 16px;
752}
753
754.XR__autoShowTooltip___V1QH7 .XR__actionButton___2poIM {
755 background-color: var(--deepSquidInk);
756}
757
758.XR__tooltip___UYyhn:after {
759 background-color: var(--deepSquidInk);
760 border-radius: 2px;
761 bottom: 46px;
762 color: var(--white);
763 content: attr(data-text);
764 text-decoration: none;
765 padding: 10px;
766 left: 50%;
767 -webkit-transform: translateX(-50%);
768 transform: translateX(-50%);
769 position: absolute;
770 white-space: nowrap;
771 opacity: 0;
772 -webkit-transition: all .3s ease-in-out;
773 transition: all .3s ease-in-out;
774}
775
776.XR__tooltip___UYyhn:before {
777 border: solid;
778 border-color: var(--deepSquidInk) transparent transparent transparent;
779 border-width: 5px;
780 bottom: 36px;
781 content:"";
782 left: 50%;
783 -webkit-transform: translateX(-50%);
784 transform: translateX(-50%);
785 position: absolute;
786 font-size: 14px;
787 opacity: 0;
788 -webkit-transition: all .3s ease-in-out;
789 transition: all .3s ease-in-out;
790}
791
792
793.XR__autoShowTooltip___V1QH7:after,
794.XR__tooltip___UYyhn:hover:after {
795 opacity: 1;
796 -webkit-transition-delay: 1s;
797 transition-delay: 1s;
798}
799
800.XR__autoShowTooltip___V1QH7:before,
801.XR__tooltip___UYyhn:hover:before {
802 opacity: 1;
803 -webkit-transition-delay: 1s;
804 transition-delay: 1s;
805}
806
807/*# sourceMappingURL=style.css.map*/
\No newline at end of file