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

Add failover setting step controls
Build and Deploy Gateway / build-and-push (push) Successful in 26s
Details
Build and Deploy Gateway / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
dokril
2026-08-20 01:55:50 +03:00
parent c27c898ad5
commit 1ee453b3b6
6 changed files with 43 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/styles/features/failover.css
+5 -2
View File
@@ -41,8 +41,11 @@
.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 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-global-actions > button:disabled { color: var(--client-muted); cursor: default; opacity: .42; }
.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 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 legend { width: 100%; margin-bottom: 14px; padding: 0; }
.client-failover-section-header { display: grid; gap: 4px; margin-bottom: 12px; }
@@ -84,7 +87,7 @@
.client-failover-actions button { padding: 7px 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-actions small { flex-basis: 100%; margin-top: -14px; color: var(--client-muted); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); }
.client-failover-actions button:disabled { color: var(--client-muted); cursor: default; opacity: .45; }
.client-failover-actions button:focus-visible, .client-failover-service-editor button:focus-visible, .client-failover-discard button:focus-visible, .client-failover-global-actions > button:focus-visible { outline: 2px solid var(--client-accent); outline-offset: 2px; }
.client-failover-actions button:focus-visible, .client-failover-service-editor button:focus-visible, .client-failover-discard button:focus-visible, .client-failover-global-actions > button:focus-visible, .client-failover-number-steps button:focus-visible { outline: 2px solid var(--client-accent); outline-offset: 2px; }
.client-failover-form input:not(.client-failover-number-input):focus-visible { outline: 0; border-bottom-color: var(--client-accent); box-shadow: 0 1px 0 color-mix(in oklch, var(--client-accent) 60%, transparent); text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 34%, transparent); }
.client-failover-number-input:focus-visible { outline: 0; color: var(--client-accent); text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 38%, transparent); }
@keyframes failover-service-in { from { opacity: 0; filter: blur(5px); transform: translateY(-4px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }