Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
// Login Page Layout
2 
body.rui-login-layout-2,
3 
body.rui-login-layout-3,
4 
body.path-login.pagelayout-admin,
5 
body.path-login.pagelayout-base {
6 
    background-image: none;
7 
    background-color: $body-bg;
8 
}
9 
 
10 
#page-login-index,
11 
#page-login-signup,
12 
#page-login-forgot_password {
13 
    background-color: $gray-100;
14 
    width: 100%;
15 
    display: flex;
16 
    align-items: center;
17 
    height: auto;
18 
 
19 
    &.rui-login-layout-1 {
20 
        display: block;
21 
    }
22 
 
23 
    .main-content {
24 
        margin-bottom: 0;
25 
    }
26 
}
27 
 
28 
.theme-dark#page-login-index,
29 
.theme-dark#page-login-signup,
30 
.theme-dark#page-login-forgot_password {
31 
    background-color: $dm-gray-100;
32 
}
33 
 
34 
.rui-login-footer {
35 
    padding: 0 20px;
36 
    margin-bottom: 30px;
37 
 
38 
    @include media-breakpoint-between(xs, md) {
39 
        margin: 0 auto 20px;
40 
        width: 90%;
41 
    }
42 
}
43 
 
44 
.rui-login-footer-content {
45 
    font-size: $font-size-md;
46 
}
47 
 
48 
.rui-login-top-btn {
49 
    background-color: rgba($black, .4);
50 
    backdrop-filter: blur(10px);
51 
    -webkit-backdrop-filter: blur(10px);
52 
    padding: 5px 14px;
53 
    border-radius: $btn-border-radius;
54 
 
55 
    font-size: $font-size-md;
56 
    text-align: center;
57 
    color: $white;
58 
 
59 
    @include media-breakpoint-up(lmd) {
60 
        position: fixed;
61 
        top: 20px;
62 
        right: 20px;
63 
        text-align: right;
64 
 
65 
        .rui-login-layout-5 & {
66 
            left: 20px;
67 
            right: auto;
68 
        }
69 
    }
70 
 
71 
    @include media-breakpoint-between(xs, md) {
72 
        margin: 3px auto;
73 
        width: max-content;
74 
        max-width: 300px;
75 
        position: relative;
76 
        top: 0;
77 
        left: 0;
78 
        right: 0;
79 
 
80 
        display: flex;
81 
        flex-wrap: wrap;
82 
        justify-content: center;
83 
        align-items: center;
84 
 
85 
        text-align: center;
86 
    }
87 
 
88 
    a,
89 
    .btn-link--clean {
90 
        font-size: $font-size-md;
91 
        color: $white;
92 
 
93 
        &:hover {
94 
            color: $white;
95 
            opacity: .6;
96 
        }
97 
    }
98 
 
99 
    h1 {
100 
        font-size: 14px;
101 
    }
102 
 
103 
}
104 
 
105 
.rui-login-layout {
106 
 
107 
    .rui-login-layout-4 &,
108 
    .rui-login-layout-5 & {
109 
        height: 100vh;
110 
    }
111 
}
112 
 
113 
.login-wrapper {
114 
 
115 
    .rui-login-layout-1 &,
116 
    .rui-login-layout-2 &,
117 
    .rui-login-layout-3 & {
118 
        align-content: center;
119 
        display: grid;
120 
        height: 100%;
121 
        min-height: 100vh;
122 
    }
123 
}
124 
 
125 
.rui-loginpage-intro-logo {
126 
    margin-bottom: 20px;
127 
    display: flex;
128 
    justify-content: center;
129 
    align-items: center;
130 
    text-align: center;
131 
 
132 
    .rui-login-logo {
133 
        width: 100%;
134 
        max-width: 260px;
135 
        height: 90px;
136 
        object-fit: contain;
137 
        object-position: center;
138 
    }
139 
 
140 
    a {
141 
        &:hover {
142 
            text-decoration: none;
143 
        }
144 
    }
145 
 
1441 ariadna 146 
    h1 {
1 efrain 147 
        font-size: 30px;
148 
        margin-bottom: 0;
149 
    }
150 
}
151 
 
