8579c487d0bd4909bfdb45d38a2a30f9b7803a9a
[moodle.git] / mod / assign / styles.css
1 /* stylelint-disable max-line-length */
2 /* FIXME: MDL-55370: remove this stylelint disable */
3 .path-mod-assign div.gradingnavigation div {
4     float: left;
5     margin-left: 2em;
6 }
8 .path-mod-assign div.submissionstatustable,
9 .path-mod-assign div.submissionfull,
10 .path-mod-assign div.submissionlinks,
11 .path-mod-assign div.usersummary,
12 .path-mod-assign div.feedback,
13 .path-mod-assign div.gradingsummary {
14     margin-bottom: 5em;
15 }
17 .path-mod-assign div.submissionstatus .generaltable,
18 .path-mod-assign div.submissionlinks .generaltable,
19 .path-mod-assign div.feedback .generaltable,
20 .path-mod-assign div.submissionsummarytable .generaltable,
21 .path-mod-assign div.attempthistory table,
22 .path-mod-assign div.gradingsummary .generaltable {
23     width: 100%;
24 }
26 .path-mod-assign table.generaltable table td {
27     border: 0 none;
28 }
30 .path-mod-assign .gradingsummarytable,
31 .path-mod-assign .feedbacktable,
32 .path-mod-assign .lockedsubmission,
33 .path-mod-assign .submissionsummarytable {
34     margin-top: 1em;
35 }
37 .path-mod-assign div.submissionsummarytable table tbody tr td.c0 {
38     width: 30%;
39 }
41 .path-mod-assign .submittedlate {
42     color: red;
43     font-weight: 900;
44 }
46 .path-mod-assign.jsenabled .gradingoptionsform [type=submit] {
47     display: none;
48 }
50 .path-mod-assign.jsenabled .gradingtable .c1 select {
51     display: none;
52 }
54 .path-mod-assign .quickgradingform .mform fieldset {
55     margin: 0;
56     padding: 0;
57 }
59 .path-mod-assign textarea.quickgrade {
60     resize: both;
61 }
63 .path-mod-assign td.submissionstatus,
64 .path-mod-assign div.submissionstatus,
65 .path-mod-assign a:link.submissionstatus {
66     color: black;
67     background-color: #efefef;
68 }
70 .path-mod-assign td.submissionstatusdraft,
71 .path-mod-assign div.submissionstatusdraft,
72 .path-mod-assign a:link.submissionstatusdraft {
73     color: black;
74     background-color: #efefcf;
75 }
77 .path-mod-assign td.submissionstatussubmitted,
78 .path-mod-assign div.submissionstatussubmitted,
79 .path-mod-assign a:link.submissionstatussubmitted {
80     color: black;
81     background-color: #cfefcf;
82 }
84 .path-mod-assign td.submissionlocked,
85 .path-mod-assign div.submissionlocked {
86     color: black;
87     background-color: #efefcf;
88 }
90 .path-mod-assign td.submissionreopened,
91 .path-mod-assign div.submissionreopened {
92     color: black;
93     background-color: #efefef;
94 }
96 .path-mod-assign td.submissiongraded,
97 .path-mod-assign div.submissiongraded {
98     color: black;
99     background-color: #cfefcf;
102 .path-mod-assign td.submissionnotgraded,
103 .path-mod-assign div.submissionnotgraded {
104     color: black;
105     background-color: #efefef;
108 .path-mod-assign td.latesubmission,
109 .path-mod-assign a:link.latesubmission,
110 .path-mod-assign div.latesubmission {
111     color: black;
112     background-color: #efcfcf;
115 .path-mod-assign td.earlysubmission,
116 .path-mod-assign div.earlysubmission {
117     color: black;
118     background-color: #cfefcf;
121 .path-mod-assign .gradingtable .c0 {
122     display: none;
125 .path-mod-assign.jsenabled .gradingtable .c0 {
126     display: table-cell;
129 .path-mod-assign .gradingbatchoperationsform {
130     display: none;
133 .path-mod-assign.jsenabled .gradingbatchoperationsform {
134     display: block;
137 .path-mod-assign .gradingtable tr.selectedrow td {
138     background-color: #fec;
141 .path-mod-assign .gradingtable tr.unselectedrow td {
142     background-color: white;
145 .path-mod-assign .gradingtable .c0 div.selectall {
146     margin-left: 7px;
149 .path-mod-assign .gradingtable .yui3-menu ul {
150     margin: 0;
153 .path-mod-assign .gradingtable .yui3-menu-label {
154     padding-left: 0;
155     line-height: 12px;
158 .path-mod-assign .gradingtable .yui3-menu-label img {
159     padding: 0 3px;
162 .path-mod-assign .gradingtable .yui3-menu li {
163     list-style-type: none;
166 .path-mod-assign.jsenabled .gradingtable .yui3-loading {
167     display: none;
170 .path-mod-assign .gradingtable .yui3-menu .yui3-menu-content {
171     border: 0;
172     padding-top: 0;
175 .path-mod-assign div.gradingtable tr .quickgrademodified {
176     background-color: #fc9;
179 .path-mod-assign td.submissioneditable {
180     color: red;
183 .path-mod-assign .expandsummaryicon {
184     cursor: pointer;
185     display: none;
188 .path-mod-assign.jsenabled .expandsummaryicon {
189     display: inline;
192 .path-mod-assign .hidefull {
193     display: none;
196 .path-mod-assign .quickgradingform form .commentscontainer input,
197 .path-mod-assign .quickgradingform form .commentscontainer textarea {
198     display: none;
201 .path-mod-assign.jsenabled .quickgradingform form .commentscontainer input,
202 .path-mod-assign.jsenabled .quickgradingform form .commentscontainer textarea {
203     display: inline;
206 .path-mod-assign .previousfeedbackwarning {
207     font-size: 140%;
208     font-weight: bold;
209     text-align: center;
210     color: #500;
213 .path-mod-assign .submissionhistory {
214     background-color: #b0b0b0;
217 .path-mod-assign .submissionhistory .cell.historytitle {
218     background-color: #808080;
221 .path-mod-assign .submissionhistory .cell {
222     background-color: #d0d0d0;
225 .path-mod-assign.jsenabled .mod-assign-history-link {
226     display: block;
227     cursor: pointer;
228     margin-bottom: 7px;
231 .path-mod-assign.jsenabled .mod-assign-history-link h4 {
232     display: inline;
235 .path-mod-assign.jsenabled .attempthistory h4 {
236     margin-bottom: 7px;
237     text-align: left;
240 .path-mod-assign.jsenabled.dir_rtl .attempthistory h4 {
241     text-align: right;
244 .path-mod-assign.jsenabled .mod-assign-history-link-open {
245     padding: 0 5px 0 20px;
246     background: url([[pix:t/expanded]]) 2px center no-repeat;
249 .path-mod-assign.jsenabled .mod-assign-history-link-closed {
250     padding: 0 5px 0 20px;
251     background: url([[pix:t/collapsed]]) 2px center no-repeat;
254 /*rtl:raw:
255 .path-mod-assign.jsenabled .mod-assign-history-link-closed {
256     background-image: url([[pix:t/collapsed_rtl]]);
258 */
260 .path-mod-assign .submithelp {
261     padding: 1em;
264 .path-mod-assign .feedbacktitle {
265     font-weight: bold;
268 .path-mod-assign .submitconfirm,
269 .path-mod-assign .submissionlinks,
270 .path-mod-assign .submissionaction {
271     text-align: center;
274 .path-mod-assign .submissionsummarytable .c0,
275 .path-mod-assign .mod-assign-history-panel .c0 {
276     width: 150px;
279 .path-mod-assign .gradingtable .moodle-actionmenu {
280     white-space: nowrap;
283 .path-mod-assign .gradingtable .moodle-actionmenu[data-enhanced].show .menu a {
284     padding-left: 12px;
285     padding-right: 12px;
288 .path-mod-assign .gradingtable .menu-action img {
289     display: none;
292 .path-mod-assign .editsubmissionform input[name="submissionstatement"] {
293     vertical-align: top;
296 .path-mod-assign .editsubmissionform label[for="id_submissionstatement"] {
297     display: inline-block;
300 .path-mod-assign.layout-option-nonavbar {
301     padding-top: 0;
304 .path-mod-assign [data-region="user-selector"] select {
305     margin-bottom: 0;
308 .path-mod-assign [data-region="user-selector"] .alignment {
309     float: right;
310     width: 320px;
311     text-align: center;
312     margin-top: 7px;
315 .path-mod-assign [data-region="user-selector"] [data-action="previous-user"],
316 .path-mod-assign [data-region="user-selector"] [data-action="next-user"] {
317     font-size: 26px;
320 .path-mod-assign [data-region="user-selector"] [data-action="next-user"] {
321     margin-left: -10px;
324 .path-mod-assign [data-region="user-selector"] .alignment input {
325     margin-bottom: 5px;
328 .path-mod-assign [data-region="user-selector"] .alignment .form-autocomplete-downarrow {
329     top: 0;
332 .path-mod-assign [data-region="user-selector"] .form-autocomplete-selection {
333     display: none;
336 .path-mod-assign [data-region="user-selector"] .form-autocomplete-suggestions {
337     text-align: left;
340 .path-mod-assign [data-region="user-selector"] .form-autocomplete-suggestions {
341     margin-left: 48px;
344 .path-mod-assign [data-region="user-filters"] {
345     font-size: small;
348 .path-mod-assign [data-region="configure-filters"] {
349     display: none;
350     text-align: left;
351     width: auto;
352     background-color: #fff;
353     background-clip: padding-box;
354     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
355     border-radius: 6px;
356     position: absolute;
357     margin-top: 28px;
358     margin-left: -140px;
359     padding: 10px 0;
360     z-index: 1;
363 .path-mod-assign [data-region="configure-filters"]::before,
364 .path-mod-assign [data-region="configure-filters"]::after {
365     position: absolute;
366     left: auto;
367     display: inline-block;
368     content: '';
369     border-style: solid;
370     border-color: transparent;
371     border-top: none;
374 .path-mod-assign [data-region="configure-filters"]::before {
375     top: -7px;
376     right: 12px;
377     border-width: 7px;
378     border-bottom-color: rgba(0, 0, 0, 0.2);
381 .path-mod-assign [data-region="configure-filters"]::after {
382     top: -6px;
383     right: 13px;
384     border-width: 6px;
385     border-bottom-color: #fff;
388 .path-mod-assign [data-region="configure-filters"] label {
389     display: block;
390     padding: 3px 20px;
393 .path-mod-assign .alignment [data-region="configure-filters"] input {
394     margin-bottom: 0;
397 .path-mod-assign [data-region="grading-navigation-panel"] {
398     position: absolute;
399     top: 0;
400     left: 0;
401     width: 100%;
402     height: 6em;
403     margin: 0;
404     border-bottom: 1px solid #ddd;
407 .path-mod-assign [data-region="grading-navigation"] {
408     padding: 1em;
410 .path-mod-assign [data-region="assignment-info"] {
411     white-space: nowrap;
412     overflow-x: hidden;
413     text-overflow: ellipsis;
415 .path-mod-assign [data-region="assignment-info"] small[data-region="assignment-tooltip"] {
416     margin-left: 0.5em;
419 .path-mod-assign [data-region="user-info"] {
420     height: 60px;
423 .path-mod-assign [data-region="user-info"] a {
424     text-decoration: none;
427 .path-mod-assign [data-region="user-info"] .img-rounded {
428     display: block;
429     float: left;
430     margin-top: -3px;
431     margin-right: 10px;
434 .path-mod-assign [data-region="user-info"] em {
435     display: block;
436     font-style: normal;
439 .path-mod-assign [data-region="user-info"] em.nowrap {
440     white-space: nowrap;
441     overflow: hidden;
442     text-overflow: ellipsis;
445 .path-mod-assign [data-region="grading-actions-form"] label {
446     display: inline-block;
449 .path-mod-assign.pagelayout-embedded {
450     overflow: hidden;
453 .path-mod-assign [data-region="review-panel"] {
454     position: absolute;
455     top: 85px;
456     bottom: 60px;
457     left: 0;
458     right: 30%;
459     width: auto;
460     box-sizing: border-box;
461     -webkit-transition: right 0.5s, left 0.5s;
462     -moz-transition: right 0.5s, left 0.5s;
463     transition: right 0.5s, left 0.5s;
466 .path-mod-assign [data-region="review-panel"].grade-panel-collapsed {
467     right: 30px;
470 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] {
471     display: none;
472     height: 30px;
473     width: 30px;
474     position: absolute;
475     top: 0;
476     right: 0;
477     left: auto;
478     box-sizing: border-box;
479     border-radius: 0 0 0 4px;
480     border: 1px solid #ccc;
481     border-top: none;
482     background-color: #fff;
483     z-index: 99999;
486 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon,
487 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
488     width: 100%;
489     height: 100%;
490     text-align: center;
491     line-height: 30px;
494 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .toggle-text,
495 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon .toggle-text {
496     visibility: hidden;
497     opacity: 0;
498     height: 0;
499     overflow: hidden;
502 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] img {
503     height: 100%;
504     float: right;
507 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon {
508     display: none;
511 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
512     display: block;
515 .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon.full-width {
516     display: none;
519 .path-mod-assign [data-region="review-panel"] .pageheader {
520     border-right: 1px solid #ddd;
523 .path-mod-assign [data-region="review-panel"] + [data-region="grade-panel"] [data-region="grade"] {
524     margin-left: auto;
525     margin-right: auto;
526     max-width: 100%;
527     -webkit-transition: max-width 0.5s;
528     -moz-transition: max-width 0.5s;
529     transition: max-width 0.5s;
532 .path-mod-assign [data-region="review-panel"] .drawingregion {
533     left: 0;
534     right: 0;
535     border-color: #ddd;
538 .path-mod-assign [data-region="review-panel"].collapsed {
539     left: calc(30px - 70%);
540     right: calc(100% - 30px);
541     -webkit-transition: right 0.5s, left 0.5s;
542     -moz-transition: right 0.5s, left 0.5s;
543     transition: right 0.5s, left 0.5s;
546 .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-content"] {
547     visibility: hidden;
548     -webkit-transition: visibility 0s 0.5s;
549     -moz-transition: visibility 0s 0.5s;
550     transition: visibility 0s 0.5s;
553 .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .expand-icon {
554     display: block;
557 .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .collapse-icon {
558     display: none;
561 .path-mod-assign [data-region="review-panel"].collapsed + [data-region="grade-panel"] {
562     position: absolute;
563     left: 30px;
564     right: 0;
565     width: calc(100% - 30px);
566     overflow: auto;
567     -webkit-transition: width 0.5s, right 0.5s, left 0.5s;
568     -moz-transition: width 0.5s, right 0.5s, left 0.5s;
569     transition: width 0.5s, right 0.5s, left 0.5s;
572 .path-mod-assign [data-region="review-panel"].collapsed + [data-region="grade-panel"] [data-region="grade"],
573 .path-mod-assign [data-region="grade-panel"].fullwidth [data-region="grade"] {
574     max-width: 800px;
575     margin-left: auto;
576     margin-right: auto;
579 .path-mod-assign [data-region="grade-panel"] {
580     position: absolute;
581     top: 85px;
582     bottom: 60px;
583     right: 0;
584     left: 70%;
585     width: 30%;
586     overflow: auto;
587     box-sizing: border-box;
588     background-color: #f5f5f5;
589     padding: 15px;
590     padding-top: 0;
591     -webkit-transition: width 0.5s, right 0.5s, left 0.5s;
592     -moz-transition: width 0.5s, right 0.5s, left 0.5s;
593     transition: width 0.5s, right 0.5s, left 0.5s;
596 .path-mod-assign [data-region="grade-panel"].collapsed {
597     left: calc(100% - 30px);
598     right: calc(30px - 100%);
599     visibility: hidden;
600     -webkit-transition: right 0.5s, left 0.5s, visibility 0s 0.5s;
601     -moz-transition: right 0.5s, left 0.5s, visibility 0s 0.5s;
602     transition: right 0.5s, left 0.5s, visibility 0s 0.5s;
605 .path-mod-assign [data-region="grade-panel"].fullwidth {
606     left: 0;
607     width: 100%;
608     overflow: auto;
611 .path-mod-assign [data-region="grade-panel"] h3 {
612     font-size: 18px;
613     font-weight: 500;
616 /***** Start submission status *****/
618 .path-mod-assign [data-region="grade-panel"] div.submissionstatustable {
619     margin-bottom: 2em;
622 .path-mod-assign [data-region="grade-panel"] .submissionsummarytable {
623     margin-left: 5px;
624     margin-right: 5px;
627 .path-mod-assign [data-region="grade-panel"] .submissionsummarytable table.generaltable td {
628     padding: 8px 0;
629     background-color: transparent;
632 .path-mod-assign [data-region="grade-panel"] .submissionsummarytable .generaltable tbody > tr:nth-child(2n+1) > td,
633 .path-mod-assign [data-region="grade-panel"] .submissionsummarytable .generaltable tbody tr:hover > td {
634     background-color: transparent;
637 .path-mod-assign [data-region="grade-panel"] div.submissionsummarytable table tbody tr td.c0 {
638     width: auto;
641 .path-mod-assign [data-region="grade-panel"] div.submissionsummarytable table tbody tr.lastrow td.c0,
642 .path-mod-assign [data-region="grade-panel"] div.submissionsummarytable table tbody tr.lastrow td.c1 {
643     border-bottom: 1px solid #ddd;
646 .path-mod-assign [data-region="grade-panel"] td.submissionnotgraded,
647 .path-mod-assign [data-region="grade-panel"] div.submissionnotgraded {
648     color: red;
649     background-color: transparent;
652 .path-mod-assign div.fileuploadsubmission {
653     float: left;
654     min-width: 300px;
657 .path-mod-assign div.fileuploadsubmissiontime {
658     float: right;
661 /***** End submission status *****/
663 .path-mod-assign [data-region="grade-panel"] #id_gradeheader {
664     display: table-cell;
665     min-width: 0;
668 .path-mod-assign [data-region="grade-panel"] #id_gradeheader > legend {
669     visibility: hidden;
670     height: 0;
671     margin-bottom: 0;
674 .path-mod-assign [data-region="grade-panel"] .comment-area textarea[cols] {
675     width: 100%;
676     box-sizing: border-box;
679 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_ftext,
680 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_f,
681 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_feditor,
682 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_fgrading,
683 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_ffilemanager {
684     background-color: #fff;
685     border: 1px solid #ddd;
686     margin-bottom: 20px;
689 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_ftext .fitemtitle,
690 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_f .fitemtitle,
691 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_feditor .fitemtitle,
692 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_fgrading .fitemtitle,
693 .path-mod-assign [data-region="grade-panel"] .mform .fitem.fitem_ffilemanager .fitemtitle {
694     padding-left: 5px;
695     padding-right: 5px;
698 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.fitem_ftext .felement,
699 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.fitem_f .felement,
700 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.fitem_feditor .felement,
701 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.fitem_fgrading .felement,
702 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.fitem_ffilemanager .felement {
703     padding: 6px 10px 10px;
704     box-sizing: border-box;
707 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.fitem_ftext .fitemtitle,
708 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.fitem_f .fitemtitle,
709 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.fitem_feditor .fitemtitle,
710 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.fitem_fgrading .fitemtitle,
711 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.fitem_ffilemanager .fitemtitle {
712     border-bottom: 1px solid #ddd;
713     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
714     padding: 6px 10px 3px;
715     box-sizing: border-box;
718 .path-mod-assign #page-content [data-region="grade-panel"] [data-region="popout-button"] img {
719     margin-left: 2px;
720     margin-right: 2px;
721     margin-top: -2px;
724 .path-mod-assign #page-content [data-region="grade-panel"] .popout [data-region="popout-button"] img {
725     margin-left: -6px;
726     margin-right: -6px;
727     margin-top: 4px;
730 .path-mod-assign [data-region="grade-panel"] .fitem .fstaticlabel,
731 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem .fitemtitle label {
732     font-weight: 500;
735 /***** Start grade *****/
737 .path-mod-assign [data-region="grade-panel"] .mform #fitem_id_grade.fitem {
738     padding-top: 5px;
741 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) #fitem_id_grade.fitem .fitemtitle {
742     display: inline-block;
743     width: auto;
744     border-bottom: none;
745     box-shadow: none;
748 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) #fitem_id_grade.fitem .felement {
749     width: auto;
750     float: right;
753 .path-mod-assign #page-content .mform:not(.unresponsive) #fitem_id_grade.fitem .felement input {
754     width: 80px;
755     margin-bottom: 0;
758 /***** End grade *****/
760 /***** Start rubric *****/
762 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric {
763     padding-bottom: 0;
764     max-width: none;
767 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .description {
768     font-weight: 500;
769     min-width: 150px;
772 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .levels {
773     background-color: #fff;
776 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion,
777 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion.even {
778     background-color: transparent;
781 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric.evaluate .criterion .levels .level:hover {
782     background-color: #dff0d8;
785 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .levels .level.checked {
786     background-color: #dff0d8;
787     border: none;
788     border-left: 1px solid #ddd;
791 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .levels .level .score {
792     color: #468847;
793     font-weight: 500;
794     font-style: normal;
795     margin-top: 20px;
798 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .remark textarea {
799     margin-bottom: 0;
802 /***** End rubric *****/
804 /***** Start marking guide *****/
806 .path-mod-assign [data-region="grade-panel"] .gradingform_guide {
807     margin-bottom: 10px;
810 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .descriptionreadonly,
811 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark,
812 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .score {
813     display: block;
816 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .descriptionreadonly {
817     padding-top: 10px;
820 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .criteriondescription {
821     margin-top: 5px;
824 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .criteriondescriptionmarkers {
825     width: auto;
826     margin-top: 5px;
829 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
830     margin-bottom: 10px;
833 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
834     float: right;
835     margin-top: 2px;
836     margin-left: 0;
839 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .score {
840     float: left;
841     padding-bottom: 8px;
844 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .score input,
845 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .score div {
846     display: inline-block;
849 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .criterion,
850 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .criterion.even {
851     background-color: transparent;
852     border-width: 0 0 1px 0;
853     padding: 8px 0;
856 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
857 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
858     background-color: #f5f5f5;
859     padding: 10px;
862 /***** End marking guide *****/
864 .path-mod-assign [data-region="grade-panel"] .fitem.fitem_ffilemanager {
865     margin-bottom: 0;
868 /***** Start popout dialogue *****/
870 .path-mod-assign [data-region="grade-panel"] .fitem.popout {
871     position: fixed;
872     left: 20%;
873     right: 20%;
874     top: 20%;
875     bottom: 20%;
876     z-index: 1000;
877     border: 1px solid rgba(0, 0, 0, 0.3);
878     border-radius: 6px;
879     box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
882 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .fitemtitle {
883     text-align: center;
884     padding-left: 15px;
885     padding-right: 15px;
886     height: 45px;
889 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .fitemtitle label {
890     font-size: 16px;
891     line-height: 30px;
894 .path-mod-assign #page-content [data-region="grade-panel"] [data-region="popout-button"] {
895     float: right;
898 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fitem.popout .fitemtitle [data-region="popout-button"] img {
899     margin-top: -10px;
900     margin-right: -7px;
903 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
904     padding: 10px 15px 15px;
905     height: calc(100% - 54px);
906     overflow: auto;
909 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement .gradingform_rubric {
910     overflow: visible;
913 /***** End popout dialogue *****/
915 /***** Start attempt settings *****/
917 .path-mod-assign [data-region="grade-panel"] #id_attemptsettings > legend {
918     font-size: 18px;
919     font-weight: 500;
920     line-height: 40px;
921     border-bottom: 0;
922     margin-bottom: 10px;
925 .path-mod-assign [data-region="grade-panel"] #id_attemptsettings .fcontainer {
926     display: table;
927     width: 100%;
928     padding-left: 5px;
929     padding-right: 5px;
930     margin-bottom: 10px;
931     box-sizing: border-box;
934 .path-mod-assign [data-region="grade-panel"] .mform #id_attemptsettings .fitem {
935     display: table-row;
938 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) #id_attemptsettings .fitem:last-of-type .fitemtitle,
939 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) #id_attemptsettings .fitem:last-of-type .felement {
940     border-bottom: 1px solid #ddd;
943 .path-mod-assign [data-region="grade-panel"] #id_attemptsettings .fitem .fstaticlabel,
944 .path-mod-assign [data-region="grade-panel"] .mform:not(.unresponsive) #id_attemptsettings .fitem .fitemtitle label {
945     font-weight: 400;
948 .path-mod-assign [data-region="grade-panel"] .mform:not(.unresponsive) #id_attemptsettings .fitem .felement select {
949     margin-bottom: 0;
952 .path-mod-assign [data-region="grade-panel"] [data-region="attempt-chooser"] {
953     margin-bottom: 10px;
954     vertical-align: text-bottom;
957 /***** End attempt settings *****/
959 .path-mod-assign [data-region="grade-actions-panel"] {
960     border-top: 1px solid #ddd;
961     position: absolute;
962     bottom: 0;
963     left: 0;
964     width: 100%;
965     height: 60px;
968 /*rtl:ignore*/
969 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
970     position: absolute;
971     top: 0;
972     left: auto;
973     right: 15px;
974     margin: 0;
975     height: 100%;
976     line-height: 60px;
979 .path-mod-assign [data-region="grade-actions"] {
980     padding: 1em;
981     text-align: center;
984 .path-mod-assign [data-region="submissions-list"] {
985     text-align: inherit;
988 .path-mod-assign [data-region="submissions-list"] label.radio input {
989     margin-top: 4px;
990     min-width: inherit;
993 .path-mod-assign [data-region="overlay"] {
994     display: none;
995     z-index: 100;
996     position: absolute;
997     top: 0;
998     left: 0;
999     width: 100%;
1000     overflow: auto;
1001     bottom: 0;
1002     background-color: #ddd;
1003     opacity: 0.4;
1004     padding-top: 4em;
1005     text-align: center;
1008 @media (max-width: 767px) {
1009     .path-mod-assign.pagelayout-embedded {
1010         overflow: auto;
1011     }
1013     .path-mod-assign [data-region="assignment-info"] {
1014         border-bottom: 1px solid #ddd;
1015         padding-bottom: 5px;
1016     }
1018     .path-mod-assign .page-context-header .page-header-headings {
1019         margin-top: 13px;
1020     }
1022     .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1023         display: none;
1024     }
1026     .path-mod-assign [data-region="grading-navigation-panel"],
1027     .path-mod-assign [data-region="review-panel"],
1028     .path-mod-assign [data-region="grade-panel"],
1029     .path-mod-assign [data-region="review-panel"].collapsed + [data-region="grade-panel"],
1030     .path-mod-assign [data-region="grade-actions-panel"] {
1031         position: inherit;
1032         width: 100%;
1033         top: 0;
1034         left: 0;
1035         right: auto;
1036         overflow: auto;
1037         height: auto;
1038         margin-bottom: 1em;
1039     }
1041     .path-mod-assign [data-region="grade-panel"].collapsed {
1042         visibility: visible;
1043     }
1045     .path-mod-assign [data-region="grading-navigation"] {
1046         padding: 0;
1047         text-align: center;
1048     }
1050     .path-mod-assign [data-region="grade-panel"] {
1051         margin-bottom: 2em;
1052     }
1054     .path-mod-assign [data-region="grade-panel"] [data-region="popout-button"] {
1055         display: none;
1056     }
1058     .path-mod-assign [data-region="review-panel"] {
1059         position: relative;
1060         max-height: 2000px;
1061         -webkit-transition: max-height 0.25s linear;
1062         -moz-transition: max-height 0.25s linear;
1063         transition: max-height 0.25s linear;
1064     }
1066     .path-mod-assign [data-region="review-panel"] .pageheader {
1067         border-right: none;
1068         padding-right: 20px;
1069         padding-left: 40px;
1070     }
1072     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] {
1073         display: block;
1074         height: 20px;
1075         width: 20px;
1076         position: absolute;
1077         top: 0;
1078         left: 0;
1079         right: auto;
1080         box-sizing: border-box;
1081         border: 1px solid #ccc;
1082         border-radius: 0 0 4px 0;
1083         background-color: #fff;
1084         z-index: 99999;
1085     }
1087     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon,
1088     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
1089         width: 100%;
1090         height: 100%;
1091         text-align: center;
1092         line-height: 30px;
1093     }
1095     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .ltr-icon,
1096     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .rtl-icon {
1097         height: 100%;
1098     }
1100     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .ltr-icon {
1101         float: left;
1102     }
1104     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .rtl-icon {
1105         float: right;
1106     }
1108     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .toggle-text,
1109     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon .toggle-text {
1110         line-height: 20px;
1111         visibility: visible;
1112         opacity: 1;
1113         height: auto;
1114         -webkit-transition: visibility 0s 0.25s, opacity 0s 0.25s;
1115         -moz-transition: visibility 0s 0.25s, opacity 0s 0.25s;
1116         transition: visibility 0s 0.25s, opacity 0s 0.25s;
1117     }
1119     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .rtl-icon {
1120         display: none;
1121     }
1123     .path-mod-assign [data-region="review-panel"].collapsed {
1124         max-height: 20px;
1125         top: 0;
1126         left: 0;
1127         overflow: hidden;
1128         -webkit-transition: max-height 0.25s linear;
1129         -moz-transition: max-height 0.25s linear;
1130         transition: max-height 0.25s linear;
1131     }
1133     .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] {
1134         width: 100%;
1135         border-radius: 0 0 0 0;
1136         -webkit-transition: all 0s 0.25s;
1137         -moz-transition: all 0s 0.25s;
1138         transition: all 0s 0.25s;
1139     }
1141     .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] img {
1142         height: 100%;
1143     }
1145     .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
1146         display: block;
1147     }
1149     .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .collapse-icon {
1150         display: none;
1151     }
1153     .path-mod-assign.pagelayout-popup {
1154         overflow: inherit;
1155     }
1157     .path-mod-assign [data-region="grading-navigation"] [data-region="user-info"] {
1158         text-align: left;
1159         width: auto;
1160         display: inline-block;
1161         margin: 0 auto;
1162     }
1164     .path-mod-assign [data-region="user-selector"] .alignment {
1165         float: none;
1166         margin: 0 auto 10px;
1167     }
1170 /** Start of CSS to make forms vertical in the grading panel (taken from theme/bootstrapbase/less/moodle/forms.less). */
1172 .path-mod-assign [data-region="grade-panel"] .mform .fitem .fitemtitle {
1173     display: block;
1174     margin-top: 4px;
1175     margin-bottom: 4px;
1176     text-align: left;
1177     width: 100%;
1180 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1181     margin-left: 0;
1182     width: 100%;
1183     float: left;
1184     padding-left: 0;
1185     padding-right: 0;
1188 .path-mod-assign [data-region="grade-panel"] .mform .fitem .fstatic:empty {
1189     display: none;
1192 .path-mod-assign [data-region="grade-panel"] .mform .fitem .fcheckbox > span,
1193 .path-mod-assign [data-region="grade-panel"] .mform .fitem .fradio > span,
1194 .path-mod-assign [data-region="grade-panel"] .mform .fitem .fgroup > span {
1195     margin-top: 4px;
1198 .path-mod-assign [data-region="grade-panel"] .mform .femptylabel .fitemtitle {
1199     display: inline-block;
1200     width: auto;
1201     margin-right: 8px;
1204 .path-mod-assign [data-region="grade-panel"] .mform .femptylabel .felement {
1205     display: inline-block;
1206     margin-top: 4px;
1207     padding-top: 5px;
1208     width: auto;
1211 .path-mod-assign [data-region="grade-panel"] .mform .fitem_fcheckbox .fitemtitle,
1212 .path-mod-assign [data-region="grade-panel"] .mform .fitem_fcheckbox .felement {
1213     display: inline-block;
1214     width: auto;
1217 .path-mod-assign [data-region="grade-panel"] .mform .fitem_fcheckbox .felement {
1218     padding: 6px;
1221 /** End of CSS to make forms vertical in the grading panel (taken from theme/bootstrapbase/less/moodle/forms.less). */
1223 /** Styles to fix base theme **/
1224 .path-mod-assign #page,
1225 .path-mod-assign #page-content {
1226     position: inherit;
1228 /** End of base fixes **/
1230 /** Fix to YUI tree (which is a table) when displayed within grading table. **/
1231 .path-mod-assign table.generaltable table td.ygtvcell {
1232     border: 0;
1233     padding: 0;
1235 /** End of YUI tree fix **/