141 lines
2.2 KiB
CSS
141 lines
2.2 KiB
CSS
.bar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-2) var(--space-3);
|
|
min-height: var(--bar-h);
|
|
padding: 0 var(--space-4);
|
|
padding-top: env(safe-area-inset-top);
|
|
background: var(--glass);
|
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
-webkit-backdrop-filter: var(--blur-bar);
|
|
backdrop-filter: var(--blur-bar);
|
|
view-transition-name: bar-top;
|
|
}
|
|
|
|
/* 底边渐隐,代替一条硬分隔线 */
|
|
.bar::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 100% 0 auto;
|
|
height: 14px;
|
|
background: var(--fade-down);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.raw::after {
|
|
height: 3px;
|
|
background: var(--warn-bar);
|
|
}
|
|
|
|
.id {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
}
|
|
|
|
.name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
font-family: var(--font-mono);
|
|
font-weight: 600;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge,
|
|
.badgeWarn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: 1px var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge {
|
|
background: var(--ok-soft);
|
|
color: var(--ok);
|
|
}
|
|
|
|
.badgeWarn {
|
|
background: var(--warn-soft);
|
|
color: var(--warn);
|
|
}
|
|
|
|
.presence {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-1) var(--space-2);
|
|
border: 0;
|
|
border-radius: var(--radius-md);
|
|
background: transparent;
|
|
color: var(--text-dim);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.presence:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.dots {
|
|
display: inline-flex;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.on,
|
|
.off {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.on {
|
|
background: var(--ok);
|
|
}
|
|
|
|
.off {
|
|
background: var(--line-strong);
|
|
}
|
|
|
|
.active {
|
|
background: var(--accent-soft);
|
|
color: var(--busy);
|
|
}
|
|
|
|
.conn {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.online {
|
|
display: none;
|
|
}
|
|
|
|
.reconnecting {
|
|
color: var(--busy);
|
|
}
|
|
|
|
.offline {
|
|
color: var(--danger);
|
|
}
|
|
|
|
/* 窄屏(如 iPhone SE、小屏 Android):只留在线点,收起数字与徽标文字 */
|
|
@media (width < 360px) {
|
|
.count {
|
|
display: none;
|
|
}
|
|
|
|
.bar {
|
|
gap: var(--space-1);
|
|
padding-inline: var(--space-3);
|
|
}
|
|
}
|