rain
1752 lines
36 KiB
CSS
1752 lines
36 KiB
CSS
/* ============================================================
|
|
auth.css - Authentication Pages (login, register, reset password)
|
|
============================================================ */
|
|
|
|
/* === CSS Variables (local aliases for convenience) ========= */
|
|
.auth-container,
|
|
.auth-card,
|
|
.auth-header,
|
|
.auth-body {
|
|
--primary: #102b6a;
|
|
--primary-light: #1a3f8f;
|
|
--gold: #fdb933;
|
|
--orange: #f15a22;
|
|
--red: #e74c3c;
|
|
--green: #27ae60;
|
|
--bg-light: #f4f6fb;
|
|
--text-dark: #1a1a2e;
|
|
--text-muted: #6b7280;
|
|
--border-light: #e5e7eb;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* === Page Background ======================================= */
|
|
body:has(.auth-container) {
|
|
background:
|
|
linear-gradient(120deg, rgba(246, 249, 255, 0.68), rgba(250, 252, 255, 0.58) 44%, rgba(255, 255, 255, 0.76)),
|
|
url("../img/auth-login-bg.png") center / cover no-repeat fixed;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* === Floating Background Decorations ======================= */
|
|
.auth-decoration {
|
|
position: fixed;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.auth-decoration-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, rgba(16, 43, 106, 0.06) 0%, rgba(16, 43, 106, 0.02) 60%, transparent 70%);
|
|
top: -120px;
|
|
right: -100px;
|
|
animation: float-decoration-1 20s ease-in-out infinite;
|
|
}
|
|
|
|
.auth-decoration-2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: radial-gradient(circle, rgba(253, 185, 51, 0.08) 0%, rgba(253, 185, 51, 0.02) 60%, transparent 70%);
|
|
bottom: -80px;
|
|
left: -80px;
|
|
animation: float-decoration-2 25s ease-in-out infinite;
|
|
}
|
|
|
|
.auth-decoration-3 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: radial-gradient(circle, rgba(241, 90, 34, 0.05) 0%, rgba(241, 90, 34, 0.01) 60%, transparent 70%);
|
|
top: 50%;
|
|
left: 60%;
|
|
animation: float-decoration-3 18s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float-decoration-1 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(-20px, 30px) scale(1.05); }
|
|
66% { transform: translate(15px, -20px) scale(0.95); }
|
|
}
|
|
|
|
@keyframes float-decoration-2 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(25px, -15px) scale(1.03); }
|
|
66% { transform: translate(-10px, 20px) scale(0.97); }
|
|
}
|
|
|
|
@keyframes float-decoration-3 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
50% { transform: translate(-30px, 25px) scale(1.08); }
|
|
}
|
|
|
|
/* === Auth Container (centered flex) ======================== */
|
|
.auth-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
padding: 24px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* === Auth Card ============================================= */
|
|
.auth-card {
|
|
width: 420px;
|
|
max-width: 100%;
|
|
background: #ffffff;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 60px rgba(16, 43, 106, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
|
|
overflow: hidden;
|
|
position: relative;
|
|
animation: card-appear 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes card-appear {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.98);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
/* Internal card decorations (inside the header) */
|
|
.auth-card .auth-decoration-1,
|
|
.auth-card .auth-decoration-2,
|
|
.auth-card .auth-decoration-3 {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.auth-card .auth-decoration-1 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: rgba(253, 185, 51, 0.08);
|
|
top: -80px;
|
|
right: -60px;
|
|
}
|
|
|
|
.auth-card .auth-decoration-2 {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: rgba(241, 90, 34, 0.06);
|
|
bottom: 50px;
|
|
left: -40px;
|
|
}
|
|
|
|
.auth-card .auth-decoration-3 {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
bottom: -20px;
|
|
right: 30px;
|
|
}
|
|
|
|
/* === Auth Header =========================================== */
|
|
.auth-header {
|
|
background: linear-gradient(135deg, var(--primary, #102b6a) 0%, var(--primary-light, #1a3f8f) 60%, #5b2c8e 100%);
|
|
padding: 36px 40px 32px;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.auth-header::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80px;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #fdb933, #f15a22);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* === Auth Logo ============================================= */
|
|
.auth-logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 220px;
|
|
max-width: 76%;
|
|
margin: 0 auto 10px;
|
|
position: relative;
|
|
z-index: 1;
|
|
text-decoration: none;
|
|
transition: transform 0.22s ease, filter 0.22s ease;
|
|
}
|
|
|
|
.auth-logo:hover {
|
|
transform: translateY(-2px);
|
|
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
|
|
}
|
|
|
|
.auth-logo img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* === Auth Subtitle ========================================= */
|
|
.auth-subtitle {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* === Auth Body ============================================= */
|
|
.auth-body {
|
|
padding: 36px 36px 28px;
|
|
}
|
|
|
|
/* === Form Labels =========================================== */
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-dark, #1a1a2e);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* === Form Group ============================================ */
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
/* === Form Input ============================================ */
|
|
.form-input {
|
|
width: 100%;
|
|
height: 46px;
|
|
padding: 0 16px;
|
|
border: 2px solid var(--border-light, #e5e7eb);
|
|
border-radius: var(--radius-lg, 12px);
|
|
font-size: 14px;
|
|
color: var(--text-dark, #1a1a2e);
|
|
background: var(--bg-light, #f4f6fb);
|
|
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
|
|
outline: none;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: var(--text-muted, #6b7280);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: var(--primary, #102b6a);
|
|
background: #ffffff;
|
|
box-shadow: 0 0 0 4px rgba(16, 43, 106, 0.1);
|
|
}
|
|
|
|
.form-input:hover:not(:focus) {
|
|
border-color: #d1d5db;
|
|
}
|
|
|
|
/* Disabled input state */
|
|
.form-input:disabled {
|
|
background: #f9fafb;
|
|
color: var(--text-muted, #6b7280);
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* === Error State =========================================== */
|
|
.form-group.error .form-input {
|
|
border-color: var(--red, #e74c3c);
|
|
background: #fff5f5;
|
|
}
|
|
|
|
.form-group.error .form-input:focus {
|
|
box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1);
|
|
}
|
|
|
|
.error-message {
|
|
display: none;
|
|
font-size: 12px;
|
|
color: var(--red, #e74c3c);
|
|
margin-top: 6px;
|
|
padding-left: 4px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.form-group.error .error-message {
|
|
display: block;
|
|
animation: error-appear 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes error-appear {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* === Captcha Row =========================================== */
|
|
.captcha-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.captcha-row .form-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.captcha-img-box {
|
|
width: 120px;
|
|
height: 46px;
|
|
border: 2px solid var(--border-light, #e5e7eb);
|
|
border-radius: var(--radius-lg, 12px);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--bg-light, #f4f6fb);
|
|
flex-shrink: 0;
|
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.captcha-img-box:hover {
|
|
border-color: var(--primary, #102b6a);
|
|
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.08);
|
|
}
|
|
|
|
.captcha-img-box img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.form-group.is-slide-mode .captcha-row {
|
|
display: block;
|
|
}
|
|
|
|
.form-group.is-slide-mode .captcha-img-box {
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
overflow: visible;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.form-group.is-slide-mode .captcha-img-box:hover {
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Captcha refresh link */
|
|
.captcha-refresh-link {
|
|
font-size: 12px;
|
|
color: var(--primary, #102b6a);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
text-align: right;
|
|
margin-top: 6px;
|
|
transition: color 0.2s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.captcha-refresh-link:hover {
|
|
color: var(--orange, #f15a22);
|
|
}
|
|
|
|
/* === SMS Verification ====================================== */
|
|
.auth-sms-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.auth-sms-row .form-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.auth-sms-button {
|
|
width: 112px;
|
|
height: 46px;
|
|
border: none;
|
|
border-radius: var(--radius-lg, 12px);
|
|
background: linear-gradient(135deg, var(--primary, #102b6a), var(--primary-light, #1a3f8f));
|
|
color: #ffffff;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.auth-sms-button:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 8px 18px rgba(16, 43, 106, 0.18);
|
|
}
|
|
|
|
.auth-sms-button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.62;
|
|
}
|
|
|
|
/* === Slide Verification ==================================== */
|
|
.slide-verify-card {
|
|
width: 100%;
|
|
min-height: 58px;
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(16, 43, 106, 0.14);
|
|
border-radius: var(--radius-lg, 12px);
|
|
background:
|
|
linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(244, 247, 253, 0.92)),
|
|
linear-gradient(135deg, rgba(253, 185, 51, 0.16), rgba(26, 63, 143, 0.12));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.slide-verify-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(100deg, transparent 0%, rgba(253, 185, 51, 0.18) 45%, transparent 70%);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.45s ease;
|
|
}
|
|
|
|
.slide-verify-card:hover {
|
|
border-color: rgba(253, 185, 51, 0.5);
|
|
box-shadow: 0 10px 24px rgba(16, 43, 106, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.slide-verify-card:hover::after {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.slide-verify-card.is-success {
|
|
border-color: rgba(39, 174, 96, 0.38);
|
|
background:
|
|
linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 253, 246, 0.92)),
|
|
linear-gradient(135deg, rgba(39, 174, 96, 0.16), rgba(16, 43, 106, 0.06));
|
|
cursor: default;
|
|
}
|
|
|
|
.slide-verify-mark {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #fdb933, #f15a22);
|
|
color: #ffffff;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
flex: 0 0 38px;
|
|
box-shadow: 0 8px 16px rgba(253, 185, 51, 0.26);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.slide-verify-card.is-success .slide-verify-mark {
|
|
background: linear-gradient(135deg, #27ae60, #1a8f50);
|
|
box-shadow: 0 8px 16px rgba(39, 174, 96, 0.22);
|
|
}
|
|
|
|
.slide-verify-main {
|
|
min-width: 0;
|
|
flex: 1;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.slide-verify-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--text-dark, #1a1a2e);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.slide-verify-desc {
|
|
margin-top: 2px;
|
|
font-size: 12px;
|
|
color: var(--text-muted, #6b7280);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.slide-verify-action {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
white-space: nowrap;
|
|
padding: 5px 10px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(135deg, var(--primary, #102b6a), var(--primary-light, #1a3f8f));
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.slide-verify-card.is-success .slide-verify-action {
|
|
background: linear-gradient(135deg, #27ae60, #1a8f50);
|
|
}
|
|
|
|
/* === Captcha Dialog ======================================== */
|
|
.captcha-dialog {
|
|
padding: 24px;
|
|
color: var(--text-dark, #1a1a2e);
|
|
}
|
|
|
|
.captcha-dialog-title {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.captcha-dialog-desc {
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--text-muted, #6b7280);
|
|
}
|
|
|
|
.captcha-dialog-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.captcha-dialog-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 44px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--border-light, #e5e7eb);
|
|
border-radius: var(--radius-md, 10px);
|
|
font-size: 14px;
|
|
outline: none;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.captcha-dialog-input:focus {
|
|
border-color: var(--primary, #102b6a);
|
|
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.08);
|
|
}
|
|
|
|
.captcha-dialog-img-box {
|
|
width: 120px;
|
|
height: 44px;
|
|
border: 1px solid var(--border-light, #e5e7eb);
|
|
border-radius: var(--radius-md, 10px);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
background: var(--bg-light, #f4f6fb);
|
|
flex: 0 0 120px;
|
|
}
|
|
|
|
.captcha-dialog-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.captcha-dialog-tip {
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: var(--text-muted, #6b7280);
|
|
}
|
|
|
|
.captcha-dialog-tip span {
|
|
color: var(--primary, #102b6a);
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.captcha-dialog-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.captcha-dialog-btn {
|
|
min-width: 84px;
|
|
height: 38px;
|
|
border: 1px solid var(--border-light, #e5e7eb);
|
|
border-radius: var(--radius-md, 10px);
|
|
background: #ffffff;
|
|
color: var(--text-dark, #1a1a2e);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.captcha-dialog-btn.primary {
|
|
border-color: transparent;
|
|
background: linear-gradient(135deg, var(--primary, #102b6a), var(--primary-light, #1a3f8f));
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* === Submit Button ========================================= */
|
|
.auth-submit-btn {
|
|
width: 100%;
|
|
height: 48px;
|
|
border: none;
|
|
border-radius: var(--radius-lg, 12px);
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: 4px;
|
|
background: linear-gradient(135deg, var(--primary, #102b6a), var(--primary-light, #1a3f8f));
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-family: inherit;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.auth-submit-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.auth-submit-btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.auth-submit-btn:hover {
|
|
box-shadow: 0 8px 24px rgba(16, 43, 106, 0.4);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.auth-submit-btn:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 4px 12px rgba(16, 43, 106, 0.3);
|
|
}
|
|
|
|
/* Disabled submit button */
|
|
.auth-submit-btn:disabled {
|
|
background: linear-gradient(135deg, #93a3be, #a8b5cc);
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.auth-submit-btn:disabled::before {
|
|
display: none;
|
|
}
|
|
|
|
.auth-submit-btn:disabled:hover {
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* === Agreement Checkbox ==================================== */
|
|
.auth-agreement {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--text-muted, #6b7280);
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
line-height: 1.5;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.auth-agreement input[type="checkbox"] {
|
|
accent-color: var(--primary, #102b6a);
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.auth-agreement a {
|
|
color: var(--primary, #102b6a);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.auth-agreement a:hover {
|
|
color: var(--orange, #f15a22);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* === Auth Links ============================================ */
|
|
.auth-links {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 13px;
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border-light, #e5e7eb);
|
|
}
|
|
|
|
.auth-links a {
|
|
color: var(--primary, #102b6a);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.auth-links a:hover {
|
|
color: var(--orange, #f15a22);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.auth-wechat-login {
|
|
margin-top: 18px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.auth-wechat-login a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
min-height: 48px;
|
|
padding: 0 24px;
|
|
border: 1px solid rgba(7, 193, 96, 0.24);
|
|
border-radius: 24px;
|
|
color: #07c160;
|
|
background: rgba(7, 193, 96, 0.06);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.auth-wechat-login a:hover {
|
|
background: rgba(7, 193, 96, 0.12);
|
|
border-color: rgba(7, 193, 96, 0.42);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.auth-wechat-icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* ============================================================
|
|
Register Page - Step Indicators
|
|
============================================================ */
|
|
.reg-step-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 28px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.reg-step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-muted, #6b7280);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.reg-step.active {
|
|
color: var(--primary, #102b6a);
|
|
}
|
|
|
|
.reg-step.completed {
|
|
color: var(--green, #27ae60);
|
|
}
|
|
|
|
.step-dot {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
background: var(--bg-light, #f4f6fb);
|
|
color: var(--text-muted, #6b7280);
|
|
border: 2px solid var(--border-light, #e5e7eb);
|
|
transition: all 0.3s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.reg-step.active .step-dot {
|
|
background: var(--primary, #102b6a);
|
|
color: #ffffff;
|
|
border-color: var(--primary, #102b6a);
|
|
box-shadow: 0 4px 12px rgba(16, 43, 106, 0.3);
|
|
}
|
|
|
|
.reg-step.completed .step-dot {
|
|
background: var(--green, #27ae60);
|
|
color: #ffffff;
|
|
border-color: var(--green, #27ae60);
|
|
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
|
|
}
|
|
|
|
.reg-step-line {
|
|
width: 40px;
|
|
height: 2px;
|
|
background: var(--border-light, #e5e7eb);
|
|
margin: 0 8px;
|
|
border-radius: 1px;
|
|
transition: background 0.3s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.reg-step-line.active {
|
|
background: var(--primary, #102b6a);
|
|
}
|
|
|
|
.reg-step-line.completed {
|
|
background: var(--green, #27ae60);
|
|
}
|
|
|
|
/* ============================================================
|
|
Register Page - Invite Code Row
|
|
============================================================ */
|
|
.invite-code-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.invite-code-row .form-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.invite-code-row .invite-verify-btn {
|
|
height: 46px;
|
|
padding: 0 18px;
|
|
border: 2px solid var(--primary, #102b6a);
|
|
border-radius: var(--radius-lg, 12px);
|
|
background: transparent;
|
|
color: var(--primary, #102b6a);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
transition: all 0.3s ease;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.invite-code-row .invite-verify-btn:hover {
|
|
background: var(--primary, #102b6a);
|
|
color: #ffffff;
|
|
box-shadow: 0 4px 12px rgba(16, 43, 106, 0.3);
|
|
}
|
|
|
|
/* ============================================================
|
|
Reset Password Page - Step Indicators
|
|
============================================================ */
|
|
.repwd-step-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 28px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.repwd-step-bar .reg-step {
|
|
/* Reuse reg-step styles */
|
|
}
|
|
|
|
.repwd-step-bar .reg-step-line {
|
|
/* Reuse reg-step-line styles */
|
|
}
|
|
|
|
/* ============================================================
|
|
Reset Password Page - Password Strength Meter
|
|
============================================================ */
|
|
.pwd-strength {
|
|
margin-top: 8px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pwd-strength .strength-bar {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pwd-strength .strength-bar .bar-segment {
|
|
flex: 1;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: var(--border-light, #e5e7eb);
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
/* Strength levels */
|
|
.pwd-strength.level-weak .bar-segment:nth-child(1) {
|
|
background: var(--red, #e74c3c);
|
|
}
|
|
|
|
.pwd-strength.level-medium .bar-segment:nth-child(1),
|
|
.pwd-strength.level-medium .bar-segment:nth-child(2) {
|
|
background: var(--orange, #f15a22);
|
|
}
|
|
|
|
.pwd-strength.level-strong .bar-segment:nth-child(1),
|
|
.pwd-strength.level-strong .bar-segment:nth-child(2),
|
|
.pwd-strength.level-strong .bar-segment:nth-child(3) {
|
|
background: var(--green, #27ae60);
|
|
}
|
|
|
|
.pwd-strength .strength-text {
|
|
font-size: 11px;
|
|
color: var(--text-muted, #6b7280);
|
|
text-align: right;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.pwd-strength.level-weak .strength-text {
|
|
color: var(--red, #e74c3c);
|
|
}
|
|
|
|
.pwd-strength.level-medium .strength-text {
|
|
color: var(--orange, #f15a22);
|
|
}
|
|
|
|
.pwd-strength.level-strong .strength-text {
|
|
color: var(--green, #27ae60);
|
|
}
|
|
|
|
/* ============================================================
|
|
Loading Overlay
|
|
============================================================ */
|
|
.loading-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
z-index: 9999;
|
|
justify-content: center;
|
|
align-items: center;
|
|
backdrop-filter: blur(4px);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.loading-overlay.show {
|
|
display: flex;
|
|
}
|
|
|
|
/* Card-scoped loading overlay (if placed inside .auth-card) */
|
|
.auth-card > .loading-overlay {
|
|
position: absolute;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid rgba(16, 43, 106, 0.15);
|
|
border-top-color: var(--primary, #102b6a);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Spinner with pulse effect */
|
|
.loading-spinner::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--primary, #102b6a);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation: pulse 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
|
|
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
|
|
}
|
|
|
|
/* ============================================================
|
|
Page-specific Tweaks
|
|
============================================================ */
|
|
|
|
/* Register page - slightly tighter spacing for more fields */
|
|
.page-reg .auth-body,
|
|
.auth-body.reg-body {
|
|
padding: 32px 36px 24px;
|
|
}
|
|
|
|
.page-reg .form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.page-reg .form-input {
|
|
height: 44px;
|
|
}
|
|
|
|
.page-reg .auth-links {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Reset password page */
|
|
.page-repwd .auth-body,
|
|
.auth-body.repwd-body {
|
|
padding: 32px 36px 24px;
|
|
}
|
|
|
|
.page-repwd .form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* ============================================================
|
|
Responsive Styles
|
|
============================================================ */
|
|
|
|
/* Tablet and small desktop */
|
|
@media (max-width: 768px) {
|
|
.auth-decoration-1 {
|
|
width: 280px;
|
|
height: 280px;
|
|
}
|
|
|
|
.auth-decoration-2 {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.auth-decoration-3 {
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
|
|
.auth-container {
|
|
padding: 16px;
|
|
}
|
|
|
|
.auth-card {
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.auth-header {
|
|
padding: 28px 28px 24px;
|
|
}
|
|
|
|
.auth-logo {
|
|
width: 198px;
|
|
}
|
|
|
|
.auth-subtitle {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.auth-body {
|
|
padding: 28px 24px 24px;
|
|
}
|
|
|
|
.form-input {
|
|
height: 44px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.captcha-img-box {
|
|
height: 44px;
|
|
width: 110px;
|
|
}
|
|
|
|
.auth-submit-btn {
|
|
height: 46px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Step indicators */
|
|
.reg-step-bar,
|
|
.repwd-step-bar {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.step-dot {
|
|
width: 26px;
|
|
height: 26px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.reg-step-line {
|
|
width: 30px;
|
|
margin: 0 6px;
|
|
}
|
|
}
|
|
|
|
/* Mobile phones */
|
|
@media (max-width: 480px) {
|
|
.auth-decoration-1 {
|
|
width: 200px;
|
|
height: 200px;
|
|
top: -80px;
|
|
right: -60px;
|
|
}
|
|
|
|
.auth-decoration-2 {
|
|
width: 150px;
|
|
height: 150px;
|
|
bottom: -60px;
|
|
left: -50px;
|
|
}
|
|
|
|
.auth-decoration-3 {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.auth-container {
|
|
padding: 12px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.auth-card {
|
|
border-radius: 14px;
|
|
box-shadow: 0 12px 40px rgba(16, 43, 106, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.auth-header {
|
|
padding: 24px 20px 20px;
|
|
}
|
|
|
|
.auth-logo {
|
|
width: 176px;
|
|
}
|
|
|
|
.auth-subtitle {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.auth-body {
|
|
padding: 24px 20px 20px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: 13px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.form-input {
|
|
height: 42px;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
border-radius: var(--radius-md, 8px);
|
|
}
|
|
|
|
.form-input:focus {
|
|
box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.08);
|
|
}
|
|
|
|
/* Captcha on mobile */
|
|
.captcha-row {
|
|
gap: 8px;
|
|
}
|
|
|
|
.captcha-img-box {
|
|
width: 100px;
|
|
height: 42px;
|
|
border-radius: var(--radius-md, 8px);
|
|
}
|
|
|
|
/* Submit button on mobile */
|
|
.auth-submit-btn {
|
|
height: 44px;
|
|
font-size: 15px;
|
|
letter-spacing: 2px;
|
|
border-radius: var(--radius-md, 8px);
|
|
}
|
|
|
|
.auth-submit-btn:hover {
|
|
transform: none;
|
|
box-shadow: 0 4px 16px rgba(16, 43, 106, 0.3);
|
|
}
|
|
|
|
/* Agreement and links on mobile */
|
|
.auth-agreement {
|
|
font-size: 11px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.auth-links {
|
|
font-size: 12px;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
/* Step indicators on mobile */
|
|
.reg-step-bar,
|
|
.repwd-step-bar {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.reg-step {
|
|
font-size: 11px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.step-dot {
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.reg-step-line {
|
|
width: 20px;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
/* Invite code row on mobile */
|
|
.invite-code-row .invite-verify-btn {
|
|
height: 42px;
|
|
padding: 0 14px;
|
|
font-size: 12px;
|
|
border-radius: var(--radius-md, 8px);
|
|
}
|
|
|
|
/* Password strength on mobile */
|
|
.pwd-strength .strength-bar .bar-segment {
|
|
height: 3px;
|
|
}
|
|
|
|
.pwd-strength .strength-text {
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Loading spinner on mobile */
|
|
.loading-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
/* Very small screens */
|
|
@media (max-width: 360px) {
|
|
.auth-container {
|
|
padding: 8px;
|
|
}
|
|
|
|
.auth-header {
|
|
padding: 20px 16px 18px;
|
|
}
|
|
|
|
.auth-body {
|
|
padding: 20px 16px 16px;
|
|
}
|
|
|
|
.auth-logo {
|
|
width: 160px;
|
|
}
|
|
|
|
.form-input {
|
|
height: 40px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.captcha-img-box {
|
|
width: 90px;
|
|
height: 40px;
|
|
}
|
|
|
|
.auth-submit-btn {
|
|
height: 42px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.captcha-refresh-link {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* Landscape phone adjustments */
|
|
@media (max-height: 500px) and (orientation: landscape) {
|
|
.auth-container {
|
|
min-height: auto;
|
|
padding: 12px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.auth-header {
|
|
padding: 20px 28px 16px;
|
|
}
|
|
|
|
.auth-logo {
|
|
margin-bottom: 2px;
|
|
width: 174px;
|
|
}
|
|
|
|
.auth-subtitle {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.auth-body {
|
|
padding: 20px 28px 16px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.form-input {
|
|
height: 40px;
|
|
}
|
|
|
|
.auth-submit-btn {
|
|
height: 42px;
|
|
}
|
|
|
|
.auth-agreement {
|
|
margin-top: 10px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.auth-links {
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.reg-step-bar,
|
|
.repwd-step-bar {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
/* High-DPI / Retina display adjustments */
|
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
.auth-submit-btn {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.form-input {
|
|
border-width: 1.5px;
|
|
}
|
|
|
|
.captcha-img-box {
|
|
border-width: 1.5px;
|
|
}
|
|
}
|
|
|
|
/* Print: hide decorative elements */
|
|
@media print {
|
|
.auth-decoration,
|
|
.loading-overlay {
|
|
display: none !important;
|
|
}
|
|
|
|
.auth-card {
|
|
box-shadow: none;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.auth-submit-btn {
|
|
background: var(--primary, #102b6a);
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
Accessibility: Reduced Motion
|
|
============================================================ */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.auth-decoration-1,
|
|
.auth-decoration-2,
|
|
.auth-decoration-3 {
|
|
animation: none;
|
|
}
|
|
|
|
.auth-card {
|
|
animation: none;
|
|
}
|
|
|
|
.auth-submit-btn::before {
|
|
display: none;
|
|
}
|
|
|
|
.auth-submit-btn:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.loading-spinner {
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.loading-spinner::after {
|
|
animation: none;
|
|
}
|
|
|
|
.error-message {
|
|
animation: none;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
Dark mode support (system preference)
|
|
============================================================ */
|
|
@media (prefers-color-scheme: dark) {
|
|
body:has(.auth-container) {
|
|
background:
|
|
linear-gradient(120deg, rgba(246, 249, 255, 0.68), rgba(250, 252, 255, 0.58) 44%, rgba(255, 255, 255, 0.76)),
|
|
url("../img/auth-login-bg.png") center / cover no-repeat fixed;
|
|
}
|
|
|
|
.auth-card {
|
|
background: #1e293b;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.form-input {
|
|
background: #0f172a;
|
|
border-color: #334155;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: #64748b;
|
|
}
|
|
|
|
.form-input:focus {
|
|
background: #1e293b;
|
|
border-color: var(--primary-light, #1a3f8f);
|
|
box-shadow: 0 0 0 4px rgba(26, 63, 143, 0.3);
|
|
}
|
|
|
|
.form-input:hover:not(:focus) {
|
|
border-color: #475569;
|
|
}
|
|
|
|
.form-group label {
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.form-group.error .form-input {
|
|
background: #1c1012;
|
|
border-color: var(--red, #e74c3c);
|
|
}
|
|
|
|
.auth-agreement {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.auth-links {
|
|
border-top-color: #334155;
|
|
}
|
|
|
|
.auth-links a {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.auth-links a:hover {
|
|
color: #93c5fd;
|
|
}
|
|
|
|
.auth-agreement a {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.captcha-img-box {
|
|
background: #0f172a;
|
|
border-color: #334155;
|
|
}
|
|
|
|
.captcha-refresh-link {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.captcha-refresh-link:hover {
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.loading-overlay {
|
|
background: rgba(15, 23, 42, 0.85);
|
|
}
|
|
|
|
.loading-spinner {
|
|
border-color: rgba(96, 165, 250, 0.2);
|
|
border-top-color: #60a5fa;
|
|
}
|
|
|
|
.loading-spinner::after {
|
|
background: #60a5fa;
|
|
}
|
|
|
|
/* Step indicators in dark mode */
|
|
.step-dot {
|
|
background: #1e293b;
|
|
border-color: #334155;
|
|
color: #64748b;
|
|
}
|
|
|
|
.reg-step.active .step-dot {
|
|
background: var(--primary-light, #1a3f8f);
|
|
border-color: var(--primary-light, #1a3f8f);
|
|
}
|
|
|
|
.reg-step-line {
|
|
background: #334155;
|
|
}
|
|
|
|
/* Password strength dark mode */
|
|
.pwd-strength .strength-bar .bar-segment {
|
|
background: #334155;
|
|
}
|
|
|
|
.pwd-strength .strength-text {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
/* Invite code dark mode */
|
|
.invite-code-row .invite-verify-btn {
|
|
border-color: #60a5fa;
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.invite-code-row .invite-verify-btn:hover {
|
|
background: #60a5fa;
|
|
color: #0f172a;
|
|
}
|
|
}
|
|
|
|
/* === Slide Captcha Dialog Override ========================= */
|
|
.rvplus-slide-mask {
|
|
background: rgba(8, 18, 42, 0.5) !important;
|
|
backdrop-filter: blur(10px) saturate(1.08) !important;
|
|
}
|
|
|
|
.rvplus-slide-modal {
|
|
width: min(436px, calc(100vw - 32px)) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.72) !important;
|
|
border-radius: 18px !important;
|
|
overflow: hidden !important;
|
|
background: rgba(255, 255, 255, 0.96) !important;
|
|
box-shadow: 0 28px 70px rgba(16, 43, 106, 0.24), 0 8px 24px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.rvplus-slide-head {
|
|
padding: 20px 22px 18px !important;
|
|
border-bottom: 0 !important;
|
|
background: linear-gradient(135deg, #102b6a 0%, #1a3f8f 58%, #5b2c8e 100%) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.rvplus-slide-title {
|
|
color: #ffffff !important;
|
|
font-size: 19px !important;
|
|
font-weight: 800 !important;
|
|
}
|
|
|
|
.rvplus-slide-subtitle {
|
|
color: rgba(255, 255, 255, 0.76) !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.rvplus-slide-close {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
border-radius: 50% !important;
|
|
color: #102b6a !important;
|
|
background: rgba(255, 255, 255, 0.9) !important;
|
|
line-height: 32px !important;
|
|
transition: transform 0.2s ease, background-color 0.2s ease !important;
|
|
}
|
|
|
|
.rvplus-slide-close:hover {
|
|
transform: rotate(90deg) scale(1.04) !important;
|
|
background: #fdb933 !important;
|
|
}
|
|
|
|
.rvplus-slide-body {
|
|
padding: 20px 22px 14px !important;
|
|
}
|
|
|
|
.rvplus-slide-canvas {
|
|
height: 176px !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.86) !important;
|
|
border-radius: 18px !important;
|
|
background:
|
|
radial-gradient(circle at 16% 22%, rgba(253, 185, 51, 0.5), transparent 20%),
|
|
radial-gradient(circle at 84% 78%, rgba(26, 127, 151, 0.45), transparent 26%),
|
|
linear-gradient(135deg, rgba(16, 43, 106, 0.92), rgba(26, 63, 143, 0.78) 45%, rgba(253, 185, 51, 0.72)),
|
|
linear-gradient(45deg, rgba(255, 255, 255, 0.13) 25%, transparent 25% 50%, rgba(255, 255, 255, 0.13) 50% 75%, transparent 75%) !important;
|
|
background-size: auto, auto, auto, 28px 28px !important;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 16px 34px rgba(16, 43, 106, 0.14) !important;
|
|
}
|
|
|
|
.rvplus-slide-canvas::before {
|
|
inset: 13px !important;
|
|
border-color: rgba(255, 255, 255, 0.22) !important;
|
|
border-radius: 15px !important;
|
|
}
|
|
|
|
.rvplus-slide-target,
|
|
.rvplus-slide-piece {
|
|
width: 50px !important;
|
|
height: 50px !important;
|
|
border-radius: 14px !important;
|
|
}
|
|
|
|
.rvplus-slide-piece {
|
|
background:
|
|
radial-gradient(circle at 36% 35%, rgba(255, 255, 255, 0.68), transparent 28%),
|
|
linear-gradient(135deg, #fdb933 0%, #29b7a8 48%, #1a3f8f 100%) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.78) !important;
|
|
box-shadow: 0 16px 30px rgba(16, 43, 106, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
|
|
}
|
|
|
|
.rvplus-slide-target {
|
|
border: 2px dashed rgba(255, 255, 255, 0.9) !important;
|
|
background: rgba(255, 255, 255, 0.14) !important;
|
|
box-shadow: inset 0 0 0 999px rgba(16, 43, 106, 0.08), 0 0 0 4px rgba(255, 255, 255, 0.08) !important;
|
|
}
|
|
|
|
.rvplus-slide-track {
|
|
height: 54px !important;
|
|
margin-top: 16px !important;
|
|
border: 1px solid rgba(16, 43, 106, 0.12) !important;
|
|
border-radius: 999px !important;
|
|
background:
|
|
linear-gradient(180deg, #f8fbff, #edf3fb) !important;
|
|
box-shadow: inset 0 1px 4px rgba(16, 43, 106, 0.08), 0 8px 18px rgba(16, 43, 106, 0.08) !important;
|
|
}
|
|
|
|
.rvplus-slide-fill {
|
|
border-radius: 999px !important;
|
|
background: linear-gradient(90deg, rgba(253, 185, 51, 0.95), rgba(26, 127, 151, 0.9), rgba(26, 63, 143, 0.9)) !important;
|
|
}
|
|
|
|
.rvplus-slide-track-text {
|
|
color: #52627d !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0 !important;
|
|
}
|
|
|
|
.rvplus-slide-handle {
|
|
top: 5px !important;
|
|
left: 5px;
|
|
width: 44px !important;
|
|
height: 44px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
border-radius: 50% !important;
|
|
color: transparent !important;
|
|
background: linear-gradient(135deg, #fdb933, #f15a22) !important;
|
|
box-shadow: 0 12px 24px rgba(253, 185, 51, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
|
|
line-height: 1 !important;
|
|
font-size: 0 !important;
|
|
font-weight: 800 !important;
|
|
text-align: center !important;
|
|
padding: 0 !important;
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease !important;
|
|
}
|
|
|
|
.rvplus-slide-handle::before {
|
|
content: '→';
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
font-weight: 800;
|
|
transform: translateY(-0.5px);
|
|
}
|
|
|
|
.rvplus-slide-mask:has(.rvplus-slide-status.is-success) .rvplus-slide-handle::before {
|
|
content: '✓';
|
|
font-size: 19px;
|
|
transform: translateY(-0.5px);
|
|
}
|
|
|
|
.rvplus-slide-handle:hover {
|
|
transform: scale(1.04) !important;
|
|
box-shadow: 0 14px 28px rgba(253, 185, 51, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
|
|
}
|
|
|
|
.rvplus-slide-status {
|
|
margin-top: 12px !important;
|
|
color: #60708c !important;
|
|
}
|
|
|
|
.rvplus-slide-actions {
|
|
padding: 0 22px 22px !important;
|
|
}
|
|
|
|
.rvplus-slide-action {
|
|
height: 38px !important;
|
|
border-radius: 999px !important;
|
|
padding: 0 18px !important;
|
|
font-weight: 700 !important;
|
|
color: #102b6a !important;
|
|
background: #eef3fb !important;
|
|
}
|
|
|
|
.rvplus-slide-action.is-primary {
|
|
color: #ffffff !important;
|
|
background: linear-gradient(135deg, #102b6a, #1a7f97) !important;
|
|
}
|