diff --git a/src/SEQTA.js b/src/SEQTA.js
index 4972b37d..32b83a6d 100644
--- a/src/SEQTA.js
+++ b/src/SEQTA.js
@@ -14,7 +14,6 @@ import StorageListener from "./seqta/utils/StorageListener.js";
import { updateBgDurations } from "./seqta/ui/Animation.js";
import { updateAllColors } from "./seqta/ui/colors/Manager.js";
import { appendBackgroundToUI } from "./seqta/ui/ImageBackgrounds.js";
-import { lightenAndPaleColor } from "./seqta/ui/colors/lightenAndPaleColor.js";
export let isChrome = window.chrome;
let SettingsClicked = false;
@@ -308,7 +307,7 @@ async function RunColourCheck(element) {
}
}
-function GetiFrameCSSElement() {
+export function GetiFrameCSSElement() {
var cssFile = chrome.runtime.getURL("inject/iframe.css");
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
@@ -403,8 +402,8 @@ function SortMessagePageItems(messagesParentElement) {
});
}
-function LoadPageElements() {
- AddBetterSEQTAElements(true);
+async function LoadPageElements() {
+ await AddBetterSEQTAElements(true);
var sublink = window.location.href.split("/")[4];
switch (sublink) {
case "news":
@@ -1094,7 +1093,7 @@ function ReplaceMenuSVG(element, svg) {
item.insertBefore(newsvg, item.firstChild);
}
-function AddBetterSEQTAElements(toggle) {
+async function AddBetterSEQTAElements(toggle) {
var code = document.getElementsByClassName("code")[0];
// Replaces students code with the version of BetterSEQTA
if (code != null) {
@@ -1275,114 +1274,38 @@ function AddBetterSEQTAElements(toggle) {
var ContentDiv = document.getElementById("content");
ContentDiv.append(SettingsButton.firstChild);
- chrome.storage.local.get(["DarkMode"], function (result) {
- DarkMode = result.DarkMode;
-
- let tooltipstring = GetLightDarkModeString(DarkMode);
- var LightDarkModeButton = stringToHTML(
- String.raw``,
- );
- ContentDiv.append(LightDarkModeButton.firstChild);
-
- let LightDarkModeElement = document.getElementById("LightDarkModeButton");
-
- 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),
- );
- });
- } catch (err) {
- console.log(err);
- }
- }
- let darklightText = document.getElementById("darklighttooliptext");
- LightDarkModeElement.addEventListener("click", function () {
- chrome.storage.local.get(["DarkMode"], function (result) {
- DarkMode = result.DarkMode;
- let alliframes = document.getElementsByTagName("iframe");
- let fileref = GetiFrameCSSElement();
-
- if (!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];
-
- if (element.getAttribute("excludeDarkCheck") == "true") {
- continue;
- }
-
- console.log(element);
- console.log(element.contentDocument.documentElement);
-
- 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),
- );
- });
- } catch (err) {
- console.log(err);
- }
- LightDarkModeElement.firstChild.innerHTML = "";
-
- for (let i = 0; i < alliframes.length; i++) {
- const element = alliframes[i];
-
- if (element.getAttribute("excludeDarkCheck") == "true") {
- continue;
- }
-
- element.contentDocument.documentElement.childNodes[1].style.color =
- "black";
- element.contentDocument.documentElement.firstChild.lastChild.remove();
- }
- }
- tooltipstring = GetLightDarkModeString(!result.DarkMode);
- darklightText.innerText = tooltipstring;
- chrome.storage.local.set({ DarkMode: !result.DarkMode });
- });
+ const result = await new Promise(resolve => {
+ chrome.storage.local.get(null, resolve);
+ });
+
+ const DarkMode = result.DarkMode;
+ const tooltipString = GetLightDarkModeString(DarkMode);
+ const svgContent = DarkMode ? "" :
+ "";
+
+ const LightDarkModeButton = stringToHTML(`
+
+ `);
+
+ ContentDiv.append(LightDarkModeButton.firstChild);
+
+ updateAllColors(DarkMode, result.selectedColor);
+
+ document.getElementById("LightDarkModeButton").addEventListener("click", async () => {
+ const result = await new Promise(resolve => {
+ chrome.storage.local.get(null, resolve);
});
+
+ const newDarkMode = !result.DarkMode;
+ chrome.storage.local.set({ DarkMode: newDarkMode });
+
+ updateAllColors(newDarkMode, result.selectedColor);
+
+ const darklightText = document.getElementById("darklighttooliptext");
+ darklightText.innerText = GetLightDarkModeString(newDarkMode);
});
} else {
// Creates settings and dashboard buttons next to alerts
@@ -1395,6 +1318,7 @@ function AddBetterSEQTAElements(toggle) {
var AddedSettings = document.getElementById("AddedSettings");
var extensionsettings = document.getElementById("ExtensionPopup");
+
AddedSettings.addEventListener("click", function () {
extensionsettings.classList.toggle("hide");
SettingsClicked = true;
diff --git a/src/inject/injected.css b/src/inject/injected.css
index 89c5b790..10d49bbf 100644
--- a/src/inject/injected.css
+++ b/src/inject/injected.css
@@ -35,6 +35,7 @@ html {
#main {
color: var(--text-primary);
+ padding-top: 5rem;
}
.forums {
@@ -143,7 +144,6 @@ ul.magicDelete > li.deleting {
color: var(--text-color);
border-right: none;
font-family: Rubik, sans-serif !important;
- box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
z-index: 11 !important;
}
@@ -474,12 +474,31 @@ div > ol:has(.uiFileHandlerWrapper) {
min-height: 8rem !important;
}
-.student #menu > ul::before {
+/* .student #menu::before {
+ background: var(--better-main);
+ top: 0;
+ position: sticky;
+ height: 16px;
+} */
+
+/* .student #menu > ul::before {
background-image: var(--betterseqta-logo);
- position: -webkit-sticky; /* Safari */
+ position: -webkit-sticky;
position: sticky;
top: 0;
- background-color: var(--better-main);
+ background-color: var(--background-primary);
+ height: 69.5px;
+ webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.2) !important;
+ box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
+} */
+
+.student #menu > ul::before {
+ background: none;
+ height: 0;
+}
+
+.student #menu > ul {
+ margin-top: 70px;
}
.assessmentsWrapper .message {
@@ -586,6 +605,14 @@ div > ol:has(.uiFileHandlerWrapper) {
--colour: unset;
}
+/* #title span {
+ display: none;
+} */
+
+#editmenu {
+ display: none;
+}
+
#title {
background: var(--background-primary);
color: var(--text-primary);
@@ -595,6 +622,10 @@ div > ol:has(.uiFileHandlerWrapper) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-weight: 500 !important;
z-index: 1;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
}
.bg {
diff --git a/src/seqta/ui/colors/Manager.js b/src/seqta/ui/colors/Manager.js
index 959358f3..858036c1 100644
--- a/src/seqta/ui/colors/Manager.js
+++ b/src/seqta/ui/colors/Manager.js
@@ -1,5 +1,5 @@
/* global chrome */
-import { GetThresholdOfColor } from "../../../SEQTA.js";
+import { GetThresholdOfColor, GetiFrameCSSElement } from "../../../SEQTA.js";
import { lightenAndPaleColor } from "./lightenAndPaleColor.js";
import ColorLuminance from "./ColorLuminance.js";
@@ -33,13 +33,19 @@ export function updateAllColors(storedSetting, newColor = null) {
modeProps = DarkMode ? {
"--background-primary": "#232323",
"--background-secondary": "#1a1a1a",
- "--text-primary": "white"
+ "--text-primary": "white",
+ "--betterseqta-logo": `url(${getChromeURL("icons/betterseqta-light-full.png")})`
} : {
"--background-primary": "#ffffff",
"--background-secondary": "#e5e7eb",
"--text-primary": "black",
- "--better-pale": lightenAndPaleColor(selectedColor)
+ "--better-pale": lightenAndPaleColor(selectedColor),
+ "--betterseqta-logo": `url(${getChromeURL("icons/betterseqta-dark-full.png")})`
};
+
+ if (DarkMode) {
+ document.documentElement.style.removeProperty("--better-pale");
+ }
}
// Dynamic properties, always applied
@@ -47,7 +53,6 @@ export function updateAllColors(storedSetting, newColor = null) {
const isBright = rgbThreshold > 210;
const dynamicProps = {
"--text-color": isBright ? "black" : "white",
- "--betterseqta-logo": `url(${getChromeURL(`icons/betterseqta-${isBright ? "dark" : "light"}-full.png`)})`,
"--better-light": selectedColor === "#ffffff" ? "#b7b7b7" : ColorLuminance(selectedColor, 0.95)
};
@@ -58,6 +63,26 @@ export function updateAllColors(storedSetting, newColor = null) {
if (DarkMode !== null) {
document.querySelector("link[rel*='icon']").href = getChromeURL("icons/icon-48.png");
}
+
+ let alliframes = document.getElementsByTagName("iframe");
+ let fileref = GetiFrameCSSElement();
+
+ for (let i = 0; i < alliframes.length; i++) {
+ const element = alliframes[i];
+
+ if (element.getAttribute("excludeDarkCheck") == "true") {
+ continue;
+ }
+
+ console.log(element);
+ console.log(element.contentDocument.documentElement);
+
+ element.contentDocument.documentElement.childNodes[1].style.color =
+ DarkMode ? "black" : "white";
+ element.contentDocument.documentElement.firstChild.appendChild(
+ fileref,
+ );
+ }
}
export function getDarkMode() {