mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2026-02-08 15:46:48 +01:00
dark mode
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user