Refactor VPN proxy routing and session handling
This commit is contained in:
@@ -21,8 +21,7 @@ body {
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@@ -51,15 +50,15 @@ button:disabled {
|
||||
border-radius: 0;
|
||||
background: #101216;
|
||||
box-shadow: none;
|
||||
padding: 18px;
|
||||
padding: 18px 18px 96px;
|
||||
}
|
||||
|
||||
.simple-header,
|
||||
.finder-card,
|
||||
.section-head,
|
||||
.add-line,
|
||||
.app-row,
|
||||
.notice-line {
|
||||
.add-toolbar,
|
||||
.process-add-line,
|
||||
.app-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -75,7 +74,7 @@ button:disabled {
|
||||
|
||||
.simple-header small,
|
||||
.simple-field span,
|
||||
.app-row span,
|
||||
.app-row-main > div > span,
|
||||
.config-path,
|
||||
.finder-card span {
|
||||
color: #8d99ae;
|
||||
@@ -99,9 +98,11 @@ button:disabled {
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.add-line button,
|
||||
.add-toolbar button,
|
||||
.process-add-line button,
|
||||
.app-row button,
|
||||
.open-config-button {
|
||||
.open-config-button,
|
||||
.service-button {
|
||||
min-height: 36px;
|
||||
border: 1px solid #343b49;
|
||||
border-radius: 4px;
|
||||
@@ -112,30 +113,112 @@ button:disabled {
|
||||
}
|
||||
|
||||
.ghost-button:hover,
|
||||
.add-line button:hover,
|
||||
.add-toolbar button:hover,
|
||||
.process-add-line button:hover,
|
||||
.app-row button:hover,
|
||||
.open-config-button:hover {
|
||||
.open-config-button:hover,
|
||||
.service-button:hover {
|
||||
background: #2d3543;
|
||||
}
|
||||
|
||||
.finder-card {
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
justify-content: stretch;
|
||||
min-height: 56px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background: #151923;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.finder-card > div,
|
||||
.app-row > div {
|
||||
.finder-border-glow {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.22s ease;
|
||||
}
|
||||
|
||||
.finder-card > :not(.finder-border-glow) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.finder-card.checking .finder-border-glow,
|
||||
.finder-card.working .finder-border-glow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.finder-card.checking .finder-border-glow {
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.finder-card.settling .finder-border-glow {
|
||||
opacity: 0;
|
||||
transition-duration: 0.7s;
|
||||
}
|
||||
|
||||
.finder-border-glow-segment {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: #93c5fd;
|
||||
box-shadow:
|
||||
0 0 8px rgba(96, 165, 250, 0.95),
|
||||
0 0 16px rgba(34, 197, 94, 0.36);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.finder-border-glow-segment.top,
|
||||
.finder-border-glow-segment.bottom {
|
||||
width: 108px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #60a5fa 24%, #bbf7d0 54%, transparent);
|
||||
}
|
||||
|
||||
.finder-border-glow-segment.right,
|
||||
.finder-border-glow-segment.left {
|
||||
width: 2px;
|
||||
height: 64px;
|
||||
background: linear-gradient(180deg, transparent, #60a5fa 24%, #bbf7d0 54%, transparent);
|
||||
}
|
||||
|
||||
.finder-border-glow-segment.top {
|
||||
top: 0;
|
||||
animation: finder-border-top 1.6s linear infinite;
|
||||
}
|
||||
|
||||
.finder-border-glow-segment.right {
|
||||
right: 0;
|
||||
animation: finder-border-right 1.6s linear infinite;
|
||||
}
|
||||
|
||||
.finder-border-glow-segment.bottom {
|
||||
bottom: 0;
|
||||
animation: finder-border-bottom 1.6s linear infinite;
|
||||
}
|
||||
|
||||
.finder-border-glow-segment.left {
|
||||
left: 0;
|
||||
animation: finder-border-left 1.6s linear infinite;
|
||||
}
|
||||
|
||||
.finder-text,
|
||||
.app-row > div,
|
||||
.app-row-main > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.finder-card strong,
|
||||
.finder-card span,
|
||||
.app-row strong,
|
||||
.app-row span {
|
||||
.app-row-main strong,
|
||||
.app-row-main > div > span {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@@ -158,6 +241,29 @@ button:disabled {
|
||||
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
|
||||
}
|
||||
|
||||
.finder-card.checking .status-light {
|
||||
border: 2px solid #3b82f6;
|
||||
border-top-color: transparent;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
animation: spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.service-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-button {
|
||||
min-width: 102px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.service-button.stop {
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
.simple-field {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
@@ -165,8 +271,7 @@ button:disabled {
|
||||
}
|
||||
|
||||
.simple-field input,
|
||||
.add-line input,
|
||||
.add-line select {
|
||||
.process-add-line input {
|
||||
min-height: 42px;
|
||||
width: 100%;
|
||||
border: 1px solid #343b49;
|
||||
@@ -178,8 +283,7 @@ button:disabled {
|
||||
}
|
||||
|
||||
.simple-field input:focus,
|
||||
.add-line input:focus,
|
||||
.add-line select:focus {
|
||||
.process-add-line input:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
@@ -202,29 +306,99 @@ button:disabled {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.add-line {
|
||||
display: grid;
|
||||
grid-template-columns: 130px minmax(0, 1fr) auto;
|
||||
.add-toolbar {
|
||||
justify-content: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.add-line button {
|
||||
min-width: 104px;
|
||||
.add-tile {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 74px;
|
||||
height: 48px;
|
||||
border-color: #2b3342;
|
||||
background: #131720;
|
||||
color: #dbeafe;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.add-tile svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.add-tile:hover {
|
||||
border-color: #3b82f6;
|
||||
background: #182033;
|
||||
}
|
||||
|
||||
.add-tile[aria-pressed="true"] {
|
||||
border-color: #3b82f6;
|
||||
background: #1e3a8a;
|
||||
}
|
||||
|
||||
.tile-loading {
|
||||
color: #dbeafe;
|
||||
font-weight: 800;
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.process-add-line {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 72px 88px;
|
||||
}
|
||||
|
||||
.process-add-line button {
|
||||
border-color: #166534;
|
||||
background: #14532d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.add-line button:hover {
|
||||
.process-add-line .process-cancel-button {
|
||||
border-color: #343b49;
|
||||
background: #242a35;
|
||||
color: #cbd5e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.process-add-line button:hover {
|
||||
background: #166534;
|
||||
}
|
||||
|
||||
.process-add-line .process-cancel-button:hover {
|
||||
background: #2d3543;
|
||||
}
|
||||
|
||||
.app-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-row-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.app-row .item-icon {
|
||||
display: grid;
|
||||
flex: 0 0 auto;
|
||||
align-self: center;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background: #0d1016;
|
||||
color: #dbeafe;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.app-row .item-icon svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-row,
|
||||
.empty-state,
|
||||
.notice-line {
|
||||
.empty-state {
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background: #131720;
|
||||
@@ -240,30 +414,20 @@ button:disabled {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.notice-line {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
margin-top: 12px;
|
||||
.list-skeleton {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.notice-line strong,
|
||||
.notice-line span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notice-line.success {
|
||||
border-color: rgba(34, 197, 94, 0.42);
|
||||
background: rgba(20, 83, 45, 0.32);
|
||||
}
|
||||
|
||||
.notice-line.error {
|
||||
border-color: rgba(239, 68, 68, 0.42);
|
||||
background: rgba(127, 29, 29, 0.32);
|
||||
}
|
||||
|
||||
.notice-line.info {
|
||||
border-color: rgba(59, 130, 246, 0.42);
|
||||
background: rgba(30, 58, 138, 0.26);
|
||||
.list-skeleton span {
|
||||
min-height: 56px;
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background:
|
||||
linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.12), transparent),
|
||||
#131720;
|
||||
background-size: 220% 100%;
|
||||
animation: shimmer 1.15s linear infinite;
|
||||
}
|
||||
|
||||
.command-row {
|
||||
@@ -299,27 +463,314 @@ button:disabled {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.log-dock {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
z-index: 30;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-height: 48px;
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background: rgba(19, 23, 32, 0.98);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.log-dock.error {
|
||||
border-color: rgba(239, 68, 68, 0.58);
|
||||
}
|
||||
|
||||
.log-dock.success {
|
||||
border-color: rgba(34, 197, 94, 0.58);
|
||||
}
|
||||
|
||||
.log-dock.info {
|
||||
border-color: rgba(59, 130, 246, 0.58);
|
||||
}
|
||||
|
||||
.log-current {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
gap: 10px;
|
||||
align-items: baseline;
|
||||
padding: 0 8px;
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.log-current.hidden {
|
||||
color: #8d99ae;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.log-current.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.log-current strong,
|
||||
.log-current span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.log-current strong {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.log-current span {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.log-muted {
|
||||
color: #8d99ae;
|
||||
}
|
||||
|
||||
.log-toggle {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-height: 34px;
|
||||
border: 1px solid #343b49;
|
||||
border-radius: 4px;
|
||||
background: #242a35;
|
||||
color: #eef2ff;
|
||||
padding: 7px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.log-toggle:hover {
|
||||
background: #2d3543;
|
||||
}
|
||||
|
||||
.log-toggle span {
|
||||
min-width: 22px;
|
||||
border-radius: 4px;
|
||||
background: #1b202b;
|
||||
color: #dbeafe;
|
||||
padding: 2px 6px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.log-history {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
gap: 6px;
|
||||
max-height: 230px;
|
||||
overflow: auto;
|
||||
border-top: 1px solid #2b3342;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.log-history-row {
|
||||
display: grid;
|
||||
grid-template-columns: 76px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background: #0d1016;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.log-history-row.error {
|
||||
border-color: rgba(239, 68, 68, 0.42);
|
||||
}
|
||||
|
||||
.log-history-row.success {
|
||||
border-color: rgba(34, 197, 94, 0.36);
|
||||
}
|
||||
|
||||
.log-history-row.info {
|
||||
border-color: rgba(59, 130, 246, 0.36);
|
||||
}
|
||||
|
||||
.log-history-row time {
|
||||
color: #8d99ae;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.log-history-row strong,
|
||||
.log-history-row span {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.log-history-row span {
|
||||
color: #b6c2d4;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes finder-border-top {
|
||||
0% {
|
||||
left: -116px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
4%,
|
||||
23% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25%,
|
||||
100% {
|
||||
left: calc(100% + 8px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes finder-border-right {
|
||||
0%,
|
||||
25% {
|
||||
top: -72px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
29%,
|
||||
48% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50%,
|
||||
100% {
|
||||
top: calc(100% + 8px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes finder-border-bottom {
|
||||
0%,
|
||||
50% {
|
||||
right: -116px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
54%,
|
||||
73% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
75%,
|
||||
100% {
|
||||
right: calc(100% + 8px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes finder-border-left {
|
||||
0%,
|
||||
75% {
|
||||
bottom: -72px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
79%,
|
||||
98% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
bottom: calc(100% + 8px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
from {
|
||||
background-position: 220% 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: -220% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.simple-shell {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.simple-panel {
|
||||
padding: 14px;
|
||||
padding: 14px 14px 100px;
|
||||
}
|
||||
|
||||
.simple-header,
|
||||
.app-row,
|
||||
.notice-line {
|
||||
.app-row {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.add-line {
|
||||
.add-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.add-tile {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.process-add-line {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.finder-card {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.service-actions {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.service-button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.command-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.log-dock {
|
||||
right: 8px;
|
||||
left: 8px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.log-current {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.log-history-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user