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

Clarify failover UI messaging and controls
Build and Deploy Gateway / build-and-push (push) Successful in 25s
Details
Build and Deploy Gateway / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
dokril
2026-08-21 01:01:34 +03:00
parent 1ee453b3b6
commit 12f2f30212
5 changed files with 109 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/styles/features/failover.css
+11 -8
View File
@@ -39,19 +39,21 @@
.client-failover-picker.is-open .client-failover-picker-list button { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: calc(var(--picker-index) * 30ms); }
.client-failover-picker-list button:hover, .client-failover-picker-list button:focus-visible, .client-failover-picker-list button[aria-selected='true'] { outline: 0; color: var(--client-accent); text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 38%, transparent); }
.client-failover-picker-list button[aria-disabled='true'] { color: color-mix(in oklch, var(--client-muted) 58%, transparent); cursor: default; text-shadow: none; }
.client-failover-number-setting { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .55ch; min-height: 42px; color: var(--client-muted); font: var(--type-body); letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-transform); cursor: text; }
.client-failover-number-setting { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45ch; min-height: 38px; color: var(--client-muted); font: var(--type-body); letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-transform); cursor: text; }
.client-failover-number-control { position: relative; flex: 0 0 auto; min-width: 44px; display: inline-grid; justify-items: center; padding-bottom: 18px; }
.client-failover-number-setting input { flex: 0 0 auto; min-width: 2ch; min-height: 1.35em; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--client-text); font: var(--type-item-title); font-variant-numeric: var(--numeric-tabular); letter-spacing: var(--type-item-title-tracking); text-align: center; text-transform: var(--type-item-title-transform); appearance: textfield; transition: color 220ms ease, text-shadow 220ms ease; }
.client-failover-number-setting input::-webkit-inner-spin-button, .client-failover-number-setting input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.client-failover-number-setting input:disabled { color: var(--client-muted); opacity: .45; }
.client-failover-number-steps { display: inline-flex; align-items: baseline; gap: 10px; margin-left: .65ch; }
.client-failover-number-steps button { min-width: 34px; padding: 5px 0; border: 0; background: transparent; color: var(--client-accent); font: var(--type-control); font-variant-numeric: var(--numeric-tabular); letter-spacing: var(--type-control-tracking); text-transform: var(--type-control-transform); cursor: pointer; }
.client-failover-number-steps { position: absolute; left: 50%; bottom: 0; width: 44px; display: flex; justify-content: space-between; opacity: 0; filter: blur(3px); transform: translate(-50%, -2px); pointer-events: none; transition: opacity 180ms ease, filter 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.client-failover-number-control:hover .client-failover-number-steps, .client-failover-number-control:focus-within .client-failover-number-steps { opacity: 1; filter: blur(0); transform: translate(-50%, 0); pointer-events: auto; }
.client-failover-number-steps button { width: 20px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--client-accent); font: var(--type-control); letter-spacing: var(--type-control-tracking); text-transform: var(--type-control-transform); cursor: pointer; }
.client-failover-number-steps button:disabled, .client-failover-global-actions > button:disabled { color: var(--client-muted); cursor: default; opacity: .42; }
.client-failover-services { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.client-failover-services { display: grid; gap: 5px; margin: 0; padding: 0; border: 0; }
.client-failover-services legend { width: 100%; margin-bottom: 14px; padding: 0; }
.client-failover-section-header { display: grid; gap: 4px; margin-bottom: 12px; }
.client-failover-section-header h3, .client-failover-section-header strong { margin: 0; color: var(--client-text); font: var(--type-item-title); letter-spacing: var(--type-item-title-tracking); text-transform: var(--type-item-title-transform); }
.client-failover-section-header p, .client-failover-section-header small { margin: 0; color: var(--client-muted); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); }
.client-failover-service { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr) 32px; align-items: center; gap: 12px; min-height: 42px; animation: failover-service-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.client-failover-service { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr) 32px; align-items: center; gap: 12px; min-height: 38px; animation: failover-service-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.client-failover-service.is-removing { animation: failover-service-out 300ms ease both; pointer-events: none; }
.client-failover-service-name { min-width: 0; overflow: hidden; color: var(--client-text); font: var(--type-body); letter-spacing: var(--type-body-tracking); text-overflow: ellipsis; text-transform: var(--type-body-transform); white-space: nowrap; }
.client-failover-remove-service { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: oklch(0.62 0.16 28); cursor: pointer; transition: color 180ms ease, filter 240ms ease; }
@@ -70,12 +72,13 @@
.client-failover-service-editor span { grid-column: 1 / -1; color: oklch(0.68 0.15 28); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); }
.client-failover-service-editor button { justify-self: start; padding: 4px 0; border: 0; background: transparent; color: var(--client-accent); font: var(--type-control); letter-spacing: var(--type-control-tracking); text-transform: var(--type-control-transform); cursor: pointer; }
.client-failover-service-editor button:disabled { color: var(--client-muted); cursor: default; opacity: .45; }
.client-failover-timing { display: grid; gap: 5px; }
.client-failover-timing { display: grid; gap: 0; }
.client-failover-traffic-switch { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 8px 0 4px; }
.client-failover-traffic-switch > span { min-width: 0; display: grid; gap: 3px; }
.client-failover-traffic-switch strong { color: var(--client-text); font: var(--type-body); letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-transform); }
.client-failover-traffic-switch small { color: var(--client-muted); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); }
.client-failover-protection, .client-failover-protection-options { display: grid; gap: 5px; }
.client-failover-protection { display: grid; gap: 5px; }
.client-failover-protection-options { display: grid; gap: 0; }
.client-failover-runtime { min-height: 132px; display: grid; align-content: center; gap: 5px; padding: 14px 0; border-top: 1px solid color-mix(in oklch, var(--client-border) 48%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--client-border) 48%, transparent); font-variant-numeric: var(--numeric-tabular); }
.client-failover-runtime strong { font: var(--type-body); letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-transform); }
.client-failover-runtime span, .client-failover-runtime small { color: var(--client-muted); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); }
@@ -93,4 +96,4 @@
@keyframes failover-service-in { from { opacity: 0; filter: blur(5px); transform: translateY(-4px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes failover-service-out { from { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); } to { opacity: 0; filter: blur(6px); transform: translateX(16px) scale(.96); } }
@media (max-width: 560px) { .client-failover-channels { grid-template-columns: minmax(0, 1fr); gap: 18px; } .client-failover-checking { grid-column: 1; margin-top: -6px; } .client-failover-service { grid-template-columns: minmax(0, 1fr) 32px; gap: 6px 10px; } .client-failover-service > .client-failover-number-setting { grid-column: 1; grid-row: 2; } .client-failover-remove-service { grid-column: 2; grid-row: 1 / span 2; } .client-failover-service-editor { grid-template-columns: 1fr; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .client-failover-channel-title strong, .client-failover-switch::before, .client-failover-switch > span, .client-failover-picker-trigger, .client-failover-picker-trigger::before, .client-failover-picker-trigger svg, .client-failover-picker-list, .client-failover-picker-list button, .client-failover-remove-service, .client-failover-remove-lid { transition: none; } .client-failover-service, .client-failover-service-editor { animation: none; } }
@media (prefers-reduced-motion: reduce) { .client-failover-channel-title strong, .client-failover-switch::before, .client-failover-switch > span, .client-failover-picker-trigger, .client-failover-picker-trigger::before, .client-failover-picker-trigger svg, .client-failover-picker-list, .client-failover-picker-list button, .client-failover-number-steps, .client-failover-remove-service, .client-failover-remove-lid { transition: none; } .client-failover-service, .client-failover-service-editor { animation: none; } }