dark mode
This commit is contained in:
usmannasir
parent
ddfa20cc75
commit
4f1541814f
|
|
@ -195,8 +195,8 @@
|
|||
</style>
|
||||
<div class="container">
|
||||
<div id="page-title" align="center">
|
||||
<h1 style="color: black"><strong>Backups v2 - Incremental Backups! </strong></h1>
|
||||
<p style="font-size: 15px; color: black; margin-top: 1%">Is your website's data protection strategy up
|
||||
<h1 style="color: var(--text-primary, black)"><strong>Backups v2 - Incremental Backups! </strong></h1>
|
||||
<p style="font-size: 15px; color: var(--text-primary, black); margin-top: 1%">Is your website's data protection strategy up
|
||||
to par? Are you tired of dealing with slow and unreliable backup solutions that don't offer the
|
||||
level of robustness you need? <br><br>
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@
|
|||
<label class="col-sm-3 control-label">{% trans " " %} </label>
|
||||
<div class="col-sm-6">
|
||||
<button class="btn" id="CreateV2BackupButton" ng-click="CreateV2BackupButton()"
|
||||
style="border-radius: 6px;background-color: #3447b7;color: white !important;">
|
||||
style="border-radius: 6px;background-color: var(--accent-color, #3447b7);color: var(--bg-secondary, white) !important;">
|
||||
Create Backup
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -262,8 +262,8 @@
|
|||
</style>
|
||||
<div class="container">
|
||||
<div id="page-title" align="center">
|
||||
<h1 style="color: black"><strong>Backups v2 - Incremental Backups! </strong></h1>
|
||||
<p style="font-size: 15px; color: black; margin-top: 1%">Is your website's data protection strategy up
|
||||
<h1 style="color: var(--text-primary, black)"><strong>Backups v2 - Incremental Backups! </strong></h1>
|
||||
<p style="font-size: 15px; color: var(--text-primary, black); margin-top: 1%">Is your website's data protection strategy up
|
||||
to par? Are you tired of dealing with slow and unreliable backup solutions that don't offer the
|
||||
level of robustness you need? <br><br>
|
||||
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@
|
|||
<label class="col-sm-3 control-label">{% trans " " %} </label>
|
||||
<div class="col-sm-6">
|
||||
<button class="btn" id="CreateV2BackupButton" ng-click="CreateScheduleV2()"
|
||||
style="border-radius: 6px;background-color: #3447b7;color: white !important;">
|
||||
style="border-radius: 6px;background-color: var(--accent-color, #3447b7);color: var(--bg-secondary, white) !important;">
|
||||
Create Schedule
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -224,8 +224,8 @@
|
|||
</style>
|
||||
<div class="container">
|
||||
<div id="page-title" align="center">
|
||||
<h1 style="color: black"><strong>Backups v2 - Incremental Backups! </strong></h1>
|
||||
<p style="font-size: 15px; color: black; margin-top: 1%">Is your website's data protection strategy up
|
||||
<h1 style="color: var(--text-primary, black)"><strong>Backups v2 - Incremental Backups! </strong></h1>
|
||||
<p style="font-size: 15px; color: var(--text-primary, black); margin-top: 1%">Is your website's data protection strategy up
|
||||
to par? Are you tired of dealing with slow and unreliable backup solutions that don't offer the
|
||||
level of robustness you need? <br><br>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@
|
|||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin: 0 0 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -38,19 +38,19 @@
|
|||
.page-header .icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
color: var(--bg-secondary, white);
|
||||
font-size: 24px;
|
||||
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
|
|
@ -68,24 +68,24 @@
|
|||
}
|
||||
|
||||
.docs-link:hover {
|
||||
color: #4b4fbf;
|
||||
color: var(--accent-hover, #4b4fbf);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -119,17 +119,17 @@
|
|||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
background: #f8f9ff;
|
||||
color: #2f3640;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
color: var(--text-primary, #2f3640);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
background: white;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
background: var(--bg-secondary, white);
|
||||
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
|
||||
}
|
||||
|
||||
|
|
@ -137,18 +137,18 @@
|
|||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
background: #f8f9ff;
|
||||
color: #2f3640;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
color: var(--text-primary, #2f3640);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
background: white;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
background: var(--bg-secondary, white);
|
||||
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
|
||||
}
|
||||
|
||||
|
|
@ -163,16 +163,16 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.checkbox-wrapper:hover {
|
||||
background: #f0f0ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--hover-light, #f0f0ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.checkbox-wrapper input[type="checkbox"] {
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
|
||||
.checkbox-label {
|
||||
font-size: 14px;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
|
@ -192,8 +192,8 @@
|
|||
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -209,13 +209,13 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4b4fbf;
|
||||
background: var(--accent-hover, #4b4fbf);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(91,95,207,0.3);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #94a3b8;
|
||||
background: var(--text-muted, #94a3b8);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -228,10 +228,10 @@
|
|||
font-size: 13px;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
line-height: 1.5;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
background: #f8f9ff;
|
||||
color: #2f3640;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
color: var(--text-primary, #2f3640);
|
||||
resize: vertical;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
|
@ -239,29 +239,29 @@
|
|||
/* Table Styles */
|
||||
.backups-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);
|
||||
}
|
||||
|
||||
.backups-table th {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.backups-table td {
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
color: #2f3640;
|
||||
border-bottom: 1px solid #f0f0ff;
|
||||
color: var(--text-primary, #2f3640);
|
||||
border-bottom: 1px solid var(--border-light, #f0f0ff);
|
||||
}
|
||||
|
||||
.backups-table tr:last-child td {
|
||||
|
|
@ -269,12 +269,12 @@
|
|||
}
|
||||
|
||||
.backups-table tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 6px 16px;
|
||||
border-radius: 6px;
|
||||
|
|
@ -289,16 +289,16 @@
|
|||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #4b4fbf;
|
||||
background: var(--accent-hover, #4b4fbf);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(91,95,207,0.3);
|
||||
color: white;
|
||||
color: var(--bg-secondary, white);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 6px 16px;
|
||||
border-radius: 6px;
|
||||
|
|
@ -312,7 +312,7 @@
|
|||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(239,68,68,0.3);
|
||||
}
|
||||
|
|
@ -325,8 +325,8 @@
|
|||
}
|
||||
|
||||
.modal-header {
|
||||
background: #f8f9ff;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 12px 12px 0 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -334,7 +334,7 @@
|
|||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
@ -342,8 +342,8 @@
|
|||
}
|
||||
|
||||
.modal-footer {
|
||||
background: #f8f9ff;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-top: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
|
@ -353,7 +353,7 @@
|
|||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #5b5fcf;
|
||||
border: 2px solid var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
animation: spin 0.8s linear infinite;
|
||||
|
|
@ -374,12 +374,12 @@
|
|||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #8893a7;
|
||||
color: var(--text-muted, #8893a7);
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 48px;
|
||||
color: #e8e9ff;
|
||||
color: var(--border-color, #e8e9ff);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -516,7 +516,7 @@
|
|||
<tbody>
|
||||
<tr ng-repeat="record in records track by $index">
|
||||
<td>
|
||||
<i class="fas fa-archive" style="color: #5b5fcf; margin-right: 8px;"></i>
|
||||
<i class="fas fa-archive" style="color: var(--accent-color, #5b5fcf); margin-right: 8px;"></i>
|
||||
<span ng-bind="record.id"></span>
|
||||
</td>
|
||||
<td ng-bind="record.date"></td>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.875rem 2.25rem;
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
|
||||
color: white;
|
||||
|
|
@ -80,8 +80,8 @@
|
|||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 0.875rem 2.25rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -95,14 +95,14 @@
|
|||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.625rem 1.25rem;
|
||||
|
|
@ -114,13 +114,13 @@
|
|||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.btn-gray {
|
||||
background: #6b7280;
|
||||
background: var(--text-secondary, #6b7280);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.625rem 1.25rem;
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
}
|
||||
|
||||
.btn-gray:hover {
|
||||
background: #4b5563;
|
||||
background: var(--text-secondary, #4b5563);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
|
||||
}
|
||||
|
|
@ -141,22 +141,22 @@
|
|||
background: 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;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -181,14 +181,14 @@
|
|||
.form-label {
|
||||
flex: 0 0 200px;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
flex: 1;
|
||||
padding: 1rem 1.125rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-size: 1.0625rem;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -206,34 +206,34 @@
|
|||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.data-table thead {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
padding: 1.125rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 1.0625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 1.125rem;
|
||||
color: #475569;
|
||||
color: var(--text-secondary, #475569);
|
||||
font-size: 1.125rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
border-bottom: 1px solid var(--border-light, #f3f4f6);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.data-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.data-table tbody tr:last-child td {
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
}
|
||||
|
||||
.sites-section {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
|
|
@ -250,7 +250,7 @@
|
|||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -258,8 +258,8 @@
|
|||
}
|
||||
|
||||
.info-box {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
background: var(--info-bg, #f0f9ff);
|
||||
border: 1px solid var(--info-border, #bae6fd);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
|
||||
.info-label {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -287,7 +287,7 @@
|
|||
.info-value {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
|
|
@ -320,16 +320,16 @@
|
|||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
@ -340,7 +340,7 @@
|
|||
input[type="number"] {
|
||||
width: 100px;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -349,7 +349,7 @@
|
|||
|
||||
input[type="number"]:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -423,7 +423,7 @@
|
|||
<label class="form-label">{% trans "Backup Retention" %}</label>
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<input ng-model="backupRetention" type="number" value="0" min="0">
|
||||
<span style="color: #64748b; font-size: 0.875rem;">{% trans "days (0 for no limit)" %}</span>
|
||||
<span style="color: var(--text-secondary, #64748b); font-size: 0.875rem;">{% trans "days (0 for no limit)" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -555,7 +555,7 @@
|
|||
|
||||
<div style="margin-top: 1.5rem; text-align: right;">
|
||||
<div style="display: inline-flex; align-items: center; gap: 1rem;">
|
||||
<span style="color: #64748b; font-size: 0.875rem;">{% trans "Page" %}</span>
|
||||
<span style="color: var(--text-secondary, #64748b); font-size: 0.875rem;">{% trans "Page" %}</span>
|
||||
<select ng-model="currentPage" class="form-control" ng-change="fetchWebsites()" style="width: 80px;">
|
||||
<option ng-repeat="page in pagination">{$ $index + 1 $}</option>
|
||||
</select>
|
||||
|
|
@ -604,7 +604,7 @@
|
|||
|
||||
<div style="margin-top: 1.5rem; text-align: right;">
|
||||
<div style="display: inline-flex; align-items: center; gap: 1rem;">
|
||||
<span style="color: #64748b; font-size: 0.875rem;">{% trans "Page" %}</span>
|
||||
<span style="color: var(--text-secondary, #64748b); font-size: 0.875rem;">{% trans "Page" %}</span>
|
||||
<select ng-model="currentPageLogs" class="form-control" ng-change="fetchLogs()" style="width: 80px;">
|
||||
<option ng-repeat="page in paginationLogs">{$ $index + 1 $}</option>
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -48,8 +48,8 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--text-inverse, white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -64,16 +64,16 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
|
||||
color: white;
|
||||
box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
|
||||
color: var(--text-inverse, white);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -87,15 +87,15 @@
|
|||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91, 95, 207, 0.2));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--text-inverse, white);
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
|
|
@ -109,31 +109,31 @@
|
|||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
|
||||
box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
|
||||
}
|
||||
|
||||
.main-card {
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
overflow: hidden;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -145,15 +145,15 @@
|
|||
}
|
||||
|
||||
.promo-banner {
|
||||
background: linear-gradient(135deg, #5b5fcf 0%, #8187ff 100%);
|
||||
color: white;
|
||||
background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
|
||||
color: var(--text-inverse, white);
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 4px 20px rgba(91, 95, 207, 0.3);
|
||||
box-shadow: 0 4px 20px var(--accent-shadow, rgba(91, 95, 207, 0.3));
|
||||
}
|
||||
|
||||
.promo-text {
|
||||
|
|
@ -162,8 +162,8 @@
|
|||
}
|
||||
|
||||
.promo-link {
|
||||
background: white;
|
||||
color: #5b5fcf;
|
||||
background: var(--bg-secondary, white);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
|
||||
.promo-link:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 4px 12px var(--shadow-dark, rgba(0,0,0,0.2));
|
||||
}
|
||||
|
||||
.form-section {
|
||||
|
|
@ -188,29 +188,29 @@
|
|||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
}
|
||||
|
||||
.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-focus, rgba(91, 95, 207, 0.1));
|
||||
}
|
||||
|
||||
.running-backup-card {
|
||||
background: #fef3c7;
|
||||
border: 1px solid #fde68a;
|
||||
background: var(--warning-bg, #fef3c7);
|
||||
border: 1px solid var(--warning-border, #fde68a);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
.status-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #fbbf24;
|
||||
background: var(--warning-color, #fbbf24);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -242,49 +242,49 @@
|
|||
|
||||
.status-details h4 {
|
||||
margin: 0;
|
||||
color: #92400e;
|
||||
color: var(--warning-text, #92400e);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.status-details p {
|
||||
margin: 0;
|
||||
color: #92400e;
|
||||
color: var(--warning-text, #92400e);
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.backup-table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.backup-table thead {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
}
|
||||
|
||||
.backup-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.backup-table td {
|
||||
padding: 1rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
border-bottom: 1px solid var(--border-light, #f3f4f6);
|
||||
}
|
||||
|
||||
.backup-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.backup-table tbody tr:last-child td {
|
||||
|
|
@ -292,8 +292,8 @@
|
|||
}
|
||||
|
||||
.file-badge {
|
||||
background: #e0e7ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -302,8 +302,8 @@
|
|||
}
|
||||
|
||||
.size-badge {
|
||||
background: #f3f4f6;
|
||||
color: #1e293b;
|
||||
background: var(--border-light, #f3f4f6);
|
||||
color: var(--text-primary, #1e293b);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -311,8 +311,8 @@
|
|||
}
|
||||
|
||||
.status-complete {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -332,22 +332,22 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #e8e9ff;
|
||||
border-top-color: #5b5fcf;
|
||||
border: 3px solid var(--border-color, #e8e9ff);
|
||||
border-top-color: var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -578,7 +578,7 @@
|
|||
<span class="file-badge" ng-bind="record.file"></span>
|
||||
</td>
|
||||
<td>
|
||||
<i class="fas fa-calendar-alt" style="color: #64748b; margin-right: 0.5rem;"></i>
|
||||
<i class="fas fa-calendar-alt" style="color: var(--text-secondary, #64748b); margin-right: 0.5rem;"></i>
|
||||
<span ng-bind="record.date"></span>
|
||||
</td>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -48,8 +48,8 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -64,16 +64,16 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
|
||||
color: white;
|
||||
box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -87,15 +87,15 @@
|
|||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91, 95, 207, 0.2));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
|
|
@ -109,21 +109,21 @@
|
|||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
|
||||
box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
|
||||
}
|
||||
|
||||
.promo-banner {
|
||||
background: linear-gradient(135deg, #5b5fcf 0%, #8187ff 100%);
|
||||
color: white;
|
||||
background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
|
||||
color: var(--bg-secondary, white);
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 4px 20px rgba(91, 95, 207, 0.3);
|
||||
box-shadow: 0 4px 20px var(--accent-shadow, rgba(91, 95, 207, 0.3));
|
||||
}
|
||||
|
||||
.promo-text {
|
||||
|
|
@ -132,8 +132,8 @@
|
|||
}
|
||||
|
||||
.promo-link {
|
||||
background: white;
|
||||
color: #5b5fcf;
|
||||
background: var(--bg-secondary, white);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
|
|
@ -143,29 +143,29 @@
|
|||
|
||||
.promo-link:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 4px 12px var(--shadow-dark, rgba(0,0,0,0.2));
|
||||
}
|
||||
|
||||
.main-card {
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
overflow: hidden;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -177,8 +177,8 @@
|
|||
}
|
||||
|
||||
.destination-type-selector {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -194,24 +194,24 @@
|
|||
|
||||
.tab-button {
|
||||
padding: 0.75rem 2rem;
|
||||
background: #fff;
|
||||
border: 2px solid #e8e9ff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
border: 2px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.tab-button:hover:not(.active) {
|
||||
border-color: #5b5fcf;
|
||||
color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.form-section {
|
||||
|
|
@ -226,59 +226,59 @@
|
|||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
}
|
||||
|
||||
.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-focus, rgba(91, 95, 207, 0.1));
|
||||
}
|
||||
|
||||
.destination-table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.destination-table thead {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
}
|
||||
|
||||
.destination-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.destination-table td {
|
||||
padding: 1rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
border-bottom: 1px solid var(--border-light, #f3f4f6);
|
||||
}
|
||||
|
||||
.destination-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.destination-table tbody tr:last-child td {
|
||||
|
|
@ -288,8 +288,8 @@
|
|||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #e8e9ff;
|
||||
border-top-color: #5b5fcf;
|
||||
border: 3px solid var(--border-color, #e8e9ff);
|
||||
border-top-color: var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -297,8 +297,8 @@
|
|||
}
|
||||
|
||||
.info-badge {
|
||||
background: #e0e7ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -307,8 +307,8 @@
|
|||
}
|
||||
|
||||
.port-badge {
|
||||
background: #f3f4f6;
|
||||
color: #1e293b;
|
||||
background: var(--border-light, #f3f4f6);
|
||||
color: var(--text-primary, #1e293b);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -317,7 +317,7 @@
|
|||
|
||||
.destination-icon {
|
||||
font-size: 2.5rem;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -440,8 +440,8 @@
|
|||
|
||||
<!-- SFTP Configuration -->
|
||||
<div ng-hide="sftpHide" class="form-section">
|
||||
<h3 style="font-size: 1.1rem; font-weight: 600; color: #1e293b; margin-bottom: 1.5rem;">
|
||||
<i class="fas fa-network-wired" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
|
||||
<h3 style="font-size: 1.1rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 1.5rem;">
|
||||
<i class="fas fa-network-wired" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
|
||||
{% trans "SFTP Server Configuration" %}
|
||||
</h3>
|
||||
|
||||
|
|
@ -502,8 +502,8 @@
|
|||
|
||||
<!-- Local Configuration -->
|
||||
<div ng-hide="localHide" class="form-section">
|
||||
<h3 style="font-size: 1.1rem; font-weight: 600; color: #1e293b; margin-bottom: 1.5rem;">
|
||||
<i class="fas fa-hdd" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
|
||||
<h3 style="font-size: 1.1rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 1.5rem;">
|
||||
<i class="fas fa-hdd" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
|
||||
{% trans "Local Storage Configuration" %}
|
||||
</h3>
|
||||
|
||||
|
|
@ -565,11 +565,11 @@
|
|||
<span class="info-badge" ng-bind="record.ip"></span>
|
||||
</td>
|
||||
<td>
|
||||
<i class="fas fa-user" style="color: #64748b; margin-right: 0.5rem;"></i>
|
||||
<i class="fas fa-user" style="color: var(--text-secondary, #64748b); margin-right: 0.5rem;"></i>
|
||||
<span ng-bind="record.username"></span>
|
||||
</td>
|
||||
<td>
|
||||
<i class="fas fa-folder" style="color: #64748b; margin-right: 0.5rem;"></i>
|
||||
<i class="fas fa-folder" style="color: var(--text-secondary, #64748b); margin-right: 0.5rem;"></i>
|
||||
<span ng-bind="record.path"></span>
|
||||
</td>
|
||||
<td>
|
||||
|
|
@ -614,8 +614,8 @@
|
|||
<strong ng-bind="record.name"></strong>
|
||||
</td>
|
||||
<td>
|
||||
<i class="fas fa-folder-open" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
|
||||
<span style="font-family: monospace; background: #f3f4f6; padding: 0.25rem 0.5rem; border-radius: 4px;"
|
||||
<i class="fas fa-folder-open" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
|
||||
<span style="font-family: monospace; background: var(--border-light, #f3f4f6); padding: 0.25rem 0.5rem; border-radius: 4px;"
|
||||
ng-bind="record.path"></span>
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -48,8 +48,8 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -64,16 +64,16 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
|
||||
color: white;
|
||||
box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -87,15 +87,15 @@
|
|||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91, 95, 207, 0.2));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
|
|
@ -109,9 +109,9 @@
|
|||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
|
||||
box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
|
||||
}
|
||||
|
||||
.btn-gray {
|
||||
|
|
@ -136,25 +136,25 @@
|
|||
}
|
||||
|
||||
.main-card {
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
overflow: hidden;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -177,29 +177,29 @@
|
|||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
}
|
||||
|
||||
.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-focus, rgba(91, 95, 207, 0.1));
|
||||
}
|
||||
|
||||
.schedule-info-card {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -207,36 +207,36 @@
|
|||
|
||||
.schedule-table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.schedule-table thead {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
}
|
||||
|
||||
.schedule-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.schedule-table td {
|
||||
padding: 1rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
border-bottom: 1px solid var(--border-light, #f3f4f6);
|
||||
}
|
||||
|
||||
.schedule-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.schedule-table tbody tr:last-child td {
|
||||
|
|
@ -244,8 +244,8 @@
|
|||
}
|
||||
|
||||
.status-badge {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -255,8 +255,8 @@
|
|||
}
|
||||
|
||||
.frequency-badge {
|
||||
background: #e0e7ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -266,8 +266,8 @@
|
|||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #e8e9ff;
|
||||
border-top-color: #5b5fcf;
|
||||
border: 3px solid var(--border-color, #e8e9ff);
|
||||
border-top-color: var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -281,8 +281,8 @@
|
|||
}
|
||||
|
||||
.job-selector {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -296,15 +296,15 @@
|
|||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -314,7 +314,7 @@
|
|||
|
||||
.log-table {
|
||||
width: 100%;
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -324,20 +324,20 @@
|
|||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.log-table td {
|
||||
padding: 0.75rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.log-type {
|
||||
font-weight: 600;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
|
@ -545,7 +545,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i class="fas fa-calendar-check" style="color: #5b5fcf; margin-right: 0.5rem;"></i>{$ lastRun $}</td>
|
||||
<td><i class="fas fa-calendar-check" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>{$ lastRun $}</td>
|
||||
<td><span class="frequency-badge">{$ allSites $}</span></td>
|
||||
<td>
|
||||
<select ng-change="changeFrequency()" ng-model="backupFrequency"
|
||||
|
|
@ -623,7 +623,7 @@
|
|||
<tbody>
|
||||
<tr ng-repeat="website in websites track by $index">
|
||||
<td>
|
||||
<i class="fas fa-globe" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
|
||||
<i class="fas fa-globe" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
|
||||
<strong ng-bind="website.name"></strong>
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.875rem 2.25rem;
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
|
||||
color: white;
|
||||
|
|
@ -80,8 +80,8 @@
|
|||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 0.875rem 2.25rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -95,16 +95,16 @@
|
|||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #5b5fcf;
|
||||
border: 2px solid #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 2px solid var(--accent-color, #5b5fcf);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
|
||||
|
|
@ -128,22 +128,22 @@
|
|||
background: 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;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
.section-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 0.5rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #5b5fcf 0%, #8187ff 100%);
|
||||
background: linear-gradient(90deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -192,27 +192,27 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
border: 1px solid #bfdbfe;
|
||||
background: var(--info-bg, #dbeafe);
|
||||
color: var(--info-text, #1e40af);
|
||||
border: 1px solid var(--info-border, #bfdbfe);
|
||||
}
|
||||
|
||||
.fetch-plans-section {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
background: linear-gradient(135deg, #5b5fcf 0%, #8187ff 100%);
|
||||
background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
|
||||
border-radius: 20px;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
|
||||
.fetch-plans-btn {
|
||||
background: white;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 1rem 3rem;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
|
|
@ -263,14 +263,14 @@
|
|||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -288,34 +288,34 @@
|
|||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.data-table thead {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 1.125rem;
|
||||
color: #475569;
|
||||
color: var(--text-secondary, #475569);
|
||||
font-size: 1.125rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
border-bottom: 1px solid var(--border-light, #f3f4f6);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.data-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.data-table tbody tr:last-child td {
|
||||
|
|
@ -335,13 +335,13 @@
|
|||
}
|
||||
|
||||
.status-badge.active {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
}
|
||||
|
||||
.status-badge.inactive {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
}
|
||||
|
||||
.plan-grid {
|
||||
|
|
@ -355,7 +355,7 @@
|
|||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
border: 2px solid #e8e9ff;
|
||||
border: 2px solid var(--border-color, #e8e9ff);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -364,12 +364,12 @@
|
|||
.plan-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.plan-card.featured {
|
||||
border-color: #5b5fcf;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-secondary, #fff) 100%);
|
||||
}
|
||||
|
||||
.plan-card.featured::before {
|
||||
|
|
@ -377,7 +377,7 @@
|
|||
position: absolute;
|
||||
top: 20px;
|
||||
right: -30px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: white;
|
||||
padding: 0.25rem 3rem;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -394,19 +394,19 @@
|
|||
.plan-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.plan-storage {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.price-container {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -416,18 +416,18 @@
|
|||
.price-amount {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.price-currency {
|
||||
font-size: 1.5rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.price-period {
|
||||
font-size: 1rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -615,7 +615,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="sub in subscriptions">
|
||||
<td><code style="background: #f3f4f6; padding: 0.25rem 0.5rem; border-radius: 4px;">{$ sub.subscription_id $}</code></td>
|
||||
<td><code style="background: var(--border-light, #f3f4f6); padding: 0.25rem 0.5rem; border-radius: 4px;">{$ sub.subscription_id $}</code></td>
|
||||
<td>
|
||||
<span class="status-badge"
|
||||
ng-class="{'active': sub.status === 'active', 'inactive': sub.status !== 'active'}">
|
||||
|
|
@ -682,13 +682,13 @@
|
|||
{% for plan in bPlans %}
|
||||
<tr>
|
||||
<td>
|
||||
<i class="fas fa-user-circle" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
|
||||
<i class="fas fa-user-circle" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
|
||||
{{ plan.sftpUser }}
|
||||
</td>
|
||||
<td><strong>{{ plan.planName }}</strong></td>
|
||||
<td>{{ plan.subscription }}</td>
|
||||
<td>
|
||||
<span style="background: #e0e7ff; color: #5b5fcf; padding: 0.375rem 1rem; border-radius: 20px; font-size: 1rem; font-weight: 500;">
|
||||
<span style="background: var(--accent-bg, #e0e7ff); color: var(--accent-color, #5b5fcf); padding: 0.375rem 1rem; border-radius: 20px; font-size: 1rem; font-weight: 500;">
|
||||
{% if plan.months == '1' %}
|
||||
${{ plan.price }}/month
|
||||
{% else %}
|
||||
|
|
@ -744,7 +744,7 @@
|
|||
<span class="price-amount">{{ plans.0.monthlyPrice }}</span>
|
||||
<span class="price-period">/month</span>
|
||||
</div>
|
||||
<div class="price-container" style="background: #e0e7ff;">
|
||||
<div class="price-container" style="background: var(--accent-bg, #e0e7ff);">
|
||||
<span class="price-currency">$</span>
|
||||
<span class="price-amount">{{ plans.0.yearlyPrice }}</span>
|
||||
<span class="price-period">/year</span>
|
||||
|
|
@ -769,7 +769,7 @@
|
|||
<span class="price-amount">{{ plans.1.monthlyPrice }}</span>
|
||||
<span class="price-period">/month</span>
|
||||
</div>
|
||||
<div class="price-container" style="background: #e0e7ff;">
|
||||
<div class="price-container" style="background: var(--accent-bg, #e0e7ff);">
|
||||
<span class="price-currency">$</span>
|
||||
<span class="price-amount">{{ plans.1.yearlyPrice }}</span>
|
||||
<span class="price-period">/year</span>
|
||||
|
|
@ -800,7 +800,7 @@
|
|||
<span class="price-amount">{{ plans.2.monthlyPrice }}</span>
|
||||
<span class="price-period">/month</span>
|
||||
</div>
|
||||
<div class="price-container" style="background: #e0e7ff;">
|
||||
<div class="price-container" style="background: var(--accent-bg, #e0e7ff);">
|
||||
<span class="price-currency">$</span>
|
||||
<span class="price-amount">{{ plans.2.yearlyPrice }}</span>
|
||||
<span class="price-period">/year</span>
|
||||
|
|
@ -831,7 +831,7 @@
|
|||
<span class="price-amount">{{ plans.3.monthlyPrice }}</span>
|
||||
<span class="price-period">/month</span>
|
||||
</div>
|
||||
<div class="price-container" style="background: #e0e7ff;">
|
||||
<div class="price-container" style="background: var(--accent-bg, #e0e7ff);">
|
||||
<span class="price-currency">$</span>
|
||||
<span class="price-amount">{{ plans.3.yearlyPrice }}</span>
|
||||
<span class="price-period">/year</span>
|
||||
|
|
@ -862,7 +862,7 @@
|
|||
<span class="price-amount">{{ plans.4.monthlyPrice }}</span>
|
||||
<span class="price-period">/month</span>
|
||||
</div>
|
||||
<div class="price-container" style="background: #e0e7ff;">
|
||||
<div class="price-container" style="background: var(--accent-bg, #e0e7ff);">
|
||||
<span class="price-currency">$</span>
|
||||
<span class="price-amount">{{ plans.4.yearlyPrice }}</span>
|
||||
<span class="price-period">/year</span>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -67,8 +67,8 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -83,23 +83,23 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
|
||||
color: white;
|
||||
box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #cbd5e1;
|
||||
background: var(--text-secondary, #cbd5e1);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -113,15 +113,15 @@
|
|||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91, 95, 207, 0.2));
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
background: var(--success-color, #10b981);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -135,14 +135,14 @@
|
|||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: #059669;
|
||||
background: var(--success-hover, #059669);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -156,31 +156,31 @@
|
|||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
|
||||
box-shadow: 0 8px 20px var(--danger-shadow, rgba(239, 68, 68, 0.4));
|
||||
}
|
||||
|
||||
.main-card {
|
||||
background: 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;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -203,23 +203,23 @@
|
|||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -234,15 +234,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
}
|
||||
|
||||
.alert p {
|
||||
|
|
@ -256,34 +256,34 @@
|
|||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.remote-table thead {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
}
|
||||
|
||||
.remote-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.remote-table td {
|
||||
padding: 1rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
border-bottom: 1px solid var(--border-light, #f3f4f6);
|
||||
}
|
||||
|
||||
.remote-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.remote-table tbody tr:last-child td {
|
||||
|
|
@ -300,7 +300,7 @@
|
|||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: #5b5fcf;
|
||||
accent-color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.search-box {
|
||||
|
|
@ -313,28 +313,28 @@
|
|||
left: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
color: var(--text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem 0.875rem 3rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
|
||||
background: #fff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
}
|
||||
|
||||
.terminal-section {
|
||||
background: #1e293b;
|
||||
background: var(--text-primary, #1e293b);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
margin-top: 2rem;
|
||||
|
|
@ -342,7 +342,7 @@
|
|||
}
|
||||
|
||||
.terminal-header {
|
||||
background: #334155;
|
||||
background: var(--text-secondary, #334155);
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -350,7 +350,7 @@
|
|||
}
|
||||
|
||||
.terminal-title {
|
||||
color: #e2e8f0;
|
||||
color: var(--bg-secondary, #e2e8f0);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
|
|
@ -370,15 +370,15 @@
|
|||
}
|
||||
|
||||
.terminal-dot.red {
|
||||
background: #ef4444;
|
||||
background: var(--danger-color, #ef4444);
|
||||
}
|
||||
|
||||
.terminal-dot.yellow {
|
||||
background: #f59e0b;
|
||||
background: var(--warning-color, #f59e0b);
|
||||
}
|
||||
|
||||
.terminal-dot.green {
|
||||
background: #10b981;
|
||||
background: var(--success-color, #10b981);
|
||||
}
|
||||
|
||||
.terminal-body {
|
||||
|
|
@ -388,7 +388,7 @@
|
|||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
color: #e2e8f0;
|
||||
color: var(--bg-secondary, #e2e8f0);
|
||||
}
|
||||
|
||||
.terminal-grid {
|
||||
|
|
@ -408,8 +408,8 @@
|
|||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #e8e9ff;
|
||||
border-top-color: #5b5fcf;
|
||||
border: 3px solid var(--border-color, #e8e9ff);
|
||||
border-top-color: var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -417,8 +417,8 @@
|
|||
}
|
||||
|
||||
.php-badge {
|
||||
background: #e0e7ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -426,8 +426,8 @@
|
|||
}
|
||||
|
||||
.package-badge {
|
||||
background: #f3f4f6;
|
||||
color: #1e293b;
|
||||
background: var(--border-light, #f3f4f6);
|
||||
color: var(--text-primary, #1e293b);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -618,7 +618,7 @@
|
|||
<tbody>
|
||||
<tr ng-repeat="record in records | filter:accountsSearch">
|
||||
<td>
|
||||
<i class="fas fa-globe" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
|
||||
<i class="fas fa-globe" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
|
||||
<strong ng-bind="record.website"></strong>
|
||||
</td>
|
||||
<td>
|
||||
|
|
@ -628,7 +628,7 @@
|
|||
<span class="package-badge" ng-bind="record.package"></span>
|
||||
</td>
|
||||
<td>
|
||||
<i class="fas fa-envelope" style="color: #94a3b8; margin-right: 0.5rem;"></i>
|
||||
<i class="fas fa-envelope" style="color: var(--text-secondary, #94a3b8); margin-right: 0.5rem;"></i>
|
||||
<span ng-bind="record.email"></span>
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
|
|
@ -674,13 +674,13 @@
|
|||
<div class="terminal-body">
|
||||
<div class="terminal-grid">
|
||||
<div>
|
||||
<h4 style="color: #94a3b8; margin-bottom: 1rem; font-size: 0.875rem;">
|
||||
<h4 style="color: var(--text-secondary, #94a3b8); margin-bottom: 1rem; font-size: 0.875rem;">
|
||||
{% trans "Backup Progress" %}
|
||||
</h4>
|
||||
<div ng-bind="requestData" style="white-space: pre-wrap;"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 style="color: #94a3b8; margin-bottom: 1rem; font-size: 0.875rem;">
|
||||
<h4 style="color: var(--text-secondary, #94a3b8); margin-bottom: 1rem; font-size: 0.875rem;">
|
||||
{% trans "Restore Progress" %}
|
||||
</h4>
|
||||
<div ng-bind="restoreData" style="white-space: pre-wrap;"></div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
|
||||
.page-subtitle strong {
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.875rem 2.25rem;
|
||||
|
|
@ -78,14 +78,14 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #d1d5db;
|
||||
background: var(--text-secondary, #d1d5db);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -93,8 +93,8 @@
|
|||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 0.875rem 2.25rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -108,8 +108,8 @@
|
|||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
|
||||
}
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
background: 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;
|
||||
|
|
@ -128,15 +128,15 @@
|
|||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -157,14 +157,14 @@
|
|||
.form-label {
|
||||
flex: 0 0 150px;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
flex: 1;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-size: 1.125rem;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -173,21 +173,21 @@
|
|||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
margin-top: 2rem;
|
||||
padding: 2rem;
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
background: #e0f2fe;
|
||||
border: 1px solid #7dd3fc;
|
||||
color: #0369a1;
|
||||
background: var(--info-bg, #e0f2fe);
|
||||
border: 1px solid var(--info-border, #7dd3fc);
|
||||
color: var(--info-text, #0369a1);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
}
|
||||
|
||||
.progress-wrapper {
|
||||
background: #e2e8f0;
|
||||
background: var(--border-light, #e2e8f0);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
height: 24px;
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
}
|
||||
|
||||
.progress-bar {
|
||||
background: linear-gradient(90deg, #5b5fcf 0%, #8187ff 100%);
|
||||
background: linear-gradient(90deg, var(--accent-color, #5b5fcf) 0%, var(--accent-light, #8187ff) 100%);
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
transition: width 0.3s ease;
|
||||
|
|
@ -228,15 +228,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
}
|
||||
|
||||
.alert i {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
|
|
@ -32,14 +32,14 @@
|
|||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
|
||||
background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -52,17 +52,17 @@
|
|||
.docker-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 12px var(--shadow-medium, rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -78,8 +78,8 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -94,16 +94,16 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
|
||||
color: white;
|
||||
box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -117,26 +117,26 @@
|
|||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
|
||||
}
|
||||
|
||||
.main-card {
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
overflow: hidden;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -163,8 +163,8 @@
|
|||
}
|
||||
|
||||
.image-card {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -179,15 +179,15 @@
|
|||
right: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(135deg, rgba(91, 95, 207, 0.1) 0%, transparent 100%);
|
||||
background: linear-gradient(135deg, var(--accent-focus, rgba(91, 95, 207, 0.1)) 0%, transparent 100%);
|
||||
border-radius: 0 0 0 100%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.image-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.15);
|
||||
border-color: #5b5fcf;
|
||||
box-shadow: 0 8px 20px var(--accent-shadow-light, rgba(91, 95, 207, 0.15));
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.image-card:hover::before {
|
||||
|
|
@ -205,13 +205,13 @@
|
|||
.image-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
color: #5b5fcf;
|
||||
box-shadow: 0 2px 8px var(--shadow-medium, rgba(0,0,0,0.1));
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -222,14 +222,14 @@
|
|||
.image-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.image-subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
|
|
@ -240,7 +240,7 @@
|
|||
.tag-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -250,10 +250,10 @@
|
|||
.tag-select {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
color: #1e293b;
|
||||
background: var(--bg-secondary, white);
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
|
@ -261,8 +261,8 @@
|
|||
|
||||
.tag-select: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-focus, rgba(91, 95, 207, 0.1));
|
||||
}
|
||||
|
||||
.image-actions {
|
||||
|
|
@ -289,25 +289,25 @@
|
|||
}
|
||||
|
||||
.action-btn.create {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.action-btn.create:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
|
||||
}
|
||||
|
||||
.action-btn.details {
|
||||
background: white;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, white);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.action-btn.details:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
|
@ -319,25 +319,25 @@
|
|||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -345,7 +345,7 @@
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #e8e9ff;
|
||||
border-top-color: #5b5fcf;
|
||||
border-top-color: var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -363,8 +363,8 @@
|
|||
}
|
||||
|
||||
.badge-count {
|
||||
background: #e0e7ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
|
@ -423,7 +423,7 @@
|
|||
<div class="page-header">
|
||||
<h1 class="page-title">
|
||||
<div class="docker-icon">
|
||||
<i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
|
||||
<i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
|
||||
</div>
|
||||
{% trans "Docker Images" %}
|
||||
</h1>
|
||||
|
|
@ -515,32 +515,32 @@
|
|||
</div>
|
||||
<div class="card-body">
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
|
||||
<div style="background: #f8f9ff; padding: 1rem; border-radius: 8px; border-left: 4px solid #5b5fcf;">
|
||||
<h4 style="font-size: 0.875rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem;">
|
||||
<i class="fas fa-tag" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
|
||||
<div style="background: var(--bg-hover, #f8f9ff); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--accent-color, #5b5fcf);">
|
||||
<h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">
|
||||
<i class="fas fa-tag" style="color: var(--accent-color, #5b5fcf); margin-right: 0.5rem;"></i>
|
||||
{% trans "About Tags" %}
|
||||
</h4>
|
||||
<p style="font-size: 0.8125rem; color: #64748b; margin: 0;">
|
||||
<p style="font-size: 0.8125rem; color: var(--text-secondary, #64748b); margin: 0;">
|
||||
{% trans "Tags represent different versions of an image. 'latest' is the most recent stable version." %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="background: #f8f9ff; padding: 1rem; border-radius: 8px; border-left: 4px solid #10b981;">
|
||||
<h4 style="font-size: 0.875rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem;">
|
||||
<i class="fas fa-memory" style="color: #10b981; margin-right: 0.5rem;"></i>
|
||||
<div style="background: var(--bg-hover, #f8f9ff); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--success-color, #10b981);">
|
||||
<h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">
|
||||
<i class="fas fa-memory" style="color: var(--success-color, #10b981); margin-right: 0.5rem;"></i>
|
||||
{% trans "Container Resources" %}
|
||||
</h4>
|
||||
<p style="font-size: 0.8125rem; color: #64748b; margin: 0;">
|
||||
<p style="font-size: 0.8125rem; color: var(--text-secondary, #64748b); margin: 0;">
|
||||
{% trans "You can set memory limits and other resources when creating a container." %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="background: #f8f9ff; padding: 1rem; border-radius: 8px; border-left: 4px solid #f59e0b;">
|
||||
<h4 style="font-size: 0.875rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem;">
|
||||
<i class="fas fa-network-wired" style="color: #f59e0b; margin-right: 0.5rem;"></i>
|
||||
<div style="background: var(--bg-hover, #f8f9ff); padding: 1rem; border-radius: 8px; border-left: 4px solid var(--warning-color, #f59e0b);">
|
||||
<h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">
|
||||
<i class="fas fa-network-wired" style="color: var(--warning-color, #f59e0b); margin-right: 0.5rem;"></i>
|
||||
{% trans "Port Mapping" %}
|
||||
</h4>
|
||||
<p style="font-size: 0.8125rem; color: #64748b; margin: 0;">
|
||||
<p style="font-size: 0.8125rem; color: var(--text-secondary, #64748b); margin: 0;">
|
||||
{% trans "Configure port mappings to access services running inside containers." %}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
|
|
@ -32,14 +32,14 @@
|
|||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
|
||||
background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -52,17 +52,17 @@
|
|||
.docker-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 12px var(--shadow-medium, rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -78,8 +78,8 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -94,15 +94,15 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
|
||||
color: white;
|
||||
box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
|
|
@ -117,14 +117,14 @@
|
|||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
|
||||
box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
background: var(--info-color, #3b82f6);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
|
|
@ -139,14 +139,14 @@
|
|||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background: #2563eb;
|
||||
background: var(--info-hover, #2563eb);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
||||
box-shadow: 0 4px 12px var(--info-shadow, rgba(59, 130, 246, 0.4));
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
background: var(--success-color, #10b981);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
|
|
@ -167,19 +167,19 @@
|
|||
}
|
||||
|
||||
.main-card {
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
overflow: hidden;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -201,33 +201,33 @@
|
|||
|
||||
.containers-table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.containers-table thead {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
}
|
||||
|
||||
.containers-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 2px solid #e8e9ff;
|
||||
border-bottom: 2px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.containers-table td {
|
||||
padding: 1rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
border-bottom: 1px solid var(--border-light, #f3f4f6);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
}
|
||||
|
||||
.containers-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.containers-table tbody tr:last-child td {
|
||||
|
|
@ -252,13 +252,13 @@
|
|||
.container-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #e0e7ff;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.875rem;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
|
|
@ -271,8 +271,8 @@
|
|||
}
|
||||
|
||||
.status-running {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
}
|
||||
|
||||
.status-stopped {
|
||||
|
|
@ -290,7 +290,7 @@
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #e8e9ff;
|
||||
border-top-color: #5b5fcf;
|
||||
border-top-color: var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -320,37 +320,37 @@
|
|||
.pagination li a {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pagination li a:hover {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -359,8 +359,8 @@
|
|||
}
|
||||
|
||||
.modal-footer {
|
||||
background: #f8f9ff;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-top: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -378,19 +378,19 @@
|
|||
}
|
||||
|
||||
.modal-footer .btn.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.modal-footer .btn.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
|
||||
}
|
||||
|
||||
.modal-footer .btn.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
color: var(--bg-secondary, white);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -474,7 +474,7 @@
|
|||
<div class="page-header">
|
||||
<h1 class="page-title">
|
||||
<div class="docker-icon">
|
||||
<i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
|
||||
<i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
|
||||
</div>
|
||||
{% trans "Container Management" %}
|
||||
</h1>
|
||||
|
|
@ -635,7 +635,7 @@
|
|||
{% trans "Container Logs" %}
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
style="font-size: 1.5rem; background: none; border: none;">×</button>
|
||||
style="font-size: 1.5rem; background: transparent; border: none;">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<textarea name="logs" class="form-control" style="font-family: monospace; height: 400px; resize: vertical;"
|
||||
|
|
@ -665,15 +665,15 @@
|
|||
{% trans "Assign Container to User" %}
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
style="font-size: 1.5rem; background: none; border: none;">×</button>
|
||||
style="font-size: 1.5rem; background: transparent; border: none;">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: #1e293b;">
|
||||
<label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-primary, #1e293b);">
|
||||
{% trans "Select Owner" %}
|
||||
</label>
|
||||
<select ng-model="dockerOwner" class="form-control"
|
||||
style="width: 100%; padding: 0.75rem; border: 1px solid #e8e9ff; border-radius: 8px;">
|
||||
style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-color, #e8e9ff); border-radius: 8px;">
|
||||
{% for user in adminNames %}
|
||||
<option>{{user}}</option>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
|
|
@ -32,14 +32,14 @@
|
|||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
|
||||
background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -52,17 +52,17 @@
|
|||
.docker-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 12px var(--shadow-medium, rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -78,8 +78,8 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -94,16 +94,16 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(91, 95, 207, 0.4);
|
||||
color: white;
|
||||
box-shadow: 0 8px 20px var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -117,15 +117,15 @@
|
|||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
background: var(--warning-color, #f59e0b);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -139,14 +139,14 @@
|
|||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: #d97706;
|
||||
background: var(--warning-hover, #d97706);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
|
||||
box-shadow: 0 8px 20px var(--warning-shadow, rgba(245, 158, 11, 0.4));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
|
|
@ -160,14 +160,14 @@
|
|||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
|
||||
box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.4));
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
background: var(--info-color, #3b82f6);
|
||||
color: var(--bg-secondary, white);
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
|
|
@ -181,25 +181,25 @@
|
|||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background: #2563eb;
|
||||
background: var(--info-hover, #2563eb);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
||||
box-shadow: 0 4px 12px var(--info-shadow, rgba(59, 130, 246, 0.4));
|
||||
}
|
||||
|
||||
.main-card {
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
overflow: hidden;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -208,7 +208,7 @@
|
|||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -220,8 +220,8 @@
|
|||
}
|
||||
|
||||
.search-section {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -235,55 +235,55 @@
|
|||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 10px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
}
|
||||
|
||||
.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-focus, rgba(91, 95, 207, 0.1));
|
||||
}
|
||||
|
||||
.images-table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.images-table thead {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
}
|
||||
|
||||
.images-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 2px solid #e8e9ff;
|
||||
border-bottom: 2px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.images-table td {
|
||||
padding: 1rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
border-bottom: 1px solid var(--border-light, #f3f4f6);
|
||||
}
|
||||
|
||||
.images-table tbody tr {
|
||||
|
|
@ -291,7 +291,7 @@
|
|||
}
|
||||
|
||||
.images-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.images-table tbody tr:last-child td {
|
||||
|
|
@ -307,18 +307,18 @@
|
|||
.image-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #e0e7ff;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.875rem;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.official-badge {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -338,7 +338,7 @@
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #e8e9ff;
|
||||
border-top-color: #5b5fcf;
|
||||
border-top-color: var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -349,19 +349,19 @@
|
|||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -370,32 +370,32 @@
|
|||
}
|
||||
|
||||
.modal-footer {
|
||||
background: #f8f9ff;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-top: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.history-table {
|
||||
width: 100%;
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.history-table th {
|
||||
background: #e8e9ff;
|
||||
background: var(--border-color, #e8e9ff);
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.history-table td {
|
||||
padding: 0.75rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
|
|
@ -458,7 +458,7 @@
|
|||
<div class="page-header">
|
||||
<h1 class="page-title">
|
||||
<div class="docker-icon">
|
||||
<i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
|
||||
<i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
|
||||
</div>
|
||||
{% trans "Manage Docker Images" %}
|
||||
</h1>
|
||||
|
|
@ -611,7 +611,7 @@
|
|||
{% trans "Image History" %}
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
style="font-size: 1.5rem; background: none; border: none;">×</button>
|
||||
style="font-size: 1.5rem; background: transparent; border: none;">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<table class="history-table">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
|
||||
background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
.page-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -55,12 +55,12 @@
|
|||
.docker-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 12px var(--shadow-medium, rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.image-info {
|
||||
|
|
@ -70,12 +70,12 @@
|
|||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
font-size: 1.125rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.image-badge {
|
||||
background: #e0e7ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
left: 60px;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #e8e9ff;
|
||||
background: var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.progress-step:last-child::after {
|
||||
|
|
@ -115,12 +115,12 @@
|
|||
.step-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #e8e9ff;
|
||||
background: var(--border-color, #e8e9ff);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -128,40 +128,40 @@
|
|||
}
|
||||
|
||||
.progress-step.active .step-icon {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
box-shadow: 0 0 0 4px rgba(91, 95, 207, 0.2);
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
box-shadow: 0 0 0 4px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
|
||||
}
|
||||
|
||||
.progress-step.completed .step-icon {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
background: var(--success-color, #10b981);
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.step-label {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.progress-step.active .step-label {
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.form-section:last-child {
|
||||
|
|
@ -178,24 +178,24 @@
|
|||
.section-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #e0e7ff;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
|
|
@ -209,7 +209,7 @@
|
|||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -217,29 +217,29 @@
|
|||
}
|
||||
|
||||
.required-star {
|
||||
color: #ef4444;
|
||||
color: var(--danger-color, #ef4444);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
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-secondary, #fff);
|
||||
}
|
||||
|
||||
.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-focus, rgba(91, 95, 207, 0.1));
|
||||
}
|
||||
|
||||
.form-control:disabled {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
cursor: not-allowed;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
|
|
@ -250,7 +250,7 @@
|
|||
|
||||
.input-addon {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -261,19 +261,19 @@
|
|||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.port-arrow {
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.port-label {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -281,7 +281,7 @@
|
|||
}
|
||||
|
||||
.dynamic-section {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
|
|
@ -297,7 +297,7 @@
|
|||
.dynamic-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -309,9 +309,9 @@
|
|||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -328,31 +328,31 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, white);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #fee2e2;
|
||||
color: #ef4444;
|
||||
color: var(--danger-color, #ef4444);
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
|
|
@ -362,8 +362,8 @@
|
|||
}
|
||||
|
||||
.btn-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
border: 1px solid #a7f3d0;
|
||||
}
|
||||
|
||||
|
|
@ -382,8 +382,8 @@
|
|||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding: 2rem;
|
||||
background: #f8f9ff;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-top: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.status-message {
|
||||
|
|
@ -404,8 +404,8 @@
|
|||
}
|
||||
|
||||
.status-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
}
|
||||
|
||||
.status-error {
|
||||
|
|
@ -416,12 +416,12 @@
|
|||
.status-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
|
@ -429,7 +429,7 @@
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #e8e9ff;
|
||||
border-top-color: #5b5fcf;
|
||||
border-top-color: var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto;
|
||||
|
|
@ -441,7 +441,7 @@
|
|||
}
|
||||
|
||||
.tooltip-icon {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
|
@ -455,8 +455,8 @@
|
|||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
background: var(--text-primary, #1e293b);
|
||||
color: var(--bg-secondary, white);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -471,7 +471,7 @@
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #1e293b;
|
||||
border-top-color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
|
@ -544,7 +544,7 @@
|
|||
<div class="header-content">
|
||||
<h1 class="page-title">
|
||||
<div class="docker-icon">
|
||||
<i class="fab fa-docker" style="color: #5b5fcf; font-size: 1.75rem;"></i>
|
||||
<i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
|
||||
</div>
|
||||
{% trans "Create New Container" %}
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.15) 0%, transparent 50%);
|
||||
background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
|
|
@ -49,12 +49,12 @@
|
|||
.container-icon-large {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 8px 24px var(--shadow-medium, rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.container-title-section {
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
.container-name {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
|
||||
.container-id {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-top: 0.5rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
|
@ -101,8 +101,8 @@
|
|||
}
|
||||
|
||||
.status-running {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
}
|
||||
|
||||
.status-stopped {
|
||||
|
|
@ -123,11 +123,11 @@
|
|||
}
|
||||
|
||||
.status-running .status-dot {
|
||||
background: #10b981;
|
||||
background: var(--success-color, #10b981);
|
||||
}
|
||||
|
||||
.status-stopped .status-dot {
|
||||
background: #ef4444;
|
||||
background: var(--danger-color, #ef4444);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
|
|
@ -138,12 +138,12 @@
|
|||
|
||||
.refresh-icon {
|
||||
cursor: pointer;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.refresh-icon:hover {
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
|
@ -155,11 +155,11 @@
|
|||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -172,13 +172,13 @@
|
|||
right: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(135deg, rgba(91, 95, 207, 0.1) 0%, transparent 100%);
|
||||
background: linear-gradient(135deg, var(--accent-focus, rgba(91, 95, 207, 0.1)) 0%, transparent 100%);
|
||||
border-radius: 0 0 0 100%;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 30px rgba(91, 95, 207, 0.15);
|
||||
box-shadow: 0 12px 30px var(--accent-shadow-light, rgba(91, 95, 207, 0.15));
|
||||
}
|
||||
|
||||
.stat-header {
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
.stat-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -199,24 +199,24 @@
|
|||
.stat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #e0e7ff;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.stat-subtitle {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
|
|
@ -230,31 +230,31 @@
|
|||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #5b5fcf 0%, #7b7fd0 100%);
|
||||
background: linear-gradient(90deg, var(--accent-color, #5b5fcf) 0%, #7b7fd0 100%);
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
overflow: hidden;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -272,16 +272,16 @@
|
|||
}
|
||||
|
||||
.info-item {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -290,7 +290,7 @@
|
|||
.info-value {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
|
|
@ -301,15 +301,15 @@
|
|||
}
|
||||
|
||||
.action-btn {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -321,7 +321,7 @@
|
|||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(91, 95, 207, 0.1);
|
||||
background: var(--accent-focus, rgba(91, 95, 207, 0.1));
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
|
|
@ -334,18 +334,18 @@
|
|||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #5b5fcf;
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.action-btn.primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
}
|
||||
|
||||
.action-btn.danger {
|
||||
|
|
@ -425,7 +425,7 @@
|
|||
|
||||
.terminal-btn:hover {
|
||||
background: #718096;
|
||||
color: white;
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.terminal-content {
|
||||
|
|
@ -457,7 +457,7 @@
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #e8e9ff;
|
||||
border-top-color: #5b5fcf;
|
||||
border-top-color: var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -469,19 +469,19 @@
|
|||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -490,8 +490,8 @@
|
|||
}
|
||||
|
||||
.modal-footer {
|
||||
background: #f8f9ff;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-top: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -506,19 +506,19 @@
|
|||
}
|
||||
|
||||
.modal-footer .btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.modal-footer .btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
|
||||
}
|
||||
|
||||
.modal-footer .btn-default {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
color: var(--bg-secondary, white);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -561,7 +561,7 @@
|
|||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(91, 95, 207, 0.4);
|
||||
box-shadow: 0 0 0 0 var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 10px rgba(91, 95, 207, 0);
|
||||
|
|
@ -592,7 +592,7 @@
|
|||
<div class="page-header">
|
||||
<div class="container-header">
|
||||
<div class="container-icon-large">
|
||||
<i class="fab fa-docker" style="color: #5b5fcf; font-size: 2.5rem;"></i>
|
||||
<i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 2.5rem;"></i>
|
||||
</div>
|
||||
<div class="container-title-section">
|
||||
<h1 class="container-name" ng-init="cName='{{ name }}';status='{{ status }}'">
|
||||
|
|
@ -675,7 +675,7 @@
|
|||
<div class="info-label">{% trans "Port Mappings" %}</div>
|
||||
<div class="info-value">
|
||||
{% for iport, eport in ports.items %}
|
||||
<span style="background: #e0e7ff; padding: 0.25rem 0.5rem; border-radius: 4px; margin-right: 0.5rem;">
|
||||
<span style="background: var(--accent-bg, #e0e7ff); padding: 0.25rem 0.5rem; border-radius: 4px; margin-right: 0.5rem;">
|
||||
{{ iport }} → {{ eport }}
|
||||
</span>
|
||||
{% endfor %}
|
||||
|
|
@ -689,10 +689,10 @@
|
|||
<div class="info-item">
|
||||
<div class="info-label">{% trans "Start on Boot" %}</div>
|
||||
<div class="info-value" ng-init="startOnReboot={{ startOnReboot }}">
|
||||
<span ng-if="startOnReboot" style="color: #10b981;">
|
||||
<span ng-if="startOnReboot" style="color: var(--success-color, #10b981);">
|
||||
<i class="fas fa-check-circle"></i> {% trans "Enabled" %}
|
||||
</span>
|
||||
<span ng-if="!startOnReboot" style="color: #64748b;">
|
||||
<span ng-if="!startOnReboot" style="color: var(--text-secondary, #64748b);">
|
||||
<i class="fas fa-times-circle"></i> {% trans "Disabled" %}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -713,17 +713,17 @@
|
|||
<div class="card-body">
|
||||
<div class="action-grid">
|
||||
<div class="action-btn" ng-click="cAction('start')" ng-disabled="status=='running'">
|
||||
<i class="fas fa-play action-icon" style="color: #10b981;"></i>
|
||||
<i class="fas fa-play action-icon" style="color: var(--success-color, #10b981);"></i>
|
||||
<div class="action-text">{% trans "Start" %}</div>
|
||||
</div>
|
||||
|
||||
<div class="action-btn" ng-click="cAction('restart')" ng-disabled="status!='running'">
|
||||
<i class="fas fa-sync-alt action-icon" style="color: #3b82f6;"></i>
|
||||
<i class="fas fa-sync-alt action-icon" style="color: var(--info-color, #3b82f6);"></i>
|
||||
<div class="action-text">{% trans "Restart" %}</div>
|
||||
</div>
|
||||
|
||||
<div class="action-btn" ng-click="cAction('stop')" ng-disabled="status!='running'">
|
||||
<i class="fas fa-stop action-icon" style="color: #f59e0b;"></i>
|
||||
<i class="fas fa-stop action-icon" style="color: var(--warning-color, #f59e0b);"></i>
|
||||
<div class="action-text">{% trans "Stop" %}</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -748,7 +748,7 @@
|
|||
</div>
|
||||
|
||||
<a href="/docker/exportContainer/?name={{ name }}" class="action-btn">
|
||||
<i class="fas fa-download action-icon" style="color: #10b981;"></i>
|
||||
<i class="fas fa-download action-icon" style="color: var(--success-color, #10b981);"></i>
|
||||
<div class="action-text">{% trans "Export" %}</div>
|
||||
</a>
|
||||
|
||||
|
|
@ -792,7 +792,7 @@
|
|||
{% trans "Container Settings" %}
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
style="font-size: 1.5rem; background: none; border: none;">×</button>
|
||||
style="font-size: 1.5rem; background: transparent; border: none;">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form name="containerSettingsForm" class="form-horizontal">
|
||||
|
|
@ -928,7 +928,7 @@
|
|||
{% trans "Container Processes" %}
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
style="font-size: 1.5rem; background: none; border: none;">×</button>
|
||||
style="font-size: 1.5rem; background: transparent; border: none;">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="table-responsive">
|
||||
|
|
|
|||
|
|
@ -667,7 +667,7 @@
|
|||
</div>
|
||||
<div class="setting-control">
|
||||
<input ng-model="memory_limit" type="text" class="form-control"
|
||||
placeholder="128M" style="max-width: 200px;">
|
||||
placeholder="128M" style="max-width: 200px; background: var(--bg-secondary, #fff); color: var(--text-primary, inherit); border: 1px solid var(--border-color, #e8e9ff);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -678,7 +678,7 @@
|
|||
</div>
|
||||
<div class="setting-control">
|
||||
<input ng-model="max_execution_time" type="text" class="form-control"
|
||||
placeholder="30" style="max-width: 200px;">
|
||||
placeholder="30" style="max-width: 200px; background: var(--bg-secondary, #fff); color: var(--text-primary, inherit); border: 1px solid var(--border-color, #e8e9ff);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -689,7 +689,7 @@
|
|||
</div>
|
||||
<div class="setting-control">
|
||||
<input ng-model="upload_max_filesize" type="text" class="form-control"
|
||||
placeholder="2M" style="max-width: 200px;">
|
||||
placeholder="2M" style="max-width: 200px; background: var(--bg-secondary, #fff); color: var(--text-primary, inherit); border: 1px solid var(--border-color, #e8e9ff);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -700,7 +700,7 @@
|
|||
</div>
|
||||
<div class="setting-control">
|
||||
<input ng-model="post_max_size" type="text" class="form-control"
|
||||
placeholder="8M" style="max-width: 200px;">
|
||||
placeholder="8M" style="max-width: 200px; background: var(--bg-secondary, #fff); color: var(--text-primary, inherit); border: 1px solid var(--border-color, #e8e9ff);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -711,7 +711,7 @@
|
|||
</div>
|
||||
<div class="setting-control">
|
||||
<input ng-model="max_input_time" type="text" class="form-control"
|
||||
placeholder="60" style="max-width: 200px;">
|
||||
placeholder="60" style="max-width: 200px; background: var(--bg-secondary, #fff); color: var(--text-primary, inherit); border: 1px solid var(--border-color, #e8e9ff);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, var(--php-gradient-start, #667eea) 0%, var(--php-gradient-end, #764ba2) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
|
||||
background: radial-gradient(circle at 70% 30%, var(--bg-light, rgba(255, 255, 255, 0.1)) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
|
|
@ -78,18 +78,18 @@
|
|||
.php-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--bg-light, rgba(255, 255, 255, 0.2));
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-secondary, rgba(255, 255, 255, 0.9));
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -99,28 +99,28 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--bg-light, rgba(255, 255, 255, 0.2));
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.apache-link:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--bg-hover, rgba(255, 255, 255, 0.3));
|
||||
transform: translateY(-2px);
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.selector-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
|
|
@ -136,18 +136,18 @@
|
|||
.selector-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, var(--php-gradient-start, #667eea) 0%, var(--php-gradient-end, #764ba2) 100%);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.selector-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.selector-form {
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
color: var(--text-secondary, #475569);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
|
|
@ -171,17 +171,17 @@
|
|||
.form-control {
|
||||
width: 100%;
|
||||
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-secondary, #fff);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent-color, #667eea);
|
||||
box-shadow: var(--accent-shadow, 0 0 0 3px rgba(102, 126, 234, 0.1));
|
||||
}
|
||||
|
||||
.select-control {
|
||||
|
|
@ -207,13 +207,13 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: linear-gradient(135deg, var(--php-gradient-start, #667eea) 0%, var(--php-gradient-end, #764ba2) 100%);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
|
|
@ -223,10 +223,10 @@
|
|||
}
|
||||
|
||||
.extensions-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out 0.2s;
|
||||
animation-fill-mode: both;
|
||||
|
|
@ -234,8 +234,8 @@
|
|||
|
||||
.controls-bar {
|
||||
padding: 1.5rem 2rem;
|
||||
background: #f8f9ff;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.search-box {
|
||||
|
|
@ -246,16 +246,18 @@
|
|||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem 0.75rem 2.5rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: var(--bg-secondary, white);
|
||||
color: var(--text-primary, inherit);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent-color, #667eea);
|
||||
box-shadow: var(--accent-shadow, 0 0 0 3px rgba(102, 126, 234, 0.1));
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
|
|
@ -263,33 +265,33 @@
|
|||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
}
|
||||
|
||||
.extensions-table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.extensions-table thead {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
}
|
||||
|
||||
.extensions-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);
|
||||
}
|
||||
|
||||
.extensions-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;
|
||||
}
|
||||
|
||||
|
|
@ -298,19 +300,19 @@
|
|||
}
|
||||
|
||||
.extensions-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.extension-name {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.php-version-badge {
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
font-size: 0.75rem;
|
||||
background: #e0e7ff;
|
||||
color: #4c1d95;
|
||||
background: var(--accent-bg, #e0e7ff);
|
||||
color: var(--accent-color, #4c1d95);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
|
|
@ -327,13 +329,13 @@
|
|||
}
|
||||
|
||||
.status-installed {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-color, #065f46);
|
||||
}
|
||||
|
||||
.status-not-installed {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-color, #991b1b);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
|
|
@ -342,32 +344,32 @@
|
|||
}
|
||||
|
||||
.btn-install {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
background: var(--success-color, #10b981);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-install:hover:not(:disabled) {
|
||||
background: #059669;
|
||||
background: var(--success-hover, #059669);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
||||
box-shadow: var(--success-shadow, 0 4px 12px rgba(16, 185, 129, 0.3));
|
||||
}
|
||||
|
||||
.btn-uninstall {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-uninstall:hover:not(:disabled) {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
|
||||
}
|
||||
|
||||
.log-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 2rem;
|
||||
margin-top: 2rem;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
|
|
@ -383,7 +385,7 @@
|
|||
.log-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
|
@ -392,17 +394,17 @@
|
|||
.log-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #f3e8ff;
|
||||
background: var(--accent-bg, #f3e8ff);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #667eea;
|
||||
color: var(--accent-color, #667eea);
|
||||
}
|
||||
|
||||
.log-output {
|
||||
background: #1e293b;
|
||||
color: #10b981;
|
||||
background: var(--console-bg, #1e293b);
|
||||
color: var(--console-text, #10b981);
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
font-size: 0.875rem;
|
||||
padding: 1.5rem;
|
||||
|
|
@ -414,14 +416,14 @@
|
|||
}
|
||||
|
||||
.btn-back {
|
||||
background: #6366f1;
|
||||
color: white;
|
||||
background: var(--info-color, #6366f1);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: #4f46e5;
|
||||
background: var(--info-hover, #4f46e5);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
|
||||
box-shadow: var(--info-shadow, 0 4px 12px rgba(99, 102, 241, 0.3));
|
||||
}
|
||||
|
||||
.alert {
|
||||
|
|
@ -435,9 +437,9 @@
|
|||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-color, #991b1b);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
|
|
@ -447,8 +449,8 @@
|
|||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
border: 2px solid var(--border-light, #f3f3f3);
|
||||
border-top: 2px solid var(--accent-color, #667eea);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -583,7 +585,7 @@
|
|||
<span class="status-badge"
|
||||
ng-class="{'status-installed': record.status=='Installed',
|
||||
'status-not-installed': record.status=='Not-Installed'}">
|
||||
<i class="fas fa-circle" style="font-size: 0.5rem;"></i>
|
||||
<i class="fas fa-circle" style="font-size: 0.5rem; color: inherit;"></i>
|
||||
{$ record.status $}
|
||||
</span>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@
|
|||
}
|
||||
|
||||
.ssl-section {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
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);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -41,12 +41,12 @@
|
|||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ssl-description {
|
||||
color: #8893a7;
|
||||
color: var(--text-muted, #8893a7);
|
||||
font-size: 14px;
|
||||
margin-bottom: 25px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -60,8 +60,8 @@
|
|||
}
|
||||
|
||||
.function-card {
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, #fafbff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
|
|
@ -72,8 +72,8 @@
|
|||
}
|
||||
|
||||
.function-card:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 6px 20px rgba(91,95,207,0.2);
|
||||
transform: translateY(-3px);
|
||||
text-decoration: none;
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 15px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -92,25 +92,25 @@
|
|||
}
|
||||
|
||||
.function-card:hover .function-icon {
|
||||
background: #4b4fbf;
|
||||
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
|
||||
background: var(--accent-hover, #4b4fbf);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow, rgba(91,95,207,0.3));
|
||||
}
|
||||
|
||||
.function-icon i {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.function-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.function-desc {
|
||||
font-size: 13px;
|
||||
color: #8893a7;
|
||||
color: var(--text-muted, #8893a7);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@
|
|||
}
|
||||
|
||||
.ssl-section {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
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);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -41,14 +41,14 @@
|
|||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ssl-docs-link {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
|
|
@ -62,23 +62,23 @@
|
|||
}
|
||||
|
||||
.ssl-docs-link:hover {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
border-color: #5b5fcf;
|
||||
box-shadow: 0 2px 4px rgba(91,95,207,0.3);
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ssl-description {
|
||||
color: #8893a7;
|
||||
color: var(--text-muted, #8893a7);
|
||||
font-size: 14px;
|
||||
margin-bottom: 25px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, #fafbff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -100,18 +100,18 @@
|
|||
.form-control {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
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: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-focus, rgba(91,95,207,0.1));
|
||||
}
|
||||
|
||||
/* Windows selectbox fix */
|
||||
|
|
@ -126,14 +126,14 @@
|
|||
padding-right: 40px;
|
||||
line-height: 1.5;
|
||||
min-height: 44px;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
}
|
||||
|
||||
/* Windows-specific fixes */
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
select.form-control {
|
||||
color: #2f3640 !important;
|
||||
background-color: white !important;
|
||||
background-color: var(--bg-secondary, white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -143,14 +143,14 @@
|
|||
}
|
||||
|
||||
select.form-control:focus {
|
||||
color: #2f3640;
|
||||
background-color: white;
|
||||
color: var(--text-primary, #2f3640);
|
||||
background-color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
border: 1px solid #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
|
|
@ -164,23 +164,23 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4b4fbf;
|
||||
border-color: #4b4fbf;
|
||||
box-shadow: 0 3px 8px rgba(91,95,207,0.3);
|
||||
background: var(--accent-hover, #4b4fbf);
|
||||
border-color: var(--accent-hover, #4b4fbf);
|
||||
box-shadow: 0 3px 8px var(--accent-shadow, rgba(91,95,207,0.3));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #94a3b8;
|
||||
border-color: #94a3b8;
|
||||
background: var(--text-disabled, #94a3b8);
|
||||
border-color: var(--text-disabled, #94a3b8);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ssl-details-card {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
background: var(--info-bg, #f0f9ff);
|
||||
border: 1px solid var(--info-border, #bae6fd);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
.ssl-details-card h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #0c4a6e;
|
||||
color: var(--info-text, #0c4a6e);
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -198,11 +198,11 @@
|
|||
.ssl-detail-item {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.ssl-detail-item strong {
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
@ -218,13 +218,13 @@
|
|||
}
|
||||
|
||||
.ssl-status.active {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
}
|
||||
|
||||
.ssl-status.inactive {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
background: var(--warning-bg, #fef3c7);
|
||||
color: var(--warning-text, #92400e);
|
||||
}
|
||||
|
||||
.alert {
|
||||
|
|
@ -236,15 +236,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
color: #0c4a6e;
|
||||
background: var(--info-bg, #f0f9ff);
|
||||
border: 1px solid var(--info-border, #bae6fd);
|
||||
color: var(--info-text, #0c4a6e);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg, #fef2f2);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
color: var(--danger-text, #991b1b);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
|
|
@ -327,7 +327,7 @@
|
|||
</div>
|
||||
<div class="ssl-detail-item">
|
||||
<strong>Days Remaining:</strong>
|
||||
<span style="color: #16a34a; font-weight: 600;">{$ sslDetails.days $} days</span>
|
||||
<span style="color: var(--success-color, #16a34a); font-weight: 600;">{$ sslDetails.days $} days</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="!sslDetails.hasSSL">
|
||||
|
|
@ -338,7 +338,7 @@
|
|||
No SSL Certificate
|
||||
</span>
|
||||
</div>
|
||||
<div ng-if="sslDetails.error_message" class="ssl-detail-item" style="color: #dc2626;">
|
||||
<div ng-if="sslDetails.error_message" class="ssl-detail-item" style="color: var(--danger-color, #dc2626);">
|
||||
<strong>Error:</strong> {$ sslDetails.error_message $}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@
|
|||
}
|
||||
|
||||
.ssl-section {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
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);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -41,14 +41,14 @@
|
|||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ssl-docs-link {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
|
|
@ -62,15 +62,15 @@
|
|||
}
|
||||
|
||||
.ssl-docs-link:hover {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
border-color: #5b5fcf;
|
||||
box-shadow: 0 2px 4px rgba(91,95,207,0.3);
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ssl-description {
|
||||
color: #8893a7;
|
||||
color: var(--text-muted, #8893a7);
|
||||
font-size: 14px;
|
||||
margin-bottom: 25px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -93,8 +93,8 @@
|
|||
}
|
||||
|
||||
.form-container {
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, #fafbff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -115,18 +115,18 @@
|
|||
.form-control {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
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: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-focus, rgba(91,95,207,0.1));
|
||||
}
|
||||
|
||||
/* Windows selectbox fixes */
|
||||
|
|
@ -141,14 +141,14 @@
|
|||
padding-right: 40px;
|
||||
line-height: 1.5;
|
||||
min-height: 44px;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
}
|
||||
|
||||
/* Windows-specific fixes */
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
select.form-control {
|
||||
color: #2f3640 !important;
|
||||
background-color: white !important;
|
||||
background-color: var(--bg-secondary, white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -158,14 +158,14 @@
|
|||
}
|
||||
|
||||
select.form-control:focus {
|
||||
color: #2f3640;
|
||||
background-color: white;
|
||||
color: var(--text-primary, #2f3640);
|
||||
background-color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
border: 1px solid #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
|
|
@ -179,15 +179,15 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4b4fbf;
|
||||
border-color: #4b4fbf;
|
||||
box-shadow: 0 3px 8px rgba(91,95,207,0.3);
|
||||
background: var(--accent-hover, #4b4fbf);
|
||||
border-color: var(--accent-hover, #4b4fbf);
|
||||
box-shadow: 0 3px 8px var(--accent-shadow, rgba(91,95,207,0.3));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #94a3b8;
|
||||
border-color: #94a3b8;
|
||||
background: var(--text-disabled, #94a3b8);
|
||||
border-color: var(--text-disabled, #94a3b8);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -202,15 +202,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
color: #0c4a6e;
|
||||
background: var(--info-bg, #f0f9ff);
|
||||
border: 1px solid var(--info-border, #bae6fd);
|
||||
color: var(--info-text, #0c4a6e);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg, #fef2f2);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
color: var(--danger-text, #991b1b);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@
|
|||
}
|
||||
|
||||
.ssl-section {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
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);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -41,14 +41,14 @@
|
|||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ssl-docs-link {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
|
|
@ -62,15 +62,15 @@
|
|||
}
|
||||
|
||||
.ssl-docs-link:hover {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
border-color: #5b5fcf;
|
||||
box-shadow: 0 2px 4px rgba(91,95,207,0.3);
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ssl-description {
|
||||
color: #8893a7;
|
||||
color: var(--text-muted, #8893a7);
|
||||
font-size: 14px;
|
||||
margin-bottom: 25px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -93,8 +93,8 @@
|
|||
}
|
||||
|
||||
.form-container {
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, #fafbff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -115,18 +115,18 @@
|
|||
.form-control {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
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: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-focus, rgba(91,95,207,0.1));
|
||||
}
|
||||
|
||||
/* Windows selectbox fixes */
|
||||
|
|
@ -141,14 +141,14 @@
|
|||
padding-right: 40px;
|
||||
line-height: 1.5;
|
||||
min-height: 44px;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
}
|
||||
|
||||
/* Windows-specific fixes */
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
select.form-control {
|
||||
color: #2f3640 !important;
|
||||
background-color: white !important;
|
||||
background-color: var(--bg-secondary, white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -158,14 +158,14 @@
|
|||
}
|
||||
|
||||
select.form-control:focus {
|
||||
color: #2f3640;
|
||||
background-color: white;
|
||||
color: var(--text-primary, #2f3640);
|
||||
background-color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
border: 1px solid #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
|
|
@ -179,15 +179,15 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4b4fbf;
|
||||
border-color: #4b4fbf;
|
||||
box-shadow: 0 3px 8px rgba(91,95,207,0.3);
|
||||
background: var(--accent-hover, #4b4fbf);
|
||||
border-color: var(--accent-hover, #4b4fbf);
|
||||
box-shadow: 0 3px 8px var(--accent-shadow, rgba(91,95,207,0.3));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #94a3b8;
|
||||
border-color: #94a3b8;
|
||||
background: var(--text-disabled, #94a3b8);
|
||||
border-color: var(--text-disabled, #94a3b8);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -202,15 +202,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
color: #0c4a6e;
|
||||
background: var(--info-bg, #f0f9ff);
|
||||
border: 1px solid var(--info-border, #bae6fd);
|
||||
color: var(--info-text, #0c4a6e);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg, #fef2f2);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
color: var(--danger-text, #991b1b);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@
|
|||
}
|
||||
|
||||
.ssl-section {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
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);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -41,14 +41,14 @@
|
|||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ssl-docs-link {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
|
|
@ -62,23 +62,23 @@
|
|||
}
|
||||
|
||||
.ssl-docs-link:hover {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
border-color: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 2px 4px rgba(91,95,207,0.3);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ssl-description {
|
||||
color: #8893a7;
|
||||
color: var(--text-muted, #8893a7);
|
||||
font-size: 14px;
|
||||
margin-bottom: 25px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, #fafbff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
|
|
@ -110,10 +110,10 @@
|
|||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 15px 20px;
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, #fafbff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -121,15 +121,15 @@
|
|||
|
||||
.nav-tabs li.active a,
|
||||
.nav-tabs a:hover {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
border-color: #5b5fcf;
|
||||
box-shadow: 0 2px 8px rgba(91,95,207,0.3);
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 2px 8px var(--accent-shadow, rgba(91,95,207,0.3));
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, #fafbff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -152,18 +152,18 @@
|
|||
.form-control {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
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: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-focus, rgba(91,95,207,0.1));
|
||||
}
|
||||
|
||||
/* Windows selectbox fix */
|
||||
|
|
@ -178,14 +178,14 @@
|
|||
padding-right: 40px;
|
||||
line-height: 1.5;
|
||||
min-height: 44px;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
}
|
||||
|
||||
/* Windows-specific fixes */
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
select.form-control {
|
||||
color: #2f3640 !important;
|
||||
background-color: white !important;
|
||||
background-color: var(--bg-secondary, white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -195,21 +195,21 @@
|
|||
}
|
||||
|
||||
select.form-control:focus {
|
||||
color: #2f3640;
|
||||
background-color: white;
|
||||
color: var(--text-primary, #2f3640);
|
||||
background-color: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
resize: vertical;
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
border: 1px solid #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-secondary, white);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
|
|
@ -223,15 +223,15 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4b4fbf;
|
||||
border-color: #4b4fbf;
|
||||
box-shadow: 0 3px 8px rgba(91,95,207,0.3);
|
||||
background: var(--accent-hover, #4b4fbf);
|
||||
border-color: var(--accent-hover, #4b4fbf);
|
||||
box-shadow: 0 3px 8px var(--accent-shadow, rgba(91,95,207,0.3));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #94a3b8;
|
||||
border-color: #94a3b8;
|
||||
background: var(--text-disabled, #94a3b8);
|
||||
border-color: var(--text-disabled, #94a3b8);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -239,8 +239,8 @@
|
|||
|
||||
/* SSL Details Panel */
|
||||
.ssl-details-panel {
|
||||
background: white;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, white);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
.ssl-details-header {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
|
|
@ -258,11 +258,11 @@
|
|||
.ssl-details-panel p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.ssl-details-panel strong {
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -276,9 +276,9 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
color: #0c4a6e;
|
||||
background: var(--info-bg, #f0f9ff);
|
||||
border: 1px solid var(--info-border, #bae6fd);
|
||||
color: var(--info-text, #0c4a6e);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
|
|
@ -303,13 +303,13 @@
|
|||
.premium-hero h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.premium-description {
|
||||
font-size: 16px;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
line-height: 1.7;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 40px;
|
||||
|
|
@ -411,13 +411,13 @@
|
|||
<div ng-if="sslDetails" class="ssl-details-panel">
|
||||
<h4 class="ssl-details-header">{% trans "SSL Details" %}</h4>
|
||||
<div ng-if="sslDetails.hasSSL">
|
||||
<p><strong>{% trans "Status:" %}</strong> <span style="color: #10b981;">Active</span></p>
|
||||
<p><strong>{% trans "Status:" %}</strong> <span style="color: var(--success-color, #10b981);">Active</span></p>
|
||||
<p><strong>{% trans "Issued By:" %}</strong> {$ sslDetails.authority $}</p>
|
||||
<p><strong>{% trans "Expiry Date:" %}</strong> {$ sslDetails.expiryDate $}</p>
|
||||
<p><strong>{% trans "Days Remaining:" %}</strong> {$ sslDetails.days $}</p>
|
||||
</div>
|
||||
<div ng-if="!sslDetails.hasSSL">
|
||||
<p><strong>{% trans "Status:" %}</strong> <span style="color: #ef4444;">No SSL Certificate</span></p>
|
||||
<p><strong>{% trans "Status:" %}</strong> <span style="color: var(--danger-color, #ef4444);">No SSL Certificate</span></p>
|
||||
<p ng-if="sslDetails.error_message"><strong>{% trans "Error:" %}</strong> {$ sslDetails.error_message $}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -78,40 +78,40 @@
|
|||
.log-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--accent-bg, rgba(255, 255, 255, 0.2));
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-secondary, rgba(255, 255, 255, 0.9));
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.log-viewer-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
background: var(--console-bg, #1e293b);
|
||||
color: var(--text-primary, white);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #334155;
|
||||
border-bottom: 1px solid var(--console-border, #334155);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
|
|
@ -120,18 +120,18 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: #e2e8f0;
|
||||
color: var(--console-text, #e2e8f0);
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #334155;
|
||||
background: var(--bg-hover, #334155);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
color: var(--text-muted, #64748b);
|
||||
}
|
||||
|
||||
.log-stats {
|
||||
|
|
@ -145,18 +145,18 @@
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: #e2e8f0;
|
||||
color: var(--console-text, #e2e8f0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -178,16 +178,18 @@
|
|||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem 0.5rem 2.5rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
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 {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent-color, #667eea);
|
||||
box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
|
|
@ -195,12 +197,12 @@
|
|||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
background: #1e293b;
|
||||
background: var(--console-bg, #1e293b);
|
||||
padding: 1.5rem;
|
||||
min-height: 600px;
|
||||
max-height: 700px;
|
||||
|
|
@ -211,7 +213,7 @@
|
|||
.log-textarea {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
color: #10b981;
|
||||
color: var(--success-color, #10b981);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
|
|
@ -222,7 +224,7 @@
|
|||
}
|
||||
|
||||
.log-textarea::placeholder {
|
||||
color: #475569;
|
||||
color: var(--text-muted, #475569);
|
||||
}
|
||||
|
||||
.log-line-numbers {
|
||||
|
|
@ -231,13 +233,13 @@
|
|||
top: 1.5rem;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
color: #475569;
|
||||
color: var(--text-muted, #475569);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
user-select: none;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid #334155;
|
||||
border-right: 1px solid var(--console-border, #334155);
|
||||
}
|
||||
|
||||
.log-content-wrapper {
|
||||
|
|
@ -245,9 +247,9 @@
|
|||
}
|
||||
|
||||
.action-bar {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
border-top: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -268,43 +270,43 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
background: var(--accent-color, #667eea);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
background: var(--accent-hover, #5a67d8);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #64748b;
|
||||
color: white;
|
||||
background: var(--text-muted, #64748b);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #475569;
|
||||
background: var(--bg-hover, #475569);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
|
||||
box-shadow: var(--shadow-color, 0 4px 12px rgba(100, 116, 139, 0.3));
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
border: 2px solid var(--border-light, #f3f3f3);
|
||||
border-top: 2px solid var(--accent-color, #667eea);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -326,15 +328,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
|
|
@ -344,12 +346,12 @@
|
|||
.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-muted, #94a3b8);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -357,12 +359,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);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
|
|
@ -371,25 +373,25 @@
|
|||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track {
|
||||
background: #334155;
|
||||
background: var(--console-border, #334155);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: #64748b;
|
||||
background: var(--text-muted, #64748b);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
background: var(--text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
/* Log Level Colors */
|
||||
.log-error { color: #ef4444; }
|
||||
.log-warning { color: #f59e0b; }
|
||||
.log-info { color: #3b82f6; }
|
||||
.log-debug { color: #8b5cf6; }
|
||||
.log-success { color: #10b981; }
|
||||
.log-error { color: var(--danger-color, #ef4444); }
|
||||
.log-warning { color: var(--warning-color, #f59e0b); }
|
||||
.log-info { color: var(--info-color, #3b82f6); }
|
||||
.log-debug { color: var(--accent-color, #8b5cf6); }
|
||||
.log-success { color: var(--success-color, #10b981); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -466,7 +468,7 @@
|
|||
<span class="stat-value">{% trans "Last 50 lines" %}</span>
|
||||
</div>
|
||||
<div ng-hide="logFileLoading" class="stat-item">
|
||||
<i class="fas fa-check-circle" style="color: #10b981;"></i>
|
||||
<i class="fas fa-check-circle" style="color: var(--success-color, #10b981);"></i>
|
||||
<span>{% trans "Live" %}</span>
|
||||
</div>
|
||||
<div ng-show="!logFileLoading" class="loading-spinner"></div>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -78,40 +78,40 @@
|
|||
.log-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--accent-bg, rgba(255, 255, 255, 0.2));
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-secondary, rgba(255, 255, 255, 0.9));
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.log-viewer-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
background: var(--console-bg, #1e293b);
|
||||
color: var(--text-primary, white);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #334155;
|
||||
border-bottom: 1px solid var(--console-border, #334155);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
|
|
@ -120,18 +120,18 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: #e2e8f0;
|
||||
color: var(--console-text, #e2e8f0);
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #334155;
|
||||
background: var(--bg-hover, #334155);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
color: var(--text-muted, #64748b);
|
||||
}
|
||||
|
||||
.log-stats {
|
||||
|
|
@ -145,18 +145,18 @@
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: #e2e8f0;
|
||||
color: var(--console-text, #e2e8f0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -178,16 +178,18 @@
|
|||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem 0.5rem 2.5rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
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 {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent-color, #667eea);
|
||||
box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
|
|
@ -195,12 +197,12 @@
|
|||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
background: #1e293b;
|
||||
background: var(--console-bg, #1e293b);
|
||||
padding: 1.5rem;
|
||||
min-height: 600px;
|
||||
max-height: 700px;
|
||||
|
|
@ -211,7 +213,7 @@
|
|||
.log-textarea {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
color: #3b82f6;
|
||||
color: var(--info-color, #3b82f6);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
|
|
@ -222,7 +224,7 @@
|
|||
}
|
||||
|
||||
.log-textarea::placeholder {
|
||||
color: #475569;
|
||||
color: var(--text-muted, #475569);
|
||||
}
|
||||
|
||||
.log-line-numbers {
|
||||
|
|
@ -231,13 +233,13 @@
|
|||
top: 1.5rem;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
color: #475569;
|
||||
color: var(--text-muted, #475569);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
user-select: none;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid #334155;
|
||||
border-right: 1px solid var(--console-border, #334155);
|
||||
}
|
||||
|
||||
.log-content-wrapper {
|
||||
|
|
@ -245,9 +247,9 @@
|
|||
}
|
||||
|
||||
.action-bar {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
border-top: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -268,43 +270,43 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
background: var(--accent-color, #667eea);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
background: var(--accent-hover, #5a67d8);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #64748b;
|
||||
color: white;
|
||||
background: var(--text-muted, #64748b);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #475569;
|
||||
background: var(--bg-hover, #475569);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
|
||||
box-shadow: var(--shadow-color, 0 4px 12px rgba(100, 116, 139, 0.3));
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
border: 2px solid var(--border-light, #f3f3f3);
|
||||
border-top: 2px solid var(--accent-color, #667eea);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -326,15 +328,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
|
|
@ -344,12 +346,12 @@
|
|||
.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-muted, #94a3b8);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -357,12 +359,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);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
|
|
@ -371,25 +373,25 @@
|
|||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track {
|
||||
background: #334155;
|
||||
background: var(--console-border, #334155);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: #64748b;
|
||||
background: var(--text-muted, #64748b);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
background: var(--text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
/* Log Level Colors */
|
||||
.log-error { color: #ef4444; }
|
||||
.log-warning { color: #f59e0b; }
|
||||
.log-info { color: #3b82f6; }
|
||||
.log-debug { color: #8b5cf6; }
|
||||
.log-success { color: #10b981; }
|
||||
.log-error { color: var(--danger-color, #ef4444); }
|
||||
.log-warning { color: var(--warning-color, #f59e0b); }
|
||||
.log-info { color: var(--info-color, #3b82f6); }
|
||||
.log-debug { color: var(--accent-color, #8b5cf6); }
|
||||
.log-success { color: var(--success-color, #10b981); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -466,7 +468,7 @@
|
|||
<span class="stat-value">{% trans "Last 50 lines" %}</span>
|
||||
</div>
|
||||
<div ng-hide="logFileLoading" class="stat-item">
|
||||
<i class="fas fa-check-circle" style="color: #10b981;"></i>
|
||||
<i class="fas fa-check-circle" style="color: var(--success-color, #10b981);"></i>
|
||||
<span>{% trans "Live" %}</span>
|
||||
</div>
|
||||
<div ng-show="!logFileLoading" class="loading-spinner"></div>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -78,40 +78,40 @@
|
|||
.log-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--accent-bg, rgba(255, 255, 255, 0.2));
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-secondary, rgba(255, 255, 255, 0.9));
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.log-viewer-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
background: var(--console-bg, #1e293b);
|
||||
color: var(--text-primary, white);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #334155;
|
||||
border-bottom: 1px solid var(--console-border, #334155);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
|
|
@ -120,18 +120,18 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: #e2e8f0;
|
||||
color: var(--console-text, #e2e8f0);
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #334155;
|
||||
background: var(--bg-hover, #334155);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
color: var(--text-muted, #64748b);
|
||||
}
|
||||
|
||||
.log-stats {
|
||||
|
|
@ -145,18 +145,18 @@
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: #e2e8f0;
|
||||
color: var(--console-text, #e2e8f0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -178,16 +178,18 @@
|
|||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem 0.5rem 2.5rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
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 {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent-color, #667eea);
|
||||
box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
|
|
@ -195,12 +197,12 @@
|
|||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
background: #1e293b;
|
||||
background: var(--console-bg, #1e293b);
|
||||
padding: 1.5rem;
|
||||
min-height: 600px;
|
||||
max-height: 700px;
|
||||
|
|
@ -211,7 +213,7 @@
|
|||
.log-textarea {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
color: #ef4444;
|
||||
color: var(--danger-color, #ef4444);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
|
|
@ -222,7 +224,7 @@
|
|||
}
|
||||
|
||||
.log-textarea::placeholder {
|
||||
color: #475569;
|
||||
color: var(--text-muted, #475569);
|
||||
}
|
||||
|
||||
.log-line-numbers {
|
||||
|
|
@ -231,13 +233,13 @@
|
|||
top: 1.5rem;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
color: #475569;
|
||||
color: var(--text-muted, #475569);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
user-select: none;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid #334155;
|
||||
border-right: 1px solid var(--console-border, #334155);
|
||||
}
|
||||
|
||||
.log-content-wrapper {
|
||||
|
|
@ -245,9 +247,9 @@
|
|||
}
|
||||
|
||||
.action-bar {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
border-top: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -268,43 +270,43 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
background: var(--accent-color, #667eea);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
background: var(--accent-hover, #5a67d8);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #64748b;
|
||||
color: white;
|
||||
background: var(--text-muted, #64748b);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #475569;
|
||||
background: var(--bg-hover, #475569);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
|
||||
box-shadow: var(--shadow-color, 0 4px 12px rgba(100, 116, 139, 0.3));
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
border: 2px solid var(--border-light, #f3f3f3);
|
||||
border-top: 2px solid var(--accent-color, #667eea);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -326,15 +328,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
|
|
@ -344,12 +346,12 @@
|
|||
.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-muted, #94a3b8);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -357,12 +359,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);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
|
|
@ -371,25 +373,25 @@
|
|||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track {
|
||||
background: #334155;
|
||||
background: var(--console-border, #334155);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: #64748b;
|
||||
background: var(--text-muted, #64748b);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
background: var(--text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
/* Log Level Colors */
|
||||
.log-error { color: #ef4444; }
|
||||
.log-warning { color: #f59e0b; }
|
||||
.log-info { color: #3b82f6; }
|
||||
.log-debug { color: #8b5cf6; }
|
||||
.log-success { color: #10b981; }
|
||||
.log-error { color: var(--danger-color, #ef4444); }
|
||||
.log-warning { color: var(--warning-color, #f59e0b); }
|
||||
.log-info { color: var(--info-color, #3b82f6); }
|
||||
.log-debug { color: var(--accent-color, #8b5cf6); }
|
||||
.log-success { color: var(--success-color, #10b981); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -466,7 +468,7 @@
|
|||
<span class="stat-value">{% trans "Last 50 lines" %}</span>
|
||||
</div>
|
||||
<div ng-hide="logFileLoading" class="stat-item">
|
||||
<i class="fas fa-check-circle" style="color: #10b981;"></i>
|
||||
<i class="fas fa-check-circle" style="color: var(--success-color, #10b981);"></i>
|
||||
<span>{% trans "Live" %}</span>
|
||||
</div>
|
||||
<div ng-show="!logFileLoading" class="loading-spinner"></div>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -78,40 +78,40 @@
|
|||
.log-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--accent-bg, rgba(255, 255, 255, 0.2));
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-secondary, rgba(255, 255, 255, 0.9));
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.log-viewer-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
background: var(--console-bg, #1e293b);
|
||||
color: var(--text-primary, white);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #334155;
|
||||
border-bottom: 1px solid var(--console-border, #334155);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
|
|
@ -120,18 +120,18 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: #e2e8f0;
|
||||
color: var(--console-text, #e2e8f0);
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #334155;
|
||||
background: var(--bg-hover, #334155);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
color: var(--text-muted, #64748b);
|
||||
}
|
||||
|
||||
.log-stats {
|
||||
|
|
@ -145,18 +145,18 @@
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: #e2e8f0;
|
||||
color: var(--console-text, #e2e8f0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -178,16 +178,18 @@
|
|||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem 0.5rem 2.5rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
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 {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent-color, #667eea);
|
||||
box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
|
|
@ -195,12 +197,12 @@
|
|||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
background: #1e293b;
|
||||
background: var(--console-bg, #1e293b);
|
||||
padding: 1.5rem;
|
||||
min-height: 600px;
|
||||
max-height: 700px;
|
||||
|
|
@ -211,7 +213,7 @@
|
|||
.log-textarea {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
color: #8b5cf6;
|
||||
color: var(--accent-color, #8b5cf6);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
|
|
@ -222,7 +224,7 @@
|
|||
}
|
||||
|
||||
.log-textarea::placeholder {
|
||||
color: #475569;
|
||||
color: var(--text-muted, #475569);
|
||||
}
|
||||
|
||||
.log-line-numbers {
|
||||
|
|
@ -231,13 +233,13 @@
|
|||
top: 1.5rem;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
color: #475569;
|
||||
color: var(--text-muted, #475569);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
user-select: none;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid #334155;
|
||||
border-right: 1px solid var(--console-border, #334155);
|
||||
}
|
||||
|
||||
.log-content-wrapper {
|
||||
|
|
@ -245,9 +247,9 @@
|
|||
}
|
||||
|
||||
.action-bar {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
border-top: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -268,43 +270,43 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
background: var(--accent-color, #667eea);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
background: var(--accent-hover, #5a67d8);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #64748b;
|
||||
color: white;
|
||||
background: var(--text-muted, #64748b);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #475569;
|
||||
background: var(--bg-hover, #475569);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
|
||||
box-shadow: var(--shadow-color, 0 4px 12px rgba(100, 116, 139, 0.3));
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
border: 2px solid var(--border-light, #f3f3f3);
|
||||
border-top: 2px solid var(--accent-color, #667eea);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -326,15 +328,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
|
|
@ -344,12 +346,12 @@
|
|||
.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-muted, #94a3b8);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -357,12 +359,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);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
|
|
@ -371,25 +373,25 @@
|
|||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track {
|
||||
background: #334155;
|
||||
background: var(--console-border, #334155);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: #64748b;
|
||||
background: var(--text-muted, #64748b);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
background: var(--text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
/* Log Level Colors */
|
||||
.log-error { color: #ef4444; }
|
||||
.log-warning { color: #f59e0b; }
|
||||
.log-info { color: #3b82f6; }
|
||||
.log-debug { color: #8b5cf6; }
|
||||
.log-success { color: #10b981; }
|
||||
.log-error { color: var(--danger-color, #ef4444); }
|
||||
.log-warning { color: var(--warning-color, #f59e0b); }
|
||||
.log-info { color: var(--info-color, #3b82f6); }
|
||||
.log-debug { color: var(--accent-color, #8b5cf6); }
|
||||
.log-success { color: var(--success-color, #10b981); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -466,7 +468,7 @@
|
|||
<span class="stat-value">{% trans "Last 50 lines" %}</span>
|
||||
</div>
|
||||
<div ng-hide="logFileLoading" class="stat-item">
|
||||
<i class="fas fa-check-circle" style="color: #10b981;"></i>
|
||||
<i class="fas fa-check-circle" style="color: var(--success-color, #10b981);"></i>
|
||||
<span>{% trans "Live" %}</span>
|
||||
</div>
|
||||
<div ng-show="!logFileLoading" class="loading-spinner"></div>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -78,40 +78,40 @@
|
|||
.log-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--accent-bg, rgba(255, 255, 255, 0.2));
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-secondary, rgba(255, 255, 255, 0.9));
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.log-viewer-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
background: var(--console-bg, #1e293b);
|
||||
color: var(--text-primary, white);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #334155;
|
||||
border-bottom: 1px solid var(--console-border, #334155);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
|
|
@ -120,18 +120,18 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: #e2e8f0;
|
||||
color: var(--console-text, #e2e8f0);
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #334155;
|
||||
background: var(--bg-hover, #334155);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
color: var(--text-muted, #64748b);
|
||||
}
|
||||
|
||||
.log-stats {
|
||||
|
|
@ -145,18 +145,18 @@
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: #e2e8f0;
|
||||
color: var(--console-text, #e2e8f0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -178,16 +178,18 @@
|
|||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem 0.5rem 2.5rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
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 {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent-color, #667eea);
|
||||
box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
|
|
@ -195,12 +197,12 @@
|
|||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
background: #1e293b;
|
||||
background: var(--console-bg, #1e293b);
|
||||
padding: 1.5rem;
|
||||
min-height: 600px;
|
||||
max-height: 700px;
|
||||
|
|
@ -211,7 +213,7 @@
|
|||
.log-textarea {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
color: #f59e0b;
|
||||
color: var(--warning-color, #f59e0b);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
|
|
@ -222,7 +224,7 @@
|
|||
}
|
||||
|
||||
.log-textarea::placeholder {
|
||||
color: #475569;
|
||||
color: var(--text-muted, #475569);
|
||||
}
|
||||
|
||||
.log-line-numbers {
|
||||
|
|
@ -231,13 +233,13 @@
|
|||
top: 1.5rem;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
color: #475569;
|
||||
color: var(--text-muted, #475569);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
user-select: none;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid #334155;
|
||||
border-right: 1px solid var(--console-border, #334155);
|
||||
}
|
||||
|
||||
.log-content-wrapper {
|
||||
|
|
@ -245,9 +247,9 @@
|
|||
}
|
||||
|
||||
.action-bar {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
border-top: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -268,43 +270,43 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
background: var(--accent-color, #667eea);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
background: var(--accent-hover, #5a67d8);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-color, #ef4444);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
box-shadow: var(--danger-shadow, 0 4px 12px rgba(239, 68, 68, 0.3));
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #64748b;
|
||||
color: white;
|
||||
background: var(--text-muted, #64748b);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #475569;
|
||||
background: var(--bg-hover, #475569);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
|
||||
box-shadow: var(--shadow-color, 0 4px 12px rgba(100, 116, 139, 0.3));
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
border: 2px solid var(--border-light, #f3f3f3);
|
||||
border-top: 2px solid var(--accent-color, #667eea);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -326,15 +328,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #065f46);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
|
|
@ -344,12 +346,12 @@
|
|||
.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-muted, #94a3b8);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -357,12 +359,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);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
|
|
@ -371,25 +373,25 @@
|
|||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track {
|
||||
background: #334155;
|
||||
background: var(--console-border, #334155);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: #64748b;
|
||||
background: var(--text-muted, #64748b);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
background: var(--text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
/* Log Level Colors */
|
||||
.log-error { color: #ef4444; }
|
||||
.log-warning { color: #f59e0b; }
|
||||
.log-info { color: #3b82f6; }
|
||||
.log-debug { color: #8b5cf6; }
|
||||
.log-success { color: #10b981; }
|
||||
.log-error { color: var(--danger-color, #ef4444); }
|
||||
.log-warning { color: var(--warning-color, #f59e0b); }
|
||||
.log-info { color: var(--info-color, #3b82f6); }
|
||||
.log-debug { color: var(--accent-color, #8b5cf6); }
|
||||
.log-success { color: var(--success-color, #10b981); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -466,7 +468,7 @@
|
|||
<span class="stat-value">{% trans "Last 50 lines" %}</span>
|
||||
</div>
|
||||
<div ng-hide="logFileLoading" class="stat-item">
|
||||
<i class="fas fa-check-circle" style="color: #10b981;"></i>
|
||||
<i class="fas fa-check-circle" style="color: var(--success-color, #10b981);"></i>
|
||||
<span>{% trans "Live" %}</span>
|
||||
</div>
|
||||
<div ng-show="!logFileLoading" class="loading-spinner"></div>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -78,18 +78,18 @@
|
|||
.mail-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--accent-bg, rgba(255, 255, 255, 0.2));
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-secondary, rgba(255, 255, 255, 0.9));
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -99,35 +99,35 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--accent-bg, rgba(255, 255, 255, 0.2));
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.docs-link:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--accent-hover, rgba(255, 255, 255, 0.3));
|
||||
transform: translateY(-2px);
|
||||
color: white;
|
||||
color: var(--text-primary, white);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mail-config-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
|
||||
color: var(--text-primary, white);
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
.panel-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
background: var(--accent-bg, rgba(255,255,255,0.2));
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -166,26 +166,27 @@
|
|||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
color: var(--text-secondary, #475569);
|
||||
font-size: 0.875rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
background: var(--bg-secondary, #fff);
|
||||
color: var(--text-primary, #1e293b);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent-color, #667eea);
|
||||
box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
|
||||
}
|
||||
|
||||
.select-control {
|
||||
|
|
@ -198,19 +199,19 @@
|
|||
}
|
||||
|
||||
.mailer-type-selector {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
}
|
||||
|
||||
.smtp-fields {
|
||||
background: #fafbff;
|
||||
background: var(--bg-light, #fafbff);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -220,24 +221,24 @@
|
|||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-light, #e8e9ff);
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #f3e8ff;
|
||||
background: var(--accent-bg, #f3e8ff);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #667eea;
|
||||
color: var(--accent-color, #667eea);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
|
|
@ -245,7 +246,7 @@
|
|||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
border-top: 1px solid var(--border-light, #e8e9ff);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
|
@ -263,20 +264,20 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
|
||||
color: var(--text-primary, white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
border: 2px solid var(--border-light, #f3f3f3);
|
||||
border-top: 2px solid var(--accent-color, #667eea);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -288,8 +289,8 @@
|
|||
}
|
||||
|
||||
.info-box {
|
||||
background: #eff6ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
background: var(--info-bg, #eff6ff);
|
||||
border: 1px solid var(--info-border, #bfdbfe);
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -299,14 +300,14 @@
|
|||
}
|
||||
|
||||
.info-icon {
|
||||
color: #3b82f6;
|
||||
color: var(--info-color, #3b82f6);
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 0.875rem;
|
||||
color: #1e40af;
|
||||
color: var(--info-text, #1e40af);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
|
@ -318,15 +319,16 @@
|
|||
font-size: 0.875rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, #f8f9ff);
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #10b981;
|
||||
background: var(--success-color, #10b981);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,28 @@
|
|||
|
||||
|
||||
<style>
|
||||
/* CSS Variables for Dark Mode Support */
|
||||
:root {
|
||||
/* Text colors */
|
||||
--text-primary: #333333;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #999999;
|
||||
|
||||
/* Background colors */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9fa;
|
||||
--bg-hover: #e9ecef;
|
||||
--bg-light: lightblue;
|
||||
|
||||
/* Border colors */
|
||||
--border-color: #ccc;
|
||||
--border-light: #dee2e6;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-color: #007bff;
|
||||
--accent-hover: #0056b3;
|
||||
}
|
||||
|
||||
.tagcontainer {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
|
@ -19,7 +41,7 @@
|
|||
height: 300px;
|
||||
overflow-y: auto;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.tags-label {
|
||||
|
|
@ -37,7 +59,7 @@
|
|||
}
|
||||
|
||||
.tags:hover {
|
||||
background-color: lightblue;
|
||||
background-color: var(--bg-light);
|
||||
}
|
||||
|
||||
.tag-icon {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,40 @@
|
|||
|
||||
{% block header_scripts %}
|
||||
<style>
|
||||
/* CSS Variables for Dark Mode Support */
|
||||
:root {
|
||||
/* Text colors */
|
||||
--text-primary: #2f3640;
|
||||
--text-secondary: #64748b;
|
||||
--text-muted: #8893a7;
|
||||
|
||||
/* Background colors */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9ff;
|
||||
--bg-light: #f0f0ff;
|
||||
|
||||
/* Border colors */
|
||||
--border-color: #e8e9ff;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-color: #5b5fcf;
|
||||
--accent-hover: #4b4fbf;
|
||||
--accent-focus: rgba(91,95,207,0.1);
|
||||
--accent-shadow: rgba(91,95,207,0.3);
|
||||
|
||||
/* Status colors */
|
||||
--warning-bg: #fff3cd;
|
||||
--warning-border: #ffeaa7;
|
||||
--warning-color: #856404;
|
||||
--warning-accent: #f39c12;
|
||||
|
||||
/* Shadow colors */
|
||||
--shadow-light: rgba(0,0,0,0.08);
|
||||
|
||||
/* Neutral colors */
|
||||
--neutral-disabled: #94a3b8;
|
||||
}
|
||||
|
||||
/* Angular cloak to prevent flashing */
|
||||
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
|
||||
display: none !important;
|
||||
|
|
@ -48,14 +82,14 @@
|
|||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
box-shadow: 0 2px 8px var(--shadow-light);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -68,13 +102,13 @@
|
|||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
|
@ -92,7 +126,7 @@
|
|||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -106,18 +140,18 @@
|
|||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background: #f8f9ff;
|
||||
color: #2f3640;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color);
|
||||
background: white;
|
||||
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
|
||||
box-shadow: 0 0 0 3px var(--accent-focus);
|
||||
}
|
||||
|
||||
.form-help {
|
||||
|
|
@ -131,7 +165,7 @@
|
|||
|
||||
.form-help i {
|
||||
font-size: 13px;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
|
|
@ -142,7 +176,7 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
|
|
@ -159,13 +193,13 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4b4fbf;
|
||||
background: var(--accent-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(91,95,207,0.3);
|
||||
box-shadow: 0 5px 15px var(--accent-shadow);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #94a3b8;
|
||||
background: var(--neutral-disabled);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -176,7 +210,7 @@
|
|||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #ffffff;
|
||||
border: 2px solid var(--bg-primary);
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
animation: spin 0.8s linear infinite;
|
||||
|
|
@ -188,8 +222,8 @@
|
|||
|
||||
/* Info Box */
|
||||
.info-box {
|
||||
background: #f0f0ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 25px;
|
||||
|
|
@ -198,7 +232,7 @@
|
|||
.info-box-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -206,25 +240,25 @@
|
|||
}
|
||||
|
||||
.info-box-title i {
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info-box-content {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box-content strong {
|
||||
color: #2f3640;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Warning Box */
|
||||
.warning-box {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
background: var(--warning-bg);
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 25px;
|
||||
|
|
@ -233,7 +267,7 @@
|
|||
.warning-box-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #856404;
|
||||
color: var(--warning-color);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -241,13 +275,13 @@
|
|||
}
|
||||
|
||||
.warning-box-title i {
|
||||
color: #f39c12;
|
||||
color: var(--warning-accent);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.warning-box-content {
|
||||
font-size: 13px;
|
||||
color: #856404;
|
||||
color: var(--warning-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
|
@ -329,7 +363,7 @@
|
|||
.toggle-label span {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
|
@ -345,7 +379,7 @@
|
|||
|
||||
.toggle-help i {
|
||||
font-size: 13px;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
|
|
|||
|
|
@ -4,6 +4,72 @@
|
|||
|
||||
{% block header_scripts %}
|
||||
<style>
|
||||
/* CSS Variables for Dark Mode Support */
|
||||
:root {
|
||||
/* Text colors */
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #475569;
|
||||
--text-muted: #64748b;
|
||||
--text-on-gradient: rgba(255, 255, 255, 0.9);
|
||||
--text-terminal: #e2e8f0;
|
||||
--text-console: #10b981;
|
||||
|
||||
/* Background colors */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9ff;
|
||||
--bg-light: #f3f4f6;
|
||||
--bg-hover: #f8f9ff;
|
||||
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
/* Border colors */
|
||||
--border-color: #e8e9ff;
|
||||
--border-light: #f1f5f9;
|
||||
--border-terminal: #334155;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-color: #667eea;
|
||||
--accent-hover: #5a67d8;
|
||||
--accent-bg: #f3e8ff;
|
||||
--accent-focus: rgba(102, 126, 234, 0.1);
|
||||
--accent-shadow: rgba(102, 126, 234, 0.3);
|
||||
|
||||
/* Status colors */
|
||||
--success-bg: #d1fae5;
|
||||
--success-color: #065f46;
|
||||
--success-border: #a7f3d0;
|
||||
--success-accent: #10b981;
|
||||
|
||||
--danger-bg: #fee2e2;
|
||||
--danger-color: #991b1b;
|
||||
--danger-border: #fecaca;
|
||||
--danger-accent: #ef4444;
|
||||
--danger-hover: #dc2626;
|
||||
|
||||
--warning-bg: #fef3c7;
|
||||
--warning-color: #92400e;
|
||||
--warning-border: #fde68a;
|
||||
|
||||
--info-bg: #dbeafe;
|
||||
--info-color: #1e40af;
|
||||
--info-border: #bfdbfe;
|
||||
|
||||
/* Shadow colors */
|
||||
--shadow-light: rgba(0,0,0,0.05);
|
||||
--shadow-medium: rgba(0,0,0,0.08);
|
||||
--shadow-color: rgba(0,0,0,0.1);
|
||||
|
||||
/* Console/Terminal colors */
|
||||
--console-bg: #1e293b;
|
||||
--console-text: #10b981;
|
||||
--console-border: #334155;
|
||||
--console-scrollbar: #64748b;
|
||||
--console-scrollbar-hover: #94a3b8;
|
||||
|
||||
/* Neutral colors */
|
||||
--neutral-bg: #64748b;
|
||||
--neutral-hover: #475569;
|
||||
--neutral-shadow: rgba(100, 116, 139, 0.3);
|
||||
}
|
||||
.modern-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -14,12 +80,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--bg-gradient);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -89,29 +155,29 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-on-gradient);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.log-viewer-panel {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light), 0 10px 40px var(--shadow-medium);
|
||||
border: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
color: var(--bg-primary);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #334155;
|
||||
border-bottom: 1px solid var(--console-border);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
|
|
@ -120,18 +186,18 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: #e2e8f0;
|
||||
color: var(--text-terminal);
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #334155;
|
||||
background: var(--console-border);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.log-stats {
|
||||
|
|
@ -149,12 +215,12 @@
|
|||
}
|
||||
|
||||
.stat-value {
|
||||
color: #e2e8f0;
|
||||
color: var(--text-terminal);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-secondary);
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
display: flex;
|
||||
|
|
@ -178,7 +244,7 @@
|
|||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem 0.5rem 2.5rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -222,7 +288,7 @@
|
|||
}
|
||||
|
||||
.log-textarea::placeholder {
|
||||
color: #475569;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.log-line-numbers {
|
||||
|
|
@ -231,13 +297,13 @@
|
|||
top: 1.5rem;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
color: #475569;
|
||||
color: var(--text-secondary);
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
user-select: none;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid #334155;
|
||||
border-right: 1px solid var(--console-border);
|
||||
}
|
||||
|
||||
.log-content-wrapper {
|
||||
|
|
@ -245,9 +311,9 @@
|
|||
}
|
||||
|
||||
.action-bar {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-secondary);
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -268,43 +334,43 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
background: var(--accent-color);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
background: var(--accent-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--danger-accent);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #64748b;
|
||||
color: white;
|
||||
background: var(--neutral-bg);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #475569;
|
||||
background: var(--neutral-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
|
||||
box-shadow: 0 4px 12px var(--neutral-shadow);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
border-top: 2px solid var(--accent-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -326,15 +392,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg);
|
||||
color: var(--success-color);
|
||||
border: 1px solid var(--success-border);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg);
|
||||
color: var(--danger-color);
|
||||
border: 1px solid var(--danger-border);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
|
|
@ -344,7 +410,7 @@
|
|||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
color: #64748b;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
|
|
@ -357,12 +423,12 @@
|
|||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #475569;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
|
|
@ -371,25 +437,25 @@
|
|||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track {
|
||||
background: #334155;
|
||||
background: var(--console-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: #64748b;
|
||||
background: var(--neutral-bg);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
background: var(--console-scrollbar-hover);
|
||||
}
|
||||
|
||||
/* Log Level Colors */
|
||||
.log-error { color: #ef4444; }
|
||||
.log-warning { color: #f59e0b; }
|
||||
.log-info { color: #3b82f6; }
|
||||
.log-error { color: var(--danger-accent); }
|
||||
.log-warning { color: var(--warning-color); }
|
||||
.log-info { color: var(--info-color); }
|
||||
.log-debug { color: #8b5cf6; }
|
||||
.log-success { color: #10b981; }
|
||||
.log-success { color: var(--success-accent); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,66 @@
|
|||
<!-- Current language: {{ LANGUAGE_CODE }} -->
|
||||
|
||||
<style>
|
||||
/* CSS Variables for Dark Mode Support */
|
||||
:root {
|
||||
/* LiteSpeed-specific gradient colors */
|
||||
--ls-gradient-start: #667eea;
|
||||
--ls-gradient-end: #764ba2;
|
||||
|
||||
/* Text colors */
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #475569;
|
||||
--text-muted: #64748b;
|
||||
--text-on-gradient: rgba(255, 255, 255, 0.9);
|
||||
|
||||
/* Background colors */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9ff;
|
||||
--bg-light: #f3f4f6;
|
||||
--bg-hover: #f8f9ff;
|
||||
--bg-gradient: linear-gradient(135deg, var(--ls-gradient-start) 0%, var(--ls-gradient-end) 100%);
|
||||
|
||||
/* Border colors */
|
||||
--border-color: #e8e9ff;
|
||||
--border-light: #f1f5f9;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-color: #667eea;
|
||||
--accent-hover: #764ba2;
|
||||
--accent-bg: #f3e8ff;
|
||||
--accent-focus: rgba(102, 126, 234, 0.1);
|
||||
--accent-shadow: rgba(102, 126, 234, 0.3);
|
||||
|
||||
/* Status colors */
|
||||
--success-bg: #d1fae5;
|
||||
--success-color: #065f46;
|
||||
--success-border: #a7f3d0;
|
||||
--success-accent: #4ade80;
|
||||
--success-dark: #10b981;
|
||||
|
||||
--danger-bg: #fee2e2;
|
||||
--danger-color: #991b1b;
|
||||
--danger-border: #fecaca;
|
||||
--danger-accent: #dc2626;
|
||||
--danger-hover: #b91c1c;
|
||||
|
||||
--warning-bg: #fef3c7;
|
||||
--warning-color: #92400e;
|
||||
--warning-border: #fde68a;
|
||||
|
||||
--info-bg: #dbeafe;
|
||||
--info-color: #1e40af;
|
||||
--info-border: #bfdbfe;
|
||||
|
||||
/* Shadow colors */
|
||||
--shadow-light: rgba(0,0,0,0.05);
|
||||
--shadow-medium: rgba(0,0,0,0.08);
|
||||
--shadow-color: rgba(0,0,0,0.1);
|
||||
|
||||
/* Console colors */
|
||||
--console-bg: #1e293b;
|
||||
--console-text: #10b981;
|
||||
}
|
||||
.modern-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -18,12 +78,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--bg-gradient);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -66,7 +126,7 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-on-gradient);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -86,7 +146,7 @@
|
|||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #4ade80;
|
||||
background: var(--success-accent);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
|
|
@ -98,10 +158,10 @@
|
|||
}
|
||||
|
||||
.info-card {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light), 0 10px 40px var(--shadow-medium);
|
||||
border: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
|
|
@ -109,12 +169,12 @@
|
|||
|
||||
.info-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 6px var(--shadow-light), 0 20px 60px var(--shadow-color);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: var(--bg-gradient);
|
||||
color: var(--bg-primary);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -152,24 +212,24 @@
|
|||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 2px solid #e8e9ff;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.process-table td {
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #1e293b;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
color: var(--text-primary);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.process-id {
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.process-badge {
|
||||
|
|
@ -181,18 +241,18 @@
|
|||
}
|
||||
|
||||
.badge-main {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.badge-worker {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
background: var(--info-bg);
|
||||
color: var(--info-color);
|
||||
}
|
||||
|
||||
.badge-lscgid {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
|
|
@ -220,18 +280,18 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #764ba2;
|
||||
background: var(--accent-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc2626;
|
||||
background: var(--danger-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #b91c1c;
|
||||
background: var(--danger-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
|
@ -243,7 +303,7 @@
|
|||
}
|
||||
|
||||
.version-info {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -252,7 +312,7 @@
|
|||
.version-header {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -266,19 +326,19 @@
|
|||
}
|
||||
|
||||
.module-item {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color);
|
||||
font-size: 0.875rem;
|
||||
color: #475569;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.module-item:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.alert {
|
||||
|
|
@ -307,38 +367,38 @@
|
|||
|
||||
.alert-message {
|
||||
font-size: 0.875rem;
|
||||
color: #475569;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
border: 1px solid #a7f3d0;
|
||||
color: #065f46;
|
||||
background: var(--success-bg);
|
||||
border: 1px solid var(--success-border);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg);
|
||||
border: 1px solid var(--danger-border);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: #fef3c7;
|
||||
border: 1px solid #fde68a;
|
||||
color: #92400e;
|
||||
background: var(--warning-bg);
|
||||
border: 1px solid var(--warning-border);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: #dbeafe;
|
||||
border: 1px solid #bfdbfe;
|
||||
color: #1e40af;
|
||||
background: var(--info-bg);
|
||||
border: 1px solid var(--info-border);
|
||||
color: var(--info-color);
|
||||
}
|
||||
|
||||
.license-panel {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light), 0 10px 40px var(--shadow-medium);
|
||||
border: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out 0.2s;
|
||||
animation-fill-mode: both;
|
||||
|
|
@ -361,26 +421,26 @@
|
|||
}
|
||||
|
||||
.license-option:hover {
|
||||
border-color: #667eea;
|
||||
background: #f3e8ff;
|
||||
border-color: var(--accent-color);
|
||||
background: var(--accent-bg);
|
||||
}
|
||||
|
||||
.license-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #f3e8ff;
|
||||
background: var(--accent-bg);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1rem;
|
||||
color: #667eea;
|
||||
color: var(--accent-color);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.license-label {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
|
@ -390,7 +450,7 @@
|
|||
.form-label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -398,24 +458,24 @@
|
|||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px var(--accent-focus);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
border-top: 2px solid var(--accent-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -423,8 +483,8 @@
|
|||
}
|
||||
|
||||
.console-output {
|
||||
background: #1e293b;
|
||||
color: #10b981;
|
||||
background: var(--console-bg);
|
||||
color: var(--console-text);
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
font-size: 0.875rem;
|
||||
padding: 1.5rem;
|
||||
|
|
@ -643,7 +703,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h4 style="font-size: 0.875rem; font-weight: 600; color: #475569; margin: 1.5rem 0 1rem 0; text-transform: uppercase; letter-spacing: 0.05em;">
|
||||
<h4 style="font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin: 1.5rem 0 1rem 0; text-transform: uppercase; letter-spacing: 0.05em;">
|
||||
{{ modules }}
|
||||
</h4>
|
||||
<div class="module-list">
|
||||
|
|
@ -779,7 +839,7 @@
|
|||
<div class="alert alert-warning">
|
||||
<i class="fas fa-exclamation-triangle alert-icon"></i>
|
||||
<div class="alert-content">
|
||||
<div class="alert-title" style="color: #dc2626;">{% trans "Important Warning" %}</div>
|
||||
<div class="alert-title" style="color: var(--danger-accent);">{% trans "Important Warning" %}</div>
|
||||
<div class="alert-message">
|
||||
{% trans "You cannot revert back to OpenLiteSpeed if you choose not to purchase a LiteSpeed Enterprise license after the 15 day trial period. We recommend you test the Enterprise trial on a separate server." %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,62 @@
|
|||
<!-- Current language: {{ LANGUAGE_CODE }} -->
|
||||
|
||||
<style>
|
||||
/* CSS Variables for Dark Mode Support */
|
||||
:root {
|
||||
/* Text colors */
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #475569;
|
||||
--text-muted: #64748b;
|
||||
--text-on-gradient: rgba(255, 255, 255, 0.9);
|
||||
|
||||
/* Background colors */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9ff;
|
||||
--bg-light: #f3f4f6;
|
||||
--bg-hover: #f8f9ff;
|
||||
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
/* Border colors */
|
||||
--border-color: #e8e9ff;
|
||||
--border-light: #f1f5f9;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-color: #667eea;
|
||||
--accent-hover: #764ba2;
|
||||
--accent-bg: #f3e8ff;
|
||||
--accent-focus: rgba(102, 126, 234, 0.1);
|
||||
--accent-shadow: rgba(102, 126, 234, 0.3);
|
||||
|
||||
/* Status colors */
|
||||
--success-bg: #d1fae5;
|
||||
--success-color: #065f46;
|
||||
--success-border: #a7f3d0;
|
||||
--success-accent: #10b981;
|
||||
--success-hover: #059669;
|
||||
|
||||
--danger-bg: #fee2e2;
|
||||
--danger-color: #991b1b;
|
||||
--danger-border: #fecaca;
|
||||
--danger-accent: #dc2626;
|
||||
--danger-hover: #b91c1c;
|
||||
|
||||
--warning-bg: #fef3c7;
|
||||
--warning-color: #92400e;
|
||||
--warning-border: #fde68a;
|
||||
|
||||
--info-bg: #dbeafe;
|
||||
--info-color: #1e40af;
|
||||
--info-border: #bfdbfe;
|
||||
|
||||
/* Shadow colors */
|
||||
--shadow-light: rgba(0,0,0,0.05);
|
||||
--shadow-medium: rgba(0,0,0,0.08);
|
||||
--shadow-color: rgba(0,0,0,0.1);
|
||||
|
||||
/* Console colors */
|
||||
--console-bg: #1e293b;
|
||||
--console-text: #10b981;
|
||||
}
|
||||
.modern-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -18,12 +74,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--bg-gradient);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -66,7 +122,7 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-on-gradient);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -95,18 +151,18 @@
|
|||
}
|
||||
|
||||
.tabs-container {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light), 0 10px 40px var(--shadow-medium);
|
||||
border: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.modern-tabs {
|
||||
display: flex;
|
||||
background: #f8f9ff;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +172,7 @@
|
|||
border: none;
|
||||
background: none;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
color: var(--text-muted);
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -126,13 +182,13 @@
|
|||
}
|
||||
|
||||
.tab-item:hover {
|
||||
color: #667eea;
|
||||
color: var(--accent-color);
|
||||
background: rgba(102, 126, 234, 0.05);
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #667eea;
|
||||
background: white;
|
||||
color: var(--accent-color);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
|
|
@ -142,7 +198,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--bg-gradient);
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
|
|
@ -171,7 +227,7 @@
|
|||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem 0.75rem 2.5rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -179,8 +235,8 @@
|
|||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px var(--accent-focus);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
|
|
@ -188,7 +244,7 @@
|
|||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.control-group {
|
||||
|
|
@ -199,10 +255,10 @@
|
|||
|
||||
.select-control {
|
||||
padding: 0.75rem 2.5rem 0.75rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
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-position: right 0.5rem center;
|
||||
|
|
@ -230,24 +286,24 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #764ba2;
|
||||
background: var(--accent-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #10b981;
|
||||
background: var(--success-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: #059669;
|
||||
background: var(--success-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background: #3b82f6;
|
||||
background: var(--info-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -258,24 +314,24 @@
|
|||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #64748b;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-secondary);
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
.package-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.package-table thead {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-secondary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
|
@ -285,18 +341,18 @@
|
|||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 2px solid #e8e9ff;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.package-table td {
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #1e293b;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
color: var(--text-primary);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.package-table tbody tr {
|
||||
|
|
@ -304,12 +360,12 @@
|
|||
}
|
||||
|
||||
.package-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.package-name {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -320,7 +376,7 @@
|
|||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
background: #f3e8ff;
|
||||
color: #667eea;
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -334,8 +390,8 @@
|
|||
}
|
||||
|
||||
.upgrade-badge {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg);
|
||||
color: var(--success-color);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -400,7 +456,7 @@
|
|||
|
||||
.pagination-info {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
|
|
@ -411,7 +467,7 @@
|
|||
|
||||
.page-select {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
|
@ -432,7 +488,7 @@
|
|||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 16px;
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
|
|
@ -443,8 +499,8 @@
|
|||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: var(--bg-gradient);
|
||||
color: var(--bg-primary);
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -499,8 +555,8 @@
|
|||
}
|
||||
|
||||
.detail-output {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
|
|
@ -513,7 +569,7 @@
|
|||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
color: #64748b;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
|
|
@ -526,7 +582,7 @@
|
|||
justify-content: center;
|
||||
margin: 0 auto 1rem;
|
||||
font-size: 2rem;
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.alert {
|
||||
|
|
@ -541,8 +597,8 @@
|
|||
|
||||
.alert-info {
|
||||
background: #dbeafe;
|
||||
border: 1px solid #bfdbfe;
|
||||
color: #1e40af;
|
||||
border: 1px solid var(--info-border);
|
||||
color: var(--info-color);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,61 @@
|
|||
|
||||
{% block header_scripts %}
|
||||
<style>
|
||||
/* CSS Variables for Dark Mode Support */
|
||||
:root {
|
||||
/* Text colors */
|
||||
--text-primary: #2f3640;
|
||||
--text-secondary: #64748b;
|
||||
--text-muted: #8893a7;
|
||||
|
||||
/* Background colors */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9ff;
|
||||
--bg-light: #f3f4f6;
|
||||
--bg-hover: #f8f9ff;
|
||||
|
||||
/* Border colors */
|
||||
--border-color: #e8e9ff;
|
||||
--border-light: #f1f5f9;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-color: #5856d6;
|
||||
--accent-hover: #4b4fbf;
|
||||
--accent-bg: #f3e8ff;
|
||||
--accent-focus: rgba(88, 86, 214, 0.1);
|
||||
--accent-shadow: rgba(88, 86, 214, 0.3);
|
||||
|
||||
/* Status colors */
|
||||
--success-bg: #d1fae5;
|
||||
--success-color: #065f46;
|
||||
--success-border: #a7f3d0;
|
||||
--success-accent: #10b981;
|
||||
--success-hover: #059669;
|
||||
|
||||
--danger-bg: #fee2e2;
|
||||
--danger-color: #991b1b;
|
||||
--danger-border: #fecaca;
|
||||
--danger-accent: #ef4444;
|
||||
|
||||
--warning-bg: #fef3c7;
|
||||
--warning-color: #92400e;
|
||||
--warning-accent: #f59e0b;
|
||||
--warning-hover: #d97706;
|
||||
|
||||
--info-bg: #dbeafe;
|
||||
--info-color: #1e40af;
|
||||
--info-border: #bfdbfe;
|
||||
|
||||
/* Shadow colors */
|
||||
--shadow-light: rgba(0,0,0,0.08);
|
||||
--shadow-medium: rgba(0,0,0,0.1);
|
||||
|
||||
/* Neutral colors */
|
||||
--neutral-bg: #6b7280;
|
||||
--neutral-hover: #4b5563;
|
||||
--neutral-shadow: rgba(107, 114, 128, 0.3);
|
||||
}
|
||||
|
||||
/* Services Status Specific Styles */
|
||||
.services-wrapper {
|
||||
background: transparent;
|
||||
|
|
@ -17,18 +72,18 @@
|
|||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
box-shadow: 0 2px 8px var(--shadow-light);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -45,7 +100,7 @@
|
|||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
box-shadow: 0 4px 12px rgba(88,86,214,0.3);
|
||||
box-shadow: 0 4px 12px var(--accent-shadow);
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
|
|
@ -56,18 +111,18 @@
|
|||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
box-shadow: 0 2px 8px var(--shadow-light);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -90,8 +145,8 @@
|
|||
}
|
||||
|
||||
.service-card {
|
||||
background: white;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -101,16 +156,16 @@
|
|||
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
|
||||
border-color: #5856d6;
|
||||
box-shadow: 0 8px 24px var(--shadow-medium);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.service-card.running {
|
||||
border-top: 4px solid #10b981;
|
||||
border-top: 4px solid var(--success-accent);
|
||||
}
|
||||
|
||||
.service-card.stopped {
|
||||
border-top: 4px solid #ef4444;
|
||||
border-top: 4px solid var(--danger-accent);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
|
|
@ -139,7 +194,7 @@
|
|||
.service-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -154,22 +209,22 @@
|
|||
}
|
||||
|
||||
.service-status.running {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.service-status.running i {
|
||||
color: #10b981;
|
||||
color: var(--success-accent);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.service-status.stopped {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.service-status.stopped i {
|
||||
color: #ef4444;
|
||||
color: var(--danger-accent);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
|
@ -191,7 +246,7 @@
|
|||
}
|
||||
|
||||
.service-stats strong {
|
||||
color: #5856d6;
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -220,36 +275,36 @@
|
|||
}
|
||||
|
||||
.action-btn.start {
|
||||
background: #10b981;
|
||||
background: var(--success-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.start:hover:not(:disabled) {
|
||||
background: #059669;
|
||||
background: var(--success-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(16,185,129,0.3);
|
||||
}
|
||||
|
||||
.action-btn.stop {
|
||||
background: #f59e0b;
|
||||
background: var(--warning-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.stop:hover:not(:disabled) {
|
||||
background: #d97706;
|
||||
background: var(--warning-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(245,158,11,0.3);
|
||||
}
|
||||
|
||||
.action-btn.restart {
|
||||
background: #6b7280;
|
||||
background: var(--neutral-bg);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.restart:hover:not(:disabled) {
|
||||
background: #4b5563;
|
||||
background: var(--neutral-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(107,114,128,0.3);
|
||||
box-shadow: 0 4px 12px var(--neutral-shadow);
|
||||
}
|
||||
|
||||
/* Alert Messages */
|
||||
|
|
@ -273,31 +328,31 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
background: var(--success-bg);
|
||||
color: var(--success-color);
|
||||
border: 1px solid var(--success-border);
|
||||
}
|
||||
|
||||
.alert-success .alert-icon {
|
||||
color: #10b981;
|
||||
color: var(--success-accent);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--danger-bg);
|
||||
color: var(--danger-color);
|
||||
border: 1px solid var(--danger-border);
|
||||
}
|
||||
|
||||
.alert-danger .alert-icon {
|
||||
color: #ef4444;
|
||||
color: var(--danger-accent);
|
||||
}
|
||||
|
||||
/* Loading Spinner */
|
||||
.loading-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid #e8e9ff;
|
||||
border-top-color: #5856d6;
|
||||
border: 3px solid var(--border-color);
|
||||
border-top-color: var(--accent-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -335,7 +390,7 @@
|
|||
.overview-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #5856d6;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
|
|
|||
|
|
@ -8,6 +8,62 @@
|
|||
<!-- Current language: {{ LANGUAGE_CODE }} -->
|
||||
|
||||
<style>
|
||||
/* CSS Variables for Dark Mode Support */
|
||||
:root {
|
||||
/* Text colors */
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #475569;
|
||||
--text-muted: #64748b;
|
||||
--text-on-gradient: rgba(255, 255, 255, 0.9);
|
||||
|
||||
/* Background colors */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9ff;
|
||||
--bg-light: #f3f4f6;
|
||||
--bg-hover: #f8f9ff;
|
||||
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
/* Border colors */
|
||||
--border-color: #e8e9ff;
|
||||
--border-light: #f1f5f9;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-color: #667eea;
|
||||
--accent-hover: #764ba2;
|
||||
--accent-bg: #f3e8ff;
|
||||
--accent-focus: rgba(102, 126, 234, 0.1);
|
||||
--accent-shadow: rgba(102, 126, 234, 0.3);
|
||||
|
||||
/* Status colors */
|
||||
--success-bg: #d1fae5;
|
||||
--success-color: #065f46;
|
||||
--success-border: #a7f3d0;
|
||||
--success-accent: #4ade80;
|
||||
--success-dark: #10b981;
|
||||
|
||||
--danger-bg: #fee2e2;
|
||||
--danger-color: #991b1b;
|
||||
--danger-border: #fecaca;
|
||||
--danger-accent: #dc2626;
|
||||
--danger-hover: #b91c1c;
|
||||
|
||||
--warning-bg: #fef3c7;
|
||||
--warning-color: #92400e;
|
||||
--warning-border: #fde68a;
|
||||
|
||||
--info-bg: #dbeafe;
|
||||
--info-color: #1e40af;
|
||||
--info-border: #bfdbfe;
|
||||
|
||||
/* Shadow colors */
|
||||
--shadow-light: rgba(0,0,0,0.05);
|
||||
--shadow-medium: rgba(0,0,0,0.08);
|
||||
--shadow-color: rgba(0,0,0,0.1);
|
||||
|
||||
/* Console colors */
|
||||
--console-bg: #1e293b;
|
||||
--console-text: #10b981;
|
||||
}
|
||||
.modern-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -18,12 +74,12 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--bg-gradient);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
|
|
@ -66,7 +122,7 @@
|
|||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-on-gradient);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -85,7 +141,7 @@
|
|||
.refresh-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #4ade80;
|
||||
background: var(--success-accent);
|
||||
border-radius: 50%;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
|
@ -98,10 +154,10 @@
|
|||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light), 0 10px 40px var(--shadow-medium);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
|
|
@ -111,7 +167,7 @@
|
|||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 6px var(--shadow-light), 0 20px 60px var(--shadow-color);
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
|
|
@ -121,7 +177,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--bg-gradient);
|
||||
}
|
||||
|
||||
.stat-header {
|
||||
|
|
@ -133,7 +189,7 @@
|
|||
|
||||
.stat-title {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -143,12 +199,12 @@
|
|||
.stat-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #f3e8ff;
|
||||
background: var(--accent-bg);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #667eea;
|
||||
color: var(--accent-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -167,7 +223,7 @@
|
|||
.stat-value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
|
|
@ -176,18 +232,18 @@
|
|||
}
|
||||
|
||||
.processes-panel {
|
||||
background: white;
|
||||
background: var(--bg-primary);
|
||||
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;
|
||||
box-shadow: 0 1px 3px var(--shadow-light), 0 10px 40px var(--shadow-medium);
|
||||
border: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out 0.2s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: var(--bg-gradient);
|
||||
color: var(--bg-primary);
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -250,7 +306,7 @@
|
|||
.modern-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
|
@ -258,18 +314,18 @@
|
|||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.modern-table td {
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #1e293b;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
color: var(--text-primary);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.modern-table tbody tr {
|
||||
|
|
@ -277,7 +333,7 @@
|
|||
}
|
||||
|
||||
.modern-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.process-user {
|
||||
|
|
@ -289,14 +345,14 @@
|
|||
.user-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #e8e9ff;
|
||||
background: var(--border-color);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.process-state {
|
||||
|
|
@ -308,23 +364,23 @@
|
|||
}
|
||||
|
||||
.state-running {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.state-sleeping {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
background: var(--info-bg);
|
||||
color: var(--info-color);
|
||||
}
|
||||
|
||||
.state-stopped {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.state-zombie {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.cpu-usage {
|
||||
|
|
@ -336,7 +392,7 @@
|
|||
.usage-bar {
|
||||
width: 60px;
|
||||
height: 6px;
|
||||
background: #e5e7eb;
|
||||
background: var(--bg-light);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
@ -344,7 +400,7 @@
|
|||
|
||||
.usage-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--bg-gradient);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -363,7 +419,7 @@
|
|||
.kill-button {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
background: #dc2626;
|
||||
background: var(--danger-accent);
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -376,7 +432,7 @@
|
|||
}
|
||||
|
||||
.kill-button:hover {
|
||||
background: #b91c1c;
|
||||
background: var(--danger-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
|
@ -398,7 +454,7 @@
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #667eea;
|
||||
border-top: 3px solid var(--accent-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
|
@ -414,18 +470,18 @@
|
|||
}
|
||||
|
||||
.metric-high {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.metric-medium {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.metric-low {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
|
@ -537,7 +593,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e8e9ff;">
|
||||
<div style="font-size: 0.75rem; color: #64748b;">
|
||||
<div style="font-size: 0.75rem; color: var(--text-muted);">
|
||||
<strong>{% trans "Model:" %}</strong> {$ modelName || '-' $}<br>
|
||||
<strong>{% trans "Cache:" %}</strong> {$ cacheSize || '-' $}
|
||||
</div>
|
||||
|
|
@ -560,15 +616,15 @@
|
|||
<span class="stat-label">{% trans "Total" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #10b981;">{$ runningProcesses || '0' $}</span>
|
||||
<span class="stat-value" style="color: var(--success-dark);">{$ runningProcesses || '0' $}</span>
|
||||
<span class="stat-label">{% trans "Running" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #3b82f6;">{$ sleepingProcesses || '0' $}</span>
|
||||
<span class="stat-value" style="color: var(--info-color);">{$ sleepingProcesses || '0' $}</span>
|
||||
<span class="stat-label">{% trans "Sleeping" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #ef4444;">
|
||||
<span class="stat-value" style="color: var(--danger-accent);">
|
||||
<span ng-if="zombieProcesses > 0">{$ zombieProcesses $}</span>
|
||||
<span ng-if="!zombieProcesses || zombieProcesses == 0">0</span>
|
||||
</span>
|
||||
|
|
@ -623,11 +679,11 @@
|
|||
<span class="stat-label">{% trans "Total" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #10b981;">{$ freeMemory || '-' $}</span>
|
||||
<span class="stat-value" style="color: var(--success-dark);">{$ freeMemory || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Free" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #ef4444;">{$ usedMemory || '-' $}</span>
|
||||
<span class="stat-value" style="color: var(--danger-accent);">{$ usedMemory || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Used" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
|
|
@ -653,11 +709,11 @@
|
|||
<span class="stat-label">{% trans "Total" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #10b981;">{$ swapFreeMemory || '-' $}</span>
|
||||
<span class="stat-value" style="color: var(--success-dark);">{$ swapFreeMemory || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Free" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #ef4444;">{$ swapUsedMemory || '-' $}</span>
|
||||
<span class="stat-value" style="color: var(--danger-accent);">{$ swapUsedMemory || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Used" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
|
|
@ -730,7 +786,7 @@
|
|||
<tbody>
|
||||
<tr ng-repeat="process in processes | filter:search">
|
||||
<td>
|
||||
<span style="font-weight: 600; color: #667eea;">{$ process.PID $}</span>
|
||||
<span style="font-weight: 600; color: var(--accent-color);">{$ process.PID $}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="process-user">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: var(--bg-gradient, linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%));
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.1) 0%, transparent 50%);
|
||||
background: radial-gradient(circle at 70% 30%, var(--accent-bg, rgba(91, 95, 207, 0.1)) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
.page-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -55,34 +55,34 @@
|
|||
.server-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: white;
|
||||
background: var(--bg-light, white);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tuning-panel {
|
||||
background: white;
|
||||
background: var(--bg-light, 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;
|
||||
box-shadow: var(--shadow-light, 0 1px 3px rgba(0,0,0,0.05)), var(--shadow-medium, 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: var(--bg-gradient, linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%));
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-light, #e8e9ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
.panel-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
|
@ -103,17 +103,17 @@
|
|||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, #fff);
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -138,12 +138,12 @@
|
|||
.section-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #f0f1ff;
|
||||
background: var(--accent-bg, #f0f1ff);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
color: var(--text-secondary, #475569);
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
}
|
||||
|
||||
.tooltip-icon {
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
font-size: 0.875rem;
|
||||
cursor: help;
|
||||
position: relative;
|
||||
|
|
@ -184,8 +184,8 @@
|
|||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
background: var(--text-primary, #1e293b);
|
||||
color: var(--bg-light, white);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -201,23 +201,24 @@
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #1e293b;
|
||||
border-top-color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
background: var(--bg-light, #fff);
|
||||
color: var(--text-primary, inherit);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
|
||||
border-color: var(--accent-focus, #5b5fcf);
|
||||
box-shadow: var(--accent-shadow, 0 0 0 3px rgba(91, 95, 207, 0.1));
|
||||
}
|
||||
|
||||
.select-control {
|
||||
|
|
@ -237,13 +238,13 @@
|
|||
|
||||
.input-addon {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.current-value {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
color: var(--text-muted, #64748b);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
|
|
@ -252,7 +253,7 @@
|
|||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
border-top: 1px solid var(--border-light, #e8e9ff);
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -269,32 +270,32 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-light, white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
|
||||
box-shadow: var(--accent-shadow, 0 4px 12px rgba(91, 95, 207, 0.4));
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #64748b;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, white);
|
||||
color: var(--text-secondary, #64748b);
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #cbd5e1;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--border-color, #cbd5e1);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #e8e9ff;
|
||||
border-top: 2px solid #5b5fcf;
|
||||
border: 2px solid var(--border-light, #e8e9ff);
|
||||
border-top: 2px solid var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
|
@ -324,25 +325,25 @@
|
|||
|
||||
.alert-message {
|
||||
font-size: 0.875rem;
|
||||
color: #475569;
|
||||
color: var(--text-secondary, #475569);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
border: 1px solid #a7f3d0;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
color: var(--success-text, #065f46);
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
color: var(--danger-text, #991b1b);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: #fef3c7;
|
||||
border: 1px solid #fde68a;
|
||||
color: #92400e;
|
||||
background: var(--warning-bg, #fef3c7);
|
||||
border: 1px solid var(--warning-border, #fde68a);
|
||||
color: var(--warning-text, #92400e);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
|
|
@ -353,8 +354,8 @@
|
|||
}
|
||||
|
||||
.stat-card {
|
||||
background: #f8f9ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, #f8f9ff);
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
|
|
@ -363,13 +364,13 @@
|
|||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
color: var(--text-muted, #64748b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -442,7 +443,7 @@
|
|||
<div class="header-content">
|
||||
<h1 class="page-title">
|
||||
<div class="server-icon">
|
||||
<i class="fas fa-server" style="color: #5b5fcf; font-size: 1.75rem;"></i>
|
||||
<i class="fas fa-server" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
|
||||
</div>
|
||||
{% trans "LiteSpeed Tuning" %}
|
||||
</h1>
|
||||
|
|
@ -460,14 +461,14 @@
|
|||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">
|
||||
<span ng-if="connectionTimeOut">{$ connectionTimeOut $}<span style="font-size: 1rem;">s</span></span>
|
||||
<span ng-if="connectionTimeOut">{$ connectionTimeOut $}<span style="font-size: 1rem; color: var(--text-muted, inherit);">s</span></span>
|
||||
<span ng-if="!connectionTimeOut">-</span>
|
||||
</div>
|
||||
<div class="stat-label">{% trans "Connection Timeout" %}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">
|
||||
<span ng-if="cacheSizeInMemory !== undefined">{$ cacheSizeInMemory $}<span style="font-size: 1rem;">M</span></span>
|
||||
<span ng-if="cacheSizeInMemory !== undefined">{$ cacheSizeInMemory $}<span style="font-size: 1rem; color: var(--text-muted, inherit);">M</span></span>
|
||||
<span ng-if="cacheSizeInMemory === undefined">-</span>
|
||||
</div>
|
||||
<div class="stat-label">{% trans "Cache Size" %}</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
background: var(--bg-gradient, linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%));
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(91, 95, 207, 0.1) 0%, transparent 50%);
|
||||
background: radial-gradient(circle at 70% 30%, var(--accent-shadow, rgba(91, 95, 207, 0.1)) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
.page-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -55,26 +55,26 @@
|
|||
.php-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: white;
|
||||
background: var(--bg-light, white);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.selector-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
|
|
@ -90,18 +90,18 @@
|
|||
.selector-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #5b5fcf 0%, #4547a9 100%);
|
||||
background: var(--accent-bg, linear-gradient(135deg, #5b5fcf 0%, #4547a9 100%));
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
color: var(--bg-light, white);
|
||||
}
|
||||
|
||||
.selector-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.selector-form {
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
color: var(--text-secondary, #475569);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
|
|
@ -125,17 +125,18 @@
|
|||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
background: var(--bg-light, #fff);
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.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: var(--accent-focus, 0 0 0 3px rgba(91, 95, 207, 0.1));
|
||||
}
|
||||
|
||||
.select-control {
|
||||
|
|
@ -161,34 +162,34 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: var(--bg-light, white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4547a9;
|
||||
background: var(--accent-hover, #4547a9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
|
||||
box-shadow: var(--accent-shadow, 0 4px 12px rgba(91, 95, 207, 0.3));
|
||||
}
|
||||
|
||||
.tuning-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;
|
||||
box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out 0.2s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
|
||||
color: #1e293b;
|
||||
background: var(--bg-gradient, linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%));
|
||||
color: var(--text-primary, #1e293b);
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-light, #e8e9ff);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
|
|
@ -200,12 +201,12 @@
|
|||
}
|
||||
|
||||
.php-version-badge {
|
||||
background: #fff;
|
||||
background: var(--bg-light, #fff);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
border: 1px solid #e8e9ff;
|
||||
color: var(--text-secondary, #64748b);
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
}
|
||||
|
||||
.form-section {
|
||||
|
|
@ -218,24 +219,24 @@
|
|||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-light, #e8e9ff);
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #f3e8ff;
|
||||
background: var(--accent-bg, #f3e8ff);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
|
|
@ -252,7 +253,7 @@
|
|||
|
||||
.field-label {
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
color: var(--text-secondary, #475569);
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -260,7 +261,7 @@
|
|||
}
|
||||
|
||||
.tooltip-icon {
|
||||
color: #94a3b8;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
font-size: 0.875rem;
|
||||
cursor: help;
|
||||
position: relative;
|
||||
|
|
@ -276,8 +277,8 @@
|
|||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
background: var(--text-primary, #1e293b);
|
||||
color: var(--bg-light, white);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -294,7 +295,7 @@
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #1e293b;
|
||||
border-top-color: var(--text-primary, #1e293b);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
|
|
@ -305,13 +306,13 @@
|
|||
|
||||
.input-addon {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.current-value {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
color: var(--text-muted, #64748b);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
|
|
@ -335,7 +336,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #cbd5e1;
|
||||
background-color: var(--border-color, #cbd5e1);
|
||||
transition: .4s;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
|
@ -347,13 +348,13 @@
|
|||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
background-color: var(--bg-light, white);
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .toggle-slider {
|
||||
background-color: #5b5fcf;
|
||||
background-color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
input:checked + .toggle-slider:before {
|
||||
|
|
@ -365,26 +366,26 @@
|
|||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding: 2rem;
|
||||
background: #f8f9ff;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
background: var(--bg-gradient, #f8f9ff);
|
||||
border-top: 1px solid var(--border-light, #e8e9ff);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #64748b;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-light, white);
|
||||
color: var(--text-secondary, #64748b);
|
||||
border: 1px solid var(--border-light, #e8e9ff);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #cbd5e1;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--border-color, #cbd5e1);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #5b5fcf;
|
||||
border: 2px solid var(--border-light, #f3f3f3);
|
||||
border-top: 2px solid var(--accent-color, #5b5fcf);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
|
|
@ -416,37 +417,37 @@
|
|||
|
||||
.alert-message {
|
||||
font-size: 0.875rem;
|
||||
color: #475569;
|
||||
color: var(--text-secondary, #475569);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
border: 1px solid #a7f3d0;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
border: 1px solid var(--success-border, #a7f3d0);
|
||||
color: var(--success-text, #065f46);
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
border: 1px solid var(--danger-border, #fecaca);
|
||||
color: var(--danger-text, #991b1b);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: #dbeafe;
|
||||
border: 1px solid #bfdbfe;
|
||||
color: #1e40af;
|
||||
background: var(--info-bg, #dbeafe);
|
||||
border: 1px solid var(--info-border, #bfdbfe);
|
||||
color: var(--info-text, #1e40af);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #f3f4f6;
|
||||
background: var(--bg-hover, #f3f4f6);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -517,7 +518,7 @@
|
|||
<div class="header-content">
|
||||
<h1 class="page-title">
|
||||
<div class="php-icon">
|
||||
<i class="fab fa-php" style="color: #5b5fcf; font-size: 1.75rem;"></i>
|
||||
<i class="fab fa-php" style="color: var(--accent-color, #5b5fcf); font-size: 1.75rem;"></i>
|
||||
</div>
|
||||
{% trans "PHP Tuning" %}
|
||||
</h1>
|
||||
|
|
@ -813,9 +814,9 @@
|
|||
<div class="tuning-panel" ng-show="hideDetails">
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-code" style="font-size: 2rem; color: #5b5fcf;"></i>
|
||||
<i class="fas fa-code" style="font-size: 2rem; color: var(--accent-color, #5b5fcf);"></i>
|
||||
</div>
|
||||
<h3 style="color: #1e293b; margin-bottom: 0.5rem;">{% trans "No PHP Version Selected" %}</h3>
|
||||
<h3 style="color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">{% trans "No PHP Version Selected" %}</h3>
|
||||
<p>
|
||||
{% if OLS %}
|
||||
{% trans "Select a domain from the dropdown above to configure its PHP settings" %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue