34 lines
1.4 KiB
CSS
34 lines
1.4 KiB
CSS
.container { container-type: inline-size; }
|
|
.header { display: none; }
|
|
.serverName { flex: 1 1 160px; }
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
grid-template-areas: "name name" "status toggle" "iface filter" "rtt loss" "bt graph" "star actions";
|
|
}
|
|
.row > * { min-width: 0; overflow-wrap: anywhere; }
|
|
.name { grid-area: name; }
|
|
.status { grid-area: status; display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
|
|
.toggle { grid-area: toggle; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: flex-end; }
|
|
.iface { grid-area: iface; }
|
|
.filter { grid-area: filter; }
|
|
.rtt { grid-area: rtt; }
|
|
.loss { grid-area: loss; }
|
|
.bt { grid-area: bt; }
|
|
.graph { grid-area: graph; }
|
|
.star { grid-area: star; display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
|
|
.actions { grid-area: actions; }
|
|
.label { display: block; font-size: 0.625rem; color: var(--muted-foreground); }
|
|
.actions button, .star button { min-width: 2rem; min-height: 2rem; }
|
|
|
|
@container (min-width: 1100px) {
|
|
.header, .row {
|
|
display: grid;
|
|
grid-template-columns: 36px 16px 130px 120px 140px 70px 44px minmax(132px, 1fr) 96px 36px 72px;
|
|
grid-template-areas: "toggle status iface name filter rtt loss bt graph star actions";
|
|
}
|
|
.label, .mobile { display: none; }
|
|
.toggle, .star { justify-content: center; }
|
|
.actions button, .star button { min-width: unset; min-height: unset; }
|
|
}
|