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:08:38 +05:00
parent 8d437387e1
commit 1abf49d0b7
8 changed files with 279 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
websiteFunctions/templates/websiteFunctions/WPAddNewPlugin.html
View File

@ -17,18 +17,18 @@
} }
.plugin-section { .plugin-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;
} }
.plugin-description { .plugin-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;
@ -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);
margin-bottom: 8px; margin-bottom: 8px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -70,22 +70,22 @@
.form-control { .form-control {
width: 100%; width: 100%;
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 @@
} }
.search-result-item:hover { .search-result-item:hover {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
color: #5b5fcf; color: var(--accent-color, #5b5fcf);
} }
.search-result-item:last-child { .search-result-item:last-child {
@ -120,7 +120,7 @@
.plugin-icon { .plugin-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
background: #e8e9ff; background: var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -140,13 +140,13 @@
.plugin-desc { .plugin-desc {
font-size: 12px; font-size: 12px;
color: #8893a7; color: var(--text-secondary, #8893a7);
} }
/* Selected Plugins Section */ /* Selected Plugins Section */
.selected-plugins-section { .selected-plugins-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: 20px; padding: 20px;
margin-bottom: 25px; margin-bottom: 25px;
@ -155,7 +155,7 @@
.selected-header { .selected-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;
@ -168,20 +168,20 @@
} }
.selected-plugin { .selected-plugin {
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: 10px 16px; padding: 10px 16px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 14px; font-size: 14px;
color: #2f3640; color: var(--text-primary, #2f3640);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.selected-plugin:hover { .selected-plugin:hover {
border-color: #5b5fcf; border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 2px 8px rgba(91,95,207,0.15); box-shadow: 0 2px 8px rgba(91,95,207,0.15);
} }
@ -202,8 +202,8 @@
/* Button Styles */ /* Button Styles */
.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;
@ -218,8 +218,8 @@
} }
.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);
} }
@ -233,9 +233,9 @@
} }
.btn-secondary { .btn-secondary {
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: 12px 32px; padding: 12px 32px;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
@ -249,9 +249,9 @@
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-color: #5b5fcf; border-color: var(--accent-color, #5b5fcf);
color: #5b5fcf; color: var(--accent-color, #5b5fcf);
text-decoration: none; text-decoration: none;
} }
@ -271,7 +271,7 @@
.empty-selected { .empty-selected {
text-align: center; text-align: center;
padding: 40px; padding: 40px;
color: #8893a7; color: var(--text-secondary, #8893a7);
font-size: 14px; font-size: 14px;
} }
@ -283,12 +283,12 @@
/* Info Alert */ /* Info Alert */
.info-alert { .info-alert {
background: #f0f9ff; background: var(--info-bg, #f0f9ff);
border: 1px solid #bae6fd; border: 1px solid var(--info-border, #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;
display: flex; display: flex;
align-items: center; align-items: center;
@ -296,7 +296,7 @@
} }
.info-alert i { .info-alert i {
color: #0284c7; color: var(--info-accent, #0284c7);
} }
/* Responsive */ /* Responsive */

88
websiteFunctions/templates/websiteFunctions/WPConfigurePlugins.html
View File

