MDL-74812 gradingform_rubric: Fix contrast issues in rubric table

* Darken the score value using the green theme colour
* Use a light green theme colour for selection backgrounds
* Unify rubric styles related to background and text colour within the
  criteria.

grade/grading/form/rubric/styles.css

@@ -135,23 +135,6 @@
     color: #aaa;
 }
 
-.gradingform_rubric.editor .criterion .levels .level .delete {
-    position: absolute;
-    right: 0;
-}
-
-.gradingform_rubric .criterion .levels .level .score {
-    font-style: italic;
-    color: #575;
-    font-weight: bold;
-    margin-top: 5px;
-    white-space: nowrap;
-}
-
-.gradingform_rubric .criterion .levels .level .score .scorevalue {
-    padding-right: 5px;
-}
-
 /* Make invisible the buttons 'Move up' for the first criterion and
    'Move down' for the last, because those buttons will make no change */
 .gradingform_rubric.editor .criterion.first .controls .moveup input,
@@ -159,20 +142,6 @@
     display: none;
 }
 
-/* evaluation */
-.gradingform_rubric .criterion .levels .level.currentchecked {
-    background: #fff0f0;
-}
-
-.gradingform_rubric .criterion .levels .level.checked {
-    background: #d0ffd0;
-    border: 1px solid #555;
-}
-
-.gradingform_rubric.evaluate .criterion .levels .level:hover {
-    background: #30ff30;
-}
-
 /* replace buttons with images */
 .gradingform_rubric.editor .delete input,
 .gradingform_rubric.editor .duplicate input,

mod/assign/styles.css

@@ -782,23 +782,6 @@
     background-color: transparent;
 }
 
-.path-mod-assign [data-region="grade-panel"] .gradingform_rubric.evaluate .criterion .levels .level:hover {
-    background-color: #dff0d8;
-}
-
-.path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .levels .level.checked {
-    background-color: #dff0d8;
-    border: none;
-    border-left: 1px solid #ddd;
-}
-
-.path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .levels .level .score {
-    color: #468847;
-    font-weight: 500;
-    font-style: normal;
-    margin-top: 20px;
-}
-
 .path-mod-assign [data-region="grade-panel"] .gradingform_rubric .criterion .remark textarea {
     margin-bottom: 0;
 }

theme/boost/scss/moodle/grade.scss

@@ -106,134 +106,158 @@
     }
 }
 
