BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

add gradient support

Browse Source
This commit is contained in:
SethBurkart123
2023-09-22 11:32:32 +10:00
parent cbc84c8e79
commit c584f29670
2 changed files with 106 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/SEQTA.js
+59 -5
View File
@@ -684,10 +684,36 @@ function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55
} }
function ColorLuminance(color, lum = 0) { function ColorLuminance(color, lum = 0) {
// Convert the input color to HEX format // Regular expression to match RGBA colors
const hexColor = Color(color).hex(); 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, ""); let adjustedHex = String(hexColor).replace(/[^0-9a-f]/gi, "");
if (adjustedHex.length < 6) { if (adjustedHex.length < 6) {
adjustedHex = adjustedHex[0] + adjustedHex[0] + adjustedHex[1] + adjustedHex[1] + adjustedHex[2] + adjustedHex[2]; 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); rgb += ("00" + c).substring(c.length);
} }
// Convert the adjusted color back to the desired output mode
return Color(rgb).hex(); return Color(rgb).hex();
}
} }
chrome.storage.onChanged.addListener(function (changes) { chrome.storage.onChanged.addListener(function (changes) {
if (changes.selectedColor) { if (changes.selectedColor) {
try { try {
@@ -2285,8 +2312,35 @@ function CheckCurrentLesson(lesson, num) {
} }
function GetThresholdofHex(color) { 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); return Math.sqrt(rgb.r ** 2 + rgb.g ** 2 + rgb.b ** 2);
}
} }
function CheckCurrentLessonAll(lessons) { function CheckCurrentLessonAll(lessons) {
src/inject/injected.css
+33 -34
View File
@@ -2,7 +2,6 @@
@import "./injected/popup.css"; @import "./injected/popup.css";
:root { :root {
background-color: var(--better-main) !important;
background: var(--better-main) !important; background: var(--better-main) !important;
--navy: #1a1a1a !important; --navy: #1a1a1a !important;
--auto-background: var(--better-pale, var(--background-secondary)) !important; --auto-background: var(--better-pale, var(--background-secondary)) !important;
@@ -15,7 +14,7 @@ html {
#container { #container {
transition: 200ms; transition: 200ms;
background-color: var(--auto-background) !important; background: var(--auto-background) !important;
} }
* { * {
@@ -215,7 +214,7 @@ li.item.draggable {
} }
html { html {
background-color: var(--better-main) !important; background: var(--better-main) !important;
} }
/* Messages */ /* Messages */
@@ -265,29 +264,29 @@ ol:has(.MessageList__avatar___2wxyb svg) {
} }
.content [autocomplete="off"] { .content [autocomplete="off"] {
background-color: var(--background-primary) !important; background: var(--background-primary) !important;
} }
.MessageList__MessageList___3DxoC .footer { .MessageList__MessageList___3DxoC .footer {
background-color: var(--background-secondary) !important; background: var(--background-secondary) !important;
} }
.content [placeholder="Subject…"] { .content [placeholder="Subject…"] {
border-radius: 16px; border-radius: 16px;
padding-left: 12px !important; padding-left: 12px !important;
background-color: var(--background-primary) !important; background: var(--background-primary) !important;
} }
.listWrapper { .listWrapper {
padding: 8px; padding: 8px;
border-top-left-radius: 16px; border-top-left-radius: 16px;
border-top-right-radius: 16px; border-top-right-radius: 16px;
background-color: var(--background-primary); background: var(--background-primary);
margin-top: 26%; margin-top: 26%;
} }
.functions { .functions {
background-color: var(--background-primary); background: var(--background-primary);
margin: 0 !important; margin: 0 !important;
border-bottom-left-radius: 16px; border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px; border-bottom-right-radius: 16px;
@@ -466,7 +465,7 @@ ol > [data-label] {
.Viewer__newMessage___3ToUb { .Viewer__newMessage___3ToUb {
border-radius: 0.5rem !important; border-radius: 0.5rem !important;
font-size: 0.8rem !important; font-size: 0.8rem !important;
background-color: var(--background-primary) !important; background: var(--background-primary) !important;
} }
.MessageList__sender___32riy :last-child { .MessageList__sender___32riy :last-child {
@@ -507,7 +506,7 @@ div > ol:has(.uiFileHandlerWrapper) {
} }
#main > .timetablepage > .container { #main > .timetablepage > .container {
background-color: var(--background-primary); background: var(--background-primary);
} }
#content { #content {
@@ -693,7 +692,7 @@ div > ol:has(.uiFileHandlerWrapper) {
font-size: 3em !important; font-size: 3em !important;
font-weight: 300; font-weight: 300;
margin: 30px auto 60px; margin: 30px auto 60px;
background-color: var(--background-primary); background: var(--background-primary);
height: 3em; height: 3em;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -707,7 +706,7 @@ div > ol:has(.uiFileHandlerWrapper) {
width: 94%; width: 94%;
margin: 50px auto; margin: 50px auto;
height: 19em; height: 19em;
background-color: var(--better-main); background: var(--better-main);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
@@ -715,7 +714,7 @@ div > ol:has(.uiFileHandlerWrapper) {
} }
.day-container { .day-container {
background-color: var(--background-primary); background: var(--background-primary);
transition: 200ms; transition: 200ms;
width: 100%; width: 100%;
height: 15em; height: 15em;
@@ -728,7 +727,7 @@ div > ol:has(.uiFileHandlerWrapper) {
width: 94%; width: 94%;
margin: 50px auto; margin: 50px auto;
max-height: 60em; max-height: 60em;
background-color: var(--better-main); background: var(--better-main);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
@@ -736,7 +735,7 @@ div > ol:has(.uiFileHandlerWrapper) {
} }
.notice-container { .notice-container {
background-color: var(--better-main); background: var(--better-main);
width: 100%; width: 100%;
max-height: 55em; max-height: 55em;
overflow-y: auto; overflow-y: auto;
@@ -788,7 +787,7 @@ div > ol:has(.uiFileHandlerWrapper) {
border: 2px solid var(--better-main); border: 2px solid var(--better-main);
width: 94%; width: 94%;
margin: 10px auto 50px; margin: 10px auto 50px;
background-color: var(--better-main); background: var(--better-main);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.3);
@@ -806,7 +805,7 @@ div > ol:has(.uiFileHandlerWrapper) {
} }
.shortcuts { .shortcuts {
background-color: var(--better-main); background: var(--better-main);
width: 100%; width: 100%;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
@@ -990,13 +989,13 @@ div > ol:has(.uiFileHandlerWrapper) {
} }
.modaliser { .modaliser {
background-color: var(--better-main); background: var(--better-main);
} }
.alert-container { .alert-container {
height: 35em; height: 35em;
width: 22em; width: 22em;
background-color: var(--better-sub); background: var(--better-sub);
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@@ -1170,7 +1169,7 @@ div > ol:has(.uiFileHandlerWrapper) {
.Input__Input___3RSTI { .Input__Input___3RSTI {
transition: background-color 0.5s,border-color 0.5s; transition: background-color 0.5s,border-color 0.5s;
background-color: var(--auto-background); background: var(--auto-background);
position: relative; position: relative;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
@@ -1244,7 +1243,7 @@ iframe.userHTML {
.Thermoscore__Thermoscore___2tWMi { .Thermoscore__Thermoscore___2tWMi {
background-image: unset; background-image: unset;
background-color: var(--auto-background); background: var(--auto-background);
} }
#toolbar { #toolbar {
@@ -1291,7 +1290,7 @@ iframe.userHTML {
::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover { ::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--better-light); background: var(--better-light);
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@@ -1381,16 +1380,16 @@ ul {
} }
.legacy-root .uiFileHandler { .legacy-root .uiFileHandler {
background-color: var(--auto-background); background: var(--auto-background);
border-radius: 1rem; border-radius: 1rem;
} }
.ResourceList__ResourceList___2z-c1 .legacy-root .uiFileHandler { .ResourceList__ResourceList___2z-c1 .legacy-root .uiFileHandler {
background-color: var(--background-primary); background: var(--background-primary);
} }
.legacy-root .uiFileHandler.dragTarget { .legacy-root .uiFileHandler.dragTarget {
background-color: var(--better-main); background: var(--better-main);
} }
.MenuButton__MenuPanel___2q42B { .MenuButton__MenuPanel___2q42B {
@@ -1497,13 +1496,13 @@ blurred {
} }
.uiSlidePane > .pane > .header { .uiSlidePane > .pane > .header {
background-color: var(--better-main); background: var(--better-main);
} }
.content [placeholder="Subject…"] { .content [placeholder="Subject…"] {
padding-left: 12px !important; padding-left: 12px !important;
border-radius: 1rem; border-radius: 1rem;
background-color: var(--background-primary) !important; background: var(--background-primary) !important;
color: var(--text-primary) !important; color: var(--text-primary) !important;
} }
@@ -1523,7 +1522,7 @@ blurred {
} }
.formattedText > .footer { .formattedText > .footer {
background-color: var(--background-primary); background: var(--background-primary);
border-radius: 1rem; border-radius: 1rem;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
@@ -1544,7 +1543,7 @@ blurred {
.uiSlidePane > .pane { .uiSlidePane > .pane {
color: var(--text-primary); color: var(--text-primary);
background-color: var(--auto-background); background: var(--auto-background);
transform: translateY(100%); transform: translateY(100%);
transition: transition:
transform 0.5s ease-in-out, transform 0.5s ease-in-out,
@@ -2054,7 +2053,7 @@ body {
width: 94%; width: 94%;
margin: 50px auto; margin: 50px auto;
max-height: 60em; max-height: 60em;
background-color: var(--better-main); background: var(--better-main);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.3); -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 */ /* When the checkbox is checked, add a blue background */
.upcoming-checkbox-container input:checked ~ .upcoming-checkmark { .upcoming-checkbox-container input:checked ~ .upcoming-checkmark {
background-color: var(--item-colour); background: var(--item-colour);
} }
/* Create the checkmark/indicator (hidden when not checked) */ /* Create the checkmark/indicator (hidden when not checked) */
@@ -2378,7 +2377,7 @@ body {
} }
.upcoming-items { .upcoming-items {
background-color: var(--background-primary); background: var(--background-primary);
transition: 200ms; transition: 200ms;
width: 100%; width: 100%;
max-height: 55em; max-height: 55em;
@@ -2532,7 +2531,7 @@ body {
/* When the checkbox is checked, add a blue background */ /* When the checkbox is checked, add a blue background */
.upcoming-checkbox-container input:checked ~ .upcoming-checkmark { .upcoming-checkbox-container input:checked ~ .upcoming-checkmark {
background-color: var(--item-colour); background: var(--item-colour);
} }
/* Create the checkmark/indicator (hidden when not checked) */ /* Create the checkmark/indicator (hidden when not checked) */
@@ -2668,7 +2667,7 @@ body {
transform: scale(0); transform: scale(0);
transition: transform 0.2s; transition: transform 0.2s;
transform-origin: top; transform-origin: top;
background-color: var(--background-primary); background: var(--background-primary);
color: var(--text-primary); color: var(--text-primary);
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;