152 
 
153 
.rui-login-large-container {
154 
    width: 700px;
155 
    margin: $page-padding-global auto;
156 
 
157 
    input[type="text"],
158 
    input[type="password"] {
159 
        width: 100%;
160 
    }
161 
 
162 
    @include media-breakpoint-between(sm, md) {
163 
        max-width: 90%;
164 
    }
165 
}
166 
 
167 
.rui-login-box {
168 
    display: flex;
169 
    align-items: center;
170 
    justify-content: center;
171 
    background-color: $container-bg;
172 
 
173 
    .theme-dark & {
174 
        background-color: $dm-container-bg;
175 
    }
176 
 
177 
    @include media-breakpoint-between(xs, sm) {
178 
        padding: 10px;
179 
    }
180 
 
181 
    .rui-login-layout--1 & {
182 
        padding: 30px;
183 
        border-radius: $btn-border-radius;
184 
 
185 
        @include media-breakpoint-between(xs, sm) {
186 
            padding: 20px;
187 
        }
188 
    }
189 
 
190 
    .rui-login-layout--2 &,
191 
    .rui-login-layout--3 & {
192 
        padding: 60px;
193 
 
194 
        @include media-breakpoint-between(xs, sm) {
195 
            padding: 20px;
196 
        }
197 
    }
198 
 
199 
    .rui-login-layout--3 & {
200 
        border-radius: $btn-border-radius 0 0 $btn-border-radius;
201 
    }
202 
 
203 
    .rui-login-layout--3 & {
204 
        border-radius: 0 $btn-border-radius $btn-border-radius 0;
205 
    }
206 
 
207 
    .rui-login-layout--4 &,
208 
    .rui-login-layout--5 & {
209 
        padding: 40px;
210 
 
211 
        @include media-breakpoint-between(xs, lmd) {
212 
            padding: 20px;
213 
            width: 100%;
214 
            max-width: 400px;
215 
            border-radius: $btn-border-radius;
216 
            margin: 0 auto;
217 
        }
218 
    }
219 
}
220 
 
1441 ariadna 221 
#page-admin-tool-mfa-auth .login-container .main-content,
1 efrain 222 
#page-login-forgot_password .login-container .main-content {
223 
    max-width: 500px;
224 
 
225 
    padding: 60px;
226 
    margin: 60px auto;
227 
 
228 
    background-color: $container-bg;
229 
    border-radius: $btn-border-radius;
230 
 
231 
    @include media-breakpoint-between(xs, sm) {
232 
        padding: 20px;
233 
    }
234 
 
235 
    .mform {
236 
 
237 
        .col-md-3,
238 
        .col-md-9 {
239 
            padding: 0 !important;
240 
            margin-bottom: .35rem !important;
241 
            flex: 0 0 100% !important;
242 
            max-width: 100% !important;
243 
            text-align: left !important;
244 
        }
245 
    }
246 
}
247 
 
248 
.theme-dark#page-login-forgot_password .login-container .main-content {
249 
    background-color: $dm-container-bg;
250 
}
251 
 
252 
.rui-hasinstructions-desc {
253 
    font-size: $font-size-xs;
254 
    font-weight: 400;
255 
}
256 
 
257 
.rui-rememberusername-text,
258 
.rui-login-forgot-btn {
259 
    margin-top: 5px;
260 
    font-size: $font-size-xs;
261 
    font-weight: $font-weight-medium;
262 
    color: $body-color-light;
1441 ariadna 263 
 
264 
    &::before {
265 
        background-color: $body-color-light;
266 
    }
1 efrain 267 
}
268 
 
269 
 
270 
// Layout
271 
 
