/* 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; } /* Resource panel */ .vf-resource-item .progress { background-color: rgba(0,0,0,0.08); border-radius: 4px; } /* Order form slider UI */ .vf-slider-container { padding: 8px 0; } .vf-slider-value { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; text-align: center; } .vf-slider { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 3px; outline: none; cursor: pointer; } .vf-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #337ab7; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .vf-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #337ab7; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } /* Responsive adjustments */ @media (max-width: 768px) { .vf-power-buttons { flex-direction: column; } .vf-btn-power { width: 100%; } .vf-ip-row { flex-wrap: wrap; } }