diff --git a/plugins/oled-theme-luna/src/theme.css b/plugins/oled-theme-luna/src/dark-theme.css similarity index 100% rename from plugins/oled-theme-luna/src/theme.css rename to plugins/oled-theme-luna/src/dark-theme.css diff --git a/plugins/oled-theme-luna/src/index.ts b/plugins/oled-theme-luna/src/index.ts index 531f76d..c73b219 100644 --- a/plugins/oled-theme-luna/src/index.ts +++ b/plugins/oled-theme-luna/src/index.ts @@ -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); }; diff --git a/plugins/oled-theme-luna/src/oled-friendly.css b/plugins/oled-theme-luna/src/oled-friendly.css new file mode 100644 index 0000000..e513a80 --- /dev/null +++ b/plugins/oled-theme-luna/src/oled-friendly.css @@ -0,0 +1,215 @@ +/* +{ + "name": "Abyss Neptune - OLED Friendly", + "author": "@itzzexcel", + "description": "Abyss Neptune theme without button styling for OLED displays" +} +*/ + +::-webkit-scrollbar { + display: none; +} + +:root { + --wave-color-solid-accent-fill: white; + --wave-color-solid-rainbow-yellow-fill: white; + --wave-color-solid-contrast-fill: white; + --wave-color-solid-base-brighter: black; + --wave-text-body-medium: white !important; + --track-vibrant-color: white !important; + --wave-color-opacity-contrast-fill-ultra-thin: #fffafa1a !important; + --wave-color-solid-rainbow-yellow-darkest: #fffafa1a !important; + --wave-color-solid-accent-dark: rgb(128, 128, 128); +} + +/* Credits to https://github.com/surfbryce for the fonts */ +@font-face { + font-family: "AbyssFont"; + font-weight: 400; + src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 500; + src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 600; + src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 700; + src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2"); +} + +[class^="followingButton"], +[title="Unfollow"], +[title="Follow"], +[title="Unfollow"]>span, +[title="Follow"]>span { + background-color: var(--wave-color-solid-rainbow-yellow-fill) !important; + color: var(--wave-color-solid-base-brighter); +} + +[class^="_wave-badge-color-max"] { + color: black !important; + background-color: var(--wave-color-solid-accent-fill); + border-radius: 3px; +} + +[data-test="main-layout-sidebar-wrapper"] { + border-right: rgb(25, 25, 25) 1px solid; +} + +[class^="_wave-badge"] { + background-color: var(--wave-color-solid-accent-fill); + border-radius: 4px; + color: black; +} + +[class^="_progressBarWrapper"] { + color: var(--wave-color-solid-accent-fill) !important; +} + +[class^="_sidebarItem"]>span { + color: var(--wave-color-solid-accent-dark); +} + +[data-test="main-layout-header"] { + border-left: 0 !important; +} + +[class^="_sidebarItem"]:hover span { + color: var(--wave-color-solid-contrast-fill); +} + +[class^="_sidebarItem"] [class^="active"]>span { + color: var(--wave-color-solid-accent-dark) !important; +} + +[class^="_active"] { + color: var(--wave-color-solid-accent-fill) !important; +} + +[class^="ReactVirtualized__Grid"] { + border-radius: 10px; + margin: 5px; +} + +[data-test="media-table"]>div>div>div { + border: 1px solid rgb(25, 25, 25) !important; +} + +[class^="ReactVirtualized__Grid__innerScrollContainer"] { + border: none; + margin: 5px; +} + +[class^="_explicitBadge"] { + color: var(--wave-color-solid-accent-fill); +} + +[data-test="current-media-imagery"] { + border: 0 !important; + margin: none; +} + +[class^="_imageBorder"] { + display: none; +} + +[data-test="feed-sidebar"] { + margin-top: 10px; +} + +[data-test="footer-player"] { + width: calc(100% - 20px); + bottom: 10px; + left: 10px; + border: 1px solid rgb(25, 25, 25); + border-radius: 4px !important; + position: absolute !important; +} + +[class^="_tableRow"]:hover>*, +[data-test-is-playing="true"]>* { + color: var(--wave-color-solid-accent-fill) !important; +} + +[class^="_tableRow"]>*, +[data-test-is-playing="false"]>* { + color: lightgray !important; +} + +[class*="coverColumn"] { + padding-left: 5px !important; +} + +[class^="actionList"] { + background-color: transparent; + margin: 0px; + border-radius: 5px; +} + +.neptune-switch-checkbox:checked+.neptune-switch { + background-color: rgba(255, 255, 255, 0.1); +} + +[data-test="main-layout-header"], +[data-test="feed-sidebar"], +[data-test="stream-metadata"], +[data-test="footer-player"] { + background-color: rgba(0, 0, 0, 0.8) !important; + backdrop-filter: blur(10px); + border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important; +} + +[data-wave-color=textUrl] { + color: var(--wave-color-solid-accent-fill); +} + +[class^="_smallHeader"] { + margin-top: 7.5px; +} + +[class^="__NEPTUNE_PAGE"], +[data-test="main"] { + margin-top: 35px; +} + +#playQueueSidebar { + top: 50px !important; + border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin); + margin: 2px; + margin-right: -14px !important; + background-color: rgba(0, 0, 0, 0.8) !important; + backdrop-filter: blur(10px); +} + +[class^="_bottomGradient"] { + visibility: hidden; +} + +[data-test="settings-page"] { + padding-bottom: 60px !important; +} + +[data-test="query-suggestions"], +[data-test="recent-searches-container"] { + background-color: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(10px); +} + +[data-test="contextmenu"] { + border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important; +} + +[class^="_dataContainer_"]::before { + background-image: var(--img); + filter: blur(10px) brightness(0.4); +} \ No newline at end of file