mirror
/
cyberpanel
mirror of https://github.com/usmannasir/cyberpanel.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dark mode

This commit is contained in:
usmannasir 2025-08-02 15:43:18 +05:00
parent 1abf49d0b7
commit f95a83f305
6 changed files with 334 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
websiteFunctions/templates/websiteFunctions/CreateDockerPackage.html
View File

@ -22,29 +22,29 @@
.page-title { .page-title {
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
margin-bottom: 8px; margin-bottom: 8px;
} }
.page-subtitle { .page-subtitle {
font-size: 14px; font-size: 14px;
color: #8893a7; color: var(--text-secondary, #8893a7);
} }
/* Card styles */ /* Card styles */
.content-card { .content-card {
background: white; background: var(--bg-secondary, white);
border-radius: 12px; border-radius: 12px;
padding: 30px; padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px; margin-bottom: 25px;
} }
.card-title { .card-title {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
margin-bottom: 25px; margin-bottom: 25px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -55,7 +55,7 @@
content: ''; content: '';
width: 4px; width: 4px;
height: 24px; height: 24px;
background: #5b5fcf; background: var(--accent-color, #5b5fcf);
border-radius: 2px; border-radius: 2px;
} }
@ -68,7 +68,7 @@
display: block; display: block;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #64748b; color: var(--text-secondary, #64748b);
margin-bottom: 8px; margin-bottom: 8px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -77,26 +77,26 @@
.form-control { .form-control {
width: 100%; width: 100%;
padding: 10px 14px; padding: 10px 14px;
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
color: #2f3640; color: var(--text-primary, #2f3640);
background: white; background: var(--bg-secondary, white);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.form-control:hover { .form-control:hover {
border-color: #5b5fcf; border-color: var(--accent-color, #5b5fcf);
} }
.form-control:focus { .form-control:focus {
outline: none; outline: none;
border-color: #5b5fcf; border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91,95,207,0.1); box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
} }
.form-control[readonly] { .form-control[readonly] {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
cursor: not-allowed; cursor: not-allowed;
} }
@ -116,12 +116,12 @@
} }
.btn-primary { .btn-primary {
background: #5b5fcf; background: var(--accent-color, #5b5fcf);
color: white; color: white;
} }
.btn-primary:hover { .btn-primary:hover {
background: #4a4fc4; background: var(--accent-hover, #4a4fc4);
box-shadow: 0 4px 12px rgba(91,95,207,0.3); box-shadow: 0 4px 12px rgba(91,95,207,0.3);
transform: translateY(-1px); transform: translateY(-1px);
} }
@ -138,7 +138,7 @@
} }
.btn-danger { .btn-danger {
background: #dc3545; background: var(--danger-text, #dc3545);
color: white; color: white;
} }
@ -149,14 +149,14 @@
} }
.btn-secondary { .btn-secondary {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
color: #5b5fcf; color: var(--accent-color, #5b5fcf);
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #eef0ff; background: #eef0ff;
border-color: #5b5fcf; border-color: var(--accent-color, #5b5fcf);
} }
/* Table styles */ /* Table styles */
@ -171,22 +171,22 @@
padding: 12px 15px; padding: 12px 15px;
font-size: 11px; font-size: 11px;
font-weight: 700; font-weight: 700;
color: #64748b; color: var(--text-secondary, #64748b);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.8px; letter-spacing: 0.8px;
border-bottom: 2px solid #e8e9ff; border-bottom: 2px solid var(--border-color, #e8e9ff);
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
} }
.modern-table td { .modern-table td {
padding: 12px 15px; padding: 12px 15px;
font-size: 13px; font-size: 13px;
color: #2f3640; color: var(--text-primary, #2f3640);
border-bottom: 1px solid #f0f0ff; border-bottom: 1px solid var(--border-color, #f0f0ff);
} }
.modern-table tr:hover { .modern-table tr:hover {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
} }
.action-buttons { .action-buttons {
@ -203,12 +203,13 @@
.modal-content { .modal-content {
border-radius: 12px; border-radius: 12px;
border: none; 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 { .modal-header {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-bottom: 1px solid #e8e9ff; border-bottom: 1px solid var(--border-color, #e8e9ff);
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
padding: 20px 25px; padding: 20px 25px;
} }
@ -216,7 +217,7 @@
.modal-title { .modal-title {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@ -227,8 +228,8 @@
} }
.modal-footer { .modal-footer {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-top: 1px solid #e8e9ff; border-top: 1px solid var(--border-color, #e8e9ff);
border-radius: 0 0 12px 12px; border-radius: 0 0 12px 12px;
padding: 15px 25px; padding: 15px 25px;
display: flex; display: flex;
@ -264,9 +265,9 @@
} }
.alert-info { .alert-info {
background: #e3f2fd; background: var(--info-bg, #e3f2fd);
border: 1px solid #bbdefb; border: 1px solid #bbdefb;
color: #1565c0; color: var(--info-text, #1565c0);
} }
/* Form row */ /* Form row */

74
websiteFunctions/templates/websiteFunctions/CreateDockerSite.html
View File

@ -17,18 +17,18 @@
} }
.docker-section { .docker-section {
background: white; background: var(--bg-secondary, white);
border-radius: 12px; border-radius: 12px;
padding: 25px; padding: 25px;
margin-bottom: 25px; margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
} }
.section-title { .section-title {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -41,12 +41,12 @@
content: ''; content: '';
width: 4px; width: 4px;
height: 24px; height: 24px;
background: #5b5fcf; background: var(--accent-color, #5b5fcf);
border-radius: 2px; border-radius: 2px;
} }
.docker-description { .docker-description {
color: #8893a7; color: var(--text-secondary, #8893a7);
font-size: 14px; font-size: 14px;
margin-bottom: 25px; margin-bottom: 25px;
line-height: 1.5; line-height: 1.5;
@ -54,8 +54,8 @@
/* Form Styles */ /* Form Styles */
.form-container { .form-container {
background: #fafbff; background: var(--bg-hover, #fafbff);
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
padding: 30px; padding: 30px;
} }
@ -74,7 +74,7 @@
.form-label { .form-label {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #2f3640; color: var(--text-primary, #2f3640);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-align: right; text-align: right;
@ -84,22 +84,22 @@
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
padding: 12px 16px; padding: 12px 16px;
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
color: #2f3640; color: var(--text-primary, #2f3640);
background: white; background: var(--bg-secondary, white);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.form-control:focus { .form-control:focus {
outline: none; outline: none;
border-color: #5b5fcf; border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91,95,207,0.1); box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
} }
.form-control::placeholder { .form-control::placeholder {
color: #94a3b8; color: var(--text-secondary, #94a3b8);
font-size: 13px; font-size: 13px;
} }
@ -109,8 +109,8 @@
/* Resource Configuration Section */ /* Resource Configuration Section */
.resource-section { .resource-section {
background: white; background: var(--bg-secondary, white);
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
@ -119,7 +119,7 @@
.resource-header { .resource-header {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
margin-bottom: 15px; margin-bottom: 15px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -131,12 +131,12 @@
.resource-icon { .resource-icon {
width: 32px; width: 32px;
height: 32px; height: 32px;
background: #e8e9ff; background: var(--bg-hover, #e8e9ff);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #5b5fcf; color: var(--accent-color, #5b5fcf);
} }
.resource-grid { .resource-grid {
@ -147,8 +147,8 @@
/* Buttons */ /* Buttons */
.btn-primary { .btn-primary {
background: #5b5fcf; background: var(--accent-color, #5b5fcf);
border: 1px solid #5b5fcf; border: 1px solid var(--accent-color, #5b5fcf);
color: white; color: white;
padding: 12px 32px; padding: 12px 32px;
border-radius: 8px; border-radius: 8px;
@ -163,15 +163,15 @@
} }
.btn-primary:hover { .btn-primary:hover {
background: #4b4fbf; background: var(--accent-hover, #4b4fbf);
border-color: #4b4fbf; border-color: var(--accent-hover, #4b4fbf);
box-shadow: 0 3px 8px rgba(91,95,207,0.3); box-shadow: 0 3px 8px rgba(91,95,207,0.3);
transform: translateY(-1px); transform: translateY(-1px);
} }
.btn-primary:disabled { .btn-primary:disabled {
background: #94a3b8; background: var(--text-secondary, #94a3b8);
border-color: #94a3b8; border-color: var(--text-secondary, #94a3b8);
cursor: not-allowed; cursor: not-allowed;
transform: none; transform: none;
box-shadow: none; box-shadow: none;
@ -202,15 +202,15 @@
/* Progress Section */ /* Progress Section */
.progress-section { .progress-section {
background: #fafbff; background: var(--bg-hover, #fafbff);
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
padding: 30px; padding: 30px;
text-align: center; text-align: center;
} }
.status-message { .status-message {
background: #f0f9ff; background: var(--info-bg, #f0f9ff);
border: 1px solid #bae6fd; border: 1px solid #bae6fd;
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
@ -220,7 +220,7 @@
.status-message h2 { .status-message h2 {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: #0369a1; color: var(--info-text, #0369a1);
margin: 0; margin: 0;
} }
@ -233,7 +233,7 @@
} }
.progress-bar { .progress-bar {
background: #5b5fcf; background: var(--accent-color, #5b5fcf);
height: 100%; height: 100%;
transition: width 0.3s ease; transition: width 0.3s ease;
display: flex; display: flex;
@ -253,15 +253,15 @@
} }
.alert-success { .alert-success {
background: #f0f9ff; background: var(--success-bg, #f0f9ff);
border: 1px solid #bae6fd; border: 1px solid #bae6fd;
color: #0c4a6e; color: var(--success-text, #0c4a6e);
} }
.alert-danger { .alert-danger {
background: #fef2f2; background: var(--danger-bg, #fef2f2);
border: 1px solid #fecaca; border: 1px solid #fecaca;
color: #991b1b; color: var(--danger-text, #991b1b);
} }
.loading-spinner { .loading-spinner {
@ -271,19 +271,19 @@
} }
.error-text { .error-text {
color: #ef4444; color: var(--danger-text, #ef4444);
font-size: 13px; font-size: 13px;
margin-top: 5px; margin-top: 5px;
} }
/* Info Boxes */ /* Info Boxes */
.info-box { .info-box {
background: #f0f9ff; background: var(--info-bg, #f0f9ff);
border: 1px solid #bae6fd; border: 1px solid #bae6fd;
border-radius: 8px; border-radius: 8px;
padding: 15px; padding: 15px;
margin-bottom: 20px; margin-bottom: 20px;
color: #0c4a6e; color: var(--info-text, #0c4a6e);
font-size: 14px; font-size: 14px;
} }

221
websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
View File

@ -80,13 +80,13 @@
} }
.info-box { .info-box {
background: #fff; background: var(--bg-secondary, #fff);
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
margin-bottom: 24px; margin-bottom: 24px;
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));
transition: var(--transition); transition: var(--transition, all 0.2s ease);
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
} }
@ -99,9 +99,9 @@
.info-box h4 { .info-box h4 {
margin-top: 0; margin-top: 0;
margin-bottom: 18px; margin-bottom: 18px;
color: var(--dark-color); color: var(--text-heading, #1e293b);
font-weight: 600; font-weight: 600;
border-bottom: 2px solid #f5f5f5; border-bottom: 2px solid var(--border-color, #f5f5f5);
padding-bottom: 10px; padding-bottom: 10px;
font-size: 16px; font-size: 16px;
} }
@ -109,14 +109,14 @@
.progress { .progress {
margin-bottom: 15px; margin-bottom: 15px;
height: 12px; height: 12px;
background-color: #f5f5f5; background-color: var(--border-color, #f5f5f5);
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
} }
.progress-bar { .progress-bar {
background-color: var(--primary-color); background-color: var(--accent-color, #2496ed);
color: white; color: white;
text-align: center; text-align: center;
line-height: 12px; line-height: 12px;
@ -125,17 +125,17 @@
} }
.progress-bar.high { .progress-bar.high {
background-color: var(--danger-color); background-color: var(--danger-text, #ef4444);
} }
/* Resource usage colors */ /* Resource usage colors */
.progress-bar[aria-valuenow^="8"], .progress-bar[aria-valuenow^="8"],
.progress-bar[aria-valuenow^="9"] { .progress-bar[aria-valuenow^="9"] {
background-color: var(--danger-color); background-color: var(--danger-text, #ef4444);
} }
.progress-bar[aria-valuenow^="7"] { .progress-bar[aria-valuenow^="7"] {
background-color: var(--warning-color); background-color: #f59e0b;
} }
.label { .label {
@ -148,31 +148,32 @@
} }
.label-success { .label-success {
background-color: var(--secondary-color); background-color: var(--success-text, #10b981);
color: white; color: white;
} }
.label-danger { .label-danger {
background-color: var(--danger-color); background-color: var(--danger-text, #ef4444);
color: white; color: white;
} }
.label-warning { .label-warning {
background-color: var(--warning-color); background-color: #f59e0b;
color: white; color: white;
} }
.table-striped > tbody > tr:nth-of-type(odd) { .table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9; background-color: var(--bg-hover, #f9f9f9);
} }
.table { .table {
margin-bottom: 0; margin-bottom: 0;
background-color: white; background-color: var(--bg-secondary, white);
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
table-layout: fixed; table-layout: fixed;
word-wrap: break-word; word-wrap: break-word;
color: var(--text-primary, #333);
} }
.table td, .table th { .table td, .table th {
@ -181,9 +182,9 @@
} }
.table > thead > tr > th { .table > thead > tr > th {
border-bottom: 2px solid #ddd; border-bottom: 2px solid var(--border-color, #ddd);
font-weight: 600; font-weight: 600;
color: var(--dark-color); color: var(--text-heading, #1e293b);
padding: 12px 8px; padding: 12px 8px;
text-align: left; text-align: left;
} }
@ -191,7 +192,7 @@
.table > tbody > tr > td { .table > tbody > tr > td {
vertical-align: middle; vertical-align: middle;
padding: 12px 8px; padding: 12px 8px;
border-top: 1px solid #f0f0f0; border-top: 1px solid var(--border-color, #f0f0f0);
} }
.table-responsive { .table-responsive {
@ -205,12 +206,12 @@
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
margin-bottom: 30px; 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));
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
background: white; background: var(--bg-secondary, white);
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
transition: var(--transition); transition: var(--transition, all 0.2s ease);
position: relative; position: relative;
} }
@ -237,11 +238,11 @@
.container-header { .container-header {
padding: 20px 24px; padding: 20px 24px;
background: #f8fafc; background: var(--bg-hover, #f8fafc);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color, #e2e8f0);
position: relative; position: relative;
} }
@ -249,14 +250,14 @@
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: var(--dark-color); color: var(--text-heading, #1e293b);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.container-header h3 .fa-cube { .container-header h3 .fa-cube {
color: var(--docker-blue); color: var(--accent-color, #0db7ed);
font-size: 20px; font-size: 20px;
} }
@ -302,27 +303,27 @@
/* Button Colors */ /* Button Colors */
.btn-success { .btn-success {
background-color: var(--secondary-color); background-color: var(--success-text, #10b981);
color: white; color: white;
} }
.btn-warning { .btn-warning {
background-color: var(--warning-color); background-color: #f59e0b;
color: white; color: white;
} }
.btn-danger { .btn-danger {
background-color: var(--danger-color); background-color: var(--danger-text, #ef4444);
color: white; color: white;
} }
.btn-primary { .btn-primary {
background-color: var(--primary-color); background-color: var(--accent-color, #2496ed);
color: white; color: white;
} }
.btn-info { .btn-info {
background-color: var(--info-color); background-color: var(--info-text, #3b82f6);
color: white; color: white;
} }
@ -335,15 +336,15 @@
} }
.metric-card { .metric-card {
background: white; background: var(--bg-secondary, white);
padding: 15px; padding: 15px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08); box-shadow: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid #f0f0f0; border: 1px solid var(--border-color, #f0f0f0);
} }
.metric-card h5 { .metric-card h5 {
color: #666; color: var(--text-secondary, #666);
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 14px;
} }
@ -351,7 +352,7 @@
.metric-card .value { .metric-card .value {
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
color: var(--dark-color); color: var(--text-heading, #1e293b);
} }
/* Status indicators */ /* Status indicators */
@ -365,11 +366,11 @@
} }
.status-running { .status-running {
background-color: var(--secondary-color); background-color: var(--success-text, #10b981);
} }
.status-stopped { .status-stopped {
background-color: var(--danger-color); background-color: var(--danger-text, #ef4444);
} }
/* Workflow status badge - Enhanced */ /* Workflow status badge - Enhanced */
@ -386,14 +387,14 @@
} }
.workflow-status.active { .workflow-status.active {
background: #d1fae5; background: var(--success-bg, #d1fae5);
color: #059669; color: var(--success-text, #059669);
border: 1px solid #a7f3d0; border: 1px solid #a7f3d0;
} }
.workflow-status.error { .workflow-status.error {
background: #fee2e2; background: var(--danger-bg, #fee2e2);
color: #dc2626; color: var(--danger-text, #dc2626);
border: 1px solid #fecaca; border: 1px solid #fecaca;
} }
@ -405,23 +406,23 @@
textarea.logs { textarea.logs {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: 1px solid #eee; border: 1px solid var(--border-color, #eee);
border-radius: 4px; border-radius: 4px;
font-family: monospace; font-family: monospace;
font-size: 18px; font-size: 18px;
line-height: 1.5; line-height: 1.5;
background-color: #f8f9fa; background-color: var(--bg-hover, #f8f9fa);
color: #333; color: var(--text-primary, #333);
height: 300px; height: 300px;
} }
/* Code styling */ /* Code styling */
code { code {
padding: 2px 5px; padding: 2px 5px;
background-color: #f8f9fa; background-color: var(--bg-hover, #f8f9fa);
border-radius: 3px; border-radius: 3px;
font-family: monospace; font-family: monospace;
color: #333; color: var(--text-primary, #333);
font-size: 90%; font-size: 90%;
} }
@ -466,12 +467,12 @@
/* Custom n8n container */ /* Custom n8n container */
.n8n-container { .n8n-container {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); background: linear-gradient(135deg, var(--bg-hover, #f5f7fa) 0%, #c3cfe2 100%);
border-left: 4px solid var(--secondary-color); border-left: 4px solid var(--success-text, #10b981);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
margin-bottom: 30px; 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%; max-width: 100%;
overflow: hidden; overflow: hidden;
} }
@ -480,13 +481,14 @@
.modal-content { .modal-content {
border-radius: 8px; border-radius: 8px;
border: none; 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 { .modal-header {
border-bottom: 1px solid #f5f5f5; border-bottom: 1px solid var(--border-color, #f5f5f5);
padding: 15px 20px; padding: 15px 20px;
background-color: #f8f9fa; background-color: var(--bg-hover, #f8f9fa);
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
@ -496,8 +498,9 @@
} }
.modal-footer { .modal-footer {
border-top: 1px solid #f5f5f5; border-top: 1px solid var(--border-color, #f5f5f5);
padding: 15px 20px; padding: 15px 20px;
background-color: var(--bg-hover, #f8f9fa);
} }
/* Icon fixes */ /* Icon fixes */
@ -554,7 +557,7 @@
.page-title h2 { .page-title h2 {
font-size: 24px; font-size: 24px;
margin: 0; margin: 0;
color: var(--dark-color); color: var(--text-heading, #1e293b);
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
@ -562,22 +565,22 @@
.page-title h2 i { .page-title h2 i {
margin-right: 10px; margin-right: 10px;
color: var(--primary-color); color: var(--accent-color, #2496ed);
} }
.page-title p { .page-title p {
color: #777; color: var(--text-secondary, #777);
margin: 5px 0 0 0; margin: 5px 0 0 0;
font-size: 14px; font-size: 14px;
} }
.create-btn { .create-btn {
background-color: var(--primary-color) !important; background-color: var(--accent-color, #2496ed) !important;
color: white !important; color: white !important;
padding: 8px 16px; padding: 8px 16px;
border-radius: 4px; border-radius: 4px;
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));
transition: var(--transition); transition: var(--transition, all 0.2s ease);
display: inline-flex !important; display: inline-flex !important;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
@ -585,10 +588,10 @@
} }
.create-btn:hover { .create-btn:hover {
background-color: #1976d2 !important; background-color: var(--accent-hover, #1976d2) !important;
color: white; color: white;
transform: translateY(-2px); 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; text-decoration: none;
} }
@ -602,15 +605,15 @@
} }
.stats-card { .stats-card {
background: white; background: var(--bg-secondary, white);
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; gap: 15px;
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));
transition: var(--transition); transition: var(--transition, all 0.2s ease);
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -643,7 +646,7 @@
.stats-card:hover { .stats-card:hover {
transform: translateY(-2px); 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 { .stats-icon {
@ -657,18 +660,18 @@
} }
.stats-card.running .stats-icon { .stats-card.running .stats-icon {
background: #d1fae5; background: var(--success-bg, #d1fae5);
color: #10b981; color: var(--success-text, #10b981);
} }
.stats-card.stopped .stats-icon { .stats-card.stopped .stats-icon {
background: #fee2e2; background: var(--danger-bg, #fee2e2);
color: #ef4444; color: var(--danger-text, #ef4444);
} }
.stats-card.total .stats-icon { .stats-card.total .stats-icon {
background: #e0f2fe; background: #e0f2fe;
color: var(--docker-blue); color: var(--accent-color, #0db7ed);
} }
.stats-card.memory .stats-icon { .stats-card.memory .stats-icon {
@ -683,13 +686,13 @@
.stats-value { .stats-value {
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
color: var(--dark-color); color: var(--text-heading, #1e293b);
line-height: 1; line-height: 1;
} }
.stats-label { .stats-label {
font-size: 14px; font-size: 14px;
color: #64748b; color: var(--text-secondary, #64748b);
margin-top: 5px; margin-top: 5px;
font-weight: 500; font-weight: 500;
} }
@ -707,12 +710,12 @@
/* Search and Filter Section */ /* Search and Filter Section */
.search-filter-section { .search-filter-section {
background: white; background: var(--bg-secondary, white);
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
margin-bottom: 30px; 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));
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
display: flex; display: flex;
gap: 20px; gap: 20px;
align-items: center; align-items: center;
@ -730,21 +733,23 @@
left: 15px; left: 15px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: #94a3b8; color: var(--text-secondary, #94a3b8);
font-size: 16px; font-size: 16px;
} }
.search-box input { .search-box input {
width: 100%; width: 100%;
padding: 10px 15px 10px 45px; padding: 10px 15px 10px 45px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
border-radius: 8px; border-radius: 8px;
font-size: 14px; 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 { .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); box-shadow: 0 0 0 3px rgba(36, 150, 237, 0.1);
outline: none; outline: none;
} }
@ -756,29 +761,29 @@
.filter-btn { .filter-btn {
padding: 8px 16px; padding: 8px 16px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
background: white; background: var(--bg-secondary, white);
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #64748b; color: var(--text-secondary, #64748b);
cursor: pointer; cursor: pointer;
transition: var(--transition); transition: var(--transition, all 0.2s ease);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
.filter-btn:hover { .filter-btn:hover {
border-color: var(--docker-blue); border-color: var(--accent-color, #0db7ed);
color: var(--docker-blue); color: var(--accent-color, #0db7ed);
background: #f0f9ff; background: var(--info-bg, #f0f9ff);
} }
.filter-btn.active { .filter-btn.active {
background: var(--docker-blue); background: var(--accent-color, #0db7ed);
color: white; color: white;
border-color: var(--docker-blue); border-color: var(--accent-color, #0db7ed);
} }
.filter-btn i { .filter-btn i {
@ -789,16 +794,16 @@
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 80px 20px; padding: 80px 20px;
background: white; background: var(--bg-secondary, white);
border-radius: 12px; border-radius: 12px;
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));
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
} }
.empty-state-icon { .empty-state-icon {
width: 100px; width: 100px;
height: 100px; height: 100px;
background: #f0f9ff; background: var(--info-bg, #f0f9ff);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -808,25 +813,25 @@
.empty-state-icon i { .empty-state-icon i {
font-size: 48px; font-size: 48px;
color: var(--docker-blue); color: var(--accent-color, #0db7ed);
} }
.empty-state h3 { .empty-state h3 {
font-size: 24px; font-size: 24px;
color: var(--dark-color); color: var(--text-heading, #1e293b);
margin-bottom: 10px; margin-bottom: 10px;
} }
.empty-state p { .empty-state p {
color: #64748b; color: var(--text-secondary, #64748b);
font-size: 16px; font-size: 16px;
margin-bottom: 30px; margin-bottom: 30px;
} }
/* Enhanced button styles */ /* Enhanced button styles */
.btn-success { .btn-success {
background: #10b981 !important; background: var(--success-text, #10b981) !important;
border-color: #10b981 !important; border-color: var(--success-text, #10b981) !important;
} }
.btn-success:hover { .btn-success:hover {
@ -845,8 +850,8 @@
} }
.btn-danger { .btn-danger {
background: #ef4444 !important; background: var(--danger-text, #ef4444) !important;
border-color: #ef4444 !important; border-color: var(--danger-text, #ef4444) !important;
} }
.btn-danger:hover { .btn-danger:hover {
@ -855,8 +860,8 @@
} }
.btn-info { .btn-info {
background: #3b82f6 !important; background: var(--info-text, #3b82f6) !important;
border-color: #3b82f6 !important; border-color: var(--info-text, #3b82f6) !important;
} }
.btn-info:hover { .btn-info:hover {
@ -865,13 +870,13 @@
} }
.btn-primary { .btn-primary {
background: var(--docker-blue) !important; background: var(--accent-color, #0db7ed) !important;
border-color: var(--docker-blue) !important; border-color: var(--accent-color, #0db7ed) !important;
} }
.btn-primary:hover { .btn-primary:hover {
background: #0284c7 !important; background: var(--accent-hover, #0284c7) !important;
border-color: #0284c7 !important; border-color: var(--accent-hover, #0284c7) !important;
} }
.create-btn i { .create-btn i {

120
websiteFunctions/templates/websiteFunctions/ListDockersite.html
View File

@ -25,7 +25,7 @@
} }
.page-header h1 { .page-header h1 {
color: #1e293b; color: var(--text-heading, #1e293b);
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
@ -37,7 +37,7 @@
.page-header .docker-icon { .page-header .docker-icon {
width: 48px; width: 48px;
height: 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; border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -48,14 +48,14 @@
} }
.page-header p { .page-header p {
color: #64748b; color: var(--text-secondary, #64748b);
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;
flex: 1 1 100%; flex: 1 1 100%;
} }
.create-docker-btn { .create-docker-btn {
background: linear-gradient(135deg, #5856d6 0%, #7c7ff2 100%); background: linear-gradient(135deg, var(--accent-color, #5856d6) 0%, #7c7ff2 100%);
color: white; color: white;
border: none; border: none;
padding: 12px 24px; padding: 12px 24px;
@ -93,17 +93,18 @@
.search-box input { .search-box input {
width: 100%; width: 100%;
padding: 14px 20px 14px 50px; padding: 14px 20px 14px 50px;
border: 2px solid #e8e9ff; border: 2px solid var(--border-color, #e8e9ff);
border-radius: 12px; border-radius: 12px;
font-size: 15px; font-size: 15px;
transition: all 0.3s ease; transition: all 0.3s ease;
background: white; background: var(--bg-secondary, white);
box-shadow: 0 2px 8px rgba(0,0,0,0.04); box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.04));
color: var(--text-primary, #333);
} }
.search-box input:focus { .search-box input:focus {
outline: none; outline: none;
border-color: #5856d6; border-color: var(--accent-color, #5856d6);
box-shadow: 0 4px 12px rgba(88,86,214,0.15); box-shadow: 0 4px 12px rgba(88,86,214,0.15);
} }
@ -112,7 +113,7 @@
left: 18px; left: 18px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: #94a3b8; color: var(--text-secondary, #94a3b8);
font-size: 18px; font-size: 18px;
} }
@ -122,30 +123,31 @@
.records-select select { .records-select select {
padding: 14px 20px; padding: 14px 20px;
border: 2px solid #e8e9ff; border: 2px solid var(--border-color, #e8e9ff);
border-radius: 12px; border-radius: 12px;
font-size: 15px; font-size: 15px;
background: white; background: var(--bg-secondary, white);
box-shadow: 0 2px 8px rgba(0,0,0,0.04); color: var(--text-primary, #333);
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.04));
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.records-select select:focus { .records-select select:focus {
outline: none; outline: none;
border-color: #5856d6; border-color: var(--accent-color, #5856d6);
} }
/* Docker Site Cards */ /* Docker Site Cards */
.docker-site-card { .docker-site-card {
background: white; background: var(--bg-secondary, white);
border-radius: 16px; border-radius: 16px;
padding: 0; padding: 0;
margin-bottom: 20px; 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; transition: all 0.3s ease;
overflow: hidden; overflow: hidden;
border: 1px solid #f1f3f5; border: 1px solid var(--border-color, #f1f3f5);
} }
.docker-site-card:hover { .docker-site-card:hover {
@ -154,12 +156,12 @@
} }
.site-header { .site-header {
background: linear-gradient(135deg, #f8f9ff 0%, #f3f1ff 100%); background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, #f3f1ff 100%);
padding: 20px 24px; padding: 20px 24px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid #e8e9ff; border-bottom: 1px solid var(--border-color, #e8e9ff);
} }
.site-title { .site-title {
@ -172,7 +174,7 @@
margin: 0; margin: 0;
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--text-heading, #1e293b);
} }
.site-title a { .site-title a {
@ -182,17 +184,17 @@
} }
.site-title a:hover { .site-title a:hover {
color: #5856d6; color: var(--accent-color, #5856d6);
} }
.external-link { .external-link {
color: #94a3b8; color: var(--text-secondary, #94a3b8);
font-size: 16px; font-size: 16px;
margin-left: 8px; margin-left: 8px;
} }
.manage-btn { .manage-btn {
background: #5856d6; background: var(--accent-color, #5856d6);
color: white; color: white;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
@ -207,7 +209,7 @@
} }
.manage-btn:hover { .manage-btn:hover {
background: #4845d2; background: var(--accent-hover, #4845d2);
color: white; color: white;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(88,86,214,0.25); box-shadow: 0 4px 12px rgba(88,86,214,0.25);
@ -233,12 +235,12 @@
.detail-icon { .detail-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #5856d6; color: var(--accent-color, #5856d6);
font-size: 18px; font-size: 18px;
flex-shrink: 0; flex-shrink: 0;
} }
@ -249,7 +251,7 @@
.detail-label { .detail-label {
font-size: 12px; font-size: 12px;
color: #94a3b8; color: var(--text-secondary, #94a3b8);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
margin-bottom: 2px; margin-bottom: 2px;
@ -258,7 +260,7 @@
.detail-value { .detail-value {
font-size: 15px; font-size: 15px;
color: #2f3640; color: var(--text-primary, #2f3640);
font-weight: 500; font-weight: 500;
} }
@ -275,14 +277,14 @@
.state-badge.running, .state-badge.running,
.state-badge.active { .state-badge.active {
background: #d4f8e8; background: var(--success-bg, #d4f8e8);
color: #065f46; color: var(--success-text, #065f46);
} }
.state-badge.stopped, .state-badge.stopped,
.state-badge.inactive { .state-badge.inactive {
background: #fee2e2; background: var(--danger-bg, #fee2e2);
color: #991b1b; color: var(--danger-text, #991b1b);
} }
.state-badge.paused { .state-badge.paused {
@ -306,8 +308,8 @@
} }
.delete-btn { .delete-btn {
background: #fee2e2; background: var(--danger-bg, #fee2e2);
color: #dc2626; color: var(--danger-text, #dc2626);
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
border-radius: 8px; border-radius: 8px;
@ -321,7 +323,7 @@
} }
.delete-btn:hover { .delete-btn:hover {
background: #dc2626; background: var(--danger-text, #dc2626);
color: white; color: white;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220,38,38,0.25); box-shadow: 0 4px 12px rgba(220,38,38,0.25);
@ -331,7 +333,7 @@
.loading-container { .loading-container {
text-align: center; text-align: center;
padding: 60px; padding: 60px;
color: #94a3b8; color: var(--text-secondary, #94a3b8);
} }
.loading-spinner { .loading-spinner {
@ -351,7 +353,7 @@
} }
.pagination-info { .pagination-info {
color: #64748b; color: var(--text-secondary, #64748b);
font-size: 14px; font-size: 14px;
} }
@ -361,10 +363,11 @@
.pagination-select select { .pagination-select select {
padding: 10px 16px; padding: 10px 16px;
border: 2px solid #e8e9ff; border: 2px solid var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
background: white; background: var(--bg-secondary, white);
color: var(--text-primary, #333);
cursor: pointer; cursor: pointer;
} }
@ -373,16 +376,17 @@
border-radius: 16px; border-radius: 16px;
border: none; border: none;
overflow: hidden; overflow: hidden;
background: var(--bg-secondary, white);
} }
.modal-header { .modal-header {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-bottom: 1px solid #e8e9ff; border-bottom: 1px solid var(--border-color, #e8e9ff);
padding: 20px 24px; padding: 20px 24px;
} }
.modal-title { .modal-title {
color: #1e293b; color: var(--text-heading, #1e293b);
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
} }
@ -392,14 +396,14 @@
} }
.modal-body h4 { .modal-body h4 {
color: #64748b; color: var(--text-secondary, #64748b);
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
} }
.modal-footer { .modal-footer {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-top: 1px solid #e8e9ff; border-top: 1px solid var(--border-color, #e8e9ff);
padding: 16px 24px; padding: 16px 24px;
gap: 12px; gap: 12px;
} }
@ -412,18 +416,18 @@
} }
.modal-footer .btn-default { .modal-footer .btn-default {
background: white; background: var(--bg-secondary, white);
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
color: #64748b; color: var(--text-secondary, #64748b);
} }
.modal-footer .btn-default:hover { .modal-footer .btn-default:hover {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-color: #d8d9ff; border-color: #d8d9ff;
} }
.modal-footer .btn-warning { .modal-footer .btn-warning {
background: #dc2626; background: var(--danger-text, #dc2626);
border: none; border: none;
color: white; color: white;
} }
@ -438,9 +442,9 @@
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 80px 20px; padding: 80px 20px;
background: white; background: var(--bg-secondary, white);
border-radius: 16px; 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 { .empty-state-icon {
@ -452,18 +456,18 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 auto 24px; margin: 0 auto 24px;
color: #5856d6; color: var(--accent-color, #5856d6);
font-size: 48px; font-size: 48px;
} }
.empty-state h3 { .empty-state h3 {
color: #1e293b; color: var(--text-heading, #1e293b);
font-size: 24px; font-size: 24px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.empty-state p { .empty-state p {
color: #64748b; color: var(--text-secondary, #64748b);
font-size: 16px; font-size: 16px;
margin-bottom: 24px; margin-bottom: 24px;
} }
@ -480,13 +484,13 @@
} }
.alert-success { .alert-success {
background: #d4f8e8; background: var(--success-bg, #d4f8e8);
color: #065f46; color: var(--success-text, #065f46);
} }
.alert-danger { .alert-danger {
background: #fee2e2; background: var(--danger-bg, #fee2e2);
color: #991b1b; color: var(--danger-text, #991b1b);
} }
.alert .close { .alert .close {

78
websiteFunctions/templates/websiteFunctions/RemoteBackupConfig.html
View File

@ -17,18 +17,18 @@
} }
.backup-section { .backup-section {
background: white; background: var(--bg-secondary, white);
border-radius: 12px; border-radius: 12px;
padding: 25px; padding: 25px;
margin-bottom: 25px; margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
} }
.section-title { .section-title {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -41,7 +41,7 @@
content: ''; content: '';
width: 4px; width: 4px;
height: 24px; height: 24px;
background: #5b5fcf; background: var(--accent-color, #5b5fcf);
border-radius: 2px; border-radius: 2px;
} }
@ -60,7 +60,7 @@
.form-label { .form-label {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #2f3640; color: var(--text-primary, #2f3640);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-align: right; text-align: right;
@ -70,17 +70,17 @@
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
padding: 12px 16px; padding: 12px 16px;
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
color: #2f3640; color: var(--text-primary, #2f3640);
background: white; background: var(--bg-secondary, white);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.form-control:focus { .form-control:focus {
outline: none; outline: none;
border-color: #5b5fcf; border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91,95,207,0.1); box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
} }
@ -89,8 +89,8 @@
} }
.btn-primary { .btn-primary {
background: #5b5fcf; background: var(--accent-color, #5b5fcf);
border: 1px solid #5b5fcf; border: 1px solid var(--accent-color, #5b5fcf);
color: white; color: white;
padding: 12px 24px; padding: 12px 24px;
border-radius: 8px; border-radius: 8px;
@ -105,8 +105,8 @@
} }
.btn-primary:hover { .btn-primary:hover {
background: #4b4fbf; background: var(--accent-hover, #4a4fc4);
border-color: #4b4fbf; border-color: var(--accent-hover, #4a4fc4);
box-shadow: 0 3px 8px rgba(91,95,207,0.3); box-shadow: 0 3px 8px rgba(91,95,207,0.3);
transform: translateY(-1px); transform: translateY(-1px);
} }
@ -129,8 +129,8 @@
/* Table Styles */ /* Table Styles */
.table-container { .table-container {
background: #fafbff; background: var(--bg-hover, #f8f9ff);
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
@ -138,11 +138,11 @@
.table { .table {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
background: white; background: var(--bg-secondary, white);
} }
.table thead { .table thead {
background: #fafbff; background: var(--bg-hover, #f8f9ff);
} }
.table th { .table th {
@ -150,23 +150,23 @@
padding: 15px; padding: 15px;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #8893a7; color: var(--text-secondary, #8893a7);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
border-bottom: 1px solid #e8e9ff; border-bottom: 1px solid var(--border-color, #e8e9ff);
} }
.table td { .table td {
border: none; border: none;
padding: 15px; padding: 15px;
font-size: 14px; font-size: 14px;
color: #2f3640; color: var(--text-primary, #2f3640);
border-bottom: 1px solid #f1f3f5; border-bottom: 1px solid #f1f3f5;
vertical-align: middle; vertical-align: middle;
} }
.table tbody tr:hover { .table tbody tr:hover {
background: #fafbff; background: var(--bg-hover, #f8f9ff);
} }
.table tbody tr:last-child td { .table tbody tr:last-child td {
@ -183,13 +183,13 @@
} }
.backup-type.sftp { .backup-type.sftp {
background: #e0f2fe; background: var(--info-bg, #e0f2fe);
color: #0369a1; color: var(--info-text, #0369a1);
} }
.backup-type.s3 { .backup-type.s3 {
background: #fef3c7; background: var(--warning-bg, #fef3c7);
color: #92400e; color: var(--warning-text, #92400e);
} }
/* Action Buttons */ /* Action Buttons */
@ -211,35 +211,35 @@
} }
.btn-schedule { .btn-schedule {
color: #10b981; color: var(--success-text, #065f46);
border-color: #d1fae5; border-color: #d1fae5;
background: #f0fdf4; background: var(--success-bg, #f0fdf4);
} }
.btn-schedule:hover { .btn-schedule:hover {
background: #10b981; background: var(--success-text, #065f46);
color: white; color: white;
border-color: #10b981; border-color: var(--success-text, #065f46);
text-decoration: none; text-decoration: none;
} }
.btn-delete { .btn-delete {
color: #ef4444; color: var(--danger-text, #ef4444);
border-color: #fee2e2; border-color: #fee2e2;
background: #fef2f2; background: var(--danger-bg, #fef2f2);
} }
.btn-delete:hover { .btn-delete:hover {
background: #ef4444; background: var(--danger-text, #ef4444);
color: white; color: white;
border-color: #ef4444; border-color: var(--danger-text, #ef4444);
} }
/* Empty State */ /* Empty State */
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 60px 20px; padding: 60px 20px;
color: #8893a7; color: var(--text-secondary, #8893a7);
} }
.empty-state svg { .empty-state svg {
@ -252,7 +252,7 @@
.empty-state h3 { .empty-state h3 {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #2f3640; color: var(--text-heading, #2f3640);
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -268,12 +268,12 @@
/* Info Alert */ /* Info Alert */
.info-alert { .info-alert {
background: #f0f9ff; background: var(--info-bg, #e0f2fe);
border: 1px solid #bae6fd; border: 1px solid #bae6fd;
border-radius: 8px; border-radius: 8px;
padding: 15px; padding: 15px;
margin-bottom: 20px; margin-bottom: 20px;
color: #0c4a6e; color: var(--info-text, #0369a1);
font-size: 14px; font-size: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -281,7 +281,7 @@
} }
.info-alert i { .info-alert i {
color: #0284c7; color: var(--info-text, #0369a1);
} }
/* Responsive */ /* Responsive */

94
websiteFunctions/templates/websiteFunctions/RestoreBackups.html
View File

@ -17,18 +17,18 @@
} }
.restore-section { .restore-section {
background: white; background: var(--bg-secondary, white);
border-radius: 12px; border-radius: 12px;
padding: 25px; padding: 25px;
margin-bottom: 25px; margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
} }
.section-title { .section-title {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -41,12 +41,12 @@
content: ''; content: '';
width: 4px; width: 4px;
height: 24px; height: 24px;
background: #5b5fcf; background: var(--accent-color, #5b5fcf);
border-radius: 2px; border-radius: 2px;
} }
.restore-description { .restore-description {
color: #8893a7; color: var(--text-secondary, #8893a7);
font-size: 14px; font-size: 14px;
margin-bottom: 25px; margin-bottom: 25px;
line-height: 1.5; line-height: 1.5;
@ -54,8 +54,8 @@
/* Table Styles */ /* Table Styles */
.table-container { .table-container {
background: #fafbff; background: var(--bg-hover, #f8f9ff);
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
@ -63,11 +63,11 @@
.table { .table {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
background: white; background: var(--bg-secondary, white);
} }
.table thead { .table thead {
background: #fafbff; background: var(--bg-hover, #f8f9ff);
} }
.table th { .table th {
@ -75,23 +75,23 @@
padding: 15px; padding: 15px;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #8893a7; color: var(--text-secondary, #8893a7);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
border-bottom: 1px solid #e8e9ff; border-bottom: 1px solid var(--border-color, #e8e9ff);
} }
.table td { .table td {
border: none; border: none;
padding: 15px; padding: 15px;
font-size: 14px; font-size: 14px;
color: #2f3640; color: var(--text-primary, #2f3640);
border-bottom: 1px solid #f1f3f5; border-bottom: 1px solid #f1f3f5;
vertical-align: middle; vertical-align: middle;
} }
.table tbody tr:hover { .table tbody tr:hover {
background: #fafbff; background: var(--bg-hover, #f8f9ff);
} }
.table tbody tr:last-child td { .table tbody tr:last-child td {
@ -108,18 +108,18 @@
} }
.backup-type.full { .backup-type.full {
background: #e0f2fe; background: var(--info-bg, #e0f2fe);
color: #0369a1; color: var(--info-text, #0369a1);
} }
.backup-type.data { .backup-type.data {
background: #d1fae5; background: var(--success-bg, #f0fdf4);
color: #065f46; color: var(--success-text, #065f46);
} }
.backup-type.database { .backup-type.database {
background: #fef3c7; background: var(--warning-bg, #fef3c7);
color: #92400e; color: var(--warning-text, #92400e);
} }
/* Destination Badge */ /* Destination Badge */
@ -131,8 +131,8 @@
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
background: #f0f4ff; background: var(--bg-hover, #f8f9ff);
color: #5b5fcf; color: var(--accent-color, #5b5fcf);
} }
/* Action Buttons */ /* Action Buttons */
@ -154,35 +154,35 @@
} }
.btn-restore { .btn-restore {
color: #10b981; color: var(--success-text, #065f46);
border-color: #d1fae5; border-color: #d1fae5;
background: #f0fdf4; background: var(--success-bg, #f0fdf4);
} }
.btn-restore:hover { .btn-restore:hover {
background: #10b981; background: var(--success-text, #065f46);
color: white; color: white;
border-color: #10b981; border-color: var(--success-text, #065f46);
text-decoration: none; text-decoration: none;
} }
.btn-delete { .btn-delete {
color: #ef4444; color: var(--danger-text, #ef4444);
border-color: #fee2e2; border-color: #fee2e2;
background: #fef2f2; background: var(--danger-bg, #fef2f2);
} }
.btn-delete:hover { .btn-delete:hover {
background: #ef4444; background: var(--danger-text, #ef4444);
color: white; color: white;
border-color: #ef4444; border-color: var(--danger-text, #ef4444);
} }
/* Empty State */ /* Empty State */
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 60px 20px; padding: 60px 20px;
color: #8893a7; color: var(--text-secondary, #8893a7);
} }
.empty-state svg { .empty-state svg {
@ -195,7 +195,7 @@
.empty-state h3 { .empty-state h3 {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #2f3640; color: var(--text-heading, #2f3640);
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -207,13 +207,13 @@
/* Modal Styles */ /* Modal Styles */
.modal-content { .modal-content {
border-radius: 12px; border-radius: 12px;
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
box-shadow: 0 10px 40px rgba(0,0,0,0.1); box-shadow: 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
} }
.modal-header { .modal-header {
background: #fafbff; background: var(--bg-hover, #f8f9ff);
border-bottom: 1px solid #e8e9ff; border-bottom: 1px solid var(--border-color, #e8e9ff);
padding: 20px; padding: 20px;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
} }
@ -221,7 +221,7 @@
.modal-title { .modal-title {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
margin: 0; margin: 0;
} }
@ -230,16 +230,16 @@
} }
.modal-footer { .modal-footer {
background: #fafbff; background: var(--bg-hover, #f8f9ff);
border-top: 1px solid #e8e9ff; border-top: 1px solid var(--border-color, #e8e9ff);
padding: 15px 20px; padding: 15px 20px;
border-radius: 0 0 12px 12px; border-radius: 0 0 12px 12px;
} }
.btn-default { .btn-default {
background: white; background: var(--bg-secondary, white);
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
color: #2f3640; color: var(--text-primary, #2f3640);
padding: 8px 20px; padding: 8px 20px;
border-radius: 6px; border-radius: 6px;
font-size: 14px; font-size: 14px;
@ -249,14 +249,14 @@
} }
.btn-default:hover { .btn-default:hover {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-color: #5b5fcf; border-color: var(--accent-color, #5b5fcf);
color: #5b5fcf; color: var(--accent-color, #5b5fcf);
} }
.btn-danger { .btn-danger {
background: #ef4444; background: var(--danger-text, #ef4444);
border: 1px solid #ef4444; border: 1px solid var(--danger-text, #ef4444);
color: white; color: white;
padding: 8px 20px; padding: 8px 20px;
border-radius: 6px; border-radius: 6px;