272 
.rui-login-container {
273 
    margin: 30px auto;
274 
 
275 
    overflow: hidden;
276 
 
277 
    display: flex;
278 
    flex-wrap: wrap;
279 
    align-items: stretch;
280 
 
281 
    border-radius: $btn-border-radius;
282 
 
283 
    .rui-login-layout-img & {
284 
        max-width: 1020px;
285 
        width: 100%;
286 
 
287 
        @include media-breakpoint-up(lg) {
288 
            width: 100%;
289 
        }
290 
    }
291 
 
292 
    .rui-login-layout--2 & {
293 
        flex-direction: row;
294 
 
295 
        @include media-breakpoint-up(md) {
296 
            border-radius: $border-radius;
297 
        }
298 
 
299 
        @include media-breakpoint-between(xs, sm) {
300 
            border-radius: $btn-border-radius;
301 
        }
302 
    }
303 
 
304 
    .rui-login-layout--3 & {
305 
        flex-direction: row-reverse;
306 
 
307 
        @include media-breakpoint-up(md) {
308 
            border-radius: $border-radius;
309 
        }
310 
 
311 
        @include media-breakpoint-between(xs, sm) {
312 
            border-radius: $btn-border-radius;
313 
        }
314 
    }
315 
}
316 
 
317 
.rui-login-bg-container {
318 
    width: 50%;
319 
    background-color: $login-bgcolor;
320 
    background-repeat: no-repeat;
321 
    background-size: cover;
322 
    background-position: center;
323 
    position: relative;
324 
 
325 
    color: $login-bgcolor-txt;
326 
 
327 
    .theme-dark & {
328 
        background-color: $dm-container-bg;
329 
        color: $dm-body-color;
330 
    }
331 
 
332 
    .rui-login-layout--2 & {
333 
        border-radius: 0 $border-radius $border-radius 0;
334 
    }
335 
 
336 
    .rui-login-layout--3 & {
337 
        border-radius: $border-radius 0 0 $border-radius;
338 
    }
339 
 
340 
    h1,
341 
    h2,
342 
    h3,
343 
    h4,
344 
    h5,
345 
    h6,
346 
    p,
347 
    small,
348 
    span,
349 
    div {
350 
        color: inherit;
351 
    }
352 
 
353 
    @include media-breakpoint-between(sm, md) {
354 
        width: 100%;
355 
    }
356 
}
357 
 
358 
.rui-login-box {
359 
    .rui-login-content {
360 
        @include media-breakpoint-up(md) {
361 
            width: 340px;
362 
            height: 100%;
363 
        }
364 
 
365 
        @include media-breakpoint-between(xs, sm) {
366 
            max-width: 280px;
367 
            height: 100%;
368 
        }
369 
    }
370 
 
371 
    .rui-login-layout-img & {
372 
        width: 50%;
1441 ariadna 373 
        border-radius: $btn-border-radius;
1 efrain 374 
 
375 
        @include media-breakpoint-only(md) {
376 
            width: 100%;
377 
            max-width: 600px;
378 
            margin: 0 auto;
379 
        }
380 
 
381 
        @include media-breakpoint-only(sm) {
382 
            width: 100%;
383 
            margin: 0 auto;
384 
        }
385 
    }
386 
 
387 
    .rui-login-layout--1 & {
388 
        margin: 30px auto;
389 
        width: 100%;
390 
        max-width: 400px;
391 
        @include thin-scrolls($scroll-bg-track);
392 
    }
393 
 
394 
    .rui-login-layout--4 &,
395 
    .rui-login-layout--5 & {
396 
        @include media-breakpoint-up(lmd) {
397 
            position: absolute;
398 
            top: 0;
399 
            border-radius: 0;
400 
            min-height: 100vh;
401 
        }
402 
 
403 
        @include media-breakpoint-down(md) {
404 
            position: relative;
405 
            top: 0;
406 
        }
407 
    }
408 
 
409 
    .rui-login-layout--4 & {
410 
        left: 0;
411 
    }
412 
 
413 
    .rui-login-layout--5 & {
414 
        right: 0;
415 
    }
416 
}
417 
 
