Administrator/Multi-Hoster-Upload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 47 Wiki Activity

Polish account interactions and settings layout
CI / verify (push) Successful in 5m2s
Details

Browse Source 
Add smooth account editor transitions with immediate input release, keep the cursor visible in development and production windows, align host option descriptions, and ensure localized settings search placeholders fit at narrow widths. Bump the application to v2.1.22 and extend hidden Electron regression coverage.
This commit is contained in:
Sucukdeluxe
2026-08-15 22:35:51 +02:00
parent f1774b50f8
commit 16f6f93a72
8 changed files with 269 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
renderer/styles.css
+66 -1
View File
@@ -29,6 +29,7 @@
body {
font-family: 'Aptos', 'Segoe UI Variable Text', 'Bahnschrift', sans-serif;
background: var(--bg-primary);
cursor: default;
height: 100vh;
overflow: hidden;
color: var(--text);
@@ -1287,6 +1288,29 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
.account-hoster-settings-header .panel-arrow { font-size: 10px; color: var(--text-dim); }
.account-hoster-settings-body-inner { padding: 4px 12px 10px; }
.account-hoster-settings-body-inner .account-hoster-option-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 150px minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
}
.account-hoster-settings-body-inner .account-hoster-option-row label {
min-width: 0;
}
.account-hoster-settings-body-inner .account-hoster-option-row .hint {
grid-column: 2;
line-height: 1.45;
}
.account-hoster-settings-body-inner .account-hoster-option-row input[type="checkbox"] {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.settings-hoster-pointer {
margin-top: 12px;
padding: 10px 14px;
@@ -3456,7 +3480,7 @@ input[type="checkbox"] {
}
#settingsSearchInput {
font-size: 13px;
font-size: 11px;
}
.settings-nav-button {
@@ -3753,6 +3777,47 @@ input[type="checkbox"] {
box-shadow: 0 24px 64px rgba(0, 0, 0, .48);
}
#accountModal.account-modal-opening {
animation: account-modal-dim-in 360ms cubic-bezier(.16, 1, .3, 1) both;
}
#accountModal.account-modal-opening > .modal-card {
transform-origin: top center;
animation: account-modal-unfold 360ms cubic-bezier(.16, 1, .3, 1) both;
}
#accountModal.account-modal-closing {
pointer-events: none;
animation: account-modal-dim-out 300ms cubic-bezier(.4, 0, .2, 1) both;
}
#accountModal.account-modal-closing > .modal-card {
transform-origin: top center;
animation: account-modal-fold 300ms cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes account-modal-dim-in {
from { background: rgba(0, 0, 0, 0); }
to { background: rgba(0, 0, 0, .6); }
}
@keyframes account-modal-dim-out {
from { background: rgba(0, 0, 0, .6); }
to { background: rgba(0, 0, 0, 0); }
}
@keyframes account-modal-unfold {
0% { opacity: 0; clip-path: inset(0 0 18% 0 round 12px); transform: translateY(-16px) scale(.985); }
55% { opacity: .96; }
100% { opacity: 1; clip-path: inset(0 round 12px); transform: translateY(0) scale(1); }
}
@keyframes account-modal-fold {
0% { opacity: 1; clip-path: inset(0 round 12px); transform: translateY(0) scale(1); }
45% { opacity: .9; }
100% { opacity: 0; clip-path: inset(0 0 18% 0 round 12px); transform: translateY(-16px) scale(.985); }
}
.modal-header,
.modal-footer {
padding: 16px 18px;