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