MDL-55802 theme_noname: Navbar is responsive and better styled
[moodle.git] / theme / noname / scss / moodle / core.scss
CommitLineData
536f0460
DW
1/* core.less */
2
3/** Page layout CSS starts **/
4.layout-option-noheader #page-header,
5.layout-option-nonavbar #page-navbar,
6.layout-option-nofooter #page-footer,
7.layout-option-nocourseheader .course-content-header,
8.layout-option-nocoursefooter .course-content-footer {
9 display:none;
10}
11
536f0460
DW
12/** Page layout CSS ends **/
13
536f0460
DW
14.mdl-left {
15 text-align: left;
16}
536f0460
DW
17.mdl-right {
18 text-align: right;
19}
113efed5
FM
20
21/*rtl:ignore*/
22.text-ltr {
23 direction: ltr !important;
24}
25
536f0460
DW
26#add,
27#remove,
28.centerpara,
29.mdl-align {
30 text-align: center;
31}
32a.dimmed,
33a.dimmed:link,
34a.dimmed:visited,
35a.dimmed_text,
36a.dimmed_text:link,
37a.dimmed_text:visited,
38.dimmed_text,
39.dimmed_text a,
40.dimmed_text a:link,
41.dimmed_text a:visited,
42.usersuspended,
43.usersuspended a,
44.usersuspended a:link,
45.usersuspended a:visited,
46.dimmed_category,
47.dimmed_category a {
48 @extend .text-muted
49}
50.activity.label .dimmed_text {
51 opacity: 0.5;
52}
53.unlist,
54.unlist li,
55.inline-list,
56.inline-list li,
57.block .list,
58.block .list li,
59.section li.activity,
60.section li.movehere,
61.tabtree li {
62 list-style: none;
63 margin: 0;
64 padding: 0;
65}
66.inline,
67.inline-list li {
68 display: inline;
69}
70.notifytiny {
71 font-size: $font-size-xs;
72}
73.notifytiny li,
74.notifytiny td {
75 font-size: 100%;
76}
77.red,
78.notifyproblem {
79 @extend .text-warning;
80}
81.green,
82.notifysuccess {
83 @extend .text-success;
84}
85.highlight {
86 @extend .text-info;
87}
88.reportlink {
89 text-align: right;
90}
91a.autolink.glossary:hover {
92 cursor: help;
93}
94/* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
95.collapsibleregioncaption {
96 white-space: nowrap;
97}
98.pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
99 cursor: pointer;
100}
101.collapsibleregioncaption img {
102 vertical-align: middle;
103}
104
105.jsenabled .hiddenifjs {
106 display: none;
107}
108.visibleifjs {
109 display: none;
110}
111.jsenabled .visibleifjs {
112 display: inline;
113}
114.jsenabled .collapsibleregion {
115 overflow: hidden;
116}
117.jsenabled .collapsed .collapsibleregioninner {
118 visibility: hidden;
119}
120.collapsible-actions {
121 display: none;
122 text-align: right;
123}
124.jsenabled .collapsible-actions {
125 display: block;
126}
127.collapsible-actions .collapseexpand {
128 padding-left: 20px;
129 background: url([[pix:t/collapsed]]) 2px center no-repeat;
130}
ed7844b5
FM
131/*rtl:raw:
132.collapsible-actions .collapseexpand {
536f0460
DW
133 background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
134}
ed7844b5 135*/
536f0460
DW
136.collapsible-actions .collapse-all {
137 background-image: url([[pix:t/expanded]]);
138}
139.yui-overlay .yui-widget-bd {
140 background-color: #FFEE69;
141 border: 1px solid #A6982B;
142 border-top-color: #D4C237;
143 color: #000000;
144 left: 0;
145 padding: 2px 5px;
146 position: relative;
147 top: 0;
148 z-index: 1;
149}
150.clearer {
151 background: transparent;
152 border-width: 0;
153 clear: both;
154 display: block;
155 height: 1px;
156 margin: 0;
157 padding: 0;
158}
159.bold,
160.warning,
161.errorbox .title,
162.pagingbar .title,
163.pagingbar .thispage {
164 font-weight: bold;
165}
91bda4cd
DW
166img.userpicture {
167 margin-right: 0.5rem;
168}
536f0460
DW
169img.resize {
170 height: 1em;
171 width: 1em;
172}
91bda4cd
DW
173.action-menu .dropdown-toggle {
174 margin-right: 0.5rem;
175 text-decoration: none;
176}
3f0544b8
DW
177.action-menu {
178 white-space: nowrap;
179}
3f0544b8
DW
180.action-menu .userpicture {
181 width: auto;
182 height: auto;
183 padding-left: 1rem;
184}
536f0460
DW
185.block img.resize,
186.breadcrumb img.resize {
187 height: 0.9em;
188 width: 0.8em;
189}
190/* Icon styles */
072364df 191img.activityicon {
536f0460
DW
192 height: 24px;
193 width: 24px;
194 vertical-align: middle;
195}
536f0460
DW
196.boxaligncenter {
197 margin-left: auto;
198 margin-right: auto;
199}
200.boxalignright {
201 margin-left: auto;
202 margin-right: 0;
203}
204.boxalignleft {
205 margin-left: 0;
206 margin-right: auto;
207}
208.boxwidthnarrow {
209 width: 30%;
210}
211.boxwidthnormal {
212 width: 50%;
213}
214.boxwidthwide {
215 width: 80%;
216}
217.headermain {
218 font-weight: bold;
219}
220#maincontent {
221 display: block;
222 height: 1px;
223 overflow: hidden;
224}
225img.uihint {
226 cursor: help;
227}
228#addmembersform table {
229 margin-left: auto;
230 margin-right: auto;
231}
232table.flexible .emptyrow {
233 display: none;
234}
536f0460
DW
235form.popupform,
236form.popupform div {
237 display: inline;
238}
239.arrow_button input {
240 overflow: hidden;
241}
536f0460
DW
242/** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
243.no-overflow {
244 overflow: auto;
245 padding-bottom: 1px;
246}
247.pagelayout-report .no-overflow {
248 overflow: visible;
249}
250.no-overflow > .generaltable {
251 margin-bottom: 0;
252}
253// Accessibility features
254
255// Accessibility: text 'seen' by screen readers but not visual users.
256.accesshide {
257 position: absolute;
258 left: -10000px;
259 font-weight: normal;
260 font-size: 1em;
261}
262span.hide,
263div.hide {
264 display: none;
265}
266// Accessibility: Skip block link, for keyboard-only users.
267a.skip-block,
268a.skip {
269 position: absolute;
270 top: -1000em;
271 font-size: 0.85em;
272 text-decoration: none;
273}
274a.skip-block:focus,
275a.skip-block:active,
276a.skip:focus,
277a.skip:active {
278 position: static;
279 display: block;
280}
281.skip-block-to {
282 display: block;
283 height: 1px;
284 overflow: hidden;
285}
286// Blogs
287.addbloglink {
288 text-align: center;
289}
290.blog_entry .audience {
291 text-align: right;
292 padding-right: 4px;
293}
294.blog_entry .tags {
295 margin-top: 15px;
296}
536f0460
DW
297.blog_entry .content {
298 margin-left: 43px;
299}
300// Group
301#page-group-index #groupeditform {
302 text-align: center;
303}
304#doc-contents h1 {
305 margin: 1em 0 0 0;
306}
307#doc-contents ul {
308 margin: 0;
309 padding: 0;
310 width: 90%;
311}
312#doc-contents ul li {
313 list-style-type: none;
314}
315.groupmanagementtable td {
316 vertical-align: top;
317}
318.groupmanagementtable #existingcell,
319.groupmanagementtable #potentialcell {
320 width: 42%;
321}
322.groupmanagementtable #buttonscell {
323 width: 16%;
324}
325.groupmanagementtable #buttonscell p.arrow_button input {
326 width: auto;
327 min-width: 80%;
328 margin: 0 auto;
329}
330.groupmanagementtable #removeselect_wrapper,
331.groupmanagementtable #addselect_wrapper {
332 width: 100%;
333}
334.groupmanagementtable #removeselect_wrapper label,
335.groupmanagementtable #addselect_wrapper label {
336 font-weight: normal;
337}
338#group-usersummary {
339 width: 14em;
340}
341.groupselector {
342 margin-top: 3px;
343 margin-bottom: 3px;
344 display: inline-block;
345}
346.groupselector label {
347 display: inline-block;
348}
536f0460
DW
349
350// Login
386f269f
FM
351.login-page {
352 [name="username"] {
353 margin-bottom: -1px;
354 border-bottom-right-radius: 0;
355 border-bottom-left-radius: 0;
356 }
357 [type="password"] {
358 margin-bottom: 10px;
359 border-top-left-radius: 0;
360 border-top-right-radius: 0;
361 }
536f0460
DW
362}
363
536f0460
DW
364// Notes
365.notepost {
366 margin-bottom: 1em;
367}
368.notepost .userpicture {
369 float: left;
370 margin-right: 5px;
371}
372.notepost .content,
373.notepost .footer {
374 clear: both;
375}
376.notesgroup {
377 margin-left: 20px;
378}
379
380// My Moodle
381.path-my .coursebox .overview {
382 margin: 15px 30px 10px 30px;
383}
384.path-my .coursebox .info {
385 float: none;
386 margin: 0;
387}
388
389// Modules
390.mod_introbox {
391 padding: 10px;
392}
393table.mod_index {
394 width: 100%;
395}
396
397// Comments
398.comment-ctrl {
399 font-size: 12px;
400 display: none;
401 margin: 0;
402 padding: 0;
403}
404.comment-ctrl h5 {
405 margin: 0;
406 padding: 5px;
407}
408.comment-area {
409 max-width: 400px;
410 padding: 5px;
411}
412.comment-area textarea {
413 width: 100%;
414 overflow: auto;
415 &.fullwidth {
416 -webkit-box-sizing: border-box;
417 -moz-box-sizing: border-box;
418 box-sizing: border-box;
419 }
420}
421.comment-area .fd {
422 text-align: right;
423}
424.comment-meta span {
425 color: gray;
426}
427.comment-link img {
428 vertical-align: text-bottom;
429}
430.comment-list {
431 font-size: 11px;
432 overflow: auto;
433 list-style: none;
434 padding: 0;
435 margin: 0;
436}
437.comment-list li {
438 margin: 2px;
439 list-style: none;
440 margin-bottom: 5px;
441 clear: both;
442 padding: .3em;
443 position: relative;
444}
445.comment-list li.first {
446 display: none
447}
448.comment-paging{
449 text-align: center;
450}
451.comment-paging .pageno{
452 padding: 2px;
453}
454.comment-paging .curpage{
455 border: 1px solid #CCC;
456}
457.comment-message .picture {
458 width: 20px;
459 float: left;
460}
461.comment-message .text {
462 margin: 0;
463 padding: 0;
464}
465.comment-message .text p {
466 padding: 0;
467 margin: 0 18px 0 0;
468}
469.comment-delete {
470 position: absolute;
471 top: 0;
472 right: 0;
473 margin: .3em;
474}
475.comment-report-selectall{
476 display: none
477}
478.comment-link {
479 display: none
480}
481.jsenabled .comment-link {
482 display: block
483}
484.jsenabled .showcommentsnonjs{
485 display: none
486}
487.jsenabled .comment-report-selectall{
488 display: inline
489}
490/**
491* Completion progress report
492*/
493.completion-expired {
494 @extend .text-warning;
495}
496.completion-expected {
497 font-size: $font-size-xs;
498}
499.completion-sortchoice,
500.completion-identifyfield {
501 font-size: $font-size-xs;
502 vertical-align: bottom;
503}
504.completion-progresscell {
505 text-align: right;
506}
507.completion-expired .completion-expected {
508 font-weight: bold;
509}
510/**
511* Tags
512*/
513img.user-image {
514 height: 100px;
515 width: 100px;
516}
517#tag-search-box {
518 text-align: center;
519 margin: 10px auto;
520}
521
522.path-tag .tag-index-items .tagarea {
523 border: 1px solid #E3E3E3;
524 border-radius: 4px;
525 padding: 10px;
526 margin-top: 10px;
527}
528
529.path-tag .tag-index-items .tagarea h3 {
530 display: block;
531 padding: 3px 0 10px 0;
532 margin: 0px;
533 font-size: 1.1em;
534 font-weight: bold;
535 line-height: 20px;
536 color: #999;
537 text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
538 text-transform: uppercase;
539 word-wrap: break-word;
540 border-bottom: solid 1px #E3E3E3;
541 margin-bottom: 10px;
542}
543
544.path-tag .tagarea .controls,
545.path-tag .tagarea .taggeditems {
546 @include clearfix();
547}
548.path-tag .tagarea .controls,
549.path-tag .tag-backtoallitems {
550 text-align: center;
551}
552.path-tag .tagarea .controls .gotopage.nextpage {
553 float: right;
554}
555.path-tag .tagarea .controls .gotopage.prevpage {
556 float: left;
557}
558.path-tag .tagarea .controls .exclusivemode {
559 display: inline-block;
560}
561.path-tag .tagarea .controls.controls-bottom {
562 margin-top: 5px;
563}
564.path-tag .tagarea .controls .gotopage.nextpage::after {
565 padding-right: 5px;
566 padding-left: 5px;
567 content: "»";
568}
569.path-tag .tagarea .controls .gotopage.prevpage::before {
570 padding-right: 5px;
571 padding-left: 5px;
572 content: "«";
573}
574
575span.flagged-tag,
576tr.flagged-tag,
577span.flagged-tag a,
578tr.flagged-tag a {
579 @extend .text-warning;
580}
581.tag-management-table td,
582.tag-management-table th {
583 vertical-align: middle;
584 padding: 4px;
585}
586.tag-management-table .inplaceeditable.inplaceeditingon input {
587 width: 150px;
588}
589.path-admin-tag .addstandardtags {
590 float: right;
591 img {
592 margin: 0 5px;
593 }
594}
595.path-tag .tag-relatedtags {
596 padding-top: 10px;
597}
598.path-tag .tag-management-box {
599 text-align: right;
600}
601.path-tag .tag-index-toc {
602 padding: 10px;
603 text-align: center;
604}
605.path-tag .tag-index-toc li,
606.path-tag .tag-management-box li {
607 margin-left: 5px;
608 margin-right: 5px;
609}
610.path-tag .tag-management-box li a.edittag {
611 background-image: url([[pix:moodle|i/settings]]);
612}
613.path-tag .tag-management-box li a.flagasinappropriate {
614 background-image: url([[pix:moodle|i/flagged]]);
615}
616.path-tag .tag-management-box li a.removefrommyinterests {
617 background-image: url([[pix:moodle|t/delete]]);
618}
619.path-tag .tag-management-box li a.addtomyinterests {
620 background-image: url([[pix:moodle|t/add]]);
621}
622.path-tag .tag-management-box li a {
623 background-repeat: no-repeat;
624 background-position: left;
625 padding-left: 17px;
626}
627.tag_feed.media-list .media .itemimage {
628 float: left;
629}
630.tag_feed.media-list .media .itemimage img {
631 height: 35px;
632 width: 35px;
633}
634.tag_feed.media-list .media .media-body {
635 padding-right: 10px;
636 padding-left: 10px;
637}
638.tag_feed .media .muted a {
639 @extend .text-muted;
640}
641.tag_cloud {
642 text-align: center;
643}
644.tag_cloud .inline-list li {
645 padding: 0px 0.2em;
646}
647.tag_cloud .tag_overflow {
648 margin-top: 1em;
649 font-style: italic;
650}
651.tag_cloud .s20 {
652 font-size: 2.7em;
653}
654.tag_cloud .s19 {
655 font-size: 2.6em;
656}
657.tag_cloud .s18 {
658 font-size: 2.5em;
659}
660.tag_cloud .s17 {
661 font-size: 2.4em;
662}
663.tag_cloud .s16 {
664 font-size: 2.3em;
665}
666.tag_cloud .s15 {
667 font-size: 2.2em;
668}
669.tag_cloud .s14 {
670 font-size: 2.1em;
671}
672.tag_cloud .s13 {
673 font-size: 2em;
674}
675.tag_cloud .s12 {
676 font-size: 1.9em;
677}
678.tag_cloud .s11 {
679 font-size: 1.8em;
680}
681.tag_cloud .s10 {
682 font-size: 1.7em;
683}
684.tag_cloud .s9 {
685 font-size: 1.6em;
686}
687.tag_cloud .s8 {
688 font-size: 1.5em;
689}
690.tag_cloud .s7 {
691 font-size: 1.4em;
692}
693.tag_cloud .s6 {
694 font-size: 1.3em;
695}
696.tag_cloud .s5 {
697 font-size: 1.2em;
698}
699.tag_cloud .s4 {
700 font-size: 1.1em;
701}
702.tag_cloud .s3 {
703 font-size: 1em;
704}
705.tag_cloud .s2 {
706 font-size: 0.9em;
707}
708.tag_cloud .s1 {
709 font-size: 0.8em;
710}
711.tag_cloud .s0 {
712 font-size: 0.7em;
713}
714.tag_list ul {
715 display: inline;
716}
717.tag_list.hideoverlimit .overlimit {
718 display:none;
719}
720.tag_list .tagmorelink {
721 display:none;
722}
723.tag_list.hideoverlimit .tagmorelink {
724 display:inline;
725}
726.tag_list.hideoverlimit .taglesslink {
727 display:none;
728}
729
730/**
731* Web Service
732*/
733#webservice-doc-generator td {
734 text-align: left;
735 border: 0 solid black;
736}
737/**
738* Smart Select Element
739*/
740.smartselect {
741 position: absolute;
742}
743.smartselect .smartselect_mask {
744 background-color: #fff;
745}
746.smartselect ul {
747 padding: 0;
748 margin: 0;
749}
750.smartselect ul li {
751 list-style: none;
752}
753.smartselect .smartselect_menu {
754 margin-right: 5px;
755}
756.safari .smartselect .smartselect_menu {
757 margin-left: 2px;
758}
759.smartselect .smartselect_menu,
760.smartselect .smartselect_submenu {
761 border: 1px solid #000;
762 background-color: #FFF;
763 display: none;
764}
765.smartselect .smartselect_menu.visible,
766.smartselect .smartselect_submenu.visible {
767 display: block;
768}
769.smartselect .smartselect_menu_content ul li {
770 position: relative;
771 padding: 2px 5px;
772}
773.smartselect .smartselect_menu_content ul li a {
774 color: #333;
775 text-decoration: none;
776}
777.smartselect .smartselect_menu_content ul li a.selectable {
778 color: inherit;
779}
780.smartselect .smartselect_submenuitem {
781 background-image: url([[pix:moodle|t/collapsed]]);
782 background-repeat: no-repeat;
783 background-position: 100%;
784}
785/** Spanning mode */
786.smartselect.spanningmenu .smartselect_submenu {
787 position: absolute;
788 top: -1px;
789 left: 100%;
790}
791.smartselect.spanningmenu .smartselect_submenu a {
792 white-space: nowrap;
793 padding-right: 16px;
794}
795.smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
796 text-decoration: underline;
797}
798/** Compact mode */
799.smartselect.compactmenu .smartselect_submenu {
800 position: relative;
801 margin: 2px -3px;
802 margin-left: 10px;
803 display: none;
804 border-width: 0;
805 z-index: 1010;
806}
807.smartselect.compactmenu .smartselect_submenu.visible {
808 display: block;
809}
810.smartselect.compactmenu .smartselect_menu {
811 z-index: 1000;
812 overflow: hidden;
813}
814.smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
815 z-index: 1020;
816}
817.smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
818 font-weight: bold;
819}
820/**
821* Registration
822*/
823#page-admin-registration-register .registration_textfield {
824 width: 300px;
825}
826/**
827* Enrol
828*/
829.userenrolment {
830 width: 100%;
831 border-collapse: collapse;
832}
833.userenrolment tr {
834 vertical-align:top;
835}
836.userenrolment td {
837 padding: 0;
838 height: 41px;
839}
840.userenrolment .subfield {
841 margin-right: 5px;
842}
843.userenrolment .col_userdetails .subfield {
844 margin-left: 40px;
845}
846.userenrolment .col_userdetails .subfield_picture {
847 float: left;
848 margin-left: 0;
849}
850.userenrolment .col_lastseen {
851 width: 150px;
852}
853.userenrolment .col_role {
854 width: 262px;
855}
856.userenrolment .col_role .roles,
857.userenrolment .col_group .groups {
858 margin-right: 30px;
859}
860.userenrolment .col_role .role,
861.userenrolment .col_group .group {
862 float: left;
863 padding: 3px;
864 margin: 3px;
865 white-space: nowrap;
866}
867.userenrolment .col_role .role a,
868.userenrolment .col_group .group a {
869 margin-left: 3px;
870 cursor: pointer;
871}
872.userenrolment .col_role .addrole,
873.userenrolment .col_group .addgroup {
874 float: right;
875 padding: 3px;
876 margin: 3px;
877 > a:hover {
878 border-bottom:1px solid #666;
879 }
880}
881.userenrolment .col_role .addrole img,
882.userenrolment .col_group .addgroup img {
883 vertical-align: baseline;
884}
885
886.userenrolment .hasAllRoles .col_role .addrole {
887 display: none;
888}
889
890.userenrolment .col_enrol .enrolment {
891 float: left;
892 padding: 3px;
893 margin: 3px;
894}
895.userenrolment .col_enrol .enrolment a {
896 float: right;
897 margin-left: 3px;
898}
899#page-enrol-users {
900 .enrol_user_buttons {
901 float: right;
902 .enrolusersbutton {
903 display: inline;
904 div,
905 form {
906 display: inline;
907 margin-right: 0;
908 }
909 }
910 }
911 #filterform {
912 @extend .card;
913 display: inline-block;
914 .fitem {
915 display: inline-block;
da92b738 916 line-height: $line-height-base * 2;
536f0460
DW
917 margin-right: .3em;
918 white-space: nowrap;
919 label {
920 display: inline;
da92b738 921 line-height: $line-height-base;
536f0460
DW
922 padding-right: .3em;
923 }
924 :before,
925 :after {
926 display: inline;
927 }
928 }
929 div,
930 fieldset {
931 display: inline;
932 float: none;
933 clear: none;
934 width: auto;
935 margin: 0;
936 }
937 select,
938 .ftext input {
939 width: 7em;
940 }
941 input,
942 select {
943 margin-bottom: 0;
944 }
945 }
946 .user-enroller-panel .uep-search-results .user .details {
947 width: 237px;
948 }
949 .user-enroller-panel .uep-search-results .cohort .details {
950 width: 237px;
951 }
952}
953#page-enrol-users .enrol-users-page-action input {
954 margin-left: 0
955}
956.corelightbox {
957 background-color: #CCC;
958 position: absolute;
959 top: 0;
960 left: 0;
961 width: 100%;
962 height: 100%;
963 text-align: center;
964}
965.corelightbox img {
966 position: fixed;
967 top: 50%;
968 left: 50%;
969}
970
971.mod-indent-outer {
972 display: table;
973}
974.mod-indent {
975 display: table-cell;
976}
977.label .mod-indent {
978 float:left;
979 padding-top:20px
980}
981
982$mod-indent-size: 30px;
983/* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
984@for $i from 1 through 16 {
985 $width: ($i * $mod-indent-size);
986
987 .mod-indent-#{$i} {
988 width: $width;
989 }
990}
991.mod-indent-huge {
992 width: (16 * $mod-indent-size);
993}
994
995/* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
996.resourcecontent .mediaplugin_mp3 object {
997 height: 25px;
998 width: 600px
999}
1000.resourcecontent audio.mediaplugin_html5audio {
1001 width: 600px
1002}
1003/** Large resource images should avoid hidden overflow **/
1004.resourceimage {
1005 max-width: 100%;
1006}
1007/* Audio player size in 'inline' mode (can only change width, as above) */
1008.mediaplugin_mp3 object {
1009 height: 15px;
1010 width: 300px
1011}
1012audio.mediaplugin_html5audio {
1013 width: 300px
1014}
1015/* TinyMCE moodle media preview frame should not have padding */
1016.core_media_preview.pagelayout-embedded #content {
1017 padding: 0;
1018}
1019.core_media_preview.pagelayout-embedded #maincontent {
1020 height: 0;
1021}
1022body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1023 padding: 0;
1024 margin: 0;
1025 min-width: 0;
1026 background: none;
1027}
1028.path-rating .ratingtable {
1029 width: 100%;
1030 margin-bottom: 1em;
1031}
1032.path-rating .ratingtable th.rating {
1033 width: 100%;
1034}
1035.path-rating .ratingtable td.rating,
1036.path-rating .ratingtable td.time {
1037 white-space: nowrap;
1038 text-align: center;
1039}
1040.initialbar {
1041 a, strong {
1042 padding-left: 3px;
1043 padding-right: 3px;
1044 }
1045}
25f90896 1046
536f0460
DW
1047/* Moodle Dialogue Settings (moodle-core-dialogue) */
1048.moodle-dialogue-base .moodle-dialogue-lightbox {
e72cb21d 1049 background-color: $gray;
536f0460
DW
1050}
1051.moodle-dialogue-base .hidden,
1052.moodle-dialogue-base .moodle-dialogue-hidden {
1053 display: none;
1054}
1055.no-scrolling {
1056 overflow: hidden;
1057}
1058.moodle-dialogue-base .moodle-dialogue-fullscreen {
1059 left: 0px;
1060 top: 0px;
1061 right: 0px;
1062 bottom: -50px;
1063 position: fixed;
1064}
1065.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1066 overflow: auto;
1067}
1068.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1069 width: 28px;
1070 height: 16px;
1071 background-size: 100%;
1072}
bffc0ef1
FM
1073.moodle-dialogue-base .moodle-dialogue-wrap {
1074 background-color: #fff;
1075 border: 1px solid #ccc;
1076}
25f90896
DW
1077.moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1078 @extend .modal-content;
536f0460 1079}
25f90896
DW
1080.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1081 @extend .modal-header;
536f0460 1082}
536f0460 1083.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
25f90896 1084 // Undo some YUI damage.
88af0208 1085 min-height: 3rem;
25f90896
DW
1086 color: initial;
1087 background-color: initial;
1088 background: initial;
1089 font-size: 1.5rem;
1090 line-height: 1.5;
536f0460
DW
1091}
1092.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
25f90896 1093 @extend .modal-title;
536f0460
DW
1094}
1095.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1096 padding: 5px;
92e32fc4 1097 right: 0;
536f0460
DW
1098}
1099.moodle-dialogue-base .closebutton {
25f90896
DW
1100 @extend .close;
1101 margin: 0;
1102 padding: 10px ! important;
1103 background: 0;
536f0460 1104 border-style: none;
25f90896 1105 box-shadow: none;
536f0460 1106}
25f90896
DW
1107.moodle-dialogue-base .closebutton::after {
1108 content: "×";
536f0460 1109}
25f90896
DW
1110.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1111 @extend .modal-body;
536f0460
DW
1112}
1113
1114.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1115 overflow: auto;
1116 position: absolute;
1117 top: 0px;
1118 bottom: 50px;
1119 left: 0px;
1120 right: 0px;
1121 margin: 0px;
1122 border: 0px;
1123}
536f0460
DW
1124.moodle-dialogue-confirm .confirmation-dialogue {
1125 text-align: center;
1126}
1127.moodle-dialogue-confirm .confirmation-dialogue input {
1128 text-align: center;
1129}
1130.moodle-dialogue-exception .moodle-exception-message {
1131 text-align: center
1132}
1133.moodle-dialogue-exception .moodle-exception-param label {
1134 font-weight: bold;
1135}
1136.moodle-dialogue-exception .param-stacktrace label {
1137 background-color: #EEE;
1138 border: 1px solid #ccc;
1139 border-bottom-width: 0;
1140}
1141.moodle-dialogue-exception .param-stacktrace pre {
1142 border: 1px solid #ccc;
1143 background-color: #fff;
1144}
1145.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1146 color: navy;
1147 font-size: $font-size-sm;
1148}
1149.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1150 @extend .text-warning;
1151 font-size: $font-size-sm;
1152}
1153.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1154 color: #333;
1155 font-size: 90%;
1156 border-bottom: 1px solid #eee;
1157}
1158.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
25f90896
DW
1159 @extend .modal-footer;
1160}
bc8594bd
FM
1161.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1162 display: none;
1163}
25f90896
DW
1164.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1165 // Undo some YUI damage.
1166 background: initial;
536f0460
DW
1167}
1168.moodle-dialogue-confirm .confirmation-message {
1169 margin: 0.5em 1em;
1170}
1171.moodle-dialogue-confirm .confirmation-dialogue input {
1172 min-width: 80px
1173}
1174.moodle-dialogue-exception .moodle-exception-message {
1175 margin: 1em;
1176}
1177.moodle-dialogue-exception .moodle-exception-param {
1178 margin-bottom: 0.5em;
1179}
1180.moodle-dialogue-exception .moodle-exception-param label {
1181 width: 150px;
1182}
1183.moodle-dialogue-exception .param-stacktrace label {
1184 display: block;
1185 margin: 0;
1186 padding: 4px 1em;
1187}
1188.moodle-dialogue-exception .param-stacktrace pre {
1189 display: block;
1190 height: 200px;
1191 overflow: auto;
1192}
1193.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1194 display: inline-block;
1195 margin: 4px 0;
1196}
1197.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1198 display: inline-block;
1199 width: 50px;
1200 margin: 4px 1em;
1201}
1202.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1203 padding-left: 25px;
1204 margin-bottom: 4px;
1205 padding-bottom: 4px;
1206}
1207.moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1208 opacity: 0.75;
1209 width: 100%;
1210 height: 100%;
1211 top: 0;
1212 left: 0;
1213 background-color: white;
1214 text-align: center;
1215 padding: 10% 0;
1216}
1217/* Apply a default max-height on tooltip text */
1218.moodle-dialogue .tooltiptext {
1219 max-height: 300px;
1220}
1221
1222.moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1223 z-index: 3001;
1224
1225 .moodle-dialogue-bd {
1226 overflow: auto;
1227 }
1228}
1229
1230/**
1231 * Chooser Dialogues (moodle-core-chooserdialogue)
1232 *
1233 * This CSS belong to the chooser dialogue which should work both with, and
1234 * without javascript enabled
1235 */
1236/* Hide the dialog and it's title */
1237.chooserdialoguebody,
1238.choosertitle {
1239 display: none;
1240}
1241.moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1242 margin: 0;
1243}
1244.chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1245 padding: 0;
1246 background: #F2F2F2;
1247 @include border-bottom-radius(10px);
1248}
1249/* Center the submit buttons within the area */
1250.choosercontainer #chooseform .submitbuttons {
1251 padding: 0.7em 0;
1252 text-align: center;
1253}
1254/* Fixed for safari browser on iPhone4S with ios7@mixin */
1255@media (max-height: 639px) {
1256 .ios.safari .choosercontainer #chooseform .submitbuttons {
1257 padding: 45px 0;
1258 }
1259}
1260.choosercontainer #chooseform .submitbuttons input {
1261 min-width: 100px;
1262 margin: 0 0.5em;
1263}
1264/* Various settings for the options area */
1265.choosercontainer #chooseform .options {
1266 position: relative;
1267 border-bottom: 1px solid #BBBBBB;
1268}
1269/* Only set these options if we're showing the js container */
1270.jschooser .choosercontainer #chooseform .alloptions {
1271 overflow-x: hidden;
1272 overflow-y: auto;
e119bf6f 1273 max-width: 240px;
536f0460
DW
1274 .option {
1275 input[type=radio] {
1276 display: inline-block;
1277 }
536f0460
DW
1278 .typename {
1279 display: inline-block;
9f76a701 1280 width: 55%;
536f0460
DW
1281 }
1282 }
1283}
1284/* Settings for option rows and option subtypes */
1285.choosercontainer #chooseform .moduletypetitle,
1286.choosercontainer #chooseform .option,
1287.choosercontainer #chooseform .nonoption {
1288 margin-bottom: 0;
1289 padding: 0 1.6em 0 1.6em;
1290}
1291.choosercontainer #chooseform .moduletypetitle {
1292 text-transform: uppercase;
1293 padding-top: 1.2em;
1294 padding-bottom: 0.4em;
1295}
1296.choosercontainer #chooseform .option .typename,
072364df 1297.choosercontainer #chooseform .nonoption .typename {
536f0460
DW
1298 padding: 0 0 0 0.5em;
1299}
e119bf6f
FM
1300.choosercontainer #chooseform .modicon + .typename {
1301 padding-left: 0;
1302}
536f0460 1303
536f0460 1304.choosercontainer #chooseform .option input[type=radio],
072364df 1305.choosercontainer #chooseform .option span.typename {
536f0460
DW
1306 vertical-align: middle;
1307}
1308.choosercontainer #chooseform .option label {
1309 display: block;
e119bf6f
FM
1310 margin: 0;
1311 padding: ($spacer / 2) 0;
536f0460
DW
1312 border-bottom: 1px solid #FFFFFF;
1313}
e119bf6f
FM
1314.choosercontainer #chooseform .option .icon {
1315 margin: 0;
1316 padding: 0 $spacer;
1317}
536f0460
DW
1318.choosercontainer #chooseform .nonoption {
1319 padding-left: 2.7em;
1320 padding-top: 0.3em;
1321 padding-bottom: 0.1em;
1322}
1323.choosercontainer #chooseform .subtype {
1324 margin-bottom: 0;
1325 padding: 0 1.6em 0 3.2em;
1326}
1327.choosercontainer #chooseform .subtype .typename {
1328 margin: 0 0 0 0.2em;
1329}
1330/* The instruction/help area */
1331.jschooser .choosercontainer #chooseform .instruction,
1332.jschooser .choosercontainer #chooseform .typesummary {
1333 display: none;
1334 position: absolute;
1335 top: 0;
1336 right: 0;
1337 bottom: 0;
e119bf6f 1338 left: 240px;
536f0460
DW
1339 margin: 0;
1340 padding: 1.6em;
1341 background-color: #fff;
1342 overflow-x: hidden;
1343 overflow-y: auto;
1344 line-height: 2em;
1345}
1346/* Selected option settings */
1347.jschooser .choosercontainer #chooseform .instruction,
1348.choosercontainer #chooseform .selected .typesummary {
1349 display: block;
1350}
1351.choosercontainer #chooseform .selected {
1352 background-color: #fff;
e119bf6f
FM
1353 margin-top: -1px;
1354 padding-top: 1px;
1355}
1356.chooserdialogue-course-modchooser .modicon .icon {
1357 width: 24px;
1358 height: 24px;
536f0460 1359}
ba252fca
FM
1360
1361@include media-breakpoint-down(xs) {
1362 .jsenabled .choosercontainer #chooseform .alloptions {
1363 max-width: 100%;
1364 }
1365 .jsenabled .choosercontainer #chooseform .instruction,
1366 .jsenabled .choosercontainer #chooseform .typesummary {
1367 position:static;
1368 }
1369}
1370
536f0460
DW
1371/* Form element: listing */
1372.formlistingradio {
1373 padding-bottom: 25px;
1374 padding-right: 10px;
1375}
1376.formlistinginputradio {
1377 float: left;
1378}
1379.formlistingmain {
1380 min-height: 225px;
1381}
1382.formlisting {
1383 position: relative;
1384 margin: 15px 0;
1385 padding: 1px 19px 14px;
1386 background-color: white;
1387 border: 1px solid #DDD;
1388 @include border-radius(4px);
1389}
1390.formlistingmore {
1391 position: absolute;
1392 cursor: pointer;
1393 bottom: -1px;
1394 right: -1px;
1395 padding: 3px 7px;
1396 font-size: 12px;
1397 font-weight: bold;
1398 background-color: whiteSmoke;
1399 border: 1px solid #ddd;
1400 color: #9DA0A4;
1401 @include border-radius(4px 0 4px 0);
1402}
1403.formlistingall {
1404 margin: 15px 0;
1405 padding: 0;
1406 @include border-radius(4px);
1407}
1408.formlistingrow {
1409 cursor: pointer;
1410 border-bottom: 1px solid;
1411 border-color: #E1E1E8;
1412 border-left: 1px solid #E1E1E8;
1413 border-right: 1px solid #E1E1E8;
1414 background-color: #F7F7F9;
1415 @include border-radius(0 0 4px 4px);
1416 padding: 6px;
1417 top: 50%;
1418 left: 50%;
1419 min-height: 34px;
1420 float: left;
1421 width: 150px;
1422}
1423body.jsenabled .formlistingradio {
1424 display: none;
1425}
1426body.jsenabled .formlisting {
1427 display: block;
1428}
1429
1430/* Badges styles */
1431table.collection {
1432 @extend .table;
1433 @extend .table-bordered;
1434 @extend .table-striped;
1435}
1436table.collection .name {
1437 text-align: left;
1438 vertical-align: middle;
1439}
1440table.collection .awards {
1441 width: 10%;
1442 text-align: center;
1443 vertical-align: middle;
1444}
1445table.collection .criteria {
1446 width: 40%;
1447 text-align: left;
1448 vertical-align: top;
1449}
1450table.collection .badgeimage,
1451table.collection .status {
1452 width: 15%;
1453 text-align: center;
1454 vertical-align: middle;
1455}
1456table.collection .description {
1457 width: 25%;
1458 text-align: left;
1459}
1460table.collection .actions {
1461 width: 11em;
1462 text-align: center;
1463 vertical-align: middle;
1464}
1465
1466a.criteria-action {
1467 padding: 0px 3px;
1468 float: right;
1469}
1470div.criteria-description {
1471 padding: 10px 15px;
1472 margin: 5px 0px;
1473 background: none repeat scroll 0 0 #f9f9f9;
1474 border: 1px solid #EEE;
1475}
1476ul.badges {
1477 margin: 0;
1478 list-style: none;
1479}
1480.badges li {
1481 position: relative;
1482 display: inline-block;
1483 padding-top: 1em;
1484 text-align: center;
1485 vertical-align: top;
1486 width: 150px;
1487}
1488.badges li .badge-name {
1489 display: block;
1490 padding: 5px;
1491}
1492.badges li > img {
1493 position: absolute;
1494}
1495.badges li .badge-image {
1496 width: 100px;
1497 height: 100px;
1498 left: 10px;
1499 top: 0px;
1500 z-index: 1;
1501}
1502.badges li .badge-actions {
1503 position: relative;
1504}
1505.badges li .expireimage {
1506 width: 100px;
1507 height: 100px;
1508 left: 25px;
1509 top: 0px;
1510 position: absolute;
1511 z-index: 10;
1512 opacity: 0.85;
1513}
1514
1515#badge-image {
1516 background-color: transparent;
1517 padding: 0;
1518 position: relative;
1519 min-width: 100px;
1520 width: 20%;
1521 display: inline-block;
1522 vertical-align: top;
1523 margin-top: 17px;
1524
1525 .expireimage {
1526 width: 100px;
1527 height: 100px;
1528 left: 0px;
1529 top: 0px;
1530 opacity: 0.85;
1531 position: absolute;
1532 z-index:10;
1533 }
1534
1535 .singlebutton {
1536 padding-top: 5px;
1537
1538 input {
1539 margin-left: 0px;
1540 }
1541 }
1542}
1543#badge-details {
1544 display: inline-block;
1545 width: 79%;
1546}
1547
1548#badge-overview dl,
1549#badge-details dl {
1550 margin: 0;
1551
1552 dt,
1553 dd {
1554 vertical-align: top;
1555 padding: 3px 0;
1556 }
1557 dt {
1558 clear: both;
1559 display: inline-block;
1560 width: 20%;
1561 min-width: 100px;
1562 }
1563 dd {
1564 display: inline-block;
1565 width: 79%;
1566 margin-left: 1%;
1567 }
1568}
1569
1570.badge-profile {
1571 vertical-align: top;
1572}
1573.connected {
1574 @extend .text-success;
1575}
1576.notconnected {
1577 @extend .text-danger;
1578}
1579.connecting {
1580 @extend .text-warning;
1581}
1582#page-badges-award .recipienttable tr td {
1583 vertical-align: top;
1584}
1585#page-badges-award .recipienttable tr td.actions .actionbutton {
1586 margin: 0.3em 0;
1587 padding: 0.5em 0;
1588 width: 100%;
1589}
1590#page-badges-award .recipienttable tr td.existing,
1591#page-badges-award .recipienttable tr td.potential {
1592 width: 42%;
1593}
1594
1595#issued-badge-table .activatebadge {
1596 display: inline-block;
1597}
1598.statusbox.active {
1599 background-color: $state-success-bg;
1600}
1601.statusbox.inactive {
1602 background-color: $state-warning-bg;
1603}
1604.statusbox {
1605 text-align: center;
1606 margin-bottom: 5px;
1607 padding: 5px;
1608}
1609.statusbox .activatebadge {
1610 display: inline-block;
1611}
1612.statusbox .activatebadge input[type=submit]{
1613 margin: 3px;
1614}
1615.activatebadge {
1616 margin: 0px;
1617 text-align: left;
1618 vertical-align: middle;
1619}
1620img#persona_signin {
1621 cursor: pointer;
1622}
1623.addcourse {
1624 float: right;
1625}
1626.invisiblefieldset {
1627 display: inline;
1628 margin: 0;
1629 padding: 0;
1630 border-width: 0;
1631}
1632.breadcrumb-nav {
1633 float: left;
536f0460
DW
1634}
1635.breadcrumb-button .singlebutton div {
1636 margin-right: 0;
1637}
1638.breadcrumb-nav .breadcrumb {
1639 margin: 0;
b71c82ad
FM
1640
1641}
1642/** Navbar */
1643.navbar-brand {
1644 .logo {
1645 display: inline-block;
1646 margin-top: -$navbar-brand-padding-y;
1647 }
1648 .site-name {
1649 display: inline-block;
1650 margin-left: $spacer/2;
1651 }
1652 height: 43px;
1653}
1654
1655/** Page header */
1656#page-header {
1657 .logo {
1658 margin: $spacer 0;
1659 }
536f0460
DW
1660}
1661
5f18da12
FM
1662/** Header. */
1663header {
1664 .collapse.in,
1665 .collapsing {
1666 display: block;
1667 clear: both;
1668 }
1669}
1670
536f0460
DW
1671/** Header-bar styles **/
1672.page-context-header {
1673 // We need to be explicit about the height of the header.
1674 $pageHeaderHeight: 140px;
1675
1676 // Do not remove these rules.
1677 overflow: hidden;
1678
1679 .page-header-image,
1680 .page-header-headings {
1681 display: block;
1682 position: relative;
1683 }
1684 .page-header-image {
1685 float: left;
1686 margin-right: 1em;
1687 margin-bottom: 1em;
1688 }
1689 .page-header-headings {
1690 margin-top: 30px;
1691 margin-bottom: 10px;
1692
1693 h1 {
1694 display: block;
1695 }
1696 }
1697
1698 .page-header-headings,
1699 .header-button-group {
1700 position: relative;
1701 line-height: 24px;
1702 vertical-align: middle;
1703 }
1704
1705 .header-button-group {
1706 display: block;
1707 float: left;
1708 a {
1709 position: relative;
1710
1711 // Don't touch it unless you know exactly what you are doing.
1712 top: -0.4em;
1713 }
1714 }
1715}
1716
536f0460
DW
1717ul.dragdrop-keyboard-drag li {
1718 list-style-type: none;
1719}
1720
1721.block-control-actions .moodle-core-dragdrop-draghandle img {
1722 width: 12px;
1723 height: 12px;
1724}
1725
1726a.disabled:hover,
1727a.disabled {
1728 text-decoration: none;
1729 cursor: default;
1730 font-style: italic;
1731 color: #808080;
1732}
1733body.lockscroll {
1734 height: 100%;
1735 overflow: hidden;
1736}
1737
1738.progressbar_container {
1739 max-width: 500px;
1740 margin: 0 auto;
1741}
1742
1743/* IE10 only fix for calendar titling */
1744.ie10 .yui3-calendar-header-label {
1745 display: inline-block;
1746}
1747
1748dd:before,
1749dd:after {
1750 display: block;
1751 content: " ";
1752}
1753dd:after {
1754 clear: both;
1755}
1756
1757// Active tabs with links should have a different
1758// cursor to indicate they are clickable.
1759.nav-tabs > .active > a[href],
1760.nav-tabs > .active > a[href]:hover,
1761.nav-tabs > .active > a[href]:focus {
1762 cursor: pointer;
1763}
1764
1765.inplaceeditable {
1766
1767 &.inplaceeditingon {
1768 position: relative;
1769
1770 .editinstructions {
1771 margin-top: -30px;
1772 font-weight: normal;
1773 margin-right: 0;
1774 margin-left: 0;
1775 left: 0;
1776 right: auto;
1777 white-space: nowrap;
1778 }
1779
1780 input {
1781 width: 330px;
1782 height: 16px;
1783 vertical-align: text-bottom;
1784 margin-bottom: 0;
1785 }
1786
1787 select {
1788 margin-bottom: 0;
1789 }
1790 }
1791
1792 .quickediticon img {
1793 opacity: 0.2;
1794 }
1795
1796 .quickeditlink {
1797 color: inherit;
1798 text-decoration: inherit;
1799 }
1800
1801 &:hover .quickeditlink .quickediticon img,
1802 .quickeditlink:focus .quickediticon img {
1803 opacity: 1;
1804 }
1805
1806 &.inplaceeditable-toggle .quickediticon {
1807 display: none;
1808 }
1809}
1810
1811h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1812 margin-top: -20px;
1813}
1814// Reset for ul.
1815ul {
1816 padding-left: 1rem;
1817}