Simplify proxy routing and configuration
This commit is contained in:
@@ -63,6 +63,16 @@ html, body, #root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-loading {
|
||||
min-height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font: 700 16px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
|
||||
color: light-dark(oklch(0.42 0.01 145), oklch(0.76 0.01 145));
|
||||
background: light-dark(oklch(0.965 0.006 145), oklch(0.18 0.012 145));
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-ui);
|
||||
@@ -830,269 +840,418 @@ code, .mono {
|
||||
|
||||
/* ============ Client overview ============ */
|
||||
|
||||
.app.client-app {
|
||||
--client-bg: oklch(0.965 0.006 145);
|
||||
--client-panel: oklch(0.995 0.003 145);
|
||||
--client-control: oklch(0.955 0.006 145);
|
||||
--client-border: oklch(0.86 0.012 145);
|
||||
--client-text: oklch(0.24 0.014 145);
|
||||
--client-muted: oklch(0.53 0.014 145);
|
||||
--client-accent: oklch(0.62 0.14 151);
|
||||
--client-accent-soft: oklch(0.92 0.045 151);
|
||||
grid-template-rows: 1fr;
|
||||
color-scheme: light;
|
||||
background: var(--client-bg);
|
||||
}
|
||||
|
||||
.app-body.client-mode {
|
||||
background: var(--client-bg);
|
||||
}
|
||||
|
||||
.client-mode .app-main {
|
||||
max-width: 1180px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: 18px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 48px 24px 32px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.client-dashboard {
|
||||
.client-shell {
|
||||
width: min(100%, 440px);
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
|
||||
color: var(--client-text);
|
||||
}
|
||||
|
||||
.client-status-panel {
|
||||
.client-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(420px, 0.8fr);
|
||||
gap: 16px;
|
||||
padding: 18px;
|
||||
background: #101820;
|
||||
border: 1px solid #263442;
|
||||
border-radius: 8px;
|
||||
gap: 30px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.client-status-panel.connected { border-color: rgba(109, 255, 157, 0.46); }
|
||||
.client-status-panel.stopped { border-color: rgba(255, 209, 102, 0.42); }
|
||||
.client-status-panel.empty { border-color: rgba(142, 212, 255, 0.32); }
|
||||
|
||||
.client-status-main {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
.client-power-section p {
|
||||
color: var(--client-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
.client-status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: 9px;
|
||||
|
||||
.client-power-section {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.client-power {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid var(--client-border);
|
||||
border-radius: 50%;
|
||||
background: var(--subtle);
|
||||
box-shadow: 0 0 0 6px rgba(111, 140, 124, 0.12);
|
||||
flex: 0 0 12px;
|
||||
}
|
||||
.client-status-dot.connected {
|
||||
background: var(--success);
|
||||
box-shadow: 0 0 0 6px rgba(109, 255, 157, 0.12);
|
||||
}
|
||||
.client-status-dot.stopped {
|
||||
background: var(--warning);
|
||||
box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.12);
|
||||
}
|
||||
.client-status-dot.empty {
|
||||
background: var(--info);
|
||||
box-shadow: 0 0 0 6px rgba(142, 212, 255, 0.12);
|
||||
}
|
||||
.client-eyebrow {
|
||||
color: var(--subtle);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.client-status-main h1 {
|
||||
margin: 2px 0 4px;
|
||||
font-size: 30px;
|
||||
line-height: 1.08;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.client-status-main p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
background: var(--client-control);
|
||||
color: var(--client-muted);
|
||||
cursor: pointer;
|
||||
transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.client-status-facts {
|
||||
.client-power:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
color: var(--client-text);
|
||||
border-color: var(--client-muted);
|
||||
}
|
||||
|
||||
.client-power[aria-checked='true'] {
|
||||
color: var(--client-accent);
|
||||
background: var(--client-accent-soft);
|
||||
border-color: var(--client-accent);
|
||||
}
|
||||
|
||||
.client-power:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.client-power svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.7;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.client-power-section h2 {
|
||||
font: 700 18px/1.3 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.client-duration {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: var(--client-text);
|
||||
font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.client-power-section p {
|
||||
min-height: 17px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.client-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.client-status-facts > div {
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
background: #0b1219;
|
||||
border: 1px solid #253341;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.client-status-facts small,
|
||||
.client-current-target small,
|
||||
.client-panel-title {
|
||||
display: block;
|
||||
color: var(--subtle);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.client-status-facts strong,
|
||||
.client-current-target strong {
|
||||
display: block;
|
||||
margin: 3px 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.client-status-facts span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.client-route-line {
|
||||
display: flex;
|
||||
.client-subscription {
|
||||
min-height: 88px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: #0b1219;
|
||||
border: 1px solid #253341;
|
||||
border-radius: 8px;
|
||||
color: var(--muted);
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.client-route-line span {
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
}
|
||||
.client-route-line b {
|
||||
color: var(--subtle);
|
||||
font-weight: 600;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.client-workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
.client-subscription-edit,
|
||||
.client-subscription-summary {
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 650ms cubic-bezier(0.16, 1, 0.3, 1), transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.client-main-panel,
|
||||
.client-side-panel {
|
||||
background: #101820;
|
||||
border: 1px solid #263442;
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
|
||||
.client-subscription-edit {
|
||||
width: min(100%, 380px);
|
||||
min-height: 44px;
|
||||
display: block;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
filter: blur(16px);
|
||||
transform: translateY(6px) scale(0.96);
|
||||
pointer-events: none;
|
||||
}
|
||||
.client-main-panel {
|
||||
|
||||
.client-subscription-edit::before,
|
||||
.client-subscription-edit::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.client-subscription-edit::before {
|
||||
background: var(--client-border);
|
||||
}
|
||||
|
||||
.client-subscription-edit::after {
|
||||
background: var(--client-accent);
|
||||
opacity: 0.72;
|
||||
filter: blur(0.5px);
|
||||
box-shadow: 0 0 8px var(--client-accent), 0 0 18px var(--client-accent-soft);
|
||||
}
|
||||
|
||||
.client-subscription.is-editing .client-subscription-edit {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.client-subscription-edit input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 44px;
|
||||
padding: 0 42px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: var(--client-text);
|
||||
caret-color: var(--client-accent);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.client-subscription-edit input::placeholder {
|
||||
color: var(--client-muted);
|
||||
}
|
||||
|
||||
.client-subscription-edit button {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--client-accent);
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.client-subscription-summary {
|
||||
min-height: 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 2px;
|
||||
color: var(--client-muted);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.client-mode-grid {
|
||||
|
||||
.client-subscription.is-editing .client-subscription-summary {
|
||||
opacity: 0;
|
||||
filter: blur(18px);
|
||||
transform: translateY(-4px) scale(1.06);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.client-subscription-summary span {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.client-subscription-summary strong {
|
||||
color: var(--client-text);
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.055em;
|
||||
opacity: 0.88;
|
||||
text-shadow: 0 0 20px oklch(0.62 0.05 151 / 0.24);
|
||||
transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), text-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.client-subscription-summary:hover strong {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 28px oklch(0.7 0.08 151 / 0.42);
|
||||
}
|
||||
|
||||
.client-servers {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.client-server-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.client-mode-button {
|
||||
|
||||
.client-server {
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
border: 1px solid #2a3948;
|
||||
border-radius: 8px;
|
||||
background: #0b1219;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.16s ease, background 0.16s ease;
|
||||
}
|
||||
.client-mode-button:hover:not(:disabled) {
|
||||
border-color: #4c6d88;
|
||||
background: #101c27;
|
||||
}
|
||||
.client-mode-button.selected {
|
||||
border-color: var(--info);
|
||||
background: rgba(142, 212, 255, 0.08);
|
||||
}
|
||||
.client-mode-button.active {
|
||||
border-color: var(--success);
|
||||
background: rgba(109, 255, 157, 0.11);
|
||||
}
|
||||
.client-mode-button strong,
|
||||
.client-mode-button span {
|
||||
min-height: 56px;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
padding: 7px 4px 8px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--client-border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--client-text);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.client-server:hover:not(:disabled) {
|
||||
transform: none;
|
||||
background: transparent;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.client-server.is-selected {
|
||||
border-bottom: 2px solid var(--client-accent);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.client-server strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.client-mode-button strong {
|
||||
font-size: 14px;
|
||||
}
|
||||
.client-mode-button span {
|
||||
margin-top: 3px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.client-mode-settings {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
.client-mode-settings.direct {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
.client-mode-settings.direct p {
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
.client-inline-form {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.client-current-target {
|
||||
padding: 10px 12px;
|
||||
background: #0b1219;
|
||||
border: 1px solid #253341;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.client-side-panel {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
.client-copy-stack {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.client-copy {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: #0b1219;
|
||||
border: 1px solid #253341;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.client-copy span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
}
|
||||
.client-copy strong {
|
||||
color: var(--accent);
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 11px;
|
||||
}
|
||||
.client-port-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.client-status-panel,
|
||||
.client-workspace {
|
||||
.client-server small {
|
||||
color: var(--client-muted);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.client-server small.good { color: var(--client-accent); }
|
||||
.client-server small.medium { color: oklch(0.72 0.12 80); }
|
||||
.client-server small.slow { color: oklch(0.65 0.16 30); }
|
||||
|
||||
.client-server:disabled {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.client-subscription-edit button:focus-visible,
|
||||
.client-subscription-summary:focus-visible,
|
||||
.client-server:focus-visible,
|
||||
.client-power:focus-visible {
|
||||
outline: 2px solid var(--client-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.client-proxies {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.client-proxies button {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 6px 2px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--client-text);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
opacity: 0.76;
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.client-proxies button:hover {
|
||||
transform: translateY(-1px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.client-proxies button.is-copied {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.client-proxies span {
|
||||
color: var(--client-muted);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.client-proxies strong {
|
||||
overflow: hidden;
|
||||
color: var(--client-text);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 0 12px oklch(0.62 0.05 151 / 0.12);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.client-proxies button.is-copied span {
|
||||
color: var(--client-accent);
|
||||
}
|
||||
|
||||
.client-proxies button:focus-visible {
|
||||
outline: 2px solid var(--client-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.app.client-app {
|
||||
--client-bg: oklch(0.18 0.012 145);
|
||||
--client-panel: oklch(0.22 0.012 145);
|
||||
--client-control: oklch(0.26 0.012 145);
|
||||
--client-border: oklch(0.34 0.015 145);
|
||||
--client-text: oklch(0.93 0.008 145);
|
||||
--client-muted: oklch(0.68 0.012 145);
|
||||
--client-accent: oklch(0.76 0.13 151);
|
||||
--client-accent-soft: oklch(0.32 0.055 151);
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.client-mode .app-main {
|
||||
padding: 20px 14px;
|
||||
}
|
||||
|
||||
.client-panel {
|
||||
gap: 26px;
|
||||
padding: 20px 6px;
|
||||
}
|
||||
|
||||
.client-server-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.client-proxies {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.client-status-facts,
|
||||
.client-mode-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.client-mode-settings.direct,
|
||||
.client-inline-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.client-power,
|
||||
.client-server,
|
||||
.client-proxies button,
|
||||
.client-subscription-edit,
|
||||
.client-subscription-summary,
|
||||
.client-subscription-summary strong {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user