MDL-64494 theme_boost: accessible theme colours
[moodle.git] / theme / boost / scss / moodle / core.scss
CommitLineData
536f0460
DW
1/* core.less */
2
2fd7cdbe
JO
3// When we upgrade boostrap to v4 release, we will need to change this to be used by the text-white class.
4// Because a primary colour that is both AA accessible on grey (footer) and white is not possible, we always
5// want white default colour.
6$bg-inverse-link-color: #fff !default;
7
bf45d7eb 8#region-main {
ba5c5083
DW
9 overflow-x: auto;
10 overflow-y: visible;
bf45d7eb 11 border: $card-border-width solid $card-border-color;
db919724
BB
12 @if $enable-rounded {
13 @include border-radius($card-border-radius);
14 }
bf45d7eb 15 padding: $card-spacer-x;
8e1a1c26 16 background-color: $body-bg;
ba5c5083 17}
99061152
DW
18
19.context-header-settings-menu,
20.region-main-settings-menu {
21 float: right;
b167b415
JD
22 width: auto;
23 max-width: 4em;
99061152
DW
24 height: 2em;
25 display: block;
b167b415 26 margin-top: 4px;
99061152
DW
27}
28
1b5630a0
FR
29$gototop-bottom-position: 50px !default;
30
31#goto-top-link {
32 visibility: hidden;
33 opacity: 0;
34 transition: opacity .7s ease 0s, visibility .1s ease .8s;
35 display: block;
36 position: fixed; /* IE compatibility hack */
37 @supports (position: sticky) {
38 position: sticky;
39 }
303df89d
FR
40 @supports (-ms-ime-align:auto) {
41 position: fixed; /* Edge compatibility hack */
42 }
1b5630a0 43 bottom: $gototop-bottom-position;
303df89d 44 right: 0;
1b5630a0
FR
45 a {
46 position: absolute;
47 right: 0;
48 transform: translateY(-100%);
49 }
50}
51
52body.scrolled #goto-top-link {
53 opacity: 1;
54 visibility: visible;
55 transition: visibility 0s ease 0s, opacity .7s ease .1s;
56}
57
99061152 58.context-header-settings-menu .dropdown-toggle > .icon,
11774d90 59#region-main-settings-menu .dropdown-toggle > .icon {
99061152 60 height: 24px;
9d67a408 61 font-size: 24px;
99061152
DW
62 width: auto;
63}
d8cfd611
DW
64/** Prevent user notifications overlapping with region main settings menu */
65#user-notifications {
66 display: block;
67 overflow: hidden;
68}
99061152 69
536f0460
DW
70/** Page layout CSS starts **/
71.layout-option-noheader #page-header,
72.layout-option-nonavbar #page-navbar,
73.layout-option-nofooter #page-footer,
74.layout-option-nocourseheader .course-content-header,
75.layout-option-nocoursefooter .course-content-footer {
f4143537 76 display: none;
536f0460
DW
77}
78
536f0460
DW
79/** Page layout CSS ends **/
80
536f0460
DW
81.mdl-left {
82 text-align: left;
83}
f4143537 84
536f0460
DW
85.mdl-right {
86 text-align: right;
87}
113efed5
FM
88
89/*rtl:ignore*/
90.text-ltr {
5142f564 91 direction: ltr !important; /* stylelint-disable-line declaration-no-important */
113efed5
FM
92}
93
536f0460
DW
94#add,
95#remove,
96.centerpara,
97.mdl-align {
98 text-align: center;
99}
f4143537 100
536f0460
DW
101a.dimmed,
102a.dimmed:link,
103a.dimmed:visited,
104a.dimmed_text,
105a.dimmed_text:link,
106a.dimmed_text:visited,
107.dimmed_text,
108.dimmed_text a,
109.dimmed_text a:link,
110.dimmed_text a:visited,
111.usersuspended,
112.usersuspended a,
113.usersuspended a:link,
114.usersuspended a:visited,
115.dimmed_category,
116.dimmed_category a {
6239d808 117 color: $text-muted;
536f0460 118}
f4143537 119
536f0460
DW
120.unlist,
121.unlist li,
122.inline-list,
123.inline-list li,
124.block .list,
125.block .list li,
126.section li.activity,
127.section li.movehere,
128.tabtree li {
129 list-style: none;
130 margin: 0;
131 padding: 0;
132}
f4143537 133
536f0460
DW
134.inline,
135.inline-list li {
136 display: inline;
137}
f4143537 138
536f0460
DW
139.notifytiny {
140 font-size: $font-size-xs;
141}
f4143537 142
536f0460
DW
143.notifytiny li,
144.notifytiny td {
145 font-size: 100%;
146}
f4143537 147
536f0460
DW
148.red,
149.notifyproblem {
43817397 150 color: map-get($theme-colors, 'warning');
536f0460 151}
f4143537 152
536f0460
DW
153.green,
154.notifysuccess {
43817397 155 color: map-get($theme-colors, 'success');
536f0460 156}
f4143537 157
536f0460 158.highlight {
43817397 159 color: map-get($theme-colors, 'info');
536f0460 160}
f4143537 161
d91cbe1e
CB
162.fitem.advanced .text-info {
163 font-weight: bold;
164}
165
536f0460
DW
166.reportlink {
167 text-align: right;
168}
f4143537 169
536f0460
DW
170a.autolink.glossary:hover {
171 cursor: help;
172}
173/* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
174.collapsibleregioncaption {
175 white-space: nowrap;
2f3f8e45 176 min-height: $line-height-base * $font-size-base;
536f0460 177}
f4143537 178
536f0460
DW
179.pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
180 cursor: pointer;
181}
f4143537 182
faff02ae
BB
183.pagelayout-mydashboard #region-main {
184 border: 0;
185 padding: 0;
186 background-color: transparent;
187 margin-top: -1px;
188}
189
536f0460
DW
190.collapsibleregioncaption img {
191 vertical-align: middle;
192}
193
194.jsenabled .hiddenifjs {
195 display: none;
196}
f4143537 197
536f0460
DW
198.visibleifjs {
199 display: none;
200}
f4143537 201
536f0460
DW
202.jsenabled .visibleifjs {
203 display: inline;
204}
f4143537 205
536f0460
DW
206.jsenabled .collapsibleregion {
207 overflow: hidden;
2f3f8e45 208 box-sizing: content-box;
536f0460 209}
f4143537 210
536f0460
DW
211.jsenabled .collapsed .collapsibleregioninner {
212 visibility: hidden;
213}
f4143537 214
536f0460
DW
215.collapsible-actions {
216 display: none;
217 text-align: right;
218}
f4143537 219
536f0460
DW
220.jsenabled .collapsible-actions {
221 display: block;
222}
f4143537 223
536f0460
DW
224.collapsible-actions .collapseexpand {
225 padding-left: 20px;
226 background: url([[pix:t/collapsed]]) 2px center no-repeat;
227}
ed7844b5
FM
228/*rtl:raw:
229.collapsible-actions .collapseexpand {
536f0460
DW
230 background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
231}
ed7844b5 232*/
536f0460
DW
233.collapsible-actions .collapse-all {
234 background-image: url([[pix:t/expanded]]);
235}
f4143537 236
536f0460 237.yui-overlay .yui-widget-bd {
f4143537
DP
238 background-color: #ffee69;
239 border: 1px solid #a6982b;
240 border-top-color: #d4c237;
fde35b8f 241 color: #000;
536f0460
DW
242 left: 0;
243 padding: 2px 5px;
244 position: relative;
245 top: 0;
246 z-index: 1;
247}
f4143537 248
536f0460
DW
249.clearer {
250 background: transparent;
251 border-width: 0;
252 clear: both;
253 display: block;
254 height: 1px;
255 margin: 0;
256 padding: 0;
257}
f4143537 258
536f0460
DW
259.bold,
260.warning,
261.errorbox .title,
262.pagingbar .title,
263.pagingbar .thispage {
264 font-weight: bold;
265}
f4143537 266
91bda4cd
DW
267img.userpicture {
268 margin-right: 0.5rem;
269}
f4143537 270
536f0460
DW
271img.resize {
272 height: 1em;
273 width: 1em;
274}
f4143537 275
91bda4cd 276.action-menu .dropdown-toggle {
91bda4cd
DW
277 text-decoration: none;
278}
f4143537 279
3f0544b8
DW
280.action-menu {
281 white-space: nowrap;
282}
f4143537 283
3ec69c2e 284.block img.resize {
536f0460
DW
285 height: 0.9em;
286 width: 0.8em;
287}
288/* Icon styles */
072364df 289img.activityicon {
536f0460
DW
290 height: 24px;
291 width: 24px;
292 vertical-align: middle;
293}
f4143537 294
536f0460
DW
295.headermain {
296 font-weight: bold;
297}
f4143537 298
536f0460
DW
299#maincontent {
300 display: block;
301 height: 1px;
302 overflow: hidden;
303}
f4143537 304
536f0460
DW
305img.uihint {
306 cursor: help;
307}
f4143537 308
536f0460
DW
309#addmembersform table {
310 margin-left: auto;
311 margin-right: auto;
312}
f4143537 313
536f0460
DW
314table.flexible .emptyrow {
315 display: none;
316}
f4143537 317
536f0460
DW
318form.popupform,
319form.popupform div {
320 display: inline;
321}
f4143537 322
536f0460
DW
323.arrow_button input {
324 overflow: hidden;
325}
536f0460
DW
326.no-overflow {
327 overflow: auto;
536f0460 328}
f4143537 329
a3124b15 330// Minimum height required for a menu in a table inside a scrollable div.
a3a157ae 331// Position required for table sizing inside a flex container.
536f0460 332.no-overflow > .generaltable {
a3a157ae 333 position: relative;
536f0460 334 margin-bottom: 0;
a3124b15 335 min-height: 10em;
536f0460
DW
336}
337// Accessibility features
338
339// Accessibility: text 'seen' by screen readers but not visual users.
340.accesshide {
b188407b 341 @include sr-only();
536f0460 342}
f4143537 343
536f0460 344span.hide,
3d979f96
FM
345div.hide,
346.hidden {
536f0460
DW
347 display: none;
348}
349// Accessibility: Skip block link, for keyboard-only users.
350a.skip-block,
351a.skip {
352 position: absolute;
353 top: -1000em;
354 font-size: 0.85em;
355 text-decoration: none;
356}
f4143537 357
536f0460
DW
358a.skip-block:focus,
359a.skip-block:active,
360a.skip:focus,
361a.skip:active {
362 position: static;
363 display: block;
364}
f4143537 365
536f0460
DW
366.skip-block-to {
367 display: block;
368 height: 1px;
369 overflow: hidden;
370}
371// Blogs
372.addbloglink {
373 text-align: center;
374}
f4143537 375
536f0460
DW
376.blog_entry .audience {
377 text-align: right;
378 padding-right: 4px;
379}
f4143537 380
536f0460
DW
381.blog_entry .tags {
382 margin-top: 15px;
383}
f4143537 384
536f0460
DW
385.blog_entry .content {
386 margin-left: 43px;
387}
388// Group
f4143537 389
536f0460
DW
390#doc-contents h1 {
391 margin: 1em 0 0 0;
392}
f4143537 393
536f0460
DW
394#doc-contents ul {
395 margin: 0;
396 padding: 0;
397 width: 90%;
398}
f4143537 399
536f0460
DW
400#doc-contents ul li {
401 list-style-type: none;
402}
f4143537 403
536f0460
DW
404.groupmanagementtable td {
405 vertical-align: top;
406}
f4143537 407
536f0460
DW
408.groupmanagementtable #existingcell,
409.groupmanagementtable #potentialcell {
410 width: 42%;
411}
f4143537 412
536f0460
DW
413.groupmanagementtable #buttonscell {
414 width: 16%;
415}
f4143537 416
536f0460
DW
417.groupmanagementtable #buttonscell p.arrow_button input {
418 width: auto;
419 min-width: 80%;
420 margin: 0 auto;
1714b6e7 421 display: block;
536f0460 422}
f4143537 423
536f0460
DW
424.groupmanagementtable #removeselect_wrapper,
425.groupmanagementtable #addselect_wrapper {
426 width: 100%;
427}
f4143537 428
536f0460
DW
429.groupmanagementtable #removeselect_wrapper label,
430.groupmanagementtable #addselect_wrapper label {
431 font-weight: normal;
432}
f4143537 433
536f0460
DW
434#group-usersummary {
435 width: 14em;
436}
f4143537 437
536f0460
DW
438.groupselector {
439 margin-top: 3px;
440 margin-bottom: 3px;
441 display: inline-block;
442}
f4143537 443
536f0460
DW
444.groupselector label {
445 display: inline-block;
446}
536f0460
DW
447
448// Login
386f269f
FM
449.login-page {
450 [name="username"] {
451 margin-bottom: -1px;
452 border-bottom-right-radius: 0;
453 border-bottom-left-radius: 0;
454 }
f4143537 455
386f269f
FM
456 [type="password"] {
457 margin-bottom: 10px;
458 border-top-left-radius: 0;
459 border-top-right-radius: 0;
460 }
536f0460
DW
461}
462
536f0460
DW
463// Notes
464.notepost {
465 margin-bottom: 1em;
466}
f4143537 467
536f0460
DW
468.notepost .userpicture {
469 float: left;
470 margin-right: 5px;
471}
f4143537 472
536f0460
DW
473.notepost .content,
474.notepost .footer {
475 clear: both;
476}
f4143537 477
536f0460
DW
478.notesgroup {
479 margin-left: 20px;
480}
481
482// My Moodle
137c289a
FM
483.path-my .coursebox {
484 margin: $spacer-y 0;
485 padding: 0;
f4143537 486
137c289a
FM
487 .overview {
488 margin: 15px 30px 10px 30px;
489 }
536f0460 490}
f4143537 491
536f0460
DW
492.path-my .coursebox .info {
493 float: none;
494 margin: 0;
495}
496
497// Modules
498.mod_introbox {
499 padding: 10px;
500}
f4143537 501
536f0460
DW
502table.mod_index {
503 width: 100%;
504}
505
506// Comments
507.comment-ctrl {
508 font-size: 12px;
509 display: none;
510 margin: 0;
511 padding: 0;
512}
f4143537 513
536f0460
DW
514.comment-ctrl h5 {
515 margin: 0;
516 padding: 5px;
517}
f4143537 518
536f0460
DW
519.comment-area {
520 max-width: 400px;
521 padding: 5px;
522}
f4143537 523
536f0460
DW
524.comment-area textarea {
525 width: 100%;
526 overflow: auto;
f4143537 527
536f0460
DW
528 &.fullwidth {
529 -webkit-box-sizing: border-box;
530 -moz-box-sizing: border-box;
531 box-sizing: border-box;
532 }
533}
f4143537 534
536f0460
DW
535.comment-area .fd {
536 text-align: right;
537}
f4143537 538
536f0460
DW
539.comment-meta span {
540 color: gray;
541}
f4143537 542
536f0460
DW
543.comment-link img {
544 vertical-align: text-bottom;
545}
f4143537 546
536f0460
DW
547.comment-list {
548 font-size: 11px;
549 overflow: auto;
550 list-style: none;
551 padding: 0;
552 margin: 0;
553}
f4143537 554
536f0460
DW
555.comment-list li {
556 margin: 2px;
557 list-style: none;
558 margin-bottom: 5px;
559 clear: both;
560 padding: .3em;
561 position: relative;
562}
f4143537 563
536f0460 564.comment-list li.first {
f4143537 565 display: none;
536f0460 566}
f4143537
DP
567
568.comment-paging {
536f0460
DW
569 text-align: center;
570}
f4143537
DP
571
572.comment-paging .pageno {
536f0460
DW
573 padding: 2px;
574}
f4143537
DP
575
576.comment-paging .curpage {
577 border: 1px solid #ccc;
536f0460 578}
f4143537 579
536f0460
DW
580.comment-message .picture {
581 width: 20px;
582 float: left;
583}
f4143537 584
536f0460
DW
585.comment-message .text {
586 margin: 0;
587 padding: 0;
588}
f4143537 589
536f0460
DW
590.comment-message .text p {
591 padding: 0;
592 margin: 0 18px 0 0;
593}
f4143537 594
536f0460
DW
595.comment-delete {
596 position: absolute;
597 top: 0;
598 right: 0;
599 margin: .3em;
600}
f4143537
DP
601
602.comment-report-selectall {
603 display: none;
536f0460 604}
f4143537 605
536f0460 606.comment-link {
f4143537 607 display: none;
536f0460 608}
f4143537 609
536f0460 610.jsenabled .comment-link {
f4143537 611 display: block;
536f0460 612}
f4143537
DP
613
614.jsenabled .showcommentsnonjs {
615 display: none;
536f0460 616}
f4143537
DP
617
618.jsenabled .comment-report-selectall {
619 display: inline;
536f0460
DW
620}
621/**
622* Completion progress report
623*/
624.completion-expired {
43817397 625 color: map-get($theme-colors, 'warning');
536f0460 626}
f4143537 627
536f0460
DW
628.completion-expected {
629 font-size: $font-size-xs;
630}
f4143537 631
536f0460
DW
632.completion-sortchoice,
633.completion-identifyfield {
634 font-size: $font-size-xs;
635 vertical-align: bottom;
636}
f4143537 637
536f0460
DW
638.completion-progresscell {
639 text-align: right;
640}
f4143537 641
536f0460
DW
642.completion-expired .completion-expected {
643 font-weight: bold;
644}
645/**
646* Tags
647*/
648img.user-image {
649 height: 100px;
650 width: 100px;
651}
f4143537 652
536f0460
DW
653#tag-search-box {
654 text-align: center;
655 margin: 10px auto;
656}
657
658.path-tag .tag-index-items .tagarea {
f4143537 659 border: 1px solid #e3e3e3;
536f0460
DW
660 border-radius: 4px;
661 padding: 10px;
662 margin-top: 10px;
663}
664
665.path-tag .tag-index-items .tagarea h3 {
666 display: block;
667 padding: 3px 0 10px 0;
fde35b8f 668 margin: 0;
536f0460
DW
669 font-size: 1.1em;
670 font-weight: bold;
671 line-height: 20px;
672 color: #999;
fde35b8f 673 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
536f0460
DW
674 text-transform: uppercase;
675 word-wrap: break-word;
f4143537 676 border-bottom: solid 1px #e3e3e3;
536f0460
DW
677 margin-bottom: 10px;
678}
679
680.path-tag .tagarea .controls,
681.path-tag .tagarea .taggeditems {
682 @include clearfix();
683}
f4143537 684
536f0460
DW
685.path-tag .tagarea .controls,
686.path-tag .tag-backtoallitems {
687 text-align: center;
688}
f4143537 689
536f0460
DW
690.path-tag .tagarea .controls .gotopage.nextpage {
691 float: right;
692}
f4143537 693
536f0460
DW
694.path-tag .tagarea .controls .gotopage.prevpage {
695 float: left;
696}
f4143537 697
536f0460
DW
698.path-tag .tagarea .controls .exclusivemode {
699 display: inline-block;
700}
f4143537 701
536f0460
DW
702.path-tag .tagarea .controls.controls-bottom {
703 margin-top: 5px;
704}
f4143537 705
536f0460
DW
706.path-tag .tagarea .controls .gotopage.nextpage::after {
707 padding-right: 5px;
708 padding-left: 5px;
709 content: "»";
710}
f4143537 711
536f0460
DW
712.path-tag .tagarea .controls .gotopage.prevpage::before {
713 padding-right: 5px;
714 padding-left: 5px;
715 content: "«";
716}
717
718span.flagged-tag,
719tr.flagged-tag,
720span.flagged-tag a,
721tr.flagged-tag a {
43817397 722 color: map-get($theme-colors, 'warning');
536f0460 723}
f4143537 724
536f0460
DW
725.tag-management-table td,
726.tag-management-table th {
727 vertical-align: middle;
728 padding: 4px;
729}
f4143537 730
536f0460
DW
731.tag-management-table .inplaceeditable.inplaceeditingon input {
732 width: 150px;
733}
f4143537 734
536f0460
DW
735.path-admin-tag .addstandardtags {
736 float: right;
f4143537 737
536f0460
DW
738 img {
739 margin: 0 5px;
740 }
741}
f4143537 742
536f0460
DW
743.path-tag .tag-relatedtags {
744 padding-top: 10px;
745}
f4143537 746
536f0460
DW
747.path-tag .tag-management-box {
748 text-align: right;
749}
f4143537 750
536f0460
DW
751.path-tag .tag-index-toc {
752 padding: 10px;
753 text-align: center;
754}
f4143537 755
536f0460
DW
756.path-tag .tag-index-toc li,
757.path-tag .tag-management-box li {
758 margin-left: 5px;
759 margin-right: 5px;
760}
f4143537 761
536f0460
DW
762.path-tag .tag-management-box li a.edittag {
763 background-image: url([[pix:moodle|i/settings]]);
764}
f4143537 765
536f0460
DW
766.path-tag .tag-management-box li a.flagasinappropriate {
767 background-image: url([[pix:moodle|i/flagged]]);
768}
f4143537 769
536f0460
DW
770.path-tag .tag-management-box li a.removefrommyinterests {
771 background-image: url([[pix:moodle|t/delete]]);
772}
f4143537 773
536f0460
DW
774.path-tag .tag-management-box li a.addtomyinterests {
775 background-image: url([[pix:moodle|t/add]]);
776}
f4143537 777
536f0460
DW
778.path-tag .tag-management-box li a {
779 background-repeat: no-repeat;
780 background-position: left;
781 padding-left: 17px;
782}
f4143537 783
536f0460
DW
784.tag_feed.media-list .media .itemimage {
785 float: left;
786}
f4143537 787
536f0460
DW
788.tag_feed.media-list .media .itemimage img {
789 height: 35px;
790 width: 35px;
791}
f4143537 792
536f0460
DW
793.tag_feed.media-list .media .media-body {
794 padding-right: 10px;
795 padding-left: 10px;
796}
f4143537 797
536f0460 798.tag_feed .media .muted a {
6239d808 799 color: $text-muted;
536f0460 800}
f4143537 801
536f0460
DW
802.tag_cloud {
803 text-align: center;
804}
f4143537 805
536f0460 806.tag_cloud .inline-list li {
fde35b8f 807 padding: 0 0.2em;
536f0460 808}
f4143537 809
536f0460
DW
810.tag_cloud .tag_overflow {
811 margin-top: 1em;
812 font-style: italic;
813}
f4143537 814
536f0460
DW
815.tag_cloud .s20 {
816 font-size: 2.7em;
817}
f4143537 818
536f0460
DW
819.tag_cloud .s19 {
820 font-size: 2.6em;
821}
f4143537 822
536f0460
DW
823.tag_cloud .s18 {
824 font-size: 2.5em;
825}
f4143537 826
536f0460
DW
827.tag_cloud .s17 {
828 font-size: 2.4em;
829}
f4143537 830
536f0460
DW
831.tag_cloud .s16 {
832 font-size: 2.3em;
833}
f4143537 834
536f0460
DW
835.tag_cloud .s15 {
836 font-size: 2.2em;
837}
f4143537 838
536f0460
DW
839.tag_cloud .s14 {
840 font-size: 2.1em;
841}
f4143537 842
536f0460
DW
843.tag_cloud .s13 {
844 font-size: 2em;
845}
f4143537 846
536f0460
DW
847.tag_cloud .s12 {
848 font-size: 1.9em;
849}
f4143537 850
536f0460
DW
851.tag_cloud .s11 {
852 font-size: 1.8em;
853}
f4143537 854
536f0460
DW
855.tag_cloud .s10 {
856 font-size: 1.7em;
857}
f4143537 858
536f0460
DW
859.tag_cloud .s9 {
860 font-size: 1.6em;
861}
f4143537 862
536f0460
DW
863.tag_cloud .s8 {
864 font-size: 1.5em;
865}
f4143537 866
536f0460
DW
867.tag_cloud .s7 {
868 font-size: 1.4em;
869}
f4143537 870
536f0460
DW
871.tag_cloud .s6 {
872 font-size: 1.3em;
873}
f4143537 874
536f0460
DW
875.tag_cloud .s5 {
876 font-size: 1.2em;
877}
f4143537 878
536f0460
DW
879.tag_cloud .s4 {
880 font-size: 1.1em;
881}
f4143537 882
536f0460
DW
883.tag_cloud .s3 {
884 font-size: 1em;
885}
f4143537 886
536f0460
DW
887.tag_cloud .s2 {
888 font-size: 0.9em;
889}
f4143537 890
536f0460
DW
891.tag_cloud .s1 {
892 font-size: 0.8em;
893}
f4143537 894
536f0460
DW
895.tag_cloud .s0 {
896 font-size: 0.7em;
897}
f4143537 898
536f0460
DW
899.tag_list ul {
900 display: inline;
901}
f4143537 902
536f0460 903.tag_list.hideoverlimit .overlimit {
f4143537 904 display: none;
536f0460 905}
f4143537 906
536f0460 907.tag_list .tagmorelink {
f4143537 908 display: none;
536f0460 909}
f4143537 910
536f0460 911.tag_list.hideoverlimit .tagmorelink {
f4143537 912 display: inline;
536f0460 913}
f4143537 914
536f0460 915.tag_list.hideoverlimit .taglesslink {
f4143537 916 display: none;
536f0460
DW
917}
918
919/**
920* Web Service
921*/
922#webservice-doc-generator td {
923 text-align: left;
924 border: 0 solid black;
925}
45d5594e 926
536f0460
DW
927/**
928* Enrol
929*/
930.userenrolment {
931 width: 100%;
932 border-collapse: collapse;
933}
f4143537 934
536f0460 935.userenrolment tr {
f4143537 936 vertical-align: top;
536f0460 937}
f4143537 938
536f0460
DW
939.userenrolment td {
940 padding: 0;
941 height: 41px;
942}
f4143537 943
536f0460
DW
944.userenrolment .subfield {
945 margin-right: 5px;
946}
f4143537 947
536f0460
DW
948.userenrolment .col_userdetails .subfield {
949 margin-left: 40px;
950}
f4143537 951
536f0460
DW
952.userenrolment .col_userdetails .subfield_picture {
953 float: left;
954 margin-left: 0;
955}
f4143537 956
536f0460
DW
957.userenrolment .col_lastseen {
958 width: 150px;
959}
f4143537 960
536f0460
DW
961.userenrolment .col_role {
962 width: 262px;
963}
f4143537 964
536f0460
DW
965.userenrolment .col_role .roles,
966.userenrolment .col_group .groups {
967 margin-right: 30px;
968}
f4143537 969
f66ab070
LB
970.userenrolment .col_role .role {
971 float: left;
972 padding: 0 3px 3px;
973 margin: 0 3px 3px;
974 white-space: nowrap;
975}
976
536f0460
DW
977.userenrolment .col_group .group {
978 float: left;
979 padding: 3px;
980 margin: 3px;
981 white-space: nowrap;
982}
f4143537 983
536f0460
DW
984.userenrolment .col_role .role a,
985.userenrolment .col_group .group a {
986 margin-left: 3px;
987 cursor: pointer;
988}
f4143537 989
536f0460
DW
990.userenrolment .col_role .addrole,
991.userenrolment .col_group .addgroup {
992 float: right;
993 padding: 3px;
994 margin: 3px;
f4143537 995
536f0460 996 > a:hover {
f4143537 997 border-bottom: 1px solid #666;
536f0460
DW
998 }
999}
f4143537 1000
536f0460
DW
1001.userenrolment .col_role .addrole img,
1002.userenrolment .col_group .addgroup img {
1003 vertical-align: baseline;
1004}
1005
1006.userenrolment .hasAllRoles .col_role .addrole {
1007 display: none;
1008}
1009
1010.userenrolment .col_enrol .enrolment {
1011 float: left;
f66ab070
LB
1012 padding: 0 3px 3px;
1013 margin: 0 3px 3px;
536f0460 1014}
f4143537 1015
536f0460
DW
1016.userenrolment .col_enrol .enrolment a {
1017 float: right;
1018 margin-left: 3px;
1019}
f4143537 1020
536f0460 1021.corelightbox {
f4143537 1022 background-color: #ccc;
536f0460
DW
1023 position: absolute;
1024 top: 0;
1025 left: 0;
1026 width: 100%;
1027 height: 100%;
1028 text-align: center;
1029}
f4143537 1030
536f0460
DW
1031.corelightbox img {
1032 position: fixed;
1033 top: 50%;
1034 left: 50%;
1035}
1036
1037.mod-indent-outer {
1038 display: table;
1039}
f4143537 1040
536f0460
DW
1041.mod-indent {
1042 display: table-cell;
1043}
f4143537 1044
536f0460 1045.label .mod-indent {
f4143537
DP
1046 float: left;
1047 padding-top: 20px;
536f0460 1048}
536f0460
DW
1049$mod-indent-size: 30px;
1050/* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
f4143537 1051
536f0460 1052@for $i from 1 through 16 {
9cb41231 1053 $width: ($i * $mod-indent-size);
536f0460 1054
9cb41231
DP
1055 .mod-indent-#{$i} {
1056 width: $width;
1057 }
536f0460 1058}
f4143537 1059
536f0460 1060.mod-indent-huge {
9cb41231 1061 width: (16 * $mod-indent-size);
536f0460
DW
1062}
1063
1064/* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1065.resourcecontent .mediaplugin_mp3 object {
1066 height: 25px;
f4143537 1067 width: 600px;
536f0460 1068}
f4143537 1069
536f0460 1070.resourcecontent audio.mediaplugin_html5audio {
f4143537 1071 width: 600px;
536f0460
DW
1072}
1073/** Large resource images should avoid hidden overflow **/
1074.resourceimage {
1075 max-width: 100%;
1076}
1077/* Audio player size in 'inline' mode (can only change width, as above) */
1078.mediaplugin_mp3 object {
1079 height: 15px;
f4143537 1080 width: 300px;
536f0460 1081}
f4143537 1082
536f0460 1083audio.mediaplugin_html5audio {
f4143537 1084 width: 300px;
536f0460
DW
1085}
1086/* TinyMCE moodle media preview frame should not have padding */
1087.core_media_preview.pagelayout-embedded #content {
1088 padding: 0;
1089}
f4143537 1090
536f0460
DW
1091.core_media_preview.pagelayout-embedded #maincontent {
1092 height: 0;
1093}
f4143537 1094
536f0460
DW
1095body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1096 padding: 0;
1097 margin: 0;
1098 min-width: 0;
1099 background: none;
1100}
f4143537 1101
536f0460
DW
1102.path-rating .ratingtable {
1103 width: 100%;
1104 margin-bottom: 1em;
1105}
f4143537 1106
536f0460
DW
1107.path-rating .ratingtable th.rating {
1108 width: 100%;
1109}
f4143537 1110
536f0460
DW
1111.path-rating .ratingtable td.rating,
1112.path-rating .ratingtable td.time {
1113 white-space: nowrap;
1114 text-align: center;
1115}
f4143537 1116
536f0460
DW
1117/* Moodle Dialogue Settings (moodle-core-dialogue) */
1118.moodle-dialogue-base .moodle-dialogue-lightbox {
e72cb21d 1119 background-color: $gray;
536f0460 1120}
f4143537 1121
bfe00e67
BB
1122// Prevent adding backdrops to popups in popups.
1123.pagelayout-popup {
1124 .moodle-dialogue-base {
1125 .moodle-dialogue-lightbox {
1126 background-color: transparent;
1127 }
1128 .moodle-dialogue {
1129 box-shadow: $popover-box-shadow;
1130 }
1131 }
1132}
1133
536f0460
DW
1134.moodle-dialogue-base .hidden,
1135.moodle-dialogue-base .moodle-dialogue-hidden {
1136 display: none;
1137}
f4143537 1138
536f0460
DW
1139.no-scrolling {
1140 overflow: hidden;
1141}
f4143537 1142
536f0460 1143.moodle-dialogue-base .moodle-dialogue-fullscreen {
fde35b8f
DP
1144 left: 0;
1145 top: 0;
1146 right: 0;
536f0460
DW
1147 bottom: -50px;
1148 position: fixed;
1149}
f4143537 1150
536f0460
DW
1151.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1152 overflow: auto;
1153}
f4143537 1154
536f0460
DW
1155.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1156 width: 28px;
1157 height: 16px;
1158 background-size: 100%;
1159}
f4143537 1160
bffc0ef1
FM
1161.moodle-dialogue-base .moodle-dialogue-wrap {
1162 background-color: #fff;
1163 border: 1px solid #ccc;
1164}
f4143537 1165
181179de
DW
1166// Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1167// it for a reason (conflicts with jquery .show()).
1168.modal.show {
1169 display: block;
1170}
1171
25f90896 1172.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
807e5244
BB
1173 display: flex;
1174 padding: 1rem 1rem;
1175 border-bottom: 1px solid #dee2e6;
536f0460 1176}
f4143537 1177
536f0460 1178.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
25f90896 1179 // Undo some YUI damage.
88af0208 1180 min-height: 3rem;
25f90896 1181 color: initial;
25f90896
DW
1182 background: initial;
1183 font-size: 1.5rem;
1184 line-height: 1.5;
536f0460 1185}
f4143537 1186
536f0460 1187.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
3ec69c2e 1188 font-size: 1.5rem;
536f0460 1189}
f4143537 1190
536f0460 1191.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
85dd7c6f
NK
1192 /*rtl:raw:
1193 left: 0;
1194 right: auto;
1195 */
807e5244
BB
1196 padding: 0;
1197 position: relative;
1198 margin-left: auto;
536f0460 1199}
f4143537 1200
536f0460 1201.moodle-dialogue-base .closebutton {
807e5244
BB
1202 padding: $modal-header-padding;
1203 margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1204 position: relative;
1205 background-color: transparent;
1206 border: 0;
1207 background-image: none;
25f90896 1208 box-shadow: none;
807e5244
BB
1209 opacity: 0.7;
1210 &:hover,
1211 &:active {
1212 opacity: 1;
1213 }
5142f564
FM
1214 &::after {
1215 content: "×";
1216 }
536f0460 1217}
f4143537 1218
25f90896 1219.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
3ec69c2e 1220 padding: 0.5rem;
807e5244
BB
1221 body {
1222 background-color: $body-bg;
1223 }
536f0460
DW
1224}
1225
1226.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1227 overflow: auto;
1228 position: absolute;
fde35b8f 1229 top: 0;
536f0460 1230 bottom: 50px;
fde35b8f
DP
1231 left: 0;
1232 right: 0;
1233 margin: 0;
1234 border: 0;
536f0460 1235}
f4143537 1236
536f0460
DW
1237.moodle-dialogue-exception .moodle-exception-param label {
1238 font-weight: bold;
1239}
f4143537 1240
536f0460 1241.moodle-dialogue-exception .param-stacktrace label {
f4143537 1242 background-color: #eee;
536f0460
DW
1243 border: 1px solid #ccc;
1244 border-bottom-width: 0;
1245}
f4143537 1246
536f0460
DW
1247.moodle-dialogue-exception .param-stacktrace pre {
1248 border: 1px solid #ccc;
1249 background-color: #fff;
1250}
f4143537 1251
536f0460
DW
1252.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1253 color: navy;
1254 font-size: $font-size-sm;
1255}
f4143537 1256
536f0460 1257.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
43817397 1258 color: map-get($theme-colors, 'warning');
536f0460
DW
1259 font-size: $font-size-sm;
1260}
f4143537 1261
536f0460
DW
1262.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1263 color: #333;
1264 font-size: 90%;
1265 border-bottom: 1px solid #eee;
1266}
f4143537 1267
bc8594bd
FM
1268.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1269 display: none;
1270}
f4143537 1271
25f90896
DW
1272.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1273 // Undo some YUI damage.
1274 background: initial;
536f0460 1275}
f4143537 1276
536f0460 1277.moodle-dialogue-confirm .confirmation-message {
3ec69c2e 1278 margin: 0.5rem 0;
f2405a5f 1279}
f4143537 1280
536f0460 1281.moodle-dialogue-confirm .confirmation-dialogue input {
f4143537 1282 min-width: 80px;
536f0460 1283}
f4143537 1284
536f0460
DW
1285.moodle-dialogue-exception .moodle-exception-message {
1286 margin: 1em;
1287}
f4143537 1288
536f0460
DW
1289.moodle-dialogue-exception .moodle-exception-param {
1290 margin-bottom: 0.5em;
1291}
f4143537 1292
536f0460
DW
1293.moodle-dialogue-exception .moodle-exception-param label {
1294 width: 150px;
1295}
f4143537 1296
536f0460
DW
1297.moodle-dialogue-exception .param-stacktrace label {
1298 display: block;
1299 margin: 0;
1300 padding: 4px 1em;
1301}
f4143537 1302
536f0460
DW
1303.moodle-dialogue-exception .param-stacktrace pre {
1304 display: block;
1305 height: 200px;
1306 overflow: auto;
1307}
f4143537 1308
536f0460
DW
1309.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1310 display: inline-block;
1311 margin: 4px 0;
1312}
f4143537 1313
536f0460
DW
1314.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1315 display: inline-block;
1316 width: 50px;
1317 margin: 4px 1em;
1318}
f4143537 1319
536f0460
DW
1320.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1321 padding-left: 25px;
1322 margin-bottom: 4px;
1323 padding-bottom: 4px;
1324}
f4143537 1325
536f0460
DW
1326.moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1327 opacity: 0.75;
1328 width: 100%;
1329 height: 100%;
1330 top: 0;
1331 left: 0;
1332 background-color: white;
1333 text-align: center;
1334 padding: 10% 0;
1335}
1336/* Apply a default max-height on tooltip text */
1337.moodle-dialogue .tooltiptext {
1338 max-height: 300px;
1339}
1340
1341.moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1342 z-index: 3001;
1343
1344 .moodle-dialogue-bd {
1345 overflow: auto;
1346 }
1347}
1348
1349/**
1350 * Chooser Dialogues (moodle-core-chooserdialogue)
1351 *
1352 * This CSS belong to the chooser dialogue which should work both with, and
1353 * without javascript enabled
1354 */
1355/* Hide the dialog and it's title */
1356.chooserdialoguebody,
1357.choosertitle {
1358 display: none;
1359}
f4143537 1360
536f0460
DW
1361.moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1362 margin: 0;
1363}
f4143537 1364
536f0460
DW
1365.chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1366 padding: 0;
f4143537
DP
1367 background: #f2f2f2;
1368
536f0460
DW
1369 @include border-bottom-radius(10px);
1370}
1371/* Center the submit buttons within the area */
1372.choosercontainer #chooseform .submitbuttons {
1373 padding: 0.7em 0;
f2405a5f 1374 text-align: right;
536f0460
DW
1375}
1376/* Fixed for safari browser on iPhone4S with ios7@mixin */
f4143537 1377
536f0460 1378@media (max-height: 639px) {
a266ae30 1379 .ios .choosercontainer #chooseform .submitbuttons {
536f0460
DW
1380 padding: 45px 0;
1381 }
1382}
f4143537 1383
536f0460
DW
1384.choosercontainer #chooseform .submitbuttons input {
1385 min-width: 100px;
1386 margin: 0 0.5em;
1387}
1388/* Various settings for the options area */
1389.choosercontainer #chooseform .options {
1390 position: relative;
fde35b8f 1391 border-bottom: 1px solid #bbb;
536f0460
DW
1392}
1393/* Only set these options if we're showing the js container */
1394.jschooser .choosercontainer #chooseform .alloptions {
1395 overflow-x: hidden;
1396 overflow-y: auto;
e119bf6f 1397 max-width: 240px;
f4143537 1398
536f0460
DW
1399 .option {
1400 input[type=radio] {
1401 display: inline-block;
1402 }
f4143537 1403
536f0460
DW
1404 .typename {
1405 display: inline-block;
9f76a701 1406 width: 55%;
536f0460
DW
1407 }
1408 }
1409}
1410/* Settings for option rows and option subtypes */
1411.choosercontainer #chooseform .moduletypetitle,
1412.choosercontainer #chooseform .option,
1413.choosercontainer #chooseform .nonoption {
1414 margin-bottom: 0;
1415 padding: 0 1.6em 0 1.6em;
1416}
f4143537 1417
536f0460
DW
1418.choosercontainer #chooseform .moduletypetitle {
1419 text-transform: uppercase;
1420 padding-top: 1.2em;
1421 padding-bottom: 0.4em;
604df144
SR
1422 margin-bottom: 0.5rem;
1423 font-size: 100%;
536f0460 1424}
f4143537 1425
536f0460 1426.choosercontainer #chooseform .option .typename,
072364df 1427.choosercontainer #chooseform .nonoption .typename {
536f0460
DW
1428 padding: 0 0 0 0.5em;
1429}
f4143537 1430
e119bf6f
FM
1431.choosercontainer #chooseform .modicon + .typename {
1432 padding-left: 0;
1433}
536f0460 1434
536f0460 1435.choosercontainer #chooseform .option input[type=radio],
072364df 1436.choosercontainer #chooseform .option span.typename {
536f0460
DW
1437 vertical-align: middle;
1438}
f4143537 1439
536f0460
DW
1440.choosercontainer #chooseform .option label {
1441 display: block;
e119bf6f
FM
1442 margin: 0;
1443 padding: ($spacer / 2) 0;
fde35b8f 1444 border-bottom: 1px solid #fff;
536f0460 1445}
f4143537 1446
e119bf6f
FM
1447.choosercontainer #chooseform .option .icon {
1448 margin: 0;
1449 padding: 0 $spacer;
1450}
f4143537 1451
536f0460
DW
1452.choosercontainer #chooseform .nonoption {
1453 padding-left: 2.7em;
1454 padding-top: 0.3em;
1455 padding-bottom: 0.1em;
1456}
f4143537 1457
536f0460
DW
1458.choosercontainer #chooseform .subtype {
1459 margin-bottom: 0;
1460 padding: 0 1.6em 0 3.2em;
1461}
f4143537 1462
536f0460
DW
1463.choosercontainer #chooseform .subtype .typename {
1464 margin: 0 0 0 0.2em;
1465}
1466/* The instruction/help area */
1467.jschooser .choosercontainer #chooseform .instruction,
1468.jschooser .choosercontainer #chooseform .typesummary {
9cb41231 1469 display: none;
536f0460
DW
1470 position: absolute;
1471 top: 0;
1472 right: 0;
1473 bottom: 0;
e119bf6f 1474 left: 240px;
536f0460
DW
1475 margin: 0;
1476 padding: 1.6em;
1477 background-color: #fff;
1478 overflow-x: hidden;
1479 overflow-y: auto;
1480 line-height: 2em;
1481}
1482/* Selected option settings */
1483.jschooser .choosercontainer #chooseform .instruction,
1484.choosercontainer #chooseform .selected .typesummary {
1485 display: block;
1486}
f4143537 1487
536f0460
DW
1488.choosercontainer #chooseform .selected {
1489 background-color: #fff;
e119bf6f
FM
1490 margin-top: -1px;
1491 padding-top: 1px;
1492}
f4143537 1493
ba252fca
FM
1494
1495@include media-breakpoint-down(xs) {
1496 .jsenabled .choosercontainer #chooseform .alloptions {
1497 max-width: 100%;
1498 }
f4143537 1499
ba252fca
FM
1500 .jsenabled .choosercontainer #chooseform .instruction,
1501 .jsenabled .choosercontainer #chooseform .typesummary {
f4143537 1502 position: static;
ba252fca
FM
1503 }
1504}
1505
05b27f21
MM
1506/**
1507 * Module chooser dialogue (moodle-core-chooserdialogue)
1508 *
1509 * This CSS belong to the chooser dialogue which should work both with, and
1510 * without javascript enabled
1511 */
1512.modchooser .modal-body {
1513 padding: 0;
c3686571 1514 height: 640px;
05b27f21
MM
1515 overflow-y: auto;
1516
1517 .loading-icon {
1518 opacity: 1;
1519 .icon {
1520 display: block;
1521 font-size: 3em;
1522 height: 1em;
1523 width: 1em;
1524 margin: 5em auto;
1525 }
1526 }
1527}
1528
1529.modchoosercontainer.noscroll {
1530 overflow-y: hidden;
1531}
1532
f152b71d
MG
1533.modchooser .searchcontainer .searchbar {
1534
1535 .searchinput {
1536 font-size: inherit;
1537 border: 1px solid #dee2e6;
1538 border-top-left-radius: .3rem;
1539 border-bottom-left-radius: .3rem;
1540 border-right: none;
1541 }
1542
1543 .searchbar-append {
1544 align-items: center;
1545 border: 1px solid #dee2e6;
1546 border-left: none;
1547 border-top-right-radius: .3rem;
1548 border-bottom-right-radius: .3rem;
1549
1550 i {
1551 color: #868e96;
1552 margin: 0;
1553 vertical-align: middle;
1554 }
1555
1556 .clear {
f152b71d
MG
1557 i {
1558 height: 23px;
1559 width: 23px;
1560 font-size: 23px;
1561 pointer-events: none;
1562 }
1563 }
1564 .search-icon {
f152b71d
MG
1565 i {
1566 height: 20px;
1567 width: 20px;
1568 font-size: 20px;
1569 }
1570 }
1571 }
1572}
1573
1574.modchoosercontainer .optionscontainer,
1575.modchoosercontainer .searchresultitemscontainer {
05b27f21
MM
1576 overflow-x: hidden;
1577 .option {
1578 // Six items per line.
c3686571 1579 flex-basis: 16.66%;
05b27f21
MM
1580 .optionactions {
1581 .optionaction {
1582 cursor: pointer;
05b27f21
MM
1583 color: $gray-600;
1584 i {
1585 margin: 0;
1586 }
1587 }
1588 }
1589 .optioninfo {
1590 a {
1591 color: $gray-700;
1592 &:hover {
1593 text-decoration: none;
1594 }
05b27f21
MM
1595 .optionicon {
1596 .icon {
1597 margin: 0;
1598 padding: 0;
1599 width: 32px;
1600 height: 32px;
1601 font-size: 32px;
1602 }
1603 }
1604 }
1605 }
1606 }
1607}
1608
1609.modchooser .modal-body .optionsummary {
1610 background-color: $white;
1611 overflow-x: hidden;
1612 overflow-y: auto;
c3686571 1613 height: 640px;
05b27f21
MM
1614
1615 .content {
1616 overflow-y: auto;
1617 .heading {
1618 .icon {
1619 height: 32px;
1620 width: 32px;
1621 font-size: 32px;
1622 padding: 0;
1623 }
1624 }
1625 }
1626
1627 .actions {
1628 border-top: 1px solid $gray-300;
1629 background: $white;
1630 }
1631}
1632
1633@include media-breakpoint-down(lg) {
f152b71d
MG
1634 .modchoosercontainer .optionscontainer .option,
1635 .modchoosercontainer .searchresultitemscontainer .option {
05b27f21
MM
1636 // Five items per line.
1637 flex-basis: 20%;
1638 }
1639}
1640
1641@include media-breakpoint-down(xs) {
1642 .path-course-view .modal-dialog.modal-lg,
1643 .path-course-view .modal-content,
1644 .modchooser .modal-body,
1645 .modchooser .modal-body .carousel,
1646 .modchooser .modal-body .carousel-inner,
1647 .modchooser .modal-body .carousel-item,
1648 .modchooser .modal-body .optionsummary,
1649 .modchoosercontainer,
f152b71d
MG
1650 .optionscontainer,
1651 .searchresultitemscontainer {
05b27f21
MM
1652 height: 100%;
1653 }
1654 .path-course-view .modal-dialog.modal-lg {
1655 margin: 0;
1656 }
f152b71d
MG
1657 .modchoosercontainer .optionscontainer .option,
1658 .modchoosercontainer .searchresultitemscontainer .option {
05b27f21
MM
1659 // Four items per line.
1660 flex-basis: 25%;
1661 }
1662}
1663
536f0460
DW
1664/* Form element: listing */
1665.formlistingradio {
1666 padding-bottom: 25px;
1667 padding-right: 10px;
1668}
f4143537 1669
536f0460
DW
1670.formlistinginputradio {
1671 float: left;
1672}
f4143537 1673
536f0460
DW
1674.formlistingmain {
1675 min-height: 225px;
1676}
f4143537 1677
536f0460
DW
1678.formlisting {
1679 position: relative;
1680 margin: 15px 0;
1681 padding: 1px 19px 14px;
1682 background-color: white;
f4143537
DP
1683 border: 1px solid #ddd;
1684
536f0460
DW
1685 @include border-radius(4px);
1686}
f4143537 1687
536f0460
DW
1688.formlistingmore {
1689 position: absolute;
1690 cursor: pointer;
1691 bottom: -1px;
1692 right: -1px;
1693 padding: 3px 7px;
1694 font-size: 12px;
1695 font-weight: bold;
f4143537 1696 background-color: whitesmoke;
536f0460 1697 border: 1px solid #ddd;
f4143537
DP
1698 color: #9da0a4;
1699
536f0460
DW
1700 @include border-radius(4px 0 4px 0);
1701}
f4143537 1702
536f0460
DW
1703.formlistingall {
1704 margin: 15px 0;
1705 padding: 0;
f4143537 1706
536f0460
DW
1707 @include border-radius(4px);
1708}
f4143537 1709
536f0460
DW
1710.formlistingrow {
1711 cursor: pointer;
1712 border-bottom: 1px solid;
f4143537
DP
1713 border-color: #e1e1e8;
1714 border-left: 1px solid #e1e1e8;
1715 border-right: 1px solid #e1e1e8;
1716 background-color: #f7f7f9;
1717
536f0460
DW
1718 @include border-radius(0 0 4px 4px);
1719 padding: 6px;
1720 top: 50%;
1721 left: 50%;
1722 min-height: 34px;
1723 float: left;
1724 width: 150px;
1725}
f4143537 1726
536f0460
DW
1727body.jsenabled .formlistingradio {
1728 display: none;
1729}
f4143537 1730
536f0460
DW
1731body.jsenabled .formlisting {
1732 display: block;
1733}
1734
536f0460 1735a.criteria-action {
fde35b8f 1736 padding: 0 3px;
536f0460
DW
1737 float: right;
1738}
f4143537 1739
536f0460
DW
1740div.criteria-description {
1741 padding: 10px 15px;
fde35b8f 1742 margin: 5px 0;
536f0460 1743 background: none repeat scroll 0 0 #f9f9f9;
f4143537 1744 border: 1px solid #eee;
536f0460 1745}
f4143537 1746
536f0460
DW
1747ul.badges {
1748 margin: 0;
1749 list-style: none;
1750}
f4143537 1751
536f0460
DW
1752.badges li {
1753 position: relative;
1754 display: inline-block;
1755 padding-top: 1em;
1756 text-align: center;
1757 vertical-align: top;
1758 width: 150px;
1759}
f4143537 1760
536f0460
DW
1761.badges li .badge-name {
1762 display: block;
1763 padding: 5px;
1764}
f4143537 1765
536f0460
DW
1766.badges li > img {
1767 position: absolute;
1768}
f4143537 1769
536f0460
DW
1770.badges li .badge-image {
1771 width: 100px;
1772 height: 100px;
1773 left: 10px;
fde35b8f 1774 top: 0;
536f0460
DW
1775 z-index: 1;
1776}
f4143537 1777
536f0460
DW
1778.badges li .badge-actions {
1779 position: relative;
1780}
f4143537 1781
536f0460
DW
1782.badges li .expireimage {
1783 width: 100px;
1784 height: 100px;
1785 left: 25px;
fde35b8f 1786 top: 0;
536f0460
DW
1787 position: absolute;
1788 z-index: 10;
1789 opacity: 0.85;
1790}
1791
1792#badge-image {
1793 background-color: transparent;
1794 padding: 0;
1795 position: relative;
1796 min-width: 100px;
1797 width: 20%;
1798 display: inline-block;
1799 vertical-align: top;
1800 margin-top: 17px;
ff54d94b 1801 margin-bottom: 20px;
536f0460
DW
1802
1803 .expireimage {
1804 width: 100px;
1805 height: 100px;
fde35b8f
DP
1806 left: 0;
1807 top: 0;
536f0460
DW
1808 opacity: 0.85;
1809 position: absolute;
f4143537 1810 z-index: 10;
536f0460
DW
1811 }
1812
1813 .singlebutton {
1814 padding-top: 5px;
ff54d94b 1815 display: block;
536f0460 1816
ff54d94b
SL
1817 button {
1818 margin-left: 4px;
536f0460
DW
1819 }
1820 }
1821}
f4143537 1822
536f0460
DW
1823#badge-details {
1824 display: inline-block;
1825 width: 79%;
1826}
1827
1828#badge-overview dl,
1829#badge-details dl {
1830 margin: 0;
1831
1832 dt,
1833 dd {
1834 vertical-align: top;
1835 padding: 3px 0;
1836 }
f4143537 1837
536f0460
DW
1838 dt {
1839 clear: both;
1840 display: inline-block;
1841 width: 20%;
1842 min-width: 100px;
1843 }
f4143537 1844
536f0460
DW
1845 dd {
1846 display: inline-block;
1847 width: 79%;
1848 margin-left: 1%;
1849 }
1850}
1851
1852.badge-profile {
1853 vertical-align: top;
1854}
f4143537 1855
536f0460 1856.connected {
43817397 1857 color: map-get($theme-colors, 'success');
536f0460 1858}
f4143537 1859
536f0460 1860.notconnected {
43817397 1861 color: map-get($theme-colors, 'danger');
536f0460 1862}
f4143537 1863
536f0460 1864.connecting {
43817397 1865 color: map-get($theme-colors, 'warning');
536f0460 1866}
f4143537 1867
536f0460
DW
1868#page-badges-award .recipienttable tr td {
1869 vertical-align: top;
1870}
f4143537 1871
536f0460
DW
1872#page-badges-award .recipienttable tr td.actions .actionbutton {
1873 margin: 0.3em 0;
1874 padding: 0.5em 0;
1875 width: 100%;
1876}
f4143537 1877
536f0460
DW
1878#page-badges-award .recipienttable tr td.existing,
1879#page-badges-award .recipienttable tr td.potential {
1880 width: 42%;
1881}
1882
1883#issued-badge-table .activatebadge {
1884 display: inline-block;
1885}
f4143537 1886
536f0460
DW
1887.statusbox.active {
1888 background-color: $state-success-bg;
1889}
f4143537 1890
536f0460
DW
1891.statusbox.inactive {
1892 background-color: $state-warning-bg;
1893}
f4143537 1894
536f0460
DW
1895.statusbox {
1896 text-align: center;
1897 margin-bottom: 5px;
1898 padding: 5px;
1899}
f4143537 1900
536f0460
DW
1901.statusbox .activatebadge {
1902 display: inline-block;
1903}
f4143537
DP
1904
1905.statusbox .activatebadge input[type=submit] {
536f0460
DW
1906 margin: 3px;
1907}
f4143537 1908
536f0460 1909.activatebadge {
fde35b8f 1910 margin: 0;
536f0460
DW
1911 text-align: left;
1912 vertical-align: middle;
1913}
f4143537 1914
536f0460
DW
1915img#persona_signin {
1916 cursor: pointer;
1917}
f4143537 1918
536f0460
DW
1919.addcourse {
1920 float: right;
1921}
f4143537 1922
536f0460
DW
1923.invisiblefieldset {
1924 display: inline;
536f0460
DW
1925 padding: 0;
1926 border-width: 0;
1927}
f4143537 1928
b71c82ad
FM
1929/** Page header */
1930#page-header {
1931 .logo {
1932 margin: $spacer 0;
7ad1d2da 1933 img {
0d5f5f73 1934 max-height: 75px;
7ad1d2da 1935 }
b71c82ad 1936 }
536f0460
DW
1937}
1938
ed0e21c0
BB
1939/** Navbar logo. */
1940nav.navbar .logo img {
1941 max-height: 35px;
5f18da12
FM
1942}
1943
536f0460
DW
1944/** Header-bar styles **/
1945.page-context-header {
1946 // We need to be explicit about the height of the header.
1947 $pageHeaderHeight: 140px;
1948
1949 // Do not remove these rules.
1950 overflow: hidden;
1951
1952 .page-header-image,
1953 .page-header-headings {
b167b415 1954 float: left;
536f0460
DW
1955 display: block;
1956 position: relative;
1957 }
f4143537 1958
536f0460 1959 .page-header-image {
536f0460
DW
1960 margin-right: 1em;
1961 margin-bottom: 1em;
1962 }
536f0460
DW
1963
1964 .page-header-headings,
1965 .header-button-group {
1966 position: relative;
1967 line-height: 24px;
1968 vertical-align: middle;
1969 }
1970
1971 .header-button-group {
1972 display: block;
1973 float: left;
f4143537 1974
536f0460
DW
1975 a {
1976 position: relative;
1977
1978 // Don't touch it unless you know exactly what you are doing.
1979 top: -0.4em;
1980 }
1981 }
1982}
1983
536f0460
DW
1984ul.dragdrop-keyboard-drag li {
1985 list-style-type: none;
1986}
1987
536f0460
DW
1988a.disabled:hover,
1989a.disabled {
1990 text-decoration: none;
1991 cursor: default;
1992 font-style: italic;
1993 color: #808080;
1994}
f4143537 1995
536f0460 1996body.lockscroll {
9cb41231
DP
1997 height: 100%;
1998 overflow: hidden;
536f0460
DW
1999}
2000
2001.progressbar_container {
2002 max-width: 500px;
2003 margin: 0 auto;
2004}
2005
2006/* IE10 only fix for calendar titling */
2007.ie10 .yui3-calendar-header-label {
2008 display: inline-block;
2009}
2010
2011dd:before,
2012dd:after {
9cb41231
DP
2013 display: block;
2014 content: " ";
536f0460 2015}
f4143537 2016
536f0460 2017dd:after {
9cb41231 2018 clear: both;
536f0460
DW
2019}
2020
2021// Active tabs with links should have a different
2022// cursor to indicate they are clickable.
2023.nav-tabs > .active > a[href],
2024.nav-tabs > .active > a[href]:hover,
2025.nav-tabs > .active > a[href]:focus {
2026 cursor: pointer;
2027}
2028
2029.inplaceeditable {
536f0460
DW
2030 &.inplaceeditingon {
2031 position: relative;
2032
2033 .editinstructions {
2034 margin-top: -30px;
2035 font-weight: normal;
2036 margin-right: 0;
2037 margin-left: 0;
2038 left: 0;
2039 right: auto;
2040 white-space: nowrap;
2041 }
2042
2043 input {
2044 width: 330px;
536f0460
DW
2045 vertical-align: text-bottom;
2046 margin-bottom: 0;
2047 }
2048
2049 select {
2050 margin-bottom: 0;
2051 }
2052 }
2053
2054 .quickediticon img {
2055 opacity: 0.2;
2056 }
2057
2058 .quickeditlink {
2059 color: inherit;
2060 text-decoration: inherit;
2061 }
2062
2063 &:hover .quickeditlink .quickediticon img,
2064 .quickeditlink:focus .quickediticon img {
2065 opacity: 1;
2066 }
2067
2068 &.inplaceeditable-toggle .quickediticon {
2069 display: none;
2070 }
fb5bbf14
AN
2071
2072 &.inplaceeditable-autocomplete {
2073 display: block;
2074 }
536f0460
DW
2075}
2076
2077h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2078 margin-top: -20px;
2079}
89d9895b
FM
2080
2081/** Chart area. */
2082.chart-area {
2083
2084 .chart-table-data {
2085 display: none;
2086 }
2087
2088 .chart-table {
2089 .chart-output-htmltable caption {
2090 white-space: nowrap;
2091 }
2092 /** When accessible, we display the table only. */
2093 &.accesshide {
2094 .chart-table-expand {
2095 display: none;
2096 }
2097 .chart-table-data {
2098 display: block;
2099 }
2100 }
2101 }
2102}
2103
536f0460
DW
2104// Reset for ul.
2105ul {
2106 padding-left: 1rem;
2107}
b843914d
FM
2108
2109/* YUI 2 Tree View */
2110/*rtl:raw:
2111.ygtvtn,
2112.ygtvtm,
2113.ygtvtmh,
2114.ygtvtmhh,
2115.ygtvtp,
2116.ygtvtph,
2117.ygtvtphh,
2118.ygtvln,
2119.ygtvlm,
2120.ygtvlmh,
2121.ygtvlmhh,
2122.ygtvlp,
2123.ygtvlph,
2124.ygtvlphh,
2125.ygtvdepthcell,
2126.ygtvok,
2127.ygtvok:hover,
2128.ygtvcancel,
2129.ygtvcancel:hover {
2130 background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2131}
2132*/
963ba889
RW
2133
2134.hover-tooltip-container {
2135 position: relative;
2136
2137 .hover-tooltip {
2138 opacity: 0;
2139 visibility: hidden;
2140 position: absolute;
1fb687ea 2141 /*rtl:ignore*/
963ba889
RW
2142 left: 50%;
2143 top: calc(-50% - 5px);
2144 transform: translate(-50%, -50%);
2145 background-color: #fff;
2146 border: 1px solid rgba(0, 0, 0, .2);
2147 border-radius: .3rem;
2148 box-sizing: border-box;
2149 padding: 5px;
2150 white-space: nowrap;
2151 transition: opacity 0.15s, visibility 0.15s;
2152 z-index: 1000;
2153
2154 &:before {
2155 content: '';
2156 display: inline-block;
2157 border-left: 8px solid transparent;
2158 border-right: 8px solid transparent;
2159 border-top: 8px solid rgba(0, 0, 0, .2);
2160 position: absolute;
2161 bottom: -8px;
2162 left: calc(50% - 8px);
2163 }
2164
2165 &:after {
2166 content: '';
2167 display: inline-block;
2168 border-left: 7px solid transparent;
2169 border-right: 7px solid transparent;
2170 border-top: 7px solid #fff;
2171 position: absolute;
2172 bottom: -6px;
2173 left: calc(50% - 7px);
2174 z-index: 2;
2175 }
2176 }
2177
2178 &:hover {
2179 .hover-tooltip {
2180 opacity: 1;
2181 visibility: visible;
2182 transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2183 }
2184 }
2185}
99061152
DW
2186
2187#region-flat-nav {
2188 padding-right: 0;
2189 padding-left: 0;
2190 .nav {
2191 margin-right: $grid-gutter-width / 2;
2192 background-color: $card-bg;
2193 }
2194 @include media-breakpoint-down(sm) {
2195 .nav {
2196 margin-top: $grid-gutter-width;
2197 margin-right: 0;
2198 }
2199 }
2200}
b45fdc68 2201
2fd7cdbe
JO
2202// Footer link colour was added to allow the colour of footer links to be changed,
2203// but really in bootstrap we want the colour of links on .bg-inverse to be changed
2204// rather than being specific to the footer. This is kept for backwards compatibility.
2205$footer-link-color: $bg-inverse-link-color !default;
b45fdc68
DW
2206#page-footer a {
2207 color: $footer-link-color;
2fd7cdbe
JO
2208 text-decoration: underline;
2209 .icon {
2210 color: $footer-link-color;
2211 }
2212}
2213
2214.bg-inverse a {
2215 color: $bg-inverse-link-color;
2216 text-decoration: underline;
2217 .icon {
2218 color: $bg-inverse-link-color;
2219 }
b45fdc68 2220}
70fda55e 2221
15de9ec8
LB
2222.sitelink {
2223 img {
2224 width: 112px;
2225 }
2226}
2227
70fda55e
DW
2228// Make links in a menu clickable anywhere in the row.
2229.dropdown-item a {
2230 display: block;
2231 width: 100%;
2232 color: $body-color;
2233}
20e6ece8
DW
2234.dropdown-item:active a {
2235 color: $dropdown-link-active-color;
2236}
6e79ea58 2237
207136f2
DW
2238.competency-tree {
2239 ul {
2240 padding-left: 1.5rem;
2241 }
2242}
24299774 2243
4b80e95c
NK
2244.sr-only-focusable {
2245 &:active,
2246 &:focus {
2247 z-index: $zindex-navbar-fixed + 1;
2248 position: fixed;
2249 background: #fff;
2250 padding: 7px;
2251 left: 0;
2252 top: 0;
2253 }
2254}
5ca142dc
RW
2255
2256[data-drag-type="move"] {
2257 cursor: move;
f7d1a24e 2258 touch-action: none;
5ca142dc 2259}
f6e8cc83
RW
2260
2261.clickable {
2262 cursor: pointer;
2263}
63cb267c
SL
2264
2265.overlay-icon-container {
2266 position: absolute;
2267 top: 0;
2268 left: 0;
2269 width: 100%;
2270 height: 100%;
2271 background-color: rgba(255, 255, 255, 0.6);
2272
2273 .loading-icon {
2274 position: absolute;
2275 top: 50%;
2276 left: 50%;
2277 transform: translate(-50%, -50%);
2278
2279 .icon {
99df0518
RW
2280 height: 30px;
2281 width: 30px;
2282 font-size: 30px;
63cb267c
SL
2283 }
2284 }
2285}
3ec69c2e 2286
7b87d98d 2287.open.atto_menu > .dropdown-menu {
3ec69c2e
BB
2288 display: block;
2289}
1b217025
BB
2290div.editor_atto_toolbar button .icon {
2291 color: $gray-700;
2292}
2293.w-auto {
2294 width: auto;
2295}
2296
edd7fa33
RW
2297.bg-pulse-grey {
2298 animation: bg-pulse-grey 2s infinite linear;
2299}
2300
2301@keyframes bg-pulse-grey {
2302 0% {
2303 background-color: $gray-100;
2304 }
2305 50% {
2306 background-color: darken($gray-100, 5%);
2307 }
2308 100% {
2309 background-color: $gray-100;
2310 }
2311}
2312
2d41f5b2
RW
2313@each $size, $length in $spacers {
2314 .line-height-#{$size} {
2315 line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2316 }
296ff0a7
RW
2317}
2318
2319.dir-rtl {
2320 .dir-rtl-hide {
2321 display: none;
2322 }
2323}
2324
2325.dir-ltr {
2326 .dir-ltr-hide {
2327 display: none;
2328 }
970bb713 2329}
a69193fa 2330
356bfb69
BB
2331.paged-content-page-container {
2332 min-height: 3.125rem;
2333}
c483a8ee 2334
35221a2e 2335body.h5p-embed {
5092133b
BB
2336 #page-content {
2337 display: inherit;
2338 }
35221a2e
SA
2339 #maincontent {
2340 display: none;
2341 }
2342 .h5pmessages {
2343 min-height: 230px; // This should be the same height as default core_h5p iframes.
2344 }
2345}
2346
c483a8ee
RW
2347.text-decoration-none {
2348 text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
12d23810
RW
2349}
2350
b53f15b1
RW
2351.colour-inherit {
2352 color: inherit !important; /* stylelint-disable-line declaration-no-important */
2353}
2354
12d23810
RW
2355.position-right {
2356 right: 0 !important; /* stylelint-disable-line declaration-no-important */
20e6ece8 2357}
3edde4fb
RW
2358
2359.overflow-hidden {
2360 overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2361}
48507e16
BB
2362
2363.text-break {
2364 overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2365}
c516fc11
BB
2366
2367.z-index-1 {
2368 z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2369}
10425e73
BB
2370
2371// These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2372.float-left {
2373 float: left !important; /* stylelint-disable-line declaration-no-important */
2374}
2375.float-right {
2376 float: right !important; /* stylelint-disable-line declaration-no-important */
2377}
db65ba45 2378
db65ba45
RW
2379// Emoji picker.
2380$picker-width: 350px !default;
2381$picker-width-xs: 320px !default;
2382$picker-height: 400px !default;
2383$picker-row-height: 40px !default;
2384$picker-emoji-button-size: 40px !default;
2385$picker-emoji-button-font-size: 24px !default;
2386$picker-emoji-category-count: 9 !default;
2387$picker-emojis-per-row: 7 !default;
2388
2389.emoji-picker {
2390 width: $picker-width;
2391 height: $picker-height;
2392
2393 .category-button {
2394 padding: .375rem 0;
2395 height: 100%;
2396 width: $picker-width / $picker-emoji-category-count;
2397 border-top: none;
2398 border-left: none;
2399 border-right: none;
2400 border-bottom: 2px solid transparent;
2401
2402 &.selected {
2403 border-bottom: 2px solid map-get($theme-colors, 'primary');
2404 }
2405 }
2406
2407 .emojis-container,
2408 .search-results-container {
2409 min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2410 }
2411
2412 .picker-row {
2413 height: $picker-row-height;
2414
2415 .category-name {
2416 line-height: $picker-row-height;
2417 }
2418
2419 .emoji-button {
2420 height: $picker-emoji-button-size;
2421 width: $picker-emoji-button-size;
2422 line-height: $picker-emoji-button-size;
2423 font-size: $picker-emoji-button-font-size;
2424 overflow: hidden;
2425
2426 @include hover-focus {
2427 color: inherit;
2428 text-decoration: none;
2429 }
2430 }
2431 }
2432
2433 .emoji-preview {
2434 height: $picker-row-height;
2435 font-size: $picker-row-height;
2436 line-height: $picker-row-height;
2437 }
2438
2439 .emoji-short-name {
2440 line-height: $picker-row-height / 2;
2441 }
2442
2443 @include media-breakpoint-down(xs) {
2444 width: $picker-width-xs;
2445 }
2446}
75962db9
RW
2447
2448.emoji-auto-complete {
2449 height: $picker-row-height;
2450
2451 .btn.btn-link.btn-icon.emoji-button {
2452 height: $picker-emoji-button-size;
2453 width: $picker-emoji-button-size;
2454 line-height: $picker-emoji-button-size;
2455 font-size: $picker-emoji-button-font-size;
2456
2457 &.active {
2458 background-color: $gray-200;
2459 }
2460 }
2461}
224ea04e
AN
2462
2463.toast-wrapper {
2464 max-width: $toast-max-width;
4e796e22 2465 max-height: 0;
224ea04e
AN
2466 // Place these above any modals and other elements.
2467 z-index: 1051;
4d440943
AN
2468
2469 > :first-child {
2470 margin-top: $spacer;
2471 }
224ea04e 2472}
1a17df08
BB
2473
2474@each $color, $value in $theme-colors {
2475 .alert-#{$color} a {
2476 color: darken(theme-color-level($color, $alert-color-level), 10%);
2477 }
2478}