/* layout_01.css — WP Classic (SC Admin Area Setting) Questo foglio NON sostituisce il CSS core di WordPress: lo “rifinisce” usando CSS variables. Le variabili vengono valorizzate dal CSS generato (es. uploads/.../layout_01/login-custom.css). */ /* ========================= Base + Background ========================= */ body.login { /* Typography */ font-family: var(--scaas-login-font-family, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif); font-size: var(--scaas-login-base-size, 14px); line-height: var(--scaas-login-line-height, 1.4); /* Background */ background-color: var(--scaas-login-bg-color, #67bc45); background-image: var(--scaas-login-bg-image, none); background-position: var(--scaas-login-bg-position, center center); background-size: var(--scaas-login-bg-size, cover); background-repeat: var(--scaas-login-bg-repeat, no-repeat); /* Text */ color: var(--scaas-login-text-color, #1d2327); /* Needed for overlay layering */ position: relative; min-height: 100vh; } /* Overlay (usare --scaas-login-bg-overlay-opacity 0..1) */ body.login::before { content: ""; position: fixed; inset: 0; background: var(--scaas-login-bg-overlay-color, transparent); opacity: var(--scaas-login-bg-overlay-opacity, 0); pointer-events: none; z-index: 0; } /* Assicura che i contenuti siano sopra l’overlay */ body.login #login { position: relative; z-index: 1; } /* ========================= Logo WP ========================= */ body.login h1 a { background-image: var(--scaas-login-logo-image, none) !important; background-size: contain !important; width: var(--scaas-login-logo-width, 84px) !important; height: var(--scaas-login-logo-height, 84px) !important; margin: 0 auto 0 !important; } /* ========================= Container + Card ========================= */ body.login #login { width: var(--scaas-login-form-width, 320px) !important; padding: 0 !important; /* WP aggiunge padding: lo gestiamo sulla card */ } body.login #loginform, body.login #lostpasswordform, body.login #resetpassform, body.login #registerform { background: var(--scaas-login-card-bg, #ffffff) !important; border-color: var(--scaas-login-card-border-color, #dcdcde) !important; border-width: var(--scaas-login-card-border-width, 1px) !important; border-style: solid !important; border-radius: var(--scaas-login-card-radius, 10px) !important; box-shadow: var(--scaas-login-card-shadow, 0 10px 30px rgba(0,0,0,.08)) !important; padding: var(--scaas-login-card-padding, 24px) !important; } /* ========================= Card Scope (login.card.scope) - Default: "form" (card applicata ai form: #loginform, #lostpasswordform, ...) - Opzione: "container" (card applicata al container #login, includendo logo + form + link) NOTE: in CSS puro non è possibile fare branching su stringhe. Per questo, quando login.card.scope = "container" il plugin deve aggiungere al la classe: scaas-login-card-scope-container ========================= */ /* Scope: container (logo accostato al form dentro la stessa card) */ body.login.scaas-login-card-scope-container #login { background: var(--scaas-login-card-bg, #ffffff) !important; border-color: var(--scaas-login-card-border-color, #dcdcde) !important; border-width: var(--scaas-login-card-border-width, 1px) !important; border-style: solid !important; border-radius: var(--scaas-login-card-radius, 10px) !important; box-shadow: var(--scaas-login-card-shadow, 0 10px 30px rgba(0,0,0,.08)) !important; padding: var(--scaas-login-card-padding, 24px) !important; box-sizing: border-box !important; } /* In scope=container, il form non deve “disegnare” una seconda card */ body.login.scaas-login-card-scope-container #loginform, body.login.scaas-login-card-scope-container #lostpasswordform, body.login.scaas-login-card-scope-container #resetpassform, body.login.scaas-login-card-scope-container #registerform { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* ========================= Inputs ========================= */ body.login #loginform input[type="text"], body.login #loginform input[type="password"], body.login #loginform input[type="email"], body.login #lostpasswordform input[type="text"], body.login #lostpasswordform input[type="email"], body.login #resetpassform input[type="password"], body.login #registerform input[type="text"], body.login #registerform input[type="password"], body.login #registerform input[type="email"] { background: var(--scaas-login-input-bg, #ffffff) !important; color: var(--scaas-login-input-text, #1d2327) !important; border-color: var(--scaas-login-input-border-color, #c3c4c7) !important; border-radius: var(--scaas-login-input-radius, 8px) !important; /* WP mette height/padding: lasciamo gestire a WP, ma garantiamo una resa uniforme */ box-shadow: none !important; } body.login #loginform input[type="text"]:focus, body.login #loginform input[type="password"]:focus, body.login #loginform input[type="email"]:focus, body.login #lostpasswordform input:focus, body.login #resetpassform input:focus, body.login #registerform input:focus { border-color: var(--scaas-login-input-focus-color, #2271b1) !important; box-shadow: 0 0 0 1px var(--scaas-login-input-focus-color, #2271b1) !important; outline: none !important; } /* Testi label e piccoli testi */ body.login label, body.login .description { color: var(--scaas-login-text-color, #1d2327) !important; } /* “Remember me” label più tenue */ body.login p.forgetmenot label { color: var(--scaas-login-muted-color, #646970) !important; } /* ========================= Button (Log In) ========================= */ /* wp-core-ui è sul body: usa selettore composto, non discendente */ body.login.wp-core-ui .button-primary, body.login.wp-core-ui .button.button-primary, body.login #wp-submit { background: var(--scaas-login-button-bg, #2271b1) !important; border-color: var(--scaas-login-button-bg, #2271b1) !important; color: var(--scaas-login-button-text, #ffffff) !important; border-radius: var(--scaas-login-button-radius, 8px) !important; box-shadow: none !important; text-shadow: none !important; } body.login.wp-core-ui .button-primary:hover, body.login.wp-core-ui .button-primary:focus, body.login.wp-core-ui .button.button-primary:hover, body.login.wp-core-ui .button.button-primary:focus, body.login #wp-submit:hover, body.login #wp-submit:focus { background: var(--scaas-login-button-bg-hover, #135e96) !important; border-color: var(--scaas-login-button-bg-hover, #135e96) !important; color: var(--scaas-login-button-text, #ffffff) !important; } body.login.wp-core-ui .button-primary:focus, body.login.wp-core-ui .button.button-primary:focus, body.login #wp-submit:focus { box-shadow: 0 0 0 2px rgba(0,0,0,.08), 0 0 0 4px var(--scaas-login-input-focus-color, #2271b1) !important; } /* ========================= Links (nav/footer) ========================= */ body.login #nav a, body.login #backtoblog a, body.login .privacy-policy-page-link a { color: var(--scaas-login-link-color, #2271b1) !important; } body.login #nav a:hover, body.login #backtoblog a:hover, body.login .privacy-policy-page-link a:hover { color: var(--scaas-login-link-hover-color, #135e96) !important; } /* Riduci la “sensazione” di grigio WP */ body.login #nav, body.login #backtoblog, body.login .privacy-policy-page-link { color: var(--scaas-login-muted-color, #646970) !important; } /* ========================= Messages (error/success/info) ========================= */ body.login #login_error, body.login .message, body.login .success { border-left-width: 4px !important; border-left-style: solid !important; background: var(--scaas-login-card-bg, #ffffff) !important; border-radius: var(--scaas-login-card-radius, 10px) !important; box-shadow: none !important; } /* WP usa .message per info e successo; #login_error per errore */ body.login #login_error { border-left-color: var(--scaas-login-msg-error, #d63638) !important; } body.login .message { border-left-color: var(--scaas-login-msg-info, #2271b1) !important; } body.login .success { border-left-color: var(--scaas-login-msg-success, #00a32a) !important; } /* ========================= Toggles (visibilità) Richiede che tu aggiunga le classi al body (via login_body_class o altro): - scaas-login-hide-language-switcher - scaas-login-hide-back-to-site - scaas-login-hide-remember-me - scaas-login-hide-lost-password ========================= */ body.login.scaas-login-hide-language-switcher .language-switcher, body.login.scaas-login-hide-language-switcher .language-switcher-container { display: none !important; } body.login.scaas-login-hide-back-to-site #backtoblog { display: none !important; } body.login.scaas-login-hide-remember-me p.forgetmenot { display: none !important; } /* Tenta di nascondere solo il link “Lost your password?” quando possibile */ body.login.scaas-login-hide-lost-password #nav a[href*="action=lostpassword"], body.login.scaas-login-hide-lost-password #nav a[href*="lostpassword"] { display: none !important; } /* Se #nav resta vuoto dopo la rimozione link, nascondilo */ body.login.scaas-login-hide-lost-password #nav:empty { display: none !important; } /* ========================================================= FIX #2 - Centratura verticale + logo centrato rispetto card (mantiene la parametrizzazione via CSS variables) ========================================================= */ /* 1) Centratura verticale del blocco login + respiro dai bordi */ body.login { display: flex; flex-direction: column; justify-content: center; align-items: center; /* Nuove variabili (fallback non invasivi) */ padding-top: var(--scaas-login-page-padding-top, clamp(24px, 6vh, 72px)); padding-bottom: var(--scaas-login-page-padding-bottom, clamp(24px, 6vh, 72px)); /* Mantieni i lati gestiti dal container (#login max-width) */ padding-left: 0; padding-right: 0; box-sizing: border-box; } /* 2) Container login centrato + responsivo (non esce fuori su mobile) */ body.login #login { margin: 0 auto !important; /* già presente: width variabile */ width: var(--scaas-login-form-width, 320px) !important; /* nuovo: limita su viewport stretta */ max-width: var(--scaas-login-form-max-width, calc(100% - 32px)) !important; /* già presente: padding 0 */ padding: 0 !important; position: relative; z-index: 1; } /* 3) Garantisce che form/card segua il container */ body.login #loginform, body.login #lostpasswordform, body.login #resetpassform, body.login #registerform { width: 100% !important; box-sizing: border-box !important; } /* 4) Logo: evitare overflow e garantire centratura anche con width grandi */ body.login #login h1 { text-align: center !important; margin: var(--scaas-login-logo-margin, 0 0 var(--scaas-login-logo-margin-bottom, 24px) 0) !important; } body.login h1 a { /* già presente: background-image, size, width, height, margin */ background-image: var(--scaas-login-logo-image, none) !important; background-size: contain !important; width: var(--scaas-login-logo-width, 84px) !important; height: var(--scaas-login-logo-height, 84px) !important; /* nuovo: non superare mai la larghezza del container */ max-width: 100% !important; /* garantisce centratura e spaziatura coerente */ margin: 0 auto 0 !important; background-position: center center !important; background-repeat: no-repeat !important; display: block !important; } /* Language switcher sotto la card SOLO se non è nascosto */ body.login:not(.scaas-login-hide-language-switcher) #login .language-switcher, body.login:not(.scaas-login-hide-language-switcher) #login .language-switcher-container { margin-top: 16px !important; display: flex !important; justify-content: center !important; } /* Ridondanza “di sicurezza”: se il body ha la classe hide, nascondi sempre */ body.login.scaas-login-hide-language-switcher #login .language-switcher, body.login.scaas-login-hide-language-switcher #login .language-switcher-container { display: none !important; }