- aggiornati form registrazione
- Login - Password dimenticata - Aggiorna password. - Email registrazione - Ammetti Utente
This commit is contained in:
Surya Paolo
@@ -1,6 +1,376 @@
|
||||
.mypanel {
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
// ========================================
|
||||
// VARIABILI (Sincronizzate)
|
||||
// ========================================
|
||||
$primary-color: #1976d2;
|
||||
$primary-light: #42a5f5;
|
||||
$primary-dark: #1565c0;
|
||||
$accent-color: #26a69a;
|
||||
$positive-color: #21ba45;
|
||||
$negative-color: #c10015;
|
||||
|
||||
$border-radius: 16px;
|
||||
$border-radius-sm: 12px;
|
||||
$border-radius-lg: 24px;
|
||||
|
||||
$transition-speed: 0.3s;
|
||||
$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
$shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
$shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
|
||||
|
||||
$mobile-breakpoint: 768px;
|
||||
|
||||
// ========================================
|
||||
// CONTAINER PRINCIPALE
|
||||
// ========================================
|
||||
.update-password-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background-attachment: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 12px;
|
||||
align-items: flex-start;
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CARD PRINCIPALE
|
||||
// ========================================
|
||||
.update-card {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow: $shadow-lg;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
animation: fadeInUp 0.6s ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
max-width: 100%;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// HEADER
|
||||
// ========================================
|
||||
.update-header {
|
||||
text-align: center;
|
||||
padding: 40px 24px 24px;
|
||||
background: linear-gradient(to bottom, rgba(103, 126, 234, 0.05), transparent);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
&.success {
|
||||
background: linear-gradient(to bottom, rgba(33, 186, 69, 0.08), transparent);
|
||||
border-bottom-color: rgba(33, 186, 69, 0.15);
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 32px 16px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(25, 118, 210, 0.1), rgba(38, 166, 154, 0.1));
|
||||
animation: scaleIn 0.6s ease;
|
||||
|
||||
&.success {
|
||||
background: linear-gradient(135deg, rgba(33, 186, 69, 0.15), rgba(38, 166, 154, 0.15));
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 16px;
|
||||
|
||||
.q-icon {
|
||||
font-size: 48px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.update-title {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.3;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.update-subtitle {
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// FORM
|
||||
// ========================================
|
||||
.update-form {
|
||||
padding: 32px 24px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// INPUT FIELDS
|
||||
// ========================================
|
||||
.modern-input {
|
||||
:deep(.q-field__control) {
|
||||
border-radius: $border-radius-sm;
|
||||
min-height: 56px;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: 52px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
border-color: $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-field__label) {
|
||||
font-size: 1rem;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-field__prepend) {
|
||||
.q-icon {
|
||||
font-size: 24px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.q-field--focused {
|
||||
:deep(.q-field__control) {
|
||||
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&.q-field--error {
|
||||
animation: shake 0.4s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// PASSWORD HINT
|
||||
// ========================================
|
||||
.password-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: rgba(103, 126, 234, 0.08);
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
margin-top: -8px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 10px;
|
||||
font-size: 0.8125rem;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.q-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// BUTTONS
|
||||
// ========================================
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
border-radius: $border-radius;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
background: linear-gradient(135deg, $positive-color, #26a69a);
|
||||
box-shadow: $shadow-md;
|
||||
transition: all $transition-speed ease;
|
||||
margin-top: 8px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-lg;
|
||||
background: linear-gradient(135deg, #1e8e3e, $positive-color);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
height: 52px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// SUCCESS MESSAGE
|
||||
// ========================================
|
||||
.success-message {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 24px;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 0 0 20px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
min-width: 200px;
|
||||
height: 52px;
|
||||
border-radius: $border-radius;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
background: linear-gradient(135deg, $primary-color, $primary-light);
|
||||
box-shadow: $shadow-md;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-lg;
|
||||
background: linear-gradient(135deg, $primary-dark, $primary-color);
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
height: 48px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ANIMAZIONI
|
||||
// ========================================
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// RESPONSIVE UTILITIES
|
||||
// ========================================
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
.update-password-container {
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// LEGACY CLASSES
|
||||
// ========================================
|
||||
.mypanel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mybanner {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
Reference in New Issue
Block a user