From 603cad9a9f19b568b7446bdf5f24e58dc064448d Mon Sep 17 00:00:00 2001 From: Yuurin Bee Date: Tue, 27 Jan 2026 23:14:46 +0700 Subject: [PATCH 1/2] Add new themes and theme variable updates --- src/index.html | 2 + src/js/settings.js | 2 +- src/main.js | 8 +- src/styles.css | 13 +- src/themes/gifverse/dark.css | 678 +++++++++++++++++++++++++++++++++++ src/themes/pivx/dark.css | 663 ++++++++++++++++++++++++++++++++++ src/themes/vector/dark.css | 23 +- 7 files changed, 1370 insertions(+), 19 deletions(-) create mode 100644 src/themes/gifverse/dark.css create mode 100644 src/themes/pivx/dark.css diff --git a/src/index.html b/src/index.html index 97afe26..4aa0504 100644 --- a/src/index.html +++ b/src/index.html @@ -712,6 +712,8 @@

Choose Theme

diff --git a/src/js/settings.js b/src/js/settings.js index 4772094..20f9b0e 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -680,7 +680,7 @@ async function selectFile() { * @param {string} mode - The theme mode, i.e: light, dark */ function applyTheme(theme = 'vector', mode = 'dark') { - document.body.classList.remove('vector-theme', 'chatstr-theme'); + document.body.classList.remove('vector-theme', 'chatstr-theme', 'pivx-theme'); document.body.classList.add(`${theme}-theme`); domTheme.href = `/themes/${theme}/${mode}.css`; diff --git a/src/main.js b/src/main.js index 00fbaab..7f4641d 100644 --- a/src/main.js +++ b/src/main.js @@ -3798,7 +3798,7 @@ function renderInviteItem(invite) { const divInvite = document.createElement('div'); divInvite.classList.add('chatlist-contact', 'chatlist-invite'); divInvite.id = `invite-${invite.id || invite.welcome_event_id || groupId}`; - divInvite.style.borderColor = '#59fcb3'; + divInvite.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--icon-color-primary').trim(); // Avatar container with group placeholder const divAvatarContainer = document.createElement('div'); @@ -3980,7 +3980,7 @@ function renderChat(chat) { // The Chat container (The ID is the Contact's npub) const divContact = document.createElement('div'); - if (nUnread) divContact.style.borderColor = '#59fcb3'; + if (nUnread) divContact.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--icon-color-primary').trim(); divContact.classList.add('chatlist-contact'); divContact.id = `chatlist-${chat.id}`; @@ -4086,7 +4086,7 @@ function renderChat(chat) { } // Apply 'Unread' final styling if (nUnread) { - pTimeAgo.style.color = '#59fcb3'; + pTimeAgo.style.color = getComputedStyle(document.documentElement).getPropertyValue('--icon-color-primary').trim(); } else { // Add 'read' class for smaller font size when no unread messages pTimeAgo.classList.add('read'); @@ -8741,7 +8741,7 @@ async function renderGroupOverview(chat) { memberDiv.appendChild(bgDiv); memberDiv.addEventListener('mouseenter', () => { - const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--icon-color-primary').trim(); + const primaryColor = '#59fcb3'; bgDiv.style.background = `linear-gradient(to right, ${primaryColor}40, transparent)`; bgDiv.style.opacity = '1'; }); diff --git a/src/styles.css b/src/styles.css index ac6de24..665a961 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1915,7 +1915,7 @@ html, body { } #chat-input-send.active .icon { - background-color: #59fcb3; + background-color: var(--icon-color-primary); opacity: 1; } @@ -3432,6 +3432,7 @@ input[type="checkbox"]:checked + .neon-toggle:before { /* Style options to match whisper model */ #theme-select option { background: #161616; + text-align: center; padding: 10px; } @@ -3451,6 +3452,13 @@ select:focus::-ms-value { margin-right: auto; } +/* Sound Notification Selection container styles */ +#notif-sound-select option { + background: #161616; + padding: 10px; + text-align: center; +} + /* Delete model button with trash bin icon */ .btn-delete-model { position: absolute; @@ -4558,6 +4566,8 @@ select:disabled:hover { .relay-dialog-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; + transform: scale(1.1); + transition: transform 0.25s ease; } .relay-dialog-content { @@ -8546,6 +8556,7 @@ hr { .notif-custom-container { display: flex; align-items: center; + text-align: center; margin-bottom: 10px; } diff --git a/src/themes/gifverse/dark.css b/src/themes/gifverse/dark.css new file mode 100644 index 0000000..ad6a1b6 --- /dev/null +++ b/src/themes/gifverse/dark.css @@ -0,0 +1,678 @@ +:root { + background-color: #0A0A0A; + --voice-highlight-bg: rgba(177, 136, 226, 0.3); + --voice-highlight-text: #F7FFAE; + --voice-frequency-glow: rgba(177, 136, 226, 0.8); + --icon-color-primary: #F7FFAE; + --voice-progress-secondary: rgba(177, 136, 226, 0.4); + --reply-highlight-border: #FFAECE; +} + +.sync-line { + background-color: #AEFFDF; +} + +.popup { + background-color: rgba(0, 0, 0, 1); + box-shadow: 0 0 15px #F7FFAE50; + border-color: #F7FFAE; +} + +.text-gradient { + background: linear-gradient(to right, #f8f8f8 13.87%, #F7FFAE 60%); + background-size: 200% 200%; + background-clip: text; +} + +.text-gradient-green { + background: linear-gradient(to right, #F7FFAE 13.87%, #F7FFAE 60%); + background-size: 200% 200%; + background-clip: text; +} + +.back-btn { + color: #F7FFAE; +} + +.chatlist-contact { + border-color: transparent; +} + +.chat { + background-color: inherit; +} + +.chat-messages { + background-color: #030303; + border-top-color: #FFAECE75; + border-top-style: solid; + border-top-width: 1px; +} + +.msg-me p { + color: #ffffff; + background-color: #161616; + border-color: #161616; +} + +.msg-them p { + background: linear-gradient(90deg, #F7FFAE50, #F7FFAE00); + border-color: #F7FFAE; +} + +.msg-reply { + border-left: solid rgba(255, 255, 255, 0.45) 2px !important; +} + +/* Purple border when quoting the other person's message */ +.msg-reply-them { + border-left-color: #F7FFAE !important; +} + +@keyframes highlightMessage { + 0% { + box-shadow: 0 0 0 0 rgba(66, 29, 95, 0); + } + 20% { + box-shadow: 0 0 8px 3px rgba(161, 40, 253, 0.4); + } + 80% { + box-shadow: 0 0 8px 3px rgba(161, 40, 253, 0.4); + } + 100% { + box-shadow: 0 0 0 0 rgba(66, 29, 95, 0); + } +} + +.emoji-picker { + background: #251134e3; + border-color: #FFAECE; +} + +.attachment-panel { + background: #161616; + border-color: #F7FFAE; +} + +.input-box { + background: linear-gradient(90deg, #F7FFAE, #AEFFDF, #B6AEFF, #FFAECE); +} + +#chat-input { + background-color: #0A0A0A; +} + +input, +textarea, +button { + background-color: #F7FFAE50; +} + +.corner-float { + border-color: #F7FFAE; +} + +.divider { + background-color: #F7FFAE; +} + +.new-chat-btn .icon { + background-color: #F7FFAE; +} + +.msg-preview-container { + border-color: #F7FFAE !important; + background-color: #F7FFAE50 !important; +} + +.progress-bar { + background: linear-gradient(90deg, #F7FFAE, #AEFFDF, #B6AEFF, #FFAECE); +} + +select { + border: 1px solid #FFAECE; +} + +#whisper-model:focus { + box-shadow: 0 0 0 2px rgba(177, 136, 226, 0.3); +} + +#download-model { + background: linear-gradient(135deg, + #F7FFAE 0%, + #AEFFDF 25%, + #B6AEFF 50%, + #1D003F 100%); +} + +#download-model:hover { + box-shadow: 0 5px 15px #F7FFAE30; +} + +.model-status { + color: #F7FFAE; +} + +.progress-bar-track { + box-shadow: + inset 0 1px 3px rgba(0, 0, 0, 0.4), + 0 0 0 1px #F7FFAE10; +} + +.progress-bar-fill { + background: linear-gradient(90deg, + #F7FFAE 0%, + #AEFFDF 25%, + #B6AEFF 50%, + #1D003F 100%); +} + +.progress-text { + text-shadow: 0 0 5px #6202D470; +} + +.voice-progress-container { + border: 1px solid #6202D4; + box-shadow: 0 0 15px #6202D430; +} + +.voice-progress-fill { + background: linear-gradient(90deg, #F7FFAE, #AEFFDF, #B6AEFF, #FFAECE); +} + +.voice-progress-text { + color: #F7FFAE; +} + +input[type="checkbox"]:checked + .neon-toggle { + background: linear-gradient(90deg, #F7FFAE, #AEFFDF, #B6AEFF, #FFAECE); + box-shadow: + inset 0 1px 10px rgba(0, 0, 0, 0.1); +} + +.neon-toggle:hover { + box-shadow: + inset 0 1px 3px rgba(0, 0, 0, 0.3), + 0 0 8px #F7FFAE00; +} + +input[type="checkbox"]:checked + .neon-toggle:hover { + box-shadow: + 0 0 6px #F7FFAE90, + inset 0 1px 3px rgba(0, 0, 0, 0.3); +} + +#theme-select:focus { + box-shadow: 0 0 0 2px #FFAECE50; +} + +.icon-trash { + background-color: #F7FFAE; +} + +select:disabled { + border-color: #F7FFAE30; +} + +.nav-icon { + background-color: #FFAECE; +} + +/* Custom Audio Player Theme Overrides */ +/* Default style */ +.custom-audio-player { + background: #F7FFAE40; + border-color: #F7FFAE; +} + +.custom-audio-player:hover { + background: #F7FFAE60; + border-color: #F7FFAE50; +} + +/* msg-me style (purple gradient to match text bubbles) */ +.msg-me .custom-audio-player { + background: #161616; + border-color: #161616; +} + +.msg-me .custom-audio-player:hover { + background: #1a1a1a; + border-color: #2a2a2a; + box-shadow: none; +} + +/* msg-them style (dark gray to match text bubbles) */ +.msg-them .custom-audio-player { + background: #F7FFAE20; + border-color: #F7FFAE80; +} + +.msg-them .custom-audio-player:hover { + background: #FFAECE40; + border-color: #FFAECE; + box-shadow: none; +} + +.audio-play-btn { + background: linear-gradient(0deg, #F7FFAE 40%, #AEFFDF 60%, #B6AEFF 80%, #FFAECE 100%); +} + +.audio-progress-fill { + background: linear-gradient(90deg, #F7FFAE 40%, #AEFFDF 60%, #B6AEFF 80%, #FFAECE 100%); +} + +.audio-progress-handle { + background: #F7FFAE; +} + +.waveform-bar { + background: linear-gradient(to top, #F7FFAE, #AEFFDF, #B6AEFF, #FFAECE); +} + +.custom-audio-player.playing .waveform-bar { + box-shadow: none; +} + +.audio-time-display .current-time { + color: #ffffff60; +} + +.audio-transcribe-btn .icon { + background-color: #6202D4; +} + +.transcribe-progress-fill { + background: linear-gradient(90deg, #F7FFAE, #AEFFDF, #B6AEFF, #FFAECE); +} + +.transcribe-progress-text { + color: #FFAECE; +} + +.transcription-section.current { + background-color: #F7FFAE30; + color: #F7FFAE; + box-shadow: 0 0 8px #F7FFAE20; +} + +/* Update Settings Section Styles */ +#current-version, +#new-version { + color: #F7FFAE; +} + +.accept-btn { + background: #FFAECE10; + border-color: #FFAECE; + color: #ffffff; +} + +.accept-btn:hover:not(:disabled) { + background: #F7FFAE10; + border: 1px solid #F7FFAE; + color: #ffffff; +} + +#update-status-text { + color: rgba(255, 255, 255, 0.8); +} + +#update-progress-bar { + background: linear-gradient(90deg, #F7FFAE 40%, #AEFFDF 60%, #B6AEFF 80%, #FFAECE 100%); + box-shadow: 0 0 10px #F7FFAE40; +} + +#download-update-btn, +#restart-update-btn { + color: #000; + border: none; + box-shadow: 0 4px 12px #F7FFAE30; +} + +#changelog-content { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #F7FFAE20; + color: rgba(255, 255, 255, 0.8); +} + +#popupConfirm { + background-color: #F7FFAE; + color: #000000; +} + +/* File Preview Overlay Theme */ +.file-preview-container { + border-color: #474747; +} + +.file-preview-icon-container { + background: rgba(177, 136, 226, 0.1); + border: 1px solid rgba(177, 136, 226, 0.2); +} + +.file-preview-icon { + background-color: #F7FFAE; +} + +.file-preview-option { + background: rgba(177, 136, 226, 0.05); + border: 1px solid #474747; +} + +.file-preview-btn-send { + background: #F7FFAE; + color: #000000; + font-size: 14px; + font-weight: 600; +} + +.file-preview-btn-send:hover { + opacity: 0.9; +} + +/* Marketplace Theme Overrides */ +.marketplace-panel { + background-color: #0a0a0a; +} + +.marketplace-header { + background-color: rgba(22, 22, 22, 0.85); +} + +/* Marketplace button in attachment panel */ +.attachment-panel-marketplace-btn { + background: linear-gradient(135deg, #59fcb3 0%, #2b976c 100%) !important; +} + +.attachment-panel-marketplace-btn .icon { + background-color: #000 !important; +} + +.marketplace-search-container input:focus { + border-color: rgba(89, 252, 179, 0.5); +} + +.marketplace-filter-tag { + background-color: rgba(89, 252, 179, 0.15); + color: #59fcb3; +} + +.marketplace-filter-tag:hover { + background-color: rgba(89, 252, 179, 0.25); +} + +.marketplace-filter-tag .icon { + background-color: #59fcb3; +} + +.marketplace-app-card { + background-color: #161616; + border-color: rgba(90, 252, 180, 0.15); +} + +.marketplace-app-card:hover { + border-color: rgba(90, 252, 180, 0.35); + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.15); +} + +.marketplace-app-icon-container { + background-color: rgba(89, 252, 179, 0.1); + border: 1px solid rgba(89, 252, 179, 0.2); +} + +.marketplace-app-icon-placeholder { + background-color: #59fcb3; +} + +.marketplace-app-category { + background-color: rgba(89, 252, 179, 0.15); + color: #59fcb3; +} + +.marketplace-app-category:hover { + background-color: rgba(89, 252, 179, 0.3); +} + +.marketplace-install-btn { + background-color: #58fcb3; + color: #000; +} + +.marketplace-install-btn:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +.marketplace-install-btn.installed { + background-color: #58fcb3; +} + +.marketplace-install-btn.installing { + background-color: #58fcb3; + opacity: 0.7; +} + +.marketplace-install-btn.update-available { + background-color: #58fcb3; + color: #000; +} + +.marketplace-install-btn.updating { + background-color: #58fcb3; + opacity: 0.7; +} + +.marketplace-app-version.update-available { + color: #59fcb3; +} + +.marketplace-loading-icon { + background-color: #59fcb3; +} + +.marketplace-empty-icon { + background-color: rgba(89, 252, 179, 0.4); +} + +.marketplace-retry-btn { + background: linear-gradient(90deg, #59fcb3 0%, #2b976c 100%); + color: #000; +} + +.marketplace-retry-btn:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +/* Publish Dialog Theme */ +.publish-app-container { + background-color: #0a0a0a; + border-color: rgba(90, 252, 180, 0.25); +} + +.publish-app-header { + border-bottom-color: rgba(90, 252, 180, 0.2); +} + +.publish-app-icon-placeholder { + background: linear-gradient(135deg, #59fcb3 0%, #2b976c 100%); +} + +.publish-app-icon-placeholder .icon { + background-color: #000; +} + +.publish-app-field input:focus, +.publish-app-field textarea:focus { + border-color: rgba(89, 252, 179, 0.5); + box-shadow: 0 0 0 2px rgba(89, 252, 179, 0.15); +} + +.publish-app-btn-publish { + background: linear-gradient(90deg, #33db98, #00ff9d); + color: #000; +} + +.publish-app-btn-publish:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +/* File Preview Publish Button */ +.file-preview-btn-publish { + background: linear-gradient(90deg, #59fcb3 0%, #2b976c 100%); + color: #000; +} + +.file-preview-btn-publish .icon { + background-color: #000; +} + +.file-preview-btn-publish:hover { + box-shadow: 0 4px 16px #F7FFAE50; +} + +/* App Details Panel Theme Overrides */ +.app-details-panel { + background-color: #0a0a0a; +} + +.app-details-header { + background-color: rgba(22, 22, 22, 0.85); +} + +.app-details-icon-container { + background-color: rgba(89, 252, 179, 0.1); +} + +.app-details-icon-placeholder { + background-color: #59fcb3; +} + +.app-details-category { + background-color: rgba(89, 252, 179, 0.15); + color: #59fcb3; +} + +.app-details-category:hover { + background-color: rgba(89, 252, 179, 0.3); +} + +.app-details-action-btn { + background-color: #58fcb3; + color: #000; +} + +.app-details-action-btn:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +.app-details-action-btn.installed { + background-color: #58fcb3; +} + +.app-details-action-btn.installing { + background-color: #58fcb3; + opacity: 0.7; +} + +/* App Details Uninstall Button */ +.app-details-uninstall-btn { + background-color: rgba(255, 100, 100, 0.2); + color: #ff6464; + border: 1px solid rgba(255, 100, 100, 0.4); +} + +.app-details-uninstall-btn:hover { + background-color: rgba(255, 100, 100, 0.3); + box-shadow: 0 4px 16px rgba(255, 100, 100, 0.2); +} + +/* App Details Update Button */ +.app-details-update-btn { + background-color: #58fcb3; + color: #000; +} + +.app-details-update-btn:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +.app-details-update-btn.updating { + background-color: #58fcb3; + opacity: 0.7; +} + +.app-details-publisher { + background-color: rgba(89, 252, 179, 0.05); +} + +.app-details-publisher:hover { + background-color: rgba(89, 252, 179, 0.1); +} + +/* Marketplace category overflow indicator */ +.marketplace-app-category-overflow { + background-color: rgba(89, 252, 179, 0.2); + color: rgba(89, 252, 179, 0.9); +} + +/* Featured category card */ +.marketplace-featured-category.highlighted { + background: linear-gradient(135deg, rgba(89, 252, 179, 0.15) 0%, rgba(43, 151, 108, 0.08) 100%); + border-color: rgba(89, 252, 179, 0.3); +} + +.marketplace-featured-category.highlighted:hover { + box-shadow: 0 8px 24px rgba(89, 252, 179, 0.2); +} + +.marketplace-popular-category:hover { + background-color: rgba(89, 252, 179, 0.2); + color: #59fcb3; +} + +/* Relay Add Button */ +.relay-add-btn { + background: #F7FFAE50; + border-color: #F7FFAE; + color: #F7FFAE; +} + +.relay-add-btn:hover { + background: #AEFFDF50; + border-color: #AEFFDF; + color: #AEFFDF; +} + +/* Relay Dialog */ +.relay-dialog { + border-color: #171717; +} + +.relay-dialog-header { + background: linear-gradient(90deg, #F7FFAE 40%, #AEFFDF 60%, #B6AEFF 80%, #FFAECE 100%); +} + +.relay-form-input:focus, +.relay-form-select:focus { + border-color: #F7FFAE; +} + +.relay-dialog-buttons .primary-btn { + background-color: #F7FFAE; + color: #000000; +} + +.relay-dialog-buttons .primary-btn:hover { + color: #000; + box-shadow: 0 0 4px #F7FFAE00; +} + +.relay-metric-value { + color: #F7FFAE; +} + +.relay-dialog-header h3 { + color: #000; + margin: 0; + line-height: 1; +} diff --git a/src/themes/pivx/dark.css b/src/themes/pivx/dark.css new file mode 100644 index 0000000..046bd5b --- /dev/null +++ b/src/themes/pivx/dark.css @@ -0,0 +1,663 @@ +:root { + background-color: #0A0A0A; + --voice-highlight-bg: rgba(177, 136, 226, 0.3); + --voice-highlight-text: #6202D4; + --voice-frequency-glow: rgba(177, 136, 226, 0.8); + --icon-color-primary: #B359FC; + --voice-progress-secondary: rgba(177, 136, 226, 0.4); + --reply-highlight-border: #a128fd; +} + +.sync-line { + background-color: #6202D4; +} + +.popup { + background-color: rgba(0, 0, 0, 1); + box-shadow: 0 0 15px #6202D420; + border-color: #6202D4; +} + +.text-gradient { + background: linear-gradient(to right, #f8f8f8 13.87%, #6202D4 60%); + background-size: 200% 200%; + background-clip: text; +} + +.text-gradient-green { + background: linear-gradient(to right, #6202D4 13.87%, #1D003F 60%); + background-size: 200% 200%; + background-clip: text; +} + +.back-btn { + color: #B359FC; +} + +.chatlist-contact { + border-color: transparent; +} + +.chat { + background-color: inherit; +} + +.chat-messages { + background-color: #030303; + border-top-color: #6202D475; + border-top-style: solid; + border-top-width: 1px; +} + +.msg-me p { + color: #ffffff; + background-color: #161616; + border-color: #161616; +} + +.msg-them p { + background: linear-gradient(90deg, #6202D460, #1D003F22); + border-color: #6202D4; +} + +.msg-reply { + border-left: solid rgba(255, 255, 255, 0.45) 2px !important; +} + +/* Purple border when quoting the other person's message */ +.msg-reply-them { + border-left-color: #6202D4 !important; +} + +@keyframes highlightMessage { + 0% { + box-shadow: 0 0 0 0 rgba(66, 29, 95, 0); + } + 20% { + box-shadow: 0 0 8px 3px rgba(161, 40, 253, 0.4); + } + 80% { + box-shadow: 0 0 8px 3px rgba(161, 40, 253, 0.4); + } + 100% { + box-shadow: 0 0 0 0 rgba(66, 29, 95, 0); + } +} + +.emoji-picker { + background: #251134e3; + border-color: #6202D4; +} + +.attachment-panel { + background: #1D003F; + border-color: #6202D4; +} + +.input-box { + background: linear-gradient(90deg, #6202D4, #1D003F); +} + +#chat-input { + background-color: #0A0A0A; +} + +input, +textarea, +button { + background-color: #593b6f99; +} + +.corner-float { + border-color: #B359FC; +} + +.divider { + background-color: #474747; +} + +.new-chat-btn .icon { + background-color: #B359FC; +} + +.msg-preview-container { + border-color: #B359FC !important; + background-color: #6202D450 !important; +} + +.progress-bar { + background: linear-gradient(90deg, #6202D4 0%, #1D003F 100%); +} + +select { + border: 1px solid #6202D4; +} + +#whisper-model:focus { + box-shadow: 0 0 0 2px rgba(177, 136, 226, 0.3); +} + +#download-model { + background: linear-gradient(135deg, #6202D4 0%, #1D003F 100%); +} + +#download-model:hover { + box-shadow: 0 5px 15px #6202D430; +} + +.model-status { + color: #6202D4; +} + +.progress-bar-track { + box-shadow: + inset 0 1px 3px rgba(0, 0, 0, 0.4), + 0 0 0 1px #6202D410; +} + +.progress-bar-fill { + background: linear-gradient(90deg, + #6202D4 0%, + #1D003F 100%); +} + +.progress-text { + text-shadow: 0 0 5px #6202D470; +} + +.voice-progress-container { + border: 1px solid #6202D4; + box-shadow: 0 0 15px #6202D430; +} + +.voice-progress-fill { + background: linear-gradient(90deg, #6202D4, #1D003F); +} + +.voice-progress-text { + color: #6202D4; +} + +input[type="checkbox"]:checked + .neon-toggle { + background: linear-gradient(135deg, #6202D4, #1D003F); + box-shadow: + inset 0 1px 3px rgba(0, 0, 0, 0.3); +} + +.neon-toggle:hover { + box-shadow: + 0 0 8px #6202D450, + inset 0 1px 3px rgba(0, 0, 0, 0.3), +} + +input[type="checkbox"]:checked + .neon-toggle:hover { + box-shadow: + 0 0 8px #6202D450, + inset 0 1px 3px rgba(0, 0, 0, 0.3); +} + +#theme-select:focus { + box-shadow: 0 0 0 2px #6202D430; +} + +.icon-trash { + background-color: #6202D4; +} + +select:disabled { + border-color: rgba(177, 136, 226, 0.3); +} + +.nav-icon { + background-color: #B359FC; +} + +/* Custom Audio Player Theme Overrides */ +/* Default style */ +.custom-audio-player { + background: rgba(37, 17, 52, 0.4); + border-color: rgba(177, 136, 226, 0.25); +} + +.custom-audio-player:hover { + background: rgba(37, 17, 52, 0.6); + border-color: rgba(177, 136, 226, 0.5); +} + +/* msg-me style (purple gradient to match text bubbles) */ +.msg-me .custom-audio-player { + background: #161616; + border-color: #161616; +} + +.msg-me .custom-audio-player:hover { + background: #1a1a1a; + border-color: #2a2a2a; + box-shadow: none; +} + +/* msg-them style (dark gray to match text bubbles) */ +.msg-them .custom-audio-player { + background: #6202D420; + border-color: #6202D480; +} + +.msg-them .custom-audio-player:hover { + background: #6202D440; + border-color: #6202D4; + box-shadow: none; +} + +.audio-play-btn { + background: linear-gradient(135deg, #B359FC 0%, #6202D4 100%); +} + +.audio-progress-fill { + background: linear-gradient(90deg, #6202D4 0%, #1D003F 100%); +} + +.audio-progress-handle { + background: #6202D4; +} + +.waveform-bar { + background: linear-gradient(to top, #B359FC, #6202D4); +} + +.custom-audio-player.playing .waveform-bar { + box-shadow: none; +} + +.audio-time-display .current-time { + color: #ffffff60; +} + +.audio-transcribe-btn .icon { + background-color: #6202D4; +} + +.transcribe-progress-fill { + background: linear-gradient(90deg, #6202D4, #1D003F); +} + +.transcribe-progress-text { + color: #6202D4; +} + +.transcription-section.current { + background-color: rgba(177, 136, 226, 0.3); + color: #6202D4; + box-shadow: 0 0 8px rgba(177, 136, 226, 0.2); +} + +/* Update Settings Section Styles */ +#current-version, +#new-version { + color: #B359FC; +} + +.accept-btn { + background: #1D003F10; + border: 1px solid #6202D4; + color: #ffffff; +} + +.accept-btn:hover:not(:disabled) { + background: #1D003F50; + border-color: #B359FC; + color: #ffffff; +} + +#update-status-text { + color: rgba(255, 255, 255, 0.8); +} + +#update-progress-bar { + background: linear-gradient(90deg, #6202D4 0%, #1D003F 100%); + box-shadow: 0 0 10px #6202D440; +} + +#download-update-btn, +#restart-update-btn { + color: #000; + border: none; + box-shadow: 0 4px 12px #6202D430; +} + +#changelog-content { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #6202D420; + color: rgba(255, 255, 255, 0.8); +} + +#popupConfirm { + background-color: #6202D4; + color: #ffffff; +} + +/* File Preview Overlay Theme */ +.file-preview-container { + border-color: rgba(177, 136, 226, 0.2); +} + +.file-preview-icon-container { + background: rgba(177, 136, 226, 0.1); + border: 1px solid rgba(177, 136, 226, 0.2); +} + +.file-preview-icon { + background-color: #6202D4; +} + +.file-preview-option { + background: rgba(177, 136, 226, 0.05); + border: 1px solid rgba(177, 136, 226, 0.1); +} + +.file-preview-btn-send { + background: #6202D4; + color: #ffffff; +} + +.file-preview-btn-send:hover { + opacity: 0.9; +} + +/* Marketplace Theme Overrides */ +.marketplace-panel { + background-color: #0a0a0a; +} + +.marketplace-header { + background-color: rgba(22, 22, 22, 0.85); +} + +/* Marketplace button in attachment panel */ +.attachment-panel-marketplace-btn { + background: linear-gradient(135deg, #59fcb3 0%, #2b976c 100%) !important; +} + +.attachment-panel-marketplace-btn .icon { + background-color: #000 !important; +} + +.marketplace-search-container input:focus { + border-color: rgba(89, 252, 179, 0.5); +} + +.marketplace-filter-tag { + background-color: rgba(89, 252, 179, 0.15); + color: #59fcb3; +} + +.marketplace-filter-tag:hover { + background-color: rgba(89, 252, 179, 0.25); +} + +.marketplace-filter-tag .icon { + background-color: #59fcb3; +} + +.marketplace-app-card { + background-color: #161616; + border-color: rgba(90, 252, 180, 0.15); +} + +.marketplace-app-card:hover { + border-color: rgba(90, 252, 180, 0.35); + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.15); +} + +.marketplace-app-icon-container { + background-color: rgba(89, 252, 179, 0.1); + border: 1px solid rgba(89, 252, 179, 0.2); +} + +.marketplace-app-icon-placeholder { + background-color: #59fcb3; +} + +.marketplace-app-category { + background-color: rgba(89, 252, 179, 0.15); + color: #59fcb3; +} + +.marketplace-app-category:hover { + background-color: rgba(89, 252, 179, 0.3); +} + +.marketplace-install-btn { + background-color: #58fcb3; + color: #000; +} + +.marketplace-install-btn:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +.marketplace-install-btn.installed { + background-color: #58fcb3; +} + +.marketplace-install-btn.installing { + background-color: #58fcb3; + opacity: 0.7; +} + +.marketplace-install-btn.update-available { + background-color: #58fcb3; + color: #000; +} + +.marketplace-install-btn.updating { + background-color: #58fcb3; + opacity: 0.7; +} + +.marketplace-app-version.update-available { + color: #59fcb3; +} + +.marketplace-loading-icon { + background-color: #59fcb3; +} + +.marketplace-empty-icon { + background-color: rgba(89, 252, 179, 0.4); +} + +.marketplace-retry-btn { + background: linear-gradient(90deg, #59fcb3 0%, #2b976c 100%); + color: #000; +} + +.marketplace-retry-btn:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +/* Publish Dialog Theme */ +.publish-app-container { + background-color: #0a0a0a; + border-color: rgba(90, 252, 180, 0.25); +} + +.publish-app-header { + border-bottom-color: rgba(90, 252, 180, 0.2); +} + +.publish-app-icon-placeholder { + background: linear-gradient(135deg, #59fcb3 0%, #2b976c 100%); +} + +.publish-app-icon-placeholder .icon { + background-color: #000; +} + +.publish-app-field input:focus, +.publish-app-field textarea:focus { + border-color: rgba(89, 252, 179, 0.5); + box-shadow: 0 0 0 2px rgba(89, 252, 179, 0.15); +} + +.publish-app-btn-publish { + background: linear-gradient(90deg, #33db98, #00ff9d); + color: #000; +} + +.publish-app-btn-publish:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +/* File Preview Publish Button */ +.file-preview-btn-publish { + background: linear-gradient(90deg, #59fcb3 0%, #2b976c 100%); + color: #000; +} + +.file-preview-btn-publish .icon { + background-color: #000; +} + +.file-preview-btn-publish:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +/* App Details Panel Theme Overrides */ +.app-details-panel { + background-color: #0a0a0a; +} + +.app-details-header { + background-color: rgba(22, 22, 22, 0.85); +} + +.app-details-icon-container { + background-color: rgba(89, 252, 179, 0.1); +} + +.app-details-icon-placeholder { + background-color: #59fcb3; +} + +.app-details-category { + background-color: rgba(89, 252, 179, 0.15); + color: #59fcb3; +} + +.app-details-category:hover { + background-color: rgba(89, 252, 179, 0.3); +} + +.app-details-action-btn { + background-color: #58fcb3; + color: #000; +} + +.app-details-action-btn:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +.app-details-action-btn.installed { + background-color: #58fcb3; +} + +.app-details-action-btn.installing { + background-color: #58fcb3; + opacity: 0.7; +} + +/* App Details Uninstall Button */ +.app-details-uninstall-btn { + background-color: rgba(255, 100, 100, 0.2); + color: #ff6464; + border: 1px solid rgba(255, 100, 100, 0.4); +} + +.app-details-uninstall-btn:hover { + background-color: rgba(255, 100, 100, 0.3); + box-shadow: 0 4px 16px rgba(255, 100, 100, 0.2); +} + +/* App Details Update Button */ +.app-details-update-btn { + background-color: #58fcb3; + color: #000; +} + +.app-details-update-btn:hover { + box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4); +} + +.app-details-update-btn.updating { + background-color: #58fcb3; + opacity: 0.7; +} + +.app-details-publisher { + background-color: rgba(89, 252, 179, 0.05); +} + +.app-details-publisher:hover { + background-color: rgba(89, 252, 179, 0.1); +} + +/* Marketplace category overflow indicator */ +.marketplace-app-category-overflow { + background-color: rgba(89, 252, 179, 0.2); + color: rgba(89, 252, 179, 0.9); +} + +/* Featured category card */ +.marketplace-featured-category.highlighted { + background: linear-gradient(135deg, rgba(89, 252, 179, 0.15) 0%, rgba(43, 151, 108, 0.08) 100%); + border-color: rgba(89, 252, 179, 0.3); +} + +.marketplace-featured-category.highlighted:hover { + box-shadow: 0 8px 24px rgba(89, 252, 179, 0.2); +} + +.marketplace-popular-category:hover { + background-color: rgba(89, 252, 179, 0.2); + color: #59fcb3; +} + +/* Relay Add Button */ +.relay-add-btn { + background: #6202D425; + border: 1px solid #6202D4; + color: #B359FC; +} + +.relay-add-btn:hover { + background: #B359FC50; + border-color: #B359FC; + color: #B359FC; +} + +/* Relay Dialog */ +.relay-dialog { + border-color: #171717; +} + +.relay-dialog-header { + background: linear-gradient(90deg, #1D003F50, #6202D4); +} + +.relay-form-input:focus, +.relay-form-select:focus { + border-color: #6202D4; +} + +.relay-dialog-buttons .primary-btn { + background-color: #6202D4; + color: #ffffff; +} + +.relay-dialog-buttons .primary-btn:hover { + color: #fff; +} + +.relay-metric-value { + color: #6202D4; +} diff --git a/src/themes/vector/dark.css b/src/themes/vector/dark.css index 984f913..6d3035f 100644 --- a/src/themes/vector/dark.css +++ b/src/themes/vector/dark.css @@ -222,7 +222,7 @@ select { } .voice-progress-fill { - background: linear-gradient(90deg, #59fcb3, #00d4ff); + background: linear-gradient(90deg, #59fcb3, #00ff9d); } .voice-progress-text { @@ -231,27 +231,24 @@ select { input[type="checkbox"]:checked + .neon-toggle { background: linear-gradient(90deg, #33db98, #00ff9d); - box-shadow: - 0 0 5px rgba(0, 255, 157, 0.5), - 0 0 10px rgba(0, 212, 255, 0.3), - inset 0 1px 3px rgba(0, 0, 0, 0.3); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } .neon-toggle:hover { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), - 0 0 8px rgba(0, 255, 157, 0.4); + 0 0 8px #59FCB320; } input[type="checkbox"]:checked + .neon-toggle:hover { box-shadow: - 0 0 8px rgba(0, 255, 157, 0.8), - 0 0 12px rgba(0, 212, 255, 0.5), + 0 0 5px #59FCB350, + 0 0 10px #59FCB330, inset 0 1px 3px rgba(0, 0, 0, 0.3); } #theme-select:focus { - box-shadow: 0 0 0 2px rgba(89, 252, 179, 0.3); + box-shadow: 0 0 0 2px #59FCB330; } .icon-trash { @@ -614,16 +611,16 @@ select:disabled { /* Relay Dialog */ .relay-dialog { - border-color: rgba(89, 252, 179, 0.25); + border-color: #161616; } .relay-dialog-header { - background: linear-gradient(90deg, rgba(89, 252, 179, 0.15) 0%, rgba(43, 151, 108, 0.1) 100%); + background: linear-gradient(90deg, #2b976c00 0%, #2b976c20 40%, #33DB9880 100%); } .relay-form-input:focus, .relay-form-select:focus { - border-color: rgba(89, 252, 179, 0.5); + border-color: #59fcb3; } .relay-dialog-buttons .primary-btn { @@ -632,7 +629,7 @@ select:disabled { } .relay-dialog-buttons .primary-btn:hover { - box-shadow: 0 4px 12px rgba(89, 252, 179, 0.3); + box-shadow: 0 0 0px #2b976c00; } .relay-metric-value { From ca54b024e8f7b6eddc580b32f30eea5b35ecb0dc Mon Sep 17 00:00:00 2001 From: Yuurin Bee Date: Tue, 27 Jan 2026 23:49:24 +0700 Subject: [PATCH 2/2] Fix hardcoded color in group member hover effect --- src/js/settings.js | 2 +- src/main.js | 2 +- src/themes/pivx/dark.css | 2 +- src/themes/vector/dark.css | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/js/settings.js b/src/js/settings.js index 20f9b0e..d4de789 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -680,7 +680,7 @@ async function selectFile() { * @param {string} mode - The theme mode, i.e: light, dark */ function applyTheme(theme = 'vector', mode = 'dark') { - document.body.classList.remove('vector-theme', 'chatstr-theme', 'pivx-theme'); + document.body.classList.remove('vector-theme', 'chatstr-theme', 'gifverse-theme', 'pivx-theme'); document.body.classList.add(`${theme}-theme`); domTheme.href = `/themes/${theme}/${mode}.css`; diff --git a/src/main.js b/src/main.js index 7f4641d..d54d351 100644 --- a/src/main.js +++ b/src/main.js @@ -8741,7 +8741,7 @@ async function renderGroupOverview(chat) { memberDiv.appendChild(bgDiv); memberDiv.addEventListener('mouseenter', () => { - const primaryColor = '#59fcb3'; + const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--icon-color-primary').trim(); bgDiv.style.background = `linear-gradient(to right, ${primaryColor}40, transparent)`; bgDiv.style.opacity = '1'; }); diff --git a/src/themes/pivx/dark.css b/src/themes/pivx/dark.css index 046bd5b..5ecc448 100644 --- a/src/themes/pivx/dark.css +++ b/src/themes/pivx/dark.css @@ -187,7 +187,7 @@ input[type="checkbox"]:checked + .neon-toggle { .neon-toggle:hover { box-shadow: 0 0 8px #6202D450, - inset 0 1px 3px rgba(0, 0, 0, 0.3), + inset 0 1px 3px rgba(0, 0, 0, 0.3); } input[type="checkbox"]:checked + .neon-toggle:hover { diff --git a/src/themes/vector/dark.css b/src/themes/vector/dark.css index 6d3035f..aa66812 100644 --- a/src/themes/vector/dark.css +++ b/src/themes/vector/dark.css @@ -114,7 +114,7 @@ button { } button:hover { - background-color: (152, 255, 214, 0.5); + background-color: rgba(152, 255, 214, 0.5); } .corner-float {