mirror of
https://github.com/anten-ka/gotelegram_pro.git
synced 2026-05-20 01:26:02 +00:00
v2.5.0: refine admin traffic and port status
This commit is contained in:
Виталий Литвинов
@@ -273,7 +273,7 @@ h2 {
|
||||
.visual-overview {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
|
||||
grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
|
||||
gap: 20px;
|
||||
min-height: 170px;
|
||||
overflow: hidden;
|
||||
@@ -343,6 +343,82 @@ h2 {
|
||||
.node-proxy { right: 24px; top: 50%; transform: translateY(-50%); }
|
||||
.node-admin { left: 50%; bottom: 18px; transform: translateX(-50%); }
|
||||
|
||||
.port-map {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
min-height: 128px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--panel);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.port-map-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.port-map-head span {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--blue) 14%, transparent);
|
||||
color: var(--blue);
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.port-status {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.port-status.ok { color: var(--green); }
|
||||
.port-status.warn { color: var(--amber); }
|
||||
.port-status.error { color: var(--red); }
|
||||
|
||||
.port-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.port-listener,
|
||||
.port-empty {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--panel-soft);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.port-listener strong,
|
||||
.port-listener span {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.port-listener span,
|
||||
.port-listener small,
|
||||
.port-empty {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.port-listener.role-mtproxy { border-left: 4px solid var(--green); }
|
||||
.port-listener.role-site { border-left: 4px solid var(--blue); }
|
||||
.port-listener.role-xray { border-left: 4px solid var(--violet); }
|
||||
.port-listener.role-amneziawg { border-left: 4px solid var(--amber); }
|
||||
|
||||
.eyebrow {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
@@ -371,6 +447,30 @@ h2 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.with-help {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-hint {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 50%;
|
||||
background: var(--panel-soft);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.info-hint:focus {
|
||||
outline: 3px solid color-mix(in srgb, var(--blue) 18%, transparent);
|
||||
}
|
||||
|
||||
.panel-actions,
|
||||
.inline-form {
|
||||
display: flex;
|
||||
@@ -553,6 +653,44 @@ h2 {
|
||||
.health-stopped { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }
|
||||
.health-not_installed { background: var(--panel-strong); color: var(--muted); }
|
||||
|
||||
.traffic-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.segmented {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--panel-strong);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.segmented button {
|
||||
min-height: 32px;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
box-shadow: none;
|
||||
padding: 6px 10px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.segmented button:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.segmented button.active {
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
.traffic-chart {
|
||||
width: 100%;
|
||||
min-height: 320px;
|
||||
@@ -562,6 +700,11 @@ h2 {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.traffic-chart.is-hidden,
|
||||
.table-wrap.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.traffic-chart svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -645,6 +788,10 @@ tr:last-child td {
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.pending-row {
|
||||
outline: 2px solid color-mix(in srgb, var(--blue) 16%, transparent);
|
||||
}
|
||||
|
||||
td code {
|
||||
display: inline-block;
|
||||
max-width: 320px;
|
||||
@@ -934,6 +1081,24 @@ td small {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.traffic-controls,
|
||||
.segmented {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.traffic-controls {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.segmented {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.segmented button {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.inline-form input,
|
||||
.inline-form select,
|
||||
.inline-form button,
|
||||
@@ -1008,7 +1173,9 @@ td small {
|
||||
|
||||
.backup-item,
|
||||
.event,
|
||||
.settings-list > div {
|
||||
.settings-list > div,
|
||||
.port-listener,
|
||||
.port-empty {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user