alexei.dolgolyov/notify-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

fix(redesign): make Active Wires pipe visually prominent

Browse Source 
Wire column was content-width (min 100px) so the line vanished between
two wide endpoint blocks. Bumped to minmax(220px, 1.6fr) so the pipe
takes ~60% more space than either side, thickened the line 2→3px,
faded both ends via color-mix transparency stops, added a soft
primary-glow halo plus a 1px specular sheen, and beefed up the count
badge with a rule-strong border / inset highlight / drop shadow so it
reads as a node on the wire. Stacks to a single column below 880px.
This commit is contained in:
Admin
2026-04-25 15:23:30 +03:00
parent 9eb478fdc9
commit cc8d961c33
1 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+page.svelte
+36 -12
View File
@@ -1315,10 +1315,10 @@
} }
.wire { .wire {
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: minmax(0, 1fr) minmax(220px, 1.6fr) minmax(0, 1fr);
gap: 0.85rem; gap: 1rem;
align-items: center; align-items: center;
padding: 0.7rem 0; padding: 0.85rem 0;
} }
.wire + .wire { border-top: 1px dashed var(--color-border); } .wire + .wire { border-top: 1px dashed var(--color-border); }
.wire-from, .wire-to { .wire-from, .wire-to {
@@ -1333,26 +1333,50 @@
.wire-sub { font-size: 0.65rem; color: var(--color-muted-foreground); margin-top: 0.15rem; } .wire-sub { font-size: 0.65rem; color: var(--color-muted-foreground); margin-top: 0.15rem; }
.wire-pipe { .wire-pipe {
position: relative; position: relative;
min-width: 100px;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
height: 22px; height: 26px;
} }
.wire-pipe::before { .wire-pipe::before {
content: ''; content: '';
position: absolute; inset: 50% 0 auto 0; height: 2px; position: absolute; left: 0; right: 0; top: 50%;
background: linear-gradient(90deg, var(--color-primary), var(--color-orchid), var(--color-mint)); height: 3px; transform: translateY(-50%);
opacity: 0.5; background: linear-gradient(90deg,
border-radius: 2px; color-mix(in srgb, var(--color-primary) 35%, transparent),
var(--color-primary),
var(--color-orchid),
var(--color-mint),
color-mix(in srgb, var(--color-mint) 35%, transparent));
opacity: 0.85;
border-radius: 3px;
box-shadow: 0 0 12px -2px var(--color-glow-strong);
}
.wire-pipe::after {
content: '';
position: absolute; left: 0; right: 0; top: 50%;
height: 1px; transform: translateY(-50%);
background: linear-gradient(90deg, transparent 8%, rgba(255,255,255,0.35) 50%, transparent 92%);
pointer-events: none;
} }
.wire-count { .wire-count {
position: relative; z-index: 1; position: relative; z-index: 1;
background: var(--color-glass-elev); background: var(--color-glass-elev);
border: 1px solid var(--color-border); border: 1px solid var(--color-rule-strong);
padding: 0.15rem 0.6rem; padding: 0.2rem 0.7rem;
border-radius: 999px; border-radius: 999px;
font-size: 0.7rem; font-size: 0.72rem;
font-weight: 500;
color: var(--color-foreground); color: var(--color-foreground);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
box-shadow: 0 2px 10px -4px var(--color-glow), inset 0 1px 0 var(--color-highlight);
}
@media (max-width: 880px) {
.wire {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.wire-to { justify-content: flex-start; text-align: left; }
.wire-pipe { height: 18px; }
} }
/* ============================================================ /* ============================================================