UI improvements + new features

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "BetterSEQTA+",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Make SEQTA usable and beautiful! A fork of BetterSEQTA to continue development and add WAY more features!!!",
   "icons": {
     "32": "icons/icon-32.png",

public/popup/info.css

@@ -24,6 +24,29 @@
   z-index: 20;
 }
 
+#bksliderinput {
+  background-color: #20e060 !important;
+  color: #20e060 !important;
+  border-radius: 16px !important;
+  border: none !important;
+  width: 100% !important;
+  height: 100% !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+#bksliderinput::-webkit-slider-thumb {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 16px !important;
+  height: 16px !important;
+  transform: scale(1.5) !important;
+  background: #86f078 !important;
+  cursor: pointer !important;
+  border-radius: 50% !important;
+  border: 1px solid #20e060 !important;
+}
+
 .selector-container {
   font-family: Rubik, sans-serif;
   background-color: #131313;

public/popup/info.html

@@ -343,6 +343,16 @@
             </div>
           </div>
 
+          <div class="item-container">
+            <div class="text-container">
+              <h1 class="addonitem">Animated Background Speed</h1>
+              <p class="item subitem">Controls the speed of the animated background.</p>
+            </div>
+            <div class="bkslider">
+              <input type="range" id="bksliderinput" name="Animated Background Slider" min="1" max="200" />
+            </div>
+          </div>
+
           <div class="item-container">
             <div class="text-container">
               <h1 class="addonitem">Custom Theme Colour</h1>

public/popup/info.js

@@ -1,16 +1,3 @@
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
 /*global chrome*/
 
 const onoffselection = document.querySelector("#onoff");
@@ -22,6 +9,8 @@ const miscsection = document.querySelector("#miscsection");
 //const mainpage = document.querySelector("#mainpage");
 const colorpicker = document.querySelector("#colorpicker");
 const animatedbk = document.querySelector("#animatedbk");
+const bkslider = document.querySelector("#bksliderinput");
+
 const customshortcutbutton = document.getElementsByClassName(
   "custom-shortcuts-button",
 )[0];
@@ -97,9 +86,7 @@ function FindSEQTATab() {
     }
   });
 }
