Merge branch 'codex/task-057-059'
# Conflicts: # src/shared/versions.ts # test/web/style-boundaries.test.js
This commit is contained in:
@@ -0,0 +1,469 @@
|
||||
.client-traffic-toggle svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.client-traffic-sheet {
|
||||
padding: 54px 72px 72px 34px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.client-traffic {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.client-traffic-header {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
margin: 0 8px 28px;
|
||||
}
|
||||
|
||||
.client-traffic-meta {
|
||||
min-height: 28px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.client-traffic-meta > span,
|
||||
.client-traffic-meta time {
|
||||
color: var(--client-muted);
|
||||
font: var(--type-label);
|
||||
letter-spacing: var(--type-label-tracking);
|
||||
text-transform: var(--type-label-transform);
|
||||
font-variant-numeric: var(--numeric-tabular);
|
||||
}
|
||||
|
||||
.client-traffic-meta time {
|
||||
text-transform: var(--type-label-transform);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.client-traffic-meta button {
|
||||
width: 96px;
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--client-text);
|
||||
font: var(--type-control);
|
||||
letter-spacing: var(--type-control-tracking);
|
||||
text-transform: var(--type-control-transform);
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.client-traffic-meta button:hover,
|
||||
.client-traffic-meta button:focus-visible,
|
||||
.client-traffic-meta button[aria-pressed='true'] {
|
||||
color: var(--client-accent);
|
||||
}
|
||||
|
||||
.client-traffic-meta button:focus-visible {
|
||||
outline: 2px solid var(--client-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.client-traffic-header h2 {
|
||||
margin: 4px 0 0;
|
||||
font: var(--type-drawer-title);
|
||||
letter-spacing: var(--type-drawer-title-tracking);
|
||||
text-transform: var(--type-drawer-title-transform);
|
||||
}
|
||||
|
||||
.client-traffic-header p {
|
||||
max-width: 44ch;
|
||||
color: var(--client-muted);
|
||||
font: var(--type-body);
|
||||
letter-spacing: var(--type-body-tracking);
|
||||
text-transform: var(--type-body-transform);
|
||||
}
|
||||
|
||||
.client-traffic-summary {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0 8px 24px;
|
||||
color: var(--client-text);
|
||||
font: var(--type-data);
|
||||
letter-spacing: var(--type-data-tracking);
|
||||
text-transform: var(--type-data-transform);
|
||||
font-variant-numeric: var(--numeric-tabular);
|
||||
}
|
||||
|
||||
.client-traffic-summary span {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.client-traffic-summary b {
|
||||
min-width: 112px;
|
||||
color: var(--client-muted);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.client-traffic-tools {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin: 0 8px 22px;
|
||||
}
|
||||
|
||||
.client-traffic-search {
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--client-border);
|
||||
color: var(--client-muted);
|
||||
}
|
||||
|
||||
.client-traffic-search:focus-within {
|
||||
border-bottom-color: var(--client-accent);
|
||||
color: var(--client-accent);
|
||||
}
|
||||
|
||||
.client-traffic-search svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 1.7;
|
||||
}
|
||||
|
||||
.client-traffic-search input {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: var(--client-text);
|
||||
font: var(--type-body);
|
||||
letter-spacing: var(--type-body-tracking);
|
||||
text-transform: var(--type-body-transform);
|
||||
}
|
||||
|
||||
.client-traffic-search input::placeholder {
|
||||
color: var(--client-muted);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.client-traffic-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 18px;
|
||||
}
|
||||
|
||||
.client-traffic-filters button {
|
||||
min-height: 36px;
|
||||
padding: 4px 0 2px;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--client-muted);
|
||||
font: var(--type-control);
|
||||
letter-spacing: var(--type-control-tracking);
|
||||
text-transform: var(--type-control-transform);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.client-traffic-filters button:hover,
|
||||
.client-traffic-filters button:focus-visible,
|
||||
.client-traffic-filters button[aria-pressed='true'] {
|
||||
color: var(--client-accent);
|
||||
}
|
||||
|
||||
.client-traffic-filters button[aria-pressed='true'] {
|
||||
border-bottom-color: var(--client-accent);
|
||||
}
|
||||
|
||||
.client-traffic-filters button:focus-visible {
|
||||
outline: 2px solid var(--client-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.client-traffic-retention {
|
||||
min-height: 36px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.client-traffic-retention > span {
|
||||
color: var(--client-muted);
|
||||
font: var(--type-control);
|
||||
letter-spacing: var(--type-control-tracking);
|
||||
text-transform: var(--type-control-transform);
|
||||
}
|
||||
|
||||
.client-traffic-notice,
|
||||
.client-traffic-state,
|
||||
.client-traffic-truncated,
|
||||
.client-traffic-honesty {
|
||||
margin: 0 8px;
|
||||
color: var(--client-muted);
|
||||
font: var(--type-control);
|
||||
letter-spacing: var(--type-control-tracking);
|
||||
text-transform: var(--type-control-transform);
|
||||
}
|
||||
|
||||
.client-traffic-notice {
|
||||
margin-bottom: 14px;
|
||||
color: var(--client-accent);
|
||||
}
|
||||
|
||||
.client-traffic-notice.is-warning {
|
||||
color: oklch(0.68 0.14 72);
|
||||
}
|
||||
|
||||
.client-traffic-state {
|
||||
min-height: 118px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.client-traffic-skeleton {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.client-traffic-skeleton span {
|
||||
height: 58px;
|
||||
background: color-mix(in oklch, var(--client-border) 24%, transparent);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.client-traffic-list {
|
||||
display: grid;
|
||||
margin: 0 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.client-traffic-connection {
|
||||
min-width: 0;
|
||||
box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--client-border) 58%, transparent);
|
||||
animation: client-traffic-connection-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.client-traffic-connection.is-exiting {
|
||||
pointer-events: none;
|
||||
animation: client-traffic-connection-out 240ms cubic-bezier(0.4, 0, 1, 1) both;
|
||||
}
|
||||
|
||||
.client-traffic-connection-summary {
|
||||
width: 100%;
|
||||
min-height: 68px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 54px 154px 18px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--client-text);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.client-traffic-connection-summary:hover,
|
||||
.client-traffic-connection-summary:focus-visible {
|
||||
outline: 0;
|
||||
color: var(--client-accent);
|
||||
}
|
||||
|
||||
.client-traffic-connection-summary:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--client-accent);
|
||||
}
|
||||
|
||||
.client-traffic-identity,
|
||||
.client-traffic-values {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.client-traffic-identity strong {
|
||||
overflow: hidden;
|
||||
font: var(--type-item-title);
|
||||
letter-spacing: var(--type-item-title-tracking);
|
||||
text-overflow: ellipsis;
|
||||
text-transform: var(--type-item-title-transform);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.client-traffic-identity small {
|
||||
overflow: hidden;
|
||||
color: var(--client-muted);
|
||||
font: var(--type-control);
|
||||
letter-spacing: var(--type-control-tracking);
|
||||
text-overflow: ellipsis;
|
||||
text-transform: var(--type-control-transform);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.client-traffic-route {
|
||||
justify-self: start;
|
||||
color: var(--client-muted);
|
||||
font: var(--type-control);
|
||||
letter-spacing: var(--type-control-tracking);
|
||||
text-transform: var(--type-control-transform);
|
||||
}
|
||||
|
||||
.client-traffic-route[data-route='vpn'] {
|
||||
color: var(--harbor-connect);
|
||||
}
|
||||
|
||||
.client-traffic-route[data-route='direct'] {
|
||||
color: var(--harbor-gateway);
|
||||
}
|
||||
|
||||
.client-traffic-values {
|
||||
justify-items: end;
|
||||
font-variant-numeric: var(--numeric-tabular);
|
||||
}
|
||||
|
||||
.client-traffic-values strong,
|
||||
.client-traffic-values small {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.client-traffic-values strong {
|
||||
font: var(--type-control);
|
||||
letter-spacing: var(--type-control-tracking);
|
||||
text-transform: var(--type-control-transform);
|
||||
}
|
||||
|
||||
.client-traffic-values small {
|
||||
color: var(--client-muted);
|
||||
font: var(--type-micro);
|
||||
letter-spacing: var(--type-micro-tracking);
|
||||
text-transform: var(--type-micro-transform);
|
||||
}
|
||||
|
||||
.client-traffic-values span:first-child {
|
||||
color: var(--harbor-connect);
|
||||
}
|
||||
|
||||
.client-traffic-values span:last-child {
|
||||
color: var(--harbor-gateway);
|
||||
}
|
||||
|
||||
.client-traffic-chevron {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 1.6;
|
||||
}
|
||||
|
||||
.client-traffic-details {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
margin: 0;
|
||||
padding: 4px 0 16px;
|
||||
animation: client-traffic-details-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.client-traffic-details > div {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 82px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.client-traffic-details dt,
|
||||
.client-traffic-details dd {
|
||||
margin: 0;
|
||||
font: var(--type-control);
|
||||
letter-spacing: var(--type-control-tracking);
|
||||
text-transform: var(--type-control-transform);
|
||||
}
|
||||
|
||||
.client-traffic-details dt {
|
||||
color: var(--client-muted);
|
||||
}
|
||||
|
||||
.client-traffic-details dd {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--client-text);
|
||||
}
|
||||
|
||||
.client-traffic-truncated {
|
||||
padding-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.client-traffic-honesty {
|
||||
margin-top: 26px;
|
||||
padding-top: 16px;
|
||||
box-shadow: inset 0 1px 0 color-mix(in oklch, var(--client-border) 46%, transparent);
|
||||
}
|
||||
|
||||
@keyframes client-traffic-details-in {
|
||||
from { opacity: 0; transform: translateY(-5px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes client-traffic-connection-in {
|
||||
from { opacity: 0; transform: translateY(-6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes client-traffic-connection-out {
|
||||
from { opacity: 1; transform: translateY(0); }
|
||||
to { opacity: 0; transform: translateY(4px); }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.client-traffic-sheet {
|
||||
padding: 40px 58px 60px 18px;
|
||||
}
|
||||
|
||||
.client-traffic-meta {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.client-traffic-meta > span {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.client-traffic-connection-summary {
|
||||
grid-template-columns: minmax(0, 1fr) auto 18px;
|
||||
}
|
||||
|
||||
.client-traffic-values {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.client-traffic-values strong,
|
||||
.client-traffic-values small {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.client-traffic-details > div {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.client-traffic-connection,
|
||||
.client-traffic-details {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -10,5 +10,6 @@
|
||||
@import './features/diagnostics.css';
|
||||
@import './features/failover.css';
|
||||
@import './features/activity-journal.css';
|
||||
@import './features/traffic.css';
|
||||
@import './layout.css';
|
||||
@import './themes.css';
|
||||
|
||||
Reference in New Issue
Block a user