418 
.rui-login-additional-content {
419 
    position: absolute;
420 
    top: 90px;
421 
    left: 90px;
422 
 
423 
    font-size: 2rem;
424 
    font-weight: $font-weight-bold;
425 
}
426 
 
427 
.rui-login-wrapper {
428 
    width: 100%;
429 
    max-width: 1020px;
430 
    margin-left: auto;
431 
    margin-right: auto;
432 
}
433 
 
434 
 
435 
.rui-login-logo--sep {
436 
    margin-bottom: 0;
437 
    margin-left: 40px;
438 
    padding-left: 20px;
439 
    position: relative;
440 
 
441 
    &:before {
442 
        content: '';
443 
        position: absolute;
444 
        left: -10px;
445 
        top: calc(50% - 10px);
446 
 
447 
        background-color: $border-color;
448 
        width: 1px;
449 
        height: 20px;
450 
    }
451 
}
452 
 
453 
.rui-signup-layout {
454 
    padding: 40px 40px 40px 100px;
455 
    height: 100vh;
456 
 
457 
    display: flex;
458 
    justify-content: center;
459 
 
460 
    @include media-breakpoint-only(md) {
461 
        padding: 0 30px 30px 30px;
462 
    }
463 
 
464 
    @include media-breakpoint-between(xs, sm) {
465 
        padding: 0;
466 
    }
467 
}
468 
 
469 
.rui-login-box {
470 
    .form-control {
471 
        width: 100%;
472 
    }
473 
 
474 
    .col-md-3,
475 
    .col-md-9 {
476 
        flex: 0 0 100%;
477 
        max-width: 100%;
478 
        text-align: left !important;
479 
    }
480 
 
481 
    .col-md-3 {
482 
        padding: 0 !important;
483 
        margin-top: 5px !important;
484 
        margin-bottom: 5px !important;
485 
    }
486 
 
487 
    .rui-additional-content {
488 
        position: sticky;
489 
        top: 60px;
490 
    }
491 
 
492 
    .mform fieldset.collapsible legend a.fheader {
493 
        &:last-of-type {
494 
            margin-bottom: 0;
495 
        }
496 
    }
497 
}
498 
 
499 
.rui-signup-additional-content {
500 
    height: max-content;
501 
 
502 
    @include media-breakpoint-up(lg) {
503 
        position: sticky;
504 
        top: 11%;
505 
 
506 
        margin: 90px 0;
507 
        padding-left: 80px;
508 
    }
509 
 
510 
    @include media-breakpoint-between(xs, md) {
511 
        width: 90%;
512 
        padding-left: 0;
513 
        margin: 30px auto;
514 
        position: relative;
515 
    }
516 
}
517 
 
518 
.rui-backtologin {
519 
    position: fixed;
520 
    top: 26px;
521 
    left: 30px;
522 
 
523 
    @include media-breakpoint-between(xs, sm) {
524 
        position: absolute;
525 
        top: -34px;
526 
        left: 10px;
527 
    }
528 
}
529 
 
530 
.btn--back {
531 
    display: flex;
532 
    align-items: center;
533 
    justify-content: center;
534 
 
535 
    background-color: transparent;
536 
    width: 40px;
537 
    height: 40px;
538 
 
539 
    border: 1px solid $border-color;
540 
    border-radius: $border-radius;
541 
 
542 
    color: $gray-900;
543 
 
544 
    &:hover {
545 
        background-color: $gray-900;
546 
        border-color: $gray-900;
547 
        color: $gray-100;
548 
    }
549 
}
550 
 
