enable dark mode

This commit is contained in:
usmannasir 2025-08-05 00:40:56 +05:00
parent 1915936687
commit 69429999b2
4 changed files with 331 additions and 294 deletions

View File

@ -6,7 +6,9 @@
<component name="ChangeListManager">
<list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/tuning/templates/tuning/liteSpeedTuning.html" beforeDir="false" afterPath="$PROJECT_DIR$/tuning/templates/tuning/liteSpeedTuning.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/firewall/templates/firewall/firewall.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/firewall.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/serverLogs/templates/serverLogs/serverMail.html" beforeDir="false" afterPath="$PROJECT_DIR$/serverLogs/templates/serverLogs/serverMail.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/serverStatus/templates/serverStatus/cybercpmainlogfile.html" beforeDir="false" afterPath="$PROJECT_DIR$/serverStatus/templates/serverStatus/cybercpmainlogfile.html" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -39,27 +41,27 @@
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent"><![CDATA[{
"keyToString": {
"ModuleVcsDetector.initialDetectionPerformed": "true",
"Notification.DisplayName-DoNotAsk-DatabaseConfigFileWatcher.found": "Database connection parameters found",
"Notification.DoNotAsk-DatabaseConfigFileWatcher.found": "true",
"RunOnceActivity.OpenDjangoStructureViewOnStart": "true",
"RunOnceActivity.ShowReadmeOnStart": "true",
"RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager": "true",
"RunOnceActivity.git.unshallow": "true",
"SHELLCHECK.PATH": "/Users/cyberpersons/Library/Application Support/JetBrains/PyCharm2025.1/plugins/Shell Script/shellcheck",
"git-widget-placeholder": "v2.4.4-dev",
"last_opened_file_path": "/Users/cyberpersons/cyberpanel",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
"node.js.selected.package.tslint": "(autodetect)",
"nodejs_package_manager_path": "npm",
"settings.editor.selected.configurable": "preferences.pluginManager",
"vue.rearranger.settings.migration": "true"
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
&quot;Notification.DisplayName-DoNotAsk-DatabaseConfigFileWatcher.found&quot;: &quot;Database connection parameters found&quot;,
&quot;Notification.DoNotAsk-DatabaseConfigFileWatcher.found&quot;: &quot;true&quot;,
&quot;RunOnceActivity.OpenDjangoStructureViewOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager&quot;: &quot;true&quot;,
&quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
&quot;SHELLCHECK.PATH&quot;: &quot;/Users/cyberpersons/Library/Application Support/JetBrains/PyCharm2025.1/plugins/Shell Script/shellcheck&quot;,
&quot;git-widget-placeholder&quot;: &quot;v2.4.4-dev&quot;,
&quot;last_opened_file_path&quot;: &quot;/Users/cyberpersons/cyberpanel&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
&quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
}
}]]></component>
}</component>
<component name="RunManager">
<configuration name="cyberpanel" type="Python.DjangoServer" factoryName="Django server">
<module name="cyberpanel" />

View File