-#rubric-rubric {
-    &.gradingform_rubric {
-        #rubric-criteria {
-            margin-bottom: 1em;
-            $rubricPadding: 6px;
+.gradingform_rubric {
+    margin-bottom: 1em;
+    $rubricPadding: 6px;
 
-            .criterion {
-                .description {
-                    vertical-align: top;
-                    padding: $rubricPadding;
+    // When doing evaluation on the rubrics table.
+    &.evaluate .criterion .levels .level {
+        &:hover,
+        &.checked {
+            background: #dff0d8;
+        }
+        &.checked {
+            border: none;
+            border-left: 1px solid $border-color;
+        }
+    }
 
-                    textarea {
-                        margin-bottom: 0;
-                        height: 115px;
-                    }
-                }
+    .criterion {
+        .description {
+            vertical-align: top;
+            padding: $rubricPadding;
 
-                .definition {
-                    textarea {
-                        width: 80%;
-                        margin-bottom: 0;
-                    }
-                }
-
-                .score {
-                    position: relative;
-                    float: left;
-                    margin-right: 28px;
-
-                    input {
-                        margin-bottom: 0;
-                    }
-                }
-
-                .level {
-                    vertical-align: top;
-                    padding: $rubricPadding;
-
-                    .delete {
-                        position: relative;
-                        width: 32px;
-                        height: 32px;
-                        margin-top: -32px;
-                        clear: both;
-                        float: right;
-
-                        input {
-                            display: block;
-                            position: absolute;
-                            right: 0;
-                            bottom: 0;
-                            height: 24px;
-                            width: 24px;
-                            margin: 0;
-
-                            &:hover {
-                                background-color: #ddd;
-                            }
-                        }
-                    }
-                }
-
-                .scorevalue {
-                    input {
-                        // Should handle at least three chars with room to spare.
-                        float: none;
-                        width: 2em;
-
-                        &.hiddenelement,
-                        &.pseudotablink {
-                            // Zero out the width if it's still in the block flow for some reason
-                            // when hidden
-                            width: 0;
-                        }
-                    }
-                }
-
-                .addlevel {
-                    vertical-align: top;
-                    padding-top: 6px;
-
-                    input {
-                        height: 30px;
-                        line-height: 1rem;
-                    }
-                }
+            textarea {
+                margin-bottom: 0;
+                height: 115px;
             }
         }
 
-        .addcriterion {
-            margin-left: 5px;
-            padding: 0;
+        .definition {
+            textarea {
+                width: 80%;
+                margin-bottom: 0;
+            }
+        }
+
+        .score {
+            position: relative;
+            float: left;
+            margin-top: 5px;
+            margin-right: 28px;
+            font-style: italic;
+            font-weight: bold;
+            color: #{theme-color-level('success', 2)};
+            white-space: nowrap;
 
             input {
-                margin: 0;
-                color: inherit;
-                text-shadow: inherit;
-                border: 0 none;
-                line-height: inherit;
-                background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
-                padding-left: 26px;
+                margin-bottom: 0;
             }
-            margin-bottom: 1em;
         }
 
-        .options {
-            clear: both;
+        .level {
+            vertical-align: top;
+            padding: $rubricPadding;
 
-            .option {
-                label {
-                    margin: 0;
-                    padding: 0;
-                    font-size: inherit;
-                    font-weight: normal;
-                    line-height: 2em;
-                    color: inherit;
-                    text-shadow: none;
-                    background-color: transparent;
-                }
+            &.currentchecked {
+                background: #fff0f0;
+            }
+
+            &.checked {
+                background: #d0ffd0;
+                border: 1px solid #555;
+            }
+
+            .delete {
+                position: relative;
+                width: 32px;
+                height: 32px;
+                margin-top: -32px;
+                clear: both;
+                float: right;
 
                 input {
-                    margin-left: 5px;
-                    margin-right: 12px;
+                    display: block;
+                    position: absolute;
+                    right: 0;
+                    bottom: 0;
+                    height: 24px;
+                    width: 24px;
+                    margin: 0;
+
+                    &:hover {
+                        background-color: #ddd;
+                    }
                 }
             }
         }
+
+        .scorevalue {
+            padding-right: 5px;
+            input {
+                // Should handle at least three chars with room to spare.
+                float: none;
+                width: 2em;
+
+                &.hiddenelement,
+                &.pseudotablink {
+                    // Zero out the width if it's still in the block flow for some reason
+                    // when hidden
+                    width: 0;
+                }
+            }
+        }
+
+        .addlevel {
+            vertical-align: top;
+            padding-top: 6px;
+
+            input {
+                height: 30px;
+                line-height: 1rem;
+            }
+        }
+    }
+
+    .addcriterion {
+        margin-left: 5px;
+        padding: 0;
+
+        input {
+            margin: 0;
+            color: inherit;
+            text-shadow: inherit;
+            border: 0 none;
+            line-height: inherit;
+            background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
+            padding-left: 26px;
+        }
+        margin-bottom: 1em;
+    }
+
+    .options {
+        clear: both;
+
+        .option {
+            label {
+                margin: 0;
+                padding: 0;
+                font-size: inherit;
+                font-weight: normal;
+                line-height: 2em;
+                color: inherit;
+                text-shadow: none;
+                background-color: transparent;
+            }
+
+            input {
+                margin-left: 5px;
+                margin-right: 12px;
+            }
+        }
     }
 }
+
 .grade-display {
     .description {
         font-size: 1rem;

theme/boost/style/moodle.css

@@ -19370,34 +19370,49 @@ p.arrow_button {
 #page-grade-grading-form-rubric-edit .gradingform_rubric_editform .status {
   font-size: 70%; }
 
-#rubric-rubric.gradingform_rubric #rubric-criteria {
+.gradingform_rubric {
   margin-bottom: 1em; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .description {
+  .gradingform_rubric.evaluate .criterion .levels .level:hover, .gradingform_rubric.evaluate .criterion .levels .level.checked {
+    background: #dff0d8; }
+  .gradingform_rubric.evaluate .criterion .levels .level.checked {
+    border: none;
+    border-left: 1px solid #dee2e6; }
+  .gradingform_rubric .criterion .description {
     vertical-align: top;
     padding: 6px; }
-    #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .description textarea {
+    .gradingform_rubric .criterion .description textarea {
       margin-bottom: 0;
       height: 115px; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .definition textarea {
+  .gradingform_rubric .criterion .definition textarea {
     width: 80%;
     margin-bottom: 0; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .score {
+  .gradingform_rubric .criterion .score {
     position: relative;
     float: left;
-    margin-right: 28px; }
-    #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .score input {
+    margin-top: 5px;
+    margin-right: 28px;
+    font-style: italic;
+    font-weight: bold;
+    color: #2d662a;
+    white-space: nowrap; }
+    .gradingform_rubric .criterion .score input {
       margin-bottom: 0; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .level {
+  .gradingform_rubric .criterion .level {
     vertical-align: top;
     padding: 6px; }
-    #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .level .delete {
+    .gradingform_rubric .criterion .level.currentchecked {
+      background: #fff0f0; }
+    .gradingform_rubric .criterion .level.checked {
+      background: #d0ffd0;
+      border: 1px solid #555; }
+    .gradingform_rubric .criterion .level .delete {
       position: relative;
       width: 32px;
       height: 32px;
       margin-top: -32px;
       clear: both;
       float: right; }
-      #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .level .delete input {
+      .gradingform_rubric .criterion .level .delete input {
         display: block;
         position: absolute;
         right: 0;
@@ -19405,47 +19420,47 @@ p.arrow_button {
         height: 24px;
         width: 24px;
         margin: 0; }
-        #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .level .delete input:hover {
+        .gradingform_rubric .criterion .level .delete input:hover {
           background-color: #ddd; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .scorevalue input {
-    float: none;
-    width: 2em; }
-    #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .scorevalue input.hiddenelement, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .scorevalue input.pseudotablink {
-      width: 0; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel {
+  .gradingform_rubric .criterion .scorevalue {
+    padding-right: 5px; }
+    .gradingform_rubric .criterion .scorevalue input {
+      float: none;
+      width: 2em; }
+      .gradingform_rubric .criterion .scorevalue input.hiddenelement, .gradingform_rubric .criterion .scorevalue input.pseudotablink {
+        width: 0; }
+  .gradingform_rubric .criterion .addlevel {
     vertical-align: top;
     padding-top: 6px; }
-    #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input {
+    .gradingform_rubric .criterion .addlevel input {
       height: 30px;
       line-height: 1rem; }
-
-#rubric-rubric.gradingform_rubric .addcriterion {
-  margin-left: 5px;
-  padding: 0;
-  margin-bottom: 1em; }
-  #rubric-rubric.gradingform_rubric .addcriterion input {
-    margin: 0;
-    color: inherit;
-    text-shadow: inherit;
-    border: 0 none;
-    line-height: inherit;
-    background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
-    padding-left: 26px; }
-
-#rubric-rubric.gradingform_rubric .options {
-  clear: both; }
-  #rubric-rubric.gradingform_rubric .options .option label {
-    margin: 0;
-    padding: 0;
-    font-size: inherit;
-    font-weight: normal;
-    line-height: 2em;
-    color: inherit;
-    text-shadow: none;
-    background-color: transparent; }
-  #rubric-rubric.gradingform_rubric .options .option input {
+  .gradingform_rubric .addcriterion {
     margin-left: 5px;
-    margin-right: 12px; }
+    padding: 0;
+    margin-bottom: 1em; }
+    .gradingform_rubric .addcriterion input {
+      margin: 0;
+      color: inherit;
+      text-shadow: inherit;
+      border: 0 none;
+      line-height: inherit;
+      background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
+      padding-left: 26px; }
+  .gradingform_rubric .options {
+    clear: both; }
+    .gradingform_rubric .options .option label {
+      margin: 0;
+      padding: 0;
+      font-size: inherit;
+      font-weight: normal;
+      line-height: 2em;
+      color: inherit;
+      text-shadow: none;
+      background-color: transparent; }
+    .gradingform_rubric .options .option input {
+      margin-left: 5px;
+      margin-right: 12px; }
 
 .grade-display .description {
   font-size: 1rem; }

theme/classic/style/moodle.css

@@ -19370,34 +19370,49 @@ p.arrow_button {
 #page-grade-grading-form-rubric-edit .gradingform_rubric_editform .status {
   font-size: 70%; }
 
-#rubric-rubric.gradingform_rubric #rubric-criteria {
+.gradingform_rubric {
   margin-bottom: 1em; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .description {
+  .gradingform_rubric.evaluate .criterion .levels .level:hover, .gradingform_rubric.evaluate .criterion .levels .level.checked {
+    background: #dff0d8; }
+  .gradingform_rubric.evaluate .criterion .levels .level.checked {
+    border: none;
+    border-left: 1px solid #dee2e6; }
+  .gradingform_rubric .criterion .description {
     vertical-align: top;
     padding: 6px; }
-    #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .description textarea {
+    .gradingform_rubric .criterion .description textarea {
       margin-bottom: 0;
       height: 115px; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .definition textarea {
+  .gradingform_rubric .criterion .definition textarea {
     width: 80%;
     margin-bottom: 0; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .score {
+  .gradingform_rubric .criterion .score {
     position: relative;
     float: left;
-    margin-right: 28px; }
-    #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .score input {
+    margin-top: 5px;
+    margin-right: 28px;
+    font-style: italic;
+    font-weight: bold;
+    color: #2d662a;
+    white-space: nowrap; }
+    .gradingform_rubric .criterion .score input {
       margin-bottom: 0; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .level {
+  .gradingform_rubric .criterion .level {
     vertical-align: top;
     padding: 6px; }
-    #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .level .delete {
+    .gradingform_rubric .criterion .level.currentchecked {
+      background: #fff0f0; }
+    .gradingform_rubric .criterion .level.checked {
+      background: #d0ffd0;
+      border: 1px solid #555; }
+    .gradingform_rubric .criterion .level .delete {
       position: relative;
       width: 32px;
       height: 32px;
       margin-top: -32px;
       clear: both;
       float: right; }
-      #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .level .delete input {
+      .gradingform_rubric .criterion .level .delete input {
         display: block;
         position: absolute;
         right: 0;
@@ -19405,47 +19420,47 @@ p.arrow_button {
         height: 24px;
         width: 24px;
         margin: 0; }
-        #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .level .delete input:hover {
+        .gradingform_rubric .criterion .level .delete input:hover {
           background-color: #ddd; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .scorevalue input {
-    float: none;
-    width: 2em; }
-    #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .scorevalue input.hiddenelement, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .scorevalue input.pseudotablink {
-      width: 0; }
-  #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel {
+  .gradingform_rubric .criterion .scorevalue {
+    padding-right: 5px; }
+    .gradingform_rubric .criterion .scorevalue input {
+      float: none;
+      width: 2em; }
+      .gradingform_rubric .criterion .scorevalue input.hiddenelement, .gradingform_rubric .criterion .scorevalue input.pseudotablink {
+        width: 0; }
+  .gradingform_rubric .criterion .addlevel {
     vertical-align: top;
     padding-top: 6px; }
-    #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input {
+    .gradingform_rubric .criterion .addlevel input {
       height: 30px;
       line-height: 1rem; }
-
-#rubric-rubric.gradingform_rubric .addcriterion {
-  margin-left: 5px;
-  padding: 0;
-  margin-bottom: 1em; }
-  #rubric-rubric.gradingform_rubric .addcriterion input {
-    margin: 0;
-    color: inherit;
-    text-shadow: inherit;
-    border: 0 none;
-    line-height: inherit;
-    background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
-    padding-left: 26px; }
-
-#rubric-rubric.gradingform_rubric .options {
-  clear: both; }
-  #rubric-rubric.gradingform_rubric .options .option label {
-    margin: 0;
-    padding: 0;
-    font-size: inherit;
-    font-weight: normal;
-    line-height: 2em;
-    color: inherit;
-    text-shadow: none;
-    background-color: transparent; }
-  #rubric-rubric.gradingform_rubric .options .option input {
+  .gradingform_rubric .addcriterion {
     margin-left: 5px;
-    margin-right: 12px; }
+    padding: 0;
+    margin-bottom: 1em; }
+    .gradingform_rubric .addcriterion input {
+      margin: 0;
+      color: inherit;
+      text-shadow: inherit;
+      border: 0 none;
+      line-height: inherit;
+      background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
+      padding-left: 26px; }
+  .gradingform_rubric .options {
+    clear: both; }
+    .gradingform_rubric .options .option label {
+      margin: 0;
+      padding: 0;
+      font-size: inherit;
+      font-weight: normal;
+      line-height: 2em;
+      color: inherit;
+      text-shadow: none;
+      background-color: transparent; }
+    .gradingform_rubric .options .option input {
+      margin-left: 5px;
+      margin-right: 12px; }
 
 .grade-display .description {
   font-size: 1rem; }