551 
.rui-badge-guest {
552 
    position: fixed;
553 
    bottom: 3px;
554 
    right: 3px;
555 
 
556 
    padding: 6px 12px;
557 
 
558 
    display: inline-flex;
559 
    align-items: center;
560 
 
561 
    border-radius: $btn-border-radius;
562 
 
563 
    background-color: $yellow-200;
564 
    font-size: $font-size-md;
565 
    font-weight: $font-weight-medium;
566 
    color: $body-color;
567 
 
568 
    transition: right 250ms ease;
569 
 
570 
    .scrolled & {
571 
        right: 60px;
572 
    }
573 
}
574 
 
575 
.rui-login-lang-btn {
576 
    display: flex;
577 
    align-items: center;
578 
    justify-content: center;
579 
 
580 
    height: 40px;
581 
 
582 
    border: none;
583 
    background-color: $gray-900;
584 
    border-radius: $border-radius;
585 
    font-size: $font-size-xs;
586 
    color: $gray-100;
587 
 
588 
    @include media-breakpoint-between(xs, sm) {
589 
        padding: 8px;
590 
    }
591 
 
592 
    &[aria-expanded="true"],
593 
    &:hover {
594 
        color: $gray-100;
595 
        background-color: $gray-800;
596 
        text-decoration: none;
597 
    }
598 
}
599 
 
600 
// Form mod
601 
.form-control--username,
602 
.form-control--password {
603 
    background-size: 22px;
604 
    background-position: left 16px top 11px;
605 
    background-repeat: no-repeat;
606 
    background-color: transparent;
607 
 
608 
    padding-left: 50px;
609 
    position: relative;
610 
}
611 
 
612 
.form-control--username-box:before,
613 
.form-control--password-box:before {
614 
    content: '';
615 
    width: 20px;
616 
    height: 20px;
617 
    position: absolute;
618 
    z-index: 3;
619 
    top: calc(50% - 10px);
620 
    left: 16px;
621 
 
622 
    background-size: 20px;
623 
 }
624 
 
625 
.form-control--username-box:before {
626 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='#{url-friendly-colour($body-color-light)}'%3E%3Cg%3E%3Cg data-name='person'%3E%3Crect width='24' height='24' opacity='0'/%3E%3Cpath d='M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z'/%3E%3Cpath d='M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
627 
}
628 
 
629 
.form-control--password-box:before {
630 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($body-color-light)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 13.25C17.3472 13.25 19.25 11.3472 19.25 9C19.25 6.65279 17.3472 4.75 15 4.75C12.6528 4.75 10.75 6.65279 10.75 9C10.75 9.31012 10.7832 9.61248 10.8463 9.90372L4.75 16V19.25H8L8.75 18.5V16.75H10.5L11.75 15.5V13.75H13.5L14.0963 13.1537C14.3875 13.2168 14.6899 13.25 15 13.25Z'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color-light)}' d='M16.5 8C16.5 8.27614 16.2761 8.5 16 8.5C15.7239 8.5 15.5 8.27614 15.5 8C15.5 7.72386 15.7239 7.5 16 7.5C16.2761 7.5 16.5 7.72386 16.5 8Z'%3E%3C/path%3E%3C/svg%3E%0A");
631 
}
632 
 
633 
// Top Wrapper
634 
.rui-login-lang-wrapper {
635 
    position: fixed;
636 
    bottom: 20px;
637 
    right: 20px;
638 
    z-index: $zindex-fixed;
639 
 
640 
    .rui-login-layout-5 & {
641 
        left: 20px;
642 
    }
643 
}
644 
 
645 
@include media-breakpoint-between(xs, sm) {
646 
    .rui-lang-btn .rui-lang-btn-text {
647 
        display: none;
648 
    }
649 
}
650 
 
651 
.rui-login-wrapper--margin {
652 
    margin-top: 25px;
653 
}
654 
 
