dashboard: collapsible credentials block; autofill: fix Pult username field

- Credentials wrapped in svc-credentials-wrap with toggle button and chevron
- Credentials hidden by default, expand on click (CSS class toggle)
- Autofill: add autofocus selector to catch fields like Zabbix name=name
- Autofill: re-fill username after password fill if Pult/Zabbix cleared it

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-07-21 08:00:02 +00:00
parent cfadc72e6c
commit 4d5e01855f
3 changed files with 82 additions and 20 deletions
+54 -4
View File
@@ -410,18 +410,60 @@ button {
position: relative;
height: 100%;
}
.svc-cred-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: rgba(42,140,214,0.1);
border: 1px solid rgba(42,140,214,0.22);
border-radius: 8px;
padding: 0.32rem 0.65rem;
margin: 0 0 0rem;
cursor: pointer;
font-size: 0.76rem;
font-weight: 700;
color: #1a5a8a;
letter-spacing: 0.03em;
text-transform: uppercase;
pointer-events: auto;
transition: background 0.15s ease, border-color 0.15s ease;
flex-shrink: 0;
}
.svc-cred-toggle:hover {
background: rgba(42,140,214,0.18);
border-color: rgba(42,140,214,0.38);
}
.svc-cred-chevron {
width: 14px; height: 14px;
flex-shrink: 0;
transition: transform 0.2s ease;
color: #2a8cd6;
}
.svc-credentials-wrap.open .svc-cred-chevron {
transform: rotate(180deg);
}
.svc-credentials-wrap.open .svc-cred-toggle {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-color: transparent;
}
.svc-credentials {
background: linear-gradient(135deg, #edf5fc 0%, #e2eff8 100%);
border: 1px solid #c7d9ea;
border-radius: 8px;
border-top: none;
border-radius: 0 0 8px 8px;
padding: 0.5rem 0.75rem 0.55rem;
margin: 0 0 0.5rem;
display: flex;
display: none;
flex-direction: column;
gap: 0.3rem;
flex-shrink: 0;
pointer-events: auto;
}
.svc-credentials-wrap.open .svc-credentials {
display: flex;
}
.svc-cred-row {
display: flex;
align-items: center;
@@ -881,8 +923,16 @@ button {
/* Credentials block */
.dashboard-page .svc-credentials {
background: linear-gradient(135deg, #edf6ff 0%, #e2f0fb 100%) !important;
border-color: rgba(180, 215, 240, 0.8) !important;
background: linear-gradient(135deg, rgba(220,238,255,0.55) 0%, rgba(200,225,248,0.5) 100%) !important;
border-color: rgba(180, 215, 240, 0.6) !important;
}
.dashboard-page .svc-cred-toggle {
background: rgba(42,140,214,0.12) !important;
border-color: rgba(42,140,214,0.25) !important;
color: #0c2e4a !important;
}
.dashboard-page .svc-cred-toggle:hover {
background: rgba(42,140,214,0.2) !important;
}
/* Category badges on tile */