diff --git a/src/SEQTA.js b/src/SEQTA.js
index 6e385985..4ec258de 100644
--- a/src/SEQTA.js
+++ b/src/SEQTA.js
@@ -5,6 +5,8 @@ var UserInitalCode = '';
var currentSelectedDate = new Date();
var WhatsNewOpen = false;
var LessonInterval;
+var isDarkMode = false;
+
var stringToHTML = function (str, styles=false) {
var parser = new DOMParser();
var str = DOMPurify.sanitize(str, { ADD_ATTR: ['onclick']});
@@ -297,10 +299,14 @@ function OpenWhatsNewPopup() {
}
async function finishLoad() {
- var loadingbk = document.getElementById("loading");
- loadingbk.style.opacity = "0";
- await delay(501);
- loadingbk.remove();
+ try {
+ var loadingbk = document.getElementById("loading");
+ loadingbk.style.opacity = "0";
+ await delay(501);
+ loadingbk.remove();
+ } catch(err) {
+ console.log(err);
+ }
chrome.storage.local.get(["justupdated"], function (result) {
if (result.justupdated) {
@@ -686,8 +692,8 @@ async function ObserveMenuItemPosition() {
mutations_list.forEach(function (mutation) {
mutation.addedNodes.forEach(function (added_node) {
- if (!added_node.dataset.checked && !MenuOptionsOpen) {
- if (MenuitemSVGKey[added_node.dataset.key]) {
+ if (!added_node?.dataset?.checked && !MenuOptionsOpen) {
+ if (MenuitemSVGKey[added_node?.dataset?.key]) {
ReplaceMenuSVG(added_node, MenuitemSVGKey[added_node.dataset.key])
}
ChangeMenuItemPositions(menuorder);
@@ -734,6 +740,77 @@ function AppendElementsToDisabledPage() {
document.head.append(settingsStyle)
}
+function lightenAndPaleColor(hexColor, lightenFactor = 0.75, paleFactor = 0.55) {
+ // Convert a RGB value to HSL
+ function rgbToHsl(r, g, b) {
+ r /= 255, g /= 255, b /= 255;
+ let max = Math.max(r, g, b), min = Math.min(r, g, b);
+ let h, s, l = (max + min) / 2;
+
+ if (max === min) {
+ h = s = 0;
+ } else {
+ let d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ switch (max) {
+ case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+ case g: h = (b - r) / d + 2; break;
+ case b: h = (r - g) / d + 4; break;
+ }
+ h /= 6;
+ }
+
+ return [h, s, l];
+ }
+
+ // Convert an HSL value to RGB
+ function hslToRgb(h, s, l) {
+ function hue2rgb(p, q, t) {
+ if (t < 0) t += 1;
+ if (t > 1) t -= 1;
+ if (t < 1/6) return p + (q - p) * 6 * t;
+ if (t < 1/2) return q;
+ if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+ return p;
+ }
+
+ let r, g, b;
+ if (s === 0) {
+ r = g = b = l;
+ } else {
+ let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ let p = 2 * l - q;
+ r = hue2rgb(p, q, h + 1/3);
+ g = hue2rgb(p, q, h);
+ b = hue2rgb(p, q, h - 1/3);
+ }
+
+ return [r * 255, g * 255, b * 255];
+ }
+
+ // Extract the red, green, and blue components from hex
+ let r = parseInt(hexColor.substr(1, 2), 16);
+ let g = parseInt(hexColor.substr(3, 2), 16);
+ let b = parseInt(hexColor.substr(5, 2), 16);
+
+ // Convert RGB to HSL
+ let [h, s, l] = rgbToHsl(r, g, b);
+
+ // Adjust saturation and lightness
+ s -= s * paleFactor;
+ l += (1 - l) * lightenFactor;
+
+ // Convert HSL back to RGB
+ [r, g, b] = hslToRgb(h, s, l);
+
+ // Convert RGB to hex
+ r = Math.round(r).toString(16).padStart(2, '0');
+ g = Math.round(g).toString(16).padStart(2, '0');
+ b = Math.round(b).toString(16).padStart(2, '0');
+
+ return '#' + r + g + b;
+}
+
function ColorLuminance(hex, lum) {
// validate hex string
@@ -756,6 +833,11 @@ function ColorLuminance(hex, lum) {
chrome.storage.onChanged.addListener(function (changes) {
if (changes.selectedColor) {
+ try {
+ document.documentElement.style.setProperty('--better-pale', lightenAndPaleColor(changes.selectedColor.newValue));
+ } catch(err) {
+ console.log(err)
+ }
rbg = GetThresholdofHex(changes.selectedColor.newValue)
if (rbg > 210) {
@@ -769,7 +851,7 @@ chrome.storage.onChanged.addListener(function (changes) {
document.documentElement.style.setProperty('--better-main', changes.selectedColor.newValue);
// document.documentElement.style.setProperty('--better-sub', ColorLuminance(changes.selectedColor.newValue, -0.15));
-
+
if (changes.selectedColor.newValue == '#ffffff') {
document.documentElement.style.setProperty('--better-light', '#b7b7b7');
} else {
@@ -777,7 +859,7 @@ chrome.storage.onChanged.addListener(function (changes) {
}
}
- if (changes.customshortcuts.newValue) {
+ if (changes?.customshortcuts?.newValue) {
if (changes.customshortcuts.oldValue.length > 0) {
CreateCustomShortcutDiv(changes.customshortcuts.newValue[(changes.customshortcuts.oldValue.length)]);
} else {
@@ -822,13 +904,19 @@ function RunFunctionOnTrue(storedSetting) {
document.documentElement.style.setProperty('--better-sub', "#161616");
document.documentElement.style.setProperty('--better-alert-highlight', "#c61851");
-
+
+
if (storedSetting.DarkMode) {
document.documentElement.style.setProperty('--background-primary', "#232323");
document.documentElement.style.setProperty('--background-secondary', "#1a1a1a");
document.documentElement.style.setProperty('--text-primary', "white");
}
else {
+ try {
+ document.documentElement.style.setProperty('--better-pale', lightenAndPaleColor(storedSetting.selectedColor));
+ } catch(err) {
+ console.log(err)
+ }
document.documentElement.style.setProperty('--background-primary', "#ffffff");
document.documentElement.style.setProperty('--background-secondary', "#e5e7eb");
document.documentElement.style.setProperty('--text-primary', "black");
@@ -848,6 +936,7 @@ function RunFunctionOnTrue(storedSetting) {
document.documentElement.style.setProperty('--better-main', storedSetting.selectedColor);
// document.documentElement.style.setProperty('--better-sub', ColorLuminance(storedSetting.selectedColor, -0.15));
+
if (storedSetting.selectedColor == '#ffffff') {
document.documentElement.style.setProperty('--better-light', '#b7b7b7');
} else {
@@ -1890,16 +1979,19 @@ function AddBetterSEQTAElements(toggle) {
});
houseelement = document.getElementsByClassName("userInfohouse")[0];
- if (students[index].house) {
+ if (students[index]?.house) {
houseelement.style.background = students[index].house_colour;
- colorresult = GetThresholdofHex(students[index].house_colour);
- if (colorresult > 300) {
- houseelement.style.color = "black";
- }
- else {
- houseelement.style.color = "white";
- }
- houseelement.innerText = students[index].year + students[index].house;
+ try {
+ colorresult = GetThresholdofHex(students[index]?.house_colour);
+
+ if (colorresult > 300) {
+ houseelement.style.color = "black";
+ }
+ else {
+ houseelement.style.color = "white";
+ }
+ houseelement.innerText = students[index].year + students[index].house;
+ } catch {}
}
else {
houseelement.innerText = students[index].year;
@@ -1974,6 +2066,7 @@ function AddBetterSEQTAElements(toggle) {
chrome.storage.local.get(['DarkMode'], function (result) {
Darkmode = result.DarkMode;
+
tooltipstring = GetLightDarkModeString(Darkmode);
var LightDarkModeButton = stringToHTML(``);
ContentDiv.append(LightDarkModeButton.firstChild);
@@ -1982,32 +2075,44 @@ function AddBetterSEQTAElements(toggle) {
if (Darkmode) {
LightDarkModeElement.firstChild.innerHTML = ``
+ document.documentElement.style.removeProperty('--better-pale');
} else {
LightDarkModeElement.firstChild.innerHTML = ``
+ try {
+ chrome.storage.local.get(null, function (result) {
+ document.documentElement.style.setProperty('--better-pale', lightenAndPaleColor(result.selectedColor)); // TODO: Make this variable referencable
+ });
+ } catch(err) { console.log(err) }
}
darklightText = document.getElementById('darklighttooliptext');
LightDarkModeElement.addEventListener('click', function () {
chrome.storage.local.get(['DarkMode'], function (result) {
alliframes = document.getElementsByTagName('iframe');
fileref = GetiFrameCSSElement();
-
+
if (!result.DarkMode) {
document.documentElement.style.setProperty('--background-primary', "#232323");
document.documentElement.style.setProperty('--background-secondary', "#1a1a1a");
document.documentElement.style.setProperty('--text-primary', "white");
+ document.documentElement.style.removeProperty('--better-pale');
LightDarkModeElement.firstChild.innerHTML = ``
-
+
for (let i = 0; i < alliframes.length; i++) {
const element = alliframes[i];
element.contentDocument.documentElement.childNodes[1].style.color = "white";
element.contentDocument.documentElement.firstChild.appendChild(fileref);
}
-
+
}
else {
document.documentElement.style.setProperty('--background-primary', "#ffffff");
document.documentElement.style.setProperty('--background-secondary', "#e5e7eb");
document.documentElement.style.setProperty('--text-primary', "black");
+ try {
+ chrome.storage.local.get(null, function (result) {
+ document.documentElement.style.setProperty('--better-pale', lightenAndPaleColor(result.selectedColor)); // TODO: Make this variable referencable
+ });
+ } catch(err) { console.log(err) }
LightDarkModeElement.firstChild.innerHTML = ``
for (let i = 0; i < alliframes.length; i++) {
@@ -2153,11 +2258,13 @@ function CheckCurrentLesson(lesson, num) {
}
function hexToRGB(hex) {
- var r = parseInt(hex.slice(1, 3), 16),
+ try {
+ var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
-
- return { 'r': r, 'g': g, 'b': b }
+
+ return { 'r': r, 'g': g, 'b': b }
+ } catch {}
}
function GetThresholdofHex(hex) {
diff --git a/src/inject/injected.css b/src/inject/injected.css
index 5b8b5a7d..d1403e59 100644
--- a/src/inject/injected.css
+++ b/src/inject/injected.css
@@ -16,6 +16,7 @@
background-color: var(--better-main) !important;
background: var(--better-main) !important;
--navy: #1a1a1a !important;
+ --auto-background: var(--better-pale, var(--background-secondary)) !important;
}
body,
@@ -25,6 +26,7 @@ html {
#container {
transition: 200ms;
+ background-color: var(--auto-background) !important;
}
* {
@@ -37,6 +39,12 @@ html {
font-weight: 500 !important;
}
+@media (min-width: 900px) {
+ #title > span {
+ transform: translateY(2px);
+ }
+}
+
.connectedNotificationsWrapper>div>button>svg>g {
fill: var(--background-primary) !important;
}
@@ -142,7 +150,7 @@ ul.magicDelete>li.deleting {
border-right: none;
font-family: Rubik, sans-serif !important;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
- z-index: 10;
+ z-index: 100 !important;
}
#menu li>label>svg,
@@ -185,6 +193,14 @@ html {
.student #menu>ul::before {
background-image: var(--betterseqta-logo);
+ position: -webkit-sticky; /* Safari */
+ position: sticky;
+ top: 0;
+ background-color: var(--better-main);
+}
+
+.assessmentsWrapper .message {
+ display: none;
}
#menu li:hover {
@@ -248,7 +264,7 @@ html {
.composer>.Body__body___3pGxr>.Container__container___33GlY>.Document__document___1KJCG>.Canvas__canvas___OBdCZ {
background-color: unset !important;
background-image: unset !important;
- background: var(--background-secondary) !important;
+ background: var(--auto-background) !important;
color: white !important;
}
@@ -276,7 +292,7 @@ html {
#title {
background: var(--background-primary);
height: 4rem;
- box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
+ box-shadow: rgb(0 0 0 / 35%) 0px 0px 10px;
min-height: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1;
@@ -286,7 +302,7 @@ html {
animation: slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg,
var(--better-main) 50%,
- var(--background-secondary) 50%);
+ var(--auto-background) 50%);
bottom: 0;
left: -50%;
opacity: 0.5;
@@ -518,7 +534,7 @@ html {
}
.shortcut:hover {
- background: var(--background-secondary);
+ background: var(--auto-background);
}
.shortcut p {
@@ -716,7 +732,7 @@ html {
}
.notifications__list___rp2L2 {
- border: 4px solid var(--background-secondary);
+ border: 4px solid var(--auto-background);
background: var(--background-primary);
}
@@ -727,7 +743,7 @@ html {
}
.notifications__item___2ErJN:hover {
- background: var(--background-secondary) !important;
+ background: var(--auto-background) !important;
}
.connectedNotificationsWrapper>div>button+div {
@@ -752,7 +768,7 @@ html {
}
.notifications__actions___1UX7r {
- background: var(--background-secondary);
+ background: var(--auto-background);
}
.notifications__items___2hCdv {
@@ -773,7 +789,7 @@ html {
}
.Viewer__sidebar___1Btu4 {
- background: var(--background-secondary);
+ background: var(--auto-background);
color: var(--text-primary);
}
@@ -813,6 +829,7 @@ html {
.Message__Message___3oJaU {
background: var(--background-primary);
+ border-radius: 1rem !important;
}
iframe.userHTML {
@@ -830,7 +847,7 @@ iframe.userHTML {
}
#main>.reports {
- background: var(--background-secondary);
+ background: var(--auto-background);
}
#main>.reports>.item>.report>.year {
@@ -844,7 +861,7 @@ iframe.userHTML {
}
.Collapsible__Collapsible___3O8P3>.Collapsible__header___-Afvq {
- background: var(--background-secondary);
+ background: var(--auto-background);
}
.AssessmentList__AssessmentList___1GdCl>.AssessmentList__searchFilter___3N70o+.AssessmentList__items___3LcmQ {
@@ -853,7 +870,7 @@ iframe.userHTML {
.Thermoscore__Thermoscore___2tWMi {
background-image: unset;
- background-color: var(--background-secondary);
+ background-color: var(--auto-background);
}
#toolbar {
@@ -868,7 +885,7 @@ iframe.userHTML {
}
.programmeNavigator>.navigator>.week>.lessons>.lesson:hover {
- background: var(--background-secondary);
+ background: var(--auto-background);
}
.programmeNavigator>.navigator>.search {
@@ -963,7 +980,7 @@ ul {
}
.legacy-root .uiFileHandler {
- background: var(--background-secondary);
+ background: var(--auto-background);
margin: 8px 0px 0px 0px;
}
@@ -1072,7 +1089,7 @@ blurred {
.uiSlidePane>.pane {
color: var(--text-primary);
- background-color: var(--background-secondary);
+ background-color: var(--auto-background);
transform: translateY(100%);
transition: transform 0.5s ease-in-out,-webkit-transform 0.5s ease-in-out;
transition-delay: 0 !important;
@@ -1080,7 +1097,7 @@ blurred {
}
.anyoneSelect.filterBox {
- background: var(--background-secondary);
+ background: var(--auto-background);
}
.cke_toolbox {
@@ -1102,7 +1119,7 @@ blurred {
}
.legacy-root input.singleSelect:focus {
- background: var(--background-secondary);
+ background: var(--auto-background);
color: var(--text-primary) !important;
}
@@ -1122,7 +1139,7 @@ ul.uiSplitButtonList,
.legacy-root select,
.legacy-root option,
.legacy-root .input {
- background: var(--background-secondary);
+ background: var(--auto-background);
color: var(--text-primary);
}
@@ -1788,7 +1805,7 @@ body {
}
.day:hover {
- background: var(--background-secondary);
+ background: var(--auto-background);
transition: 200ms;
}
@@ -2149,7 +2166,7 @@ body {
margin: 0 8px !important;
border-radius: 5px;
color: var(--text-primary);
- background: var(--background-secondary);
+ background: var(--auto-background);
outline: solid 1px black;
}