/** * MiMusicA Login Styles * Dark Purple Theme - Matching Player Design * * @author eShape * @version 4.0.0 */ /* === LOGIN WRAPPER === */ body .vmp-login-wrapper { min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; margin: 0 !important; } /* === LOGIN CARD - Dark Purple Theme === */ body .vmp-login-card { background: rgba(20, 20, 20, 0.95) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-radius: 28px !important; padding: 50px 40px !important; text-align: center !important; max-width: 440px !important; width: 100% !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.2) inset !important; position: relative !important; overflow: hidden !important; border: 1px solid rgba(139, 92, 246, 0.3) !important; } /* Gradient background effect */ body .vmp-login-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 200px !important; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.15) 100%) !important; border-radius: 28px 28px 0 0 !important; z-index: 0 !important; } /* === LOGO - Purple Gradient Circle === */ body .vmp-login-logo { width: 140px !important; height: 140px !important; margin: -20px auto 25px !important; border-radius: 50% !important; overflow: hidden !important; box-shadow: 0 20px 40px rgba(139, 92, 246, 0.6), 0 0 0 4px rgba(139, 92, 246, 0.2) !important; position: relative !important; z-index: 1 !important; background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important; padding: 3px !important; display: block !important; } body .vmp-login-logo img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; background: #ffffff !important; display: block !important; } /* === TITLE & TEXT === */ body .vmp-login-card h3 { margin: 0 !important; font-size: 36px !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.5px !important; position: relative !important; z-index: 1 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; text-align: center !important; } body .vmp-login-card > p { margin: 10px 0 35px !important; color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; font-weight: 400 !important; position: relative !important; z-index: 1 !important; text-align: center !important; } /* === FORM === */ body .vmp-login-form { margin-top: 0 !important; position: relative !important; z-index: 1 !important; } /* === INPUTS - Dark Purple Style === */ body .vmp-login-input { width: 100% !important; padding: 18px 24px !important; margin-bottom: 16px !important; border: 2px solid rgba(139, 92, 246, 0.3) !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 500 !important; box-sizing: border-box !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: block !important; } body .vmp-login-input::placeholder { color: rgba(255, 255, 255, 0.4) !important; font-weight: 400 !important; } body .vmp-login-input:focus { outline: none !important; border-color: #8b5cf6 !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2) !important; transform: translateY(-2px) !important; } /* === BUTTON - Purple Gradient === */ body .vmp-login-btn { width: 100% !important; padding: 16px 32px !important; background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important; color: white !important; border: none !important; border-radius: 14px !important; font-size: 17px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; letter-spacing: 0.3px !important; margin-top: 8px !important; } body .vmp-login-btn:hover { background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%) !important; transform: translateY(-3px) !important; box-shadow: 0 15px 35px rgba(139, 92, 246, 0.5) !important; } body .vmp-login-btn:active { transform: translateY(-1px) !important; } body .vmp-login-btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; transform: none !important; } /* === ERROR MESSAGE === */ body .vmp-login-error { background: rgba(220, 53, 69, 0.15) !important; border: 1px solid rgba(220, 53, 69, 0.4) !important; color: #ffebee !important; padding: 14px 18px !important; border-radius: 12px !important; margin-bottom: 18px !important; font-size: 14px !important; font-weight: 500 !important; backdrop-filter: blur(10px) !important; } .login-spinner { display: inline-block !important; } /* Animation removed - not needed for text */ /* === RESPONSIVE - MOBILE === */ @media (max-width: 768px) { body .vmp-login-card { padding: 40px 30px !important; max-width: 380px !important; } body .vmp-login-logo { width: 110px !important; height: 110px !important; margin: -15px auto 20px !important; } body .vmp-login-card h3 { font-size: 30px !important; } body .vmp-login-card > p { font-size: 15px !important; margin-bottom: 28px !important; } body .vmp-login-input { padding: 14px 18px !important; font-size: 15px !important; } body .vmp-login-btn { padding: 14px 28px !important; font-size: 16px !important; } } @media (max-width: 480px) { body .vmp-login-wrapper { padding: 15px !important; } body .vmp-login-card { padding: 35px 25px !important; } body .vmp-login-logo { width: 100px !important; height: 100px !important; } } /* Fix button text display */ body .vmp-login-btn { position: relative !important; } body .vmp-login-btn .login-text, body .vmp-login-btn .login-spinner { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 100% !important; } body .vmp-login-btn .login-spinner { display: none !important; }