From c2c5be340986163ed2f810b5b58e311ff2bc955d Mon Sep 17 00:00:00 2001 From: zaelgohary Date: Wed, 28 May 2025 11:39:25 +0300 Subject: [PATCH] Enhance UI, remove unused code --- crypto_vault_extension/background.js | 2 + crypto_vault_extension/content.js | 89 ---- crypto_vault_extension/icons/icon32.png | Bin 712 -> 0 bytes crypto_vault_extension/manifest.json | 7 +- crypto_vault_extension/popup.html | 33 +- crypto_vault_extension/popup.js | 80 ++-- crypto_vault_extension/styles/popup.css | 530 ++++++++++-------------- 7 files changed, 254 insertions(+), 487 deletions(-) delete mode 100644 crypto_vault_extension/content.js delete mode 100644 crypto_vault_extension/icons/icon32.png diff --git a/crypto_vault_extension/background.js b/crypto_vault_extension/background.js index cc8d04e..9201ec9 100644 --- a/crypto_vault_extension/background.js +++ b/crypto_vault_extension/background.js @@ -10,6 +10,8 @@ function toHex(uint8Array) { .join(''); } + + // Session persistence functions async function saveSession(keyspace) { currentSession = { keyspace, timestamp: Date.now() }; diff --git a/crypto_vault_extension/content.js b/crypto_vault_extension/content.js deleted file mode 100644 index e1041b7..0000000 --- a/crypto_vault_extension/content.js +++ /dev/null @@ -1,89 +0,0 @@ -// Content script for potential webpage integration -// This can be used to inject CryptoVault functionality into webpages - -(function() { - 'use strict'; - - // Create a bridge between webpage and extension - const cryptoVaultBridge = { - async isAvailable() { - try { - const response = await chrome.runtime.sendMessage({ action: 'getStatus' }); - return response.success && response.status; - } catch (error) { - return false; - } - }, - - async sign(message) { - try { - const response = await chrome.runtime.sendMessage({ - action: 'sign', - message: Array.from(new TextEncoder().encode(message)) - }); - return response.success ? response.signature : null; - } catch (error) { - console.error('CryptoVault sign error:', error); - return null; - } - }, - - async getPublicKey() { - try { - const response = await chrome.runtime.sendMessage({ action: 'getCurrentKeypairPublicKey' }); - return response.success ? response.publicKey : null; - } catch (error) { - console.error('CryptoVault getPublicKey error:', error); - return null; - } - } - }; - - // Expose to window for webpage access (optional) - if (window.location.protocol === 'https:' || window.location.hostname === 'localhost') { - window.cryptoVault = cryptoVaultBridge; - - // Dispatch event to let webpage know CryptoVault is available - window.dispatchEvent(new CustomEvent('cryptovault-ready', { - detail: { available: true } - })); - } - - // Listen for messages from webpage - window.addEventListener('message', async (event) => { - if (event.source !== window || !event.data.cryptoVault) return; - - const { action, id, data } = event.data; - let result; - - try { - switch (action) { - case 'sign': - result = await cryptoVaultBridge.sign(data.message); - break; - case 'getPublicKey': - result = await cryptoVaultBridge.getPublicKey(); - break; - case 'isAvailable': - result = await cryptoVaultBridge.isAvailable(); - break; - default: - throw new Error('Unknown action: ' + action); - } - - window.postMessage({ - cryptoVaultResponse: true, - id, - success: true, - result - }, '*'); - } catch (error) { - window.postMessage({ - cryptoVaultResponse: true, - id, - success: false, - error: error.message - }, '*'); - } - }); -})(); \ No newline at end of file diff --git a/crypto_vault_extension/icons/icon32.png b/crypto_vault_extension/icons/icon32.png deleted file mode 100644 index d761cc8db142a6e8bab2152e9a68e99b77c1aebd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 712 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7e6l0AZa85pY67#JE_7#My5g&JNk zFq9fFFuY1&V6d9Oz#v{QXIG#NP-0hrPlzj!W@s3C=>Px!nFg8>K*!sZ1o;IsFxXAI z@JeN$!v~#D-!?Qco!cZ8vTDm4fk`59G68-ZK6QOrO1I`2{9$>w!{P;3&;g0CV`lfh ztl@domU3-Rf#EBlIgCl(?k=_$aswlQ9QG1VUsv{*tOER&%7<VpC^%#e#>FaDOsjqIEZ?1T}AUpGZ#=<*hk1ystzF`#9$k%nv-9$%aZpeYOGliCg zvd406>ObJz-Bk8*4y)#c!>+%ZzD@kL1a?gVj4jM(M{C%n=9ijU_-XSVUwxDqH-Mk+%YmV~8+etUH7_H6Psl#ANP&=kq-A9qL^{ zFW&{a%=PfU|LoP{gX%v6XIpOLy`5Y|F61d=b1X@g)IEnqrm^}bd~kF e+f_R`Ke99VWd8ilamx`HrVO60elF{r5}E+`z5O=; diff --git a/crypto_vault_extension/manifest.json b/crypto_vault_extension/manifest.json index 9602ce8..bad7309 100644 --- a/crypto_vault_extension/manifest.json +++ b/crypto_vault_extension/manifest.json @@ -14,12 +14,7 @@ "type": "module" }, - "content_scripts": [ - { - "matches": [""], - "js": ["content.js"] - } - ], + "action": { "default_popup": "popup.html", diff --git a/crypto_vault_extension/popup.html b/crypto_vault_extension/popup.html index 1b620cb..dee003b 100644 --- a/crypto_vault_extension/popup.html +++ b/crypto_vault_extension/popup.html @@ -99,32 +99,7 @@ - - +
@@ -202,11 +177,7 @@
- - + diff --git a/crypto_vault_extension/popup.js b/crypto_vault_extension/popup.js index 2a1dd61..fb2bd01 100644 --- a/crypto_vault_extension/popup.js +++ b/crypto_vault_extension/popup.js @@ -58,10 +58,7 @@ function getToastIcon(type) { } } -function showLoading(show = true) { - const overlay = document.getElementById('loadingOverlay'); - overlay.classList.toggle('hidden', !show); -} + // Enhanced loading states for buttons function setButtonLoading(button, loading = true) { @@ -162,7 +159,6 @@ const elements = { addKeypairBtn: document.getElementById('addKeypairBtn'), cancelAddKeypairBtn: document.getElementById('cancelAddKeypairBtn'), keypairsList: document.getElementById('keypairsList'), - selectedKeypairCard: document.getElementById('selectedKeypairCard'), // Sign tab messageInput: document.getElementById('messageInput'), @@ -389,9 +385,6 @@ function initializeTabs() { button.classList.add('active'); document.getElementById(`${targetTab}-tab`).classList.add('active'); - // Scroll the selected tab into view - scrollTabIntoView(button); - // Clear results when switching tabs clearTabResults(); @@ -404,12 +397,7 @@ function initializeTabs() { initializeInputValidation(); } -function scrollTabIntoView(selectedTab) { - // Simple scroll into view - if (selectedTab) { - selectedTab.scrollIntoView({ behavior: 'smooth', inline: 'center' }); - } -} + function clearTabResults() { // Hide all result sections (with null checks) @@ -500,14 +488,7 @@ function clearVaultState() { selectedKeypairId = null; updateButtonStates(); - // Clear selected keypair info (hidden elements) with null checks - const selectedName = document.getElementById('selectedName'); - const selectedType = document.getElementById('selectedType'); - const selectedPublicKey = document.getElementById('selectedPublicKey'); - if (selectedName) selectedName.textContent = '-'; - if (selectedType) selectedType.textContent = '-'; - if (selectedPublicKey) selectedPublicKey.textContent = '-'; // Hide add keypair form if open hideAddKeypairForm(); @@ -593,7 +574,6 @@ async function login() { } async function lockSession() { - showLoading(true); try { await sendMessage('lockSession'); currentKeyspace = null; @@ -609,8 +589,6 @@ async function lockSession() { showToast('Session locked', 'info'); } catch (error) { showToast('Error: ' + error.message, 'error'); - } finally { - showLoading(false); } } @@ -685,25 +663,38 @@ function renderKeypairs(keypairs) { : keypair.metadata; return ` -
+
-
${metadata.name || 'Unnamed'}
-
${keypair.key_type}
+
+
${metadata.name || 'Unnamed'}
+
${keypair.key_type}
+
-
`; }).join(''); - // Add event listeners to all select buttons - container.querySelectorAll('.select-btn').forEach(button => { - button.addEventListener('click', (e) => { - const keypairId = e.target.getAttribute('data-keypair-id'); + // Add event listeners to all keypair cards + container.querySelectorAll('.keypair-item').forEach(card => { + card.addEventListener('click', (e) => { + const keypairId = e.currentTarget.getAttribute('data-keypair-id'); selectKeypair(keypairId); }); + + // Add keyboard support + card.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + const keypairId = e.currentTarget.getAttribute('data-keypair-id'); + selectKeypair(keypairId); + } + }); }); + + // Restore selection state if there was a previously selected keypair + if (selectedKeypairId) { + updateKeypairSelection(selectedKeypairId); + } } async function selectKeypair(keyId) { @@ -720,13 +711,6 @@ async function selectKeypair(keyId) { const publicKeyResponse = await sendMessage('getCurrentKeypairPublicKey'); if (metadataResponse && metadataResponse.success && publicKeyResponse && publicKeyResponse.success) { - const metadata = metadataResponse.metadata; - - // Store the details in hidden elements for internal use - document.getElementById('selectedName').textContent = metadata.name || 'Unnamed'; - document.getElementById('selectedType').textContent = metadata.key_type; - document.getElementById('selectedPublicKey').textContent = publicKeyResponse.publicKey; - // Enable sign button if message is entered updateButtonStates(); } else { @@ -748,23 +732,17 @@ async function selectKeypair(keyId) { } function updateKeypairSelection(selectedId) { - // Remove previous selection styling + // Remove previous selection styling from all keypair items const allKeypairs = document.querySelectorAll('.keypair-item'); allKeypairs.forEach(item => { item.classList.remove('selected'); - const button = item.querySelector('.select-btn'); - button.textContent = 'Select'; - button.classList.remove('selected'); }); // Add selection styling to the selected keypair (if any) if (selectedId) { - const selectedKeypair = document.querySelector(`[data-id="${selectedId}"]`); + const selectedKeypair = document.querySelector(`[data-keypair-id="${selectedId}"]`); if (selectedKeypair) { selectedKeypair.classList.add('selected'); - const button = selectedKeypair.querySelector('.select-btn'); - button.textContent = 'Selected'; - button.classList.add('selected'); } } } @@ -948,6 +926,4 @@ async function verifySignature() { } catch (error) { elements.verifyResult.classList.add('hidden'); } -} - -// selectKeypair is now handled via event listeners, no need for global access \ No newline at end of file +} \ No newline at end of file diff --git a/crypto_vault_extension/styles/popup.css b/crypto_vault_extension/styles/popup.css index 5a7d9ac..64b4057 100644 --- a/crypto_vault_extension/styles/popup.css +++ b/crypto_vault_extension/styles/popup.css @@ -1,30 +1,40 @@ -/* CSS Variables for theming */ +/* Enhanced CSS Variables for harmonious theming */ :root { - /* Light theme colors */ - --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - --bg-secondary: rgba(255, 255, 255, 0.95); + /* Core color foundation - mathematically harmonious */ + --primary-hue: 235; + --primary-saturation: 65%; + --secondary-hue: 200; + --accent-hue: 160; + + /* Light theme - clean and professional */ + --bg-primary: linear-gradient(135deg, hsl(var(--primary-hue), 15%, 96%) 0%, hsl(var(--secondary-hue), 20%, 94%) 100%); + --bg-secondary: rgba(255, 255, 255, 0.98); --bg-card: rgba(255, 255, 255, 0.95); - --bg-input: rgba(255, 255, 255, 0.8); - --bg-button: rgba(255, 255, 255, 0.2); - --bg-button-secondary: rgba(255, 255, 255, 0.15); + --bg-input: hsl(var(--primary-hue), 20%, 98%); + --bg-button-primary: hsl(var(--primary-hue), var(--primary-saturation), 55%); + --bg-button-secondary: hsl(var(--primary-hue), 15%, 92%); --bg-button-ghost: transparent; - --text-primary: #2d3748; - --text-secondary: #4a5568; - --text-muted: #666; + --text-primary: hsl(var(--primary-hue), 25%, 15%); + --text-secondary: hsl(var(--primary-hue), 15%, 35%); + --text-muted: hsl(var(--primary-hue), 10%, 55%); --text-inverse: white; + --text-button-primary: white; + --text-button-secondary: hsl(var(--primary-hue), 25%, 25%); - --border-color: rgba(255, 255, 255, 0.3); - --border-input: rgba(255, 255, 255, 0.3); - --border-focus: #667eea; + --border-color: hsl(var(--primary-hue), 20%, 88%); + --border-input: hsl(var(--primary-hue), 15%, 82%); + --border-focus: hsl(var(--primary-hue), var(--primary-saturation), 55%); - --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1); - --shadow-button: 0 8px 25px rgba(79, 70, 229, 0.4); + --shadow-card: 0 4px 20px hsla(var(--primary-hue), 30%, 20%, 0.08); + --shadow-button: 0 2px 8px hsla(var(--primary-hue), var(--primary-saturation), 55%, 0.25); + --shadow-button-hover: 0 4px 16px hsla(var(--primary-hue), var(--primary-saturation), 55%, 0.35); - --accent-success: #10b981; - --accent-error: #ef4444; - --accent-warning: #f59e0b; - --accent-info: #3b82f6; + /* Harmonious accent colors */ + --accent-success: hsl(var(--accent-hue), 65%, 45%); + --accent-error: hsl(0, 70%, 55%); + --accent-warning: hsl(35, 85%, 55%); + --accent-info: hsl(var(--secondary-hue), 70%, 55%); /* Spacing system */ --spacing-xs: 4px; @@ -36,107 +46,95 @@ --spacing-3xl: 32px; } -/* Dark theme colors */ +/* Dark theme - harmonious complement to light theme */ [data-theme="dark"] { - --bg-primary: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); - --bg-secondary: rgba(26, 32, 44, 0.95); - --bg-card: rgba(45, 55, 72, 0.95); - --bg-input: rgba(74, 85, 104, 0.8); - --bg-button: linear-gradient(135deg, #4299e1 0%, #667eea 100%); - --bg-button-secondary: rgba(74, 85, 104, 0.8); + --bg-primary: linear-gradient(135deg, hsl(var(--primary-hue), 20%, 8%) 0%, hsl(var(--secondary-hue), 15%, 12%) 100%); + --bg-secondary: hsla(var(--primary-hue), 25%, 10%, 0.98); + --bg-card: hsla(var(--primary-hue), 20%, 14%, 0.95); + --bg-input: hsl(var(--primary-hue), 15%, 18%); + --bg-button-primary: hsl(var(--primary-hue), var(--primary-saturation), 60%); + --bg-button-secondary: hsl(var(--primary-hue), 15%, 22%); --bg-button-ghost: transparent; - --text-primary: #ffffff; - --text-secondary: #f7fafc; - --text-muted: #cbd5e0; - --text-inverse: #1a202c; + --text-primary: hsl(var(--primary-hue), 15%, 92%); + --text-secondary: hsl(var(--primary-hue), 10%, 75%); + --text-muted: hsl(var(--primary-hue), 8%, 55%); + --text-inverse: hsl(var(--primary-hue), 20%, 8%); + --text-button-primary: white; + --text-button-secondary: hsl(var(--primary-hue), 15%, 85%); - --border-color: rgba(203, 213, 224, 0.2); - --border-input: rgba(203, 213, 224, 0.3); - --border-focus: #4299e1; + --border-color: hsl(var(--primary-hue), 15%, 25%); + --border-input: hsl(var(--primary-hue), 12%, 30%); + --border-focus: hsl(var(--primary-hue), var(--primary-saturation), 60%); - --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3); - --shadow-button: 0 8px 25px rgba(66, 153, 225, 0.3); + --shadow-card: 0 4px 20px hsla(var(--primary-hue), 30%, 5%, 0.4); + --shadow-button: 0 2px 8px hsla(var(--primary-hue), var(--primary-saturation), 60%, 0.3); + --shadow-button-hover: 0 4px 16px hsla(var(--primary-hue), var(--primary-saturation), 60%, 0.4); - --accent-success: #34d399; - --accent-error: #f87171; - --accent-warning: #fbbf24; - --accent-info: #60a5fa; + /* Enhanced accent colors for dark theme */ + --accent-success: hsl(var(--accent-hue), 60%, 55%); + --accent-error: hsl(0, 65%, 60%); + --accent-warning: hsl(35, 80%, 60%); + --accent-info: hsl(var(--secondary-hue), 65%, 60%); } -/* Dark theme button text overrides */ -[data-theme="dark"] .btn-primary, -[data-theme="dark"] .btn-secondary, -[data-theme="dark"] .btn-ghost { - color: white; +/* Harmonious button styling system */ +.btn-primary { + background: var(--bg-button-primary); + color: var(--text-button-primary); + border: none; + font-weight: 600; + box-shadow: var(--shadow-button); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } -/* Dark theme buttons inside cards */ -[data-theme="dark"] .card .btn-primary { - background: linear-gradient(135deg, #4299e1 0%, #667eea 100%); - color: white; - border: 2px solid transparent; +.btn-primary:hover { + background: hsl(var(--primary-hue), var(--primary-saturation), 50%); + box-shadow: var(--shadow-button-hover); + transform: translateY(-1px); } -[data-theme="dark"] .card .btn-primary:hover { - background: linear-gradient(135deg, #3182ce 0%, #5a67d8 100%); - box-shadow: 0 8px 25px rgba(66, 153, 225, 0.4); +.btn-primary:active { + transform: translateY(0); + box-shadow: var(--shadow-button); } -[data-theme="dark"] .card .btn-secondary { - background: rgba(74, 85, 104, 0.8); - color: white; - border: 2px solid rgba(203, 213, 224, 0.2); +/* Dark theme primary button adjustments */ +[data-theme="dark"] .btn-primary:hover { + background: hsl(var(--primary-hue), var(--primary-saturation), 65%); } -[data-theme="dark"] .card .btn-secondary:hover { - background: rgba(74, 85, 104, 0.9); - border-color: rgba(203, 213, 224, 0.3); +.btn-secondary { + background: var(--bg-button-secondary); + color: var(--text-button-secondary); + border: 1px solid var(--border-color); + font-weight: 500; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } -[data-theme="dark"] .card .btn-ghost { - background: transparent; - color: #4299e1; - border: 1px solid rgba(66, 153, 225, 0.3); +.btn-secondary:hover { + background: var(--bg-input); + border-color: var(--border-focus); + color: var(--text-primary); + transform: translateY(-1px); } -[data-theme="dark"] .card .btn-ghost:hover { - background: rgba(66, 153, 225, 0.1); - border-color: rgba(66, 153, 225, 0.5); +.btn-secondary:active { + transform: translateY(0); } -/* Buttons inside cards (on white/light backgrounds) */ -.card .btn-primary { - background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); - color: white; - border: 2px solid transparent; +.btn-ghost { + background: var(--bg-button-ghost); + color: var(--border-focus); + border: 1px solid transparent; + font-weight: 500; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } -.card .btn-primary:hover { - background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%); - box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4); -} - -.card .btn-secondary { - background: rgba(79, 70, 229, 0.1); - color: #4f46e5; - border: 2px solid rgba(79, 70, 229, 0.2); -} - -.card .btn-secondary:hover { - background: rgba(79, 70, 229, 0.15); - border-color: rgba(79, 70, 229, 0.3); -} - -.card .btn-ghost { - background: transparent; - color: #4f46e5; - border: 1px solid rgba(79, 70, 229, 0.3); -} - -.card .btn-ghost:hover { - background: rgba(79, 70, 229, 0.1); - border-color: rgba(79, 70, 229, 0.5); +.btn-ghost:hover { + background: var(--bg-input); + border-color: var(--border-color); + color: var(--text-primary); } * { @@ -201,7 +199,7 @@ body { .btn-icon-only { background: var(--bg-button-ghost); - border: 1px solid var(--border-color); + border: none; border-radius: 8px; padding: var(--spacing-sm); cursor: pointer; @@ -248,16 +246,16 @@ body { #statusText { font-size: 14px; font-weight: 500; - color: white; + color: var(--text-primary); } /* Vault status specific styling */ .vault-status .status-indicator { - color: white; + color: var(--text-primary); } .vault-status #statusText { - color: white; + color: var(--text-primary); } /* Enhanced lock button styling */ @@ -277,14 +275,15 @@ body { /* Vault status lock button styling */ .vault-status #lockBtn { - background: rgba(255, 255, 255, 0.1); - color: white; - border-color: rgba(255, 255, 255, 0.3); + background: var(--bg-button-secondary); + color: var(--text-secondary); + border: 1px solid var(--border-color); } .vault-status #lockBtn:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.5); + background: var(--bg-input); + border-color: var(--border-focus); + color: var(--text-primary); } @@ -352,14 +351,6 @@ body { margin-bottom: var(--spacing-lg); } -.form-row { - display: flex; - gap: var(--spacing-sm); - align-items: end; -} - - - label { display: block; margin-bottom: var(--spacing-xs); @@ -368,6 +359,8 @@ label { font-size: 14px; } + + input, select, textarea { width: 100%; padding: var(--spacing-md) var(--spacing-lg); @@ -382,7 +375,7 @@ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-focus); background: var(--bg-card); - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); + box-shadow: 0 0 0 3px hsla(var(--primary-hue), var(--primary-saturation), 55%, 0.15); } /* Placeholder styling */ @@ -416,40 +409,7 @@ input::placeholder, textarea::placeholder { justify-content: center; } -.btn-primary { - background: var(--bg-button); - color: white; - border: 2px solid rgba(255, 255, 255, 0.3); - backdrop-filter: blur(10px); -} - -.btn-primary:hover { - background: rgba(255, 255, 255, 0.3); - border-color: rgba(255, 255, 255, 0.5); -} - -.btn-secondary { - background: var(--bg-button-secondary); - color: white; - border: 2px solid rgba(255, 255, 255, 0.2); - backdrop-filter: blur(10px); -} - -.btn-secondary:hover { - background: rgba(255, 255, 255, 0.25); - border-color: rgba(255, 255, 255, 0.4); -} - -.btn-ghost { - background: var(--bg-button-ghost); - color: white; - border: 1px solid rgba(255, 255, 255, 0.3); -} - -.btn-ghost:hover { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.5); -} +/* Button styles are defined above - removing duplicates */ .btn-small { padding: var(--spacing-sm) var(--spacing-lg); @@ -491,25 +451,7 @@ input::placeholder, textarea::placeholder { 100% { transform: rotate(360deg); } } -/* Inline Loading Components */ -.inline-loading { - display: flex; - align-items: center; - justify-content: center; - gap: var(--spacing-sm); - padding: var(--spacing-sm); - color: var(--text-muted); - font-size: 14px; -} -.inline-spinner { - width: 16px; - height: 16px; - border: 2px solid rgba(102, 126, 234, 0.2); - border-top: 2px solid var(--border-focus); - border-radius: 50%; - animation: btn-spin 0.8s linear infinite; -} .button-group { display: flex; @@ -531,21 +473,24 @@ input::placeholder, textarea::placeholder { justify-content: center; width: 32px; height: 32px; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .btn-copy:hover { - background: rgba(102, 126, 234, 0.1); - border-color: rgba(102, 126, 234, 0.3); + background: var(--bg-input); + border-color: var(--border-focus); + color: var(--border-focus); + transform: translateY(-1px); } .encrypt-result .btn-copy:hover { - background: rgba(16, 185, 129, 0.1); - border-color: rgba(16, 185, 129, 0.3); + border-color: var(--accent-success); + color: var(--accent-success); } .decrypt-result .btn-copy:hover { - background: rgba(59, 130, 246, 0.1); - border-color: rgba(59, 130, 246, 0.3); + border-color: var(--accent-info); + color: var(--accent-info); } .btn-copy svg { @@ -569,7 +514,7 @@ input::placeholder, textarea::placeholder { } .vault-header h2 { - color: white; + color: var(--text-primary); font-size: 20px; font-weight: 600; } @@ -590,6 +535,10 @@ input::placeholder, textarea::placeholder { overflow: hidden; padding: 0; margin-bottom: 0; + background: var(--bg-card); + border-radius: 16px; + border: 1px solid var(--border-color); + box-shadow: var(--shadow-card); } .add-keypair-form:not(.hidden) { @@ -604,7 +553,7 @@ input::placeholder, textarea::placeholder { align-items: center; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); - border-bottom: 1px solid rgba(102, 126, 234, 0.1); + border-bottom: 1px solid var(--border-color); } .form-header h3 { @@ -647,16 +596,15 @@ input::placeholder, textarea::placeholder { } .keypair-item { - display: flex; - justify-content: space-between; - align-items: center; padding: var(--spacing-lg); border-radius: 12px; margin-bottom: var(--spacing-md); background: var(--bg-input); border: 1px solid var(--border-color); - min-width: 0; /* Allow flex items to shrink */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + cursor: pointer; + transition: all 0.2s ease; + user-select: none; } .keypair-item:last-child { @@ -666,12 +614,23 @@ input::placeholder, textarea::placeholder { .keypair-item:hover { background: var(--bg-card); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + transform: translateY(-1px); +} + +.keypair-item:focus { + outline: none; + border-color: var(--border-focus); + box-shadow: 0 0 0 3px hsla(var(--primary-hue), var(--primary-saturation), 55%, 0.15); } .keypair-item.selected { - background: rgba(16, 185, 129, 0.1); + background: hsla(var(--accent-hue), 50%, 95%, 0.8); border-color: var(--accent-success); - box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15); + box-shadow: 0 4px 16px hsla(var(--accent-hue), 50%, 50%, 0.15); +} + +[data-theme="dark"] .keypair-item.selected { + background: hsla(var(--accent-hue), 30%, 15%, 0.8); } .keypair-item.selected .keypair-name { @@ -680,69 +639,51 @@ input::placeholder, textarea::placeholder { } .keypair-item.selected .keypair-type { - background: rgba(16, 185, 129, 0.2); + background: hsla(var(--accent-hue), 50%, 80%, 0.8); color: var(--accent-success); } -.keypair-item.selected .select-btn { - background: rgba(16, 185, 129, 0.2); - color: var(--accent-success); - border-color: rgba(16, 185, 129, 0.3); -} - -.keypair-item.selected .select-btn:hover { - background: rgba(16, 185, 129, 0.3); -} - -.select-btn { - background: var(--bg-button-secondary); - color: var(--text-secondary); - border: 1px solid var(--border-color); - padding: var(--spacing-xs) var(--spacing-md); - border-radius: 8px; - font-size: 12px; - font-weight: 500; - cursor: pointer; - white-space: nowrap; -} - -.select-btn:hover { - background: var(--bg-card); - color: var(--text-primary); - border-color: var(--border-focus); +[data-theme="dark"] .keypair-item.selected .keypair-type { + background: hsla(var(--accent-hue), 40%, 25%, 0.8); } .keypair-info { - flex: 1; - min-width: 0; /* Allow shrinking */ - margin-right: var(--spacing-md); + width: 100%; +} + +.keypair-header { display: flex; - flex-direction: column; - gap: var(--spacing-xs); + justify-content: space-between; + align-items: center; + gap: var(--spacing-md); } .keypair-name { font-weight: 500; color: var(--text-primary); - word-break: break-word; /* Break long names */ - overflow: hidden; - text-overflow: ellipsis; font-size: 14px; line-height: 1.4; + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .keypair-type { font-size: 11px; font-weight: 500; color: var(--text-primary); - background: rgba(102, 126, 234, 0.15); + background: hsla(var(--primary-hue), 40%, 85%, 0.6); padding: 2px 6px; border-radius: 6px; - display: inline-block; - width: fit-content; - max-width: fit-content; letter-spacing: 0.5px; text-transform: uppercase; + flex-shrink: 0; +} + +[data-theme="dark"] .keypair-type { + background: hsla(var(--primary-hue), 30%, 25%, 0.8); } .empty-state, .loading { @@ -759,7 +700,7 @@ input::placeholder, textarea::placeholder { align-items: center; margin-bottom: 8px; padding: 8px 0; - border-bottom: 1px solid rgba(102, 126, 234, 0.1); + border-bottom: 1px solid var(--border-color); } .keypair-info .info-row:last-child { @@ -776,8 +717,8 @@ input::placeholder, textarea::placeholder { display: flex; align-items: flex-start; gap: 12px; - flex: 1; - margin-left: 12px; + width: 100%; + margin-top: 8px; } .keypair-info code, .signature-result code, .encrypt-result code, .decrypt-result code { @@ -812,9 +753,14 @@ input::placeholder, textarea::placeholder { .signature-result { margin-top: 16px; padding: 16px; - background: rgba(16, 185, 129, 0.1); + background: hsla(var(--accent-hue), 60%, 95%, 0.8); border-radius: 12px; - border: 1px solid rgba(16, 185, 129, 0.2); + border: 1px solid hsla(var(--accent-hue), 50%, 70%, 0.3); +} + +[data-theme="dark"] .signature-result { + background: hsla(var(--accent-hue), 40%, 15%, 0.6); + border-color: hsla(var(--accent-hue), 50%, 40%, 0.4); } @@ -823,36 +769,11 @@ input::placeholder, textarea::placeholder { color: var(--accent-success); font-weight: 500; margin-bottom: 8px; -} - -/* Loading Overlay */ -.loading-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--bg-secondary); - backdrop-filter: blur(8px); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - z-index: 1000; - color: var(--text-primary); + display: block; } -.spinner { - width: 40px; - height: 40px; - border: 3px solid rgba(102, 126, 234, 0.3); - border-top: 3px solid var(--border-focus); - border-radius: 50%; - margin-bottom: 16px; -} - /* Enhanced Toast Notifications */ .toast-notification { position: fixed; @@ -969,24 +890,7 @@ input::placeholder, textarea::placeholder { color: white; } -/* Responsive toast positioning */ -@media (max-width: 480px) { - .toast-notification { - left: 16px; - right: 16px; - min-width: auto; - max-width: none; - transform: translateY(-100%); - } - .toast-notification.toast-show { - transform: translateY(0); - } - - .toast-notification.toast-hide { - transform: translateY(-100%); - } -} /* Scrollbar Styles */ .keypairs-list::-webkit-scrollbar, @@ -1000,7 +904,7 @@ input::placeholder, textarea::placeholder { .encrypt-result code::-webkit-scrollbar-track, .decrypt-result code::-webkit-scrollbar-track, .signature-result code::-webkit-scrollbar-track { - background: rgba(102, 126, 234, 0.1); + background: var(--bg-input); border-radius: 3px; } @@ -1008,7 +912,7 @@ input::placeholder, textarea::placeholder { .encrypt-result code::-webkit-scrollbar-thumb, .decrypt-result code::-webkit-scrollbar-thumb, .signature-result code::-webkit-scrollbar-thumb { - background: rgba(102, 126, 234, 0.3); + background: var(--border-color); border-radius: 3px; } @@ -1016,24 +920,10 @@ input::placeholder, textarea::placeholder { .encrypt-result code::-webkit-scrollbar-thumb:hover, .decrypt-result code::-webkit-scrollbar-thumb:hover, .signature-result code::-webkit-scrollbar-thumb:hover { - background: rgba(102, 126, 234, 0.5); + background: var(--border-focus); } -/* Responsive adjustments */ -@media (max-width: 400px) { - body { - width: 350px; - } - .form-row { - flex-direction: column; - gap: 12px; - } - - .button-group { - flex-direction: column; - } -} @@ -1045,13 +935,11 @@ input::placeholder, textarea::placeholder { .operation-tabs { display: flex; margin-bottom: 20px; - border-bottom: 2px solid rgba(102, 126, 234, 0.1); + border-bottom: 2px solid var(--border-color); gap: 4px; - overflow-x: auto; /* Enable horizontal scrolling */ + overflow-x: auto; overflow-y: hidden; - scrollbar-width: none; /* Hide scrollbar in Firefox */ - -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */ - scroll-behavior: smooth; /* Smooth scrolling animation */ + scrollbar-width: none; } /* Hide scrollbar for webkit browsers */ @@ -1073,20 +961,34 @@ input::placeholder, textarea::placeholder { min-width: fit-content; white-space: nowrap; text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .tab-btn:hover { - background: rgba(102, 126, 234, 0.1); - color: var(--border-focus); + background: var(--bg-input); + color: var(--text-secondary); } .tab-btn.active { - background: rgba(102, 126, 234, 0.1); + background: var(--bg-input); color: var(--border-focus); border-bottom-color: var(--border-focus); font-weight: 600; } +/* Dark theme tab styling - white text for unselected tabs */ +[data-theme="dark"] .tab-btn { + color: var(--text-primary); +} + +[data-theme="dark"] .tab-btn:hover { + color: var(--border-focus); +} + +[data-theme="dark"] .tab-btn.active { + color: var(--border-focus); +} + .tab-content { display: none; } @@ -1100,13 +1002,19 @@ input::placeholder, textarea::placeholder { margin-top: 16px; padding: 16px; border-radius: 12px; - border: 1px solid rgba(102, 126, 234, 0.2); + border: 1px solid var(--border-color); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .encrypt-result { - background: rgba(16, 185, 129, 0.1); - border-color: rgba(16, 185, 129, 0.2); - box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1); + background: hsla(var(--accent-hue), 60%, 95%, 0.8); + border-color: hsla(var(--accent-hue), 50%, 70%, 0.3); + box-shadow: 0 2px 12px hsla(var(--accent-hue), 50%, 50%, 0.1); +} + +[data-theme="dark"] .encrypt-result { + background: hsla(var(--accent-hue), 40%, 15%, 0.6); + border-color: hsla(var(--accent-hue), 50%, 40%, 0.4); } .encrypt-result label { @@ -1118,9 +1026,14 @@ input::placeholder, textarea::placeholder { } .decrypt-result { - background: rgba(59, 130, 246, 0.1); - border-color: rgba(59, 130, 246, 0.2); - box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1); + background: hsla(var(--secondary-hue), 60%, 95%, 0.8); + border-color: hsla(var(--secondary-hue), 50%, 70%, 0.3); + box-shadow: 0 2px 12px hsla(var(--secondary-hue), 50%, 50%, 0.1); +} + +[data-theme="dark"] .decrypt-result { + background: hsla(var(--secondary-hue), 40%, 15%, 0.6); + border-color: hsla(var(--secondary-hue), 50%, 40%, 0.4); } .decrypt-result label { @@ -1132,9 +1045,14 @@ input::placeholder, textarea::placeholder { } .verify-result { - background: rgba(102, 126, 234, 0.1); - border-color: rgba(102, 126, 234, 0.2); - box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1); + background: hsla(var(--primary-hue), 30%, 95%, 0.8); + border-color: hsla(var(--primary-hue), 40%, 70%, 0.3); + box-shadow: 0 2px 12px hsla(var(--primary-hue), 40%, 50%, 0.1); +} + +[data-theme="dark"] .verify-result { + background: hsla(var(--primary-hue), 20%, 15%, 0.6); + border-color: hsla(var(--primary-hue), 30%, 40%, 0.4); } .verification-status { @@ -1153,13 +1071,7 @@ input::placeholder, textarea::placeholder { color: var(--accent-error); } -.verification-status.valid #verificationIcon { - color: var(--accent-success); -} - -.verification-status.invalid #verificationIcon { - color: var(--accent-error); -} +