dark mode

This commit is contained in:
usmannasir
2025-08-02 19:10:17 +05:00
parent 4abba83f96
commit 9bff33400d
16 changed files with 1036 additions and 563 deletions

View File

@@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@@ -68,7 +68,7 @@
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-muted, #64748b);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -77,22 +77,22 @@
.form-control {
width: 100%;
padding: 10px 14px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-control:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.form-control:focus {
outline: none;
border-color: #5b5fcf;
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px var(--accent-shadow, rgba(91,95,207,0.1));
}
/* Windows selectbox fixes */
@@ -113,8 +113,8 @@
/* Windows-specific fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
@@ -124,14 +124,14 @@
}
select.form-control:focus {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
/* Website selector card */
.website-selector-card {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@@ -144,12 +144,12 @@
/* Name preview */
.name-preview {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-weight: 600;
margin-top: 8px;
display: inline-block;
@@ -178,8 +178,8 @@
}
.password-toggle {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-left: none;
padding: 10px 14px;
border-radius: 0 8px 8px 0;
@@ -188,19 +188,19 @@
}
.password-toggle:hover {
background: #eef0ff;
border-color: #5b5fcf;
background: var(--bg-active, #eef0ff);
border-color: var(--accent-color, #5b5fcf);
}
.password-toggle i {
color: #64748b;
color: var(--text-muted, #64748b);
font-size: 16px;
}
/* Generated password section */
.generated-password-box {
background: #e8f5e9;
border: 1px solid #c8e6c9;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
border-radius: 8px;
padding: 16px;
margin-top: 16px;
@@ -210,7 +210,7 @@
.generated-password-label {
font-size: 12px;
font-weight: 600;
color: #2e7d32;
color: var(--success-text, #2e7d32);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
@@ -219,7 +219,7 @@
.generated-password-value {
font-family: 'Courier New', monospace;
font-size: 14px;
color: #1b5e20;
color: var(--success-dark, #1b5e20);
font-weight: 600;
word-break: break-all;
margin-bottom: 12px;
@@ -241,42 +241,42 @@
}
.btn-primary {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--text-white, white);
}
.btn-primary:hover {
background: #4a4fc4;
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
background: var(--accent-hover, #4a4fc4);
box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
transform: translateY(-1px);
}
.btn-primary:disabled {
background: #ccc;
background: var(--bg-disabled, #ccc);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-secondary {
background: #f8f9ff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
color: var(--accent-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
}
.btn-secondary:hover {
background: #eef0ff;
border-color: #5b5fcf;
background: var(--bg-active, #eef0ff);
border-color: var(--accent-color, #5b5fcf);
}
.btn-success {
background: #66bb6a;
color: white;
background: var(--success-color, #66bb6a);
color: var(--text-white, white);
}
.btn-success:hover {
background: #4caf50;
box-shadow: 0 4px 12px rgba(102,187,106,0.3);
background: var(--success-hover, #4caf50);
box-shadow: 0 4px 12px var(--success-shadow, rgba(102,187,106,0.3));
transform: translateY(-1px);
}
@@ -302,15 +302,15 @@
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
color: var(--danger-text, #c62828);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
color: var(--success-text, #2e7d32);
}
/* Loading spinner */
@@ -318,8 +318,8 @@
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border: 2px solid var(--bg-tertiary, #f3f3f3);
border-top: 2px solid var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@@ -334,13 +334,13 @@
.button-container {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e8e9ff;
border-top: 1px solid var(--border-color, #e8e9ff);
}
/* Info box */
.info-box {
background: #e3f2fd;
border: 1px solid #bbdefb;
background: var(--info-bg, #e3f2fd);
border: 1px solid var(--info-border, #bbdefb);
border-radius: 8px;
padding: 16px;
margin-bottom: 25px;
@@ -350,20 +350,20 @@
}
.info-box i {
color: #1976d2;
color: var(--info-color, #1976d2);
font-size: 18px;
}
.info-box-text {
font-size: 13px;
color: #1565c0;
color: var(--info-text, #1565c0);
line-height: 1.5;
}
/* Help text */
.help-text {
font-size: 12px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
margin-top: 6px;
}