Proyectos de Subversion Moodle

Rev

| 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 
 
146 
    h2 {
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 
 
221 
#page-login-forgot_password .login-container .main-content {
222 
    max-width: 500px;
223 
 
224 
    padding: 60px;
225 
    margin: 60px auto;
226 
 
227 
    background-color: $container-bg;
228 
    border-radius: $btn-border-radius;
229 
 
230 
    @include media-breakpoint-between(xs, sm) {
231 
        padding: 20px;
232 
    }
233 
 
234 
    .mform {
235 
 
236 
        .col-md-3,
237 
        .col-md-9 {
238 
            padding: 0 !important;
239 
            margin-bottom: .35rem !important;
240 
            flex: 0 0 100% !important;
241 
            max-width: 100% !important;
242 
            text-align: left !important;
243 
        }
244 
    }
245 
}
246 
 
247 
.theme-dark#page-login-forgot_password .login-container .main-content {
248 
    background-color: $dm-container-bg;
249 
}
250 
 
251 
.rui-hasinstructions-desc {
252 
    font-size: $font-size-xs;
253 
    font-weight: 400;
254 
}
255 
 
256 
.rui-rememberusername-text,
257 
.rui-login-forgot-btn {
258 
    margin-top: 5px;
259 
    font-size: $font-size-xs;
260 
    font-weight: $font-weight-medium;
261 
    color: $body-color-light;
262 
}
263 
 
264 
 
265 
// Layout
266 
 
267 
.rui-login-container {
268 
    margin: 30px auto;
269 
 
270 
    overflow: hidden;
271 
 
272 
    display: flex;
273 
    flex-wrap: wrap;
274 
    align-items: stretch;
275 
 
276 
    border-radius: $btn-border-radius;
277 
 
278 
    .rui-login-layout-img & {
279 
        max-width: 1020px;
280 
        width: 100%;
281 
 
282 
        @include media-breakpoint-up(lg) {
283 
            width: 100%;
284 
        }
285 
    }
286 
 
287 
    .rui-login-layout--2 & {
288 
        flex-direction: row;
289 
 
290 
        @include media-breakpoint-up(md) {
291 
            border-radius: $border-radius;
292 
        }
293 
 
294 
        @include media-breakpoint-between(xs, sm) {
295 
            border-radius: $btn-border-radius;
296 
        }
297 
    }
298 
 
299 
    .rui-login-layout--3 & {
300 
        flex-direction: row-reverse;
301 
 
302 
        @include media-breakpoint-up(md) {
303 
            border-radius: $border-radius;
304 
        }
305 
 
306 
        @include media-breakpoint-between(xs, sm) {
307 
            border-radius: $btn-border-radius;
308 
        }
309 
    }
310 
}
311 
 
312 
.rui-login-bg-container {
313 
    width: 50%;
314 
    background-color: $login-bgcolor;
315 
    background-repeat: no-repeat;
316 
    background-size: cover;
317 
    background-position: center;
318 
    position: relative;
319 
 
320 
    color: $login-bgcolor-txt;
321 
 
322 
    .theme-dark & {
323 
        background-color: $dm-container-bg;
324 
        color: $dm-body-color;
325 
    }
326 
 
327 
    .rui-login-layout--2 & {
328 
        border-radius: 0 $border-radius $border-radius 0;
329 
    }
330 
 
331 
    .rui-login-layout--3 & {
332 
        border-radius: $border-radius 0 0 $border-radius;
333 
    }
334 
 
335 
    h1,
336 
    h2,
337 
    h3,
338 
    h4,
339 
    h5,
340 
    h6,
341 
    p,
342 
    small,
343 
    span,
344 
    div {
345 
        color: inherit;
346 
    }
347 
 
348 
    @include media-breakpoint-between(sm, md) {
349 
        width: 100%;
350 
    }
351 
}
352 
 
