diff --git a/src-tauri/icons/Nexus.svg b/src-tauri/icons/Nexus.svg index 13fe4dd..a6e61a8 100644 --- a/src-tauri/icons/Nexus.svg +++ b/src-tauri/icons/Nexus.svg @@ -1,6 +1,30 @@ - + - - + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/nexus.svg b/src/icons/nexus.svg index 13fe4dd..8922226 100644 --- a/src/icons/nexus.svg +++ b/src/icons/nexus.svg @@ -1,6 +1,22 @@ - + - - + + + + + + + + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 4a77f12..a5f2eea 100644 --- a/src/index.html +++ b/src/index.html @@ -717,6 +717,7 @@

Select Members

Choose Theme

+ + + + diff --git a/src/js/db.js b/src/js/db.js index 8f1d372..4607d64 100644 --- a/src/js/db.js +++ b/src/js/db.js @@ -43,6 +43,24 @@ async function saveTheme(theme) { return await invoke('set_sql_setting', { key: 'theme', value: theme }); } +/** + * Load the user's Chat Background Wallpaper setting + * @returns {Promise} - true if enabled (default), false if disabled + */ +async function loadChatBgEnabled() { + const value = await invoke('get_sql_setting', { key: 'chat_bg_enabled' }); + if (value === null || value === undefined) return true; // Default: enabled + return value === 'true' || value === '1'; +} + +/** + * Save the user's Chat Background Wallpaper setting + * @param {boolean} enabled - true to enable, false to disable + */ +async function saveChatBgEnabled(enabled) { + return await invoke('set_sql_setting', { key: 'chat_bg_enabled', value: enabled ? 'true' : 'false' }); +} + /** * Load the user's Whisper Auto Translate setting * @returns {Promise} diff --git a/src/js/settings.js b/src/js/settings.js index 1fd5a5c..0682de5 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', 'gifverse-theme', 'pivx-theme'); + document.body.classList.remove('vector-theme', 'satoshi-theme', 'chatstr-theme', 'gifverse-theme', 'pivx-theme'); document.body.classList.add(`${theme}-theme`); domTheme.href = `/themes/${theme}/${mode}.css`; @@ -1465,6 +1465,26 @@ async function initSettings() { await saveDisplayImageTypes(e.target.checked); }); + // Background Wallpaper toggle (Chat Background) + const chatBgToggle = document.getElementById('chat-bg-toggle'); + if (chatBgToggle) { + // Load saved preference from database (default: enabled) + const chatBgEnabled = await loadChatBgEnabled(); + chatBgToggle.checked = chatBgEnabled; + if (!chatBgEnabled) document.body.classList.add('chat-bg-disabled'); + + // Handle toggle changes + chatBgToggle.addEventListener('change', async () => { + if (chatBgToggle.checked) { + document.body.classList.remove('chat-bg-disabled'); + await saveChatBgEnabled(true); + } else { + document.body.classList.add('chat-bg-disabled'); + await saveChatBgEnabled(false); + } + }); + } + // Initialize notification sound settings (desktop only) if (platformFeatures.notification_sounds) { await initNotificationSettings(); diff --git a/src/main.js b/src/main.js index 5ebf84c..6ce7a50 100644 --- a/src/main.js +++ b/src/main.js @@ -150,6 +150,7 @@ const domSettingsPrivacyWebPreviewsInfo = document.getElementById('privacy-web-p const domSettingsPrivacyStripTrackingInfo = document.getElementById('privacy-strip-tracking-info'); const domSettingsPrivacySendTypingInfo = document.getElementById('privacy-send-typing-info'); const domSettingsDisplayImageTypesInfo = document.getElementById('display-image-types-info'); +const domSettingsChatBgInfo = document.getElementById('chat-bg-info'); const domSettingsNotifMuteInfo = document.getElementById('notif-mute-info'); const domSettingsDeepRescanInfo = document.getElementById('deep-rescan-info'); const domSettingsExportAccountInfo = document.getElementById('export-account-info'); @@ -10907,6 +10908,11 @@ domChatMessageInput.oninput = async () => { e.stopPropagation(); popupConfirm('Display Image Types', 'When enabled, images in chat will display a small badge showing the file type (e.g., PNG, GIF, WEBP) in the corner.

This helps identify image formats at a glance.', true); }; + domSettingsChatBgInfo.onclick = (e) => { + e.preventDefault(); + e.stopPropagation(); + popupConfirm('Background Wallpaper', 'This feature enables and disables background images inside of Chats (Private & Group Chats).

Only applies to certain themes.', true); + }; domSettingsNotifMuteInfo.onclick = (e) => { e.preventDefault(); e.stopPropagation(); @@ -10949,7 +10955,7 @@ domChatMessageInput.oninput = async () => { domSettingsDonorsInfo.onclick = (e) => { e.preventDefault(); e.stopPropagation(); - popupConfirm('Donors & Contributors', 'The organisations listed below have contributed either financially or resourcefully (developers, infrastructure, etc) to Vector\'s development.

We extend our sincere thanks to these supporters for helping make Vector possible.', true); + popupConfirm('Donors & Contributors', 'Your support keeps Vector Privacy independent, open-source, and free. If you would be interested in donating, please visit our GitBook to learn more.

We extend our sincere gratitude to these supporters for helping make Vector possible.', true); }; // PIVX donor logo click - opens pivx.org diff --git a/src/styles.css b/src/styles.css index 3735553..1d4ffa4 100644 --- a/src/styles.css +++ b/src/styles.css @@ -207,8 +207,11 @@ } .icon-nexus { - -webkit-mask-image: url("./icons/nexus.svg"); - mask-image: url("./icons/nexus.svg"); + mask-image: none !important; + -webkit-mask-image: none !important; + background-color: transparent !important; + background-image: url("./icons/nexus.svg"); + background-size: contain; background-repeat: no-repeat; background-position: center; } @@ -1182,6 +1185,11 @@ html, body { margin-bottom: 10px; } +/* Chat background toggle */ +body.chat-bg-disabled .chat-messages::before { + display: none; +} + .msg-inline-timestamp { width: 100%; text-align: center; @@ -3846,7 +3854,8 @@ select:disabled:hover { .chat-new-title { margin-top: 25px; margin-bottom: 5px; - text-align: left; + text-align: center; + align-items: center; font-weight: 500; letter-spacing: 1px; } @@ -3881,14 +3890,17 @@ select:disabled:hover { } .chat-new-subtitle { - margin-bottom: 10px; + margin-bottom: 0px; letter-spacing: 1px; + text-align: center; + align-items: center; } .chat-new-subtitle-divider { margin-top: 8px; margin-bottom: 10px; width: 325px; + margin: 0.5rem auto; } .chat-new-description { @@ -6272,7 +6284,6 @@ hr { .attachment-panel-marketplace-btn .icon-nexus { width: 70% !important; height: 70% !important; - background-color: #59fcb3 !important; } #attachment-panel-marketplace .attachment-panel-label { diff --git a/src/themes/chatstr/dark.css b/src/themes/chatstr/dark.css index 008db45..5fe1555 100644 --- a/src/themes/chatstr/dark.css +++ b/src/themes/chatstr/dark.css @@ -1,11 +1,11 @@ :root { - background-color: #0e0e10; + background-color: #030303; --voice-highlight-bg: rgba(177, 136, 226, 0.3); --voice-highlight-text: #b188e2; --voice-frequency-glow: rgba(177, 136, 226, 0.8); --icon-color-primary: #b188e2; --voice-progress-secondary: rgba(177, 136, 226, 0.4); - --reply-highlight-border: #a128fd; + --reply-highlight-border: #CD3DD3; } .sync-line { @@ -14,12 +14,12 @@ .popup { background-color: rgba(0, 0, 0, 1); - box-shadow: 0 0 15px rgba(112, 0, 128, 0.20); - border-color: rgba(112, 0, 128, 0.5); + box-shadow: 0 0 15px #b188e220; + border-color: #b188e2; } .text-gradient { - background: linear-gradient(to right, #f8f8f8 13.87%, #b188e2 60%); + background: linear-gradient(to right, #f8f8f8 13.87%, #f8f8f8 60%); background-size: 200% 200%; background-clip: text; } @@ -51,13 +51,13 @@ .msg-me p { color: #ffffff; - border-color: rgba(29,29,117,0.5); - background: linear-gradient(157deg, rgba(29,29,117,0.5) 45%, rgba(118,33,129,0.5) 100%); + background-color: #161616; + border-color: #161616; } .msg-them p { - background-color: #24252a; - border-color: #24252a; + background: linear-gradient(90deg, #b188e260, #b188e200); + border-color: #b188e2; } .msg-reply { @@ -66,7 +66,7 @@ /* Purple border when quoting the other person's message */ .msg-reply-them { - border-left-color: #9941dbb3 !important; + border-left-color: #b188e2 !important; } @keyframes highlightMessage { @@ -95,7 +95,7 @@ } .input-box { - background-color: #251134ff; + background: linear-gradient(90deg, #CD3DD3, #b188e2, #5749E4); } #chat-input { @@ -109,15 +109,15 @@ button { } .corner-float { - border-color: rgba(161, 40, 253, 0.4); + border-color: 5749E440; } .divider { - background-color: rgba(128, 0, 128, 0.5); + background-color: #b188e250; } .new-chat-btn .icon { - background-color: rgba(177, 136, 226, 0.75); + background-color: #b188e2; } .msg-preview-container { @@ -181,21 +181,18 @@ select { input[type="checkbox"]:checked + .neon-toggle { background: linear-gradient(135deg, #b188e2, #9b59b6); box-shadow: - 0 0 5px rgba(177, 136, 226, 0.5), - 0 0 10px rgba(155, 89, 182, 0.3), 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(177, 136, 226, 0.4); + 0 0 4px #b2b2b2, + inset 0 1px 3px rgba(0, 0, 0, 0.3); } input[type="checkbox"]:checked + .neon-toggle:hover { box-shadow: - 0 0 8px rgba(177, 136, 226, 0.8), - 0 0 12px rgba(155, 89, 182, 0.5), + 0 0 8px rgba(177, 136, 226, 0.5), inset 0 1px 3px rgba(0, 0, 0, 0.3); } @@ -229,33 +226,34 @@ select:disabled { /* msg-me style (purple gradient to match text bubbles) */ .msg-me .custom-audio-player { - background: linear-gradient(157deg, rgba(29,29,117,0.5) 45%, rgba(118,33,129,0.5) 100%); - border-color: rgba(29,29,117,0.5); + background: #161616; + border-color: #161616; } .msg-me .custom-audio-player:hover { - background: linear-gradient(157deg, rgba(29,29,117,0.6) 45%, rgba(118,33,129,0.6) 100%); - border-color: rgba(177, 136, 226, 0.5); + background: #1a1a1a; + border-color: #2a2a2a; + box-shadow: none; } /* msg-them style (dark gray to match text bubbles) */ .msg-them .custom-audio-player { - background: #24252a; - border-color: #24252a; + background: linear-gradient(90deg, #b188e240, #5749E440); + border-color: #b188e275; } .msg-them .custom-audio-player:hover { - background: #2a2b30; - border-color: #3a3b40; + background: linear-gradient(90deg, #b188e260, #5749E460); + border-color: #b188e2; box-shadow: none; } .audio-play-btn { - background: linear-gradient(135deg, #b188e2 0%, #7d3c98 100%); + background: #b188e2; } .audio-progress-fill { - background: linear-gradient(90deg, #b188e2 0%, #9b59b6 100%); + background: linear-gradient(90deg, #b188e2 0%, #CD3DD3 100%); } .audio-progress-handle { @@ -263,7 +261,7 @@ select:disabled { } .waveform-bar { - background: linear-gradient(to top, #7d3c98, #b188e2); + background: linear-gradient(to top, #5749E4, #b188e2); } .custom-audio-player.playing .waveform-bar { @@ -271,7 +269,7 @@ select:disabled { } .audio-time-display .current-time { - color: #b188e2; + color: #ffffff60; } .audio-transcribe-btn .icon { @@ -279,7 +277,7 @@ select:disabled { } .transcribe-progress-fill { - background: linear-gradient(90deg, #b188e2, #9b59b6); + background: linear-gradient(90deg, #5749E4, #b188e2); } .transcribe-progress-text { @@ -299,14 +297,15 @@ select:disabled { } .accept-btn { - background: rgba(177, 136, 226, 0.1); - border: 1px solid rgba(177, 136, 226, 0.3); + background: #b188e220; + border: 1px solid #b188e2; color: #b188e2; } .accept-btn:hover:not(:disabled) { - background: rgba(177, 136, 226, 0.2); - border-color: rgba(177, 136, 226, 0.5); + background: #b188e210; + border-color: #CD3DD3; + color: #fff; } #update-status-text { @@ -624,8 +623,7 @@ select:disabled { /* Relay Add Button */ .relay-add-btn { - background: rgba(177, 136, 226, 0.2); - border: 1px solid rgba(177, 136, 226, 0.4); + background: #b188e220; color: #b188e2; } @@ -640,12 +638,12 @@ select:disabled { } .relay-dialog-header { - background: linear-gradient(90deg, rgba(177, 136, 226, 0.15) 0%, rgba(125, 60, 152, 0.1) 100%); + background: linear-gradient(90deg, #b188e210 0%,#b188e2 75%, #5749E4 100%); } .relay-form-input:focus, .relay-form-select:focus { - border-color: rgba(177, 136, 226, 0.5); + border-color: #b188e2; } .relay-dialog-buttons .primary-btn { @@ -654,7 +652,8 @@ select:disabled { } .relay-dialog-buttons .primary-btn:hover { - box-shadow: 0 4px 12px rgba(177, 136, 226, 0.3); + color: #fff; + background-color: #5749E4; } .relay-metric-value { diff --git a/src/themes/gifverse/dark.css b/src/themes/gifverse/dark.css index aeedfd2..02bcfe4 100644 --- a/src/themes/gifverse/dark.css +++ b/src/themes/gifverse/dark.css @@ -1,10 +1,10 @@ :root { - background-color: #0A0A0A; - --voice-highlight-bg: rgba(177, 136, 226, 0.3); + background-color: #030303; + --voice-highlight-bg: #F7FFAE30; --voice-highlight-text: #F7FFAE; - --voice-frequency-glow: rgba(177, 136, 226, 0.8); + --voice-frequency-glow: #F7FFAE80; --icon-color-primary: #F7FFAE; - --voice-progress-secondary: rgba(177, 136, 226, 0.4); + --voice-progress-secondary: #F7FFAE40; --reply-highlight-border: #FFAECE; } @@ -19,7 +19,7 @@ } .text-gradient { - background: linear-gradient(to right, #f8f8f8 13.87%, #F7FFAE 60%); + background: linear-gradient(to right, #f8f8f8 13.87%, #f8f8f8 60%); background-size: 200% 200%; background-clip: text; } @@ -142,7 +142,7 @@ select { #F7FFAE 0%, #AEFFDF 25%, #B6AEFF 50%, - #1D003F 100%); + #FFAECE 100%); } #download-model:hover { @@ -168,12 +168,12 @@ select { } .progress-text { - text-shadow: 0 0 5px #6202D470; + text-shadow: 0 0 5px #F7FFAE70; } .voice-progress-container { - border: 1px solid #6202D4; - box-shadow: 0 0 15px #6202D430; + border: 1px solid #F7FFAE; + box-shadow: 0 0 15px #F7FFAE30; } .voice-progress-fill { @@ -279,7 +279,7 @@ select:disabled { } .audio-transcribe-btn .icon { - background-color: #6202D4; + background-color: #F7FFAE; } .transcribe-progress-fill { diff --git a/src/themes/pivx/chat-bg.png b/src/themes/pivx/chat-bg.png new file mode 100644 index 0000000..f29541d Binary files /dev/null and b/src/themes/pivx/chat-bg.png differ diff --git a/src/themes/pivx/dark.css b/src/themes/pivx/dark.css index d0cb707..cfec619 100644 --- a/src/themes/pivx/dark.css +++ b/src/themes/pivx/dark.css @@ -1,11 +1,12 @@ :root { - background-color: #0A0A0A; + background-color: #030303; --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; + --chat-bg-opacity: 0.04; } .sync-line { @@ -47,6 +48,28 @@ border-top-color: #6202D475; border-top-style: solid; border-top-width: 1px; + position: relative; +} + +.chat-messages::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url('./chat-bg.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + opacity: var(--chat-bg-opacity); + pointer-events: none; + z-index: 0; +} + +.chat-messages > * { + position: relative; + z-index: 1; } .msg-me p { @@ -179,20 +202,19 @@ select { } input[type="checkbox"]:checked + .neon-toggle { - background: linear-gradient(135deg, #6202D4, #1D003F); + background: linear-gradient(90deg, #6202D4, #1D003F); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } .neon-toggle:hover { box-shadow: - 0 0 8px #6202D450, + 0 0 4px #b2b2b2, 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); } diff --git a/src/themes/satoshi/dark.css b/src/themes/satoshi/dark.css new file mode 100644 index 0000000..98e344b --- /dev/null +++ b/src/themes/satoshi/dark.css @@ -0,0 +1,653 @@ +:root { + background-color: #030303; + --voice-highlight-bg: #F7931A30; + --voice-highlight-text: #F9AA4B; + --voice-frequency-glow: #F7931A80; + --icon-color-primary: #F7931A; + --voice-progress-secondary: #F7931A40; + --reply-highlight-border: #F9AA4B; +} + +.sync-line { + background-color: #F9AA4B; +} + +.popup { + background-color: rgba(0, 0, 0, 1); + box-shadow: 0 0 15px #F7931A20; + border-color: #F7931A; +} + +.text-gradient { + background: linear-gradient(to right, #f8f8f8 13.87%, #F7931A 60%); + background-size: 200% 200%; + background-clip: text; +} + +.text-gradient-green { + background: linear-gradient(to right, #F7931A 13.87%, #B56C12 60%); + background-size: 200% 200%; + background-clip: text; +} + +.back-btn { + color: #F9AA4B; +} + +.chatlist-contact { + border-color: transparent; +} + +.chat { + background-color: inherit; +} + +.chat-messages { + background-color: #030303; + border-top-color: #F7931A75; + 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, #F7931A60, #B56C1222); + border-color: #F7931A; +} + +.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: #F7931A !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: #F7931A; +} + +.attachment-panel { + background: #0a0a0a; + border-color: #F7931A; +} + +.input-box { + background: linear-gradient(90deg, #F7931A, #B56C12); +} + +#chat-input { + background-color: #0A0A0A; +} + +input, +textarea, +button { + background-color: #F9AA4B99; +} + +.corner-float { + border-color: #F9AA4B; +} + +.divider { + background-color: #474747; +} + +.new-chat-btn .icon { + background-color: #F9AA4B; +} + +.msg-preview-container { + border-color: #F9AA4B !important; + background-color: #F7931A50 !important; +} + +.progress-bar { + background: linear-gradient(90deg, #F7931A 0%, #B56C12 100%); +} + +select { + border: 1px solid #F7931A; +} + +#whisper-model:focus { + box-shadow: 0 0 0 2px #F9AA4B30; +} + +#download-model { + background: linear-gradient(135deg, #F7931A 0%, #B56C12 100%); +} + +#download-model:hover { + box-shadow: 0 5px 15px #F7931A30; +} + +.model-status { + color: #F7931A; +} + +.progress-bar-track { + box-shadow: + inset 0 1px 3px rgba(0, 0, 0, 0.4), + 0 0 0 1px #F7931A10; +} + +.progress-bar-fill { + background: linear-gradient(90deg, + #F7931A 0%, + #B56C12 100%); +} + +.progress-text { + text-shadow: 0 0 5px #F7931A70; +} + +.voice-progress-container { + border: 1px solid #F7931A; + box-shadow: 0 0 15px #F7931A30; +} + +.voice-progress-fill { + background: linear-gradient(90deg, #F9AA4B, #F7931A, #B56C12); +} + +.voice-progress-text { + color: #F7931A; +} + +input[type="checkbox"]:checked + .neon-toggle { + background: linear-gradient(90deg, #F9AA4B, #F7931A, #B56C12); + box-shadow: + inset 0 1px 3px rgba(0, 0, 0, 0.3); +} + +.neon-toggle:hover { + box-shadow: + 0 0 4px #b2b2b2, + inset 0 1px 3px rgba(0, 0, 0, 0.3); +} + +input[type="checkbox"]:checked + .neon-toggle:hover { + box-shadow: + inset 0 1px 3px rgba(0, 0, 0, 0.3); +} + +#theme-select:focus { + box-shadow: 0 0 0 2px #F7931A30; +} + +.icon-trash { + background-color: #F7931A; +} + +select:disabled { + border-color: rgba(177, 136, 226, 0.3); +} + +.nav-icon { + background-color: #F9AA4B; +} + +/* 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: #F7931A20; + border-color: #F7931A80; +} + +.msg-them .custom-audio-player:hover { + background: #F7931A40; + border-color: #F7931A; + box-shadow: none; +} + +.audio-play-btn { + background: linear-gradient(135deg, #F9AA4B 0%, #F7931A 100%); +} + +.audio-progress-fill { + background: linear-gradient(90deg, #F7931A 0%, #B56C12 100%); +} + +.audio-progress-handle { + background: #F7931A; +} + +.waveform-bar { + background: linear-gradient(to top, #F9AA4B, #F7931A); +} + +.custom-audio-player.playing .waveform-bar { + box-shadow: none; +} + +.audio-time-display .current-time { + color: #ffffff60; +} + +.audio-transcribe-btn .icon { + background-color: #F7931A; +} + +.transcribe-progress-fill { + background: linear-gradient(90deg, #F7931A, #B56C12); +} + +.transcribe-progress-text { + color: #F7931A; +} + +.transcription-section.current { + background-color: rgba(177, 136, 226, 0.3); + color: #F7931A; + box-shadow: 0 0 8px rgba(177, 136, 226, 0.2); +} + +/* Update Settings Section Styles */ +#current-version, +#new-version { + color: #F9AA4B; +} + +.accept-btn { + background: #B56C1210; + border: 1px solid #F7931A; + color: #ffffff; +} + +.accept-btn:hover:not(:disabled) { + background: #B56C1250; + border-color: #F9AA4B; + color: #ffffff; +} + +#update-status-text { + color: rgba(255, 255, 255, 0.8); +} + +#update-progress-bar { + background: linear-gradient(90deg, #F7931A 0%, #B56C12 100%); + box-shadow: 0 0 10px #F7931A40; +} + +#download-update-btn, +#restart-update-btn { + color: #000; + border: none; + box-shadow: 0 4px 12px #F7931A30; +} + +#changelog-content { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #F7931A20; + color: rgba(255, 255, 255, 0.8); +} + +#popupConfirm { + background-color: #F7931A; + 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: #F7931A; +} + +.file-preview-option { + background: rgba(177, 136, 226, 0.05); + border: 1px solid rgba(177, 136, 226, 0.1); +} + +.file-preview-btn-send { + background: #F7931A; + 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-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: #F7931A25; + border: 1px solid #F7931A; + color: #F9AA4B; +} + +.relay-add-btn:hover { + background: #F9AA4B50; + border-color: #F9AA4B; + color: #F9AA4B; +} + +/* Relay Dialog */ +.relay-dialog { + border-color: #171717; +} + +.relay-dialog-header { + background: linear-gradient(90deg, #B56C1220, #F7931A); +} + +.relay-form-input:focus, +.relay-form-select:focus { + border-color: #F7931A; +} + +.relay-dialog-buttons .primary-btn { + background-color: #F7931A; + color: #ffffff; +} + +.relay-dialog-buttons .primary-btn:hover { + color: #fff; +} + +.relay-metric-value { + color: #F7931A; +} diff --git a/src/themes/vector/dark.css b/src/themes/vector/dark.css index 9e774f8..34d229c 100644 --- a/src/themes/vector/dark.css +++ b/src/themes/vector/dark.css @@ -232,14 +232,13 @@ input[type="checkbox"]:checked + .neon-toggle { .neon-toggle:hover { box-shadow: - inset 0 1px 3px rgba(0, 0, 0, 0.3), - 0 0 8px #59FCB320; + 0 0 4px #b2b2b2, + inset 0 1px 3px rgba(0, 0, 0, 0.3); } input[type="checkbox"]:checked + .neon-toggle:hover { box-shadow: - 0 0 5px #59FCB350, - 0 0 10px #59FCB330, + 0 0 4px #59fcb3, inset 0 1px 3px rgba(0, 0, 0, 0.3); } @@ -598,7 +597,7 @@ select:disabled { /* Relay Dialog */ .relay-dialog { - border-color: #161616; + border-color: #171717; } .relay-dialog-header {