"Fossies" - the Fresh Open Source Software Archive 
Member "neos-development-collection-7.0.1/Neos.Neos/Resources/Private/Styles/Login.scss" (23 Feb 2021, 6602 Bytes) of package /linux/www/neos-development-collection-7.0.1.tar.gz:
As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) SASS/SCSS source code syntax highlighting (style:
standard) with prefixed line numbers.
Alternatively you can here
view or
download the uninterpreted source code file.
1 // Core variables and mixins
2 @import "Foundation/variables"; // Modify this for custom colors, font-sizes, etc
3 @import "Foundation/mixins";
4 @import "Constants";
5 @import "Mixins";
6 @import "Fonts";
7
8 $loginBoxWidth: $unit * 8;
9
10 body {
11 background-color: #141414;
12 margin: 0;
13 background-size: cover;
14 background-repeat: no-repeat;
15 background-position: center;
16 background-attachment: fixed;
17 }
18
19 body,
20 html,
21 .neos-modal-centered {
22 // IE 10+ needs this to work in combination with `flex: 1 0 auto` to make the footer stick to the bottom
23 height: 100%;
24 }
25
26 .neos {
27 // CSS Reset
28 @import "Foundation/reset";
29 @import "Foundation/grid";
30 @import "Foundation/forms";
31 @import "Foundation/tooltip";
32 @import "Shared/Ellipsis";
33
34 @include font;
35
36
37 &[style] {
38 .neos-login-box {
39 padding: $unit;
40 position: relative;
41 overflow: hidden;
42
43 &.background-image-active {
44 &:before,
45 &:after {
46 z-index: -1;
47 display: block;
48 position: absolute;
49 content: ' ';
50 top: 0;
51 left: 0;
52 height: 100%;
53 width: 100%;
54 }
55
56 &:before {
57 // the `background-image` property is set within the template
58 background-size: cover;
59 background-repeat: no-repeat;
60 background-position: center;
61 background-attachment: fixed;
62 -webkit-filter: blur(10px); /* Chrome, Opera, etc. */
63 -moz-filter: blur(10px);
64 -o-filter: blur(10px);
65 -ms-filter: blur(10px);
66 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
67 filter: url('../../Public/Images/blur.svg#blur'); /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
68 filter: blur(10px); /* Firefox 35+, eventually all */
69 padding: $unit;
70 }
71
72 &:after {
73 background: rgba(#fff, .25);
74 }
75 }
76 &-logo {
77 margin: 0 0 $unit/2 0;
78 &-resource {
79 margin: 0 auto 0 auto;
80 display: block;
81 }
82 }
83 }
84
85 input[type="text"],
86 input[type="password"] {
87 background-color: rgba(#fff, .75);
88 color: $textOnWhite;
89
90 &:focus,
91 &:invalid:focus {
92 background-color: rgba(#fff, .9);
93 box-shadow: none;
94 }
95
96 &:-webkit-autofill {
97 -webkit-box-shadow: 0 0 0 50px #fff inset;
98 -webkit-text-fill-color: $textOnWhite;
99
100 &:focus {
101 -webkit-box-shadow: 0 0 0 50px #fff inset;
102 -webkit-text-fill-color: $textOnWhite;
103 }
104 }
105 }
106
107 .neos-login-footer {
108 p,
109 a {
110 color: rgba(#fff, .75);
111 text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
112 }
113 }
114 }
115
116 form {
117 margin-bottom: 0;
118 }
119
120 input[type="text"],
121 input[type="password"] {
122 width: 100%;
123 min-width: $inspectorWidth - $defaultMargin * 2;
124 height: $unit;
125 border: none;
126 background-color: $grayMedium;
127 color: $textOnGray;
128 font-size: 14px;
129 padding: 0 ($defaultMargin - 2px);
130 margin: 0;
131 border-radius: 0;
132 box-sizing: border-box;
133 box-shadow: none;
134 transition: none;
135 @include font;
136
137 &:focus,
138 &:invalid:focus {
139 background-color: #fff;
140 color: $textOnWhite;
141 box-shadow: none;
142 }
143
144 &:-webkit-autofill {
145 -webkit-box-shadow: 0 0 0 50px $grayMedium inset;
146 -webkit-text-fill-color: $textOnGray;
147
148 &:focus {
149 -webkit-box-shadow: 0 0 0 50px #fff inset;
150 -webkit-text-fill-color: $textOnWhite;
151 }
152 }
153 }
154
155 .neos-modal-centered {
156 @include flex();
157 @include flex-align(center);
158 @include flex-justify(center);
159 @include flex-direction(column);
160 min-height: 100vh;
161 }
162
163 .neos-login-main {
164 @include flex();
165 @include flex-align(center);
166 @include flex-justify(center);
167 flex: 1 0 auto;
168 width: 100%;
169 }
170
171 .neos-login-box {
172 background: transparent;
173 border: none;
174 width: $loginBoxWidth;
175 z-index: 10;
176
177 box-shadow: none;
178 border-radius: none;
179
180 svg {
181 margin: 0 auto;
182 display: block;
183 }
184
185 .neos-login-heading {
186 color: #fff;
187 font-size: 16px;
188 margin-bottom: $defaultMargin;
189 text-align: center;
190 font-weight: normal;
191 }
192
193 .neos-login-body {
194 padding: 0;
195 overflow: visible;
196 }
197
198 .neos-actions {
199 bottom: 0;
200 width: 100%;
201 min-height: $unit;
202
203 button, .btn {
204 text-align: center;
205 text-decoration: none !important;
206 display: block;
207 height: $unit;
208 line-height: $unit;
209 color: #fff;
210 border: none;
211 background-image: none;
212 font-size: 14px;
213 text-shadow: none;
214 box-shadow: none;
215 box-sizing: border-box;
216 @include font;
217
218 &:focus {
219 outline: none;
220 }
221
222 &.neos-login-btn {
223 background-color: $blue;
224 width: 100%;
225 }
226
227 &.neos-hidden {
228 display: none;
229 }
230
231 &.neos-disabled {
232 cursor: not-allowed;
233 opacity: .65;
234 }
235 }
236 }
237
238 .neos-controls {
239 height: $unit;
240 margin-bottom: 15px;
241 }
242
243 .neos-tooltip {
244 left: -4px;
245 top: 0;
246 width: 100%;
247 position: relative;
248 clear: both;
249 float: none;
250
251 &.neos-bottom {
252 padding: $relatedMargin 0 0 0;
253 margin-left: $tightMargin;
254 margin-top: -1px;
255 }
256
257 &.neos-in {
258 opacity: 1;
259 }
260
261 .neos-tooltip-arrow {
262 margin-left: -$relatedMargin;
263 border-width: 0 $relatedMargin $relatedMargin $relatedMargin;
264 }
265
266 .neos-tooltip-inner {
267 max-width: $loginBoxWidth;
268 font-size: 13px;
269 color: #fff;
270 border-radius: 0;
271 box-sizing: border-box;
272 }
273 }
274
275 .neos-tooltip-error {
276 .neos-tooltip-arrow {
277 border-bottom-color: $warning;
278 }
279
280 .neos-tooltip-inner {
281 background-color: $warning;
282 }
283 }
284
285 .neos-tooltip-notice {
286 .neos-tooltip-arrow {
287 border-bottom-color: $green;
288 }
289
290 .neos-tooltip-inner {
291 background-color: $green;
292 }
293 }
294 }
295
296 .neos-login-footer {
297 width: 50%;
298 padding: $unit /2;
299 @include font;
300 box-sizing: border-box;
301
302 p {
303 font-size: 12px;
304 color: #535353;
305 line-height: 1.3em;
306 margin: 0;
307 }
308
309 a {
310 color: #535353;
311 &:hover {
312 text-decoration: none;
313 }
314 }
315 }
316 }
317
318 @media (max-width: 1400px) {
319 .neos {
320 &[style] {
321 .neos-login-footer {
322 width: 70%;
323 }
324 }
325 }
326 }
327
328 @media (max-width: 1000px) {
329 .neos {
330 &[style] {
331 .neos-login-footer {
332 width: 90%;
333 }
334 }
335 }
336 }
337
338 @media (max-width: 480px) {
339 .neos {
340 &[style] {
341 .neos-login-box {
342 width: 100%;
343 padding: $unit/2;
344 }
345
346 .neos-login-footer {
347 width: 100%;
348 }
349 }
350
351 input[type="text"],
352 input[type="password"] {
353 min-width: 0;
354 }
355 }
356 }
357
358 .effect--shake {
359 animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
360 transform: translate3d(0, 0, 0);
361 backface-visibility: hidden;
362 perspective: 1000px;
363 }
364
365 @keyframes shake {
366 10%, 90% {
367 transform: translate3d(-1px, 0, 0);
368 }
369
370 20%, 80% {
371 transform: translate3d(2px, 0, 0);
372 }
373
374 30%, 50%, 70% {
375 transform: translate3d(-4px, 0, 0);
376 }
377
378 40%, 60% {
379 transform: translate3d(4px, 0, 0);
380 }
381 }