353 
.rui-login-box {
354 
    .rui-login-content {
355 
        @include media-breakpoint-up(md) {
356 
            width: 340px;
357 
            height: 100%;
358 
        }
359 
 
360 
        @include media-breakpoint-between(xs, sm) {
361 
            max-width: 280px;
362 
            height: 100%;
363 
        }
364 
    }
365 
 
366 
    .rui-login-layout-img & {
367 
        width: 50%;
368 
 
369 
        @include media-breakpoint-only(md) {
370 
            width: 100%;
371 
            max-width: 600px;
372 
            margin: 0 auto;
373 
        }
374 
 
375 
        @include media-breakpoint-only(sm) {
376 
            width: 100%;
377 
            margin: 0 auto;
378 
        }
379 
    }
380 
 
381 
    .rui-login-layout--1 & {
382 
        margin: 30px auto;
383 
        width: 100%;
384 
        max-width: 400px;
385 
        @include thin-scrolls($scroll-bg-track);
386 
    }
387 
 
388 
    .rui-login-layout--4 &,
389 
    .rui-login-layout--5 & {
390 
        @include media-breakpoint-up(lmd) {
391 
            position: absolute;
392 
            top: 0;
393 
            border-radius: 0;
394 
            min-height: 100vh;
395 
        }
396 
 
397 
        @include media-breakpoint-down(md) {
398 
            position: relative;
399 
            top: 0;
400 
        }
401 
    }
402 
 
403 
    .rui-login-layout--4 & {
404 
        left: 0;
405 
    }
406 
 
407 
    .rui-login-layout--5 & {
408 
        right: 0;
409 
    }
410 
}
411 
 
412 
.rui-login-additional-content {
413 
    position: absolute;
414 
    top: 90px;
415 
    left: 90px;
416 
 
417 
    font-size: 2rem;
418 
    font-weight: $font-weight-bold;
419 
}
420 
 
421 
.rui-login-wrapper {
422 
    width: 100%;
423 
    max-width: 1020px;
424 
    margin-left: auto;
425 
    margin-right: auto;
426 
}
427 
 
428 
 
429 
.rui-login-logo--sep {
430 
    margin-bottom: 0;
431 
    margin-left: 40px;
432 
    padding-left: 20px;
433 
    position: relative;
434 
 
435 
    &:before {
436 
        content: '';
437 
        position: absolute;
438 
        left: -10px;
439 
        top: calc(50% - 10px);
440 
 
441 
        background-color: $border-color;
442 
        width: 1px;
443 
        height: 20px;
444 
    }
445 
}
446 
 
447 
.rui-signup-layout {
448 
    padding: 40px 40px 40px 100px;
449 
    height: 100vh;
450 
 
451 
    display: flex;
452 
    justify-content: center;
453 
 
454 
    @include media-breakpoint-only(md) {
455 
        padding: 0 30px 30px 30px;
456 
    }
457 
 
458 
    @include media-breakpoint-between(xs, sm) {
459 
        padding: 0;
460 
    }
461 
}
462 
 
463 
.rui-login-box {
464 
    .form-control {
465 
        width: 100%;
466 
    }
467 
 
468 
    .col-md-3,
469 
    .col-md-9 {
470 
        flex: 0 0 100%;
471 
        max-width: 100%;
472 
        text-align: left !important;
473 
    }
474 
 
475 
    .col-md-3 {
476 
        padding: 0 !important;
477 
        margin-top: 5px !important;
478 
        margin-bottom: 5px !important;
479 
    }
480 
 
481 
    .rui-additional-content {
482 
        position: sticky;
483 
        top: 60px;
484 
    }
485 
 
486 
    .mform fieldset.collapsible legend a.fheader {
487 
        &:last-of-type {
488 
            margin-bottom: 0;
489 
        }
490 
    }
491 
}
492 
 
493 
.rui-signup-additional-content {
494 
    height: max-content;
495 
 
496 
    @include media-breakpoint-up(lg) {
497 
        position: sticky;
498 
        top: 11%;
499 
 
500 
        margin: 90px 0;
501 
        padding-left: 80px;
502 
    }
503 
 
504 
    @include media-breakpoint-between(xs, md) {
505 
        width: 90%;
506 
        padding-left: 0;
507 
        margin: 30px auto;
508 
        position: relative;
509 
    }
510 
}
511 
 
