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

Track applied route rules separately from pending edits
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 16s
Details
Build and Deploy Gateway / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-11 23:07:20 +03:00
parent 65bf88bf41
commit f135ade43b
9 changed files with 215 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/web/styles.css
View File

@@ -905,7 +905,7 @@ p {
.client-local-rule {
min-width: 0;
display: grid;
grid-template-columns: 24px 116px minmax(0, 1fr) 28px;
grid-template-columns: 24px 116px minmax(0, 1fr) 112px 28px;
align-items: center;
gap: 10px;
padding: 7px 0;
@@ -913,6 +913,25 @@ p {
transition: opacity 260ms ease, filter 360ms ease;
}
.client-local-rule-status {
color: var(--client-muted);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.07em;
text-align: right;
text-transform: uppercase;
transition: color 280ms ease, opacity 280ms ease, filter 360ms ease;
}
.client-local-rule.is-active .client-local-rule-status {
color: var(--client-accent);
}
.client-local-rule.is-pending .client-local-rule-status,
.client-local-rule.is-unsaved .client-local-rule-status {
color: var(--client-warning, oklch(0.72 0.12 72));
}
.client-local-rule.is-disabled {
opacity: 0.42;
filter: saturate(0);
@@ -1529,6 +1548,44 @@ p {
animation: client-power-arrive 850ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-route-rules-pending {
min-height: 17px;
display: flex;
align-items: center;
gap: 10px;
margin: -10px 0 -8px;
color: var(--client-warning, oklch(0.72 0.12 72));
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
opacity: 0;
filter: blur(5px);
transform: translateY(-3px);
transition: opacity 240ms ease, filter 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-route-rules-pending.is-visible {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
.client-route-rules-pending button {
padding: 0;
border: 0;
background: transparent;
color: var(--client-accent);
font: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.client-route-rules-pending button:disabled {
cursor: default;
opacity: 0.35;
}
@keyframes client-power-arrive {
0% { opacity: 0; filter: blur(8px); transform: scale(0.94); }
100% { opacity: 1; filter: blur(0); transform: scale(1); }
@@ -2525,6 +2582,8 @@ p {
}
.client-proxy-label {
display: grid;
place-items: center;
color: var(--client-muted);
font-size: 9px;
font-weight: 700;
@@ -2532,11 +2591,43 @@ p {
text-transform: uppercase;
}
.client-proxy-label.is-gateway {
.client-proxy-label > span {
grid-area: 1 / 1;
opacity: 0;
filter: blur(3px);
pointer-events: none;
transform: translateX(-12px);
transition: color 700ms ease, opacity 520ms ease, filter 620ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-proxy-label > span:last-child {
color: var(--client-accent);
transform: translateX(12px);
}
.client-proxy-label > span.is-active {
opacity: 1;
filter: blur(0);
pointer-events: auto;
transform: translateX(0);
}
.client-proxy-label a {
color: var(--client-accent);
text-decoration: none;
text-shadow: 0 0 10px color-mix(in oklch, var(--client-accent) 42%, transparent);
}
.client-proxy-label a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.client-proxy-label a:focus-visible {
outline: 2px solid var(--client-accent);
outline-offset: 2px;
}
.client-proxy-address {
color: var(--client-text);
font-size: 12px;
@@ -2739,6 +2830,15 @@ p {
}
@media (max-width: 560px) {
.client-local-rule {
grid-template-columns: 24px 104px minmax(0, 1fr) 28px;
}
.client-local-rule-status {
grid-column: 3;
text-align: left;
}
.client-mode .app-main {
padding: 20px 14px;
}
@@ -2877,7 +2977,8 @@ p {
.client-subscription-edit::after,
.client-subscription-submit,
.client-subscription-summary,
.client-subscription-summary strong {
.client-subscription-summary strong,
.client-proxy-label > span {
transition: none;
animation: none;
}