Refactor of CSS Rule Logic

This commit is contained in:
2025-06-02 11:33:52 +10:00
parent 14a8521940
commit 5b8955f23f
3 changed files with 222 additions and 56 deletions
+7 -56
View File
@@ -1,8 +1,9 @@
import { LunaUnload, Tracer } from "@luna/core";
import { settings, Settings } from "./Settings";
// Import CSS directly using Luna's file:// syntax.. Took me a while to figure out this existed
import originalStyle from "file://theme.css?minify";
// Import CSS files directly using Luna's file:// syntax
import fullTheme from "file://dark-theme.css?minify";
import oledFriendlyTheme from "file://oled-friendly.css?minify";
export const { trace } = Tracer("[OLED Theme]");
export { Settings };
@@ -21,67 +22,17 @@ const applyThemeStyles = function(): void {
appliedStyleElement.parentNode.removeChild(appliedStyleElement);
}
let modifiedStyle = originalStyle;
// Choose the appropriate CSS file based on OLED Friendly Buttons setting
let selectedStyle = settings.oledFriendlyButtons ? oledFriendlyTheme : fullTheme;
// Remove SeekBar coloring if Quality Color Matched Seek Bar is enabled
if (settings.qualityColorMatchedSeekBar) {
modifiedStyle = modifiedStyle.replace(/\[class\^="_progressBarWrapper"\]\s*\{[^}]*\}/g, '');
}
// Remove button styling if OLED Friendly Buttons is enabled
if (settings.oledFriendlyButtons) {
const originalRuleCount = (modifiedStyle.match(/\{[^}]*\}/g) || []).length;
// Split CSS into individual rules and filter out button-related ones
const cssRules = modifiedStyle.split('}').filter(rule => rule.trim());
const filteredRules = cssRules.filter(rule => {
const lowerRule = rule.toLowerCase();
// Check if this rule might affect buttons
const isButtonRule =
// Direct button selectors
lowerRule.includes('button') ||
lowerRule.includes('[role="button"]') ||
lowerRule.includes('[type="button"]') ||
lowerRule.includes('[type="submit"]') ||
lowerRule.includes('[type="reset"]') ||
// Class-based button selectors
lowerRule.includes('btn') ||
lowerRule.includes('_button') ||
lowerRule.includes('-button') ||
lowerRule.includes('button-') ||
lowerRule.includes('button_') ||
// Common button-related classes
lowerRule.includes('clickable') ||
lowerRule.includes('action') ||
lowerRule.includes('control') ||
lowerRule.includes('icon') ||
// Data attributes that might be buttons
lowerRule.includes('data-test') && lowerRule.includes('button') ||
lowerRule.includes('aria-label') && lowerRule.includes('button') ||
// Button states
lowerRule.includes(':hover') && (lowerRule.includes('button') || lowerRule.includes('btn')) ||
lowerRule.includes(':focus') && (lowerRule.includes('button') || lowerRule.includes('btn')) ||
lowerRule.includes(':active') && (lowerRule.includes('button') || lowerRule.includes('btn')) ||
// Cursor pointer (often used on buttons)
lowerRule.includes('cursor') && lowerRule.includes('pointer') ||
// Any class containing button-like patterns
/\[class[^=]*=["'][^"']*button/i.test(rule) ||
/\[class[^=]*=["'][^"']*btn/i.test(rule) ||
/\[class[^=]*=["'][^"']*click/i.test(rule) ||
/\[class[^=]*=["'][^"']*action/i.test(rule) ||
/\[class[^=]*=["'][^"']*control/i.test(rule);
// Return true to keep the rule if it's NOT a button rule
return !isButtonRule;
});
modifiedStyle = filteredRules.join('} ') + (filteredRules.length > 0 ? '}' : '');
selectedStyle = selectedStyle.replace(/\[class\^="_progressBarWrapper"\]\s*\{[^}]*\}/g, '');
}
appliedStyleElement = document.createElement("style");
appliedStyleElement.type = "text/css";
appliedStyleElement.textContent = modifiedStyle;
appliedStyleElement.textContent = selectedStyle;
document.head.appendChild(appliedStyleElement);
};