512 
.rui-backtologin {
513 
    position: fixed;
514 
    top: 26px;
515 
    left: 30px;
516 
 
517 
    @include media-breakpoint-between(xs, sm) {
518 
        position: absolute;
519 
        top: -34px;
520 
        left: 10px;
521 
    }
522 
}
523 
 
524 
.btn--back {
525 
    display: flex;
526 
    align-items: center;
527 
    justify-content: center;
528 
 
529 
    background-color: transparent;
530 
    width: 40px;
531 
    height: 40px;
532 
 
533 
    border: 1px solid $border-color;
534 
    border-radius: $border-radius;
535 
 
536 
    color: $gray-900;
537 
 
538 
    &:hover {
539 
        background-color: $gray-900;
540 
        border-color: $gray-900;
541 
        color: $gray-100;
542 
    }
543 
}
544 
 
545 
.rui-badge-guest {
546 
    position: fixed;
547 
    bottom: 3px;
548 
    right: 3px;
549 
 
550 
    padding: 6px 12px;
551 
 
552 
    display: inline-flex;
553 
    align-items: center;
554 
 
555 
    border-radius: $btn-border-radius;
556 
 
557 
    background-color: $yellow-200;
558 
    font-size: $font-size-md;
559 
    font-weight: $font-weight-medium;
560 
    color: $body-color;
561 
 
562 
    transition: right 250ms ease;
563 
 
564 
    .scrolled & {
565 
        right: 60px;
566 
    }
567 
}
568 
 
569 
.rui-login-lang-btn {
570 
    display: flex;
571 
    align-items: center;
572 
    justify-content: center;
573 
 
574 
    height: 40px;
575 
 
576 
    border: none;
577 
    background-color: $gray-900;
578 
    border-radius: $border-radius;
579 
    font-size: $font-size-xs;
580 
    color: $gray-100;
581 
 
582 
    @include media-breakpoint-between(xs, sm) {
583 
        padding: 8px;
584 
    }
585 
 
586 
    &[aria-expanded="true"],
587 
    &:hover {
588 
        color: $gray-100;
589 
        background-color: $gray-800;
590 
        text-decoration: none;
591 
    }
592 
}
593 
 
594 
// Form mod
595 
.form-control--username,
596 
.form-control--password {
597 
    background-size: 22px;
598 
    background-position: left 16px top 11px;
599 
    background-repeat: no-repeat;
600 
    background-color: transparent;
601 
 
602 
    padding-left: 50px;
603 
    position: relative;
604 
}
605 
 
606 
.form-control--username-box:before,
607 
.form-control--password-box:before {
608 
    content: '';
609 
    width: 20px;
610 
    height: 20px;
611 
    position: absolute;
612 
    z-index: 3;
613 
    top: calc(50% - 10px);
614 
    left: 16px;
615 
 
616 
    background-size: 20px;
617 
 }
618 
 
619 
.form-control--username-box:before {
620 
    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");
621 
}
622 
 
623 
.form-control--password-box:before {
624 
    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");
625 
}
626 
 
627 
// Top Wrapper
628 
.rui-login-lang-wrapper {
629 
    position: fixed;
630 
    bottom: 20px;
631 
    right: 20px;
632 
    z-index: $zindex-fixed;
633 
 
634 
    .rui-login-layout-5 & {
635 
        left: 20px;
636 
    }
637 
}
638 
 
639 
@include media-breakpoint-between(xs, sm) {
640 
    .rui-lang-btn .rui-lang-btn-text {
641 
        display: none;
642 
    }
643 
}
644 
 
645 
.rui-login-wrapper--margin {
646 
    margin-top: 25px;
647 
}
648 
 
