]>
Commit | Line | Data |
---|---|---|
8cbc40b2 C |
1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | |
3 | ||
4 | @import '~bootstrap/scss/functions'; | |
5 | @import '~bootstrap/scss/variables'; | |
63c4db6d | 6 | |
2b084d70 C |
7 | label { |
8 | display: block; | |
11056966 C |
9 | font-size: 18px; |
10 | margin-bottom: 5px; | |
2b084d70 C |
11 | } |
12 | ||
266947e5 C |
13 | input[type=text], |
14 | input[type=email] { | |
42802543 | 15 | @include peertube-input-text(100%); |
d235f6b0 | 16 | } |
ecb4e35f | 17 | |
ab0beac7 | 18 | .modal-body { |
27bc9586 | 19 | text-align: start; |
ab0beac7 K |
20 | |
21 | .forgot-password-instructions { | |
22 | margin-bottom: 20px; | |
23 | } | |
24 | } | |
25 | ||
11056966 | 26 | @media screen and (max-width: $small-view) { |
ab0beac7 K |
27 | .modal-body { |
28 | #forgot-password-email { | |
29 | width: 100%; | |
30 | } | |
31 | } | |
32 | ||
f1ac6348 C |
33 | .modal-footer .grey-button { |
34 | display: none; | |
ab0beac7 K |
35 | } |
36 | } | |
37 | ||
40360c17 | 38 | .wrapper { |
ebefc902 | 39 | display: flex; |
11056966 | 40 | justify-content: space-between; |
ebefc902 | 41 | flex-wrap: wrap; |
11056966 | 42 | margin: auto; |
ebefc902 | 43 | |
931d3430 | 44 | > div { |
40360c17 | 45 | flex: 1 1; |
ebefc902 C |
46 | } |
47 | ||
11056966 C |
48 | form { |
49 | width: 100%; | |
50 | } | |
51 | } | |
27bc9586 | 52 | |
11056966 | 53 | .wrapper, |
c4a05171 | 54 | .alert { |
11056966 C |
55 | max-width: 1200px; |
56 | } | |
ebefc902 | 57 | |
c4a05171 | 58 | .alert { |
11056966 C |
59 | margin: 0 auto 30px; |
60 | } | |
40360c17 | 61 | |
11056966 C |
62 | .login-form-and-externals { |
63 | @include margin-left(10px); | |
64 | @include margin-right(10px); | |
40360c17 | 65 | |
11056966 C |
66 | display: flex; |
67 | flex-wrap: wrap; | |
68 | justify-content: center; | |
11056966 C |
69 | max-width: 450px; |
70 | margin-bottom: 40px; | |
40360c17 | 71 | |
11056966 C |
72 | form { |
73 | margin: 0; | |
40360c17 | 74 | |
11056966 C |
75 | input[type=submit] { |
76 | width: 100%; | |
77 | } | |
40360c17 | 78 | |
11056966 C |
79 | .additional-links { |
80 | display: flex; | |
81 | justify-content: center; | |
82 | margin: 20px 0 30px; | |
83 | ||
84 | .link-orange { | |
85 | margin: 0 15px; | |
40360c17 | 86 | } |
ebefc902 | 87 | } |
11056966 C |
88 | } |
89 | } | |
ebefc902 | 90 | |
11056966 C |
91 | .external-login-blocks { |
92 | min-width: 200px; | |
93 | text-align: center; | |
40360c17 | 94 | |
11056966 C |
95 | .block-title { |
96 | font-weight: $font-semibold; | |
97 | } | |
40360c17 | 98 | |
11056966 C |
99 | .external-login-block { |
100 | @include disable-default-a-behaviour; | |
40360c17 | 101 | |
11056966 C |
102 | cursor: pointer; |
103 | border: 1px solid #d1d7e0; | |
104 | border-radius: 5px; | |
105 | color: pvar(--mainForegroundColor); | |
106 | margin: 10px 10px 0 0; | |
107 | display: flex; | |
108 | justify-content: center; | |
109 | align-items: center; | |
110 | min-height: 35px; | |
111 | min-width: 100px; | |
112 | ||
113 | &:hover { | |
114 | background-color: rgba(209, 215, 224, 0.5); | |
40360c17 K |
115 | } |
116 | } | |
11056966 | 117 | } |
40360c17 | 118 | |
11056966 C |
119 | .instance-information { |
120 | @include margin-left(10px); | |
121 | @include margin-right(10px); | |
27bc9586 | 122 | |
11056966 C |
123 | max-width: 600px; |
124 | min-width: 350px; | |
125 | margin-bottom: 40px; | |
126 | } | |
40360c17 | 127 | |
11056966 C |
128 | .terms-anchor { |
129 | display: inline; | |
130 | } | |
40360c17 | 131 | |
11056966 C |
132 | .terms-link { |
133 | display: none; | |
40360c17 K |
134 | } |
135 | ||
931d3430 | 136 | @mixin column-reverse-display { |
40360c17 K |
137 | flex-direction: column-reverse; |
138 | ||
139 | .login-form-and-externals, | |
140 | .instance-information { | |
27bc9586 C |
141 | @include margin-left(0); |
142 | @include margin-right(0); | |
143 | ||
40360c17 | 144 | width: 100%; |
40360c17 K |
145 | max-width: 450px; |
146 | min-width: unset; | |
147 | align-self: center; | |
148 | } | |
149 | ||
150 | .instance-information { | |
151 | ::ng-deep .accordion { | |
152 | display: none; | |
153 | } | |
154 | } | |
155 | ||
156 | .terms-anchor { | |
157 | display: none; | |
158 | } | |
159 | ||
160 | .terms-link { | |
161 | display: inline; | |
162 | } | |
163 | } | |
164 | ||
165 | @media screen and (max-width: breakpoint(md)) { | |
166 | .wrapper { | |
931d3430 | 167 | @include column-reverse-display(); |
40360c17 K |
168 | } |
169 | } | |
170 | ||
171 | @media screen and (max-width: breakpoint(md) + $menu-width) { | |
172 | :host-context(.main-col:not(.expanded)) { | |
173 | .wrapper { | |
931d3430 | 174 | @include column-reverse-display(); |
40360c17 | 175 | } |
ebefc902 C |
176 | } |
177 | } |