-/*
+
-Store the currently selected settings using chrome.storage.local.
-*/
 function storeSettings() {
   chrome.storage.local.set({ onoff: onoffselection.checked }, function () {
     FindSEQTATab();
@@ -112,6 +99,7 @@ function storeNotificationSettings() {
   });
   chrome.storage.local.set({ lessonalert: lessonalert.checked });
   chrome.storage.local.set({ animatedbk: animatedbk.checked });
+  chrome.storage.local.set({ bksliderinput: bkslider.value });
 }
 
 function StoreAllSettings() {
@@ -141,6 +129,7 @@ function updateUI(restoredSettings) {
     notificationcollector.checked = restoredSettings.notificationcollector;
     lessonalert.checked = restoredSettings.lessonalert;
     animatedbk.checked = restoredSettings.animatedbk;
+    bkslider.value = restoredSettings.bksliderinput;
     chrome.storage.local.get(["shortcuts"], function (result) {
       var shortcuts = Object.values(result)[0];
       for (var i = 0; i < shortcutbuttons.length; i++) {
@@ -158,7 +147,7 @@ var stringtoHTML = function (str) {
 };
 
 function CreateShortcutDiv(name) {
-  div = stringtoHTML(`
+  let div = stringtoHTML(`
   <div class="item-container menushortcuts" data-customshortcut="${name}">
     <div class="text-container">
       <h1 class="addonitem" style="font-size: 8px !important;font-weight: 300;">Custom</h1>
@@ -188,7 +177,7 @@ function AddCustomShortcuts() {
 }
 
 function DeleteCustomShortcut(name) {
-  item = document.querySelector(`[data-customshortcut="${name}"]`);
+  let item = document.querySelector(`[data-customshortcut="${name}"]`);
   item.remove();
   chrome.storage.local.get(["customshortcuts"], function (result) {
     var customshortcuts = Object.values(result)[0];
@@ -237,9 +226,6 @@ function CreateCustomShortcut() {
   CreateShortcutDiv(shortcutname);
 }
 
-function onError(e) {
-  console.error(e);
-}
 /*
 On opening the options page, fetch stored settings and update the UI with them.
 */
@@ -258,7 +244,7 @@ document.addEventListener("DOMContentLoaded", function () {
   version.innerHTML = `v${chrome.runtime.getManifest().version}`;
   github.addEventListener("click", openGithub);
 
-  domainbutton.addEventListener("click", function (event) {
+  domainbutton.addEventListener("click", function () {
     chrome.runtime.sendMessage({ type: "addPermissions" });
   });
 
@@ -344,6 +330,7 @@ notificationcollector.addEventListener("change", storeNotificationSettings);
 lessonalert.addEventListener("change", storeNotificationSettings);
 
 animatedbk.addEventListener("change", storeNotificationSettings);
+bkslider.addEventListener("change", storeNotificationSettings);
 
 for (let i = 0; i < allinputs.length; i++) {
   if (

src/SEQTA.js

@@ -25,6 +25,33 @@ function SetDisplayNone(ElementName) {
   return `li[data-key=${ElementName}]{display:var(--menuHidden) !important; transition: 1s;}`;
 }
 
+function animbkEnable (item) {
+  if (item.animatedbk) {
+    CreateBackground();
+  } else {
+    RemoveBackground();
+    document.getElementById("container").style.background = "var(--background-secondary)";
+  }
+}
+
+function bkValues (item) {
+  const bg = document.getElementsByClassName("bg");
+  const bg2 = document.getElementsByClassName("bg2");
+  const bg3 = document.getElementsByClassName("bg3");
+  const value = 200 - item.bksliderinput;
+
+  const minDuration = 1; // minimum duration in seconds
+  const maxDuration = 10; // maximum duration in seconds
+  const durationRange = maxDuration - minDuration;
+  const bgDuration = minDuration + (value / 200) * durationRange;
+  const bg2Duration = minDuration + ((value / 200) + 0.05) * durationRange;
+  const bg3Duration = minDuration + ((value / 200) + 0.1) * durationRange;
+
+  bg[0].style.animationDuration = `${bgDuration}s`;
+  bg2[0].style.animationDuration = `${bg2Duration}s`;
+  bg3[0].style.animationDuration = `${bg3Duration}s`;
+}
+
 function ApplyCSSToHiddenMenuItems() {
   var stylesheetInnerText = "";
   chrome.storage.local.get(null, function (result) {
@@ -190,6 +217,15 @@ function CreateBackground() {
   bklocation.insertBefore(bk3, menu);
 }
 
+function RemoveBackground() {
+  var bk = document.getElementsByClassName("bg");
+  var bk2 = document.getElementsByClassName("bg2");
+  var bk3 = document.getElementsByClassName("bg3");
+  bk[0].remove();
+  bk2[0].remove();
+  bk3[0].remove();
+}
+
 function waitForElm(selector) {
   return new Promise((resolve) => {
     if (document.querySelector(selector)) {
@@ -949,6 +985,8 @@ function RunExtensionSettingsJS() {
   //const mainpage = document.querySelector("#mainpage");
   const colorpicker = document.querySelector("#colorpicker");
   const animatedbk = document.querySelector("#animatedbk");
+  const bkslider = document.querySelector("#bksliderinput");
+
   const customshortcutbutton = document.getElementsByClassName(
     "custom-shortcuts-button",
   )[0];
@@ -1015,6 +1053,7 @@ function RunExtensionSettingsJS() {
     });
     chrome.storage.local.set({ lessonalert: lessonalert.checked });
     chrome.storage.local.set({ animatedbk: animatedbk.checked });
+    chrome.storage.local.set({ bksliderinput: bkslider.value });
   }
 
   function StoreAllSettings() {
@@ -1044,6 +1083,7 @@ function RunExtensionSettingsJS() {
       notificationcollector.checked = restoredSettings.notificationcollector;
       lessonalert.checked = restoredSettings.lessonalert;
       animatedbk.checked = restoredSettings.animatedbk;
+      bkslider.value = restoredSettings.bksliderinput;
       chrome.storage.local.get(["shortcuts"], function (result) {
         var shortcuts = Object.values(result)[0];
         for (var i = 0; i < shortcutbuttons.length; i++) {
@@ -1223,14 +1263,22 @@ function RunExtensionSettingsJS() {
   onoffselection.addEventListener("change", storeSettings);
   notificationcollector.addEventListener("change", storeNotificationSettings);
   lessonalert.addEventListener("change", storeNotificationSettings);
-
+  bkslider.addEventListener("change", () => {
-  animatedbk.addEventListener("change", storeNotificationSettings);
+    storeNotificationSettings();
+    chrome.storage.local.get(["bksliderinput"]).then(bkValues);
+  });
+  animatedbk.addEventListener("change", () => {
+    storeNotificationSettings();
+    animbkEnable({ animatedbk: animatedbk.checked });
+  });
 
   for (let i = 0; i < allinputs.length; i++) {
     if (
       allinputs[i].id != "colorpicker" &&
       allinputs[i].id != "shortcuturl" &&
-      allinputs[i].id != "shortcutname"
+      allinputs[i].id != "shortcutname" &&
+      allinputs[i].id != "bkslider" &&
+      allinputs[i].id != "bksliderinput"
     ) {
       allinputs[i].addEventListener("change", () => {
         applybutton.style.left = "4px";
@@ -1488,6 +1536,16 @@ function CallExtensionSettings() {
           </div>
         </div>
 
+        <div class="item-container">
+          <div class="text-container">
+            <h1 class="addonitem">Animated Background Speed</h1>
+            <p class="item subitem">Controls the speed of the animated background.</p>
+          </div>
+          <div class="bkslider">
+            <input type="range" id="bksliderinput" name="Animated Background Slider" min="1" max="200" />
+          </div>
+        </div>
+
         <div class="item-container">
           <div class="text-container">
             <h1 class="addonitem">Custom Theme Colour</h1>
@@ -1856,14 +1914,11 @@ function AddBetterSEQTAElements(toggle) {
       if (toggle) {
         // Creates Home menu button and appends it as the first child of the list
 
-        chrome.storage.local.get(["animatedbk"], function (result) {
+        const result = chrome.storage.local.get(["animatedbk"]);
-          if (result.animatedbk) {
+        const sliderVal = chrome.storage.local.get(["bksliderinput"]);
-            CreateBackground();
+
-          } else {
+        result.then(animbkEnable);
-            document.getElementById("container").style.background =
+        sliderVal.then(bkValues);
-              "var(--background-secondary)";
-          }
-        });
 
         // Load darkmode state
         chrome.storage.local.get(["DarkMode"], function (result) {

src/inject/iframe.css

@@ -21,6 +21,10 @@ span {
     0 0 1em #161616;
 }
 
+body {
+  background-color: transparent !important;
+}
+
 blockquote.forward > .preamble {
   color: rgba(255, 255, 255, 0.7) !important;
 }
@@ -36,3 +40,26 @@ blockquote.forward > .preamble > .sender > .label {
 table th {
   background-color: #161616;
 }
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  transition: 1s;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-corner {
+  background: none;
+}
+
+.forward {
+  border-radius: 1rem;
+}
+
+.preamble {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}

src/inject/injected.css

@@ -59,6 +59,28 @@ html {
   }
 }
 
+#bksliderinput {
+  background-color: #20e060 !important;
+  border-radius: 16px !important;
+  border: none !important;
+  width: 100% !important;
+  height: 100% !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+#bksliderinput::-webkit-slider-thumb {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 16px !important;
+  height: 16px !important;
+  transform: scale(1.5) !important;
+  background: #86f078 !important;
+  cursor: pointer !important;
+  border-radius: 50% !important;
+  border: 1px solid #20e060 !important;
+}
+
 .connectedNotificationsWrapper > div > button > svg > g {
   fill: var(--background-primary) !important;
 }
@@ -234,9 +256,15 @@ html {
 
 .listWrapper:not(:has(.list *)) + .functions,
 .listWrapper:not(:has(.list *)) {
-  display: none !important;
+  opacity: 0 !important;
 }
 
+.listWrapper + .functions,
+.listWrapper {
+  transition: opacity 500ms;
+}
+
+
 [data-type="student"] .header {
   color: black !important;
 }
@@ -258,6 +286,7 @@ ol:has(.MessageList__avatar___2wxyb svg) {
     150,
     150
   ) !important; /* color of the scroll thumb */
+  
 }
 
 .content .footer {
@@ -269,6 +298,10 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   background-color: var(--background-primary) !important;
 }
 
+.MessageList__MessageList___3DxoC .footer {
+  background-color: var(--background-secondary) !important;
+}
+
 .content [placeholder="Subject…"] {
   border-radius: 16px;
   padding-left: 12px !important;
@@ -320,11 +353,6 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   margin-bottom: 4px !important;
 }
 
-.uiFileHandler {
-  -webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0) !important;
-  box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0) !important;
-}
-
 .uiSlidePane {
   background-color: rgba(0, 0, 0, 0);
   transition-duration: 500ms !important;
@@ -344,6 +372,32 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   padding-top: 10px;
 }
 
+#main .timetablepage .quickbar {
+  border: none;
+  border-radius: 1rem;
+}
+
+.quickbar .actions {
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+}
+
+.quickbar .attendance {
+  border-top-left-radius: 100%;
+  border-bottom-right-radius: 1rem !important;
+}
+
+#main > .timetablepage > .quickbar.below::before {
+  border-bottom-color: var(--background-primary);
+  top: -1.75rem;
+}
+
+#main .timetablepage .actions a,
+#main .timetablepage .actions button {
+  background-color: transparent;
+  border: none;
+}
+
 .document {
   border-radius: 32px !important;
 }
@@ -406,11 +460,20 @@ td.colourBar {
 #main > .reports > .item > .report {
   filter: brightness(1) !important;
   border-radius: 16px !important;
-  border: 2px solid lightgray !important;
+  border: 2px solid var(--better-main) !important;
+  transform: scale(0.97);
+  transition: transform 0.2s ease-out !important;
+}
+
+#main > .reports > .item > .report:hover {
+  transform: scale(1);
 }
 
 #main > .reports > .item {
   box-shadow: none !important;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: visible;
 }
 
 ol > [data-message] {
@@ -1074,10 +1137,24 @@ div > ol:has(.uiFileHandlerWrapper) {
   margin: auto 0;
 }
 
+.notifications__details___193F4 {
+  max-width: 80%;
+  overflow: clip;
+}
+
+.notifications__details___193F4 div {
+  text-overflow: ellipsis;
+}
+
 #main > .messages {
   color: var(--text-primary);
 }
 
+.Overview__details___2Zlnr {
+  border-radius: 1rem;
+  overflow: hidden;
+}
+
 .Viewer__sidebar___1Btu4 {
   background: var(--auto-background);
   color: var(--text-primary);
@@ -1092,6 +1169,12 @@ div > ol:has(.uiFileHandlerWrapper) {
   background: none;
 }
 
+.MessageList__MessageList___3DxoC .Button__Button___3SRFo {
+  width: 100%;
+  min-height: 2rem;
+  text-align: center;
+}
+
 .MessageList__MessageList___3DxoC {
   background: var(--background-primary);
 }
@@ -1155,7 +1238,9 @@ iframe.userHTML {
 }
 
 #main > .reports {
-  background: var(--auto-background);
+  background: none;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 #main > .reports > .item > .report > .year {
@@ -1163,6 +1248,14 @@ iframe.userHTML {
   color: var(--text-color);
 }
 
+.Spinner__Spinner___CStEb > svg {
+  margin: 1rem 0;
+}
+
+.Spinner__Spinner___CStEb > svg > path {
+  stroke: var(--text-primary) !important;
+}
+
 #main > .reports > .item > .report > .term {
   color: var(--text-color);
   background: var(--better-main);
@@ -1224,14 +1317,6 @@ iframe.userHTML {
   transition: 1s;
 }
 
-::-webkit-scrollbar-thumb {
-  background-color: var(--better-light);
-  background-clip: padding-box;
-  border: 2px solid transparent;
-  transition: 1s;
-  border-radius: 1rem !important;
-}
-
 ::-webkit-scrollbar-thumb:vertical:hover,
 ::-webkit-scrollbar-thumb:horizontal:hover {
   background-color: var(--better-light);
@@ -1277,6 +1362,26 @@ ul {
   color: var(--text-primary);
 }
 
+.SelectedAssessment__SelectedAssessment___3Bu5D > .SelectedAssessment__meta___1gq_y > .SelectedAssessment__clearBtn___21D85 {
+  background: var(--better-main);
+}
+
+.SelectedAssessment__SelectedAssessment___3Bu5D > .SelectedAssessment__meta___1gq_y {
+  border-bottom: 1px solid var(--better-main);
+}
+
+.TabSet__TabSet___Vo-SZ > ol.TabSet__tabs___1RRZk > li.TabSet__selected___1psfF {
+  border-bottom-color: var(--better-main);
+}
+
+.TabSet__TabSet___Vo-SZ > ol.TabSet__tabs___1RRZk {
+  border-bottom: none;
+}
+
+.TabSet__TabSet___Vo-SZ > ol.TabSet__tabs___1RRZk > li:hover {
+  box-shadow: inset 0 -1px var(--better-main);
+}
+
 .TabSet__TabSet___Vo-SZ > .TabSet__tabContainer___3iIRe {
   background: unset;
 }
@@ -1285,21 +1390,71 @@ ul {
   background: var(--background-primary);
 }
 
-.legacy-root .uiFileHandler {
+.uiFileHandler {
-  background: var(--auto-background);
+  -webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0) !important;
+  box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0) !important;
+  background: var(--background-primary);
   margin: 8px 0px 0px 0px;
+  border-radius: 1rem;
+}
+
+.mediaWrapper, .mediaRecorder, .MediaRecorder__MediaRecorder___2c2_M {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  overflow: hidden;
+}
+
+.MediaRecorder__MediaRecorder___2c2_M {
+  background: var(--background-primary);
+}
+
+.legacy-root .uiFileHandler {
+  background-color: var(--auto-background);
+  border-radius: 1rem;
+}
+
+.ResourceList__ResourceList___2z-c1 .legacy-root .uiFileHandler {
+  background-color: var(--background-primary);
+}
+
+.legacy-root .uiFileHandler.dragTarget {
+  background-color: var(--better-main);
+}
+
+.MenuButton__MenuPanel___2q42B {
+  background: var(--background-primary);
+  color: var(--text-primary);
 }
 
 .dailycal > .header {
   color: var(--text-primary);
 }
 
+#main > .timetablepage {
+  color: var(--text-primary) !important;
+}
+
 #main > .timetablepage > .container > .dailycal {
   color: var(--text-primary);
 }
 
 #main > .timetablepage > .note {
   color: var(--text-primary);
+  display: none;
+}
+
+.days td {
+  overflow: hidden;
+}
+
+div.entry.class {
+  width: 100% !important;
+  border-radius: 0.25rem;
+}
+
+.timetablepage .dailycal>.content>.wrapper>.days>tbody>tr>td>.entriesWrapper {
+  min-width: 0;
+  width: auto !important;
 }
 
 .uiFileHandler .uiButton {
@@ -1308,6 +1463,11 @@ ul {
   margin-top: 0.25rem !important;
 }
 
+.uiFileHandlerPanel::before {
+  border: 12px solid rgba(0, 0, 0, 0);
+  border-top-color: var(--background-primary);
+}
+
 .uiButton:hover {
   box-shadow: none !important;
 }
@@ -1317,8 +1477,18 @@ ul {
 }
 
 .uiFileHandlerPanel {
-  background: var(--better-main);
+  background: var(--background-primary);
   color: var(--text-primary);
+  border-radius: 1rem;
+}
+
+.sources .uiButton {
+  border-radius: 1rem;
+}
+
+
+.MediaRecorder__preview___1hQqY, .MediaRecorder__actions___3Jjvp {
+  background: var(--background-primary);
 }
 
 .Rubric__Rubric___2AAKS > .Rubric__line___JCC3Y {
@@ -1428,6 +1598,10 @@ blurred {
   background: #797979;
 }
 
+.legacy-root button, .legacy-root a {
+  background: var(--background-primary);
+}
+
 .cke_toolbox > .cke_toolbar .cke_combo_on > .cke_combo_button,
 .cke_toolbox > .cke_toolbar .cke_button_on {
   background-color: #797979 !important;