112 lines
2.4 KiB
CSS
112 lines
2.4 KiB
CSS
/*
|
||
*
|
||
* 视觉规格（与 Dart 对齐）：
|
||
* - Spacer → logo（120h）→ Spacer → Facebook 主按钮 → 链接 → Spacer → 法律
|
||
* - Facebook 主按钮：46px 白胶囊 + Facebook "f" 图标（#1877f2）
|
||
* - 链接：14px 黑色下划线居中
|
||
*/
|
||
.panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
flex: 1 1 auto;
|
||
width: 100%;
|
||
min-height: 0;
|
||
}
|
||
|
||
.spacer {
|
||
flex: 1 1 0;
|
||
min-height: var(--page-section-gap, var(--spacing-lg));
|
||
}
|
||
|
||
.logo {
|
||
display: block;
|
||
height: clamp(92px, 22.222vw, var(--auth-logo-height));
|
||
width: auto;
|
||
max-width: min(56vw, 220px);
|
||
margin: 0 auto;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.facebookButton {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--spacing-md);
|
||
width: 100%;
|
||
min-height: var(--auth-field-height);
|
||
padding: 0 var(--spacing-lg);
|
||
border: none;
|
||
border-radius: var(--radius-full, 999px);
|
||
background: var(--color-auth-surface);
|
||
color: var(--color-auth-text-primary);
|
||
font-size: var(--responsive-body, var(--font-size-md));
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
margin-top: var(--spacing-md);
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
|
||
transition: filter 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
|
||
}
|
||
|
||
.facebookButton:hover:not(:disabled) {
|
||
filter: brightness(0.97);
|
||
}
|
||
|
||
.facebookButton:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.facebookButton:not(:disabled):active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.facebookIcon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.facebookLabel {
|
||
flex: 0 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.spinner {
|
||
display: inline-block;
|
||
width: var(--responsive-spinner-size, 18px);
|
||
height: var(--responsive-spinner-size, 18px);
|
||
border-width: 2px;
|
||
border-style: solid;
|
||
border-color: var(--color-facebook-blue) transparent transparent transparent;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.linkButton {
|
||
align-self: center;
|
||
background: none;
|
||
border: none;
|
||
padding: var(--spacing-md) 0;
|
||
font-size: var(--responsive-body, var(--font-size-md));
|
||
color: var(--color-auth-text-primary);
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
cursor: pointer;
|
||
transition: opacity 0.15s ease;
|
||
}
|
||
|
||
.linkButton:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|