@ -17,18 +17,18 @@
} }
.plugins-section { .plugins-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;
} }
.plugins-description { .plugins-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;
@ -62,8 +62,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: 10px 20px; padding: 10px 20px;
border-radius: 8px; border-radius: 8px;
@ -78,8 +78,8 @@
} }
.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);
text-decoration: none; text-decoration: none;
@ -88,8 +88,8 @@
/* Table Styles */ /* Table Styles */
.table-container { .table-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;
overflow: hidden; overflow: hidden;
} }
@ -97,11 +97,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, #fafbff);
} }
.table th { .table th {
@ -109,23 +109,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 var(--border-light, #f1f3f5);
vertical-align: middle; vertical-align: middle;
} }
.table tbody tr:hover { .table tbody tr:hover {
background: #fafbff; background: var(--bg-hover, #fafbff);
} }
.table tbody tr:last-child td { .table tbody tr:last-child td {
@ -151,35 +151,35 @@
} }
.btn-edit { .btn-edit {
color: #10b981; color: var(--success-accent, #10b981);
border-color: #d1fae5; border-color: var(--success-border, #d1fae5);
background: #f0fdf4; background: var(--success-light, #f0fdf4);
} }
.btn-edit:hover { .btn-edit:hover {
background: #10b981; background: var(--success-accent, #10b981);
color: white; color: white;
border-color: #10b981; border-color: var(--success-accent, #10b981);
text-decoration: none; text-decoration: none;
} }
.btn-delete { .btn-delete {
color: #ef4444; color: var(--danger-accent, #ef4444);
border-color: #fee2e2; border-color: var(--danger-border, #fee2e2);
background: #fef2f2; background: var(--danger-light, #fef2f2);
} }
.btn-delete:hover { .btn-delete:hover {
background: #ef4444; background: var(--danger-accent, #ef4444);
color: white; color: white;
border-color: #ef4444; border-color: var(--danger-accent, #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 {
@ -192,7 +192,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;
} }
@ -204,13 +204,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.1));
} }
.modal-header { .modal-header {
background: #fafbff; background: var(--bg-hover, #fafbff);
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;
} }
@ -218,7 +218,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;
} }
@ -227,16 +227,16 @@
} }
.modal-footer { .modal-footer {
background: #fafbff; background: var(--bg-hover, #fafbff);
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;
@ -246,9 +246,9 @@
} }
.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 {

114
websiteFunctions/templates/websiteFunctions/WPCreate.html
View File

@ -18,18 +18,18 @@
/* Page Header */ /* Page Header */
.page-header { .page-header {
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);
} }
.page-header h1 { .page-header h1 {
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
margin: 0 0 10px 0; margin: 0 0 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
@ -39,7 +39,7 @@
.page-header .icon { .page-header .icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
background: #5856d6; background: var(--accent-color, #5856d6);
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -51,7 +51,7 @@
.page-header p { .page-header p {
font-size: 15px; font-size: 15px;
color: #64748b; color: var(--text-secondary, #64748b);
margin: 0; margin: 0;
} }
@ -63,17 +63,17 @@
} }
.wp-section { .wp-section {
background: white; background: var(--bg-secondary, white);
border-radius: 12px; border-radius: 12px;
padding: 25px; padding: 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: 18px; font-size: 18px;
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;
@ -84,17 +84,17 @@
content: ''; content: '';
width: 4px; width: 4px;
height: 24px; height: 24px;
background: #5856d6; background: var(--accent-color, #5856d6);
border-radius: 2px; border-radius: 2px;
} }
/* Sidebar Info */ /* Sidebar Info */
.info-card { .info-card {
background: white; background: var(--bg-secondary, white);
border-radius: 12px; border-radius: 12px;
padding: 25px; padding: 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);
height: fit-content; height: fit-content;
position: sticky; position: sticky;
top: 20px; top: 20px;
@ -103,7 +103,7 @@
.info-card h3 { .info-card h3 {
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;
@ -118,12 +118,12 @@
.feature-list li { .feature-list li {
padding: 12px 0; padding: 12px 0;
border-bottom: 1px solid #f0f0ff; border-bottom: 1px solid var(--border-color, #f0f0ff);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
font-size: 14px; font-size: 14px;
color: #64748b; color: var(--text-secondary, #64748b);
} }
.feature-list li:last-child { .feature-list li:last-child {
@ -131,13 +131,13 @@
} }
.feature-list i { .feature-list i {
color: #5856d6; color: var(--accent-color, #5856d6);
font-size: 16px; font-size: 16px;
flex-shrink: 0; flex-shrink: 0;
} }
.stats-box { .stats-box {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
margin-top: 20px; margin-top: 20px;
@ -163,7 +163,7 @@
.stats-box .stat-value { .stats-box .stat-value {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
color: #5856d6; color: var(--accent-color, #5856d6);
} }
/* Form Styles */ /* Form Styles */
@ -174,17 +174,17 @@
.form-section-title { .form-section-title {
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 2px solid #f0f0ff; border-bottom: 2px solid var(--border-color, #f0f0ff);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
.form-section-title i { .form-section-title i {
color: #5856d6; color: var(--accent-color, #5856d6);
} }
.form-group { .form-group {
@ -194,7 +194,7 @@
.form-label { .form-label {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #2f3640; color: var(--text-primary, #2f3640);
margin-bottom: 8px; margin-bottom: 8px;
display: block; display: block;
} }
@ -202,23 +202,23 @@
.form-control { .form-control {
width: 100%; width: 100%;
padding: 12px 16px; padding: 12px 16px;
border: 2px solid #e8e9ff; border: 2px solid var(--border-color, #e8e9ff);
border-radius: 8px; border-radius: 8px;
font-size: 15px; font-size: 15px;
color: #2f3640; color: var(--text-primary, #2f3640);
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.form-control:focus { .form-control:focus {
outline: none; outline: none;
border-color: #5856d6; border-color: var(--accent-color, #5856d6);
box-shadow: 0 0 0 3px rgba(88,86,214,0.1); box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
background: white; background: var(--bg-secondary, white);
} }
.form-control::placeholder { .form-control::placeholder {
color: #94a3b8; color: var(--text-secondary, #94a3b8);
font-size: 14px; font-size: 14px;
} }
@ -250,14 +250,14 @@
} }
select.form-control option { select.form-control option {
color: #2f3640; color: var(--text-primary, #2f3640);
background-color: white; background-color: var(--bg-secondary, white);
padding: 8px; padding: 8px;
} }
select.form-control:focus { select.form-control:focus {
color: #2f3640; color: var(--text-primary, #2f3640);
background-color: white; background-color: var(--bg-secondary, white);
} }
.input-group { .input-group {
@ -275,7 +275,7 @@
.help-text { .help-text {
font-size: 13px; font-size: 13px;
color: #94a3b8; color: var(--text-secondary, #94a3b8);
margin-top: 5px; margin-top: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -313,7 +313,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #e8e9ff; background-color: var(--border-color, #e8e9ff);
transition: .4s; transition: .4s;
border-radius: 26px; border-radius: 26px;
} }
@ -325,13 +325,13 @@
width: 18px; width: 18px;
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
background-color: white; background-color: var(--bg-secondary, white);
transition: .4s; transition: .4s;
border-radius: 50%; border-radius: 50%;
} }
input:checked + .slider { input:checked + .slider {
background-color: #5856d6; background-color: var(--accent-color, #5856d6);
} }
input:checked + .slider:before { input:checked + .slider:before {
@ -340,7 +340,7 @@
.switch-label { .switch-label {
font-size: 14px; font-size: 14px;
color: #2f3640; color: var(--text-primary, #2f3640);
font-weight: 500; font-weight: 500;
} }
@ -360,13 +360,13 @@
} }
.btn-primary { .btn-primary {
background: #5856d6; background: var(--accent-color, #5856d6);
color: white; color: white;
box-shadow: 0 2px 8px rgba(88,86,214,0.3); box-shadow: 0 2px 8px rgba(88,86,214,0.3);
} }
.btn-primary:hover { .btn-primary:hover {
background: #4644c0; background: var(--accent-hover, #4644c0);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(88,86,214,0.4); box-shadow: 0 4px 12px rgba(88,86,214,0.4);
} }
@ -413,18 +413,18 @@
.progress-icon { .progress-icon {
width: 80px; width: 80px;
height: 80px; height: 80px;
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 auto 20px; margin: 0 auto 20px;
font-size: 36px; font-size: 36px;
color: #5856d6; color: var(--accent-color, #5856d6);
} }
.status-message { .status-message {
background: #f8f9ff; background: var(--bg-hover, #f8f9ff);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
margin-bottom: 25px; margin-bottom: 25px;
@ -433,21 +433,21 @@
.status-message h2 { .status-message h2 {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-heading, #2f3640);
margin: 0; margin: 0;
} }
.progress { .progress {
background: #e8e9ff; background: var(--border-color, #e8e9ff);
border-radius: 50px; border-radius: 50px;
height: 30px; height: 30px;
overflow: hidden; overflow: hidden;
margin-bottom: 25px; margin-bottom: 25px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px var(--shadow-color, rgba(0,0,0,0.05));
} }
.progress-bar { .progress-bar {
background: linear-gradient(90deg, #5856d6 0%, #4644c0 100%); background: linear-gradient(90deg, var(--accent-color, #5856d6) 0%, var(--accent-hover, #4644c0) 100%);
height: 100%; height: 100%;
transition: width 0.3s ease; transition: width 0.3s ease;
display: flex; display: flex;
@ -477,23 +477,23 @@
} }
.alert-success { .alert-success {
background: #d1fae5; background: var(--success-bg, #d1fae5);
color: #065f46; color: var(--success-text, #065f46);
border: 1px solid #a7f3d0; border: 1px solid var(--success-border, #a7f3d0);
} }
.alert-success i { .alert-success i {
color: #10b981; color: var(--success-accent, #10b981);
} }
.alert-danger { .alert-danger {
background: #fee2e2; background: var(--danger-bg, #fee2e2);
color: #991b1b; color: var(--danger-text, #991b1b);
border: 1px solid #fecaca; border: 1px solid var(--danger-border, #fecaca);
} }
.alert-danger i { .alert-danger i {
color: #ef4444; color: var(--danger-accent, #ef4444);
} }
.loading-spinner { .loading-spinner {
@ -503,7 +503,7 @@
} }
.error-text { .error-text {
color: #ef4444; color: var(--danger-text, #ef4444);
font-size: 13px; font-size: 13px;
margin-top: 5px; margin-top: 5px;
} }

34
websiteFunctions/templates/websiteFunctions/WPEidtPlugin.html
View File

@ -7,46 +7,50 @@
{% get_current_language as LANGUAGE_CODE %} {% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} --> <!-- Current language: {{ LANGUAGE_CODE }} -->
<div class="container"> <div class="container" style="background: var(--bg-primary, #f0f0ff); padding: 20px; border-radius: 12px;">
<span id="pluginbID" style="display: none">{{ pluginbID }}</span> <span id="pluginbID" style="display: none">{{ pluginbID }}</span>
<div id="page-title"> <div id="page-title" style="background: var(--bg-secondary, white); padding: 25px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08)); border: 1px solid var(--border-color, #e8e9ff);">
<h2 id="domainNamePage">{% trans "Edit Plugin Bucket" %} <h2 id="domainNamePage" style="color: var(--text-heading, #2f3640); margin: 0;">{% trans "Edit Plugin Bucket" %}
</h2> </h2>
</div> </div>
<div ng-controller="WPAddNewPlugin" class="panel"> <div ng-controller="WPAddNewPlugin" class="panel" style="background: var(--bg-secondary, white); border-radius: 12px; box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08)); border: 1px solid var(--border-color, #e8e9ff);">
<div class="panel-body"> <div class="panel-body" style="padding: 25px;">
<div class="example-box-wrapper"> <div class="example-box-wrapper">
<h2>{{ BucketName }}</h2> <h2 style="color: var(--text-heading, #2f3640); margin-bottom: 20px;">{{ BucketName }}</h2>
<form name="websiteCreationForm" action="/" id="createPackages" <form name="websiteCreationForm" action="/" id="createPackages"
class="form-horizontal bordered-row panel-body"> class="form-horizontal bordered-row panel-body" style="background: var(--bg-hover, #f8f9ff); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color, #e8e9ff);">
<label style="margin-bottom: 10px;">{% trans "Search Plugin Name" %}</label> <label style="margin-bottom: 10px; color: var(--text-primary, #2f3640); font-weight: 600;">{% trans "Search Plugin Name" %}</label>
<input name="searchcontent" type="text" class="form-control" ng-model="searchcontent" <input name="searchcontent" type="text" class="form-control" ng-model="searchcontent"
ng-keyup="SearchPluginName('eidt')" ng-keyup="SearchPluginName('eidt')"
placeholder="{% trans "Search Plugin...." %}" required> placeholder="{% trans "Search Plugin...." %}" required
style="border: 1px solid var(--border-color, #e8e9ff); background: var(--bg-secondary, white); color: var(--text-primary, #2f3640); padding: 12px 16px; border-radius: 8px;">
<div id="mysearch" class="col-lg-12" style="display: none; border-top: none!important; <div id="mysearch" class="col-lg-12" style="display: none; border-top: none!important;
border: 1px solid rgba(90, 91, 92, 0.7); border: 1px solid var(--border-color, rgba(90, 91, 92, 0.7));
position: absolute; z-index: 1; position: absolute; z-index: 1;
background-color: #FFFFFF"> background-color: var(--bg-secondary, #FFFFFF); border-radius: 8px; box-shadow: 0 4px 12px var(--shadow-color, rgba(0,0,0,0.1));">
</div> </div>
<h3 style="margin-top: 20px;">Selected Plugin</h3> <h3 style="margin-top: 20px; color: var(--text-heading, #2f3640);">Selected Plugin</h3>
<div id="sedplugn" style=" display: flex; flex-direction: row; margin-top: 10px;"> <div id="sedplugn" style="display: flex; flex-direction: row; margin-top: 10px; gap: 10px; flex-wrap: wrap;">
{% for plugin in Selectedplugins %} {% for plugin in Selectedplugins %}
<div id="selplug" <div id="selplug"
style="background-color: #12207a; color: #FFFFFF; padding: 5px; border-radius: 30px"> style="background-color: var(--accent-color, #12207a); color: #FFFFFF; padding: 8px 12px; border-radius: 30px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500;">
{{ plugin }} {{ plugin }}
<svg ng-click="deletesPlgin('{{ plugin }}')" xmlns="http://www.w3.org/2000/svg" <svg ng-click="deletesPlgin('{{ plugin }}')" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true" aria-hidden="true"
role="img" width="1em" height="1em" role="img" width="1em" height="1em"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"> preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"
style="cursor: pointer; transition: all 0.2s ease;"
onmouseover="this.style.transform='scale(1.2)'"
onmouseout="this.style.transform='scale(1)'">
<path fill="none" stroke="currentColor" stroke-linecap="round" <path fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="1.5" d="m11.25 4.75l-6.5 6.5m0-6.5l6.5 6.5"/> stroke-width="1.5" d="m11.25 4.75l-6.5 6.5m0-6.5l6.5 6.5"/>

62
websiteFunctions/templates/websiteFunctions/WPRestoreHome.html
View File

@ -54,7 +54,7 @@
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
min-height: 100vh; min-height: 100vh;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%); background: linear-gradient(180deg, var(--bg-primary, #f8fafc) 0%, var(--bg-hover, #e2e8f0) 100%);
} }
/* Page Title Section */ /* Page Title Section */
@ -105,10 +105,10 @@
/* Main Panel */ /* Main Panel */
.panel { .panel {
background: var(--bg-card); background: var(--bg-secondary, white);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@ -119,13 +119,13 @@
/* Content Box Header */ /* Content Box Header */
.content-box-header { .content-box-header {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%); background: linear-gradient(135deg, var(--bg-hover, #eef2ff) 0%, var(--bg-primary, #f8fafc) 100%);
padding: 25px 30px; padding: 25px 30px;
margin: 0; margin: 0;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-heading, #1e293b);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color, #e2e8f0);
letter-spacing: -0.3px; letter-spacing: -0.3px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -144,10 +144,10 @@
/* Form Styling */ /* Form Styling */
.form-horizontal { .form-horizontal {
background: var(--bg-light); background: var(--bg-hover, #f8fafc);
padding: 30px; padding: 30px;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
} }
.form-group { .form-group {
@ -161,7 +161,7 @@
.control-label { .control-label {
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary, #1e293b);
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;
letter-spacing: 0.3px; letter-spacing: 0.3px;
@ -171,16 +171,16 @@
} }
.form-control { .form-control {
border: 2px solid var(--border-color); border: 2px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-md); border-radius: var(--radius-md, 8px);
padding: 12px 16px; padding: 12px 16px;
font-size: 15px; font-size: 15px;
transition: var(--transition-base); transition: var(--transition-base);
background: white; background: var(--bg-secondary, white);
} }
.form-control:focus { .form-control:focus {
border-color: var(--primary-color); border-color: var(--accent-color, #6366f1);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
outline: none; outline: none;
} }
@ -202,21 +202,21 @@
} }
.input-group .form-control { .input-group .form-control {
border-radius: var(--radius-md) 0 0 var(--radius-md); border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
border-right: none; border-right: none;
} }
.input-group-addon { .input-group-addon {
background: var(--bg-light); background: var(--bg-hover, #f8fafc);
border: 2px solid var(--border-color); border: 2px solid var(--border-color, #e2e8f0);
border-left: none; border-left: none;
padding: 12px 16px; padding: 12px 16px;
font-weight: 600; font-weight: 600;
color: var(--text-secondary); color: var(--text-secondary, #64748b);
} }
.input-group-btn input { .input-group-btn input {
border-radius: 0 var(--radius-md) var(--radius-md) 0; border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
border-left: none; border-left: none;
} }
@ -285,11 +285,11 @@
/* Progress Section */ /* Progress Section */
.progress { .progress {
height: 12px; height: 12px;
border-radius: var(--radius-full); border-radius: var(--radius-full, 9999px);
background: var(--border-color); background: var(--border-color, #e2e8f0);
overflow: hidden; overflow: hidden;
margin-top: 15px; margin-top: 15px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); box-shadow: inset 0 1px 3px var(--shadow-color, rgba(0,0,0,0.1));
} }
.progress-bar { .progress-bar {
@ -325,26 +325,26 @@
} }
.alert-success { .alert-success {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); background: linear-gradient(135deg, var(--success-bg, #d1fae5) 0%, var(--success-light, #a7f3d0) 100%);
color: #065f46; color: var(--success-text, #065f46);
border: 1px solid #6ee7b7; border: 1px solid var(--success-border, #6ee7b7);
} }
.alert-danger { .alert-danger {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); background: linear-gradient(135deg, var(--danger-bg, #fee2e2) 0%, var(--danger-light, #fecaca) 100%);
color: #991b1b; color: var(--danger-text, #991b1b);
border: 1px solid #fca5a5; border: 1px solid var(--danger-border, #fca5a5);
} }
/* Form Sections */ /* Form Sections */
#exinstingsitedivDB, #exinstingsitedivDB,
#exinstingsitediv, #exinstingsitediv,
#Newsitediv { #Newsitediv {
background: white; background: var(--bg-secondary, white);
padding: 20px; padding: 20px;
border-radius: var(--radius-md); border-radius: var(--radius-md, 8px);
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
transition: var(--transition-base); transition: var(--transition-base);
} }
@ -352,7 +352,7 @@
#exinstingsitediv:hover, #exinstingsitediv:hover,
#Newsitediv:hover { #Newsitediv:hover {
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
border-color: var(--primary-color); border-color: var(--accent-color, #6366f1);
} }
/* Loading Animation */ /* Loading Animation */

23
websiteFunctions/templates/websiteFunctions/WPsiteHome.html
View File

@ -775,7 +775,7 @@
padding: 12px 15px; padding: 12px 15px;
font-size: 15px; font-size: 15px;
transition: all 0.3s ease; transition: all 0.3s ease;
background: white; background: var(--bg-secondary, white);
} }
.form-control:focus { .form-control:focus {
@ -815,19 +815,19 @@
} }
.alert-success { .alert-success {
background: #d1fae5; background: var(--success-bg, #d1fae5);
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-warning { .alert-warning {
background: #fef3c7; background: var(--warning-bg, #fef3c7);
color: #92400e; color: var(--warning-text, #92400e);
border: 1px solid #fde68a; border: 1px solid var(--warning-border, #fde68a);
} }
/* Labels */ /* Labels */
@ -841,8 +841,8 @@
} }
.label-success { .label-success {
background: #d1fae5; background: var(--success-bg, #d1fae5);
color: #065f46; color: var(--success-text, #065f46);
} }
/* Modal Styling */ /* Modal Styling */
@ -1882,7 +1882,7 @@
line-height: 1.25; line-height: 1.25;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border: 1px solid #ced4da; border: 1px solid var(--border-color, #ced4da);
border-radius: 0.25rem; border-radius: 0.25rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1895,6 +1895,7 @@
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
margin: 0; margin: 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
background: var(--bg-secondary, white);
} }
</style> </style>

96
websiteFunctions/templates/websiteFunctions/WPsitesList.html
View File

@ -397,18 +397,18 @@
} }
.wp-section { .wp-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;
@ -421,7 +421,7 @@
content: ''; content: '';
width: 4px; width: 4px;
height: 24px; height: 24px;
background: #5b5fcf; background: var(--accent-color, #5b5fcf);
border-radius: 2px; border-radius: 2px;
} }
@ -433,8 +433,8 @@
} }
.search-bar { .search-bar {
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: 15px; padding: 15px;
margin-bottom: 20px; margin-bottom: 20px;
@ -446,17 +446,17 @@
.form-control { .form-control {
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);
} }
@ -475,14 +475,14 @@
} }
.btn-primary { .btn-primary {
background: #5b5fcf; background: var(--accent-color, #5b5fcf);
border-color: #5b5fcf; border-color: var(--accent-color, #5b5fcf);
color: white; color: white;
} }
.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);
} }
@ -545,8 +545,8 @@
/* WordPress Site Item */ /* WordPress Site Item */
.wp-site-item { .wp-site-item {
background: white; background: var(--bg-secondary, white);
border: 1px solid #e8e9ff; border: 1px solid var(--border-color, #e8e9ff);
border-radius: 12px; border-radius: 12px;
margin-bottom: 20px; margin-bottom: 20px;
overflow: hidden; overflow: hidden;
@ -554,33 +554,33 @@
} }
.wp-site-item:hover { .wp-site-item:hover {
border-color: #5b5fcf; border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 4px 12px rgba(91,95,207,0.15); box-shadow: 0 4px 12px rgba(91,95,207,0.15);
} }
.wp-site-header { .wp-site-header {
padding: 20px; padding: 20px;
background: #fafbff; background: var(--bg-hover, #fafbff);
border-bottom: 1px solid #e8e9ff; border-bottom: 1px solid var(--border-color, #e8e9ff);
} }
.wp-site-header h4 { .wp-site-header h4 {
margin: 0; margin: 0;
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;
} }
.wp-site-content { .wp-site-content {
padding: 20px; padding: 20px;
background: white; background: var(--bg-secondary, white);
} }
.site-preview { .site-preview {
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: 15px; padding: 15px;
text-align: center; text-align: center;
@ -601,8 +601,8 @@
} }
.info-box { .info-box {
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: 15px; padding: 15px;
text-align: center; text-align: center;
@ -611,7 +611,7 @@
.info-box label { .info-box label {
display: block; display: block;
font-size: 12px; font-size: 12px;
color: #8893a7; color: var(--text-secondary, #8893a7);
margin-bottom: 5px; margin-bottom: 5px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -620,7 +620,7 @@
.info-box span { .info-box span {
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 700;
color: #2f3640; color: var(--text-primary, #2f3640);
} }
.settings-grid { .settings-grid {
@ -630,8 +630,8 @@
} }
.settings-group { .settings-group {
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: 15px; padding: 15px;
} }
@ -645,7 +645,7 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 14px; font-size: 14px;
color: #2f3640; color: var(--text-primary, #2f3640);
cursor: pointer; cursor: pointer;
} }
@ -659,7 +659,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: #5b5fcf; color: var(--accent-color, #5b5fcf);
font-size: 14px; font-size: 14px;
padding: 0 8px; padding: 0 8px;
} }
@ -669,8 +669,8 @@
} }
.pagination-info { .pagination-info {
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: 15px; padding: 15px;
display: flex; display: flex;
@ -682,11 +682,11 @@
} }
.alert-info { .alert-info {
background: #e3f2fd; background: var(--info-bg, #e3f2fd);
border: 1px solid #bbdefb; border: 1px solid var(--info-border, #bbdefb);
border-radius: 8px; border-radius: 8px;
padding: 15px; padding: 15px;
color: #1976d2; color: var(--info-text, #1976d2);
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
} }
@ -694,13 +694,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.1));
} }
.modal-header { .modal-header {
background: #fafbff; background: var(--bg-hover, #fafbff);
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;
} }
@ -708,7 +708,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;
} }
@ -717,21 +717,21 @@
} }
.modal-footer { .modal-footer {
background: #fafbff; background: var(--bg-hover, #fafbff);
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-secondary { .btn-secondary {
background: #64748b; background: var(--text-secondary, #64748b);
border-color: #64748b; border-color: var(--text-secondary, #64748b);
color: white; color: white;
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #475569; background: var(--text-primary, #475569);
border-color: #475569; border-color: var(--text-primary, #475569);
} }
/* Responsive */ /* Responsive */

60
websiteFunctions/templates/websiteFunctions/installWordPress.html
View File

@ -54,7 +54,7 @@
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
min-height: 100vh; min-height: 100vh;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%); background: linear-gradient(180deg, var(--bg-primary, #f8fafc) 0%, var(--bg-hover, #e2e8f0) 100%);
} }
/* Page Title Section */ /* Page Title Section */
@ -108,10 +108,10 @@
/* Main Panel */ /* Main Panel */
.panel { .panel {
background: var(--bg-card); background: var(--bg-secondary, white);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@ -122,13 +122,13 @@
/* Content Box Header */ /* Content Box Header */
.title-hero { .title-hero {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%); background: linear-gradient(135deg, var(--bg-hover, #eef2ff) 0%, var(--bg-primary, #f8fafc) 100%);
padding: 25px 30px; padding: 25px 30px;
margin: 0; margin: 0;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-heading, #2f3640);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color, #e2e8f0);
letter-spacing: -0.3px; letter-spacing: -0.3px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -141,7 +141,7 @@
} }
.title-hero a { .title-hero a {
color: var(--primary-color); color: var(--accent-color, #6366f1);
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
@ -152,7 +152,7 @@
} }
.title-hero a:hover { .title-hero a:hover {
color: var(--primary-hover); color: var(--accent-hover, #5558e3);
text-decoration: underline; text-decoration: underline;
} }
@ -163,10 +163,10 @@
/* Form Styling */ /* Form Styling */
.form-horizontal { .form-horizontal {
background: var(--bg-light); background: var(--bg-hover, #f8fafc);
padding: 30px; padding: 30px;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border: 1px solid var(--border-color); border: 1px solid var(--border-color, #e2e8f0);
} }
.form-group { .form-group {
@ -180,7 +180,7 @@
.control-label { .control-label {
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary, #1e293b);
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;
letter-spacing: 0.3px; letter-spacing: 0.3px;
@ -190,22 +190,22 @@
} }
.form-control { .form-control {
border: 2px solid var(--border-color); border: 2px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-md); border-radius: var(--radius-md, 8px);
padding: 12px 16px; padding: 12px 16px;
font-size: 15px; font-size: 15px;
transition: var(--transition-base); transition: var(--transition-base);
background: white; background: var(--bg-secondary, white);
} }
.form-control:focus { .form-control:focus {
border-color: var(--primary-color); border-color: var(--accent-color, #6366f1);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
outline: none; outline: none;
} }
.form-control::placeholder { .form-control::placeholder {
color: var(--text-muted); color: var(--text-secondary, #94a3b8);
font-size: 14px; font-size: 14px;
} }
@ -276,11 +276,11 @@
/* Progress Section */ /* Progress Section */
.progress { .progress {
height: 12px; height: 12px;
border-radius: var(--radius-full); border-radius: var(--radius-full, 9999px);
background: var(--border-color); background: var(--border-color, #e2e8f0);
overflow: hidden; overflow: hidden;
margin-top: 15px; margin-top: 15px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); box-shadow: inset 0 1px 3px var(--shadow-color, rgba(0,0,0,0.1));
} }
.progress-bar { .progress-bar {
@ -316,31 +316,31 @@
} }
.alert-success { .alert-success {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); background: linear-gradient(135deg, var(--success-bg, #d1fae5) 0%, var(--success-light, #a7f3d0) 100%);
color: #065f46; color: var(--success-text, #065f46);
border: 1px solid #6ee7b7; border: 1px solid var(--success-border, #6ee7b7);
} }
.alert-success a { .alert-success a {
color: #065f46; color: var(--success-text, #065f46);
font-weight: 600; font-weight: 600;
text-decoration: underline; text-decoration: underline;
} }
.alert-danger { .alert-danger {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); background: linear-gradient(135deg, var(--danger-bg, #fee2e2) 0%, var(--danger-light, #fecaca) 100%);
color: #991b1b; color: var(--danger-text, #991b1b);
border: 1px solid #fca5a5; border: 1px solid var(--danger-border, #fca5a5);
} }
/* Info Box */ /* Info Box */
.info-box { .info-box {
background: linear-gradient(135deg, #e0e7ff 0%, #cdd4f9 100%); background: linear-gradient(135deg, var(--info-bg, #e0e7ff) 0%, var(--info-light, #cdd4f9) 100%);
border: 1px solid #c7d2fe; border: 1px solid var(--info-border, #c7d2fe);
border-radius: var(--radius-lg); border-radius: var(--radius-lg, 12px);
padding: 20px; padding: 20px;
margin-bottom: 25px; margin-bottom: 25px;
color: var(--primary-color); color: var(--accent-color, #6366f1);
font-size: 14px; font-size: 14px;
line-height: 1.6; line-height: 1.6;
display: flex; display: flex;