samehabouelsaad/sal-modular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add session timeout, refactor session manager, reduce code duplication, update icons & styling

Browse Source
This commit is contained in:
zaelgohary
2025-05-29 08:57:25 +03:00
parent c2c5be3409
commit 31975aa9d3
11 changed files with 765 additions and 819 deletions
Download Patch File Download Diff File Expand all files Collapse all files

311
crypto_vault_extension/styles/popup.css
View File

@@ -34,7 +34,7 @@
--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%);
--accent-info: hsl(var(--primary-hue), 35%, 60%);
/* Spacing system */
--spacing-xs: 4px;
@@ -75,66 +75,63 @@
--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%);
--accent-info: hsl(var(--primary-hue), 30%, 70%);
}
/* Harmonious button styling system */
.btn-primary {
background: var(--bg-button-primary);
color: var(--text-button-primary);
/* Consolidated button styling system */
.btn-primary, .btn-secondary, .btn-ghost {
border: none;
font-weight: 600;
box-shadow: var(--shadow-button);
font-weight: 500;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
background: hsl(var(--primary-hue), var(--primary-saturation), 50%);
box-shadow: var(--shadow-button-hover);
transform: translateY(-1px);
}
.btn-primary:active {
transform: translateY(0);
.btn-primary {
background: var(--bg-button-primary);
color: var(--text-button-primary);
font-weight: 600;
box-shadow: var(--shadow-button);
}
/* Dark theme primary button adjustments */
[data-theme="dark"] .btn-primary:hover {
background: hsl(var(--primary-hue), var(--primary-saturation), 65%);
}
.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);
}
.btn-secondary:hover {
background: var(--bg-input);
border-color: var(--border-focus);
color: var(--text-primary);
transform: translateY(-1px);
}
.btn-secondary:active {
transform: translateY(0);
}
.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);
}
.btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover {
transform: translateY(-1px);
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active {
transform: translateY(0);
}
.btn-primary:hover {
background: hsl(var(--primary-hue), var(--primary-saturation), 50%);
box-shadow: var(--shadow-button-hover);
}
.btn-secondary:hover, .btn-ghost:hover {
background: var(--bg-input);
color: var(--text-primary);
}
.btn-secondary:hover {
border-color: var(--border-focus);
}
.btn-ghost:hover {
background: var(--bg-input);
border-color: var(--border-color);
color: var(--text-primary);
}
[data-theme="dark"] .btn-primary:hover {
background: hsl(var(--primary-hue), var(--primary-saturation), 65%);
}
* {
@@ -197,6 +194,73 @@ body {
gap: var(--spacing-md);
}
.settings-container {
position: relative;
}
.settings-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: var(--spacing-sm);
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: var(--spacing-lg);
box-shadow: var(--shadow-card);
backdrop-filter: blur(20px);
min-width: 200px;
z-index: 1000;
}
.settings-dropdown.hidden {
display: none;
}
.settings-item {
margin-bottom: var(--spacing-md);
}
.settings-item:last-child {
margin-bottom: 0;
}
.settings-item label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: var(--spacing-xs);
}
.timeout-input-group {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.timeout-input-group input {
width: 60px;
padding: var(--spacing-xs) var(--spacing-sm);
font-size: 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-input);
color: var(--text-primary);
text-align: center;
}
.timeout-input-group input:focus {
outline: none;
border-color: var(--border-focus);
box-shadow: 0 0 0 2px hsla(var(--primary-hue), var(--primary-saturation), 55%, 0.15);
}
.timeout-input-group span {
font-size: 14px;
color: var(--text-muted);
}
.btn-icon-only {
background: var(--bg-button-ghost);
border: none;
@@ -224,39 +288,15 @@ body {
gap: var(--spacing-md);
}
.status-indicator .status-content {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent-warning);
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
.status-indicator.connected .status-dot {
background: var(--accent-success);
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
#statusText {
font-size: 14px;
font-weight: 500;
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
}
/* Vault status specific styling */
.vault-status .status-indicator {
color: var(--text-primary);
}
.vault-status #statusText {
color: var(--text-primary);
}
/* Enhanced lock button styling */
#lockBtn {
@@ -515,7 +555,7 @@ input::placeholder, textarea::placeholder {
.vault-header h2 {
color: var(--text-primary);
font-size: 20px;
font-size: 18px;
font-weight: 600;
}
@@ -749,31 +789,6 @@ input::placeholder, textarea::placeholder {
color: var(--text-primary);
}
/* Signature Result */
.signature-result {
margin-top: 16px;
padding: 16px;
background: hsla(var(--accent-hue), 60%, 95%, 0.8);
border-radius: 12px;
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);
}
.signature-result label {
color: var(--accent-success);
font-weight: 500;
margin-bottom: 8px;
display: block;
}
/* Enhanced Toast Notifications */
.toast-notification {
position: fixed;
@@ -828,31 +843,7 @@ input::placeholder, textarea::placeholder {
word-wrap: break-word;
}
.toast-close {
background: none;
border: none;
color: inherit;
cursor: pointer;
font-size: 18px;
font-weight: bold;
line-height: 1;
opacity: 0.7;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.2s ease;
flex-shrink: 0;
margin-top: 2px;
}
.toast-close:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.1);
}
/* Success Toast */
.toast-success {
@@ -880,9 +871,9 @@ input::placeholder, textarea::placeholder {
/* Info Toast */
.toast-info {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
background: var(--accent-info);
color: white;
border-color: rgba(59, 130, 246, 0.3);
border-color: hsla(var(--primary-hue), 35%, 60%, 0.3);
}
.toast-info .toast-icon {
@@ -981,10 +972,7 @@ input::placeholder, textarea::placeholder {
color: var(--text-primary);
}
[data-theme="dark"] .tab-btn:hover {
color: var(--border-focus);
}
[data-theme="dark"] .tab-btn:hover,
[data-theme="dark"] .tab-btn.active {
color: var(--border-focus);
}
@@ -997,8 +985,8 @@ input::placeholder, textarea::placeholder {
display: block;
}
/* Result Styling */
.encrypt-result, .decrypt-result, .verify-result {
/* Consolidated result styling */
.encrypt-result, .decrypt-result, .verify-result, .signature-result {
margin-top: 16px;
padding: 16px;
border-radius: 12px;
@@ -1006,55 +994,55 @@ input::placeholder, textarea::placeholder {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.encrypt-result {
.encrypt-result, .signature-result {
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 {
color: var(--accent-success);
font-weight: 600;
margin-bottom: 12px;
display: block;
font-size: 14px;
}
.decrypt-result {
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 {
color: var(--accent-info);
font-weight: 600;
margin-bottom: 12px;
display: block;
font-size: 14px;
}
.verify-result {
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"] .encrypt-result,
[data-theme="dark"] .signature-result {
background: hsla(var(--accent-hue), 40%, 15%, 0.6);
border-color: hsla(var(--accent-hue), 50%, 40%, 0.4);
}
[data-theme="dark"] .decrypt-result {
background: hsla(var(--secondary-hue), 40%, 15%, 0.6);
border-color: hsla(var(--secondary-hue), 50%, 40%, 0.4);
}
[data-theme="dark"] .verify-result {
background: hsla(var(--primary-hue), 20%, 15%, 0.6);
border-color: hsla(var(--primary-hue), 30%, 40%, 0.4);
}
.encrypt-result label, .decrypt-result label, .signature-result label {
font-weight: 600;
margin-bottom: 12px;
display: block;
font-size: 14px;
}
.encrypt-result label, .signature-result label {
color: var(--accent-success);
}
.decrypt-result label {
color: var(--accent-info);
}
.verification-status {
display: flex;
align-items: center;
@@ -1071,19 +1059,14 @@ input::placeholder, textarea::placeholder {
color: var(--accent-error);
}
.verification-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.verification-icon svg {
width: 20px;
height: 20px;
}