655 
.rui-login-logo-container {
656 
    .rui-login-logo {
657 
        max-width: 260px;
658 
        height: 90px;
659 
    }
660 
 
661 
    .rui-login-layout--1 &,
662 
    .rui-login-layout--2 &,
663 
    .rui-login-layout--3 & {
664 
        display: flex;
665 
        flex-wrap: wrap;
666 
        align-items: center;
667 
        justify-content: center;
668 
        text-align: center;
669 
 
670 
        max-width: 100%;
671 
        max-height: 200px;
672 
    }
673 
 
674 
    .rui-login-layout--4 &,
675 
    .rui-login-layout--5 & {
676 
        @include media-breakpoint-up(lmd) {
677 
            width: 200px;
678 
            position: fixed;
679 
            top: 40px;
680 
        }
681 
 
682 
        @include media-breakpoint-down(md) {
683 
            width: 100%;
684 
            position: relative;
685 
            text-align: center;
686 
        }
687 
    }
688 
 
689 
    .rui-login-layout--4 & {
690 
        @include media-breakpoint-up(lmd) {
691 
            right: 60px;
692 
            text-align: right;
693 
        }
694 
    }
695 
 
696 
    .rui-login-layout--5 & {
697 
        @include media-breakpoint-up(lmd) {
698 
            left: 60px;
699 
            text-align: left;
700 
        }
701 
    }
702 
}
703 
 
704 
.rui-topbar {
705 
 
706 
    .rui-login-layout--1 &,
707 
    .rui-login-layout--2 &,
708 
    .rui-login-layout--3 & {
709 
        width: 100%;
710 
        margin-top: 30px;
711 
        margin-bottom: 30px;
712 
    }
713 
}
714 
 
715 
.rui-login-html-1 {
716 
 
717 
    .rui-login-layout--4 &,
718 
    .rui-login-layout--5 & {
719 
        position: fixed;
720 
        top: 40%;
721 
 
722 
        font-weight: $font-weight-bold;
723 
        color: $white;
724 
 
725 
        @include media-breakpoint-up(lmd) {
726 
            font-size: 40px;
727 
        }
728 
 
729 
        @include media-breakpoint-down(md) {
730 
            display: none;
731 
        }
732 
    }
733 
 
734 
    .rui-login-layout--4 & {
735 
        right: 60px;
736 
    }
737 
 
738 
    .rui-login-layout--5 & {
739 
        left: 60px;
740 
    }
741 
 
742 
}
743 
 
744 
#page-login-index {
745 
    .greedy {
746 
        @include media-breakpoint-between(sm, md) {
747 
            justify-content: center;
748 
        }
749 
    }
750 
}
751 
 
752 
.rui-login-logo-name {
753 
    margin-bottom: 0;
754 
    font-size: 1.125rem;
755 
    font-weight: $font-weight-bold;
756 
    color: $body-color;
757 
}
758 
 
759 
.btn--cookie {
760 
    position: fixed;
761 
    bottom: 20px;
762 
    right: 20px;
763 
 
764 
    .rui-multilang & {
765 
        bottom: 70px;
766 
    }
767 
 
768 
    .rui-login-layout--5 & {
769 
        left: 20px;
770 
        right: auto;
771 
    }
772 
}
773 
 
774 
.rui-login-layout-1 {
775 
 
776 
    .login-container {
777 
        min-height: 100vh;
778 
        display: grid;
779 
        align-content: center;
780 
    }
781 
 
782 
    .main-content {
783 
        margin-bottom: 0;
784 
    }
785 
 
786 
}
787 
 
788 
.rui-maintenance {
789 
 
790 
    .rui-login-layout-4 &,
791 
    .rui-login-layout-5 & {
792 
        max-width: 400px;
793 
 
794 
        position: absolute;
795 
        top: 0;
796 
        left: 30px;
797 
    }
798 
 
1441 ariadna 799 
    h1 {
1 efrain 800 
        font-size: 16px;
801 
    }
802 
 
803 
    .rui-maintenance-desc {
804 
        font-size: $font-size-sm;
805 
    }
806 
}
807 
 
808 
.rui-login-box .custom-select {
809 
    width: 100%;
810 
}