theme/noname/scss/moodle/core.scss

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