style(auth): alinear botones de Google y Facebook horizontalmente en tablet y desktop

This commit is contained in:
2026-10-24 09:13:52 -05:00
parent ac6eb1a100
commit 5c7a8c925b
2 changed files with 89 additions and 29 deletions
+69 -14
View File
@@ -786,21 +786,31 @@ body {
}
.btn-social-fb {
border: 1px solid #cbd5e1;
border: 1px solid #dadce0;
background: #ffffff;
color: #1877f2;
font-weight: 600;
font-size: 0.9rem;
border-radius: 12px;
padding: 0.65rem 1rem;
transition: all 0.2s ease;
color: #3c4043;
font-weight: 500;
font-size: 0.82rem;
border-radius: 4px;
height: 40px;
padding: 0 0.85rem;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
text-decoration: none;
width: 100%;
max-width: 250px;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}
.btn-social-fb:hover {
background: #f0f6ff;
background: #f8fafd;
border-color: #1877f2;
color: #0c56be;
color: #1877f2;
box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
}
.btn-social-fb i {
color: #1877f2;
}
.staff-badge-pill {
@@ -831,19 +841,63 @@ body {
.social-auth-wrapper {
width: 100%;
margin-top: 0.25rem;
}
.social-buttons-grid {
display: flex;
flex-direction: column;
gap: 0.65rem;
width: 100%;
align-items: center;
}
.social-auth-wrapper .g_id_signin {
max-width: 100%;
.social-btn-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
}
.social-auth-wrapper .g_id_signin iframe {
.social-google-box .g_id_signin {
max-width: 100%;
display: flex;
justify-content: center;
}
.social-google-box .g_id_signin iframe {
max-width: 100% !important;
}
/* Tablet y Desktop: botones alineados horizontalmente (min-width: 576px) */
@media (min-width: 576px) {
.social-buttons-grid {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.social-btn-box {
flex: 1 1 50%;
width: auto;
}
.social-google-box {
justify-content: center;
}
.social-fb-box {
justify-content: center;
}
.btn-social-fb {
width: 100%;
max-width: 240px;
}
}
/* ==============================================================================
Mobile & Responsive Optimization for Login & App
============================================================================== */
@@ -977,8 +1031,9 @@ body {
}
.btn-social-fb {
padding: 0.6rem 0.75rem;
font-size: 0.84rem;
height: 40px;
font-size: 0.82rem;
max-width: 250px;
}
.login-divider {
+20 -15
View File
@@ -167,7 +167,7 @@
<span>O regístrate / accede con</span>
</div>
<!-- Google Identity Services Button -->
<!-- Social Auth: horizontal en tablet y desktop, vertical en móvil -->
<div class="social-auth-wrapper">
<div id="g_id_onload"
data-client_id="<%= googleClientId %>"
@@ -176,21 +176,26 @@
data-callback="handleGoogleCredentialResponse"
data-auto_prompt="false">
</div>
<div class="g_id_signin w-100 d-flex justify-content-center"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="continue_with"
data-size="large"
data-logo_alignment="left">
</div>
<!-- Botón de Facebook OAuth -->
<div class="mt-2">
<button type="button" class="btn btn-social-fb w-100 d-flex align-items-center justify-content-center gap-2 shadow-sm" onclick="handleFacebookLogin()">
<i class="fab fa-facebook fs-5"></i>
<span>Continuar con Facebook</span>
</button>
<div class="social-buttons-grid">
<div class="social-btn-box social-google-box">
<div class="g_id_signin w-100 d-flex justify-content-center"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="continue_with"
data-size="large"
data-logo_alignment="left">
</div>
</div>
<!-- Botón de Facebook OAuth -->
<div class="social-btn-box social-fb-box">
<button type="button" class="btn btn-social-fb d-flex align-items-center justify-content-center gap-2 shadow-sm" onclick="handleFacebookLogin()">
<i class="fab fa-facebook fs-5"></i>
<span>Continuar con Facebook</span>
</button>
</div>
</div>
</div>