Nemcio/CyberPanel
1
0
Fork 0
mirror of https://github.com/usmannasir/cyberpanel.git synced 2025-11-02 19:35:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

enable dark mode

Browse Source
This commit is contained in:
usmannasir
2025-08-05 01:47:22 +05:00
parent ac0980acc4
commit 1b045eb26b
6 changed files with 209 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.idea/workspace.xml generated
View File

@@ -4,7 +4,12 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="" /> <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$/firewall/templates/firewall/modSecurity.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurity.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRules.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRules.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRulesPacks.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRulesPacks.html" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />

174
aiScanner/templates/aiScanner/scanner.html
View File

@@ -20,18 +20,18 @@ AI Security Scanner - CyberPanel
/* Section Headers */ /* Section Headers */
.scanner-section { .scanner-section {
background: white; background: var(--bg-primary, white);
border-radius: 12px; border-radius: 12px;
padding: 25px; padding: 25px;
margin-bottom: 25px; margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff; border: 1px solid var(--border-primary, #e8e9ff);
} }
.scanner-title { .scanner-title {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-primary, #2f3640);
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -60,27 +60,27 @@ AI Security Scanner - CyberPanel
} }
.scanner-alert-info { .scanner-alert-info {
background: #e0f2fe; background: var(--alert-info-bg, #e0f2fe);
border-color: #0ea5e9; border-color: var(--alert-info-border, #0ea5e9);
color: #0c4a6e; color: var(--alert-info-text, #0c4a6e);
} }
.scanner-alert-success { .scanner-alert-success {
background: #d1fae5; background: var(--alert-success-bg, #d1fae5);
border-color: #10b981; border-color: var(--alert-success-border, #10b981);
color: #065f46; color: var(--alert-success-text, #065f46);
} }
.scanner-alert-warning { .scanner-alert-warning {
background: #fef3c7; background: var(--alert-warning-bg, #fef3c7);
border-color: #f59e0b; border-color: var(--alert-warning-border, #f59e0b);
color: #92400e; color: var(--alert-warning-text, #92400e);
} }
.scanner-alert-danger { .scanner-alert-danger {
background: #fee2e2; background: var(--alert-danger-bg, #fee2e2);
border-color: #ef4444; border-color: var(--alert-danger-border, #ef4444);
color: #991b1b; color: var(--alert-danger-text, #991b1b);
} }
.scanner-alert i { .scanner-alert i {
@@ -112,8 +112,8 @@ AI Security Scanner - CyberPanel
} }
.stat-card { .stat-card {
background: white; background: var(--bg-primary, white);
border: 1px solid #e8e9ff; border: 1px solid var(--border-primary, #e8e9ff);
border-radius: 12px; border-radius: 12px;
padding: 25px; padding: 25px;
text-align: center; text-align: center;
@@ -157,12 +157,12 @@ AI Security Scanner - CyberPanel
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
margin: 0 0 8px 0; margin: 0 0 8px 0;
color: #2f3640; color: var(--text-primary, #2f3640);
} }
.stat-card p { .stat-card p {
margin: 0; margin: 0;
color: #64748b; color: var(--text-secondary, #64748b);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
@@ -170,7 +170,7 @@ AI Security Scanner - CyberPanel
.stat-card small { .stat-card small {
display: block; display: block;
margin-top: 8px; margin-top: 8px;
color: #94a3b8; color: var(--text-muted, #94a3b8);
font-size: 12px; font-size: 12px;
} }
@@ -203,8 +203,8 @@ AI Security Scanner - CyberPanel
} }
.btn-default { .btn-default {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
border: 1px solid #e8e9ff; border: 1px solid var(--border-primary, #e8e9ff);
padding: 10px 20px; padding: 10px 20px;
border-radius: 8px; border-radius: 8px;
font-weight: 600; font-weight: 600;
@@ -217,7 +217,7 @@ AI Security Scanner - CyberPanel
} }
.btn-default:hover { .btn-default:hover {
background: #e8e9ff; background: var(--border-primary, #e8e9ff);
color: #4644c0; color: #4644c0;
} }
@@ -240,18 +240,19 @@ AI Security Scanner - CyberPanel
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 600; font-weight: 600;
color: #2f3640; color: var(--text-primary, #2f3640);
font-size: 14px; font-size: 14px;
} }
.form-control { .form-control {
width: 100%; width: 100%;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid #e8e9ff; border: 1px solid var(--border-primary, #e8e9ff);
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
transition: all 0.3s ease; transition: all 0.3s ease;
background: white; background: var(--bg-primary, white);
color: var(--text-primary, #2f3640);
} }
.form-control:focus { .form-control:focus {
@@ -262,7 +263,7 @@ AI Security Scanner - CyberPanel
/* Table Styles */ /* Table Styles */
.table-container { .table-container {
background: white; background: var(--bg-primary, white);
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.08);
@@ -274,31 +275,31 @@ AI Security Scanner - CyberPanel
} }
.scanner-table th { .scanner-table th {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
padding: 15px; padding: 15px;
text-align: left; text-align: left;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: #64748b; color: var(--text-secondary, #64748b);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.8px; letter-spacing: 0.8px;
border-bottom: 2px solid #e8e9ff; border-bottom: 2px solid var(--border-primary, #e8e9ff);
} }
.scanner-table td { .scanner-table td {
padding: 15px; padding: 15px;
border-bottom: 1px solid #f0f0ff; border-bottom: 1px solid var(--border-light, #f0f0ff);
color: #2f3640; color: var(--text-primary, #2f3640);
font-size: 14px; font-size: 14px;
} }
.scanner-table tr:hover { .scanner-table tr:hover {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
} }
/* Progress Bar */ /* Progress Bar */
.progress { .progress {
background: #e8e9ff; background: var(--border-primary, #e8e9ff);
height: 8px; height: 8px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
@@ -335,23 +336,23 @@ AI Security Scanner - CyberPanel
} }
.status-label.success { .status-label.success {
background: #d1fae5; background: var(--alert-success-bg, #d1fae5);
color: #10b981; color: var(--alert-success-border, #10b981);
} }
.status-label.warning { .status-label.warning {
background: #fef3c7; background: var(--alert-warning-bg, #fef3c7);
color: #f59e0b; color: var(--alert-warning-border, #f59e0b);
} }
.status-label.danger { .status-label.danger {
background: #fee2e2; background: var(--alert-danger-bg, #fee2e2);
color: #ef4444; color: var(--alert-danger-border, #ef4444);
} }
.status-label.info { .status-label.info {
background: #e0f2fe; background: var(--alert-info-bg, #e0f2fe);
color: #3b82f6; color: var(--alert-info-border, #3b82f6);
} }
/* Modal Styles */ /* Modal Styles */
@@ -367,8 +368,8 @@ AI Security Scanner - CyberPanel
} }
.modal-header { .modal-header {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
border-bottom: 1px solid #e8e9ff; border-bottom: 1px solid var(--border-primary, #e8e9ff);
border-radius: 16px 16px 0 0; border-radius: 16px 16px 0 0;
padding: 20px 25px; padding: 20px 25px;
} }
@@ -376,7 +377,7 @@ AI Security Scanner - CyberPanel
.modal-title { .modal-title {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-primary, #2f3640);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@@ -384,11 +385,13 @@ AI Security Scanner - CyberPanel
.modal-body { .modal-body {
padding: 25px; padding: 25px;
background: var(--bg-primary, white);
color: var(--text-primary, #2f3640);
} }
.modal-footer { .modal-footer {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
border-top: 1px solid #e8e9ff; border-top: 1px solid var(--border-primary, #e8e9ff);
border-radius: 0 0 16px 16px; border-radius: 0 0 16px 16px;
padding: 15px 25px; padding: 15px 25px;
} }
@@ -468,16 +471,16 @@ AI Security Scanner - CyberPanel
<h6 style="font-weight: 600; margin-bottom: 10px;">Current Pricing:</h6> <h6 style="font-weight: 600; margin-bottom: 10px;">Current Pricing:</h6>
<ul style="list-style: none; padding: 0; margin: 0;"> <ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 5px;"><strong>{{ pricing_data.plan.name }}</strong></li> <li style="margin-bottom: 5px;"><strong>{{ pricing_data.plan.name }}</strong></li>
<li style="margin-bottom: 5px; color: #64748b;">Max Files: {{ pricing_data.plan.limits.max_files_per_scan|floatformat:0 }}</li> <li style="margin-bottom: 5px; color: var(--text-secondary, #64748b);">Max Files: {{ pricing_data.plan.limits.max_files_per_scan|floatformat:0 }}</li>
<li style="color: #64748b;">Max File Size: {{ pricing_data.plan.limits.max_file_size_mb }}MB</li> <li style="color: var(--text-secondary, #64748b);">Max File Size: {{ pricing_data.plan.limits.max_file_size_mb }}MB</li>
</ul> </ul>
</div> </div>
<div> <div>
<h6 style="font-weight: 600; margin-bottom: 10px;">Example Costs:</h6> <h6 style="font-weight: 600; margin-bottom: 10px;">Example Costs:</h6>
<ul style="list-style: none; padding: 0; margin: 0;"> <ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 5px; color: #64748b;">Small Scan: ${{ pricing_data.plan.example_costs.small_scan.estimated_cost_usd }}</li> <li style="margin-bottom: 5px; color: var(--text-secondary, #64748b);">Small Scan: ${{ pricing_data.plan.example_costs.small_scan.estimated_cost_usd }}</li>
<li style="margin-bottom: 5px; color: #64748b;">Medium Scan: ${{ pricing_data.plan.example_costs.medium_scan.estimated_cost_usd }}</li> <li style="margin-bottom: 5px; color: var(--text-secondary, #64748b);">Medium Scan: ${{ pricing_data.plan.example_costs.medium_scan.estimated_cost_usd }}</li>
<li style="color: #64748b;">Large Scan: ${{ pricing_data.plan.example_costs.large_scan.estimated_cost_usd }}</li> <li style="color: var(--text-secondary, #64748b);">Large Scan: ${{ pricing_data.plan.example_costs.large_scan.estimated_cost_usd }}</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -500,7 +503,7 @@ AI Security Scanner - CyberPanel
<h4>VPS Free Scans Available</h4> <h4>VPS Free Scans Available</h4>
<p>Great news! Your CyberPanel VPS hosting includes <strong>{{ vps_info.free_scans_available|default:0 }} free AI security scans</strong> this month ({{ vps_info.scans_used_this_month|default:0 }}/{{ vps_info.free_scans_per_month|default:0 }} used).</p> <p>Great news! Your CyberPanel VPS hosting includes <strong>{{ vps_info.free_scans_available|default:0 }} free AI security scans</strong> this month ({{ vps_info.scans_used_this_month|default:0 }}/{{ vps_info.free_scans_per_month|default:0 }} used).</p>
{% if not is_payment_configured %} {% if not is_payment_configured %}
<p style="margin-top: 10px;"><small style="color: #64748b;">You can still add a payment method below for additional scans beyond your free allowance.</small></p> <p style="margin-top: 10px;"><small style="color: var(--text-secondary, #64748b);">You can still add a payment method below for additional scans beyond your free allowance.</small></p>
{% endif %} {% endif %}
</div> </div>
</div> </div>
@@ -581,21 +584,21 @@ AI Security Scanner - CyberPanel
</div> </div>
{% if vps_info.is_vps|default:False and not is_payment_configured %} {% if vps_info.is_vps|default:False and not is_payment_configured %}
<p style="color: #64748b; margin-bottom: 15px;"> <p style="color: var(--text-secondary, #64748b); margin-bottom: 15px;">
<i class="fas fa-info-circle"></i> <i class="fas fa-info-circle"></i>
Payment setup is optional for VPS users. You have {{ vps_info.free_scans_available|default:0 }} free scans available. Payment setup is optional for VPS users. You have {{ vps_info.free_scans_available|default:0 }} free scans available.
</p> </p>
{% else %} {% else %}
<p style="color: #64748b; margin-bottom: 15px;"> <p style="color: var(--text-secondary, #64748b); margin-bottom: 15px;">
<i class="fas fa-info-circle"></i> <i class="fas fa-info-circle"></i>
Your account uses automatic billing. Add multiple payment methods for backup security. Your account uses automatic billing. Add multiple payment methods for backup security.
</p> </p>
{% endif %} {% endif %}
<div id="paymentMethodsList"> <div id="paymentMethodsList">
{% if is_payment_configured %} {% if is_payment_configured %}
<p style="color: #94a3b8;">Payment methods will be managed through the platform.</p> <p style="color: var(--text-muted, #94a3b8);">Payment methods will be managed through the platform.</p>
{% else %} {% else %}
<p style="color: #94a3b8;">No payment methods configured yet.</p> <p style="color: var(--text-muted, #94a3b8);">No payment methods configured yet.</p>
{% endif %} {% endif %}
</div> </div>
</div> </div>
@@ -716,7 +719,7 @@ AI Security Scanner - CyberPanel
<div class="progress" style="height: 20px;"> <div class="progress" style="height: 20px;">
<div class="progress-bar progress-bar-animated" <div class="progress-bar progress-bar-animated"
role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: #2f3640; font-size: 12px;">0%</span> <span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: var(--text-primary, #2f3640); font-size: 12px;">0%</span>
</div> </div>
</div> </div>
{% else %} {% else %}
@@ -791,7 +794,7 @@ AI Security Scanner - CyberPanel
<div class="progress" style="height: 25px;"> <div class="progress" style="height: 25px;">
<div id="scanProgressBar" class="progress-bar progress-bar-animated" <div id="scanProgressBar" class="progress-bar progress-bar-animated"
role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span id="scanProgressText" style="position: absolute; width: 100%; text-align: center; line-height: 25px; color: #2f3640; font-weight: 600;">0%</span> <span id="scanProgressText" style="position: absolute; width: 100%; text-align: center; line-height: 25px; color: var(--text-primary, #2f3640); font-weight: 600;">0%</span>
</div> </div>
</div> </div>
</div> </div>
@@ -801,38 +804,38 @@ AI Security Scanner - CyberPanel
<div class="row" style="margin-bottom: 15px;"> <div class="row" style="margin-bottom: 15px;">
<div class="col-md-6"> <div class="col-md-6">
<strong>Current Activity:</strong> <strong>Current Activity:</strong>
<br><span id="currentActivity" class="text-muted">Initializing...</span> <br><span id="currentActivity" style="color: var(--text-secondary, #64748b);">Initializing...</span>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<strong>Current File:</strong> <strong>Current File:</strong>
<br><code id="currentFile" class="text-primary">N/A</code> <br><code id="currentFile" style="color: #5856d6;">N/A</code>
</div> </div>
</div> </div>
<!-- Statistics --> <!-- Statistics -->
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<div style="background: #e0f2fe; border-radius: 8px; padding: 15px; text-align: center;"> <div style="background: var(--alert-info-bg, #e0f2fe); border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="filesDiscovered" style="margin: 0 0 5px 0; color: #3b82f6;">0</h4> <h4 id="filesDiscovered" style="margin: 0 0 5px 0; color: var(--alert-info-border, #3b82f6);">0</h4>
<small style="color: #64748b;">Files Discovered</small> <small style="color: var(--text-secondary, #64748b);">Files Discovered</small>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div style="background: #e8e6ff; border-radius: 8px; padding: 15px; text-align: center;"> <div style="background: var(--bg-secondary, #e8e6ff); border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="filesScanned" style="margin: 0 0 5px 0; color: #5856d6;">0</h4> <h4 id="filesScanned" style="margin: 0 0 5px 0; color: #5856d6;">0</h4>
<small style="color: #64748b;">Files Scanned</small> <small style="color: var(--text-secondary, #64748b);">Files Scanned</small>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div style="background: #fef3c7; border-radius: 8px; padding: 15px; text-align: center;"> <div style="background: var(--alert-warning-bg, #fef3c7); border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="filesRemaining" style="margin: 0 0 5px 0; color: #f59e0b;">0</h4> <h4 id="filesRemaining" style="margin: 0 0 5px 0; color: var(--alert-warning-border, #f59e0b);">0</h4>
<small style="color: #64748b;">Files Remaining</small> <small style="color: var(--text-secondary, #64748b);">Files Remaining</small>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div style="background: #fee2e2; border-radius: 8px; padding: 15px; text-align: center;"> <div style="background: var(--alert-danger-bg, #fee2e2); border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="threatsFound" style="margin: 0 0 5px 0; color: #ef4444;">0</h4> <h4 id="threatsFound" style="margin: 0 0 5px 0; color: var(--alert-danger-border, #ef4444);">0</h4>
<small style="color: #64748b;">Threats Found</small> <small style="color: var(--text-secondary, #64748b);">Threats Found</small>
</div> </div>
</div> </div>
</div> </div>
@@ -849,7 +852,7 @@ AI Security Scanner - CyberPanel
<!-- Last Updated --> <!-- Last Updated -->
<div class="row" style="margin-top: 15px;"> <div class="row" style="margin-top: 15px;">
<div class="col-md-12"> <div class="col-md-12">
<small class="text-muted">Last updated: <span id="lastUpdated">Never</span></small> <small style="color: var(--text-muted, #94a3b8);">Last updated: <span id="lastUpdated">Never</span></small>
</div> </div>
</div> </div>
</div> </div>
@@ -1240,13 +1243,13 @@ function displayCompletedScanDetails(scan) {
finding.severity === 'medium' ? 'warning' : 'info'; finding.severity === 'medium' ? 'warning' : 'info';
findingsHtml += ` findingsHtml += `
<div style="background: white; border: 1px solid #e8e9ff; border-radius: 8px; padding: 15px;"> <div style="background: var(--bg-primary, white); border: 1px solid var(--border-primary, #e8e9ff); border-radius: 8px; padding: 15px;">
<h6 style="margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px;"> <h6 style="margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px; color: var(--text-primary, #2f3640);">
<span class="status-label ${severityClass}" style="text-transform: uppercase;">${finding.severity}</span> <span class="status-label ${severityClass}" style="text-transform: uppercase;">${finding.severity}</span>
${finding.title} ${finding.title}
</h6> </h6>
<p style="margin: 0 0 10px 0; color: #64748b;">${finding.description}</p> <p style="margin: 0 0 10px 0; color: var(--text-secondary, #64748b);">${finding.description}</p>
${finding.file ? `<small style="color: #94a3b8;">File: ${finding.file}</small>` : ''} ${finding.file ? `<small style="color: var(--text-muted, #94a3b8);">File: ${finding.file}</small>` : ''}
</div> </div>
`; `;
}); });
@@ -1282,7 +1285,7 @@ function displayCompletedScanDetails(scan) {
</div> </div>
<h4 style="margin: 0; font-size: 24px; font-weight: 700;">${threatsFound}</h4> <h4 style="margin: 0; font-size: 24px; font-weight: 700;">${threatsFound}</h4>
<p style="margin: 5px 0 0 0; font-size: 13px;">Threats Found</p> <p style="margin: 5px 0 0 0; font-size: 13px;">Threats Found</p>
${(criticalThreats > 0 || highThreats > 0) ? `<small style="color: #ef4444; font-size: 11px;">${criticalThreats > 0 ? `${criticalThreats} Critical` : ''}${criticalThreats > 0 && highThreats > 0 ? ', ' : ''}${highThreats > 0 ? `${highThreats} High` : ''}</small>` : ''} ${(criticalThreats > 0 || highThreats > 0) ? `<small style="color: var(--alert-danger-border, #ef4444); font-size: 11px;">${criticalThreats > 0 ? `${criticalThreats} Critical` : ''}${criticalThreats > 0 && highThreats > 0 ? ', ' : ''}${highThreats > 0 ? `${highThreats} High` : ''}</small>` : ''}
</div> </div>
<div class="stat-card" style="padding: 20px;"> <div class="stat-card" style="padding: 20px;">
<div class="stat-card-icon info" style="width: 40px; height: 40px; font-size: 18px; margin-bottom: 10px;"> <div class="stat-card-icon info" style="width: 40px; height: 40px; font-size: 18px; margin-bottom: 10px;">
@@ -1412,7 +1415,7 @@ function updateTableRowProgress(row, data) {
<div class="progress-bar progress-bar-animated" <div class="progress-bar progress-bar-animated"
role="progressbar" style="width: ${data.progress}%" role="progressbar" style="width: ${data.progress}%"
aria-valuenow="${data.progress}" aria-valuemin="0" aria-valuemax="100"> aria-valuenow="${data.progress}" aria-valuemin="0" aria-valuemax="100">
<span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: #2f3640; font-size: 12px;">${data.progress}%</span> <span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: var(--text-primary, #2f3640); font-size: 12px;">${data.progress}%</span>
</div> </div>
</div> </div>
`; `;
@@ -1598,7 +1601,7 @@ function displayScheduledScans(scans) {
const container = document.getElementById('scheduledScansContainer'); const container = document.getElementById('scheduledScansContainer');
if (!scans || scans.length === 0) { if (!scans || scans.length === 0) {
container.innerHTML = '<p style="color: #94a3b8; text-align: center; padding: 20px;">No scheduled scans configured yet.</p>'; container.innerHTML = '<p style="color: var(--text-muted, #94a3b8); text-align: center; padding: 20px;">No scheduled scans configured yet.</p>';
return; return;
} }
@@ -1970,10 +1973,10 @@ document.addEventListener('DOMContentLoaded', function() {
} }
.scheduled-scan-card { .scheduled-scan-card {
border: 1px solid #e8e9ff; border: 1px solid var(--border-primary, #e8e9ff);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
background: white; background: var(--bg-primary, white);
} }
.scheduled-scan-header { .scheduled-scan-header {
@@ -1985,13 +1988,13 @@ document.addEventListener('DOMContentLoaded', function() {
.scheduled-scan-header h4 { .scheduled-scan-header h4 {
margin: 0; margin: 0;
color: #2f3640; color: var(--text-primary, #2f3640);
font-size: 16px; font-size: 16px;
} }
.scheduled-scan-info p { .scheduled-scan-info p {
margin: 5px 0; margin: 5px 0;
color: #64748b; color: var(--text-secondary, #64748b);
font-size: 14px; font-size: 14px;
} }
@@ -2003,7 +2006,8 @@ document.addEventListener('DOMContentLoaded', function() {
} }
.checkbox-group { .checkbox-group {
background: #f8f9fa; background: var(--bg-secondary, #f8f9fa);
border-color: var(--border-primary, #ddd);
} }
.form-check { .form-check {

61
firewall/templates/firewall/csf.html
View File

@@ -97,10 +97,10 @@
/* Install Panel */ /* Install Panel */
.install-panel { .install-panel {
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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-primary, #e8e9ff);
overflow: hidden; overflow: hidden;
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
text-align: center; text-align: center;
@@ -116,12 +116,12 @@
.install-title { .install-title {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--text-primary, #1e293b);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.install-subtitle { .install-subtitle {
color: #64748b; color: var(--text-secondary, #64748b);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -147,10 +147,10 @@
/* Installation Progress */ /* Installation Progress */
.install-progress { .install-progress {
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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-primary, #e8e9ff);
overflow: hidden; overflow: hidden;
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
padding: 2rem; padding: 2rem;
@@ -173,13 +173,13 @@
.progress-title { .progress-title {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--text-primary, #1e293b);
} }
.log-textarea { .log-textarea {
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
border: 2px solid #e8e9ff; border: 2px solid var(--border-primary, #e8e9ff);
border-radius: 10px; border-radius: 10px;
font-family: 'Monaco', 'Consolas', monospace; font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.875rem; font-size: 0.875rem;
@@ -191,10 +191,10 @@
/* Configuration Panel */ /* Configuration Panel */
.config-panel { .config-panel {
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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-primary, #e8e9ff);
overflow: hidden; overflow: hidden;
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
} }
@@ -204,7 +204,7 @@
display: flex; display: flex;
gap: 0.25rem; gap: 0.25rem;
padding: 0.5rem; padding: 0.5rem;
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
border-radius: 12px; border-radius: 12px;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -217,7 +217,7 @@
border-radius: 8px; border-radius: 8px;
font-weight: 600; font-weight: 600;
font-size: 0.9375rem; font-size: 0.9375rem;
color: #64748b; color: var(--text-secondary, #64748b);
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
display: flex; display: flex;
@@ -253,8 +253,8 @@
/* Native GUI Button */ /* Native GUI Button */
.native-gui-btn { .native-gui-btn {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
border: 2px solid #e8e9ff; border: 2px solid var(--border-primary, #e8e9ff);
color: #5b5fcf; color: #5b5fcf;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border-radius: 10px; border-radius: 10px;
@@ -279,17 +279,17 @@
/* Form Styles */ /* Form Styles */
.form-section { .form-section {
background: white; background: var(--bg-primary, white);
border-radius: 12px; border-radius: 12px;
padding: 2rem; padding: 2rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border: 1px solid #e8e9ff; border: 1px solid var(--border-primary, #e8e9ff);
} }
.form-section-title { .form-section-title {
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--text-primary, #1e293b);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -306,7 +306,7 @@
.form-label { .form-label {
flex: 0 0 200px; flex: 0 0 200px;
font-weight: 600; font-weight: 600;
color: #334155; color: var(--text-secondary, #334155);
font-size: 0.875rem; font-size: 0.875rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@@ -315,17 +315,18 @@
.form-control { .form-control {
flex: 1; flex: 1;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border: 2px solid #e8e9ff; border: 2px solid var(--border-primary, #e8e9ff);
border-radius: 10px; border-radius: 10px;
font-size: 0.9375rem; font-size: 0.9375rem;
transition: all 0.3s ease; transition: all 0.3s ease;
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
color: var(--text-primary, #1e293b);
} }
.form-control:focus { .form-control:focus {
outline: none; outline: none;
border-color: #5b5fcf; border-color: #5b5fcf;
background: white; background: var(--bg-primary, white);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1); box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
} }
@@ -370,7 +371,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #cbd5e1; background-color: var(--bg-tertiary, #cbd5e1);
transition: .4s; transition: .4s;
border-radius: 26px; border-radius: 26px;
} }
@@ -454,15 +455,15 @@
} }
.alert-success { .alert-success {
background: #e8e6ff; background: var(--alert-success-bg, #e8e6ff);
color: #5856d6; color: var(--alert-success-text, #5856d6);
border: 1px solid #d4d4ff; border: 1px solid var(--alert-success-border, #d4d4ff);
} }
.alert-danger { .alert-danger {
background: #fee2e2; background: var(--alert-danger-bg, #fee2e2);
color: #991b1b; color: var(--alert-danger-text, #991b1b);
border: 1px solid #fecaca; border: 1px solid var(--alert-danger-border, #fecaca);
} }
.alert-icon { .alert-icon {
@@ -489,7 +490,7 @@
.coming-soon { .coming-soon {
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
color: #64748b; color: var(--text-secondary, #64748b);
font-size: 1.125rem; font-size: 1.125rem;
} }
@@ -716,7 +717,7 @@
<div class="tab-content" id="lfd"> <div class="tab-content" id="lfd">
<div class="coming-soon"> <div class="coming-soon">
<i class="fas fa-clock fa-3x" style="color: #5b5fcf; margin-bottom: 1rem;"></i> <i class="fas fa-clock fa-3x" style="color: #5b5fcf; margin-bottom: 1rem;"></i>
<h3 style="color: #1e293b; margin-bottom: 0.5rem;">{% trans 'LFD Configuration' %}</h3> <h3 style="color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">{% trans 'LFD Configuration' %}</h3>
<p>{% trans 'Login Failure Daemon configuration coming soon.' %}</p> <p>{% trans 'Login Failure Daemon configuration coming soon.' %}</p>
</div> </div>
</div> </div>

59
firewall/templates/firewall/modSecurity.html
View File

@@ -116,10 +116,10 @@
/* Install Panel */ /* Install Panel */
.install-panel { .install-panel {
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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; overflow: hidden;
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
text-align: center; text-align: center;
@@ -135,12 +135,12 @@
.install-title { .install-title {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--text-primary, #1e293b);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.install-subtitle { .install-subtitle {
color: #64748b; color: var(--text-secondary, #64748b);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -166,10 +166,10 @@
/* Installation Progress */ /* Installation Progress */
.install-progress { .install-progress {
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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; overflow: hidden;
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
padding: 2rem; padding: 2rem;
@@ -191,28 +191,28 @@
.progress-title { .progress-title {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--text-primary, #1e293b);
} }
.log-textarea { .log-textarea {
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
border: 2px solid #e8e9ff; border: 2px solid var(--border-color, #e8e9ff);
border-radius: 10px; border-radius: 10px;
font-family: 'Monaco', 'Consolas', monospace; font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.875rem; font-size: 0.875rem;
background: #1e293b; background: var(--bg-tertiary, #1e293b);
color: #5b5fcf; color: var(--text-accent, #5b5fcf);
resize: vertical; resize: vertical;
min-height: 300px; min-height: 300px;
} }
/* Configuration Panel */ /* Configuration Panel */
.config-panel { .config-panel {
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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; overflow: hidden;
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
} }
@@ -259,7 +259,7 @@
.form-label { .form-label {
flex: 0 0 200px; flex: 0 0 200px;
font-weight: 600; font-weight: 600;
color: #334155; color: var(--text-secondary, #334155);
font-size: 0.875rem; font-size: 0.875rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@@ -268,17 +268,18 @@
.form-control { .form-control {
flex: 1; flex: 1;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border: 2px solid #e8e9ff; border: 2px solid var(--border-color, #e8e9ff);
border-radius: 10px; border-radius: 10px;
font-size: 0.9375rem; font-size: 0.9375rem;
transition: all 0.3s ease; transition: all 0.3s ease;
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
color: var(--text-primary, #1e293b);
} }
.form-control:focus { .form-control:focus {
outline: none; outline: none;
border-color: #22c55e; border-color: #22c55e;
background: white; background: var(--bg-primary, white);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1); box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
} }
@@ -312,7 +313,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #cbd5e1; background-color: var(--bg-tertiary, #cbd5e1);
transition: .4s; transition: .4s;
border-radius: 26px; border-radius: 26px;
} }
@@ -376,15 +377,15 @@
} }
.alert-success { .alert-success {
background: #e8e6ff; background: var(--alert-success-bg, #e8e6ff);
color: #5856d6; color: var(--alert-success-text, #5856d6);
border: 1px solid #d4d4ff; border: 1px solid var(--alert-success-border, #d4d4ff);
} }
.alert-danger { .alert-danger {
background: #fee2e2; background: var(--alert-error-bg, #fee2e2);
color: #991b1b; color: var(--alert-error-text, #991b1b);
border: 1px solid #fecaca; border: 1px solid var(--alert-error-border, #fecaca);
} }
.alert-icon { .alert-icon {
@@ -393,8 +394,8 @@
/* Info Box */ /* Info Box */
.info-box { .info-box {
background: #f0f9ff; background: var(--alert-info-bg, #f0f9ff);
border: 1px solid #bae6fd; border: 1px solid var(--alert-info-border, #bae6fd);
border-radius: 10px; border-radius: 10px;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -404,12 +405,12 @@
} }
.info-icon { .info-icon {
color: #0284c7; color: var(--alert-info-text, #0284c7);
font-size: 1.25rem; font-size: 1.25rem;
} }
.info-text { .info-text {
color: #075985; color: var(--alert-info-text, #075985);
font-size: 0.875rem; font-size: 0.875rem;
} }
@@ -417,7 +418,7 @@
.loading-spinner { .loading-spinner {
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid #f3f3f3; border: 2px solid var(--border-color, #f3f3f3);
border-top: 2px solid #5b5fcf; border-top: 2px solid #5b5fcf;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
@@ -537,7 +538,7 @@
</div> </div>
{% trans "ModSecurity Configuration" %} {% trans "ModSecurity Configuration" %}
</div> </div>
<div ng-show="!modsecLoading" class="loading-spinner"></div> <div ng-show="modsecLoading" class="loading-spinner"></div>
</div> </div>
<div class="panel-content"> <div class="panel-content">

47
firewall/templates/firewall/modSecurityRules.html
View File

@@ -116,10 +116,10 @@
/* Rules Editor Panel */ /* Rules Editor Panel */
.rules-panel { .rules-panel {
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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; overflow: hidden;
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
} }
@@ -153,12 +153,13 @@
.panel-content { .panel-content {
padding: 2rem; padding: 2rem;
background: var(--bg-primary, white);
} }
/* Info Box */ /* Info Box */
.info-box { .info-box {
background: #f0f9ff; background: var(--bg-secondary, #f0f9ff);
border: 1px solid #bae6fd; border: 1px solid var(--border-color-light, #bae6fd);
border-radius: 10px; border-radius: 10px;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -168,12 +169,12 @@
} }
.info-icon { .info-icon {
color: #0284c7; color: var(--accent-primary, #0284c7);
font-size: 1.25rem; font-size: 1.25rem;
} }
.info-text { .info-text {
color: #075985; color: var(--text-secondary, #075985);
font-size: 0.875rem; font-size: 0.875rem;
} }
@@ -181,12 +182,12 @@
.rules-textarea { .rules-textarea {
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
border: 2px solid #e8e9ff; border: 2px solid var(--border-color, #e8e9ff);
border-radius: 10px; border-radius: 10px;
font-family: 'Monaco', 'Consolas', monospace; font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.875rem; font-size: 0.875rem;
background: #1e293b; background: #1e293b;
color: #5b5fcf; color: var(--text-primary, #5b5fcf);
resize: vertical; resize: vertical;
min-height: 400px; min-height: 400px;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -194,16 +195,16 @@
.rules-textarea:focus { .rules-textarea:focus {
outline: none; outline: none;
border-color: #5b5fcf; border-color: var(--accent-primary, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1); box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
} }
/* Install Panel */ /* Install Panel */
.install-panel { .install-panel {
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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; overflow: hidden;
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
text-align: center; text-align: center;
@@ -212,19 +213,19 @@
.install-icon { .install-icon {
font-size: 4rem; font-size: 4rem;
color: #5b5fcf; color: var(--accent-primary, #5b5fcf);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.install-title { .install-title {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--text-primary, #1e293b);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.install-subtitle { .install-subtitle {
color: #64748b; color: var(--text-secondary, #64748b);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -281,15 +282,15 @@
} }
.alert-success { .alert-success {
background: #e8e6ff; background: var(--success-bg, #e8e6ff);
color: #5856d6; color: var(--success-text, #5856d6);
border: 1px solid #d4d4ff; border: 1px solid var(--success-border, #d4d4ff);
} }
.alert-danger { .alert-danger {
background: #fee2e2; background: var(--danger-bg, #fee2e2);
color: #991b1b; color: var(--danger-text, #991b1b);
border: 1px solid #fecaca; border: 1px solid var(--danger-border, #fecaca);
} }
.alert-icon { .alert-icon {
@@ -300,8 +301,8 @@
.loading-spinner { .loading-spinner {
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid #f3f3f3; border: 2px solid var(--border-color-light, #f3f3f3);
border-top: 2px solid #5b5fcf; border-top: 2px solid var(--accent-primary, #5b5fcf);
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
display: inline-block; display: inline-block;
@@ -376,7 +377,7 @@
</div> </div>
{% trans "Edit Rules" %} {% trans "Edit Rules" %}
</div> </div>
<div ng-show="!modsecLoading" class="loading-spinner"></div> <div ng-show="modsecLoading" class="loading-spinner"></div>
</div> </div>
<div class="panel-content"> <div class="panel-content">

58
firewall/templates/firewall/modSecurityRulesPacks.html
View File

@@ -117,10 +117,10 @@
/* Install Panel */ /* Install Panel */
.install-panel { .install-panel {
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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-light, #e8e9ff);
overflow: hidden; overflow: hidden;
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
text-align: center; text-align: center;
@@ -136,7 +136,7 @@
.install-title { .install-title {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--text-primary, #1e293b);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -162,10 +162,10 @@
/* Rules Panel */ /* Rules Panel */
.rules-panel { .rules-panel {
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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-light, #e8e9ff);
overflow: hidden; overflow: hidden;
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
} }
@@ -177,25 +177,25 @@
} }
.custom-table thead th { .custom-table thead th {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
color: #334155; color: var(--text-secondary, #334155);
font-size: 0.875rem; font-size: 0.875rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
border-bottom: 2px solid #e8e9ff; border-bottom: 2px solid var(--border-light, #e8e9ff);
} }
.custom-table tbody td { .custom-table tbody td {
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e8e9ff; border-bottom: 1px solid var(--border-light, #e8e9ff);
vertical-align: middle; vertical-align: middle;
} }
.custom-table tbody tr:hover { .custom-table tbody tr:hover {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
} }
.custom-table tbody tr:last-child td { .custom-table tbody tr:last-child td {
@@ -204,7 +204,7 @@
.package-name { .package-name {
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--text-primary, #1e293b);
font-size: 1rem; font-size: 1rem;
} }
@@ -229,7 +229,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #cbd5e1; background-color: var(--bg-tertiary, #cbd5e1);
transition: .4s; transition: .4s;
border-radius: 26px; border-radius: 26px;
} }
@@ -256,8 +256,8 @@
/* Buttons */ /* Buttons */
.btn-configure { .btn-configure {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
border: 2px solid #e8e9ff; border: 2px solid var(--border-light, #e8e9ff);
color: #5b5fcf; color: #5b5fcf;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border-radius: 10px; border-radius: 10px;
@@ -295,15 +295,15 @@
} }
.alert-success { .alert-success {
background: #e8e6ff; background: var(--alert-success-bg, #e8e6ff);
color: #5856d6; color: var(--alert-success-text, #5856d6);
border: 1px solid #d4d4ff; border: 1px solid var(--alert-success-border, #d4d4ff);
} }
.alert-danger { .alert-danger {
background: #fee2e2; background: var(--alert-danger-bg, #fee2e2);
color: #991b1b; color: var(--alert-danger-text, #991b1b);
border: 1px solid #fecaca; border: 1px solid var(--alert-danger-border, #fecaca);
} }
.alert-icon { .alert-icon {
@@ -313,10 +313,10 @@
/* Rule Files Table */ /* Rule Files Table */
.rule-files-section { .rule-files-section {
margin-top: 2rem; margin-top: 2rem;
background: white; background: var(--bg-primary, white);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08); 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-light, #e8e9ff);
overflow: hidden; overflow: hidden;
padding: 2rem; padding: 2rem;
} }
@@ -327,25 +327,25 @@
} }
.rule-files-table thead th { .rule-files-table thead th {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
padding: 1rem; padding: 1rem;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
color: #334155; color: var(--text-secondary, #334155);
font-size: 0.875rem; font-size: 0.875rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
border-bottom: 2px solid #e8e9ff; border-bottom: 2px solid var(--border-light, #e8e9ff);
} }
.rule-files-table tbody td { .rule-files-table tbody td {
padding: 1rem; padding: 1rem;
border-bottom: 1px solid #e8e9ff; border-bottom: 1px solid var(--border-light, #e8e9ff);
vertical-align: middle; vertical-align: middle;
} }
.rule-files-table tbody tr:hover { .rule-files-table tbody tr:hover {
background: #f8f9ff; background: var(--bg-secondary, #f8f9ff);
} }
.rule-files-table tbody tr:last-child td { .rule-files-table tbody tr:last-child td {
@@ -362,7 +362,7 @@
.loading-spinner { .loading-spinner {
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid #f3f3f3; border: 2px solid var(--bg-tertiary, #f3f3f3);
border-top: 2px solid #5b5fcf; border-top: 2px solid #5b5fcf;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
@@ -490,7 +490,7 @@
<!-- Rule Files Section --> <!-- Rule Files Section -->
<div ng-hide="ruleFiles" class="rule-files-section"> <div ng-hide="ruleFiles" class="rule-files-section">
<h3 style="font-size: 1.25rem; font-weight: 600; color: #1e293b; margin-bottom: 1.5rem;"> <h3 style="font-size: 1.25rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 1.5rem;">
<i class="fas fa-file-code" style="color: #5b5fcf; margin-right: 0.5rem;"></i> <i class="fas fa-file-code" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
{% trans "Rule Files" %} {% trans "Rule Files" %}
</h3> </h3>