toor/hermes-ui
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

outrank Arco button variants and drop the credential hint

Browse Source 
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:
toor
2026-10-19 13:55:02 +08:00
parent 336d08fc05
commit ce184fc151
5 changed files with 67 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/client/src/styles/global.scss
+50 -15
View File
@@ -169,11 +169,26 @@ $neon-hv: var(--accent-hover);
text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.45);
}
// Arco 为按钮写了 `.arco-btn-primary[type='button']` / `[type='submit']` / `[type='reset']`
// 三个属性选择器变体，把特异性从 (0,1,0) 抬到 (0,2,0)；它的 hover 变体则是
// `.arco-btn-primary[type='submit']:hover` → (0,3,0)。所以下面每条规则都用
// `.arco-btn.arco-btn-X[type='...']`（0,3,0）打底，状态规则用 (0,4,0)，
// 稳压过 Arco 的一整族变体。只写 `.arco-btn-primary` 会被压过，而 a-button
// 默认 html-type 就是 button —— 漏掉属性选择器等于所有按钮都不生效。
// 默认按钮（secondary / 默认态）：不发光的幽灵按钮，只在 hover 时点亮管壁
.arco-btn-secondary,
.arco-btn-secondary.arco-btn-status-warning,
.arco-btn-outline,
.arco-btn-default {
.arco-btn.arco-btn-secondary,
.arco-btn.arco-btn-secondary[type='button'],
.arco-btn.arco-btn-secondary[type='submit'],
.arco-btn.arco-btn-secondary[type='reset'],
.arco-btn.arco-btn-outline,
.arco-btn.arco-btn-outline[type='button'],
.arco-btn.arco-btn-outline[type='submit'],
.arco-btn.arco-btn-outline[type='reset'],
.arco-btn.arco-btn-default,
.arco-btn.arco-btn-default[type='button'],
.arco-btn.arco-btn-default[type='submit'],
.arco-btn.arco-btn-default[type='reset'] {
color: $text-secondary;
background: transparent;
border: 1px solid $border-color;
@@ -191,7 +206,10 @@ $neon-hv: var(--accent-hover);
}
// 主按钮：霓虹管
.arco-btn-primary {
.arco-btn.arco-btn-primary,
.arco-btn.arco-btn-primary[type='button'],
.arco-btn.arco-btn-primary[type='submit'],
.arco-btn.arco-btn-primary[type='reset'] {
@include neon-tube(0.34);
font-weight: 600;
@@ -229,7 +247,10 @@ $neon-hv: var(--accent-hover);
text-shadow: 0 0 8px rgba(var(--error-rgb), 0.4);
}
.arco-btn-dangerous {
.arco-btn.arco-btn-dangerous,
.arco-btn.arco-btn-dangerous[type='button'],
.arco-btn.arco-btn-dangerous[type='submit'],
.arco-btn.arco-btn-dangerous[type='reset'] {
@include neon-tube-danger(0.26);
font-weight: 500;
@@ -252,8 +273,14 @@ $neon-hv: var(--accent-hover);
}
// 文字 / 链接按钮：无管壁，只让文字带辉光
.arco-btn-text,
.arco-btn-link {
.arco-btn.arco-btn-text,
.arco-btn.arco-btn-link,
.arco-btn.arco-btn-text[type='button'],
.arco-btn.arco-btn-text[type='submit'],
.arco-btn.arco-btn-text[type='reset'],
.arco-btn.arco-btn-link[type='button'],
.arco-btn.arco-btn-link[type='submit'],
.arco-btn.arco-btn-link[type='reset'] {
background: transparent;
border: 1px solid transparent;
box-shadow: none;
@@ -268,12 +295,18 @@ $neon-hv: var(--accent-hover);
}
// 禁用态：灯管熄灭
.arco-btn-primary.arco-btn-disabled,
.arco-btn-secondary.arco-btn-disabled,
.arco-btn-outline.arco-btn-disabled,
.arco-btn-dangerous.arco-btn-disabled,
.arco-btn-text.arco-btn-disabled,
.arco-btn-link.arco-btn-disabled {
.arco-btn.arco-btn-primary.arco-btn-disabled,
.arco-btn.arco-btn-secondary.arco-btn-disabled,
.arco-btn.arco-btn-outline.arco-btn-disabled,
.arco-btn.arco-btn-dangerous.arco-btn-disabled,
.arco-btn.arco-btn-text.arco-btn-disabled,
.arco-btn.arco-btn-link.arco-btn-disabled,
.arco-btn.arco-btn-primary[type='button'].arco-btn-disabled,
.arco-btn.arco-btn-primary[type='submit'].arco-btn-disabled,
.arco-btn.arco-btn-secondary[type='button'].arco-btn-disabled,
.arco-btn.arco-btn-secondary[type='submit'].arco-btn-disabled,
.arco-btn.arco-btn-dangerous[type='button'].arco-btn-disabled,
.arco-btn.arco-btn-dangerous[type='submit'].arco-btn-disabled {
color: var(--text-faint);
background: transparent;
border-color: var(--border-light);
@@ -288,7 +321,9 @@ $neon-hv: var(--accent-hover);
50% { opacity: 0.62; }
}
.arco-btn-primary.arco-btn-loading {
.arco-btn.arco-btn-primary.arco-btn-loading,
.arco-btn.arco-btn-primary[type='button'].arco-btn-loading,
.arco-btn.arco-btn-primary[type='submit'].arco-btn-loading {
@include neon-tube(0.4);
animation: neon-pulse 1.1s ease-in-out infinite;
}