/* ========================================================== ZENHO - ULTIMATE MEMBER Form full width + righe 1 / 2 / 3 colonne ========================================================== */ /* ========================================================== 1. FORM A TUTTA LARGHEZZA ========================================================== */ .um.um-register, .um.um-login, .um.um-profile, .um { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .um .um-form, .um .um-form form { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* Anche il contenitore WordPress non deve restringere il form */ .zenho-page-content .um, .zenho-page-content .um-form, .zenho-page-content .um-form form { width: 100% !important; max-width: none !important; } /* ========================================================== 2. RIGHE ========================================================== */ /* * Ultimate Member genera: * * .um-col-1 * * .um-col-121 * .um-col-122 * * .um-col-131 * .um-col-132 * .um-col-133 * * Qui trasformiamo ogni riga in flex. */ .um .um-row { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; column-gap: 24px !important; row-gap: 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* ========================================================== 3. RIGA A 1 COLONNA ========================================================== */ .um .um-row > .um-col-1 { float: none !important; flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================== 4. RIGA A 2 COLONNE ========================================================== */ .um .um-row > .um-col-121, .um .um-row > .um-col-122 { float: none !important; flex: 1 1 calc(50% - 12px) !important; width: auto !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================== 5. RIGA A 3 COLONNE ========================================================== */ .um .um-row > .um-col-131, .um .um-row > .um-col-132, .um .um-row > .um-col-133 { float: none !important; flex: 1 1 calc(33.333% - 16px) !important; width: auto !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================== 6. COLONNE VUOTE ========================================================== */ /* * Se in una riga da 2 o 3 colonne una colonna รจ realmente vuota, * non deve continuare ad occupare spazio. * * La/e colonna/e restante/i si allargheranno automaticamente. */ .um .um-row > .um-col-121:empty, .um .um-row > .um-col-122:empty, .um .um-row > .um-col-131:empty, .um .um-row > .um-col-132:empty, .um .um-row > .um-col-133:empty { display: none !important; } /* I clearfix di Ultimate Member non servono con Flexbox */ .um .um-row > .um-clear { display: none !important; } /* ========================================================== 7. CAMPI ========================================================== */ .um .um-field { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Spaziatura verticale */ .um .um-field { margin-bottom: 20px !important; } /* ========================================================== 8. INPUT / SELECT / TEXTAREA ========================================================== */ .um .um-form input[type="text"], .um .um-form input[type="email"], .um .um-form input[type="password"], .um .um-form input[type="tel"], .um .um-form input[type="number"], .um .um-form input[type="url"], .um .um-form select, .um .um-form textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border: 1px solid #d7d7d7 !important; border-radius: 4px !important; background: #ffffff !important; box-shadow: none !important; } /* Focus */ .um .um-form input[type="text"]:focus, .um .um-form input[type="email"]:focus, .um .um-form input[type="password"]:focus, .um .um-form input[type="tel"]:focus, .um .um-form input[type="number"]:focus, .um .um-form input[type="url"]:focus, .um .um-form select:focus, .um .um-form textarea:focus { border-color: #2cc0be !important; box-shadow: 0 0 0 1px #2cc0be !important; outline: none !important; } /* ========================================================== 9. LABEL ========================================================== */ .um .um-field-label label { font-weight: 600 !important; } /* Asterisco campo obbligatorio */ .um .um-req { color: #2cc0be !important; } /* ========================================================== 10. BOTTONE PRINCIPALE ========================================================== */ .um input[type="submit"].um-button, .um input[type="button"].um-button, .um button.um-button, .um a.um-button { background: #2cc0be !important; color: #ffffff !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; text-shadow: none !important; font-weight: 600 !important; transition: background-color .2s ease, opacity .2s ease !important; } /* Hover */ .um input[type="submit"].um-button:hover, .um input[type="button"].um-button:hover, .um button.um-button:hover, .um a.um-button:hover { background: #229f9d !important; color: #ffffff !important; } /* ========================================================== 11. BOTTONE SECONDARIO ========================================================== */ .um .um-button.um-alt { background: #eeeeee !important; color: #333333 !important; } .um .um-button.um-alt:hover { background: #dddddd !important; color: #222222 !important; } /* ========================================================== 12. AREA BOTTONI ========================================================== */ .um .um-col-alt, .um .um-col-alt-b { width: 100% !important; max-width: none !important; clear: both !important; } /* ========================================================== 13. TABLET Tre colonne diventano due ========================================================== */ @media (max-width: 1024px) { .um .um-row { column-gap: 20px !important; } /* Le righe originariamente a 3 colonne vanno su 2 colonne */ .um .um-row > .um-col-131, .um .um-row > .um-col-132, .um .um-row > .um-col-133 { flex: 1 1 calc(50% - 10px) !important; } } /* ========================================================== 14. MOBILE Tutto a una colonna ========================================================== */ @media (max-width: 767px) { .um .um-row { display: block !important; } .um .um-row > .um-col-1, .um .um-row > .um-col-121, .um .um-row > .um-col-122, .um .um-row > .um-col-131, .um .um-row > .um-col-132, .um .um-row > .um-col-133 { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } }