outrank Arco button variants and drop the credential hint

The neon tube rules never applied. Arco emits .arco-btn-primary along
with three attribute variants ([type='button'], [type='submit'],
[type='reset']) that lift specificity to (0,2,0), and their :hover forms
reach (0,3,0) — all of which beat a bare .arco-btn-primary. Every rule
now uses .arco-btn.arco-btn-X[type='...'] so the skin wins regardless of
the rendered html-type; login is a submit button, which is why it stayed
solid.

Verified with jsdom computed styles against the real arco.css.

Also remove the default-credential chips from the login page: printing
admin / 123456 on a sign-in screen leaks the credentials of a reachable
deployment. The one-click fill shortcut stays. The test that asserted
the hint is now shown is inverted to assert it is absent.
This commit is contained in:
2026-10-19 13:55:02 +08:00
parent 336d08fc05
commit ce184fc151
5 changed files with 67 additions and 79 deletions
+1 -58
View File
@@ -169,13 +169,8 @@ function fillDefaultCredentials() {
</form>
<footer class="login-ft">
<div class="login-sep"><span>{{ t("login.defaultCredentialsHint") }}</span></div>
<div class="login-chips">
<span class="login-chip"><span class="dot"></span>{{ t("login.username") }} <b>admin</b></span>
<span class="login-chip"><span class="dot"></span>{{ t("login.passwordPlaceholder") }} <b>123456</b></span>
</div>
<button type="button" class="login-copy" @click="fillDefaultCredentials">
⧉ {{ t("login.fillDefaultCredentials") }}
⧉ {{ t("login.fillDefaults") }}
</button>
<p class="login-legal">
{{ t("login.localDeploymentNote") }}<br />
@@ -499,58 +494,6 @@ function fillDefaultCredentials() {
text-align: center;
}
.login-sep {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 14px;
font-size: 11px;
color: var(--text-faint);
&::before,
&::after {
content: "";
flex: 1;
height: 1px;
background: var(--border-light);
}
}
.login-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 7px;
margin-bottom: 14px;
}
.login-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border: 1px solid var(--border-light);
border-radius: 20px;
background: $bg-card;
font-family: $font-code;
font-size: 11px;
line-height: 1.4;
color: $text-muted;
b {
color: $accent-primary;
font-weight: 600;
}
.dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: $success;
box-shadow: 0 0 5px $success;
}
}
.login-copy {
width: 100%;
height: 34px;