Commit | Line | Data |
---|---|---|
68ae9c6a | 1 | .accountSecurityContainer { |
0132fe67 | 2 | align-items: center; |
68ae9c6a | 3 | display: flex; |
fe6d8ef8 AE |
4 | |
5 | @include screen-sm-down { | |
36e6df46 | 6 | align-items: flex-start; |
fe6d8ef8 AE |
7 | flex-direction: column; |
8 | } | |
68ae9c6a | 9 | } |
10 | ||
11 | .accountSecurityInformation { | |
fe6d8ef8 AE |
12 | flex: 1 auto; |
13 | } | |
14 | ||
f75f7691 AE |
15 | .accountSecurityInformationLink { |
16 | color: inherit; | |
17 | } | |
18 | ||
fe6d8ef8 AE |
19 | .accountSecurityButtons { |
20 | flex: 0 0 auto; | |
21 | ||
22 | @include screen-md-up { | |
23 | margin-left: 10px; | |
24 | } | |
25 | ||
26 | @include screen-sm-down { | |
27 | align-self: flex-end; | |
28 | margin-top: 5px; | |
29 | } | |
68ae9c6a | 30 | } |
2e781ff3 TD |
31 | |
32 | .multifactorBackupCode { | |
48b22f85 TD |
33 | font-family: var(--wcfFontFamilyMonospace) !important; |
34 | ||
2e781ff3 TD |
35 | &.used { |
36 | text-decoration: line-through; | |
37 | } | |
38 | .chunk { | |
39 | margin-left: 5px; | |
48b22f85 | 40 | |
2e781ff3 TD |
41 | &:first-child { |
42 | margin-left: 0; | |
43 | font-weight: 600; | |
44 | } | |
45 | } | |
46 | } | |
ed920c43 | 47 | |
18074bdf TD |
48 | @media not print { |
49 | .multifactorBackupCodesPrintMetadata { | |
50 | display: none !important; | |
51 | } | |
52 | } | |
53 | ||
54 | @media print { | |
55 | .multifactorBackupCodesPrintButton { | |
56 | display: none !important; | |
57 | } | |
58 | ||
59 | .multifactorBackupCodesPrintContainer { | |
60 | padding: 1cm !important; | |
61 | position: absolute !important; | |
62 | background: white !important; | |
63 | inset: 0 !important; | |
64 | ||
65 | .multifactorBackupCodesPrintMetadata { | |
66 | max-width: 9cm !important; | |
67 | } | |
68 | } | |
69 | } | |
70 | ||
53e360bd | 71 | // Just .multifactorTotpCode is not specific enough. |
bfb25797 | 72 | input.multifactorTotpCode, |
48b22f85 | 73 | input.multifactorEmailCode, |
bfb25797 | 74 | input.multifactorBackupCode { |
48b22f85 | 75 | font-family: var(--wcfFontFamilyMonospace) !important; |
bfb25797 | 76 | font-weight: 600; |
48b22f85 TD |
77 | box-sizing: content-box; |
78 | ||
79 | &[size="6"] { | |
80 | width: 6ch; | |
81 | font-size: 28px; | |
82 | } | |
83 | &[size="8"] { | |
84 | width: 8ch; | |
85 | font-size: 28px; | |
86 | } | |
87 | &[size="23"] { | |
88 | width: 23ch; | |
89 | font-size: 18px; | |
90 | } | |
bfb25797 | 91 | } |
53e360bd | 92 | |
ed920c43 TD |
93 | .multifactorTotpNewDevice { |
94 | display: flex; | |
53e360bd | 95 | flex-direction: column; |
c5cbcf12 | 96 | margin-top: 20px; |
8a52619a | 97 | |
ed920c43 TD |
98 | .totpSecretContainer { |
99 | text-align: center; | |
8a52619a | 100 | |
ed920c43 TD |
101 | canvas { |
102 | width: 200px; | |
103 | height: 200px; | |
1795bad3 TD |
104 | background: #fff; |
105 | border-radius: 3px; | |
106 | border: 3px solid #fff; | |
107 | box-sizing: content-box; | |
ed920c43 TD |
108 | } |
109 | } | |
8a52619a | 110 | |
c5cbcf12 AE |
111 | .totpSecret { |
112 | display: inline-block; | |
113 | margin-top: 10px; | |
114 | } | |
8a52619a | 115 | |
ed920c43 TD |
116 | .multifactorTotpNewDeviceFields { |
117 | flex: 1 1 auto; | |
118 | } | |
8a52619a | 119 | |
53e360bd TD |
120 | @include screen-md-up { |
121 | flex-direction: row; | |
8a52619a | 122 | |
53e360bd TD |
123 | .totpSecretContainer { |
124 | width: 250px; | |
125 | margin: 0 5px; | |
126 | } | |
127 | } | |
ed920c43 | 128 | } |