New features implemented: - Firewall management: enable/disable, status display, apply rules - IP address management: add/remove IPv4 and IPv6 with client UI - VNC console access integration (VirtFusion v6.1.0+) - Backup plan assignment/removal via API - Resource modification: in-place memory/CPU/traffic changes - UsageUpdate cron: automated bandwidth and disk usage sync to WHMCS - Dry run validation: test server creation config before provisioning - Admin "Validate Server Config" button for dry run testing Client area additions: - Firewall panel with enable/disable/apply controls and status badge - Network panel with IPv4/IPv6 listing, add, and remove buttons - VNC Console panel with browser-based access - All panels load asynchronously with spinner indicators Comprehensive README rewrite with: - Table of contents, requirements matrix, step-by-step installation - Detailed configuration guide for all features - Theme compatibility documentation (Six, Twenty-One, Lagom) - Complete API endpoints reference organized by category - UsageUpdate cron documentation with data format details - Troubleshooting tables for common issues - Known issues section covering version requirements - Security architecture documentation - File structure reference https://claude.ai/code/session_01TCsJ4WZCGuEX3zqh1tQ2zx
154 lines
2.6 KiB
CSS
154 lines
2.6 KiB
CSS
/* VirtFusion Direct Provisioning Module Styles */
|
|
|
|
/* Typography */
|
|
.vf-bold {
|
|
font-weight: 800;
|
|
}
|
|
.vf-small {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.vf-button {
|
|
font-size: 0.8rem;
|
|
padding: 0.95rem 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
.vf-button-small {
|
|
font-size: 0.8rem;
|
|
padding: 0.75rem 1.3rem;
|
|
font-weight: 500;
|
|
}
|
|
.vf-spinner-margin {
|
|
margin-right: 7px;
|
|
}
|
|
|
|
/* Status Badges */
|
|
.vf-badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.35rem 0.75rem;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
border-radius: 6px;
|
|
display: inline-block;
|
|
}
|
|
.vf-badge-active {
|
|
background-color: rgba(32, 177, 0, 0.12);
|
|
color: #276900;
|
|
}
|
|
.vf-badge-awaiting {
|
|
background-color: rgba(177, 89, 0, 0.12);
|
|
color: #692000;
|
|
}
|
|
.vf-badge-suspended {
|
|
background-color: rgba(220, 53, 69, 0.12);
|
|
color: #721c24;
|
|
}
|
|
|
|
/* Power Management */
|
|
.vf-power-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
.vf-btn-power {
|
|
min-width: 100px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.8rem;
|
|
padding: 0.5rem 1rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* Hidden elements (initial state) */
|
|
#vf-login-button-spinner {
|
|
display: none;
|
|
}
|
|
#vf-password-reset-button-spinner {
|
|
display: none;
|
|
}
|
|
#vf-password-reset-error {
|
|
display: none;
|
|
}
|
|
#vf-password-reset-success {
|
|
display: none;
|
|
}
|
|
#vf-login-error {
|
|
display: none;
|
|
}
|
|
#vf-server-info {
|
|
display: none;
|
|
}
|
|
#vf-server-info-error {
|
|
display: none;
|
|
}
|
|
#vf-data-server-traffic-sep {
|
|
display: inline;
|
|
}
|
|
|
|
/* Loader */
|
|
#vf-server-info-loader {
|
|
min-height: 136px;
|
|
}
|
|
#vf-loading {
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 3px solid rgba(225, 224, 224, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: #0e151a;
|
|
animation: vf-spin 1s ease-in-out infinite;
|
|
-webkit-animation: vf-spin 1s ease-in-out infinite;
|
|
}
|
|
.vf-loader {
|
|
margin: 30px;
|
|
}
|
|
|
|
@keyframes vf-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes vf-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Error message spacing */
|
|
#vf-server-info-error {
|
|
margin: 10px;
|
|
}
|
|
|
|
/* Network / IP Management */
|
|
.vf-ip-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
}
|
|
.vf-ip-address {
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
}
|
|
.vf-ip-remove {
|
|
font-size: 0.7rem;
|
|
padding: 0.15rem 0.4rem;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.vf-power-buttons {
|
|
flex-direction: column;
|
|
}
|
|
.vf-btn-power {
|
|
width: 100%;
|
|
}
|
|
.vf-ip-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|