Refine proxy routing and UI state handling
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
:root {
|
||||
--app-footer-height: 54px;
|
||||
--app-change-dock-height: 0px;
|
||||
--change-row-count: 1;
|
||||
--app-header-row-height: 50px;
|
||||
--app-tab-height: 46px;
|
||||
--app-header-height: calc(var(--app-header-row-height) + var(--app-tab-height));
|
||||
@@ -630,7 +632,7 @@ button:disabled {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-service-text > strong,
|
||||
.ui-service-title-line > strong,
|
||||
.ui-service-text > span {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
@@ -640,12 +642,22 @@ button:disabled {
|
||||
color: #8d99ae;
|
||||
}
|
||||
|
||||
.ui-service-title-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-service-title-line > strong {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-service-inline-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex: 0 0 auto;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.ui-service-actions {
|
||||
@@ -680,14 +692,18 @@ button:disabled {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #101216;
|
||||
padding: var(--app-header-height) 0 var(--app-footer-height);
|
||||
padding: var(--app-header-height) 0 calc(var(--app-footer-height) + var(--app-change-dock-height));
|
||||
}
|
||||
|
||||
.simple-shell.has-change-dock {
|
||||
--app-change-dock-height: clamp(60px, calc(20px + (var(--change-row-count) * 26px)), 220px);
|
||||
}
|
||||
|
||||
.simple-panel {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
min-height: 0;
|
||||
height: calc(100vh - var(--app-header-height) - var(--app-footer-height));
|
||||
height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - var(--app-change-dock-height));
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
@@ -871,12 +887,11 @@ button:disabled {
|
||||
}
|
||||
|
||||
.proxy-overview {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
display: block;
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background: #111720;
|
||||
padding: 10px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.proxy-overview.ok {
|
||||
@@ -895,63 +910,34 @@ button:disabled {
|
||||
border-color: rgba(59, 130, 246, 0.42);
|
||||
}
|
||||
|
||||
.proxy-overview-head {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.proxy-overview-head span {
|
||||
display: block;
|
||||
color: #8d99ae;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.proxy-overview-head h2 {
|
||||
margin: 2px 0 0;
|
||||
color: #eef2ff;
|
||||
font-size: 17px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.proxy-overview-head > strong {
|
||||
min-width: 0;
|
||||
color: #bfdbfe;
|
||||
font-size: 13px;
|
||||
overflow-wrap: anywhere;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.summary-panel {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-hero {
|
||||
.summary-status-control {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
align-items: center;
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background: #151923;
|
||||
padding: 14px;
|
||||
padding: 13px 14px;
|
||||
}
|
||||
|
||||
.summary-hero.ok {
|
||||
.summary-status-control.ok {
|
||||
border-color: rgba(34, 197, 94, 0.44);
|
||||
}
|
||||
|
||||
.summary-hero.warning {
|
||||
.summary-status-control.warning {
|
||||
border-color: rgba(245, 158, 11, 0.48);
|
||||
}
|
||||
|
||||
.summary-hero.error {
|
||||
.summary-status-control.error {
|
||||
border-color: rgba(239, 68, 68, 0.52);
|
||||
}
|
||||
|
||||
.summary-hero.checking {
|
||||
.summary-status-control.checking {
|
||||
border-color: rgba(59, 130, 246, 0.54);
|
||||
}
|
||||
|
||||
@@ -985,14 +971,18 @@ button:disabled {
|
||||
animation: spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.summary-hero span,
|
||||
.summary-status-copy span,
|
||||
.summary-card-label {
|
||||
color: #8d99ae;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-hero strong {
|
||||
.summary-status-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.summary-status-copy strong {
|
||||
display: block;
|
||||
color: #f8fafc;
|
||||
font-size: 22px;
|
||||
@@ -1000,14 +990,17 @@ button:disabled {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.summary-hero p {
|
||||
.summary-status-copy p {
|
||||
color: #b6c2d4;
|
||||
margin: 5px 0 0;
|
||||
margin: 4px 0 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.summary-readout,
|
||||
.summary-draft {
|
||||
.summary-status-button {
|
||||
min-width: 148px;
|
||||
}
|
||||
|
||||
.summary-readout {
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 4px;
|
||||
background: #131720;
|
||||
@@ -1021,16 +1014,14 @@ button:disabled {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-readout-head span,
|
||||
.summary-draft span {
|
||||
.summary-readout-head span {
|
||||
display: block;
|
||||
color: #8d99ae;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-readout-head strong,
|
||||
.summary-draft strong {
|
||||
.summary-readout-head strong {
|
||||
display: block;
|
||||
color: #f8fafc;
|
||||
font-size: 18px;
|
||||
@@ -1038,24 +1029,6 @@ button:disabled {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.summary-pill {
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 999px;
|
||||
background: #1a202b;
|
||||
padding: 5px 9px;
|
||||
}
|
||||
|
||||
.summary-pill.ok {
|
||||
border-color: rgba(34, 197, 94, 0.38);
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.summary-pill.warning {
|
||||
border-color: rgba(245, 158, 11, 0.46);
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
.summary-lines {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
@@ -1090,46 +1063,6 @@ button:disabled {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.summary-draft {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.summary-draft.ok {
|
||||
border-color: rgba(34, 197, 94, 0.34);
|
||||
}
|
||||
|
||||
.summary-draft.warning {
|
||||
border-color: rgba(245, 158, 11, 0.48);
|
||||
background: rgba(120, 53, 15, 0.16);
|
||||
}
|
||||
|
||||
.summary-draft p {
|
||||
color: #b6c2d4;
|
||||
margin: 5px 0 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.summary-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-actions button {
|
||||
min-height: 34px;
|
||||
border: 1px solid #343b49;
|
||||
border-radius: 4px;
|
||||
background: #242a35;
|
||||
color: #eef2ff;
|
||||
padding: 7px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.summary-actions button:hover {
|
||||
background: #2d3543;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -1526,41 +1459,19 @@ button.summary-card:hover {
|
||||
|
||||
.connection-check {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) 132px;
|
||||
gap: 8px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.connection-check-main,
|
||||
.connection-endpoint {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 3px;
|
||||
grid-template-columns: minmax(190px, 1fr) minmax(220px, auto) minmax(132px, auto) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
min-height: 46px;
|
||||
border: 1px solid #263040;
|
||||
border-radius: 4px;
|
||||
background: #0d1016;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.connection-endpoint {
|
||||
cursor: pointer;
|
||||
.connection-check-status {
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.connection-endpoint:hover {
|
||||
border-color: #3b82f6;
|
||||
background: #101827;
|
||||
}
|
||||
|
||||
.connection-check-main > span,
|
||||
.connection-endpoint > span {
|
||||
color: #8d99ae;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.connection-check-main strong,
|
||||
.connection-check-status strong,
|
||||
.connection-endpoint strong {
|
||||
min-width: 0;
|
||||
color: #eef2ff;
|
||||
@@ -1569,14 +1480,101 @@ button.summary-card:hover {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.connection-check-main p {
|
||||
.connection-check-status > span {
|
||||
color: #8d99ae;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.connection-check-status p {
|
||||
color: #9aa8bd;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.connection-probes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.connection-probe {
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 24px;
|
||||
max-width: 210px;
|
||||
border: 1px solid #263040;
|
||||
border-radius: 4px;
|
||||
background: #0d1016;
|
||||
padding: 3px 7px;
|
||||
color: #b6c2d4;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.connection-probe.ok {
|
||||
border-color: rgba(34, 197, 94, 0.28);
|
||||
}
|
||||
|
||||
.connection-probe.warning {
|
||||
border-color: rgba(245, 158, 11, 0.34);
|
||||
}
|
||||
|
||||
.connection-probe.error {
|
||||
border-color: rgba(239, 68, 68, 0.34);
|
||||
}
|
||||
|
||||
.connection-probe strong,
|
||||
.connection-probe span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.connection-probe strong {
|
||||
color: #eef2ff;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.connection-probe.ok strong {
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.connection-probe.error strong {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.connection-endpoint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 132px;
|
||||
max-width: 260px;
|
||||
min-height: 34px;
|
||||
border: 1px solid #263040;
|
||||
border-radius: 4px;
|
||||
background: #0d1016;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.connection-endpoint:hover {
|
||||
border-color: #3b82f6;
|
||||
background: #101827;
|
||||
}
|
||||
|
||||
.connection-check .ui-button {
|
||||
width: 100%;
|
||||
width: auto;
|
||||
min-width: 104px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.external-proxy-card {
|
||||
@@ -1631,18 +1629,19 @@ button.summary-card:hover {
|
||||
|
||||
.setup-summary {
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
place-items: center;
|
||||
width: 22px;
|
||||
min-width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #263040;
|
||||
border-radius: 4px;
|
||||
border-radius: 999px;
|
||||
background: #111720;
|
||||
color: #bfdbfe;
|
||||
cursor: pointer;
|
||||
padding: 4px 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.setup-summary:hover {
|
||||
@@ -1650,9 +1649,9 @@ button.summary-card:hover {
|
||||
background: #162033;
|
||||
}
|
||||
|
||||
.setup-summary strong {
|
||||
.setup-summary-glyph {
|
||||
color: #dbeafe;
|
||||
font-size: 11px;
|
||||
transform: translateY(-0.5px);
|
||||
}
|
||||
|
||||
.route-switch {
|
||||
@@ -1731,17 +1730,20 @@ button.summary-card:hover {
|
||||
|
||||
.singbox-workspace-actions {
|
||||
justify-content: flex-end;
|
||||
gap: 7px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.singbox-workspace-actions .ui-button {
|
||||
.singbox-workspace-actions .ui-icon-button {
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
color: #dbeafe;
|
||||
}
|
||||
|
||||
.server-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
@@ -1758,6 +1760,13 @@ button.summary-card:hover {
|
||||
padding: 7px 9px;
|
||||
}
|
||||
|
||||
.server-row .ui-icon-button {
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
min-height: 30px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.server-row.selected {
|
||||
border-color: #2563eb;
|
||||
background: #17213a;
|
||||
@@ -1771,8 +1780,7 @@ button.summary-card:hover {
|
||||
border-color: rgba(239, 68, 68, 0.42);
|
||||
}
|
||||
|
||||
.server-select-button,
|
||||
.server-ping-button {
|
||||
.server-select-button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
@@ -1789,20 +1797,6 @@ button.summary-card:hover {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.server-ping-button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
border: 1px solid #263040;
|
||||
border-radius: 4px;
|
||||
color: #bfdbfe;
|
||||
}
|
||||
|
||||
.server-ping-button:hover {
|
||||
background: #1d2735;
|
||||
}
|
||||
|
||||
.server-select-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@@ -1922,22 +1916,6 @@ button.summary-card:hover {
|
||||
animation: spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.apply-state {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
margin-top: 14px;
|
||||
border: 1px solid rgba(245, 158, 11, 0.48);
|
||||
border-radius: 4px;
|
||||
background: rgba(120, 53, 15, 0.2);
|
||||
color: #fcd34d;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.apply-state span {
|
||||
color: #d6b875;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.apps-section {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
@@ -1950,7 +1928,7 @@ button.summary-card:hover {
|
||||
|
||||
.apps-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
min-height: 48px;
|
||||
@@ -1962,30 +1940,112 @@ button.summary-card:hover {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.apps-config-actions {
|
||||
.changes-dock {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: var(--app-footer-height);
|
||||
left: 0;
|
||||
z-index: 38;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
height: var(--app-change-dock-height);
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #2b3342;
|
||||
background: #141820;
|
||||
box-shadow: 0 -18px 36px rgba(0, 0, 0, 0.22);
|
||||
padding: 8px 18px;
|
||||
}
|
||||
|
||||
.apps-config-actions .apply-state {
|
||||
margin: 0;
|
||||
.changes-dock-main {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.apps-config-actions .command-row {
|
||||
grid-template-columns: minmax(0, 1fr) 118px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.apps-config-actions .apply-button,
|
||||
.apps-config-actions .open-config-button {
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.apps-config-actions .config-path {
|
||||
margin: 0;
|
||||
.change-label {
|
||||
color: #8d99ae;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.changes-list {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.change-row {
|
||||
display: grid;
|
||||
grid-template-columns: 104px minmax(0, 1fr);
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
min-height: 21px;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.change-values {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
color: #a9b4c5;
|
||||
}
|
||||
|
||||
.change-values span:not(.change-arrow),
|
||||
.change-values strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.change-values strong {
|
||||
color: #eef2ff;
|
||||
}
|
||||
|
||||
.change-row.added .change-values strong {
|
||||
color: #bbf7d0;
|
||||
}
|
||||
|
||||
.change-row.removed .change-values strong {
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
.change-arrow {
|
||||
flex: 0 0 auto;
|
||||
color: #64748b;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.changes-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-content: center;
|
||||
justify-items: end;
|
||||
}
|
||||
|
||||
.changes-actions .ui-button {
|
||||
width: auto;
|
||||
min-width: 178px;
|
||||
max-width: 220px;
|
||||
min-height: 36px;
|
||||
padding-inline: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.changes-actions .ui-button-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.section-head span {
|
||||
@@ -2277,38 +2337,10 @@ button.summary-card:hover {
|
||||
animation: shimmer 1.15s linear infinite;
|
||||
}
|
||||
|
||||
.command-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 132px;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.command-row .ui-button,
|
||||
.subscription-line .ui-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.apps-config-actions .ui-button {
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.apply-button {
|
||||
min-height: 46px;
|
||||
width: 100%;
|
||||
border: 1px solid #16a34a;
|
||||
border-radius: 4px;
|
||||
background: #22c55e;
|
||||
color: #04130a;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.apply-button:hover {
|
||||
background: #4ade80;
|
||||
}
|
||||
|
||||
.open-config-button {
|
||||
min-height: 46px;
|
||||
width: 100%;
|
||||
@@ -2618,11 +2650,15 @@ button.summary-card:hover {
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.simple-shell {
|
||||
padding: var(--app-header-height) 0 var(--app-footer-height);
|
||||
padding: var(--app-header-height) 0 calc(var(--app-footer-height) + var(--app-change-dock-height));
|
||||
}
|
||||
|
||||
.simple-shell.has-change-dock {
|
||||
--app-change-dock-height: clamp(104px, calc(82px + (var(--change-row-count) * 25px)), 260px);
|
||||
}
|
||||
|
||||
.simple-panel {
|
||||
height: calc(100vh - var(--app-header-height) - var(--app-footer-height));
|
||||
height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - var(--app-change-dock-height));
|
||||
padding: 12px 12px 16px;
|
||||
}
|
||||
|
||||
@@ -2678,13 +2714,8 @@ button.summary-card:hover {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.proxy-overview-head {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel-section-head > strong,
|
||||
.proxy-overview-head > strong {
|
||||
.proxy-overview,
|
||||
.panel-section-head > strong {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -2697,18 +2728,22 @@ button.summary-card:hover {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.summary-pill {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.summary-lines div {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.summary-actions {
|
||||
display: grid;
|
||||
.summary-status-control {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.summary-status-dot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.summary-status-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.setup-strip {
|
||||
@@ -2725,16 +2760,35 @@ button.summary-card:hover {
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.apps-config-actions .command-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.app-add-skeleton {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.connection-check {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.connection-probes {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.connection-probe {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.connection-check-status p {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.connection-endpoint {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.connection-check .ui-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.route-chain {
|
||||
@@ -2814,19 +2868,41 @@ button.summary-card:hover {
|
||||
}
|
||||
|
||||
.singbox-workspace-actions {
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.singbox-workspace-actions .ui-button {
|
||||
flex: 1;
|
||||
.singbox-workspace-actions .ui-icon-button {
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.server-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
.command-row {
|
||||
.changes-dock {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.changes-dock-main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.changes-list {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.change-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.change-values {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.log-dock {
|
||||
|
||||
Reference in New Issue
Block a user