mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-05 19:24:39 +00:00
add gradient support
This commit is contained in:
SethBurkart123
+59
-5
@@ -684,10 +684,36 @@ 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
|
||||
// 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];
|
||||
@@ -701,10 +727,11 @@ function ColorLuminance(color, lum = 0) {
|
||||
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();
|
||||
// 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) {
|
||||
|
||||
+33
-34
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user