From c584f2967098b927800d4a647238f4f3e7c80a72 Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Fri, 22 Sep 2023 11:32:32 +1000 Subject: [PATCH] add gradient support --- src/SEQTA.js | 92 ++++++++++++++++++++++++++++++++--------- src/inject/injected.css | 67 +++++++++++++++--------------- 2 files changed, 106 insertions(+), 53 deletions(-) diff --git a/src/SEQTA.js b/src/SEQTA.js index eec34f2c..d320ebce 100644 --- a/src/SEQTA.js +++ b/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) { diff --git a/src/inject/injected.css b/src/inject/injected.css index ff9606c0..70f997e5 100644 --- a/src/inject/injected.css +++ b/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;