mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
fix: fix colouring on assement details result bars
This commit is contained in:
@@ -1677,6 +1677,22 @@ iframe.userHTML {
|
|||||||
background-image: unset;
|
background-image: unset;
|
||||||
background-color: var(--auto-background);
|
background-color: var(--auto-background);
|
||||||
}
|
}
|
||||||
|
[class*="OverallResult__OverallResult___"] {
|
||||||
|
--fill-colour: var(--assessment-accent-colour, var(--item-colour, var(--container-accent, rgb(var(--theme-sel-bg-parts)))));
|
||||||
|
}
|
||||||
|
[class*="OverallResult__OverallResult___"] [class*="Thermoscore__Thermoscore___"],
|
||||||
|
[class*="OverallResult__OverallResult___"] [class*="Thermoscore__fill___"],
|
||||||
|
[class*="OverallResult__OverallResult___"] > div > div {
|
||||||
|
--fill-colour: var(--assessment-accent-colour, var(--item-colour, var(--container-accent, rgb(var(--theme-sel-bg-parts)))));
|
||||||
|
}
|
||||||
|
[class*="AssessableCriterion__header___"] {
|
||||||
|
--fill-colour: var(--assessment-accent-colour, var(--item-colour, var(--container-accent, rgb(var(--theme-sel-bg-parts)))));
|
||||||
|
}
|
||||||
|
[class*="AssessableCriterion__header___"] [class*="Thermoscore__Thermoscore___"],
|
||||||
|
[class*="AssessableCriterion__header___"] [class*="Thermoscore__fill___"],
|
||||||
|
[class*="AssessableCriterion__header___"] > div > div > div {
|
||||||
|
--fill-colour: var(--assessment-accent-colour, var(--item-colour, var(--container-accent, rgb(var(--theme-sel-bg-parts)))));
|
||||||
|
}
|
||||||
.dark [class*="Thermoscore__Thermoscore___"] {
|
.dark [class*="Thermoscore__Thermoscore___"] {
|
||||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -180,8 +180,52 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
|
|||||||
`).firstChild!,
|
`).firstChild!,
|
||||||
assessmentsList.firstChild,
|
assessmentsList.firstChild,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
applySubjectColourToOverallResult();
|
||||||
|
|
||||||
|
const observer = new MutationObserver(() => {
|
||||||
|
applySubjectColourToOverallResult();
|
||||||
|
});
|
||||||
|
const wrapper = document.querySelector(".assessmentsWrapper");
|
||||||
|
if (wrapper) {
|
||||||
|
observer.observe(wrapper, { childList: true, subtree: true });
|
||||||
|
setTimeout(() => observer.disconnect(), 10000);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function applySubjectColourToOverallResult() {
|
||||||
|
const selectedAssessmentItem = document.querySelector(
|
||||||
|
"[class*='AssessmentItem__AssessmentItem___'][class*='selected___']",
|
||||||
|
) || document.querySelector(
|
||||||
|
"[class*='Collapsible__content___'] [class*='AssessmentItem__AssessmentItem___']",
|
||||||
|
);
|
||||||
|
const assessmentThermoscore = selectedAssessmentItem?.querySelector(
|
||||||
|
"[class*='Thermoscore__Thermoscore___']",
|
||||||
|
) as HTMLElement | null;
|
||||||
|
const overallResult = document.querySelector(
|
||||||
|
"[class*='OverallResult__OverallResult___']",
|
||||||
|
) as HTMLElement | null;
|
||||||
|
const assessableCriterionHeaders = document.querySelectorAll(
|
||||||
|
"[class*='AssessableCriterion__header___']",
|
||||||
|
);
|
||||||
|
|
||||||
|
if (assessmentThermoscore && (overallResult || assessableCriterionHeaders.length > 0)) {
|
||||||
|
const accentColour =
|
||||||
|
getComputedStyle(assessmentThermoscore).getPropertyValue("--assessment-accent-colour").trim() ||
|
||||||
|
getComputedStyle(assessmentThermoscore).getPropertyValue("--fill-colour").trim() ||
|
||||||
|
getComputedStyle(assessmentThermoscore.closest("[class*='Collapsible__Collapsible___']") || assessmentThermoscore).getPropertyValue("--assessment-accent-colour").trim() ||
|
||||||
|
getComputedStyle(assessmentThermoscore.closest("[class*='Collapsible__Collapsible___']") || assessmentThermoscore).getPropertyValue("--item-colour").trim();
|
||||||
|
if (accentColour) {
|
||||||
|
overallResult?.style.setProperty("--assessment-accent-colour", accentColour);
|
||||||
|
overallResult?.style.setProperty("--fill-colour", accentColour);
|
||||||
|
assessableCriterionHeaders.forEach((el) => {
|
||||||
|
(el as HTMLElement).style.setProperty("--assessment-accent-colour", accentColour);
|
||||||
|
(el as HTMLElement).style.setProperty("--fill-colour", accentColour);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default assessmentsAveragePlugin;
|
export default assessmentsAveragePlugin;
|
||||||
|
|||||||
Reference in New Issue
Block a user