Add Notification Center and Game Optimizer themes
Extend Luma-style dark theme to two more Enact web overlays: - com.webos.app.notificationcenter: dark pills, transparent compositor, notification-specific components - com.webos.app.gameoptimizer: same plus GameItem, GameButton, GameSwitch, GamePanel custom components Rename build.js → build.cjs (ESM compat) and update to build all three themes from a single script. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kaloyan DanchevandClaude Opus 4.6 committed
1 parent
14db4f6e71
commit
98dd75ab0e
4 files changed
+560
-29
No files matched your search
@@ -0,0 +1,282 @@
|
||||
// LG webOS Game Optimizer — Luma-style Dark Theme V1.0
|
||||
// Same visual language as Settings theme: transparent compositor,
|
||||
// nuclear background strip, dark pills, white focus.
|
||||
// CSS class hashes from webOS 6.5.3 (kisscurl-koli).
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var STYLE_ID = 'luma-go-v10';
|
||||
|
||||
// === COMPOSITOR TRANSPARENCY ===
|
||||
try {
|
||||
if (window.PalmSystem && PalmSystem.setWindowProperties) {
|
||||
PalmSystem.setWindowProperties(JSON.stringify({ transparent: true }));
|
||||
}
|
||||
} catch (e) {}
|
||||
try {
|
||||
if (window.webOSSystem && webOSSystem.setWindowProperty) {
|
||||
webOSSystem.setWindowProperty('transparent', 'true');
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
var CSS = [
|
||||
|
||||
// -------------------------------------------------------
|
||||
// 1. NUCLEAR — strip all backgrounds
|
||||
// -------------------------------------------------------
|
||||
'*, *::before, *::after {',
|
||||
' background-color: transparent !important;',
|
||||
' background-image: none !important;',
|
||||
' box-shadow: none !important;',
|
||||
' transition: none !important;',
|
||||
' animation: none !important;',
|
||||
'}',
|
||||
'html, body {',
|
||||
' background: transparent !important;',
|
||||
' background-color: transparent !important;',
|
||||
' background-image: none !important;',
|
||||
'}',
|
||||
'body { color: rgba(255,255,255,0.85) !important; }',
|
||||
|
||||
// -------------------------------------------------------
|
||||
// 2. DARK PILLS on items
|
||||
// -------------------------------------------------------
|
||||
// Standard Enact Item bg
|
||||
'.Item_bg__166C- {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: rgba(0,0,0,0.65) !important;',
|
||||
' background-image: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
' filter: none !important;',
|
||||
'}',
|
||||
|
||||
// Game-specific Item bg
|
||||
'.GameItem_bg__1Px-3 {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: rgba(0,0,0,0.65) !important;',
|
||||
' background-image: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
' filter: none !important;',
|
||||
'}',
|
||||
|
||||
// Other bg elements: pill radius
|
||||
'[class*="_bg__"]:not(.Item_bg__166C-):not(.GameItem_bg__1Px-3) {',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
// -------------------------------------------------------
|
||||
// 3. FOCUS — white pill + dark text
|
||||
// -------------------------------------------------------
|
||||
|
||||
// Standard Item focus
|
||||
'.Item_item__1Q0oR.spottable:focus,',
|
||||
'.Item_item__2eTQF.spottable:focus {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
'.Item_item__1Q0oR.spottable:focus .Item_bg__166C-,',
|
||||
'.Item_item__2eTQF.spottable:focus .Item_bg__166C- {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
'.Item_item__1Q0oR.spottable:focus .Item_label__yk-Xa,',
|
||||
'.Item_item__2eTQF.spottable:focus .Item_label__yk-Xa,',
|
||||
'.Item_item__1Q0oR.spottable:focus .Item_itemContent__372MG,',
|
||||
'.Item_item__2eTQF.spottable:focus .Item_itemContent__372MG,',
|
||||
'.Item_item__1Q0oR.spottable:focus .Item_slotAfter__2fc4G,',
|
||||
'.Item_item__2eTQF.spottable:focus .Item_slotAfter__2fc4G,',
|
||||
'.Item_item__1Q0oR.spottable:focus .Item_slotBefore__37DXJ,',
|
||||
'.Item_item__2eTQF.spottable:focus .Item_slotBefore__37DXJ,',
|
||||
'.Item_item__1Q0oR.spottable:focus .Icon_icon__1UDrL,',
|
||||
'.Item_item__1Q0oR.spottable:focus .Icon_icon__2ch_u,',
|
||||
'.Item_item__2eTQF.spottable:focus .Icon_icon__1UDrL,',
|
||||
'.Item_item__2eTQF.spottable:focus .Icon_icon__2ch_u {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
|
||||
// GameItem focus
|
||||
'.GameItem_item__1e3fq.spottable:focus {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
'.GameItem_item__1e3fq.spottable:focus .GameItem_bg__1Px-3 {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
'.GameItem_item__1e3fq.spottable:focus .GameItem_label__2HOiY,',
|
||||
'.GameItem_item__1e3fq.spottable:focus .Icon_icon__1UDrL,',
|
||||
'.GameItem_item__1e3fq.spottable:focus .Icon_icon__2ch_u {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
|
||||
// Disabled items
|
||||
'[disabled] .Item_itemContent__372MG,',
|
||||
'[aria-disabled="true"] .Item_itemContent__372MG,',
|
||||
'[disabled] .Item_label__yk-Xa,',
|
||||
'[aria-disabled="true"] .Item_label__yk-Xa,',
|
||||
'[disabled] .Item_slotAfter__2fc4G,',
|
||||
'[aria-disabled="true"] .Item_slotAfter__2fc4G,',
|
||||
'[disabled] .Item_slotBefore__37DXJ,',
|
||||
'[aria-disabled="true"] .Item_slotBefore__37DXJ,',
|
||||
'[disabled] .Icon_icon__1UDrL,',
|
||||
'[disabled] .Icon_icon__2ch_u,',
|
||||
'[aria-disabled="true"] .Icon_icon__1UDrL,',
|
||||
'[aria-disabled="true"] .Icon_icon__2ch_u {',
|
||||
' opacity: 1 !important;',
|
||||
' color: rgba(255,255,255,0.5) !important;',
|
||||
'}',
|
||||
|
||||
// Button focus (standard Enact)
|
||||
'.Button_button__2TM80.spottable:focus,',
|
||||
'.Button_button__2eYtX.spottable:focus {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
'.Button_button__2TM80.spottable:focus .Button_bg__2zdeb,',
|
||||
'.Button_button__2TM80.spottable:focus .Button_bg__2zkI-,',
|
||||
'.Button_button__2eYtX.spottable:focus .Button_bg__2zdeb,',
|
||||
'.Button_button__2eYtX.spottable:focus .Button_bg__2zkI- {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
'.Button_button__2TM80.spottable:focus .Button_client__1-mQb,',
|
||||
'.Button_button__2TM80.spottable:focus .Button_client__2pFZm,',
|
||||
'.Button_button__2eYtX.spottable:focus .Button_client__1-mQb,',
|
||||
'.Button_button__2eYtX.spottable:focus .Button_client__2pFZm,',
|
||||
'.Button_button__2TM80.spottable:focus .Icon_icon__1UDrL,',
|
||||
'.Button_button__2TM80.spottable:focus .Icon_icon__2ch_u,',
|
||||
'.Button_button__2eYtX.spottable:focus .Icon_icon__1UDrL,',
|
||||
'.Button_button__2eYtX.spottable:focus .Icon_icon__2ch_u {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
|
||||
// GameButton focus
|
||||
'.GameButton_button__2_0__.spottable:focus {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
'.GameButton_button__2_0__.spottable:focus .GameButton_bg__10LOj {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
// GameIconButton focus
|
||||
'.GameIconButton_button__2mofS.spottable:focus .GameIconButton_bg__121PO {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
// GameSwitch focus
|
||||
'.GameSwitch_switch__OWz1z.spottable:focus .GameSwitch_bg__1mRa0 {',
|
||||
' opacity: 1 !important;',
|
||||
' background-color: #fff !important;',
|
||||
' background-image: none !important;',
|
||||
' filter: none !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
// GameRadioItem focus
|
||||
'.GameRadioItem_radioItem__2GUcI.spottable:focus {',
|
||||
' color: #1a1a1a !important;',
|
||||
'}',
|
||||
|
||||
'.spottable:focus { outline: none !important; }',
|
||||
|
||||
// -------------------------------------------------------
|
||||
// 4. TEXT & MISC
|
||||
// -------------------------------------------------------
|
||||
'.Item_item__1Q0oR, .Item_item__2eTQF {',
|
||||
' color: rgba(255,255,255,0.85) !important;',
|
||||
'}',
|
||||
'.GameItem_item__1e3fq {',
|
||||
' color: rgba(255,255,255,0.85) !important;',
|
||||
'}',
|
||||
|
||||
'.Button_button__2TM80, .Button_button__2eYtX {',
|
||||
' color: rgba(255,255,255,0.85) !important;',
|
||||
' border-radius: 9999px !important;',
|
||||
'}',
|
||||
|
||||
'.Header_header__2Xmak {',
|
||||
' color: #fff !important;',
|
||||
' border-bottom: 1px solid rgba(255,255,255,0.06) !important;',
|
||||
'}',
|
||||
|
||||
'h1, h2, h3 { color: #fff !important; }',
|
||||
'.Heading_heading__Y4gPw { color: #fff !important; }',
|
||||
'.GameHeading_gameHeading__2dHP1 { color: #fff !important; }',
|
||||
|
||||
// GamePanel backdrop — semi-transparent dark instead of opaque
|
||||
'.GamePanel_panelBackdrop__1nX3U {',
|
||||
' background-color: rgba(0,0,0,0.75) !important;',
|
||||
' border-radius: 24px !important;',
|
||||
'}',
|
||||
'.GamePanel_panel__2770_ { color: rgba(255,255,255,0.85) !important; }',
|
||||
|
||||
// AI Indicator
|
||||
'.AIIndicatorUnit_title__1EVRE { color: rgba(255,255,255,0.7) !important; }',
|
||||
'.AIIndicatorUnit_value__pC9jL { color: #fff !important; }',
|
||||
|
||||
// Alert popup
|
||||
'.Alert_alert__gVwa9,',
|
||||
'.Alert_popup__1b3Xc {',
|
||||
' background-color: rgba(0,0,0,0.75) !important;',
|
||||
' border-radius: 24px !important;',
|
||||
'}',
|
||||
'.Alert_title__1HfX1 { color: #fff !important; }',
|
||||
'.Alert_body__3g69H { color: rgba(255,255,255,0.85) !important; }',
|
||||
|
||||
// FixedPopupPanels
|
||||
'.FixedPopupPanels_fixedPopupPanels__wpe6K,',
|
||||
'.FixedPopupPanels_body__2ARIw,',
|
||||
'.FixedPopupPanels_panel__38yei {',
|
||||
' background-color: rgba(0,0,0,0.75) !important;',
|
||||
' border-radius: 24px !important;',
|
||||
'}',
|
||||
|
||||
// Popup container
|
||||
'.Popup_popup__3sv6e {',
|
||||
' background-color: rgba(0,0,0,0.75) !important;',
|
||||
' border-radius: 24px !important;',
|
||||
'}',
|
||||
'.Popup_body__2J-hw { color: rgba(255,255,255,0.85) !important; }',
|
||||
|
||||
// Picker styling
|
||||
'.Picker_picker__fngq1 { color: rgba(255,255,255,0.85) !important; }',
|
||||
|
||||
'* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }',
|
||||
|
||||
''
|
||||
].join('\n');
|
||||
|
||||
function injectStyle() {
|
||||
if (document.getElementById(STYLE_ID)) return;
|
||||
var style = document.createElement('style');
|
||||
style.id = STYLE_ID;
|
||||
style.textContent = CSS;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
if (document.body) {
|
||||
injectStyle();
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', injectStyle);
|
||||
}
|
||||
|
||||
new MutationObserver(function () {
|
||||
if (!document.getElementById(STYLE_ID)) injectStyle();
|
||||
}).observe(document.documentElement, { childList: true, subtree: true });
|
||||
|
||||
})();
|
||||
Reference in new issue
Block a user