diff --git a/src/css/injected.scss b/src/css/injected.scss index 8b37306c..d04dce71 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -1677,6 +1677,22 @@ iframe.userHTML { background-image: unset; 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___"] { border: 2px solid rgba(255, 255, 255, 0.3); } diff --git a/src/plugins/built-in/assessmentsAverage/index.ts b/src/plugins/built-in/assessmentsAverage/index.ts index 6db54831..ed7140f1 100644 --- a/src/plugins/built-in/assessmentsAverage/index.ts +++ b/src/plugins/built-in/assessmentsAverage/index.ts @@ -180,8 +180,52 @@ const assessmentsAveragePlugin: Plugin = { `).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;