add gradient support

src/SEQTA.js

@@ -684,27 +684,54 @@ function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55
 }
 
 function ColorLuminance(color, lum = 0) {
-  // Convert the input color to HEX format
-  const hexColor = Color(color).hex();
+  // Regular expression to match RGBA colors
+  const rgbaRegex = /rgba?\(([^)]+)\)/g;
 
-  // Original luminance adjustment logic
-  let adjustedHex = String(hexColor).replace(/[^0-9a-f]/gi, "");
-  if (adjustedHex.length < 6) {
-    adjustedHex = adjustedHex[0] + adjustedHex[0] + adjustedHex[1] + adjustedHex[1] + adjustedHex[2] + adjustedHex[2];
+  // Check if the input color is a gradient (linear or radial)
+  if (color.includes("gradient")) {
+    let gradient = color;
+
+    // Find and replace all instances of RGBA in the gradient
+    let match;
+    while ((match = rgbaRegex.exec(color)) !== null) {
+      const rgbaString = match[1];
+      const [r, g, b, a] = rgbaString.split(",").map(str => str.trim());
+
+      // Apply the original luminance adjustment logic
+      let adjustedRgba = [];
+      for (let c of [r, g, b]) {
+        c = Math.round(Math.min(Math.max(0, c + c * lum), 255));
+        adjustedRgba.push(c);
+      }
+      adjustedRgba.push(a);  // Add the alpha component back
+
+      // Replace the original RGBA string with the adjusted one
+      gradient = gradient.replace(`rgba(${rgbaString})`, `rgba(${adjustedRgba.join(", ")})`);
+    }
+
+    return gradient;
+
+  } else {
+    // Handle as a simple color (could be HEX, RGBA, etc., as supported by your Color library)
+    const hexColor = Color(color).hex();
+    let adjustedHex = String(hexColor).replace(/[^0-9a-f]/gi, "");
+    if (adjustedHex.length < 6) {
+      adjustedHex = adjustedHex[0] + adjustedHex[0] + adjustedHex[1] + adjustedHex[1] + adjustedHex[2] + adjustedHex[2];
+    }
+
+    let rgb = "#",
+      c;
+    for (let i = 0; i < 3; i++) {
+      c = parseInt(adjustedHex.substr(i * 2, 2), 16);
+      c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16);
+      rgb += ("00" + c).substring(c.length);
+    }
+
+    return Color(rgb).hex();
   }
-
-  let rgb = "#",
-    c;
-  for (let i = 0; i < 3; i++) {
-    c = parseInt(adjustedHex.substr(i * 2, 2), 16);
-    c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16);
-    rgb += ("00" + c).substring(c.length);
-  }
-
-  // Convert the adjusted color back to the desired output mode
-  return Color(rgb).hex();
 }
 
