dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Refine client setup state and subscription controls

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-11 10:43:28 +03:00
parent 99f7f58fcb
commit e19d33adb9
7 changed files with 266 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/web/styles.css
View File

@@ -881,6 +881,11 @@ code, .mono {
padding: 24px 0;
}
.client-panel.is-setup .client-form {
left: 50%;
transform: translateX(-50%);
}
.client-power-section p {
color: var(--client-muted);
font-size: 11px;
@@ -891,6 +896,12 @@ code, .mono {
justify-items: center;
gap: 18px;
text-align: center;
animation: client-power-arrive 850ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes client-power-arrive {
0% { opacity: 0; filter: blur(8px); transform: scale(0.94); }
100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
.client-state-copy {
@@ -1029,6 +1040,8 @@ code, .mono {
width: min(360px, calc(50% - 154px));
display: grid;
gap: 36px;
transform: translateX(0);
transition: left 850ms cubic-bezier(0.16, 1, 0.3, 1), transform 850ms cubic-bezier(0.16, 1, 0.3, 1), width 850ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-subscription {
@@ -1039,7 +1052,8 @@ code, .mono {
justify-items: center;
}
.client-subscription-refresh {
.client-subscription-refresh,
.client-subscription-delete {
width: 16px;
height: 16px;
display: grid;
@@ -1053,7 +1067,8 @@ code, .mono {
transition: color 250ms ease, filter 500ms ease, opacity 300ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-subscription-refresh svg {
.client-subscription-refresh svg,
.client-subscription-delete svg {
width: 14px;
height: 14px;
fill: none;
@@ -1080,7 +1095,23 @@ code, .mono {
outline-offset: 2px;
}
.client-subscription.is-editing .client-subscription-refresh {
.client-subscription-delete:hover:not(:disabled) {
color: oklch(0.68 0.15 28);
filter: drop-shadow(0 0 6px oklch(0.68 0.15 28 / 0.45));
}
.client-subscription-delete:disabled {
opacity: 0.4;
cursor: wait;
}
.client-subscription-delete:focus-visible {
outline: 2px solid oklch(0.68 0.15 28);
outline-offset: 2px;
}
.client-subscription.is-editing .client-subscription-refresh,
.client-subscription.is-editing .client-subscription-delete {
opacity: 0;
pointer-events: none;
}
@@ -1346,6 +1377,18 @@ code, .mono {
display: block;
}
.client-server-prompt {
display: block;
margin-bottom: 12px;
color: var(--client-muted);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-align: center;
text-transform: uppercase;
animation: client-state-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-server-grid {
display: grid;
grid-template-columns: 1fr;
@@ -1569,6 +1612,11 @@ code, .mono {
.client-form {
position: static;
width: 100%;
transform: none;
}
.client-panel.is-setup .client-form {
transform: none;
}
}
@@ -1579,6 +1627,9 @@ code, .mono {
.client-power svg,
.client-usage-bar i,
.client-subscription-refresh,
.client-subscription-delete,
.client-power-section,
.client-form,
.client-usage,
.client-usage > strong,
.client-server,