Miqra-Engineering/moodle_local_treestudyplan
2
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases 4 Wiki Activity

Created more specialized css variables

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
css/devstyles.css
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 */
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 {

32
doc/configuration.htm
View File

@ -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
option in your theme's configuration.</p>
<p>There are some other custom css variables which you can tweak to change the styling. An overview:</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;
--indigo: #6610f2;
--purple: #6f42c1;
--red: #dc3545;
--green: #28a745;
--gray: #6c757d;
--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);
}</pre>

8
doc/view-studyplan.htm
View File

@ -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>