补充主题静态资源与归档模板
This commit is contained in:
@@ -0,0 +1,354 @@
|
||||
/**
|
||||
* AKSRT Auth Pages — 认证页面样式
|
||||
*
|
||||
* 类名对齐实际模板：auth-shell, auth-card, auth-form, form-field, input-wrap
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
/* 认证页面容器 */
|
||||
.auth-shell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: calc(100vh - 200px);
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
/* 认证卡片 */
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
background: var(--surface-1);
|
||||
border-radius: var(--radius);
|
||||
padding: 32px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.auth-card__logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.auth-card__title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.auth-card__subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--color-ink-3);
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
/* 表单 */
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 表单字段 */
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
/* 输入框包装 */
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-wrap input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 0 14px 0 40px;
|
||||
font-size: 14px;
|
||||
color: var(--color-ink);
|
||||
background: var(--surface-page);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.input-wrap input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 2px 3px rgba(253, 83, 161, 0.4);
|
||||
}
|
||||
|
||||
.input-wrap input::placeholder {
|
||||
color: var(--color-ink-4);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-ink-4);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 密码切换按钮 */
|
||||
.toggle-pwd {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-ink-4);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.toggle-pwd:hover {
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
/* 密码字段输入框右侧留空 */
|
||||
.form-field--pwd .input-wrap input {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* 记住我 + 忘记密码 */
|
||||
.form-row-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.form-row-between a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.form-row-between a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 错误提示 */
|
||||
.alert {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.alert svg {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.alert--error {
|
||||
background: #fff2f0;
|
||||
border: 1px solid #ffccc7;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.alert--error a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 底部链接 */
|
||||
.auth-footer-link {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.auth-footer-link a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auth-footer-link a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* OAuth 社交登录区域 */
|
||||
.aksrt-oauth-section {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.aksrt-oauth-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-4);
|
||||
}
|
||||
|
||||
.aksrt-oauth-divider::before,
|
||||
.aksrt-oauth-divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--color-line);
|
||||
}
|
||||
|
||||
.aksrt-oauth-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.aksrt-oauth-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--color-line);
|
||||
background: var(--surface-1);
|
||||
color: var(--color-ink);
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.aksrt-oauth-btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* 成功提示 */
|
||||
.alert--success {
|
||||
background: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
/* 认证 Tab 切换 */
|
||||
.aksrt-auth-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid var(--color-line);
|
||||
}
|
||||
|
||||
.aksrt-auth-tab {
|
||||
flex: 1;
|
||||
padding: 10px 0;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: var(--color-ink-3);
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.aksrt-auth-tab.is-active {
|
||||
color: var(--color-primary);
|
||||
border-bottom-color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.aksrt-auth-tab:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* 表单提示文本 */
|
||||
.form-field-hint {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
/* 必填/选填标记 */
|
||||
.aksrt-required-mark {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.aksrt-optional-hint {
|
||||
color: var(--color-ink-3);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* 同意条款复选框 */
|
||||
.aksrt-terms-check {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.aksrt-terms-check input {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 提交按钮全宽 */
|
||||
.auth-form .btn-primary.btn-lg,
|
||||
.auth-form input[type="submit"].btn-primary.btn-lg {
|
||||
width: 100%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 验证码输入行 */
|
||||
.aksrt-code-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-code-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.aksrt-sms-trigger {
|
||||
white-space: nowrap;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 767px) {
|
||||
.auth-shell {
|
||||
padding: 24px 16px;
|
||||
min-height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.aksrt-auth-tab {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user