/* 第三方扫码登录:渠道切换、二维码占位/失效遮罩及客户端入口。 */ /* 导入方:app/components/AuthProviders.vue、app/pages/login.vue。 */ .auth-providers[data-v-9d0ee2f9] { border-left: 1px solid var(--p-content-border-color); background: var(--p-content-hover-background); min-width: 0; font-size: inherit; flex-direction: column; padding: 32px; display: flex; } .provider-panel[data-v-9d0ee2f9] { text-align: center; flex-direction: column; flex: 1; min-height: 330px; padding: 16px 0 28px; } .provider-panel[data-v-9d0ee2f9], .provider-qr-placeholder[data-v-9d0ee2f9] { justify-content: center; align-items: center; display: flex; } .provider-qr-placeholder[data-v-9d0ee2f9] { border: 2px dashed var(--p-content-border-color); background: var(--p-content-background); width: 176px; height: 176px; color: var(--p-text-muted-color); border-radius: var(--radius-lg); margin-bottom: 20px; } .provider-qr-placeholder .pi[data-v-9d0ee2f9] { font-size: 48px; } .provider-heading[data-v-9d0ee2f9] { color: var(--p-text-color); margin: 0; font-size: 1em; font-weight: 600; } .provider-description[data-v-9d0ee2f9] { color: var(--p-text-muted-color); margin: 8px 0 0; font-size: 1em; line-height: 1.6; } .provider-tabs[data-v-9d0ee2f9] { background: color-mix( in srgb, var(--p-text-color) 6%, var(--p-content-background) ); border-radius: var(--radius-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; display: grid; position: relative; } .provider-tab-indicator[data-v-9d0ee2f9] { background: var(--p-content-background); pointer-events: none; border-radius: var(--radius-md); width: calc(50% - 4px); transition: transform 0.2s; position: absolute; top: 4px; bottom: 4px; left: 4px; box-shadow: 0 1px 3px #00000014; } .provider-tabs button[data-v-9d0ee2f9] { min-height: 44px; color: var(--p-text-muted-color); font: inherit; cursor: pointer; background: 0 0; border: 0; border-radius: var(--radius-md); padding: 8px; font-weight: 500; position: relative; } .provider-tabs button.active[data-v-9d0ee2f9] { color: var(--p-text-color); } .provider-tabs button[data-v-9d0ee2f9]:disabled { opacity: 0.45; cursor: not-allowed; } /* 键盘操作的可见焦点:不要只保留鼠标 hover 效果而移除此反馈。 */ .provider-tabs button[data-v-9d0ee2f9]:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: -2px; } .provider-config-error[data-v-9d0ee2f9] { margin-top: 16px; } .login-qr[data-v-9d0ee2f9] .p-button { min-height: 44px; font-size: 1em; } /* 视口条件 (width<=768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=768px) { .auth-providers[data-v-9d0ee2f9] { border-left: 0; border-top: 1px solid var(--p-content-border-color); padding: 24px; } .provider-panel[data-v-9d0ee2f9] { min-height: 300px; padding-top: 0; } .provider-qr-placeholder[data-v-9d0ee2f9] { width: 152px; height: 152px; } } /* 尊重减少动态效果偏好:保留状态信息,降低或取消非必要动画。 */ @media (prefers-reduced-motion: reduce) { .provider-tab-indicator[data-v-9d0ee2f9] { transition: none; } } .login-qr[data-v-9d0ee2f9] { grid-template-rows: 200px 64px 44px; justify-items: center; gap: 8px; width: 100%; padding: 12px 0; font-size: 1em; display: grid; } .qr-stage[data-v-9d0ee2f9] { justify-content: center; height: 200px; display: flex; } .qr-stage[data-v-9d0ee2f9], .qr-status[data-v-9d0ee2f9] { width: 100%; min-height: 0; } .qr-status[data-v-9d0ee2f9] { align-items: center; display: grid; overflow: auto; } .qr-status[data-v-9d0ee2f9] .p-message { margin: 0; } .qr-actions[data-v-9d0ee2f9] { height: 44px; } .qr-request[data-v-9d0ee2f9] { flex-direction: column; gap: 12px; width: 100%; height: 100%; display: flex; } .qr-request[data-v-9d0ee2f9] .p-button-icon { font-size: 32px; } .qr-box[data-v-9d0ee2f9] { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: var(--radius-lg); justify-content: center; align-items: center; width: 200px; height: 200px; display: flex; overflow: hidden; } .qr-box-idle[data-v-9d0ee2f9] { background: 0 0; border-style: dashed; } .qr-img[data-v-9d0ee2f9] { -o-object-fit: contain; object-fit: contain; width: 100%; height: 100%; } .qr-img-dim[data-v-9d0ee2f9] { opacity: 0.35; } .qr-tip[data-v-9d0ee2f9] { color: var(--p-text-color); margin: 0; } .qr-clients[data-v-9d0ee2f9] { flex-direction: column; gap: 12px; width: 100%; max-height: 200px; overflow-y: auto; } .qr-client[data-v-9d0ee2f9], .qr-clients[data-v-9d0ee2f9] { align-items: center; display: flex; } .qr-client[data-v-9d0ee2f9] { cursor: pointer; gap: 8px; } .qr-client.disabled[data-v-9d0ee2f9] { opacity: 0.5; cursor: not-allowed; } .qr-client-btn[data-v-9d0ee2f9] { margin-top: 4px; }