Kaloyan DanchevandClaude Opus 4.6
98dd75ab0e
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>
238 lines
8.5 KiB
JavaScript
238 lines
8.5 KiB
JavaScript
// LG webOS Notification Center — 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-nc-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
|
|
// -------------------------------------------------------
|
|
'.Item_bg__2MM1D {',
|
|
' 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 stay hidden until focus
|
|
'[class*="_bg__"]:not(.Item_bg__2MM1D) {',
|
|
' border-radius: 9999px !important;',
|
|
'}',
|
|
|
|
// FormCheckboxItem bg
|
|
'.FormCheckboxItem_bg__3GHsc {',
|
|
' opacity: 1 !important;',
|
|
' background-color: rgba(0,0,0,0.65) !important;',
|
|
' background-image: none !important;',
|
|
' border-radius: 9999px !important;',
|
|
' filter: none !important;',
|
|
'}',
|
|
|
|
// -------------------------------------------------------
|
|
// 3. FOCUS — white pill + dark text
|
|
// -------------------------------------------------------
|
|
|
|
// Item focus
|
|
'.Item_item__3OZOO.spottable:focus,',
|
|
'.Item_item__3gT3d.spottable:focus {',
|
|
' color: #1a1a1a !important;',
|
|
'}',
|
|
'.Item_item__3OZOO.spottable:focus .Item_bg__2MM1D,',
|
|
'.Item_item__3gT3d.spottable:focus .Item_bg__2MM1D {',
|
|
' opacity: 1 !important;',
|
|
' background-color: #fff !important;',
|
|
' background-image: none !important;',
|
|
' filter: none !important;',
|
|
' border-radius: 9999px !important;',
|
|
'}',
|
|
'.Item_item__3OZOO.spottable:focus .Item_label__2Wgl2,',
|
|
'.Item_item__3gT3d.spottable:focus .Item_label__2Wgl2,',
|
|
'.Item_item__3OZOO.spottable:focus .Item_itemContent__19m1V,',
|
|
'.Item_item__3gT3d.spottable:focus .Item_itemContent__19m1V,',
|
|
'.Item_item__3OZOO.spottable:focus .Item_slotAfter__hf946,',
|
|
'.Item_item__3gT3d.spottable:focus .Item_slotAfter__hf946,',
|
|
'.Item_item__3OZOO.spottable:focus .Item_slotBefore__39lzy,',
|
|
'.Item_item__3gT3d.spottable:focus .Item_slotBefore__39lzy,',
|
|
'.Item_item__3OZOO.spottable:focus .Icon_icon__3xbFH,',
|
|
'.Item_item__3OZOO.spottable:focus .Icon_icon__uDPTY,',
|
|
'.Item_item__3gT3d.spottable:focus .Icon_icon__3xbFH,',
|
|
'.Item_item__3gT3d.spottable:focus .Icon_icon__uDPTY {',
|
|
' color: #1a1a1a !important;',
|
|
'}',
|
|
|
|
// FormCheckboxItem focus
|
|
'.FormCheckboxItem_item__s8bcU.spottable:focus {',
|
|
' color: #1a1a1a !important;',
|
|
'}',
|
|
'.FormCheckboxItem_item__s8bcU.spottable:focus .FormCheckboxItem_bg__3GHsc {',
|
|
' opacity: 1 !important;',
|
|
' background-color: #fff !important;',
|
|
' background-image: none !important;',
|
|
' filter: none !important;',
|
|
' border-radius: 9999px !important;',
|
|
'}',
|
|
|
|
// Disabled items: force content children visible
|
|
'[disabled] .Item_itemContent__19m1V,',
|
|
'[aria-disabled="true"] .Item_itemContent__19m1V,',
|
|
'[disabled] .Item_label__2Wgl2,',
|
|
'[aria-disabled="true"] .Item_label__2Wgl2,',
|
|
'[disabled] .Item_slotAfter__hf946,',
|
|
'[aria-disabled="true"] .Item_slotAfter__hf946,',
|
|
'[disabled] .Item_slotBefore__39lzy,',
|
|
'[aria-disabled="true"] .Item_slotBefore__39lzy,',
|
|
'[disabled] .Icon_icon__3xbFH,',
|
|
'[disabled] .Icon_icon__uDPTY,',
|
|
'[aria-disabled="true"] .Icon_icon__3xbFH,',
|
|
'[aria-disabled="true"] .Icon_icon__uDPTY {',
|
|
' opacity: 1 !important;',
|
|
' color: rgba(255,255,255,0.5) !important;',
|
|
'}',
|
|
|
|
// Button focus
|
|
'.Button_button__2U0Zv.spottable:focus,',
|
|
'.Button_button__msIzD.spottable:focus {',
|
|
' color: #1a1a1a !important;',
|
|
'}',
|
|
'.Button_button__2U0Zv.spottable:focus .Button_bg__1Dcsq,',
|
|
'.Button_button__2U0Zv.spottable:focus .Button_bg__AoDJy,',
|
|
'.Button_button__msIzD.spottable:focus .Button_bg__1Dcsq,',
|
|
'.Button_button__msIzD.spottable:focus .Button_bg__AoDJy {',
|
|
' opacity: 1 !important;',
|
|
' background-color: #fff !important;',
|
|
' background-image: none !important;',
|
|
' filter: none !important;',
|
|
' border-radius: 9999px !important;',
|
|
'}',
|
|
'.Button_button__2U0Zv.spottable:focus .Button_client__2HSGm,',
|
|
'.Button_button__2U0Zv.spottable:focus .Button_client__3Hkj3,',
|
|
'.Button_button__msIzD.spottable:focus .Button_client__2HSGm,',
|
|
'.Button_button__msIzD.spottable:focus .Button_client__3Hkj3,',
|
|
'.Button_button__2U0Zv.spottable:focus .Icon_icon__3xbFH,',
|
|
'.Button_button__2U0Zv.spottable:focus .Icon_icon__uDPTY,',
|
|
'.Button_button__msIzD.spottable:focus .Icon_icon__3xbFH,',
|
|
'.Button_button__msIzD.spottable:focus .Icon_icon__uDPTY {',
|
|
' color: #1a1a1a !important;',
|
|
'}',
|
|
|
|
// Checkbox focus
|
|
'.Checkbox_checkbox__1mTpP.spottable:focus .Checkbox_bg__1-1hH {',
|
|
' opacity: 1 !important;',
|
|
' background-color: #fff !important;',
|
|
' background-image: none !important;',
|
|
' filter: none !important;',
|
|
' border-radius: 9999px !important;',
|
|
'}',
|
|
|
|
'.spottable:focus { outline: none !important; }',
|
|
|
|
// -------------------------------------------------------
|
|
// 4. TEXT & MISC
|
|
// -------------------------------------------------------
|
|
'.Item_item__3OZOO, .Item_item__3gT3d {',
|
|
' color: rgba(255,255,255,0.85) !important;',
|
|
'}',
|
|
|
|
'.Button_button__2U0Zv, .Button_button__msIzD {',
|
|
' color: rgba(255,255,255,0.85) !important;',
|
|
' border-radius: 9999px !important;',
|
|
'}',
|
|
|
|
'.Header_header__1wT5v {',
|
|
' color: #fff !important;',
|
|
' border-bottom: 1px solid rgba(255,255,255,0.06) !important;',
|
|
'}',
|
|
|
|
'h1, h2, h3 { color: #fff !important; }',
|
|
'.Heading_heading__Exc3p { color: #fff !important; }',
|
|
|
|
// Notification-specific: NotiHeader
|
|
'.NotiHeader_children__5zAyB { color: rgba(255,255,255,0.85) !important; }',
|
|
'.NotiHeader_headerButton__Y2scK { color: rgba(255,255,255,0.7) !important; }',
|
|
'.NotiIcon_icon__3m2-f { color: rgba(255,255,255,0.85) !important; }',
|
|
|
|
// Alert popup styling
|
|
'.Alert_alert__1hTPw,',
|
|
'.Alert_popup__2t0iD {',
|
|
' background-color: rgba(0,0,0,0.75) !important;',
|
|
' border-radius: 24px !important;',
|
|
'}',
|
|
'.Alert_title__1Qf_f { color: #fff !important; }',
|
|
'.Alert_body__3frtV { color: rgba(255,255,255,0.85) !important; }',
|
|
|
|
// FixedPopupPanels (detail views)
|
|
'.FixedPopupPanels_fixedPopupPanels__12XNO,',
|
|
'.FixedPopupPanels_body__jZC_5,',
|
|
'.FixedPopupPanels_panel__3qAUZ {',
|
|
' background-color: rgba(0,0,0,0.75) !important;',
|
|
' border-radius: 24px !important;',
|
|
'}',
|
|
|
|
// Popup container
|
|
'.Popup_popup__K1Ygj {',
|
|
' background-color: rgba(0,0,0,0.75) !important;',
|
|
' border-radius: 24px !important;',
|
|
'}',
|
|
'.Popup_body__1N5b9 { 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 });
|
|
|
|
})();
|