Created more specialized css variables

css/devstyles.css

@@ -1,8 +1,16 @@
 /* stylelint-disable length-zero-no-unit, color-hex-case, color-hex-length, no-eol-whitespace, unit-blacklist, block-no-empty */
 html { /* not :root, so we can override these colors in the :root field if needed */
     --less-light: color-mix(in srgb, var(--light) 80%, #ccc);
-    --highlight: var(--info);
     --highlight-mix: 10%;
+    --highlight: var(--info);
+    --past: var(--purple);
+    --present: var(--blue);
+    --future: var(--gray);
+    --coursecat-list: var(--blue);
+    --course-list: var(--green);
+    --excellent: var(--blue);
+    --pending: var(--gray);
+    --incomplete: var(--gray);
 }
 
 
@@ -200,48 +208,17 @@ li.t-item-course-gradeinfo img {
 }
 
 i.t-coursecat-list-item {
-    color: var(--blue);
+    color: var(--coursecat-list);
 }
 
 i.t-course-list-item {
-    color: var(--green);
+    color: var(--course-list);
 }
 
 ul.t-competency-list li {
     list-style: none;
 }
 
-.t-competency-heading .draggable-competency {
-    display: inline-block;
-}
-
-.t-competency-heading .disabled-competency {
-    text-decoration: line-through;
-}
-
-.t-competency-heading .competency-info {
-    color: #aaa;
-}
-
-.t-competency-heading i.t-goal {
-    color: #aaa;
-}
-
-.t-competency-heading i.t-module {
-    color: var(--green);
-}
-
-.t-competency-heading i.t-domain {
-    color: var(--purple);
-}
-
-.t-framework-heading i {
-    color: var(--blue);
-}
-
-.t-framework-heading {
-    font-weight: bold;
-}
 
 .collapsed > .when-open,
 .not-collapsed > .when-closed {
@@ -808,7 +785,7 @@ a.t-item-course-config {
 
 .r-item-start.completion-incomplete i,
 .r-completion-incomplete {
-    color: var(--gray);
+    color: var(--incomplete);
 }
 .r-completion-progress {
     color: var(--warning);
@@ -820,10 +797,10 @@ a.t-item-course-config {
     color: var(--info);
 }
 .r-completion-excellent, .r-completion-complete {
-    color: var(--blue);
+    color: var(--excellent);
 }
 .r-completion-pending {
-    color: var(--gray);
+    color: var(--pending);
 }
 .r-completion-failed, .r-completion-complete-fail {
     color: var(--danger);
@@ -868,7 +845,7 @@ tr.r-completion-category-header {
 
 .r-item-finish.completion-incomplete,
 .r-item-junction.completion-incomplete {
-    color: var(--gray);
+    color: var(--incomplete);
 }
 .r-item-finish.completion-progress,
 .r-item-junction.completion-progress {
@@ -884,7 +861,7 @@ tr.r-completion-category-header {
 }
 .r-item-finish.completion-excellent,
 .r-item-junction.completion-excellent {
-    color: var(--blue);
+    color: var(--excellent);
 }
 
 .r-item-finish.completion-failed,
@@ -912,15 +889,15 @@ table.r-item-course-grade-details td {
 
 .t-timing-past,
 .r-timing-past {
-    color: var(--purple);
+    color: var(--past);
 }
 .t-timing-present,
 .r-timing-present {
-    color: var(--blue);
+    color: var(--present);
 }
 .t-timing-future,
 .r-timing-future {
-    color: var(--gray);
+    color: var(--future);
 }
 
 .t-timing-indicator,
@@ -941,17 +918,17 @@ table.r-item-course-grade-details td {
 
 .t-timing-indicator.timing-past,
 .r-timing-indicator.timing-past {
-    background-color: var(--purple);
+    background-color: var(--past);
 }
 
 .t-timing-indicator.timing-present,
 .r-timing-indicator.timing-present {
-    background-color: var(--blue);
+    background-color: var(--present);
 }
 
 .t-timing-indicator.timing-future,
 .r-timing-indicator.timing-future {
-    background-color: var(--gray);
+    background-color: var(--future);
 }
 
 .r-course-am-teacher {
@@ -962,13 +939,13 @@ table.r-item-course-grade-details td {
     color: rgb(139, 107, 0);
 }
 .r-graded-unsubmitted {
-    color: var(--gray);
+    color: var(--incomplete);
 }
 .r-graded-ungraded {
     color: var(--danger);
 }
 .r-graded-allgraded {
-    color: var(--blue);
+    color: var(--excellent);
 }
 .r-graded-graded {
     color: var(--success);
@@ -1052,13 +1029,13 @@ table.r-item-course-grade-details td {
 }
 
 .card.s-studyplan-card.timing-past .card-header {
-    background-color: var(--purple);
+    background-color: var(--past);
 }
 .card.s-studyplan-card.timing-present .card-header {
-    background-color: var(--blue);
+    background-color: var(--present);
 }
 .card.s-studyplan-card.timing-future .card-header {
-    background-color: var(--gray);
+    background-color: var(--future);
 }
 
 .s-studyplan-card-title-buttons {

doc/configuration.htm

@@ -91,18 +91,32 @@
     }</pre>        
     
     <h3>Tweaking other colors</h3>
-    <p>Other variables that are used are color variables provided in bootstrap. To tweak them, use the <b>Advanced settings</b> -> <b>Raw SCSS</b> configuration
+    <p>There are some other custom css variables which you can tweak to change the styling. An overview:</p>
-        option in your theme's configuration.</p>
+    <table>
+        <tr><th>Color</th><th>Usage</th><th>Default value</th></tr>
+        <tr><td class="">--highlight</td><td>Highlighting of active period</td><td>Bootstrap css var(--info)</td></tr>
+        <tr><td>--past</td><td>Tag color for past courses or studyplans/pages</td><td>var(--purple)</td></tr>
+        <tr><td>--present</td><td>Tag color for active courses or studyplans/pages</td><td>var(--blue)</td></tr>
+        <tr><td>--future</td><td>Tag color for future/upcoming courses or studyplans/pages</td><td>var(--gray)</td></tr>
+        <tr><td>--coursecat-list</td><td>Icon color of course categories in the studyplan editor toolbox</td><td>var(--blue)</td></tr>
+        <tr><td>--course-list</td><td>Icon color of courses in the studyplan editor toolbox</td><td>var(--green)</td></tr>
+        <tr><td>--excellent</td><td>Indicator color for excellent results</td><td>var(--blue)</td></tr>
+        <tr><td>--pending</td><td>Indicator color for results pending grading.</td><td>var(--gray)</td></tr>
+        <tr><td>--incomplete</td><td>Indication color for incomplete results</td><td>var(--gray)</td></tr>
+    </table>
     <p>Fore example, in the Boost theme the option is found in <b>Appearance</b> -> <b>(Themes)</b> -> <b>Boost</b> -> <b>Advanced settings</b> -> <b>Raw SCSS</b>
-    <p>There, use code like the following to change the color variables. (Note that those colors will be changed throughout the site.)</p>
+    <p>There, use code like the following to change these color variables. (The value showin in the code is the default value used in the plugin)</p>
     <pre style="max-width: 30em;" class="p-3 border border-primary rounded-lg ml-3">
 :root {
-    --blue: #007bff;
+    --highlight: var(--info);
-    --indigo: #6610f2;
+    --past: var(--purple);
-    --purple: #6f42c1;
+    --present: var(--blue);
-    --red: #dc3545;
+    --future: var(--gray);
-    --green: #28a745;
+    --coursecat-list: var(--blue);
-    --gray: #6c757d;
+    --course-list: var(--green);
+    --excellent: var(--blue);
+    --pending: var(--gray);
+    --incomplete: var(--gray);
     }</pre>
     
 

doc/view-studyplan.htm

@@ -25,7 +25,7 @@
         <tr>
             <td>Completed (generic)</td>
             <td class="text-center"><i title="Completed" style="float: none;" class="r-course-result fa fa-check-circle r-completion-complete"></i></td>
-            <td>Bootstrap color variable <i>--blue</i></td>
+            <td>Bootstrap color variable <i>--info</i></td>
             td class="pl-3">(Used only in the <i>Moodle course completion</i> studyplan aggregation methods)</td>
         </tr>
         <tr>
@@ -42,7 +42,7 @@
         <tr>
             <td>Excellent</td>
             <td class="text-center"><i title="Excellent" style="float: none;" class="r-course-result fa fa-check-circle r-completion-excellent"></i></td>
-            <td>Bootstrap color variable <i>--blue</i></td>
+            <td>Color variable <i>--excellent</i></td>
             <td class="pl-3">(Used only in the <i>Manual</i> studyplan aggregation methods)</td>
         </tr>
         <tr>
@@ -58,12 +58,12 @@
         <tr>
             <td>Not started</td>
             <td class="text-center"><i title="Not started" style="float: none;" class="r-course-result fa fa-circle-o r-completion-incomplete"></i></td>
-            <td>Bootstrap color variable <i>--gray</i></td>
+            <td>Color variable <i>--incomplete</i></td>
         </tr>      
     </table>
     <br>
     <p> As you can see, the used colors depend on your theme. The configured colors for <i>success</i>, <i>warning</i>, <i>danger</i> and <i>info</i> are all
-        used. If you wish to further configure the colors, you can choose to redefine the other variables (e.g. <i>--blue</i> and <i>--gray</i>) your theme's
+        used. If you wish to further configure the colors, you can choose to redefine the other variables (e.g. <i>--excellent</i> and <i>--incomplete</i>) in your theme's
         SCSS additions.
     </p>
     <p>The colored tabs in front of each course show if the course is currently given (blue), in the past (purple) or in the future (grey)</p>