add the neon tube sheen and quiet down the login page
Port the sweeping highlight from the prototype: a 38%-wide white band travels left to right on a 3.4s loop, idle for the first 62% so it reads as an occasional flare rather than a constant shimmer. The tube mixes now clip overflow so the band stays inside the button, and the loading state suppresses it in favour of the existing pulse. Drop the masked grid and scanline from the login page — low-contrast texture behind a credential form makes the text harder to read. Only the IsometricWave remains. Brighten input text to near-white and bump it to 14.5px; Arco's default --color-text-1 sits too dark on the recessed input fill. Avoid -webkit-text-fill-color, which would defeat the password field's masking.
This commit is contained in:
@@ -86,10 +86,8 @@ function fillDefaultCredentials() {
|
||||
|
||||
<template>
|
||||
<div class="login-view">
|
||||
<!-- 装饰位面:只承载 ArkScope 动画,不承载信息/交互 -->
|
||||
<!-- 装饰位面:只承载 ArkScope 波形,不承载信息/交互 -->
|
||||
<div class="login-decor" aria-hidden="true">
|
||||
<div class="login-grid"></div>
|
||||
<div class="login-scanline"></div>
|
||||
<IsometricWave />
|
||||
</div>
|
||||
|
||||
@@ -196,8 +194,9 @@ function fillDefaultCredentials() {
|
||||
}
|
||||
|
||||
// ─── 装饰位面 ────────────────────────────────────────────────────────────
|
||||
// 只承载 ArkScope 动画,一律 pointer-events: none(基线硬规则)。
|
||||
// 只承载 ArkScope 波形,一律 pointer-events: none(基线硬规则)。
|
||||
// 不承载任何信息,也不能出现在点击密集区。
|
||||
// 刻意不加网格 / 扫描线:登录是自托管控制台的入口页,低对比纹理会干扰输入识别。
|
||||
.login-decor {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -206,38 +205,6 @@ function fillDefaultCredentials() {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// 32px 网格 mask,与原型一致
|
||||
.login-grid {
|
||||
position: absolute;
|
||||
inset: -40%;
|
||||
background:
|
||||
repeating-linear-gradient(0deg, rgba(45, 212, 191, 0.055) 0 1px, transparent 1px 32px),
|
||||
repeating-linear-gradient(90deg, rgba(45, 212, 191, 0.055) 0 1px, transparent 1px 32px);
|
||||
mask-image: radial-gradient(62% 52% at 50% 34%, #000, transparent 78%);
|
||||
}
|
||||
|
||||
// 缓慢下移的扫描线
|
||||
@keyframes login-scan {
|
||||
0% { transform: translateY(-64px); }
|
||||
100% { transform: translateY(100vh); }
|
||||
}
|
||||
|
||||
.login-scanline {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
rgba(45, 212, 191, 0.07) 45%,
|
||||
rgba(45, 212, 191, 0.14) 50%,
|
||||
rgba(45, 212, 191, 0.07) 55%,
|
||||
transparent
|
||||
);
|
||||
animation: login-scan 7.5s linear infinite;
|
||||
}
|
||||
|
||||
// ArkScope 等距波形,对齐原型的位置与透明度
|
||||
.login-decor :deep(.iso-wrap) {
|
||||
position: absolute;
|
||||
@@ -441,6 +408,21 @@ function fillDefaultCredentials() {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// 输入文字:Arco 默认取 --color-text-1,在凹陷底上偏暗,读起来费力。
|
||||
// 提亮到接近纯白并把字号抬到 14.5px,保证长用户名与密码都清晰。
|
||||
// 不用 -webkit-text-fill-color:它会盖掉密码框的 -webkit-text-security,导致明文泄露。
|
||||
.login-field :deep(.arco-input) {
|
||||
color: oklch(0.975 0.004 200);
|
||||
font-size: 14.5px;
|
||||
letter-spacing: 0.01em;
|
||||
caret-color: $accent-primary;
|
||||
}
|
||||
|
||||
.login-field :deep(.arco-input::placeholder) {
|
||||
color: var(--text-faint);
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
// ─── 错误提示 ────────────────────────────────────────────────────────────
|
||||
.login-error {
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user