649 
.rui-login-logo-container {
650 
    .rui-login-logo {
651 
        max-width: 260px;
652 
        height: 90px;
653 
    }
654 
 
655 
    .rui-login-layout--1 &,
656 
    .rui-login-layout--2 &,
657 
    .rui-login-layout--3 & {
658 
        display: flex;
659 
        flex-wrap: wrap;
660 
        align-items: center;
661 
        justify-content: center;
662 
        text-align: center;
663 
 
664 
        max-width: 100%;
665 
        max-height: 200px;
666 
    }
667 
 
668 
    .rui-login-layout--4 &,
669 
    .rui-login-layout--5 & {
670 
        @include media-breakpoint-up(lmd) {
671 
            width: 200px;
672 
            position: fixed;
673 
            top: 40px;
674 
        }
675 
 
676 
        @include media-breakpoint-down(md) {
677 
            width: 100%;
678 
            position: relative;
679 
            text-align: center;
680 
        }
681 
    }
682 
 
683 
    .rui-login-layout--4 & {
684 
        @include media-breakpoint-up(lmd) {
685 
            right: 60px;
686 
            text-align: right;
687 
        }
688 
    }
689 
 
690 
    .rui-login-layout--5 & {
691 
        @include media-breakpoint-up(lmd) {
692 
            left: 60px;
693 
            text-align: left;
694 
        }
695 
    }
696 
}
697 
 
698 
.rui-topbar {
699 
 
700 
    .rui-login-layout--1 &,
701 
    .rui-login-layout--2 &,
702 
    .rui-login-layout--3 & {
703 
        width: 100%;
704 
        margin-top: 30px;
705 
        margin-bottom: 30px;
706 
    }
707 
}
708 
 
709 
.rui-login-html-1 {
710 
 
711 
    .rui-login-layout--4 &,
712 
    .rui-login-layout--5 & {
713 
        position: fixed;
714 
        top: 40%;
715 
 
716 
        font-weight: $font-weight-bold;
717 
        color: $white;
718 
 
719 
        @include media-breakpoint-up(lmd) {
720 
            font-size: 40px;
721 
        }
722 
 
723 
        @include media-breakpoint-down(md) {
724 
            display: none;
725 
        }
726 
    }
727 
 
728 
    .rui-login-layout--4 & {
729 
        right: 60px;
730 
    }
731 
 
732 
    .rui-login-layout--5 & {
733 
        left: 60px;
734 
    }
735 
 
736 
}
737 
 
738 
#page-login-index {
739 
    .greedy {
740 
        @include media-breakpoint-between(sm, md) {
741 
            justify-content: center;
742 
        }
743 
    }
744 
}
745 
 
746 
.rui-login-logo-name {
747 
    margin-bottom: 0;
748 
    font-size: 1.125rem;
749 
    font-weight: $font-weight-bold;
750 
    color: $body-color;
751 
}
752 
 
753 
.btn--cookie {
754 
    position: fixed;
755 
    bottom: 20px;
756 
    right: 20px;
757 
 
758 
    .rui-multilang & {
759 
        bottom: 70px;
760 
    }
761 
 
762 
    .rui-login-layout--5 & {
763 
        left: 20px;
764 
        right: auto;
765 
    }
766 
}
767 
 
768 
.rui-login-layout-1 {
769 
 
770 
    .login-container {
771 
        min-height: 100vh;
772 
        display: grid;
773 
        align-content: center;
774 
    }
775 
 
776 
    .main-content {
777 
        margin-bottom: 0;
778 
    }
779 
 
780 
}
781 
 
782 
.rui-maintenance {
783 
 
784 
    .rui-login-layout-4 &,
785 
    .rui-login-layout-5 & {
786 
        max-width: 400px;
787 
 
788 
        position: absolute;
789 
        top: 0;
790 
        left: 30px;
791 
    }
792 
 
793 
    h2 {
794 
        font-size: 16px;
795 
    }
796 
 
797 
    .rui-maintenance-desc {
798 
        font-size: $font-size-sm;
799 
    }
800 
}
801 
 
802 
.rui-login-box .custom-select {
803 
    width: 100%;
804 
}