yumoqing
b0d6b59613
- 注册Tab结构: Text(固定) + VScrollPanel(仅Form) + Button(固定) - 暗色主题输入框背景 #0f172a -> #1e293b，更协调
243 lines
6.3 KiB
CSS
243 lines
6.3 KiB
CSS
/* ===== Modern Login Popup Styling ===== */
|
|
|
|
/* Popup window card */
|
|
.login-window {
|
|
border-radius: 16px !important;
|
|
box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.35) !important;
|
|
overflow: hidden !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Title bar - gradient brand header */
|
|
.login-window .titlebar {
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
|
|
padding: 8px 16px !important;
|
|
border: none !important;
|
|
min-height: 48px !important;
|
|
}
|
|
.login-window .titlebar .text-w,
|
|
.login-window .titlebar .bricks-text {
|
|
color: #ffffff !important;
|
|
font-size: 16px !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* Content area padding */
|
|
.login-window .flexbox {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Tab panel modern styling */
|
|
.login-window .tabpanel {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
}
|
|
.login-window .tabpanel-tabs {
|
|
display: flex !important;
|
|
border-bottom: 2px solid #e2e8f0 !important;
|
|
background: #f8fafc !important;
|
|
padding: 0 !important;
|
|
gap: 0 !important;
|
|
}
|
|
.login-window .tabpanel-tab {
|
|
padding: 14px 24px !important;
|
|
cursor: pointer !important;
|
|
border-bottom: 3px solid transparent !important;
|
|
margin-bottom: -2px !important;
|
|
transition: all 0.2s ease !important;
|
|
color: #64748b !important;
|
|
font-weight: 500 !important;
|
|
font-size: 14px !important;
|
|
background: transparent !important;
|
|
}
|
|
.login-window .tabpanel-tab:hover {
|
|
color: #6366f1 !important;
|
|
background: rgba(99, 102, 241, 0.04) !important;
|
|
}
|
|
.login-window .tabpanel-tab-active,
|
|
.login-window .tabpanel-tab-selected {
|
|
color: #6366f1 !important;
|
|
border-bottom-color: #6366f1 !important;
|
|
background: transparent !important;
|
|
}
|
|
.login-window .tabpanel-content {
|
|
padding: 0 !important;
|
|
background: #ffffff !important;
|
|
overflow: hidden !important;
|
|
flex: 1 !important;
|
|
min-height: 0 !important;
|
|
}
|
|
.login-window .tabpanel-content .scrollpanel {
|
|
height: 100% !important;
|
|
}
|
|
.login-window .tabpanel-content .scrollpanel .vcontainer {
|
|
padding: 20px 24px !important;
|
|
}
|
|
|
|
/* Form styling */
|
|
.login-window .vcontainer {
|
|
gap: 4px !important;
|
|
}
|
|
.login-window .inputbox {
|
|
border-radius: 10px !important;
|
|
border: 1.5px solid #e2e8f0 !important;
|
|
padding: 10px 14px !important;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
|
|
background: #f8fafc !important;
|
|
font-size: 14px !important;
|
|
}
|
|
.login-window .inputbox:focus,
|
|
.login-window .inputbox:focus-within {
|
|
border-color: #6366f1 !important;
|
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
|
|
background: #ffffff !important;
|
|
outline: none !important;
|
|
}
|
|
.login-window input.inputbox {
|
|
height: 42px !important;
|
|
}
|
|
|
|
/* Form labels */
|
|
.login-window .field-label,
|
|
.login-window .bricks-form label {
|
|
font-weight: 500 !important;
|
|
color: #374151 !important;
|
|
font-size: 13px !important;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
|
|
/* Toolbar buttons */
|
|
.login-window .htoolbar {
|
|
padding: 8px 0 !important;
|
|
gap: 8px !important;
|
|
justify-content: center !important;
|
|
}
|
|
.login-window .submit_btn {
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
border-radius: 10px !important;
|
|
padding: 10px 32px !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
cursor: pointer !important;
|
|
transition: all 0.2s ease !important;
|
|
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
|
|
}
|
|
.login-window .submit_btn:hover {
|
|
opacity: 0.92 !important;
|
|
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
|
|
transform: translateY(-1px) !important;
|
|
}
|
|
.login-window .reset_btn,
|
|
.login-window .clear_btn {
|
|
border-radius: 10px !important;
|
|
border: 1.5px solid #e2e8f0 !important;
|
|
background: #ffffff !important;
|
|
color: #64748b !important;
|
|
padding: 10px 20px !important;
|
|
font-weight: 500 !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
.login-window .reset_btn:hover,
|
|
.login-window .clear_btn:hover {
|
|
border-color: #cbd5e1 !important;
|
|
background: #f8fafc !important;
|
|
}
|
|
|
|
/* SMS send button */
|
|
.sms-send-btn {
|
|
border-radius: 10px !important;
|
|
border: 1.5px solid #6366f1 !important;
|
|
background: rgba(99, 102, 241, 0.06) !important;
|
|
color: #6366f1 !important;
|
|
padding: 8px 20px !important;
|
|
font-weight: 600 !important;
|
|
font-size: 13px !important;
|
|
cursor: pointer !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
.sms-send-btn:hover {
|
|
background: rgba(99, 102, 241, 0.12) !important;
|
|
}
|
|
.sms-send-btn:disabled {
|
|
opacity: 0.5 !important;
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
/* Description text */
|
|
.login-window .bricks-text {
|
|
color: #64748b;
|
|
}
|
|
|
|
/* Form description */
|
|
.login-desc {
|
|
color: #94a3b8 !important;
|
|
font-size: 12px !important;
|
|
text-align: center !important;
|
|
margin-top: 4px !important;
|
|
}
|
|
|
|
/* Section separator */
|
|
.login-separator {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 12px !important;
|
|
margin: 8px 0 !important;
|
|
color: #cbd5e1 !important;
|
|
font-size: 12px !important;
|
|
}
|
|
.login-separator::before,
|
|
.login-separator::after {
|
|
content: '' !important;
|
|
flex: 1 !important;
|
|
height: 1px !important;
|
|
background: #e2e8f0 !important;
|
|
}
|
|
|
|
/* Dark theme support */
|
|
[data-theme="dark"] .login-window {
|
|
background: #1e293b !important;
|
|
}
|
|
[data-theme="dark"] .login-window .tabpanel-content {
|
|
background: #1e293b !important;
|
|
}
|
|
[data-theme="dark"] .login-window .tabpanel-tabs {
|
|
background: #0f172a !important;
|
|
border-bottom-color: #334155 !important;
|
|
}
|
|
[data-theme="dark"] .login-window .tabpanel-tab {
|
|
color: #94a3b8 !important;
|
|
}
|
|
[data-theme="dark"] .login-window .tabpanel-tab-active,
|
|
[data-theme="dark"] .login-window .tabpanel-tab-selected {
|
|
color: #818cf8 !important;
|
|
border-bottom-color: #818cf8 !important;
|
|
}
|
|
[data-theme="dark"] .login-window .inputbox {
|
|
background: #1e293b !important;
|
|
border-color: #475569 !important;
|
|
color: #e2e8f0 !important;
|
|
}
|
|
[data-theme="dark"] .login-window .inputbox:focus,
|
|
[data-theme="dark"] .login-window .inputbox:focus-within {
|
|
border-color: #818cf8 !important;
|
|
box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
|
|
}
|
|
[data-theme="dark"] .login-window .field-label {
|
|
color: #cbd5e1 !important;
|
|
}
|
|
[data-theme="dark"] .login-window .reset_btn,
|
|
[data-theme="dark"] .login-window .clear_btn {
|
|
background: #334155 !important;
|
|
border-color: #475569 !important;
|
|
color: #cbd5e1 !important;
|
|
}
|
|
[data-theme="dark"] .sms-send-btn {
|
|
border-color: #818cf8 !important;
|
|
color: #818cf8 !important;
|
|
background: rgba(129, 140, 248, 0.1) !important;
|
|
}
|