+
 chrome.storage.onChanged.addListener(function (changes) {
   if (changes.selectedColor) {
     try {
@@ -2285,8 +2312,35 @@ function CheckCurrentLesson(lesson, num) {
 }
 
 function GetThresholdofHex(color) {
-  var rgb = Color.rgb(color).string();
-  return Math.sqrt(rgb.r ** 2 + rgb.g ** 2 + rgb.b ** 2);
+  // Regular expression for matching RGBA colors
+  const rgbaRegex = /rgba?\(([^)]+)\)/g;
+
+  // Check if the color string is a gradient (linear or radial)
+  if (color.includes("gradient")) {
+    let gradient = color;
+    
+    // Find and replace all instances of RGBA in the gradient
+    let match;
+    while ((match = rgbaRegex.exec(color)) !== null) {
+      // Extract the individual components (r, g, b, a)
+      const rgbaString = match[1];
+      const [r, g, b, a] = rgbaString.split(",").map(str => str.trim());
+
+      // Compute the threshold using your existing algorithm
+      const threshold = Math.sqrt(r ** 2 + g ** 2 + b ** 2);
+
+      // Replace the original RGBA string with the computed threshold
+      // Note: You can modify this part based on what you actually want to do with the threshold
+      gradient = gradient.replace(`rgba(${rgbaString})`, `rgba(${threshold}, ${threshold}, ${threshold}, ${a})`);
+    }
+    
+    return gradient;
+
+  } else {
+    // Handle the color as a simple RGBA (or hex, or whatever the Color library supports)
+    const rgb = Color.rgb(color).string();
+    return Math.sqrt(rgb.r ** 2 + rgb.g ** 2 + rgb.b ** 2);
+  }
 }
 
 function CheckCurrentLessonAll(lessons) {

src/inject/injected.css

@@ -2,7 +2,6 @@
 @import "./injected/popup.css";
 
 :root {
-  background-color: var(--better-main) !important;
   background: var(--better-main) !important;
   --navy: #1a1a1a !important;
   --auto-background: var(--better-pale, var(--background-secondary)) !important;
@@ -15,7 +14,7 @@ html {
 
 #container {
   transition: 200ms;
-  background-color: var(--auto-background) !important;
+  background: var(--auto-background) !important;
 }
 
 * {
@@ -215,7 +214,7 @@ li.item.draggable {
 }
 
 html {
-  background-color: var(--better-main) !important;
+  background: var(--better-main) !important;
 }
 
 /* Messages */
@@ -265,29 +264,29 @@ ol:has(.MessageList__avatar___2wxyb svg) {
 }
 
 .content [autocomplete="off"] {
-  background-color: var(--background-primary) !important;
+  background: var(--background-primary) !important;
 }
 
 .MessageList__MessageList___3DxoC .footer {
-  background-color: var(--background-secondary) !important;
+  background: var(--background-secondary) !important;
 }
 
 .content [placeholder="Subject…"] {
   border-radius: 16px;
   padding-left: 12px !important;
-  background-color: var(--background-primary) !important;
+  background: var(--background-primary) !important;
 }
 
 .listWrapper {
   padding: 8px;
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
-  background-color: var(--background-primary);
+  background: var(--background-primary);
   margin-top: 26%;
 }
 
 .functions {
-  background-color: var(--background-primary);
+  background: var(--background-primary);
   margin: 0 !important;
   border-bottom-left-radius: 16px;
   border-bottom-right-radius: 16px;
@@ -466,7 +465,7 @@ ol > [data-label] {
 .Viewer__newMessage___3ToUb {
   border-radius: 0.5rem !important;
   font-size: 0.8rem !important;
-  background-color: var(--background-primary) !important;
+  background: var(--background-primary) !important;
 }
 
 .MessageList__sender___32riy :last-child {
@@ -507,7 +506,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 }
 
 #main > .timetablepage > .container {
-  background-color: var(--background-primary);
+  background: var(--background-primary);
 }
 
 #content {
@@ -693,7 +692,7 @@ div > ol:has(.uiFileHandlerWrapper) {
   font-size: 3em !important;
   font-weight: 300;
   margin: 30px auto 60px;
-  background-color: var(--background-primary);
+  background: var(--background-primary);
   height: 3em;
   align-items: center;
   justify-content: center;
@@ -707,7 +706,7 @@ div > ol:has(.uiFileHandlerWrapper) {
   width: 94%;
   margin: 50px auto;
   height: 19em;
-  background-color: var(--better-main);
+  background: var(--better-main);
   display: flex;
   flex-direction: column;
   -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
@@ -715,7 +714,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 }
 
 .day-container {
-  background-color: var(--background-primary);
+  background: var(--background-primary);
   transition: 200ms;
   width: 100%;
   height: 15em;
@@ -728,7 +727,7 @@ div > ol:has(.uiFileHandlerWrapper) {
   width: 94%;
   margin: 50px auto;
   max-height: 60em;
-  background-color: var(--better-main);
+  background: var(--better-main);
   display: flex;
   flex-direction: column;
   -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
@@ -736,7 +735,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 }
 
 .notice-container {
-  background-color: var(--better-main);
+  background: var(--better-main);
   width: 100%;
   max-height: 55em;
   overflow-y: auto;
@@ -788,7 +787,7 @@ div > ol:has(.uiFileHandlerWrapper) {
   border: 2px solid var(--better-main);
   width: 94%;
   margin: 10px auto 50px;
-  background-color: var(--better-main);
+  background: var(--better-main);
   display: flex;
   flex-direction: column;
   -webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.3);
@@ -806,7 +805,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 }
 
 .shortcuts {
-  background-color: var(--better-main);
+  background: var(--better-main);
   width: 100%;
   padding-top: 10px;
   padding-bottom: 10px;
@@ -990,13 +989,13 @@ div > ol:has(.uiFileHandlerWrapper) {
 }
 
 .modaliser {
-  background-color: var(--better-main);
+  background: var(--better-main);
 }
 
 .alert-container {
   height: 35em;
   width: 22em;
-  background-color: var(--better-sub);
+  background: var(--better-sub);
   position: absolute;
   right: 0;
   top: 0;
@@ -1170,7 +1169,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 
 .Input__Input___3RSTI {
   transition: background-color 0.5s,border-color 0.5s;
-  background-color: var(--auto-background);
+  background: var(--auto-background);
   position: relative;
   padding: 0.5rem 0.75rem;
   border-radius: 0.5rem;
@@ -1244,7 +1243,7 @@ iframe.userHTML {
 
 .Thermoscore__Thermoscore___2tWMi {
   background-image: unset;
-  background-color: var(--auto-background);
+  background: var(--auto-background);
 }
 
 #toolbar {
@@ -1291,7 +1290,7 @@ iframe.userHTML {
 
 ::-webkit-scrollbar-thumb:vertical:hover,
 ::-webkit-scrollbar-thumb:horizontal:hover {
-  background-color: var(--better-light);
+  background: var(--better-light);
 }
 
 ::-webkit-scrollbar-track {
@@ -1381,16 +1380,16 @@ ul {
 }
 
 .legacy-root .uiFileHandler {
-  background-color: var(--auto-background);
+  background: var(--auto-background);
   border-radius: 1rem;
 }
 
 .ResourceList__ResourceList___2z-c1 .legacy-root .uiFileHandler {
-  background-color: var(--background-primary);
+  background: var(--background-primary);
 }
 
 .legacy-root .uiFileHandler.dragTarget {
-  background-color: var(--better-main);
+  background: var(--better-main);
 }
 
 .MenuButton__MenuPanel___2q42B {
@@ -1497,13 +1496,13 @@ blurred {
 }
 
 .uiSlidePane > .pane > .header {
-  background-color: var(--better-main);
+  background: var(--better-main);
 }
 
 .content [placeholder="Subject…"] {
   padding-left: 12px !important;
   border-radius: 1rem;
-  background-color: var(--background-primary) !important;
+  background: var(--background-primary) !important;
   color: var(--text-primary) !important;
 }
 
@@ -1523,7 +1522,7 @@ blurred {
 }
 
 .formattedText > .footer {
-  background-color: var(--background-primary);
+  background: var(--background-primary);
   border-radius: 1rem;
   margin-top: 0.5rem;
 }
@@ -1544,7 +1543,7 @@ blurred {
 
 .uiSlidePane > .pane {
   color: var(--text-primary);
-  background-color: var(--auto-background);
+  background: var(--auto-background);
   transform: translateY(100%);
   transition:
     transform 0.5s ease-in-out,
@@ -2054,7 +2053,7 @@ body {
   width: 94%;
   margin: 50px auto;
   max-height: 60em;
-  background-color: var(--better-main);
+  background: var(--better-main);
   display: flex;
   flex-direction: column;
   -webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.3);
@@ -2226,7 +2225,7 @@ body {
 
 /* When the checkbox is checked, add a blue background */
 .upcoming-checkbox-container input:checked ~ .upcoming-checkmark {
-  background-color: var(--item-colour);
+  background: var(--item-colour);
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
@@ -2378,7 +2377,7 @@ body {
 }
 
 .upcoming-items {
-  background-color: var(--background-primary);
+  background: var(--background-primary);
   transition: 200ms;
   width: 100%;
   max-height: 55em;
@@ -2532,7 +2531,7 @@ body {
 
 /* When the checkbox is checked, add a blue background */
 .upcoming-checkbox-container input:checked ~ .upcoming-checkmark {
-  background-color: var(--item-colour);
+  background: var(--item-colour);
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
@@ -2668,7 +2667,7 @@ body {
   transform: scale(0);
   transition: transform 0.2s;
   transform-origin: top;
-  background-color: var(--background-primary);
+  background: var(--background-primary);
   color: var(--text-primary);
   text-align: center;
   border-radius: 6px;