@ -14,12 +14,12 @@
text-align: center;
margin-bottom: 3rem;
padding: 3rem 0;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
background: linear-gradient(135deg, var(--firewall-gradient-start, #ef4444) 0%, var(--firewall-gradient-end, #dc2626) 100%);
border-radius: 20px;
animation: fadeInDown 0.5s ease-out;
position: relative;
overflow: hidden;
color: white;
color: var(--text-light, white);
}
.page-header::before {
@ -89,7 +89,7 @@
.page-subtitle {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.9);
color: var(--text-light-secondary, rgba(255, 255, 255, 0.9));
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
@ -97,19 +97,19 @@
/* Status Panel */
.status-panel {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
overflow: hidden;
margin-bottom: 2rem;
animation: fadeInUp 0.5s ease-out;
}
.status-header {
background: #f8f9ff;
background: var(--bg-tertiary, #f8f9ff);
padding: 1.5rem 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
display: flex;
align-items: center;
justify-content: space-between;
@ -118,7 +118,7 @@
.status-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
display: flex;
align-items: center;
gap: 0.75rem;
@ -135,13 +135,13 @@
}
.status-active {
background: #d1fae5;
color: #065f46;
background: var(--badge-success-bg, #d1fae5);
color: var(--badge-success-text, #065f46);
}
.status-inactive {
background: #fee2e2;
color: #991b1b;
background: var(--badge-error-bg, #fee2e2);
color: var(--badge-error-text, #991b1b);
}
.status-content {
@ -169,52 +169,52 @@
}
.btn-start {
background: #10b981;
color: white;
background: var(--btn-success, #10b981);
color: var(--text-light, white);
}
.btn-start:hover {
background: #059669;
background: var(--btn-success-hover, #059669);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
box-shadow: 0 4px 12px var(--btn-success-shadow, rgba(16, 185, 129, 0.3));
}
.btn-stop {
background: #f59e0b;
color: white;
background: var(--btn-warning, #f59e0b);
color: var(--text-light, white);
}
.btn-stop:hover {
background: #d97706;
background: var(--btn-warning-hover, #d97706);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
box-shadow: 0 4px 12px var(--btn-warning-shadow, rgba(245, 158, 11, 0.3));
}
.btn-reload {
background: #3b82f6;
color: white;
background: var(--btn-primary, #3b82f6);
color: var(--text-light, white);
}
.btn-reload:hover {
background: #2563eb;
background: var(--btn-primary-hover, #2563eb);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
box-shadow: 0 4px 12px var(--btn-primary-shadow, rgba(59, 130, 246, 0.3));
}
/* Rules Panel */
.rules-panel {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out 0.2s;
animation-fill-mode: both;
}
.panel-header {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
background: linear-gradient(135deg, var(--firewall-gradient-start, #ef4444) 0%, var(--firewall-gradient-end, #dc2626) 100%);
color: var(--text-light, white);
padding: 1.5rem 2rem;
display: flex;
align-items: center;
@ -240,9 +240,9 @@
}
.add-rule-section {
background: #f8f9ff;
background: var(--bg-tertiary, #f8f9ff);
padding: 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.rule-form {
@ -260,7 +260,7 @@
.form-label {
font-weight: 500;
color: #475569;
color: var(--text-secondary, #475569);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
@ -268,17 +268,18 @@
.form-control {
padding: 0.75rem 1rem;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 0.875rem;
transition: all 0.3s ease;
background: #fff;
background: var(--bg-primary, #fff);
color: var(--text-primary, #1e293b);
}
.form-control:focus {
outline: none;
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
border-color: var(--firewall-accent, #ef4444);
box-shadow: 0 0 0 3px var(--firewall-focus-shadow, rgba(239, 68, 68, 0.1));
}
.select-control {
@ -291,8 +292,8 @@
}
.btn-add {
background: #ef4444;
color: white;
background: var(--firewall-accent, #ef4444);
color: var(--text-light, white);
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
@ -307,9 +308,9 @@
}
.btn-add:hover {
background: #dc2626;
background: var(--firewall-accent-dark, #dc2626);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
box-shadow: 0 4px 12px var(--firewall-shadow, rgba(239, 68, 68, 0.3));
}
/* Rules Table */
@ -319,31 +320,31 @@
.rules-table {
width: 100%;
background: white;
background: var(--bg-secondary, white);
border-radius: 8px;
overflow: hidden;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
}
.rules-table thead {
background: #f8f9ff;
background: var(--bg-tertiary, #f8f9ff);
}
.rules-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
color: #475569;
color: var(--text-secondary, #475569);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.rules-table td {
padding: 1rem;
border-bottom: 1px solid #f1f5f9;
color: #334155;
border-bottom: 1px solid var(--border-light, #f1f5f9);
color: var(--text-primary, #334155);
font-size: 0.875rem;
}
@ -352,17 +353,17 @@
}
.rules-table tbody tr:hover {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
}
.rule-id {
font-weight: 600;
color: #64748b;
color: var(--text-muted, #64748b);
}
.rule-name {
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
}
.protocol-badge {
@ -375,32 +376,33 @@
}
.protocol-tcp {
background: #dbeafe;
color: #1e40af;
background: var(--badge-blue-bg, #dbeafe);
color: var(--badge-blue-text, #1e40af);
}
.protocol-udp {
background: #fef3c7;
color: #92400e;
background: var(--badge-yellow-bg, #fef3c7);
color: var(--badge-yellow-text, #92400e);
}
.ip-address {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.875rem;
background: #f3f4f6;
background: var(--bg-code, #f3f4f6);
padding: 0.25rem 0.5rem;
border-radius: 4px;
color: var(--text-primary, #334155);
}
.port-number {
font-family: 'Monaco', 'Consolas', monospace;
font-weight: 600;
color: #ef4444;
color: var(--firewall-accent, #ef4444);
}
.btn-delete {
background: #fee2e2;
color: #ef4444;
background: var(--bg-error-light, #fee2e2);
color: var(--firewall-accent, #ef4444);
width: 32px;
height: 32px;
border-radius: 6px;
@ -414,20 +416,20 @@
}
.btn-delete:hover {
background: #ef4444;
color: white;
background: var(--firewall-accent, #ef4444);
color: var(--text-light, white);
transform: scale(1.1);
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: #64748b;
color: var(--text-muted, #64748b);
}
.empty-icon {
font-size: 4rem;
color: #94a3b8;
color: var(--text-disabled, #94a3b8);
margin-bottom: 1rem;
}
@ -435,12 +437,12 @@
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #475569;
color: var(--text-secondary, #475569);
}
.empty-text {
font-size: 0.875rem;
color: #64748b;
color: var(--text-muted, #64748b);
}
.alert {
@ -454,15 +456,15 @@
}
.alert-success {
background: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
background: var(--alert-success-bg, #d1fae5);
color: var(--alert-success-text, #065f46);
border: 1px solid var(--alert-success-border, #a7f3d0);
}
.alert-danger {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
background: var(--alert-error-bg, #fee2e2);
color: var(--alert-error-text, #991b1b);
border: 1px solid var(--alert-error-border, #fecaca);
}
.alert-icon {
@ -472,8 +474,8 @@
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid #ef4444;
border: 2px solid var(--border-light, #f3f3f3);
border-top: 2px solid var(--firewall-accent, #ef4444);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
@ -598,7 +600,7 @@
</div>
{% trans "Firewall Rules" %}
</div>
<div ng-show="!rulesLoading" class="loading-spinner"></div>
<div ng-show="rulesLoading" class="loading-spinner"></div>
</div>
<!-- Add Rule Section -->

View File

@ -19,7 +19,7 @@
animation: fadeInDown 0.5s ease-out;
position: relative;
overflow: hidden;
color: var(--text-primary, white);
color: white;
}
.page-header::before {
@ -89,7 +89,7 @@
.page-subtitle {
font-size: 1.125rem;
color: var(--text-secondary, rgba(255, 255, 255, 0.9));
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
}
@ -103,7 +103,7 @@
backdrop-filter: blur(10px);
padding: 0.5rem 1.5rem;
border-radius: 20px;
color: var(--text-primary, white);
color: white;
text-decoration: none;
font-size: 0.875rem;
transition: all 0.3s ease;
@ -112,7 +112,7 @@
.docs-link:hover {
background: var(--accent-hover, rgba(255, 255, 255, 0.3));
transform: translateY(-2px);
color: var(--text-primary, white);
color: white;
text-decoration: none;
}
@ -127,7 +127,7 @@
.panel-header {
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
color: var(--text-primary, white);
color: white;
padding: 1.5rem 2rem;
display: flex;
align-items: center;
@ -166,7 +166,7 @@
.form-label {
font-weight: 500;
color: var(--text-secondary, #475569);
color: var(--text-secondary, #64748b);
font-size: 0.875rem;
text-align: right;
}
@ -190,12 +190,43 @@
}
.select-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-color: var(--bg-secondary, white);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235b5fcf' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
color: var(--text-primary, #1e293b) !important;
font-size: 0.875rem !important;
line-height: 1.5;
}
/* Ensure option text is visible */
.select-control option {
color: var(--text-primary, #1e293b);
background-color: var(--bg-secondary, white);
padding: 8px;
font-size: 0.875rem;
}
/* Fix for Windows high contrast mode */
@media screen and (-ms-high-contrast: active) {
.select-control {
border: 2px solid;
}
.select-control option {
background: var(--bg-secondary, white);
color: var(--text-primary, black);
}
}
/* Specific focus styles for select */
.select-control:focus {
background-color: var(--bg-secondary, white);
color: var(--text-primary, #1e293b);
}
.mailer-type-selector {
@ -265,7 +296,7 @@
.btn-primary {
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
color: var(--text-primary, white);
color: white;
}
.btn-primary:hover {
@ -408,7 +439,7 @@
<span class="status-dot"></span>
<span>{% trans "Ready" %}</span>
</div>
<div ng-show="!cyberPanelLoading" class="loading-spinner"></div>
<div ng-show="cyberPanelLoading" class="loading-spinner"></div>
</div>
<div class="form-section">

View File

@ -15,8 +15,8 @@
--text-console: #10b981;
/* Background colors */
--bg-primary: #ffffff;
--bg-secondary: #f8f9ff;
--bg-primary: white;
--bg-secondary: white;
--bg-light: #f3f4f6;
--bg-hover: #f8f9ff;
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@ -85,7 +85,7 @@
animation: fadeInDown 0.5s ease-out;
position: relative;
overflow: hidden;
color: var(--bg-primary);
color: white;
}
.page-header::before {
@ -162,7 +162,7 @@
}
.log-viewer-panel {
background: var(--bg-primary);
background: var(--bg-secondary, white);
border-radius: 16px;
box-shadow: 0 1px 3px var(--shadow-light), 0 10px 40px var(--shadow-medium);
border: 1px solid var(--border-color);
@ -172,7 +172,7 @@
.panel-header {
background: var(--console-bg, #1e293b);
color: var(--bg-primary);
color: white;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
@ -248,6 +248,8 @@
border-radius: 8px;
font-size: 0.875rem;
transition: all 0.3s ease;
background: var(--bg-secondary, white);
color: var(--text-primary, #1e293b);
}
.search-input:focus {
@ -335,7 +337,7 @@
.btn-primary {
background: var(--accent-color);
color: var(--bg-primary);
color: white;
}
.btn-primary:hover {
@ -346,7 +348,7 @@
.btn-danger {
background: var(--danger-accent);
color: var(--bg-primary);
color: white;
}
.btn-danger:hover {
@ -357,7 +359,7 @@
.btn-secondary {
background: var(--neutral-bg);
color: var(--bg-primary);
color: white;
}
.btn-secondary:hover {
@ -535,7 +537,7 @@
<i class="fas fa-check-circle" style="color: var(--success-accent, #10b981);"></i>
<span>{% trans "Live" %}</span>
</div>
<div ng-show="!logFileLoading" class="loading-spinner"></div>
<div ng-show="logFileLoading" class="loading-spinner"></div>
</div>
</div>