| .admin-login-container { |
| min-height: 100vh; |
| width: 100vw; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| overflow: hidden; |
| padding: 20px; |
| z-index: 1; |
| transition: opacity 0.3s ease, transform 0.3s ease; |
| } |
|
|
| .admin-login-container:not(.loaded) { |
| opacity: 0; |
| } |
|
|
| .admin-login-container.loaded { |
| opacity: 1; |
| } |
|
|
| .admin-login-container.transitioning { |
| background: linear-gradient(135deg, #101029 0%, #182234ea 25%, #063455 50%, #094669 75%, #0f3c56 100%); |
| } |
|
|
| .full-background-loading { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient(135deg, #101029 0%, #182234ea 25%, #063455 50%, #094669 75%, #0f3c56 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 99999; |
| backdrop-filter: blur(10px); |
| overflow: hidden; |
| transition: opacity 0.3s ease-out; |
| } |
|
|
| .loading-particles { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| } |
|
|
| .loading-particle { |
| position: absolute; |
| width: 3px; |
| height: 3px; |
| background: linear-gradient(45deg, #667eea, #764ba2); |
| border-radius: 50%; |
| box-shadow: 0 0 8px rgba(102, 126, 234, 0.4); |
| } |
|
|
| .loading-content { |
| text-align: center; |
| color: #ffffff; |
| max-width: 400px; |
| padding: 40px; |
| } |
|
|
| .dashboard-loading-spinner { |
| position: relative; |
| width: 60px; |
| height: 60px; |
| margin: 0 auto 30px; |
| } |
|
|
| .dashboard-loading-spinner .spinner-ring { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| border: 3px solid transparent; |
| border-top: 3px solid #667eea; |
| border-radius: 50%; |
| animation: spinnerRotate 1.2s linear infinite; |
| } |
|
|
| .dashboard-loading-spinner .spinner-ring:nth-child(1) { |
| animation-delay: 0s; |
| } |
|
|
| .dashboard-loading-spinner .spinner-ring:nth-child(2) { |
| width: 80%; |
| height: 80%; |
| top: 10%; |
| left: 10%; |
| animation-delay: 0.2s; |
| border-top-color: rgba(102, 126, 234, 0.7); |
| } |
|
|
| .dashboard-loading-spinner .spinner-ring:nth-child(3) { |
| width: 60%; |
| height: 60%; |
| top: 20%; |
| left: 20%; |
| animation-delay: 0.4s; |
| border-top-color: rgba(102, 126, 234, 0.5); |
| } |
|
|
| .loading-title { |
| font-size: 2rem; |
| font-weight: 700; |
| margin-bottom: 10px; |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .loading-subtitle { |
| font-size: 1.1rem; |
| color: rgba(255, 255, 255, 0.8); |
| margin-bottom: 30px; |
| font-weight: 500; |
| } |
|
|
| .loading-progress { |
| width: 100%; |
| max-width: 300px; |
| margin: 0 auto; |
| } |
|
|
| .progress-bar { |
| width: 100%; |
| height: 6px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 3px; |
| overflow: hidden; |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
|
|
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #667eea, #764ba2); |
| border-radius: 3px; |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.5); |
| } |
|
|
| body.admin-login-active { |
| background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) !important; |
| overflow: hidden !important; |
| padding-top: 0 !important; |
| transition: background 0.3s ease; |
| } |
|
|
| html.admin-login-active { |
| background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) !important; |
| overflow: hidden !important; |
| transition: background 0.3s ease; |
| } |
|
|
| body[data-route*="admin/login"], |
| body[data-route*="admin"] { |
| background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) !important; |
| overflow: hidden !important; |
| padding-top: 0 !important; |
| } |
|
|
| body:has([href*="admin"]), |
| body:has([data-route*="admin"]) { |
| background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) !important; |
| overflow: hidden !important; |
| padding-top: 0 !important; |
| } |
|
|
| body.transitioning-to-dashboard { |
| background: linear-gradient(135deg, #101029 0%, #182234ea 25%, #063455 50%, #094669 75%, #0f3c56 100%) !important; |
| overflow: hidden !important; |
| transition: background 0.3s ease; |
| } |
|
|
| .admin-login-background { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 1; |
| } |
|
|
| .admin-login-particles { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| } |
|
|
| .admin-particle { |
| position: absolute; |
| width: 4px; |
| height: 4px; |
| background: linear-gradient(45deg, #667eea, #764ba2); |
| border-radius: 50%; |
| box-shadow: 0 0 10px rgba(102, 126, 234, 0.5); |
| } |
|
|
| .admin-login-card { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 24px; |
| padding: 48px; |
| width: 100%; |
| max-width: 480px; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| position: relative; |
| z-index: 2; |
| } |
|
|
| .admin-login-header { |
| text-align: center; |
| margin-bottom: 40px; |
| } |
|
|
| .admin-logo { |
| margin-bottom: 24px; |
| } |
|
|
| .admin-shield-icon { |
| color: #667eea; |
| filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.5)); |
| } |
|
|
| .admin-login-title { |
| font-size: 2.5rem; |
| font-weight: 800; |
| color: #fff; |
| margin-bottom: 8px; |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .admin-login-subtitle { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 1.1rem; |
| font-weight: 500; |
| } |
|
|
| .admin-login-form { |
| margin-bottom: 32px; |
| } |
|
|
| .form-group { |
| margin-bottom: 24px; |
| } |
|
|
| .form-label { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| color: #fff; |
| font-weight: 600; |
| margin-bottom: 8px; |
| font-size: 0.95rem; |
| } |
|
|
| .form-input { |
| width: 100%; |
| padding: 16px 20px; |
| background: rgba(255, 255, 255, 0.1); |
| border: 2px solid rgba(255, 255, 255, 0.2); |
| border-radius: 12px; |
| color: #fff; |
| font-size: 1rem; |
| transition: all 0.3s ease; |
| backdrop-filter: blur(10px); |
| } |
|
|
| .form-input::placeholder { |
| color: rgba(255, 255, 255, 0.5); |
| } |
|
|
| .form-input:focus { |
| outline: none; |
| border-color: #667eea; |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); |
| background: rgba(255, 255, 255, 0.15); |
| } |
|
|
| .form-input:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| } |
|
|
| .password-input-container { |
| position: relative; |
| } |
|
|
| .password-input { |
| padding-right: 60px; |
| } |
|
|
| .password-toggle { |
| position: absolute; |
| right: 16px; |
| top: 50%; |
| transform: translateY(-50%); |
| background: none; |
| border: none; |
| color: rgba(255, 255, 255, 0.6); |
| cursor: pointer; |
| padding: 4px; |
| border-radius: 6px; |
| transition: all 0.3s ease; |
| } |
|
|
| .password-toggle:hover { |
| color: #fff; |
| background: rgba(255, 255, 255, 0.1); |
| } |
|
|
| .password-toggle:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| .admin-login-btn { |
| width: 100%; |
| padding: 16px 24px; |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| border: none; |
| border-radius: 12px; |
| color: #fff; |
| font-size: 1.1rem; |
| font-weight: 700; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| transition: all 0.3s ease; |
| box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3); |
| } |
|
|
| .admin-login-btn:hover:not(:disabled) { |
| transform: translateY(-2px); |
| box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4); |
| } |
|
|
| .admin-login-btn:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| transform: none; |
| } |
|
|
| .spinning { |
| animation: spin 1s linear infinite; |
| } |
|
|
| @keyframes spin { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
|
|
| .loading-container { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| font-size: 0.9rem; |
| font-weight: 500; |
| } |
|
|
| .loading-spinner { |
| position: relative; |
| width: 16px; |
| height: 16px; |
| } |
|
|
| .spinner-ring { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| border: 1.5px solid transparent; |
| border-top: 1.5px solid #fff; |
| border-radius: 50%; |
| animation: spinnerRotate 1.2s linear infinite; |
| } |
|
|
| .spinner-ring:nth-child(1) { |
| animation-delay: 0s; |
| } |
|
|
| .spinner-ring:nth-child(2) { |
| width: 80%; |
| height: 80%; |
| top: 10%; |
| left: 10%; |
| animation-delay: 0.2s; |
| border-top-color: rgba(255, 255, 255, 0.7); |
| } |
|
|
| .spinner-ring:nth-child(3) { |
| width: 60%; |
| height: 60%; |
| top: 20%; |
| left: 20%; |
| animation-delay: 0.4s; |
| border-top-color: rgba(255, 255, 255, 0.5); |
| } |
|
|
| @keyframes spinnerRotate { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| } |
|
|
| .loading-container span { |
| animation: pulse 2s ease-in-out infinite; |
| } |
|
|
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .loading-content { |
| animation: fadeInUp 0.8s ease-out; |
| } |
|
|
| .loading-title { |
| animation: fadeInUp 0.8s ease-out 0.2s both; |
| } |
|
|
| .loading-subtitle { |
| animation: fadeInUp 0.8s ease-out 0.4s both; |
| } |
|
|
| .loading-progress { |
| animation: fadeInUp 0.8s ease-out 0.6s both; |
| } |
|
|
| .skeleton-loading { |
| background: linear-gradient(90deg, |
| rgba(255, 255, 255, 0.1) 25%, |
| rgba(255, 255, 255, 0.2) 50%, |
| rgba(255, 255, 255, 0.1) 75%); |
| background-size: 200% 100%; |
| animation: skeletonShimmer 1.5s infinite; |
| } |
|
|
| @keyframes skeletonShimmer { |
| 0% { background-position: -200% 0; } |
| 100% { background-position: 200% 0; } |
| } |
|
|
| .admin-login-footer { |
| text-align: center; |
| } |
|
|
| .security-notice { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| color: rgba(255, 255, 255, 0.6); |
| font-size: 0.9rem; |
| margin-bottom: 20px; |
| } |
|
|
| .back-to-site { |
| background: none; |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| color: rgba(255, 255, 255, 0.7); |
| padding: 12px 24px; |
| border-radius: 8px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| font-size: 0.9rem; |
| } |
|
|
| .back-to-site:hover { |
| background: rgba(255, 255, 255, 0.1); |
| color: #fff; |
| border-color: rgba(255, 255, 255, 0.5); |
| } |
|
|
| @media (max-width: 768px) { |
| .admin-login-container { |
| padding: 10px; |
| } |
| |
| .admin-login-card { |
| padding: 32px 24px; |
| margin: 20px; |
| max-width: 90vw; |
| } |
|
|
| .admin-login-title { |
| font-size: 2rem; |
| } |
|
|
| .admin-login-subtitle { |
| font-size: 1rem; |
| } |
|
|
| .form-input { |
| padding: 14px 16px; |
| font-size: 0.95rem; |
| } |
|
|
| .admin-login-btn { |
| padding: 14px 20px; |
| font-size: 1rem; |
| } |
|
|
| .loading-container { |
| gap: 6px; |
| } |
|
|
| .loading-spinner { |
| width: 14px; |
| height: 14px; |
| } |
|
|
| .loading-content { |
| padding: 20px; |
| max-width: 90vw; |
| } |
|
|
| .dashboard-loading-spinner { |
| width: 50px; |
| height: 50px; |
| margin-bottom: 20px; |
| } |
|
|
| .loading-title { |
| font-size: 1.5rem; |
| } |
|
|
| .loading-subtitle { |
| font-size: 1rem; |
| margin-bottom: 20px; |
| } |
|
|
| .loading-progress { |
| max-width: 250px; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .admin-login-container { |
| padding: 10px; |
| } |
|
|
| .admin-login-card { |
| padding: 24px 20px; |
| } |
|
|
| .admin-login-title { |
| font-size: 1.8rem; |
| } |
|
|
| .form-input { |
| padding: 12px 14px; |
| font-size: 0.9rem; |
| } |
|
|
| .admin-login-btn { |
| padding: 12px 16px; |
| font-size: 0.95rem; |
| } |
|
|
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .admin-login-container { |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f1419 100%); |
| } |
| } |
|
|
| @media (prefers-contrast: high) { |
| .admin-login-card { |
| border: 2px solid #fff; |
| } |
|
|
| .form-input { |
| border: 2px solid #fff; |
| } |
|
|
| .admin-login-btn { |
| border: 2px solid #fff; |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .admin-particle { |
| animation: none; |
| } |
|
|
| .admin-login-btn:hover { |
| transform: none; |
| } |
|
|
| .spinning { |
| animation: none; |
| } |
| } |
