dark mode
This commit is contained in:
usmannasir
parent
1abf49d0b7
commit
f95a83f305
|
|
@ -22,29 +22,29 @@
|
|||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-heading, #2f3640);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 14px;
|
||||
color: #8893a7;
|
||||
color: var(--text-secondary, #8893a7);
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.content-card {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-heading, #2f3640);
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -77,26 +77,26 @@
|
|||
.form-control {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #e8e9ff;
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #2f3640;
|
||||
background: white;
|
||||
color: var(--text-primary, #2f3640);
|
||||
background: var(--bg-secondary, white);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:hover {
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
|
||||
}
|
||||
|
||||
.form-control[readonly] {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
@ -116,12 +116,12 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4a4fc4;
|
||||
background: var(--accent-hover, #4a4fc4);
|
||||
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc3545;
|
||||
background: var(--danger-text, #dc3545);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -149,14 +149,14 @@
|
|||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f8f9ff;
|
||||
color: #5b5fcf;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #eef0ff;
|
||||
border-color: #5b5fcf;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
|
|
@ -171,22 +171,22 @@
|
|||
padding: 12px 15px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
border-bottom: 2px solid #e8e9ff;
|
||||
background: #f8f9ff;
|
||||
border-bottom: 2px solid var(--border-color, #e8e9ff);
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.modern-table td {
|
||||
padding: 12px 15px;
|
||||
font-size: 13px;
|
||||
color: #2f3640;
|
||||
border-bottom: 1px solid #f0f0ff;
|
||||
color: var(--text-primary, #2f3640);
|
||||
border-bottom: 1px solid var(--border-color, #f0f0ff);
|
||||
}
|
||||
|
||||
.modern-table tr:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
|
|
@ -203,12 +203,13 @@
|
|||
.modal-content {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 8px 32px var(--shadow-color, rgba(0,0,0,0.1));
|
||||
background: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.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 25px;
|
||||
}
|
||||
|
|
@ -216,7 +217,7 @@
|
|||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-heading, #2f3640);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
|
@ -227,8 +228,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 25px;
|
||||
display: flex;
|
||||
|
|
@ -264,9 +265,9 @@
|
|||
}
|
||||
|
||||
.alert-info {
|
||||
background: #e3f2fd;
|
||||
background: var(--info-bg, #e3f2fd);
|
||||
border: 1px solid #bbdefb;
|
||||
color: #1565c0;
|
||||
color: var(--info-text, #1565c0);
|
||||
}
|
||||
|
||||
/* Form row */
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@
|
|||
}
|
||||
|
||||
.docker-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-heading, #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;
|
||||
}
|
||||
|
||||
.docker-description {
|
||||
color: #8893a7;
|
||||
color: var(--text-secondary, #8893a7);
|
||||
font-size: 14px;
|
||||
margin-bottom: 25px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -54,8 +54,8 @@
|
|||
|
||||
/* Form Styles */
|
||||
.form-container {
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #fafbff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
text-align: right;
|
||||
|
|
@ -84,22 +84,22 @@
|
|||
width: 100%;
|
||||
max-width: 400px;
|
||||
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;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: #94a3b8;
|
||||
color: var(--text-secondary, #94a3b8);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
|
@ -109,8 +109,8 @@
|
|||
|
||||
/* Resource Configuration Section */
|
||||
.resource-section {
|
||||
background: white;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-secondary, white);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
.resource-header {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-heading, #2f3640);
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -131,12 +131,12 @@
|
|||
.resource-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #e8e9ff;
|
||||
background: var(--bg-hover, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #5b5fcf;
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.resource-grid {
|
||||
|
|
@ -147,8 +147,8 @@
|
|||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
border: 1px solid #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--accent-color, #5b5fcf);
|
||||
color: white;
|
||||
padding: 12px 32px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -163,15 +163,15 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4b4fbf;
|
||||
border-color: #4b4fbf;
|
||||
background: var(--accent-hover, #4b4fbf);
|
||||
border-color: var(--accent-hover, #4b4fbf);
|
||||
box-shadow: 0 3px 8px rgba(91,95,207,0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #94a3b8;
|
||||
border-color: #94a3b8;
|
||||
background: var(--text-secondary, #94a3b8);
|
||||
border-color: var(--text-secondary, #94a3b8);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -202,15 +202,15 @@
|
|||
|
||||
/* Progress Section */
|
||||
.progress-section {
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #fafbff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
background: #f0f9ff;
|
||||
background: var(--info-bg, #f0f9ff);
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
.status-message h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #0369a1;
|
||||
color: var(--info-text, #0369a1);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -233,7 +233,7 @@
|
|||
}
|
||||
|
||||
.progress-bar {
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
height: 100%;
|
||||
transition: width 0.3s ease;
|
||||
display: flex;
|
||||
|
|
@ -253,15 +253,15 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #f0f9ff;
|
||||
background: var(--success-bg, #f0f9ff);
|
||||
border: 1px solid #bae6fd;
|
||||
color: #0c4a6e;
|
||||
color: var(--success-text, #0c4a6e);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fef2f2;
|
||||
background: var(--danger-bg, #fef2f2);
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
color: var(--danger-text, #991b1b);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
|
|
@ -271,19 +271,19 @@
|
|||
}
|
||||
|
||||
.error-text {
|
||||
color: #ef4444;
|
||||
color: var(--danger-text, #ef4444);
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Info Boxes */
|
||||
.info-box {
|
||||
background: #f0f9ff;
|
||||
background: var(--info-bg, #f0f9ff);
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
color: #0c4a6e;
|
||||
color: var(--info-text, #0c4a6e);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -80,13 +80,13 @@
|
|||
}
|
||||
|
||||
.info-box {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-secondary, #fff);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: var(--box-shadow);
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
|
||||
transition: var(--transition, all 0.2s ease);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -99,9 +99,9 @@
|
|||
.info-box h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 18px;
|
||||
color: var(--dark-color);
|
||||
color: var(--text-heading, #1e293b);
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #f5f5f5;
|
||||
border-bottom: 2px solid var(--border-color, #f5f5f5);
|
||||
padding-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -109,14 +109,14 @@
|
|||
.progress {
|
||||
margin-bottom: 15px;
|
||||
height: 12px;
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--border-color, #f5f5f5);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-color: var(--primary-color);
|
||||
background-color: var(--accent-color, #2496ed);
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
|
|
@ -125,17 +125,17 @@
|
|||
}
|
||||
|
||||
.progress-bar.high {
|
||||
background-color: var(--danger-color);
|
||||
background-color: var(--danger-text, #ef4444);
|
||||
}
|
||||
|
||||
/* Resource usage colors */
|
||||
.progress-bar[aria-valuenow^="8"],
|
||||
.progress-bar[aria-valuenow^="9"] {
|
||||
background-color: var(--danger-color);
|
||||
background-color: var(--danger-text, #ef4444);
|
||||
}
|
||||
|
||||
.progress-bar[aria-valuenow^="7"] {
|
||||
background-color: var(--warning-color);
|
||||
background-color: #f59e0b;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -148,31 +148,32 @@
|
|||
}
|
||||
|
||||
.label-success {
|
||||
background-color: var(--secondary-color);
|
||||
background-color: var(--success-text, #10b981);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
background-color: var(--danger-color);
|
||||
background-color: var(--danger-text, #ef4444);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.label-warning {
|
||||
background-color: var(--warning-color);
|
||||
background-color: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: #f9f9f9;
|
||||
background-color: var(--bg-hover, #f9f9f9);
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
background-color: white;
|
||||
background-color: var(--bg-secondary, white);
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
word-wrap: break-word;
|
||||
color: var(--text-primary, #333);
|
||||
}
|
||||
|
||||
.table td, .table th {
|
||||
|
|
@ -181,9 +182,9 @@
|
|||
}
|
||||
|
||||
.table > thead > tr > th {
|
||||
border-bottom: 2px solid #ddd;
|
||||
border-bottom: 2px solid var(--border-color, #ddd);
|
||||
font-weight: 600;
|
||||
color: var(--dark-color);
|
||||
color: var(--text-heading, #1e293b);
|
||||
padding: 12px 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -191,7 +192,7 @@
|
|||
.table > tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
padding: 12px 8px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-top: 1px solid var(--border-color, #f0f0f0);
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
|
|
@ -205,12 +206,12 @@
|
|||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: var(--box-shadow);
|
||||
border: 1px solid var(--border-color);
|
||||
background: white;
|
||||
box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
background: var(--bg-secondary, white);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
transition: var(--transition);
|
||||
transition: var(--transition, all 0.2s ease);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -237,11 +238,11 @@
|
|||
|
||||
.container-header {
|
||||
padding: 20px 24px;
|
||||
background: #f8fafc;
|
||||
background: var(--bg-hover, #f8fafc);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color, #e2e8f0);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -249,14 +250,14 @@
|
|||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--dark-color);
|
||||
color: var(--text-heading, #1e293b);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.container-header h3 .fa-cube {
|
||||
color: var(--docker-blue);
|
||||
color: var(--accent-color, #0db7ed);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -302,27 +303,27 @@
|
|||
|
||||
/* Button Colors */
|
||||
.btn-success {
|
||||
background-color: var(--secondary-color);
|
||||
background-color: var(--success-text, #10b981);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: var(--warning-color);
|
||||
background-color: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--danger-color);
|
||||
background-color: var(--danger-text, #ef4444);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
background-color: var(--accent-color, #2496ed);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: var(--info-color);
|
||||
background-color: var(--info-text, #3b82f6);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -335,15 +336,15 @@
|
|||
}
|
||||
|
||||
.metric-card {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
border: 1px solid #f0f0f0;
|
||||
box-shadow: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-color, #f0f0f0);
|
||||
}
|
||||
|
||||
.metric-card h5 {
|
||||
color: #666;
|
||||
color: var(--text-secondary, #666);
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -351,7 +352,7 @@
|
|||
.metric-card .value {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: var(--dark-color);
|
||||
color: var(--text-heading, #1e293b);
|
||||
}
|
||||
|
||||
/* Status indicators */
|
||||
|
|
@ -365,11 +366,11 @@
|
|||
}
|
||||
|
||||
.status-running {
|
||||
background-color: var(--secondary-color);
|
||||
background-color: var(--success-text, #10b981);
|
||||
}
|
||||
|
||||
.status-stopped {
|
||||
background-color: var(--danger-color);
|
||||
background-color: var(--danger-text, #ef4444);
|
||||
}
|
||||
|
||||
/* Workflow status badge - Enhanced */
|
||||
|
|
@ -386,14 +387,14 @@
|
|||
}
|
||||
|
||||
.workflow-status.active {
|
||||
background: #d1fae5;
|
||||
color: #059669;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #059669);
|
||||
border: 1px solid #a7f3d0;
|
||||
}
|
||||
|
||||
.workflow-status.error {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #dc2626);
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
|
|
@ -405,23 +406,23 @@
|
|||
textarea.logs {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid var(--border-color, #eee);
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
background-color: #f8f9fa;
|
||||
color: #333;
|
||||
background-color: var(--bg-hover, #f8f9fa);
|
||||
color: var(--text-primary, #333);
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* Code styling */
|
||||
code {
|
||||
padding: 2px 5px;
|
||||
background-color: #f8f9fa;
|
||||
background-color: var(--bg-hover, #f8f9fa);
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
color: #333;
|
||||
color: var(--text-primary, #333);
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
|
@ -466,12 +467,12 @@
|
|||
|
||||
/* Custom n8n container */
|
||||
.n8n-container {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
border-left: 4px solid var(--secondary-color);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f5f7fa) 0%, #c3cfe2 100%);
|
||||
border-left: 4px solid var(--success-text, #10b981);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: var(--box-shadow);
|
||||
box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -480,13 +481,14 @@
|
|||
.modal-content {
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 5px 15px var(--shadow-color, rgba(0,0,0,0.1));
|
||||
background: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
border-bottom: 1px solid var(--border-color, #f5f5f5);
|
||||
padding: 15px 20px;
|
||||
background-color: #f8f9fa;
|
||||
background-color: var(--bg-hover, #f8f9fa);
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
|
@ -496,8 +498,9 @@
|
|||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid #f5f5f5;
|
||||
border-top: 1px solid var(--border-color, #f5f5f5);
|
||||
padding: 15px 20px;
|
||||
background-color: var(--bg-hover, #f8f9fa);
|
||||
}
|
||||
|
||||
/* Icon fixes */
|
||||
|
|
@ -554,7 +557,7 @@
|
|||
.page-title h2 {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
color: var(--dark-color);
|
||||
color: var(--text-heading, #1e293b);
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -562,22 +565,22 @@
|
|||
|
||||
.page-title h2 i {
|
||||
margin-right: 10px;
|
||||
color: var(--primary-color);
|
||||
color: var(--accent-color, #2496ed);
|
||||
}
|
||||
|
||||
.page-title p {
|
||||
color: #777;
|
||||
color: var(--text-secondary, #777);
|
||||
margin: 5px 0 0 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
background-color: var(--primary-color) !important;
|
||||
background-color: var(--accent-color, #2496ed) !important;
|
||||
color: white !important;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--box-shadow);
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
|
||||
transition: var(--transition, all 0.2s ease);
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -585,10 +588,10 @@
|
|||
}
|
||||
|
||||
.create-btn:hover {
|
||||
background-color: #1976d2 !important;
|
||||
background-color: var(--accent-hover, #1976d2) !important;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--box-shadow-hover);
|
||||
box-shadow: var(--box-shadow-hover, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -602,15 +605,15 @@
|
|||
}
|
||||
|
||||
.stats-card {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
box-shadow: var(--box-shadow);
|
||||
transition: var(--transition);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
|
||||
transition: var(--transition, all 0.2s ease);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -643,7 +646,7 @@
|
|||
|
||||
.stats-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--box-shadow-hover);
|
||||
box-shadow: var(--box-shadow-hover, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05));
|
||||
}
|
||||
|
||||
.stats-icon {
|
||||
|
|
@ -657,18 +660,18 @@
|
|||
}
|
||||
|
||||
.stats-card.running .stats-icon {
|
||||
background: #d1fae5;
|
||||
color: #10b981;
|
||||
background: var(--success-bg, #d1fae5);
|
||||
color: var(--success-text, #10b981);
|
||||
}
|
||||
|
||||
.stats-card.stopped .stats-icon {
|
||||
background: #fee2e2;
|
||||
color: #ef4444;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #ef4444);
|
||||
}
|
||||
|
||||
.stats-card.total .stats-icon {
|
||||
background: #e0f2fe;
|
||||
color: var(--docker-blue);
|
||||
color: var(--accent-color, #0db7ed);
|
||||
}
|
||||
|
||||
.stats-card.memory .stats-icon {
|
||||
|
|
@ -683,13 +686,13 @@
|
|||
.stats-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--dark-color);
|
||||
color: var(--text-heading, #1e293b);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -707,12 +710,12 @@
|
|||
|
||||
/* Search and Filter Section */
|
||||
.search-filter-section {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: var(--box-shadow);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
|
|
@ -730,21 +733,23 @@
|
|||
left: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
color: var(--text-secondary, #94a3b8);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 10px 15px 10px 45px;
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: var(--transition);
|
||||
background: var(--bg-secondary, white);
|
||||
color: var(--text-primary, #333);
|
||||
transition: var(--transition, all 0.2s ease);
|
||||
}
|
||||
|
||||
.search-box input:focus {
|
||||
border-color: var(--docker-blue);
|
||||
border-color: var(--accent-color, #0db7ed);
|
||||
box-shadow: 0 0 0 3px rgba(36, 150, 237, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -756,29 +761,29 @@
|
|||
|
||||
.filter-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: white;
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
transition: var(--transition, all 0.2s ease);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
border-color: var(--docker-blue);
|
||||
color: var(--docker-blue);
|
||||
background: #f0f9ff;
|
||||
border-color: var(--accent-color, #0db7ed);
|
||||
color: var(--accent-color, #0db7ed);
|
||||
background: var(--info-bg, #f0f9ff);
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: var(--docker-blue);
|
||||
background: var(--accent-color, #0db7ed);
|
||||
color: white;
|
||||
border-color: var(--docker-blue);
|
||||
border-color: var(--accent-color, #0db7ed);
|
||||
}
|
||||
|
||||
.filter-btn i {
|
||||
|
|
@ -789,16 +794,16 @@
|
|||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--box-shadow);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--box-shadow, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06));
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #f0f9ff;
|
||||
background: var(--info-bg, #f0f9ff);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -808,25 +813,25 @@
|
|||
|
||||
.empty-state-icon i {
|
||||
font-size: 48px;
|
||||
color: var(--docker-blue);
|
||||
color: var(--accent-color, #0db7ed);
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 24px;
|
||||
color: var(--dark-color);
|
||||
color: var(--text-heading, #1e293b);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 16px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Enhanced button styles */
|
||||
.btn-success {
|
||||
background: #10b981 !important;
|
||||
border-color: #10b981 !important;
|
||||
background: var(--success-text, #10b981) !important;
|
||||
border-color: var(--success-text, #10b981) !important;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
|
|
@ -845,8 +850,8 @@
|
|||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444 !important;
|
||||
border-color: #ef4444 !important;
|
||||
background: var(--danger-text, #ef4444) !important;
|
||||
border-color: var(--danger-text, #ef4444) !important;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
|
|
@ -855,8 +860,8 @@
|
|||
}
|
||||
|
||||
.btn-info {
|
||||
background: #3b82f6 !important;
|
||||
border-color: #3b82f6 !important;
|
||||
background: var(--info-text, #3b82f6) !important;
|
||||
border-color: var(--info-text, #3b82f6) !important;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
|
|
@ -865,13 +870,13 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--docker-blue) !important;
|
||||
border-color: var(--docker-blue) !important;
|
||||
background: var(--accent-color, #0db7ed) !important;
|
||||
border-color: var(--accent-color, #0db7ed) !important;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #0284c7 !important;
|
||||
border-color: #0284c7 !important;
|
||||
background: var(--accent-hover, #0284c7) !important;
|
||||
border-color: var(--accent-hover, #0284c7) !important;
|
||||
}
|
||||
|
||||
.create-btn i {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.page-header h1 {
|
||||
color: #1e293b;
|
||||
color: var(--text-heading, #1e293b);
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
.page-header .docker-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, #5856d6 0%, #7c7ff2 100%);
|
||||
background: linear-gradient(135deg, var(--accent-color, #5856d6) 0%, #7c7ff2 100%);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -48,14 +48,14 @@
|
|||
}
|
||||
|
||||
.page-header p {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.create-docker-btn {
|
||||
background: linear-gradient(135deg, #5856d6 0%, #7c7ff2 100%);
|
||||
background: linear-gradient(135deg, var(--accent-color, #5856d6) 0%, #7c7ff2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
|
|
@ -93,17 +93,18 @@
|
|||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 14px 20px 14px 50px;
|
||||
border: 2px solid #e8e9ff;
|
||||
border: 2px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
background: var(--bg-secondary, white);
|
||||
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.04));
|
||||
color: var(--text-primary, #333);
|
||||
}
|
||||
|
||||
.search-box input:focus {
|
||||
outline: none;
|
||||
border-color: #5856d6;
|
||||
border-color: var(--accent-color, #5856d6);
|
||||
box-shadow: 0 4px 12px rgba(88,86,214,0.15);
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +113,7 @@
|
|||
left: 18px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
color: var(--text-secondary, #94a3b8);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
|
@ -122,30 +123,31 @@
|
|||
|
||||
.records-select select {
|
||||
padding: 14px 20px;
|
||||
border: 2px solid #e8e9ff;
|
||||
border: 2px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
background: var(--bg-secondary, white);
|
||||
color: var(--text-primary, #333);
|
||||
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.04));
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.records-select select:focus {
|
||||
outline: none;
|
||||
border-color: #5856d6;
|
||||
border-color: var(--accent-color, #5856d6);
|
||||
}
|
||||
|
||||
/* Docker Site Cards */
|
||||
.docker-site-card {
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 16px;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
box-shadow: 0 2px 12px var(--shadow-color, rgba(0,0,0,0.06));
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f1f3f5;
|
||||
border: 1px solid var(--border-color, #f1f3f5);
|
||||
}
|
||||
|
||||
.docker-site-card:hover {
|
||||
|
|
@ -154,12 +156,12 @@
|
|||
}
|
||||
|
||||
.site-header {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f3f1ff 100%);
|
||||
background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, #f3f1ff 100%);
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.site-title {
|
||||
|
|
@ -172,7 +174,7 @@
|
|||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--text-heading, #1e293b);
|
||||
}
|
||||
|
||||
.site-title a {
|
||||
|
|
@ -182,17 +184,17 @@
|
|||
}
|
||||
|
||||
.site-title a:hover {
|
||||
color: #5856d6;
|
||||
color: var(--accent-color, #5856d6);
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #94a3b8;
|
||||
color: var(--text-secondary, #94a3b8);
|
||||
font-size: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.manage-btn {
|
||||
background: #5856d6;
|
||||
background: var(--accent-color, #5856d6);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
|
|
@ -207,7 +209,7 @@
|
|||
}
|
||||
|
||||
.manage-btn:hover {
|
||||
background: #4845d2;
|
||||
background: var(--accent-hover, #4845d2);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(88,86,214,0.25);
|
||||
|
|
@ -233,12 +235,12 @@
|
|||
.detail-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #5856d6;
|
||||
color: var(--accent-color, #5856d6);
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -249,7 +251,7 @@
|
|||
|
||||
.detail-label {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
color: var(--text-secondary, #94a3b8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 2px;
|
||||
|
|
@ -258,7 +260,7 @@
|
|||
|
||||
.detail-value {
|
||||
font-size: 15px;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -275,14 +277,14 @@
|
|||
|
||||
.state-badge.running,
|
||||
.state-badge.active {
|
||||
background: #d4f8e8;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d4f8e8);
|
||||
color: var(--success-text, #065f46);
|
||||
}
|
||||
|
||||
.state-badge.stopped,
|
||||
.state-badge.inactive {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
}
|
||||
|
||||
.state-badge.paused {
|
||||
|
|
@ -306,8 +308,8 @@
|
|||
}
|
||||
|
||||
.delete-btn {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #dc2626);
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -321,7 +323,7 @@
|
|||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background: #dc2626;
|
||||
background: var(--danger-text, #dc2626);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(220,38,38,0.25);
|
||||
|
|
@ -331,7 +333,7 @@
|
|||
.loading-container {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
color: #94a3b8;
|
||||
color: var(--text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
|
|
@ -351,7 +353,7 @@
|
|||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -361,10 +363,11 @@
|
|||
|
||||
.pagination-select select {
|
||||
padding: 10px 16px;
|
||||
border: 2px solid #e8e9ff;
|
||||
border: 2px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
color: var(--text-primary, #333);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -373,16 +376,17 @@
|
|||
border-radius: 16px;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
background: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: #f8f9ff;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #1e293b;
|
||||
color: var(--text-heading, #1e293b);
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -392,14 +396,14 @@
|
|||
}
|
||||
|
||||
.modal-body h4 {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background: #f8f9ff;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-top: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 16px 24px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
|
@ -412,18 +416,18 @@
|
|||
}
|
||||
|
||||
.modal-footer .btn-default {
|
||||
background: white;
|
||||
border: 1px solid #e8e9ff;
|
||||
color: #64748b;
|
||||
background: var(--bg-secondary, white);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.modal-footer .btn-default:hover {
|
||||
background: #f8f9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: #d8d9ff;
|
||||
}
|
||||
|
||||
.modal-footer .btn-warning {
|
||||
background: #dc2626;
|
||||
background: var(--danger-text, #dc2626);
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -438,9 +442,9 @@
|
|||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
box-shadow: 0 2px 12px var(--shadow-color, rgba(0,0,0,0.06));
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
|
|
@ -452,18 +456,18 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24px;
|
||||
color: #5856d6;
|
||||
color: var(--accent-color, #5856d6);
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
color: #1e293b;
|
||||
color: var(--text-heading, #1e293b);
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: #64748b;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
|
@ -480,13 +484,13 @@
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d4f8e8;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #d4f8e8);
|
||||
color: var(--success-text, #065f46);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
background: var(--danger-bg, #fee2e2);
|
||||
color: var(--danger-text, #991b1b);
|
||||
}
|
||||
|
||||
.alert .close {
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@
|
|||
}
|
||||
|
||||
.backup-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-heading, #2f3640);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
text-align: right;
|
||||
|
|
@ -70,17 +70,17 @@
|
|||
width: 100%;
|
||||
max-width: 400px;
|
||||
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;
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
|
||||
}
|
||||
|
||||
|
|
@ -89,8 +89,8 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
border: 1px solid #5b5fcf;
|
||||
background: var(--accent-color, #5b5fcf);
|
||||
border: 1px solid var(--accent-color, #5b5fcf);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -105,8 +105,8 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4b4fbf;
|
||||
border-color: #4b4fbf;
|
||||
background: var(--accent-hover, #4a4fc4);
|
||||
border-color: var(--accent-hover, #4a4fc4);
|
||||
box-shadow: 0 3px 8px rgba(91,95,207,0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
|
@ -129,8 +129,8 @@
|
|||
|
||||
/* Table Styles */
|
||||
.table-container {
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -138,11 +138,11 @@
|
|||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.table thead {
|
||||
background: #fafbff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.table th {
|
||||
|
|
@ -150,23 +150,23 @@
|
|||
padding: 15px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #8893a7;
|
||||
color: var(--text-secondary, #8893a7);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.table td {
|
||||
border: none;
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
border-bottom: 1px solid #f1f3f5;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: #fafbff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.table tbody tr:last-child td {
|
||||
|
|
@ -183,13 +183,13 @@
|
|||
}
|
||||
|
||||
.backup-type.sftp {
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
background: var(--info-bg, #e0f2fe);
|
||||
color: var(--info-text, #0369a1);
|
||||
}
|
||||
|
||||
.backup-type.s3 {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
background: var(--warning-bg, #fef3c7);
|
||||
color: var(--warning-text, #92400e);
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
|
|
@ -211,35 +211,35 @@
|
|||
}
|
||||
|
||||
.btn-schedule {
|
||||
color: #10b981;
|
||||
color: var(--success-text, #065f46);
|
||||
border-color: #d1fae5;
|
||||
background: #f0fdf4;
|
||||
background: var(--success-bg, #f0fdf4);
|
||||
}
|
||||
|
||||
.btn-schedule:hover {
|
||||
background: #10b981;
|
||||
background: var(--success-text, #065f46);
|
||||
color: white;
|
||||
border-color: #10b981;
|
||||
border-color: var(--success-text, #065f46);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
color: #ef4444;
|
||||
color: var(--danger-text, #ef4444);
|
||||
border-color: #fee2e2;
|
||||
background: #fef2f2;
|
||||
background: var(--danger-bg, #fef2f2);
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: #ef4444;
|
||||
background: var(--danger-text, #ef4444);
|
||||
color: white;
|
||||
border-color: #ef4444;
|
||||
border-color: var(--danger-text, #ef4444);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #8893a7;
|
||||
color: var(--text-secondary, #8893a7);
|
||||
}
|
||||
|
||||
.empty-state svg {
|
||||
|
|
@ -252,7 +252,7 @@
|
|||
.empty-state h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-heading, #2f3640);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -268,12 +268,12 @@
|
|||
|
||||
/* Info Alert */
|
||||
.info-alert {
|
||||
background: #f0f9ff;
|
||||
background: var(--info-bg, #e0f2fe);
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
color: #0c4a6e;
|
||||
color: var(--info-text, #0369a1);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -281,7 +281,7 @@
|
|||
}
|
||||
|
||||
.info-alert i {
|
||||
color: #0284c7;
|
||||
color: var(--info-text, #0369a1);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@
|
|||
}
|
||||
|
||||
.restore-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-heading, #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;
|
||||
}
|
||||
|
||||
.restore-description {
|
||||
color: #8893a7;
|
||||
color: var(--text-secondary, #8893a7);
|
||||
font-size: 14px;
|
||||
margin-bottom: 25px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -54,8 +54,8 @@
|
|||
|
||||
/* Table Styles */
|
||||
.table-container {
|
||||
background: #fafbff;
|
||||
border: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -63,11 +63,11 @@
|
|||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
background: white;
|
||||
background: var(--bg-secondary, white);
|
||||
}
|
||||
|
||||
.table thead {
|
||||
background: #fafbff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.table th {
|
||||
|
|
@ -75,23 +75,23 @@
|
|||
padding: 15px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #8893a7;
|
||||
color: var(--text-secondary, #8893a7);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
}
|
||||
|
||||
.table td {
|
||||
border: none;
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
color: #2f3640;
|
||||
color: var(--text-primary, #2f3640);
|
||||
border-bottom: 1px solid #f1f3f5;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: #fafbff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
}
|
||||
|
||||
.table tbody tr:last-child td {
|
||||
|
|
@ -108,18 +108,18 @@
|
|||
}
|
||||
|
||||
.backup-type.full {
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
background: var(--info-bg, #e0f2fe);
|
||||
color: var(--info-text, #0369a1);
|
||||
}
|
||||
|
||||
.backup-type.data {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
background: var(--success-bg, #f0fdf4);
|
||||
color: var(--success-text, #065f46);
|
||||
}
|
||||
|
||||
.backup-type.database {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
background: var(--warning-bg, #fef3c7);
|
||||
color: var(--warning-text, #92400e);
|
||||
}
|
||||
|
||||
/* Destination Badge */
|
||||
|
|
@ -131,8 +131,8 @@
|
|||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: #f0f4ff;
|
||||
color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
|
|
@ -154,35 +154,35 @@
|
|||
}
|
||||
|
||||
.btn-restore {
|
||||
color: #10b981;
|
||||
color: var(--success-text, #065f46);
|
||||
border-color: #d1fae5;
|
||||
background: #f0fdf4;
|
||||
background: var(--success-bg, #f0fdf4);
|
||||
}
|
||||
|
||||
.btn-restore:hover {
|
||||
background: #10b981;
|
||||
background: var(--success-text, #065f46);
|
||||
color: white;
|
||||
border-color: #10b981;
|
||||
border-color: var(--success-text, #065f46);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
color: #ef4444;
|
||||
color: var(--danger-text, #ef4444);
|
||||
border-color: #fee2e2;
|
||||
background: #fef2f2;
|
||||
background: var(--danger-bg, #fef2f2);
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: #ef4444;
|
||||
background: var(--danger-text, #ef4444);
|
||||
color: white;
|
||||
border-color: #ef4444;
|
||||
border-color: var(--danger-text, #ef4444);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #8893a7;
|
||||
color: var(--text-secondary, #8893a7);
|
||||
}
|
||||
|
||||
.empty-state svg {
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
.empty-state h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
color: var(--text-heading, #2f3640);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -207,13 +207,13 @@
|
|||
/* Modal Styles */
|
||||
.modal-content {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e8e9ff;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
box-shadow: 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: #fafbff;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-bottom: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 20px;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
|
@ -221,7 +221,7 @@
|
|||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
color: var(--text-heading, #2f3640);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -230,16 +230,16 @@
|
|||
}
|
||||
|
||||
.modal-footer {
|
||||
background: #fafbff;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-top: 1px solid var(--border-color, #e8e9ff);
|
||||
padding: 15px 20px;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: white;
|
||||
border: 1px solid #e8e9ff;
|
||||
color: #2f3640;
|
||||
background: var(--bg-secondary, white);
|
||||
border: 1px solid var(--border-color, #e8e9ff);
|
||||
color: var(--text-primary, #2f3640);
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
|
|
@ -249,14 +249,14 @@
|
|||
}
|
||||
|
||||
.btn-default:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #5b5fcf;
|
||||
color: #5b5fcf;
|
||||
background: var(--bg-hover, #f8f9ff);
|
||||
border-color: var(--accent-color, #5b5fcf);
|
||||
color: var(--accent-color, #5b5fcf);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
border: 1px solid #ef4444;
|
||||
background: var(--danger-text, #ef4444);
|
||||
border: 1px solid var(--danger-text, #ef4444);
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue