Created more specialized css variables

This commit is contained in:
PMKuipers 2023-08-08 23:09:22 +02:00
parent d248012ad1
commit 4d4a461e21
3 changed files with 54 additions and 63 deletions

View File

@ -1,8 +1,16 @@
/* stylelint-disable length-zero-no-unit, color-hex-case, color-hex-length, no-eol-whitespace, unit-blacklist, block-no-empty */ /* 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 */ 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); --less-light: color-mix(in srgb, var(--light) 80%, #ccc);
--highlight: var(--info);
--highlight-mix: 10%; --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 { i.t-coursecat-list-item {
color: var(--blue); color: var(--coursecat-list);
} }
i.t-course-list-item { i.t-course-list-item {
color: var(--green); color: var(--course-list);
} }
ul.t-competency-list li { ul.t-competency-list li {
list-style: none; 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, .collapsed > .when-open,
.not-collapsed > .when-closed { .not-collapsed > .when-closed {
@ -808,7 +785,7 @@ a.t-item-course-config {
.r-item-start.completion-incomplete i, .r-item-start.completion-incomplete i,
.r-completion-incomplete { .r-completion-incomplete {
color: var(--gray); color: var(--incomplete);
} }
.r-completion-progress { .r-completion-progress {
color: var(--warning); color: var(--warning);
@ -820,10 +797,10 @@ a.t-item-course-config {
color: var(--info); color: var(--info);
} }
.r-completion-excellent, .r-completion-complete { .r-completion-excellent, .r-completion-complete {
color: var(--blue); color: var(--excellent);
} }
.r-completion-pending { .r-completion-pending {
color: var(--gray); color: var(--pending);
} }
.r-completion-failed, .r-completion-complete-fail { .r-completion-failed, .r-completion-complete-fail {
color: var(--danger); color: var(--danger);
@ -868,7 +845,7 @@ tr.r-completion-category-header {
.r-item-finish.completion-incomplete, .r-item-finish.completion-incomplete,
.r-item-junction.completion-incomplete { .r-item-junction.completion-incomplete {
color: var(--gray); color: var(--incomplete);
} }
.r-item-finish.completion-progress, .r-item-finish.completion-progress,
.r-item-junction.completion-progress { .r-item-junction.completion-progress {
@ -884,7 +861,7 @@ tr.r-completion-category-header {
} }
.r-item-finish.completion-excellent, .r-item-finish.completion-excellent,
.r-item-junction.completion-excellent { .r-item-junction.completion-excellent {
color: var(--blue); color: var(--excellent);
} }
.r-item-finish.completion-failed, .r-item-finish.completion-failed,
@ -912,15 +889,15 @@ table.r-item-course-grade-details td {
.t-timing-past, .t-timing-past,
.r-timing-past { .r-timing-past {
color: var(--purple); color: var(--past);
} }
.t-timing-present, .t-timing-present,
.r-timing-present { .r-timing-present {
color: var(--blue); color: var(--present);
} }
.t-timing-future, .t-timing-future,
.r-timing-future { .r-timing-future {
color: var(--gray); color: var(--future);
} }
.t-timing-indicator, .t-timing-indicator,
@ -941,17 +918,17 @@ table.r-item-course-grade-details td {
.t-timing-indicator.timing-past, .t-timing-indicator.timing-past,
.r-timing-indicator.timing-past { .r-timing-indicator.timing-past {
background-color: var(--purple); background-color: var(--past);
} }
.t-timing-indicator.timing-present, .t-timing-indicator.timing-present,
.r-timing-indicator.timing-present { .r-timing-indicator.timing-present {
background-color: var(--blue); background-color: var(--present);
} }
.t-timing-indicator.timing-future, .t-timing-indicator.timing-future,
.r-timing-indicator.timing-future { .r-timing-indicator.timing-future {
background-color: var(--gray); background-color: var(--future);
} }
.r-course-am-teacher { .r-course-am-teacher {
@ -962,13 +939,13 @@ table.r-item-course-grade-details td {
color: rgb(139, 107, 0); color: rgb(139, 107, 0);
} }
.r-graded-unsubmitted { .r-graded-unsubmitted {
color: var(--gray); color: var(--incomplete);
} }
.r-graded-ungraded { .r-graded-ungraded {
color: var(--danger); color: var(--danger);
} }
.r-graded-allgraded { .r-graded-allgraded {
color: var(--blue); color: var(--excellent);
} }
.r-graded-graded { .r-graded-graded {
color: var(--success); color: var(--success);
@ -1052,13 +1029,13 @@ table.r-item-course-grade-details td {
} }
.card.s-studyplan-card.timing-past .card-header { .card.s-studyplan-card.timing-past .card-header {
background-color: var(--purple); background-color: var(--past);
} }
.card.s-studyplan-card.timing-present .card-header { .card.s-studyplan-card.timing-present .card-header {
background-color: var(--blue); background-color: var(--present);
} }
.card.s-studyplan-card.timing-future .card-header { .card.s-studyplan-card.timing-future .card-header {
background-color: var(--gray); background-color: var(--future);
} }
.s-studyplan-card-title-buttons { .s-studyplan-card-title-buttons {

View File

@ -91,18 +91,32 @@
}</pre> }</pre>
<h3>Tweaking other colors</h3> <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>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"> <pre style="max-width: 30em;" class="p-3 border border-primary rounded-lg ml-3">
:root { :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> }</pre>

View File

@ -25,7 +25,7 @@
<tr> <tr>
<td>Completed (generic)</td> <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 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> td class="pl-3">(Used only in the <i>Moodle course completion</i> studyplan aggregation methods)</td>
</tr> </tr>
<tr> <tr>
@ -42,7 +42,7 @@
<tr> <tr>
<td>Excellent</td> <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 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> <td class="pl-3">(Used only in the <i>Manual</i> studyplan aggregation methods)</td>
</tr> </tr>
<tr> <tr>
@ -58,12 +58,12 @@
<tr> <tr>
<td>Not started</td> <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 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> </tr>
</table> </table>
<br> <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 <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. SCSS additions.
</p> </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> <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>